.poi-web { grid-column: 1 / -1; background: #181818; border-radius: 20px; padding: 20px; color: #fff; }
.poi-web-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.poi-web button, .poi-web-card-link { border: 0; border-radius: 20px; background: #bc382c; color: white; padding: 10px 18px; cursor: pointer; }
.poi-web button:disabled { opacity: .5; cursor: wait; }
.poi-web-layout { position: relative; display: grid; grid-template-columns: 230px 1fr; gap: 12px; }
.poi-web [hidden] { display: none !important; }
#poi-web-map { min-height: 520px; border-radius: 14px; position: relative; z-index: 0; }
.poi-web-filters { max-height: 520px; overflow: auto; padding: 8px; }
.poi-web-category { padding: 8px 0; border-bottom: 1px solid #444; }
.poi-web-category-heading { display: flex; align-items: center; gap: 6px; }
.poi-web-category-heading label { flex: 1; min-width: 0; cursor: pointer; }
.poi-web-category-heading button { flex-shrink: 0; width: 32px; height: 32px; padding: 0; font-size: 20px; }
.poi-web-filters label { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.poi-web-filters input[type="checkbox"] { accent-color: #bc382c; width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex: 0 0 18px; box-sizing: border-box; margin: 0; }
.poi-web-filters img { width: 28px; height: 28px; flex-shrink: 0; padding: 0; }
.poi-web-filters .poi-web-children { padding-left: 22px; }
.poi-web-filters .poi-web-muted { opacity: .5; }
#poi-web-card { position: absolute; z-index: 2; right: 12px; top: 12px; width: min(360px, 90%); max-height: 490px; overflow: auto; background: white; color: #151515; padding: 20px; border-radius: 18px; box-shadow: 0 4px 20px #0005; }
.poi-web .poi-web-cluster { background: #bc382c; color: white; border: 2px solid white; border-radius: 50%; display: grid; place-items: center; font: bold 14px Arial,sans-serif; }
#poi-web-card { overflow-anchor: none; }
#poi-web-card h3 { overflow-wrap: anywhere; }
#poi-web-card p { white-space: pre-wrap; }
.poi-web-card-toolbar { position: sticky; top: -20px; z-index: 3; display: flex; justify-content: flex-end; padding: 6px 0; background: #fff; }
.poi-web-card-toolbar button { width: 36px; height: 36px; padding: 0; font: 24px/1 Arial,sans-serif; display: grid; place-items: center; flex-shrink: 0; }
#poi-web-card > button:not(:first-child) { display: block; margin: 8px 0; }
.poi-web-brand { position: relative; aspect-ratio: 3 / 1; background: #eee; border-radius: 12px; }
.poi-web-brand--logo { margin-bottom: 36px; }
.poi-web-brand--plain { background: transparent; aspect-ratio: auto; height: 72px; }
.poi-web-background { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.poi-web-logo { position: absolute; bottom: -24px; left: 12px; width: 84px; height: 84px; border: 4px solid white; background: white; border-radius: 14px; object-fit: contain; box-shadow: 0 2px 8px #0002; }
.poi-web-photos { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x proximity; padding-bottom: 8px; }
.poi-web-photos button { flex: 0 0 120px; padding: 0; background: #eee; border-radius: 10px; overflow: hidden; scroll-snap-align: start; color: #222; }
.poi-web-photos img { display: block; width: 120px; height: 90px; object-fit: cover; }
.poi-web-viewer { padding: 16px; border: 0; background: #151515; color: white; width: min(1000px, 95vw); max-height: 94vh; border-radius: 16px; }
.poi-web-viewer::backdrop { background: #000c; }
.poi-web-viewer > div { display: flex; align-items: center; justify-content: center; min-height: 180px; }
.poi-web-viewer img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.poi-web-viewer button { position: absolute; border: 0; border-radius: 50%; background: #bc382c; color: #fff; width: 44px; height: 44px; font-size: 28px; cursor: pointer; }
.poi-web-viewer button:first-child { right: 12px; top: 12px; z-index: 1; }
.poi-web-viewer button:nth-child(2) { left: 12px; top: 50%; }
.poi-web-viewer button:last-child { right: 12px; top: 50%; }
.poi-web-card-link { display: inline-block; margin: 4px; text-decoration: none; }
@media (max-width: 760px) { .poi-web-layout { grid-template-columns: 1fr; } .poi-web-filters { max-height: 210px; } #poi-web-map { min-height: 430px; } #poi-web-card { top: auto; bottom: 12px; max-height: 380px; } }
.poi-web-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }