/* Detect iOS Safari (not standalone) and add extra bottom clearance
           for the ~50px toolbar that env(safe-area-inset-bottom) doesn't account for */
        @supports (-webkit-touch-callout: none) {
            .info-legend {
                bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }
        /* When running as installed PWA (standalone), no toolbar — revert to normal */
        @media (display-mode: standalone) {
            .info-legend {
                bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* Add to Home Screen nudge banner */
        #a2hsBanner {
            display: none;
            position: fixed; bottom: 0; left: 0; right: 0;
            z-index: 9999;
            background: #1565c0; color: white;
            padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
            font-size: 0.8rem; line-height: 1.4;
            align-items: center; gap: 10px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
        }
        #a2hsBanner.visible { display: flex; }
        #a2hsBanner svg { flex-shrink: 0; fill: white; width: 22px; height: 22px; }
        #a2hsBanner .a2hs-text { flex-grow: 1; }
        #a2hsBanner .a2hs-text b { font-size: 0.85rem; }
        #a2hsBannerClose {
            background: rgba(255,255,255,0.2); border: none; color: white;
            border-radius: 4px; padding: 4px 8px; font-size: 0.8rem;
            cursor: pointer; flex-shrink: 0;
        }

        :root {
            --primary-blue: #2196F3;
            --danger-red: #d32f2f;
            --success-green: #00b300;
        }

        body { 
            margin: 0; padding: 0; 
            font-family: 'Noto Sans HK', sans-serif; 
            display: flex; flex-direction: column; height: 100vh; 
            background-color: #f0f2f5;
        }
        
        #controls {
            background: #ffffff; padding: 8px 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000;
            display: flex; flex-direction: column;
            gap: 0;
            border-bottom: 1px solid #ddd;
        }
        /* Add gap only when filter panel is visible */
        #controls:has(.filter-wrapper.expanded) {
            gap: 8px;
        }

        .header-group {
            display: flex; justify-content: space-between; align-items: center;
        }
        .title-block { flex-grow: 1; }
        h1 { margin: 0; font-size: 1rem; color: #1a1a1a; font-weight: 700; line-height: 1.2; }
        .subtitle { color: #666; font-size: 0.75rem; display: block; margin-top: 1px; }

        #btnLocate {
            width: 36px; height: 36px;
            background-color: white; 
            border: 1px solid #ccc;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            flex-shrink: 0;
            margin-left: 10px;
        }
        /* Collapse toggle button */
        /* ── Reset Confirmation Dialog ──────────────────────── */
        #resetConfirmOverlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9000;
            align-items: center;
            justify-content: center;
        }
        #resetConfirmOverlay.visible { display: flex; }
        #resetConfirmDialog {
            background: white;
            border-radius: 12px;
            padding: 24px 24px 18px;
            max-width: 320px;
            width: calc(100vw - 48px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.22);
            display: flex; flex-direction: column; gap: 12px;
        }
        #resetConfirmDialog .dlg-icon {
            font-size: 2rem; text-align: center; line-height: 1;
        }
        #resetConfirmDialog .dlg-title {
            font-size: 1rem; font-weight: 700; color: #bf360c;
            text-align: center;
        }
        #resetConfirmDialog .dlg-body {
            font-size: 0.82rem; color: #555; text-align: center; line-height: 1.5;
        }
        #resetConfirmDialog .dlg-buttons {
            display: flex; gap: 10px; margin-top: 4px;
        }
        #resetConfirmDialog .dlg-btn {
            flex: 1; padding: 9px 0; border-radius: 7px;
            border: none; font-size: 0.85rem; font-weight: 600;
            cursor: pointer; transition: background 0.15s, transform 0.1s;
        }
        #resetConfirmDialog .dlg-btn:active { transform: scale(0.97); }
        #btnResetCancel  { background: #f0f0f0; color: #444; }
        #btnResetCancel:hover  { background: #e0e0e0; }
        #btnResetConfirm { background: #e64a19; color: white; }
        #btnResetConfirm:hover { background: #bf360c; }

        /* ── Reset Button ───────────────────────────────────── */
        #btnReset {
            display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 8px;
            border: 1px solid #ddd; background: white;
            cursor: pointer; flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        #btnReset:hover { background: #fff3e0; border-color: #e65100; }
        #btnReset:active { background: #ffe0b2; transform: scale(0.95); }
        #btnReset svg { width: 20px; height: 20px; fill: #555; transition: fill 0.2s; }
        #btnReset:hover svg { fill: #e65100; }

        /* ── Share Button ───────────────────────────────────── */
        #btnShare {
            display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 8px;
            border: 1px solid #ddd; background: white;
            cursor: pointer; flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s;
        }
        #btnShare:active { background: #f0f0f0; transform: scale(0.95); }
        #btnShare svg { width: 20px; height: 20px; fill: #555; transition: fill 0.2s; }
        #btnShare.copied { background: #e8f5e9; border-color: #2e7d32; }
        #btnShare.copied svg { fill: #2e7d32; }

        /* ── Location Search ─────────────────────────────────── */
        #btnLocationSearch {
            display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 8px;
            border: 1px solid #ddd; background: white;
            cursor: pointer; flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s;
        }
        #btnLocationSearch:active { background-color: #f0f0f0; transform: scale(0.95); }
        #btnLocationSearch svg { width: 20px; height: 20px; fill: #555; transition: fill 0.2s; }
        #btnLocationSearch.active { background-color: #e8f5e9; border-color: #2e7d32; }
        #btnLocationSearch.active svg { fill: #2e7d32; }

        #locationSearchBar {
            display: none;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            background: #f1f8f1;
            border-top: 1px solid #c8e6c9;
            border-bottom: 1px solid #c8e6c9;
        }
        #locationSearchBar.visible { display: flex; }
        #locationSearchInput {
            flex: 1; border: 1px solid #a5d6a7; border-radius: 6px;
            padding: 5px 8px; font-size: 0.8rem; outline: none;
            background: white;
        }
        #locationSearchInput:focus { border-color: #2e7d32; }
        #locationSearchBtn {
            background: #2e7d32; color: white; border: none;
            border-radius: 6px; padding: 5px 10px; font-size: 0.8rem;
            cursor: pointer; white-space: nowrap; flex-shrink: 0;
        }
        #locationSearchBtn:active { background: #1b5e20; }
        #locationSearchClear {
            background: none; border: none; cursor: pointer;
            color: #888; font-size: 1rem; padding: 2px 4px; flex-shrink: 0;
            display: none;
        }
        #locationSearchClear.visible { display: block; }

        #locationResultsList {
            display: none;
            flex-direction: column;
            background: white;
            border: 1px solid #c8e6c9;
            border-top: none;
            max-height: 200px;
            overflow-y: auto;
            font-size: 0.8rem;
        }
        #locationResultsList.visible { display: flex; }
        .loc-result-item {
            padding: 7px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            line-height: 1.35;
        }
        .loc-result-item:last-child { border-bottom: none; }
        .loc-result-item:hover { background: #e8f5e9; }
        .loc-result-item .loc-name { font-weight: 600; color: #1b5e20; }
        .loc-result-item .loc-addr { color: #666; font-size: 0.73rem; }
        .loc-result-none { padding: 10px 12px; color: #999; font-style: italic; }

        /* Lamppost pin marker */
        .lamppost-pin {
            width: 12px; height: 12px;
            background: #f57f17; border: 2.5px solid white;
            border-radius: 2px; box-shadow: 0 0 0 2px #f57f17;
            transform: rotate(45deg);
        }
        /* Location pin marker */
        .location-pin {
            width: 14px; height: 14px;
            background: #2e7d32; border: 2.5px solid white;
            border-radius: 50%; box-shadow: 0 0 0 2px #2e7d32;
        }
        /* User custom pin — small solid purple dot */
        .user-pin {
            width: 8px; height: 8px;
            background: #7b1fa2; border: 2px solid white;
            border-radius: 50%; box-shadow: 0 0 0 2px #7b1fa2;
        }

        /* Sampling Pool toggle button inside filter panel */
        #btnPoolToggle {
            font-size: 10px;
            font-weight: 700;
            font-family: 'Arial Narrow', Arial, sans-serif;
            letter-spacing: -0.3px;
            padding: 2px 6px;
            border: 1.5px solid #00695c;
            border-radius: 4px;
            background: white;
            color: #00695c;
            cursor: pointer;
            white-space: nowrap;
            line-height: 1.4;
            transition: background 0.15s, color 0.15s;
        }
        #btnPoolToggle.active {
            background: #00695c;
            color: white;
        }
        #btnPoolToggle:hover { opacity: 0.85; }

        /* Pool marker dot */
        .pool-dot {
            width: 10px; height: 10px;
            background: #00897b;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 0 0 0 1.5px #00897b;
        }

        /* RAR visibility toggle control (above layer chooser) */
        .rar-toggle-control {
            background: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            padding: 4px 7px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-weight: 700;
            color: #555;
            user-select: none;
            white-space: nowrap;
        }
        .rar-toggle-control:hover { background: #f5f5f5; }
        .rar-toggle-control .rar-toggle-pip {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #ff6d00;
            border: 2px solid white;
            box-shadow: 0 0 0 1.5px #ff6d00;
            flex-shrink: 0;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .rar-toggle-control.off .rar-toggle-pip {
            background: #bbb;
            box-shadow: 0 0 0 1.5px #bbb;
        }
        .rar-toggle-control.off { color: #aaa; }
        .rar-toggle-control.rar-mode .rar-toggle-pip {
            background: #f57c00;
            box-shadow: 0 0 0 1.5px #f57c00;
        }
        .rar-toggle-control.rar-mode { color: #f57c00; }
        /* ── Radius Ring Tool ─────────────────────────────────────── */
        .leaflet-div-icon:has(div[style*="text-shadow:0 0 3px #fff"]) {
            background: none !important;
            border: none !important;
        }
        .ring-toggle-control {
            background: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            padding: 4px 7px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-weight: 700;
            color: #555;
            user-select: none;
            white-space: nowrap;
        }
        .ring-toggle-control:hover { background: #f5f5f5; }
        .ring-toggle-control .ring-pip {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: white;
            border: 2.5px solid #e53935;
            flex-shrink: 0;
            transition: border-color 0.2s;
        }
        .ring-toggle-control.active .ring-pip {
            background: #e53935;
            border-color: #e53935;
        }
        .ring-toggle-control.active { color: #e53935; }

        /* Crosshair cursor when ring tool is active */
        .ring-cursor { cursor: crosshair !important; }

        /* Radius input popup */
        .ring-input-popup .leaflet-popup-content-wrapper {
            background: #fff !important;
            border: 1.5px solid #e53935 !important;
            border-radius: 8px !important;
            box-shadow: 0 3px 12px rgba(0,0,0,0.2) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            padding: 0 !important;
        }
        .ring-input-popup .leaflet-popup-tip {
            background: #e53935 !important;
        }
        .ring-input-popup .leaflet-popup-content {
            margin: 0 !important;
        }
        .ring-input-box {
            padding: 10px 12px;
            min-width: 210px;
        }
        .ring-input-box .ring-input-title {
            font-size: 0.78rem;
            font-weight: 700;
            color: #e53935;
            margin-bottom: 7px;
            font-family: Arial, sans-serif;
        }
        .ring-input-row {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 8px;
        }
        .ring-input-row button {
            width: 26px; height: 26px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #f5f5f5;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
        }
        .ring-input-row button:hover { background: #ffe0e0; border-color: #e53935; }
        .ring-radius-input {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 3px 6px;
            font-size: 0.85rem;
            text-align: center;
            font-family: Arial, sans-serif;
            min-width: 0;
        }
        .ring-radius-input:focus { outline: none; border-color: #e53935; }
        .ring-unit { font-size: 0.8rem; color: #666; flex-shrink: 0; }
        .ring-presets {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
        }
        .ring-preset-btn {
            flex: 1;
            padding: 3px 0;
            font-size: 0.72rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fafafa;
            cursor: pointer;
            font-family: Arial, sans-serif;
        }
        .ring-preset-btn:hover { background: #ffe0e0; border-color: #e53935; color: #e53935; }
        .ring-confirm-btn {
            width: 100%;
            padding: 5px 0;
            background: #e53935;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            font-family: Arial, sans-serif;
        }
        .ring-confirm-btn:hover { background: #c62828; }

        /* Ring info popup (click on drawn ring) */
        .ring-info-popup .leaflet-popup-content-wrapper {
            background: #fff !important;
            border: 1.5px solid #e53935 !important;
            border-radius: 8px !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .ring-info-popup .leaflet-popup-tip { background: #e53935 !important; }

                .lot-toggle-control {
            background: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            padding: 4px 7px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-weight: 700;
            color: #555;
            user-select: none;
            white-space: nowrap;
        }
        .lot-toggle-control.hidden { display: none !important; }
        .lot-toggle-control:hover { background: #f5f5f5; }
        .lot-toggle-control .lot-pip {
            width: 10px; height: 10px;
            border-radius: 2px;
            background: #6a1b9a;
            border: 2px solid white;
            box-shadow: 0 0 0 1.5px #6a1b9a;
            flex-shrink: 0;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .lot-toggle-control.off .lot-pip {
            background: #bbb;
            box-shadow: 0 0 0 1.5px #bbb;
        }
        .lot-toggle-control.off { color: #aaa; }
        .lot-toggle-control.loading { color: #999; cursor: wait; }
        .lot-toggle-control.loading .lot-pip {
            background: #999;
            box-shadow: 0 0 0 1.5px #999;
            animation: lot-pulse 0.8s ease-in-out infinite alternate;
        }
        @keyframes lot-pulse {
            from { opacity: 1; }
            to   { opacity: 0.3; }
        }

        #btnToggleFilters {
            width: 36px; height: 36px;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            flex-shrink: 0;
            margin-left: 6px;
        }
        #btnToggleFilters:active { background-color: #f0f0f0; transform: scale(0.95); }
        #btnToggleFilters svg { width: 20px; height: 20px; fill: #555; transition: fill 0.2s; }
        #btnToggleFilters.expanded { background-color: #e8f0fe; border-color: var(--primary-blue); }
        #btnToggleFilters.expanded svg { fill: var(--primary-blue); }
        #btnLocate svg { width: 20px; height: 20px; fill: #555; transition: fill 0.3s; }
        #btnLocate.locating svg { fill: var(--primary-blue); animation: spin 1s infinite linear; }
        #btnLocate.active svg { fill: var(--primary-blue); }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        .filter-wrapper {
            display: flex; flex-direction: column; gap: 6px;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.3s ease, opacity 0.25s ease;
        }
        .filter-wrapper.expanded {
            max-height: 140px;
            opacity: 1;
        }
        .filter-row { display: flex; align-items: center; gap: 5px; }
        .filter-label { font-size: 0.8rem; font-weight: 600; color: #444; width: 65px; line-height: 1.1; }

        /* Dual-handle range slider */
        .range-slider-wrap {
            flex-grow: 1; position: relative; height: 24px;
            display: flex; align-items: center;
        }
        .range-track {
            position: absolute; left: 0; right: 0; height: 4px;
            background: #ddd; border-radius: 2px;
        }
        .range-fill {
            position: absolute; height: 4px;
            background: var(--primary-blue); border-radius: 2px;
        }
        .range-thumb {
            position: absolute; width: 18px; height: 18px;
            background: white; border: 2px solid var(--primary-blue);
            border-radius: 50%; cursor: grab; top: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 1px 4px rgba(0,0,0,0.2);
            touch-action: none; user-select: none;
            transition: box-shadow 0.15s ease;
            z-index: 2;
        }
        .range-thumb:active { cursor: grabbing; box-shadow: 0 0 0 4px rgba(33,150,243,0.2); }
        .range-thumb.thumb-upper { z-index: 3; }

        .control-btn {
            background-color: #f8f9fa; border: 1px solid #ccd0d4; border-radius: 4px;
            width: 32px; height: 32px; font-size: 1.2rem; font-weight: bold; color: #333;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            user-select: none; touch-action: manipulation; padding: 0;
        }
        .control-btn:active { background-color: #e9ecef; }

        input[type=number], input[type=text] {
            height: 30px; border: 1px solid #ccd0d4; border-radius: 4px;
            text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0 5px;
            box-sizing: border-box;
        }
        input[type=number] { width: 50px; color: var(--danger-red); -moz-appearance: textfield; }
        input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        
        .search-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .search-group { display: flex; align-items: center; gap: 5px; flex-grow: 1;}
        #serialSearch { flex-grow: 1; text-align: left; padding-left: 8px; color: #111; }
        #btnSearch {
            height: 30px; background: var(--primary-blue); color: white; border: none;
            border-radius: 4px; padding: 0 12px; font-weight: 600; cursor: pointer;
        }
        #btnSearch:active { background: #1976D2; }
        #btnClearSearch {
            height: 30px; width: 30px; background: #e0e0e0; color: #555; border: none;
            border-radius: 4px; font-weight: bold; cursor: pointer; display: none;
        }

        /* ── FIX (4): count display ── */
        #countDisplay {
            font-size: 0.75rem; color: #666; font-weight: 500; white-space: nowrap;
        }
        /* Empty-state styling: red + bold when 0 stations */
        #countDisplay.empty {
            color: var(--danger-red); font-weight: 700;
        }

        #map { flex-grow: 1; width: 100%; z-index: 1; touch-action: none; }

        .info-legend {
            position: absolute;
            bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            right: calc(8px + env(safe-area-inset-right, 0px));
            z-index: 1000;
            background: white; padding: 8px; border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2); font-size: 0.75rem; line-height: 1.5;
            border: 1px solid #eee;
            max-width: min(260px, calc(100vw - 24px));
            max-height: calc(55vh - env(safe-area-inset-bottom, 0px));
            overflow-y: auto;
            pointer-events: auto;
        }
        /* Lift Leaflet controls above iOS Safari browser bar */
        .leaflet-bottom.leaflet-right,
        .leaflet-bottom.leaflet-left {
            bottom: env(safe-area-inset-bottom, 0px) !important;
        }
        .leaflet-bottom {
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .leaflet-right {
            padding-right: env(safe-area-inset-right, 0px);
        }

        .legend-item { display: flex; align-items: center; margin-bottom: 3px; }
        .legend-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; display: inline-block; border: 1px solid rgba(0,0,0,0.1); }
        
        /* Serial label styling */
        .food-abbr-label {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            font-size: 0.65rem;
            font-weight: 700;
            color: #111;
            white-space: nowrap;
            pointer-events: none;
            text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
            padding: 0 !important;
            margin-left: 2px;
        }
        .food-abbr-label::before { display: none !important; }

        .serial-label {
            background: rgba(255, 255, 255, 0.85); border: 1px solid #888;
            border-radius: 3px; color: #111; font-weight: 700; font-size: 0.75rem;
            padding: 1px 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); white-space: nowrap;
            pointer-events: none;
        }
        .leaflet-tooltip.serial-label::before { display: none; }
        /* Semi-transparent popups, click-through to markers underneath */
        .leaflet-popup {
            pointer-events: none;   /* disable on entire popup container … */
        }
        .leaflet-popup-content-wrapper {
            background: rgba(255,255,255,0.72) !important;
            border: 1px solid rgba(80,80,80,0.2) !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            pointer-events: none;
        }
        .leaflet-popup-content {
            pointer-events: auto;   /* … re-enable only on text/links */
        }
        .leaflet-popup-close-button {
            pointer-events: auto;   /* keep × button clickable */
        }
        .leaflet-popup-tip-container,
        .leaflet-popup-tip {
            pointer-events: none;
        }
        .leaflet-popup-tip {
            background: rgba(255,255,255,0.72) !important;
        }

        /* Lot boundary popups — fully opaque white, no blur */
        .lot-popup .leaflet-popup-content-wrapper {
            background: #ffffff !important;
            border: 1px solid rgba(0,0,0,0.2) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .lot-popup .leaflet-popup-tip {
            background: #ffffff !important;
        }

        .highlight-marker {
            stroke: #000 !important;
            stroke-width: 4px !important;
        }

        .user-location-pulse {
            background: var(--primary-blue); border-radius: 50%; height: 14px; width: 14px; border: 2px solid white;
            box-shadow: 0 0 0 rgba(33, 150, 243, 0.4); animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(33, 150, 243, 0); }
            100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
        }

        #toast-container {
            display: none;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 30, 0.95);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            font-weight: 500;
            text-align: center;
            transition: opacity 0.3s ease;
            max-width: 90%;
            word-wrap: break-word;
        }
        /* Food licence search bar */
        #foodResultsList {
            display: none;
            flex-direction: column;
            background: white;
            border: 1px solid #bbdefb;
            border-top: none;
            max-height: 50vh;
            overflow-y: auto;
            font-size: 0.8rem;
            position: relative;
            z-index: 500;
        }
        #foodResultsList.visible { display: flex; }
        .food-result-item {
            padding: 7px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            line-height: 1.35;
        }
        .food-result-item:last-child { border-bottom: none; }
        .food-result-item:hover { background: #e3f2fd; }
        .food-result-item .fr-name { font-weight: 600; color: #0d47a1; }
        .food-result-item .fr-sub  { color: #666; font-size: 0.73rem; }
        .food-result-none { padding: 10px 12px; color: #999; font-style: italic; }

        #foodSearchBar {
            display: none;
            padding: 6px 12px;
            background: #f0f5ff;
            border-top: 1px solid #c5d8f7;
            gap: 6px;
            align-items: center;
        }
        #foodSearchBar.visible { display: flex; }
        #foodSearchInput {
            flex-grow: 1; height: 30px;
            border: 1px solid #90b8e8; border-radius: 4px;
            padding: 0 8px; font-size: 0.85rem; color: #111;
            background: rgba(255,255,255,0.85);
            outline: none;
        }
        #foodSearchInput:focus { border-color: #1565c0; background: #fff; }
        #foodSearchClear {
            height: 30px; width: 30px; flex-shrink: 0;
            background: #dce8f8; color: #444; border: none;
            border-radius: 4px; font-weight: bold; font-size: 1rem;
            cursor: pointer; display: none; align-items: center; justify-content: center;
        }
        #foodSearchClear.visible { display: flex; }
        #foodSearchCount {
            font-size: 0.75rem; color: #1565c0; font-weight: 600;
            white-space: nowrap; flex-shrink: 0;
        }
        /* Highlight matched food marker */
        .food-marker-highlight div {
            outline: 2.5px solid #ffeb3b !important;
            outline-offset: 1px;
            box-shadow: 0 0 6px 2px rgba(255,235,59,0.7) !important;
        }

        /* Hide default markercluster background so our custom iconCreateFunction shows cleanly */
        .leaflet-cluster-anim .leaflet-marker-icon,
        .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform 0.2s ease-out, opacity 0.2s ease-in; }

        /* Food licence toggle button */
        #btnFoodLicence {
            width: 36px; height: 36px;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            flex-shrink: 0;
            margin-left: 6px;
            position: relative;
        }
        #btnFoodLicence:active { background-color: #f0f0f0; transform: scale(0.95); }
        #btnFoodLicence svg { width: 20px; height: 20px; fill: #555; transition: fill 0.2s; }
        #btnFoodLicence.active { background-color: #e3f2fd; border-color: #1565c0; }
        #btnFoodLicence.active svg { fill: #1565c0; }
        #btnFoodLicence.loading svg { fill: #1976d2; animation: spin 1s infinite linear; }
        /* Badge showing loaded count */
        #foodLicenceBadge {
            display: none;
            position: absolute; top: -5px; right: -5px;
            background: #e65100; color: white;
            font-size: 0.55rem; font-weight: 700;
            border-radius: 8px; padding: 1px 4px;
            line-height: 1.4; white-space: nowrap;
        }
        #btnFoodLicence.active #foodLicenceBadge { display: block; }