/* ===== MAP PAGE STYLES ===== */

        .map-hero {
            background: var(--color-primary);
            color: #fff;
            padding: 2.5rem 1.5rem 2rem;
            text-align: center;
        }

        .map-hero h1 {
            font-family: var(--font-heading);
            font-size: clamp(1.5rem, 4vw, 2.25rem);
            font-weight: 800;
            margin: 0 0 0.5rem;
            letter-spacing: -0.02em;
        }

        .map-hero p {
            opacity: 0.85;
            max-width: 560px;
            margin: 0 auto 1.75rem;
            font-size: 1rem;
            line-height: 1.6;
        }

        /* ===== FIND ME BUTTON ===== */
        .find-me-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 2rem;
            background: #DC2626; /* patriot red for prominence */
            color: white;
            border: none;
            border-radius: var(--radius-pill);
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s, transform 0.15s;
            min-height: 52px;
            box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4);
        }

        .find-me-btn:hover {
            background: #B91C1C;
            transform: translateY(-1px);
        }

        .find-me-btn:active {
            transform: translateY(0);
        }

        .find-me-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* ZIP fallback row */
        .zip-row {
            margin-top: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .zip-row label {
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
        }

        .zip-input {
            width: 110px;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            border: 2px solid rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.12);
            color: white;
            font-family: var(--font-body);
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.15s;
        }

        .zip-input::placeholder {
            color: rgba(255,255,255,0.45);
        }

        .zip-input:focus {
            border-color: rgba(255,255,255,0.7);
            background: rgba(255,255,255,0.18);
        }

        .zip-search-btn {
            padding: 0.5rem 1rem;
            background: rgba(255,255,255,0.15);
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
            min-height: 44px;
        }

        .zip-search-btn:hover {
            background: rgba(255,255,255,0.25);
        }

        /* ===== MAP AREA ===== */
        .map-section {
            position: relative;
        }

        #map-container {
            width: 100%;
            height: 60vh;
            min-height: 320px;
            max-height: 520px;
            background: var(--color-muted);
            /* Note: Leaflet map tiles are always light-colored (OpenStreetMap standard tiles).
               This is acceptable — the map is a functional tool, not a theme element. */
        }

        /* Empty state shown before search */
        .map-empty-state {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--color-muted);
            color: var(--color-text-light);
            text-align: center;
            padding: 2rem;
            pointer-events: none;
        }

        .map-empty-state.hidden {
            display: none;
        }

        .map-empty-icon {
            font-size: 3.5rem;
            opacity: 0.4;
        }

        .map-empty-state p {
            font-size: 1rem;
            max-width: 300px;
            line-height: 1.5;
        }

        /* ===== CONTROLS BAR (below map) ===== */
        .map-controls {
            background: var(--color-card);
            border-bottom: 1px solid var(--color-border);
            padding: 0.75rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .map-controls-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--color-text-light);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

        /* Radius pills */
        .radius-pills {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .radius-pill {
            padding: 0.3rem 0.8rem;
            border-radius: var(--radius-pill);
            border: 2px solid var(--color-border);
            background: transparent;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 36px;
            display: inline-flex;
            align-items: center;
        }

        .radius-pill:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .radius-pill.active {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        /* Divider between radius and category filters */
        .controls-divider {
            width: 1px;
            height: 28px;
            background: var(--color-border);
            flex-shrink: 0;
        }

        /* Category filter pills */
        .cat-pills {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .cat-pill {
            padding: 0.3rem 0.8rem;
            border-radius: var(--radius-pill);
            border: 2px solid var(--color-border);
            background: transparent;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .cat-pill:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .cat-pill.active {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        /* Discount filter pills — mirrors radius-pill / cat-pill exactly */
        .discount-pills {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .discount-pill {
            padding: 0.3rem 0.8rem;
            border-radius: var(--radius-pill);
            border: 2px solid var(--color-border);
            background: transparent;
            color: var(--color-text);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
            display: flex;
            align-items: center;
        }

        .discount-pill:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .discount-pill.active {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        /* "Top deals" preset button — golden accent to stand out from regular pills */
        .top-deals-preset {
            margin-left: 8px;
            padding: 6px 14px;
            border: 2px solid #F59E0B;
            background: transparent;
            color: var(--color-text, #1F2937);
            border-radius: var(--radius-pill, 999px);
            font-weight: 600;
            font-size: 0.9em;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .top-deals-preset:hover {
            background: #F59E0B;
            color: #fff;
        }

        /* Inline label for the discount row — same as .map-controls-label */
        /* (no new rule needed; .map-controls-label already covers it) */

        /* Discount line inside chain-store map popups */
        .popup-discount {
            font-size: 0.82em;
            font-weight: 700;
            color: var(--color-accent);
            margin: 0.15rem 0 0.25rem;
        }

        /* ===== RESULTS AREA ===== */
        .results-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem 1.25rem 5rem; /* bottom pad for tab bar */
        }

        /* Savings summary banner */
        .savings-banner {
            background: var(--color-card);
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: var(--radius-sm);
            padding: 0.85rem 1.25rem;
            font-size: 0.9rem;
            color: var(--color-text);
            margin-bottom: 1.25rem;
            line-height: 1.5;
            display: none; /* hidden until results load */
        }

        .savings-banner strong {
            color: var(--color-accent);
        }

        [data-theme="dark"] .savings-banner {
            border-left-color: var(--color-accent);
        }

        /* Status message (searching, error, etc.) */
        .search-status {
            font-size: 0.9rem;
            color: var(--color-text-light);
            padding: 0.5rem 0;
            display: none;
        }

        .search-status.visible {
            display: block;
        }

        .search-status.error {
            color: #DC2626;
        }

        /* Skeleton loading cards */
        .skeleton-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 0.75rem;
            display: none;
        }

        .skeleton-grid.visible {
            display: grid;
        }

        .skeleton-card {
            background: var(--color-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 1.1rem;
            animation: skeleton-pulse 1.5s ease-in-out infinite;
        }

        @keyframes skeleton-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .skeleton-line {
            background: var(--color-muted);
            border-radius: 4px;
            height: 14px;
            margin-bottom: 0.6rem;
        }

        .skeleton-line.short { width: 55%; }
        .skeleton-line.medium { width: 75%; }
        .skeleton-line.long { width: 90%; }

        /* ===== RESULTS GRID ===== */
        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 0.75rem;
        }

        /* Individual result card */
        .result-card {
            background: var(--color-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 1.1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            box-shadow: var(--shadow-card);
            transition: box-shadow 0.15s, border-color 0.15s;
            cursor: pointer; /* clicking focuses the map marker */
        }

        .result-card:hover {
            box-shadow: var(--shadow-hover);
            border-color: var(--color-accent);
        }

        .result-card-top {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        /* Wraps either a brand logo <img> or an emoji fallback. Consistent
           40x40 rounded square matches the pin badge so card + pin feel unified. */
        .result-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #fff;
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        /* Brand logo inside a result card's icon container */
        .result-icon .marker-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 4px;
            box-sizing: border-box;
        }
        /* Emoji fallback inside the same container */
        .result-icon .marker-logo-emoji {
            font-size: 1.4rem;
            line-height: 1;
        }
        /* Dark-mode: brand logos sit on a light card so we keep the badge white */
        [data-theme="dark"] .result-icon {
            background: #fff;
            border-color: rgba(255,255,255,0.12);
        }

        .result-info {
            flex: 1;
            min-width: 0;
        }

        .result-name {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--color-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Single-line pill used for every result — short "15% OFF" and long
           "Tax-free shopping + Military Star Card 10% discount" both render
           identically (truncated with ellipsis past the row width). The full
           text is always available on hover via the title attribute. */
        .result-discount {
            display: inline-block;
            max-width: 100%;
            background: var(--color-accent);
            color: white;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.18rem 0.55rem;
            border-radius: var(--radius-pill);
            margin-top: 0.2rem;
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: top;
        }

        .result-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: 0.82rem;
            color: var(--color-text-light);
        }

        .result-distance {
            font-weight: 600;
            color: var(--color-text);
        }

        .result-category {
            text-transform: capitalize;
            font-size: 0.75rem;
        }

        .result-address {
            font-size: 0.8rem;
            color: var(--color-text-light);
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }

        .btn-directions {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.45rem 0.75rem;
            background: var(--color-accent);
            color: white;
            text-decoration: none;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 700;
            transition: background 0.15s;
            min-height: 36px;
        }

        .btn-directions:hover {
            background: var(--color-accent-hover);
        }

        .btn-show-on-map {
            padding: 0.45rem 0.75rem;
            background: transparent;
            color: var(--color-text-light);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 36px;
        }

        .btn-show-on-map:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        /* Empty results state */
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 3rem 1rem;
            color: var(--color-text-light);
            display: none;
        }

        .no-results.visible {
            display: block;
        }

        .no-results-icon {
            font-size: 3rem;
            margin-bottom: 0.75rem;
        }

        .no-results p {
            font-size: 0.95rem;
            max-width: 340px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* ===== CUSTOM LEAFLET MARKER (DivIcon) ===== */
        .map-marker {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: white;
            border: 2.5px solid var(--color-primary, #0F172A);
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            font-size: 1.1rem;
            line-height: 1;
        }

        .map-marker.dining  { border-color: #D97706; }
        .map-marker.shopping { border-color: #0369A1; }
        .map-marker.entertainment { border-color: #7C3AED; }
        .map-marker.services { border-color: #16A34A; }
        .map-marker.poi.national_park { border-color: #16A34A; }
        .map-marker.poi.theme_park    { border-color: #DB2777; }
        .map-marker.poi.museum        { border-color: #CA8A04; }
        .map-marker.poi.commissary    { border-color: #0891B2; }
        .map-marker.poi.exchange      { border-color: #0891B2; }

        /* Brand logo rendered inside a map pin — fills most of the 36px badge
           with a tiny inset so the colored border still reads as the category. */
        .map-marker .marker-logo {
            width: 28px;
            height: 28px;
            object-fit: contain;
            border-radius: 50%;
        }
        /* Emoji fallback inside a map pin — keeps the old look for categories
           without a cached logo (museums) or when the img 404s. */
        .map-marker .marker-logo-emoji {
            font-size: 1.1rem;
            line-height: 1;
        }

        /* Off-season POIs — faded, monochrome, no drop shadow emphasis */
        .map-marker.off-season {
            opacity: 0.45;
            filter: grayscale(0.7);
        }

        /* "You are here" pulse marker */
        .user-marker {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #0369A1;
            border: 3px solid white;
            box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.6);
            animation: user-pulse 2s ease-in-out infinite;
        }

        @keyframes user-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.55); }
            70%  { box-shadow: 0 0 0 12px rgba(3, 105, 161, 0); }
            100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0); }
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 600px) {
            #map-container {
                height: 50vh;
                min-height: 260px;
            }

            .map-controls {
                padding: 0.6rem 0.9rem;
                gap: 0.6rem;
            }

            .controls-divider {
                display: none;
            }

            .results-wrapper {
                padding: 1rem 0.9rem 5rem;
            }
        }