/* Smartbob Installers Map — uses design tokens from tokens.css */

.sb-map {
    font-family: var(--sb-font-family);
    color: var(--sb-text-default);
    background: var(--sb-bg-page);
}

/* Hero markup was migrated to Tailwind utility classes in template.php
   (matching theme/shop hero pattern: bg-neutral-900, lg:rounded-lg, etc.),
   so the legacy .sb-map__hero / __hero-inner / __hero-title / __hero-subtitle
   rules were removed. */

/* ---------- Body ---------- */
.sb-map__body {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sb-space-8) var(--sb-component-padding-lg);
}

/* ---------- Toolbar ---------- */
.sb-map__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-gap-md) var(--sb-gap-lg);
    margin-bottom: var(--sb-space-6);
    padding: var(--sb-component-padding-md);
    background: var(--sb-bg-surface);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-sm);
    position: sticky;
    top: var(--sb-space-3);
    z-index: 10;
}

.sb-map__toolbar-search {
    display: flex;
    align-items: center;
    gap: var(--sb-gap-sm);
    flex: 1 1 280px;
    min-width: 220px;
    background: var(--sb-bg-surface);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-lg);
    padding: var(--sb-space-2) var(--sb-component-padding-md);
    transition: border-color 0.15s ease;
    cursor: text;
}

.sb-map__toolbar-search:focus-within {
    border-color: var(--sb-border-focus);
}

.sb-map__toolbar-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-muted);
    flex-shrink: 0;
}

.sb-map__toolbar-search-input {
    flex: 1;
    /* Theme has input[type="search"] { border: 1px solid #ccc; ... } with higher
       specificity than our class, so we force-override it. */
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-default) !important;
    min-width: 0;
    padding: var(--sb-space-1) 0 !important;
    box-shadow: none !important;
    /* Strip native search input styling (border, X button, rounded corners) */
    -webkit-appearance: none;
    appearance: none;
}

.sb-map__toolbar-search-input::placeholder {
    color: var(--sb-text-muted);
}

.sb-map__toolbar-search-input::-webkit-search-decoration,
.sb-map__toolbar-search-input::-webkit-search-cancel-button,
.sb-map__toolbar-search-input::-webkit-search-results-button,
.sb-map__toolbar-search-input::-webkit-search-results-decoration {
    display: none;
}

.sb-map__count {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-muted);
    white-space: nowrap;
}

.sb-map__count strong {
    color: var(--sb-text-default);
    font-weight: var(--sb-font-weight-bold);
}

.sb-map__filters {
    display: flex;
    align-items: center;
    gap: var(--sb-gap-sm);
    flex-wrap: wrap;
    min-width: 0;
}

.sb-map__filters-label {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-muted);
    flex-shrink: 0;
}

.sb-map__chips {
    display: flex;
    gap: var(--sb-gap-sm);
    flex-wrap: wrap;
    min-width: 0;
}

@media (max-width: 900px) {
    .sb-map__toolbar-search,
    .sb-map__count,
    .sb-map__filters {
        flex-basis: 100%;
    }
    .sb-map__filters {
        flex-wrap: nowrap;
    }
    .sb-map__chips {
        flex: 1;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .sb-map__chips::-webkit-scrollbar {
        display: none;
    }
    .sb-map__chip {
        white-space: nowrap;
    }
}

.sb-map__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-full);
    background: var(--sb-bg-surface);
    color: var(--sb-text-default);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.sb-map__chip:hover {
    border-color: var(--sb-action-primary);
    color: var(--sb-action-primary);
}

.sb-map__chip.is-active {
    background: var(--sb-color-primary-800);
    border-color: var(--sb-color-primary-800);
    color: var(--sb-text-inverse);
}

.sb-map__chip.is-active:hover {
    background: var(--sb-color-primary-900);
    border-color: var(--sb-color-primary-900);
    color: var(--sb-text-inverse);
}

.sb-map__chip-x {
    display: none;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
}

.sb-map__chip.is-active .sb-map__chip-x {
    display: inline;
}

.sb-map__clear {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2) var(--sb-component-padding-sm);
    border: 0;
    background: transparent;
    color: var(--sb-text-muted);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    border-radius: var(--sb-radius-lg);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.sb-map__clear:hover {
    color: var(--sb-text-default);
    background: var(--sb-color-neutral-150);
}

.sb-map__clear[hidden] {
    display: none;
}

/* ---------- Layout ---------- */
.sb-map__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sb-gap-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .sb-map__layout {
        /* List is positioned fixed (bottom sheet) on mobile and effectively
           taken out of flow, so the grid only contains the map canvas. */
        grid-template-columns: 1fr;
    }
}

/* ---------- Mobile fullscreen overlay + placeholder ---------- */
.sb-map__mobile-trigger {
    display: none;
}

.sb-map__fullscreen-close {
    display: none;
}

@media (max-width: 900px) {
    /* Placeholder visible on mobile in place of the inline map. Tap opens
       the fullscreen overlay so Leaflet doesn't hijack the page scroll.
       Background is a flat OSM-style preview image. */
    .sb-map__mobile-trigger {
        display: flex;
        position: relative;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sb-space-2);
        min-height: 220px;
        padding: var(--sb-space-8) var(--sb-space-4);
        margin: 0 0 var(--sb-space-4);
        border: 0;
        border-radius: var(--sb-radius-xl);
        background: url('../images/map-placeholder.png') center/cover no-repeat;
        color: var(--sb-text-default);
        font-family: var(--sb-font-family);
        cursor: pointer;
        overflow: hidden;
        transition: filter 0.15s ease;
    }

    /* Subtle white tint + blur so map artefacts (pixelation, tile seams) are
       softened and the CTA on top stays crisp. */
    .sb-map__mobile-trigger::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: none;
    }

    .sb-map__mobile-trigger > * {
        position: relative;
        z-index: 1;
    }

    .sb-map__mobile-trigger:hover,
    .sb-map__mobile-trigger:active {
        filter: brightness(0.95);
    }

    /* The inner CTA uses theme's .sb-btn / .sb-btn-primary classes for
       visual consistency with the rest of the storefront. Just lift the
       drop shadow a bit because it sits over a busy map image. */
    .sb-map__mobile-trigger .sb-btn {
        box-shadow: var(--sb-shadow-lg);
    }

    /* Inline mobile view: layout shows the list as a normal column under the
       toolbar (mapa-canvas + close button stay hidden until JS opens the
       overlay). Layout itself is a single-column grid. */
    .sb-map__layout {
        grid-template-columns: 1fr;
    }

    /* Hide map canvas + close button inline — they only render in overlay. */
    .sb-map__layout:not(.is-open) .sb-map__canvas,
    .sb-map__layout:not(.is-open) .sb-map__fullscreen-close {
        display: none;
    }

    /* Inline list grows to its natural height — no inner scroll, the page
       scrolls instead. Internal scroll only kicks in inside the overlay. */
    .sb-map__layout:not(.is-open) .sb-map__list-wrap {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    /* Disable toolbar sticky on inline mobile — site header is already
       sticky on top and would hide the toolbar behind it. Overlay state
       repositions the toolbar to fixed top anyway.
       Bottom margin matches the gap between placeholder and toolbar. */
    .sb-map__toolbar {
        position: static;
        margin-bottom: var(--sb-space-4);
    }

    .sb-map__layout.is-open {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        position: fixed;
        inset: 0;
        /* Use dynamic viewport height — inset:0 alone resolves to the
           initial viewport on mobile, which leaves the overlay extending
           behind the browser's address/tool bars. */
        height: 100vh;
        height: 100dvh;
        z-index: 9999;
        background: var(--sb-color-neutral-0);
    }

    /* Close button — only visible inside the fullscreen overlay.
       Same top + size (44px) as the search input, so they sit aligned. */
    .sb-map__layout.is-open .sb-map__fullscreen-close {
        display: flex;
        position: fixed;
        top: 12px;
        right: var(--sb-space-3);
        z-index: 10001;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--sb-radius-full);
        background: var(--sb-color-neutral-0);
        color: var(--sb-text-default);
        box-shadow: var(--sb-shadow-md);
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .sb-map__layout.is-open .sb-map__fullscreen-close:hover {
        background: var(--sb-color-neutral-150);
    }

    /* When body has this class (set by JS while overlay is open), lock
       the page scroll so Leaflet pan/zoom doesn't compete with it. */
    body.sb-map-fullscreen-open {
        overflow: hidden;
    }

    /* Toolbar in overlay: invisible wrapper, the search input floats on
       its own as a standalone card. Right side leaves 68px for the X. */
    body.sb-map-fullscreen-open .sb-map__toolbar {
        position: fixed;
        top: 12px;
        left: 12px;
        right: 68px;
        z-index: 10000;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
        border-radius: 0;
    }

    /* Search input becomes the floating card — same height as X (44px). */
    body.sb-map-fullscreen-open .sb-map__toolbar-search {
        height: 44px;
        padding: 0 var(--sb-space-3);
        background: var(--sb-color-neutral-0);
        box-shadow: var(--sb-shadow-md);
        border-radius: var(--sb-radius-full);
        border: 0;
    }

    /* iOS auto-zooms the viewport when an input has font-size < 16px on
       focus — push the search input to 16px on mobile to suppress that. */
    body.sb-map-fullscreen-open .sb-map__toolbar-search-input,
    .sb-map__toolbar-search-input {
        font-size: 16px;
    }

    /* Inline mobile: filterbar hidden — count + chips stay in the toolbar. */
    .sb-map__sheet-filterbar {
        display: none;
    }

    /* Overlay: full filter bar with count on top + chips below. */
    .sb-map__layout.is-open .sb-map__sheet-filterbar {
        display: flex;
        flex-direction: column;
        gap: var(--sb-space-2);
        padding: var(--sb-space-1) 0 var(--sb-space-3);
        border-bottom: 1px solid var(--sb-border-default);
        margin: 0 0 var(--sb-space-3);
    }

    .sb-map__sheet-filterbar .sb-map__count {
        padding: 0;
        white-space: nowrap;
        font-size: var(--sb-font-sm);
    }

    .sb-map__sheet-filterbar .sb-map__filters {
        display: flex;
        align-items: center;
        gap: var(--sb-space-2);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sb-map__sheet-filterbar .sb-map__filters::-webkit-scrollbar { display: none; }

    .sb-map__sheet-filterbar .sb-map__filters-label {
        flex-shrink: 0;
        font-size: var(--sb-font-sm);
    }

    .sb-map__sheet-filterbar .sb-map__chip {
        flex-shrink: 0;
    }

    /* Leaflet built-in zoom controls overlap our floating toolbar — pinch
       zoom is the touch primary anyway, so hide them on mobile. */
    body.sb-map-fullscreen-open .leaflet-control-zoom {
        display: none !important;
    }

    /* Toast (e.g. "Wiadomość wysłana") — top-center while overlay is open so
       it stays clear of the bottom sheet that occupies the lower portion. */
    body.sb-map-fullscreen-open .sb-map__toast {
        top: 76px;
        bottom: auto;
        left: 12px;
        right: 12px;
        max-width: none;
        text-align: center;
    }
}

/* ---------- Sheet handle (mobile-only drag affordance) ---------- */
.sb-map__sheet-handle {
    display: none;
}

@media (max-width: 900px) {
    /* Handle only renders inside the fullscreen overlay — inline page
       view shows the list as a plain column without drag affordance. */
    .sb-map__layout.is-open .sb-map__sheet-handle {
        display: flex;
        width: 100%;
        padding: var(--sb-space-4) 0 var(--sb-space-3);
        background: transparent;
        border: 0;
        cursor: grab;
        touch-action: none;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--sb-color-neutral-0);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        min-height: 32px;
    }
}

.sb-map__sheet-handle-bar {
    width: 44px;
    height: 5px;
    border-radius: 9999px;
    background: var(--sb-color-neutral-300);
    transition: background 0.15s ease;
}

.sb-map__sheet-handle:active {
    cursor: grabbing;
}

.sb-map__sheet-handle:hover .sb-map__sheet-handle-bar,
.sb-map__sheet-handle:active .sb-map__sheet-handle-bar {
    background: var(--sb-color-neutral-600);
}

/* ---------- List ---------- */
.sb-map__list-wrap {
    max-height: 640px;
    overflow-y: auto;
    padding-right: var(--sb-space-1);
    position: relative;
}

@media (max-width: 900px) {
    /* Bottom-sheet styling — only applied when overlay is open. */
    .sb-map__layout.is-open .sb-map__list-wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
        /* dvh respects dynamic browser UI (Chrome URL bar, bottom bar) on
           mobile — without it the sheet overflows past the visible area
           when those bars appear. vh is the fallback for older engines. */
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        padding: 0 var(--sb-space-4) var(--sb-space-4);
        background: var(--sb-color-neutral-0);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
        z-index: 100;
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        will-change: transform;
    }

    /* Sheet snap points — set via JS-driven data-sheet-state attribute. */
    .sb-map__layout.is-open .sb-map__list-wrap[data-sheet-state="peek"] {
        transform: translateY(calc(100vh - 68px - 140px));
        transform: translateY(calc(100dvh - 68px - 140px));
    }
    .sb-map__layout.is-open .sb-map__list-wrap[data-sheet-state="half"] {
        transform: translateY(calc(50vh - 68px));
        transform: translateY(calc(50dvh - 68px));
    }
    .sb-map__layout.is-open .sb-map__list-wrap[data-sheet-state="full"] { transform: translateY(0); }

    /* While dragging, JS sets inline transform — disable the snap transition. */
    .sb-map__layout.is-open .sb-map__list-wrap.is-dragging {
        transition: none;
    }
}

.sb-map__list-wrap::-webkit-scrollbar {
    width: 6px;
}

.sb-map__list-wrap::-webkit-scrollbar-thumb {
    background: var(--sb-color-neutral-300);
    border-radius: var(--sb-radius-sm);
}

.sb-map__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sb-gap-sm);
}

/* ---------- Card ---------- */
.sb-map__card {
    position: relative;
    background: var(--sb-bg-surface);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-xl);
    padding: var(--sb-component-padding-md);
    padding-right: var(--sb-space-14); /* room for the absolute message button */
    cursor: pointer;
    transition: all 0.15s ease;
}

.sb-map__card:hover {
    border-color: var(--sb-border-focus);
    box-shadow: var(--sb-shadow-sm);
}

.sb-map__card.is-active {
    border-color: var(--sb-border-selected);
    box-shadow: var(--sb-shadow-md);
}

.sb-map__card-title {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-md);
    line-height: var(--sb-lh-md);
    font-weight: var(--sb-font-weight-semibold);
    margin: 0 0 var(--sb-space-2);
    color: var(--sb-text-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-map__card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    min-width: 0;
}

.sb-map__card-location {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-map__card-location svg {
    color: var(--sb-action-primary);
    flex-shrink: 0;
}

.sb-map__card-location > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-map__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-1);
}

.sb-map__card-tag {
    display: inline-block;
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-full);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-xs);
    line-height: var(--sb-lh-xs);
    color: var(--sb-text-default);
    background: var(--sb-bg-surface);
    white-space: nowrap;
}

.sb-map__empty {
    margin: var(--sb-space-6) 0;
    text-align: center;
    color: var(--sb-text-muted);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
}

/* ---------- Card message button (icon-only, top-right) ---------- */
.sb-map__card-message-btn {
    position: absolute;
    top: var(--sb-component-padding-md);
    right: var(--sb-component-padding-md);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--sb-radius-full);
    background: var(--sb-action-primary);
    color: var(--sb-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.sb-map__card-message-btn:hover {
    background: var(--sb-action-primary-hover);
}

.sb-map__card-message-btn svg {
    width: 16px;
    height: 16px;
}

/* Visually hidden but accessible — screen readers announce the label */
.sb-map__card-message-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Map canvas (Leaflet) ---------- */
.sb-map__canvas {
    position: relative;
    height: 640px;
    border-radius: var(--sb-radius-xl);
    overflow: hidden;
    border: 1px solid var(--sb-border-default);
    z-index: 0;
    background: var(--sb-color-neutral-200);
}

@media (max-width: 900px) {
    /* Canvas only renders inside the fullscreen overlay. Inline page view
       hides it via .sb-map__layout:not(.is-open) .sb-map__canvas rule above. */
    .sb-map__layout.is-open .sb-map__canvas {
        height: 100%;
        min-height: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

.sb-map__canvas-skeleton {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(90deg, var(--sb-color-neutral-200) 0%, var(--sb-color-neutral-150) 50%, var(--sb-color-neutral-200) 100%);
    background-size: 200% 100%;
    animation: sb-shimmer 1.4s linear infinite;
    transition: opacity 0.15s ease;
}

.sb-map__canvas--loading .leaflet-pane,
.sb-map__canvas--loading .leaflet-control-container {
    visibility: hidden;
}

.sb-map__canvas:not(.sb-map__canvas--loading) .sb-map__canvas-skeleton {
    opacity: 0;
}

/* ---------- Skeletons ---------- */
@keyframes sb-shimmer {
    0%   { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}

.sb-skeleton {
    background: linear-gradient(90deg, var(--sb-color-neutral-200) 0%, var(--sb-color-neutral-150) 50%, var(--sb-color-neutral-200) 100%);
    background-size: 200% 100%;
    animation: sb-shimmer 1.4s linear infinite;
    border-radius: var(--sb-radius-md);
}

.sb-skeleton--title {
    height: 21px;
    width: 55%;
    margin-bottom: var(--sb-space-2);
}

.sb-skeleton--line {
    height: 18px;
    width: 120px;
}

.sb-skeleton--tag {
    display: inline-block;
    height: 26px;
    width: 56px;
    border-radius: var(--sb-radius-full);
}

.sb-skeleton--msg-btn {
    position: absolute;
    top: var(--sb-component-padding-md);
    right: var(--sb-component-padding-md);
    width: 36px;
    height: 36px;
    border-radius: var(--sb-radius-full);
}

.sb-map__card--skeleton {
    cursor: default;
    pointer-events: none;
}

.sb-map__card--skeleton:hover {
    border-color: var(--sb-border-default);
    box-shadow: none;
}

.sb-map__list.is-loaded .sb-map__card--skeleton {
    display: none;
}

/* ---------- Custom marker ---------- */
.sb-map__marker {
    background: transparent !important;
    border: 0 !important;
    color: var(--sb-action-primary);
}

.sb-map__marker svg {
    display: block;
    filter:
        drop-shadow(0 0 6px rgba(0, 118, 209, 0.35))
        drop-shadow(0 0 14px rgba(0, 118, 209, 0.18))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
    transition: transform 0.15s ease;
    transform-origin: bottom center;
}

.sb-map__marker:hover svg {
    transform: scale(1.08);
}

/* ---------- Cluster ---------- */
.sb-map__cluster,
.marker-cluster {
    background: transparent !important;
    border: 0 !important;
    color: var(--sb-action-primary-hover);
}

.sb-map__cluster svg {
    display: block;
    filter:
        drop-shadow(0 0 6px rgba(0, 94, 167, 0.30))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.20));
}

/* ---------- Popup ---------- */
.sb-map__popup .leaflet-popup-content-wrapper {
    border-radius: var(--sb-radius-xl);
    padding: 0;
    box-shadow: var(--sb-shadow-lg);
    background: var(--sb-bg-surface);
}

.sb-map__popup .leaflet-popup-content {
    margin: 0;
    padding: var(--sb-component-padding-lg);
    font-family: var(--sb-font-family);
    color: var(--sb-text-default);
    min-width: 260px;
    line-height: var(--sb-lh-md);
}

.sb-map__popup .leaflet-popup-content p {
    margin: 0;
}

.sb-map__popup-body {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
}

.sb-map__popup .leaflet-popup-tip {
    background: var(--sb-bg-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sb-map__popup .leaflet-popup-close-button {
    top: var(--sb-space-3) !important;
    right: var(--sb-space-3) !important;
    width: 24px;
    height: 24px;
    color: var(--sb-text-muted) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    line-height: 24px !important;
    text-align: center;
    border-radius: var(--sb-radius-full);
    transition: all 0.15s ease;
}

.sb-map__popup .leaflet-popup-close-button:hover {
    color: var(--sb-text-default) !important;
    background: var(--sb-color-neutral-150);
}

.sb-map__popup-title {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-lg);
    line-height: var(--sb-lh-lg);
    font-weight: var(--sb-font-weight-bold);
    margin: 0;
    color: var(--sb-text-default);
    padding-right: var(--sb-space-7);
}

.sb-map__popup-location {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-muted);
}

.sb-map__popup-location svg {
    color: var(--sb-action-primary);
    flex-shrink: 0;
}

.sb-map__popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-1);
}

.sb-map__popup-tag {
    display: inline-block;
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-full);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-xs);
    line-height: var(--sb-lh-xs);
    color: var(--sb-text-default);
    background: var(--sb-bg-surface);
}

/* ---------- Popup button (primary pill, max-content width) ---------- */
.sb-map__popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-gap-sm);
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
    padding: var(--sb-space-3) var(--sb-component-padding-md);
    margin-top: var(--sb-space-2);
    border: 0;
    border-radius: var(--sb-radius-full);
    background: var(--sb-action-primary);
    color: var(--sb-text-inverse);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    font-weight: var(--sb-font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-map__popup-btn:hover {
    background: var(--sb-action-primary-hover);
}

.sb-map__popup-btn svg {
    width: 16px;
    height: 16px;
}

/* ---------- Dialog (message compose modal) ---------- */
.sb-map__dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 90%;
    max-width: 480px;
    height: max-content;
    max-height: calc(100vh - 2 * var(--sb-space-8));
    padding: 0;
    border: 0;
    border-radius: var(--sb-radius-xl);
    background: var(--sb-bg-surface);
    box-shadow: var(--sb-shadow-xl);
}

.sb-map__dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.sb-map__dialog-form {
    position: relative;
    padding: var(--sb-component-padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-4);
}

.sb-map__dialog-close {
    position: absolute;
    top: var(--sb-space-3);
    right: var(--sb-space-3);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sb-text-muted);
    cursor: pointer;
    border-radius: var(--sb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.sb-map__dialog-close:hover {
    background: var(--sb-color-neutral-150);
    color: var(--sb-text-default);
}

.sb-map__dialog-title {
    margin: 0;
    padding-right: var(--sb-space-9);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-lg);
    line-height: var(--sb-lh-lg);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-text-default);
}

.sb-map__dialog-textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    padding: var(--sb-space-3) var(--sb-component-padding-md);
    border: 1px solid var(--sb-border-default);
    border-radius: var(--sb-radius-lg);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    color: var(--sb-text-default);
    background: var(--sb-bg-surface);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.sb-map__dialog-textarea:focus {
    outline: none;
    border-color: var(--sb-border-focus);
}

.sb-map__dialog-counter {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-xs);
    line-height: var(--sb-lh-xs);
    color: var(--sb-text-muted);
    text-align: right;
    margin-top: calc(var(--sb-space-2) * -1);
}

.sb-map__dialog-counter.is-over {
    color: var(--sb-feedback-error);
    font-weight: var(--sb-font-weight-semibold);
}

.sb-map__dialog-actions {
    display: flex;
    gap: var(--sb-gap-sm);
    justify-content: flex-end;
}

/* Dialog cancel/submit buttons use global .sb-btn-secondary / .sb-btn-primary.
   Keep only the JS state hooks (loading + disabled) on .sb-map__dialog-submit. */
.sb-map__dialog-submit:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.sb-map__dialog-form.is-sending .sb-map__dialog-submit {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

.sb-map__dialog-form.is-sending .sb-map__dialog-textarea {
    opacity: 0.7;
    pointer-events: none;
}

/* ---------- Toast ---------- */
.sb-map__toast {
    position: fixed;
    bottom: var(--sb-space-8);
    right: var(--sb-space-8);
    left: auto;
    max-width: calc(100vw - 2 * var(--sb-space-8));
    transform: translateY(var(--sb-space-6));
    padding: var(--sb-space-3) var(--sb-component-padding-lg);
    border-radius: var(--sb-radius-lg);
    background: var(--sb-text-default);
    color: var(--sb-text-inverse);
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-sm);
    line-height: var(--sb-lh-sm);
    font-weight: var(--sb-font-weight-medium);
    box-shadow: var(--sb-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10000;
}

.sb-map__toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-map__toast.is-error {
    background: var(--sb-feedback-error);
}