/* ============================================================
   map.css (Map 2.0)
   - Only contains styles for the rebuilt map experience (.map2-*)
   - Includes Leaflet popup branding used by the map markers
   ============================================================ */

/* ===== Map 2.0 layout ===== */

/* Make the map experience fill the visible viewport.
   On mobile, subtract the bottom nav height to avoid scroll. */
:root {
    --bottom-nav-h: 80px; /* matches your main-content mobile padding */
    --map2-panel-w: 380px;
}

.map2 {
    position: relative;
    height: calc(100vh - var(--navbar-height));
    width: 100%;
    overflow: hidden;
}

/* Map area fills the viewport */
.map2-map {
    position: absolute;
    inset: 0;
}

.map2-leaflet {
    height: 100%;
    width: 100%;
}

/* Top overlay */
.map2-topbar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* allow map panning except on actual controls */
}

.map2-searchbar,
.map2-chips {
    pointer-events: auto; /* re-enable interaction for controls */
}

/* Search bar */
.map2-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
}

/* Dark mode - supports both wrapper and body attribute */
[data-theme="dark"] .map2-searchbar,
body[data-theme="dark"] .map2-searchbar {
    background: rgba(15,23,42,0.82);
    border-color: rgba(255,255,255,0.10);
}

.map2-search-icon {
    color: var(--sheep-gray);
}

.map2-search-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.map2-clear,
.map2-theme {
    color: var(--sheep-gray);
    text-decoration: none;
}

/* Chips */
.map2-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.map2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(0,0,0,0.06);
    white-space: nowrap;
    font-size: 0.92rem;
}

[data-theme="dark"] .map2-chip,
body[data-theme="dark"] .map2-chip {
    background: rgba(15,23,42,0.75);
    border-color: rgba(255,255,255,0.10);
    color: #e2e8f0;
}

.map2-chip.active {
    background: rgba(242, 140, 56, 0.18);
    border-color: rgba(242, 140, 56, 0.35);
    color: var(--sheep-orange-dark);
    font-weight: 600;
}

/* Selected supplier card */
.map2-selected {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 92px; /* leave room for bottom sheet peek */
    z-index: 650;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
}

.map2-selected-left {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 800;
    line-height: 1.15;
    font-size: 0.98rem;
    /* wrap nicely */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* keep it compact */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .map2-selected,
body[data-theme="dark"] .map2-selected {
    background: rgba(15,23,42,0.85);
    border-color: rgba(255,255,255,0.10);
    color: #e2e8f0;
}

.map2-selected-title {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.15;
}

.map2-selected-sub {    
    color: var(--sheep-gray);  
    font-size: 0.86rem;
    line-height: 1.25;
    margin-top: 2px;
    /* wrap, clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .map2-selected-sub,
body[data-theme="dark"] .map2-selected-sub {
    color: #94a3b8;
}

.map2-selected-actions {   
    padding: 6px 10px;
    font-size: 0.9rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .map2-selected-actions .map2-action {
        padding: 0.45rem 0.65rem;
        border-radius: 999px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .map2-selected-actions .map2-action i {
            font-size: 1.05rem; /* makes crosshair feel normal */
        }

    /* Make close button square and compact */
    .map2-selected-actions .map2-close {
        width: 36px;
        height: 36px;
        padding: 0;
    }

/* Mobile tightening */
@media (max-width: 575.98px) {
    .map2-selected {
        padding: 10px;
    }

    .map2-selected-actions {
        gap: 6px;
    }

    /* shrink Open Menu text, keep icon */
    .map2-openmenu-text {
        font-size: 0.85rem;
    }

    /* If space is super tight, hide the label and keep icon only */
    /* uncomment if you want */
    /*
    .map2-openmenu-text { display: none; }
    */
}

/* Desktop panel */
.map2-panel {
    position: absolute;
    top: var(--navbar-height);
    bottom: 0;
    left: 0;
    width: var(--map2-panel-w);
    z-index: 700;
    background: rgba(255,255,255,0.96);
    border-right: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .map2-panel,
body[data-theme="dark"] .map2-panel {
    background: rgba(15,23,42,0.88);
    border-right-color: rgba(255,255,255,0.10);
    color: #e2e8f0;
}

.map2-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="dark"] .map2-panel-header,
body[data-theme="dark"] .map2-panel-header {
    border-bottom-color: rgba(255,255,255,0.10);
}

.map2-panel-body {
    overflow: auto;
    padding: 8px;
}

/* Rows */
.map2-row {
    display: flex;
    align-items: center; /* changed from flex-start for nicer look */
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.9);
    margin: 8px 0;
    cursor: pointer;
    min-height: 72px; /* helps match Virtualize ItemSize=72 */
}

[data-theme="dark"] .map2-row,
body[data-theme="dark"] .map2-row {
    background: rgba(15,23,42,0.65);
    border-color: rgba(255,255,255,0.10);
}

.map2-row.selected {
    border-color: rgba(242, 140, 56, 0.35);
    background: rgba(242, 140, 56, 0.12);
}

.map2-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(44, 119, 68, 0.10);
    color: var(--sheep-green);
    flex-shrink: 0;
}

/* CRITICAL: allow truncation & prevent right column from escaping */
.map2-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

.map2-row-title {
    font-weight: 700;
}

.map2-row-sub {
    font-size: .9rem;
    color: var(--sheep-gray);
}

[data-theme="dark"] .map2-row-sub,
body[data-theme="dark"] .map2-row-sub {
    color: #94a3b8;
}

.map2-row-desc {
    margin-top: 4px;
    font-size: .9rem;
    color: var(--sheep-gray);
}

[data-theme="dark"] .map2-row-desc,
body[data-theme="dark"] .map2-row-desc {
    color: #94a3b8;
}

.map2-row-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0; /* keep badge inside */
}

/* Bottom sheet */
.map2-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: rgba(255,255,255,0.96);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-top: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
    transition: transform 220ms ease;
    padding-bottom: env(safe-area-inset-bottom);
}

[data-theme="dark"] .map2-sheet,
body[data-theme="dark"] .map2-sheet {
    background: rgba(15,23,42,0.90);
    border-top-color: rgba(255,255,255,0.10);
    color: #e2e8f0;
}

/* Heights by state */
.map2-sheet.peek {
    transform: translateY(calc(100% - 84px));
}

.map2-sheet.half {
    transform: translateY(calc(100% - 52vh));
}

.map2-sheet.full {
    transform: translateY(calc(100% - 86vh));
}

.map2-sheet-handlebar {
    padding: 10px 0 0;
}

.map2-sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 99px;
    margin: 0 auto;
    background: rgba(0,0,0,0.18);
}

[data-theme="dark"] .map2-sheet-handle,
body[data-theme="dark"] .map2-sheet-handle {
    background: rgba(255,255,255,0.22);
}

.map2-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.map2-sheet-title {
    font-weight: 700;
}

.map2-sheet-body {
    max-height: 86vh;
    overflow: auto;
    padding: 0 12px 12px;
    -webkit-overflow-scrolling: touch;
}

.map2-sheet-list {
    padding-bottom: 90px; /* breathing room above bottom nav */
}

/* =========================
   Mobile layout
   ========================= */
@media (max-width: 991.98px) {

    .map2 {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: calc(var(--sheet-peek) + 14px);
        height: auto; /* fixed via top/bottom */
        overflow: hidden; /* no page scroll */
        --top-ui-h: 128px; /* adjust if chips wrap */
        --sheet-peek: 96px;
        --sheet-full: calc(100vh - var(--navbar-height) - var(--bottom-nav-h) - var(--top-ui-h) - 16px);
    }

    .map2-map,
    .map2-leaflet {
        height: 100%;
        width: 100%;
    }

    /* Give the sheet an actual height so it always “fills” when expanded */
    .map2-sheet {
        height: var(--sheet-full);
        transform: translateY(calc(100% - var(--sheet-peek))); /* default peek */
    }

        .map2-sheet.peek {
            transform: translateY(calc(100% - var(--sheet-peek)));
        }

        .map2-sheet.half {
            transform: translateY(calc(100% - min(52vh, var(--sheet-full))));
        }

        .map2-sheet.full {
            transform: translateY(0); /* FULL = use the full height defined above */
        }

    /* Layout inside: header stays, body scrolls */
    .map2-sheet {
        display: flex;
        flex-direction: column;
    }

    .map2-sheet-body {
        flex: 1 1 auto;
        min-height: 0; /* important for flex children scrolling */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Selected card stays above peek */
    .map2-selected {
        bottom: calc(var(--sheet-peek) + 10px);
        padding: 10px 10px;
        border-radius: 14px;
        gap: 10px;
    }
}

@media (max-width: 991.98px) {
    .map2 .leaflet-control-attribution {
        display: none;
    }
}

/* =========================
   Desktop layout
   ========================= */
@media (min-width: 992px) {
    /* Turn the whole map2 page into a 2-column layout */
    .map2 {
        display: flex;       
        height: calc(100vh - var(--navbar-height));       
    }

    /* Left panel becomes normal flow */
    .map2-panel {
        position: relative; /* was absolute */
        top: auto;
        bottom: auto;
        left: auto;
        width: var(--map2-panel-w);
        flex: 0 0 var(--map2-panel-w);
        z-index: 9999 !important;
        pointer-events: auto;
    }

    .map2-resizer {
        width: 10px;
        cursor: col-resize;
        position: relative;
        z-index: 9999;
        background: transparent;
    }

        .map2-resizer::before {
            content: "";
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            border-radius: 99px;
            background: rgba(0,0,0,0.18);
        }

    [data-theme="dark"] .map2-resizer::before,
    body[data-theme="dark"] .map2-resizer::before {
        background: rgba(255,255,255,0.18);
    }

    .map2-resizer:hover::before {
        background: rgba(242,140,56,0.55); /* sheep orange */
    }

    /* Map takes remaining space */
    .map2-map,
    .map2-leaflet,
    .map2 .leaflet-container {
        position: relative; /* was absolute */
        inset: auto;
        flex: 1 1 auto;
        min-width: 0;
        z-index: 1;
    }

        .map2-map * {
            pointer-events: auto;
        }

    /* IMPORTANT FIX:
       Constrain topbar to the map area only (avoid blocking panel clicks) */
    .map2-topbar {
        z-index: 2000;
        left: 10px;
        right: 10px;
    }

    /* Desktop should not show bottom sheet */
    .map2-sheet {
        display: none !important;
    }

    /* Selected card spacing on desktop */
    .map2-selected {
        bottom: 16px;
    }

    .map2-panel-body {
        overflow-x: hidden;
    }
}

/* ────────────────────────────────────────────────
   Leaflet popup branding (map markers)
───────────────────────────────────────────────── */
/* Move Leaflet zoom controls down so they don't overlap search */
@media (max-width: 991.98px) {
    .map2 .leaflet-top.leaflet-left {        
        visibility: hidden
    }
}

@media (min-width: 992px) {
    .map2 .leaflet-top.leaflet-left {
        top: 130px;
        left: 0px;
    }
}

.map2 .leaflet-control-zoom a {
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .map2 .leaflet-control-zoom a,
body[data-theme="dark"] .map2 .leaflet-control-zoom a {
    background: #1e293b;
    color: #e2e8f0;
}

/* Force popup button text color */
.sheep-popup-container .popup-btn,
.sheep-popup-container .popup-btn:visited,
.sheep-popup-container .popup-btn:focus,
.sheep-popup-container .popup-btn:active {
    color: #fff !important;
}

/* Optional: make Leaflet wrappers match your card aesthetic */
.sheep-popup-container .leaflet-popup-content-wrapper {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
/* Tip matches wrapper */
.sheep-popup-container .leaflet-popup-tip {
    border: 1px solid rgba(0,0,0,0.10);
}

/* Dark mode: remove the white outline */
[data-theme="dark"] .sheep-popup-container .leaflet-popup-content-wrapper,
body[data-theme="dark"] .sheep-popup-container .leaflet-popup-content-wrapper {
    background: #1e293b; /* or your card background */
    border-color: rgba(255,255,255,0.10) !important;
}

[data-theme="dark"] .sheep-popup-container .leaflet-popup-tip,
body[data-theme="dark"] .sheep-popup-container .leaflet-popup-tip {
    background: #1e293b; /* make the triangle match */
    border-color: rgba(255,255,255,0.10) !important;
}

.leaflet-popup-content {
    margin: 0;
}

.sheep-popup {
    font-family: system-ui, sans-serif;
    min-width: 260px;
    background: white;
    color: #333;
}

[data-theme="dark"] .sheep-popup,
body[data-theme="dark"] .sheep-popup {
    background: #1e293b;
    color: #e2e8f0;
}

.popup-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-bottom: 3px solid var(--sheep-green);
}

[data-theme="dark"] .popup-image,
body[data-theme="dark"] .popup-image {
    border-bottom-color: var(--sheep-green-light);
}

.popup-title {
    margin: 0.75rem 1rem 0.25rem;
    font-size: 1.25rem;
    color: var(--sheep-green);
    font-weight: 700;
}

[data-theme="dark"] .popup-title,
body[data-theme="dark"] .popup-title {
    color: var(--sheep-green-light);
}

.verified-badge {
    font-size: 0.85rem;
    background: var(--sheep-green);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

[data-theme="dark"] .verified-badge,
body[data-theme="dark"] .verified-badge {
    background: var(--sheep-green-light);
}

.popup-desc {
    margin: 0.25rem 1rem 0.75rem;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}

[data-theme="dark"] .popup-desc,
body[data-theme="dark"] .popup-desc {
    color: #cbd5e1;
}

.popup-address {
    margin: 0 1rem 1rem;
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .popup-address,
body[data-theme="dark"] .popup-address {
    color: #94a3b8;
}

.popup-btn {
    display: block;
    width: calc(100% - 2rem);
    margin: 0 auto 1rem;
    text-align: center;
    background: var(--sheep-green);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

    .popup-btn:hover,
    .popup-btn:focus {
        background: var(--sheep-orange);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(242, 140, 56, 0.35);
    }

[data-theme="dark"] .popup-btn,
body[data-theme="dark"] .popup-btn {
    background: var(--sheep-green-dark);
}

    [data-theme="dark"] .popup-btn:hover,
    body[data-theme="dark"] .popup-btn:hover {
        background: var(--sheep-orange-dark);
    }

.sheep-popup a:not(.popup-btn) {
    color: var(--sheep-green);
    text-decoration: underline;
}

    .sheep-popup a:not(.popup-btn):hover {
        color: var(--sheep-orange);
    }

[data-theme="dark"] .sheep-popup a:not(.popup-btn),
body[data-theme="dark"] .sheep-popup a:not(.popup-btn) {
    color: var(--sheep-green-light);
}

    [data-theme="dark"] .sheep-popup a:not(.popup-btn):hover,
    body[data-theme="dark"] .sheep-popup a:not(.popup-btn):hover {
        color: var(--sheep-orange);
    }

    @media (hover: hover) and (pointer: fine) {
  .map2-row {
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
  }

  .map2-row:hover {
    border-color: rgba(44, 119, 68, 0.35);            /* sheep green tint */
    background: rgba(44, 119, 68, 0.06);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    transform: translateY(-1px);
  }

  [data-theme="dark"] .map2-row:hover,
  body[data-theme="dark"] .map2-row:hover {
    border-color: rgba(114, 205, 139, 0.35);          /* lighter green */
    background: rgba(114, 205, 139, 0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  }

  .map2-row:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .map2-test-btn:hover {
    border-color: rgba(242, 140, 56, 0.55);           /* sheep orange */
  }
}