/* =====================================================================
   Головний екран: карта, пошук, категорії, фільтри, панелі
   ===================================================================== */

.map-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-deep);
}

/* --- Панель категорій -------------------------------------------------- */
.catbar {
    position: relative;
    max-width: 100%;
    min-width: 0;
    z-index: calc(var(--z-topbar) - 1);
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--catbar-h);
    padding: 0 16px;
    background: var(--glass);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.catbar::-webkit-scrollbar { display: none; }

.cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--tint-subtle);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
    cursor: pointer;
    transition: all var(--fast) var(--ease);
}
.cat:hover {
    border-color: var(--line-bright);
    background: var(--tint-hover);
    color: var(--text);
}
.cat .dot {
    width: 6px; height: 6px;
    background: var(--cat-color, var(--cat-default));
    transition: transform var(--fast) var(--ease);
}
.cat.is-active {
    color: var(--text);
    background: var(--tint-strong);
    border-color: var(--cat-color, var(--line-bright));
    box-shadow: inset 0 0 0 1px var(--tint-soft);
}
.cat.is-active .dot { transform: scale(1.5); }

.catbar__divider {
    width: 1px;
    height: 18px;
    background: var(--line-strong);
    flex-shrink: 0;
    margin: 0 4px;
}

/* --- Тіло екрана ------------------------------------------------------- */
.map-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    /* Закриті бічні панелі не повинні розширювати площу прокручування
       і зсувати інтерфейс убік */
    overflow: hidden;
    overflow: clip;
}

#map {
    position: absolute;
    inset: 0;
    z-index: var(--z-map);
    background: var(--bg-deep);
}

.leaflet-container {
    background: var(--bg-deep);
    font-family: var(--font);
}
.leaflet-tile-pane { will-change: filter; }
.leaflet-control-attribution {
    background: var(--map-attr-bg) !important;
    color: var(--text-faint) !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: var(--r-sm) 0 0 0;
    backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: var(--text-muted) !important; }

/* --- Маркери ----------------------------------------------------------- */
.mpi-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-full);
    background: var(--marker-bg);
    border: 1.5px solid var(--marker-color, var(--cat-default));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease);
    cursor: pointer;
}
.mpi-marker::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: var(--marker-color, var(--cat-default));
    transition: all var(--fast) var(--ease);
}
.mpi-marker:hover {
    transform: scale(1.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    z-index: 500 !important;
}
.mpi-marker--featured {
    width: 26px; height: 26px;
    border-width: 2px;
}
.mpi-marker--featured::after { width: 9px; height: 9px; }
.mpi-marker.is-active {
    transform: scale(1.35);
    background: var(--marker-color, var(--cat-default));
    box-shadow: 0 0 0 4px var(--tint-bold), 0 6px 18px rgba(0, 0, 0, 0.6);
}
.mpi-marker.is-active::after { background: var(--marker-core-bg); }

/* --- Кластери ---------------------------------------------------------- */
.mpi-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--cluster-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line-bright);
    color: var(--cluster-text);
    font-size: var(--t-sm);
    font-weight: 550;
    letter-spacing: -0.01em;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
    transition: transform var(--fast) var(--ease-out), border-color var(--fast) var(--ease);
}
.mpi-cluster:hover {
    transform: scale(1.08);
    border-color: var(--accent-line);
}
.mpi-cluster--sm { width: 34px; height: 34px; font-size: var(--t-sm); }
.mpi-cluster--md { width: 42px; height: 42px; font-size: var(--t-base); }
.mpi-cluster--lg { width: 52px; height: 52px; font-size: var(--t-md); }

.leaflet-marker-icon.mpi-icon { background: none; border: none; }

/* --- Керування картою --------------------------------------------------- */
.map-controls {
    position: absolute;
    right: 16px;
    bottom: 28px;
    z-index: var(--z-controls);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    min-width: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--glass-strong);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    color: var(--text-soft);
    font-size: var(--t-sm);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: all var(--fast) var(--ease);
}
.map-btn:hover { color: var(--text); border-color: var(--line-bright); background: var(--bg-elevated); }
.map-btn:active { transform: translateY(1px); }
.map-btn svg { width: 15px; height: 15px; }
.map-btn--icon { padding: 0; width: 38px; }
.map-btn.is-active { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }

.map-zoom {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--glass-strong);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    box-shadow: var(--shadow-sm);
}
.map-zoom button {
    width: 38px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-soft);
    transition: all var(--fast) var(--ease);
}
.map-zoom button:hover { background: var(--tint-hover); color: var(--text); }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom svg { width: 14px; height: 14px; }

/* --- Активні фільтри ---------------------------------------------------- */
.filters-bar {
    position: absolute;
    left: 16px;
    bottom: 28px;
    z-index: var(--z-controls);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: calc(100% - 120px);
}

.results-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--glass-strong);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    box-shadow: var(--shadow-sm);
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--text);
    transition: all var(--fast) var(--ease);
}
.results-pill:hover { border-color: var(--line-bright); }
.results-pill__count { font-variant-numeric: tabular-nums; }
.results-pill__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    background: var(--tint-hover);
}
.results-pill__toggle svg { width: 12px; height: 12px; transition: transform var(--normal) var(--ease); }
.results-pill.is-open .results-pill__toggle svg { transform: rotate(180deg); }

.active-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* --- Панель результатів (desktop) --------------------------------------- */
.panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--panel-w);
    max-width: 92vw;
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-right: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    /* Закрита панель не повинна ловити фокус клавіатури й розтягувати сторінку */
    visibility: hidden;
    transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
    will-change: transform;
}
.panel.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--slow) var(--ease), visibility 0s;
}

.panel--right {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--line-strong);
    transform: translateX(100%);
}
.panel--right.is-open { transform: none; }

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.panel__title { font-size: var(--t-md); font-weight: 550; }
.panel__subtitle { font-size: var(--t-sm); color: var(--text-muted); }
.panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.panel__foot { padding: 12px 16px; border-top: 1px solid var(--line); flex-shrink: 0; }

.panel-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
}
.panel-close:hover { background: var(--tint-strong); color: var(--text); }
.panel-close svg { width: 13px; height: 13px; }

/* --- Нижня шторка (bottom sheet) ----------------------------------------- */
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sheet);
    display: flex;
    flex-direction: column;
    height: 58vh;
    max-height: 92vh;
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--line-strong);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
    touch-action: none;
    will-change: transform;
}
.sheet.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--slow) var(--ease), visibility 0s;
}
.sheet.is-expanded { height: 92vh; }
.sheet__body { flex: 1; min-height: 0; }
.sheet.is-dragging { transition: none; }

.sheet__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 6px;
    cursor: grab;
    flex-shrink: 0;
}
.sheet__handle::before {
    content: '';
    width: 38px; height: 4px;
    border-radius: var(--r-full);
    background: var(--line-bright);
}
.sheet__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.sheet__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--tint-strong);
    color: var(--text-soft);
    z-index: 2;
}
.sheet__close svg { width: 12px; height: 12px; }

/* --- Прев'ю компанії (спільне для панелі та шторки) ----------------------- */
.preview { padding: 16px; }
.preview__head { display: flex; gap: 13px; margin-bottom: 14px; }
.preview__title { font-size: var(--t-xl); font-weight: 550; letter-spacing: -0.02em; margin-bottom: 4px; }
.preview__meta {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: var(--t-base); color: var(--text-muted);
}
.preview__desc {
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text-soft);
    margin-bottom: 14px;
}
.preview__section { margin-bottom: 14px; }
.preview__section-title {
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 7px;
}
.preview__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.preview__actions .btn {
    flex: 1 1 auto;
    min-width: 148px;
    white-space: nowrap;
}

.loc-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-base);
}
.loc-line:last-child { border-bottom: none; }
.loc-line__type {
    font-size: var(--t-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
    min-width: 92px;
    padding-top: 1px;
}
.loc-line__body { flex: 1; min-width: 0; }
.loc-line__city { color: var(--text); }
.loc-line__addr { color: var(--text-muted); font-size: var(--t-sm); }

/* --- Мобільна адаптація -------------------------------------------------- */
@media (max-width: 860px) {
    .catbar { padding: 0 12px; }

    .panel {
        top: auto;
        width: 100%;
        max-width: none;
        height: 100%;
        border-right: none;
    }

    .map-controls { right: 12px; bottom: 96px; }
    .filters-bar {
        left: 12px; right: 12px; bottom: 12px;
        max-width: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .filters-bar::-webkit-scrollbar { display: none; }
    .active-filters { flex-wrap: nowrap; }
    .map-btn, .results-pill { height: 40px; }
    .map-zoom { display: none; }
    .preview__actions .btn { flex: 1 1 calc(50% - 4px); min-width: 140px; }
}

@media (min-width: 861px) {
    .sheet { display: none; }
}

/* --- Випадні панелі (місто) ---------------------------------------------- */
.popover {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-panel);
    width: min(320px, calc(100vw - 24px));
    max-height: min(440px, 72vh);
    display: flex;
    flex-direction: column;
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: dropdown-in var(--fast) var(--ease-out);
}
.popover[hidden] { display: none; }

.popover__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.popover__input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: var(--t-base);
    color: var(--text);
}
.popover__input::placeholder { color: var(--text-faint); }

.popover__list { overflow-y: auto; padding: 5px; flex: 1; }
.popover__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: left;
    font-size: var(--t-base);
    color: var(--text-soft);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.popover__item:hover { background: var(--tint-hover); color: var(--text); }
.popover__item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.popover__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover__item-meta { font-size: var(--t-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.popover__foot { padding: 8px; border-top: 1px solid var(--line); }

/* --- Секції фільтрів ------------------------------------------------------ */
.filter-section { padding: 16px; border-bottom: 1px solid var(--line); }
.filter-section:last-child { border-bottom: none; }
.filter-section__title {
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
}
.filter-subcats { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-subcats .chip { cursor: pointer; transition: all var(--fast) var(--ease); }
.filter-subcats .chip:hover { border-color: var(--line-bright); color: var(--text); }
.filter-subcats .chip.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }

/* --- Індикатор завантаження карти ----------------------------------------- */
.map-loading {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-controls);
    display: none;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--glass-strong);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    font-size: var(--t-sm);
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
}
.map-loading.is-visible { display: inline-flex; }
.spinner {
    width: 13px; height: 13px;
    border: 1.5px solid var(--line-bright);
    border-top-color: var(--accent);
    border-radius: var(--r-full);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
    .popover { left: 12px; right: 12px; transform: none; width: auto; }
    .map-btn__label { display: none; }
    .map-btn { width: 42px; padding: 0; }
}

/* --- Підписи міст (власний шар українською) ------------------------------- */
.mpi-city {
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(-3px, -7px);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.mpi-city__dot {
    width: 4px; height: 4px;
    border-radius: var(--r-full);
    background: var(--map-label-dot);
    flex-shrink: 0;
}
.mpi-city__name {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--map-label);
    text-shadow: var(--map-label-shadow);
}

/* --- Підказка маркера ------------------------------------------------------ */
.leaflet-tooltip.mpi-tooltip {
    background: var(--glass-strong);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 9px 12px;
    font-family: var(--font);
    white-space: nowrap;
}
.leaflet-tooltip.mpi-tooltip::before { display: none; }
.mpi-tooltip__name { font-size: var(--t-base); font-weight: 550; margin-bottom: 2px; }
.mpi-tooltip__meta { font-size: var(--t-sm); color: var(--text-muted); }
.mpi-tooltip__hint {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 5px;
}