:root{
      --text:#0f172a;
      --muted:#64748b;
      --line:#e2e8f0;
      --shadow2: 0 10px 25px rgba(0,0,0,.10);
      --shadow: 0 16px 32px rgba(0,0,0,.16);
      --primary:#2563eb;
      --success:#10b981;
      --danger:#ef4444;
      --chipOn:#0f172a;

      /* Mobil: lämnar synlig karta ovanför. Desktop-paneler får egen höjd i @media (min-width:900px). */
      --sheetMax: 82dvh;
      --topUiH: 0px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;width:100%;overflow:hidden;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--text);}
    /* Skip-länk: syns vid tangentbordsfokus (WCAG bypass blocks) */
    .skip-link{position:absolute;left:-9999px;top:0;z-index:200000;padding:12px 16px;background:#fff;color:var(--text);font-weight:700;border-radius:10px;box-shadow:var(--shadow2);text-decoration:none;border:2px solid var(--primary);}
    .skip-link:focus{left:12px;top:12px;outline:none;}
    #app{height:100dvh;width:100vw;position:relative;background:#f1f5f9;overflow:hidden;}
    /* Neutral yta innan tiles (samma ton som #app — ingen blå gradient). */
    #map{
      position:absolute;inset:0;z-index:1;
      background:#f1f5f9;
    }
    /* Delningslänk (#slug): fullskärm tills platsen är klar — kartan under syns inte “hoppa”. */
    .shareDeepLinkGate{
      position:fixed;inset:0;z-index:15000;width:100%;max-width:100%;overflow-x:hidden;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      box-sizing:border-box;
      padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
      text-align:center;
      background:
        radial-gradient(ellipse 140% 100% at 50% -20%, rgba(37,99,235,.14) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(96,165,250,.12) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 0% 80%, rgba(37,99,235,.08) 0%, transparent 45%),
        linear-gradient(165deg, #f8fafc 0%, #f1f5f9 48%, #eef2f7 100%);
      color:var(--text);
      opacity:0;visibility:hidden;pointer-events:none;
      transition:opacity .32s ease, visibility .32s ease;
    }
    html.resekartan-deeplink-boot .shareDeepLinkGate,
    .shareDeepLinkGate.is-visible{opacity:1;visibility:visible;pointer-events:auto;}
    .shareDeepLinkGateCard{
      box-sizing:border-box;
      width:min(100%, 520px);
      max-width:min(100%, 520px);
      margin-inline:auto;
      align-self:center;
      flex-shrink:0;
      background:#fff;
      border-radius:24px;padding:32px 28px 28px;
      display:flex;flex-direction:column;align-items:stretch;text-align:center;
      box-shadow:
        0 32px 64px -16px rgba(15,23,42,.22),
        0 0 0 1px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.85);
    }
    .shareDeepLinkGateLogo{
      display:flex;justify-content:center;align-items:center;margin:0 0 30px;align-self:center;width:100%;max-width:100%;
    }
    .shareDeepLinkGateLogo img{
      display:block;height:auto;width:auto;max-width:100%;max-height:clamp(96px,25.6vmin,176px);object-fit:contain;
    }
    .shareDeepLinkGateTitle{
      margin:0;padding:0 4px;width:100%;text-align:center;font-size:1.28rem;font-weight:800;line-height:1.28;letter-spacing:-.025em;
      background:linear-gradient(180deg, #0f172a 0%, #334155 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    @supports not (background-clip:text){
      .shareDeepLinkGateTitle{color:var(--text);background:none;}
    }
    .shareDeepLinkGateSub{
      margin:8px 0 0;padding:0 4px;width:100%;text-align:center;font-size:.92rem;color:var(--muted);font-weight:600;line-height:1.5;
    }
    .shareDeepLinkGateTrack{
      margin-top:18px;height:5px;width:100%;max-width:100%;border-radius:999px;
      overflow:hidden;background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.04));
      box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
    }
    .shareDeepLinkGateBar{
      height:100%;width:42%;max-width:200px;border-radius:999px;
      background:linear-gradient(90deg, #1d4ed8, var(--primary) 40%, #93c5fd 100%);
      box-shadow:0 0 12px rgba(37,99,235,.35);
      animation:shareDeepLinkBarSlide 1.15s ease-in-out infinite;
    }
    @keyframes shareDeepLinkBarSlide{
      0%{transform:translate3d(-100%,0,0);}
      100%{transform:translate3d(380%,0,0);}
    }
    @media (prefers-reduced-motion:reduce){
      .shareDeepLinkGate{transition:opacity .12s ease, visibility .12s ease;}
      .shareDeepLinkGateBar{animation:none;width:72%;margin:0 auto;box-shadow:none;}
    }
    /* Mindre attribution = sällan största LCP-yta (Lighthouse); länkar kvar och läsbara. */
    .mapboxgl-ctrl-attrib{font-size:11px !important;line-height:1.25 !important;max-width:min(92vw,420px);}
    .mapboxgl-ctrl-attrib a{color:inherit;}

    /* Top UI — must stay above map/canvas and closed sheets (see #filtersSheet z-index:2 when closed) */
    .top-ui{position:fixed;left:0;right:0;top:0;z-index:11000;padding:12px;pointer-events:none;touch-action:none;}
    .top-stack{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:8px;pointer-events:none;touch-action:none;}
    .rowTop{pointer-events:auto;display:flex;gap:10px;align-items:stretch;justify-content:center;touch-action:none;}
    .searchWrap{flex:0 1 56%;min-width:0;position:relative;display:flex;touch-action:none;}
    .searchbar{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow2);min-height:48px;touch-action:none;}
    .searchbarDivider{width:1px;height:24px;background:var(--line);flex-shrink:0;}
    .searchbar input{border:none;outline:none;flex:1;font-size:16px;background:transparent;padding:6px 2px;min-width:0;}
    .iconBtn{border:none;background:transparent;padding:8px;border-radius:10px;cursor:pointer;color:#64748b;display:flex;align-items:center;justify-content:center;}
    .iconBtn:hover{background:#f1f5f9}
    #clearBtn{display:none;}
    #clearBtn.show{display:flex;}

    .filtersBtn{
      pointer-events:auto;touch-action:manipulation;border:none;background:transparent;border-radius:10px;padding:8px 10px;
      cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:center;
      white-space:nowrap;font-weight:550;user-select:none;flex-shrink:0;
      color:var(--text);-webkit-tap-highlight-color:transparent;font-size:16px;
    }
    .filtersBtn:hover{background:#f1f5f9;}
    .filtersBtn i{color:inherit;}
    .filtersCount{font-size:12px;color:#fff;background:var(--chipOn);border-radius:999px;padding:2px 8px;font-weight:900;min-width:22px;text-align:center;}

    /* Results dropdown */
    .results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow2);overflow:hidden;display:none;max-height:46dvh;z-index:10;touch-action:none;}
    .results.open{display:block;}
    .resultsList{max-height:46dvh;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;touch-action:pan-y;}
    .resultsList::-webkit-scrollbar{width:0;height:0}
    .resultsList{scrollbar-width:none}
    .sec{padding:8px 10px;font-size:11px;font-weight:900;color:#64748b;background:#f8fafc;border-bottom:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2;}
    .resItem{padding:8px 10px;border-bottom:1px solid #f1f5f9;display:flex;gap:10px;align-items:center;cursor:pointer;background:#fff;}
    .resItem:last-child{border-bottom:none;}
    .resIcon{width:28px;height:28px;border-radius:999px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:#fff;color:#0f172a;font-size:12px;}
    .resMain{min-width:0;flex:1;}
    .resTitle{font-weight:900;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 2px;}
    .resSub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .resTags{font-size:10px;color:#94a3b8;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .searchLoading{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 14px;font-size:13px;font-weight:600;color:#64748b;background:#fff;}
    .searchLoading i{font-size:16px;color:#3b82f6;}

    /* FAB stack: Packing, Trip plan, Help */
    .fab{position:fixed;right:12px;bottom:calc(37px + env(safe-area-inset-bottom));z-index:5100;pointer-events:auto;touch-action:none;}
    .fabStack{display:flex;flex-direction:column;gap:8px;align-items:flex-end;touch-action:none;}
    /* 182px: ikon + "Trip plan"/"Packing" + tvåsiffrig badge utan radbrytning (165px räckte inte när badge >9) */
    .fabBtn{border:2px solid rgba(255,255,255,.9);background:rgba(15,23,42,.96);color:#fff;border-radius:999px;padding:12px 14px;box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:900;user-select:none;width:182px;flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;touch-action:none;}
.fabBtn i{width:1.1em;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:inherit;}
    .fabBtn .badge{margin-left:auto;flex-shrink:0;}
    .badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.20);padding:2px 8px;border-radius:999px;font-size:12px;font-weight:900;min-width:22px;text-align:center;}

    /* Overlay */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:4500;display:none;touch-action:none;}
    .overlay.open{display:block;}

    /* Private map (?private): subcategories N/A — filter grid uses private ratings */
    body.map-private .subcatFieldWrap{display:none;}

    /* Trip sheet */
    #sheet{
      position:fixed;left:0;right:0;bottom:0;z-index:5200;max-width:1032px;margin:0 auto;width:100%;
      background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-bottom:none;
      border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -10px 30px rgba(0,0,0,.14);
      height:var(--sheetMax);transform:translateY(110%);transition:transform .22s cubic-bezier(.16,1,.3,1);
      display:flex;flex-direction:column;overflow:hidden;touch-action:none;
    }
    #sheet.open{transform:translateY(0);}
    .sheetHeader{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:0 0 auto;}
    .sheetTitle h2{margin:0;font-size:16px;font-weight:700;}
    .sheetTitle .sub{font-size:12px;color:var(--muted)}
    .sheetActions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;position:relative;}
    .sheetActionsRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
    .sheetActions.sheetActionsRow{flex-direction:row;}
    .sheetStats{font-size:12px;color:var(--muted);text-align:center;padding:12px 14px 12px;border-bottom:1px solid var(--line);margin-bottom:8px;}
    .sheetClose{border:1px solid var(--line);background:#fff;border-radius:14px;padding:0 12px;height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;}
    .toggleRoute,.exportBtn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12px;font-weight:900;height:40px;box-sizing:border-box;}
    .toggleRoute{height:auto;min-height:40px;padding-top:7px;padding-bottom:7px;justify-content:space-between;}
    .toggleRouteTxt{display:flex;flex-direction:column;line-height:1.1;align-items:center;}
    .toggleRoute .lbl{color:var(--primary);letter-spacing:.3px;}
    .toggleRoute .subLbl{font-size:10px;font-weight:700;color:#64748b;letter-spacing:.2px;margin-top:2px;text-align:center;}
    .toggleRoute i{font-size:16px;color:#cbd5e1}
    .exportBtn{color:var(--text);}
    .exportMenu{position:absolute;right:0;top:48px;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow2);overflow:hidden;display:none;min-width:200px;}
    .exportMenu.open{display:block;}
    .exportItem{padding:10px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f1f5f9;display:flex;gap:10px;align-items:center;}
    .exportItem > i{width:1.25em;flex-shrink:0;}
    .exportItem:last-child{border-bottom:none;}
    .exportItem:hover{background:#f8fafc;}
    .sheetBody{flex:1 1 auto;overflow:auto;padding:0 14px 18px;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
    .sheetBody::-webkit-scrollbar{width:0;height:0}
    .sheetBody{scrollbar-width:none}
    /* Synlig scrollbar + ruta: Trip plan + Routes-resultat */
    .sheetScrollPane{
      flex:1 1 auto;
      min-height:140px;
      overflow-x:hidden;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-y;
      scrollbar-gutter:stable;
      scrollbar-width:auto;
      scrollbar-color:#94a3b8 #eef2f7;
      padding:6px 4px 10px 8px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#f8fafc;
    }
    .sheetScrollPane::-webkit-scrollbar{width:14px;}
    .sheetScrollPane::-webkit-scrollbar-track{background:#eef2f7;border-radius:10px;margin:4px 0;}
    .sheetScrollPane::-webkit-scrollbar-thumb{
      background:#94a3b8;
      border-radius:10px;
      border:3px solid #eef2f7;
      min-height:48px;
    }
    .sheetScrollPane::-webkit-scrollbar-thumb:hover{background:#64748b;}
    #sheet .tripPlanSheetBody{
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
    }
    #sheet .tripPlanSheetBody::-webkit-scrollbar{width:0;height:0;}
    #sheet .tripPlanSheetBody{scrollbar-width:none;}
    .tripItineraryScroll{margin-top:4px;}
    .emptyState{text-align:center;padding:26px 14px;color:var(--muted);border:1px dashed #e2e8f0;background:#f8fafc;border-radius:16px;margin-top:12px;}
    /* Trip plan: klick på raden flyger till platsen (som Routes); pointer på text/bild, grab på kolumnen. */
    #itinerary .itemCard{cursor:default;}
    #itinerary .itemInfo{cursor:pointer;}
    #itinerary .tripCardThumb{cursor:pointer;}
    #itinerary .itemCardOrder{cursor:grab;}
    .itemCard{display:flex;gap:10px;border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:9px 10px;margin:8px 0;box-shadow:0 6px 14px rgba(0,0,0,.055);overflow:hidden;cursor:grab;}
    .itemCard:active{cursor:grabbing;}
    .itemCard.dragging{opacity:.5;}
    .itemCard.dragOver{border-color:var(--primary);background:#eff6ff;}
    .itemCardOrder{display:flex;flex-direction:column;align-items:center;gap:2px;padding-right:8px;cursor:grab;flex-shrink:0;align-self:center;}
    .itemCardOrder .itemCardGrip{color:#94a3b8;font-size:14px;}
    .itemCardOrder .itemCardNum{font-size:11px;font-weight:600;color:#64748b;}
    .itemCardMove{display:none;flex-direction:column;gap:0;}
    .itemCardMoveBtn{border:none;background:transparent;color:#64748b;padding:2px 6px;cursor:pointer;font-size:10px;line-height:1;}
    .itemCardMoveBtn:hover{color:var(--primary);}
    @media (max-width:768px){.itemCardOrder{cursor:default;}.itemCardOrder .itemCardGrip{display:none;}.itemCardMove{display:flex;flex-direction:column;gap:10px;align-self:center;}.itemCardMoveBtn{padding:6px 8px;font-size:12px;}#itinerary .itemCardOrder{cursor:default;}}
    .itemCard img{width:68px;height:68px;border-radius:11px;object-fit:cover;background:#e2e8f0;flex:0 0 auto;align-self:center;}
    .itemInfo{flex:1;min-width:0}
    .itemTitle{font-weight:900;font-size:14px;line-height:1.2;margin:1px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .itemMeta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
    .tripPlaceLine{margin-bottom:6px;}
    .tripCategoryLine{margin-top:8px;margin-bottom:5px;}
    .tripCategoryText{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#475569;font-weight:700;}
    .tripStatsLine{margin-bottom:2px;}
    .pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 7px;display:inline-flex;gap:5px;align-items:center;font-size:11px;line-height:1.2;}
    .xBtn{border:none;background:transparent;color:var(--danger);font-size:20px;cursor:pointer;padding:6px 8px;align-self:center;}

    /* Packing sheet */
    #packingSheet{
      position:fixed;left:0;right:0;bottom:0;z-index:5300;max-width:1032px;margin:0 auto;width:100%;
      background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-bottom:none;
      border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -10px 30px rgba(0,0,0,.14);
      height:var(--sheetMax);transform:translateY(110%);transition:transform .22s cubic-bezier(.16,1,.3,1);
      display:flex;flex-direction:column;overflow:hidden;touch-action:none;
    }
    #packingSheet.open{transform:translateY(0);}
    .packingSearchWrap{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#f8fafc;margin-top:12px;margin-bottom:12px;}
    .packingSearchWrap i{flex-shrink:0;color:#94a3b8;font-size:14px;pointer-events:none;display:flex;align-items:center;}
    .packingSearch{border:none;background:transparent;flex:1;min-width:0;padding:12px 0;font-size:16px;outline:none;}
    .packingCategory{margin-bottom:14px;}
    .packingCategoryTitle{font-size:12px;font-weight:900;color:#64748b;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;}
    .packingResetBtn{font-size:10px;padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;color:#64748b;cursor:pointer;font-weight:700;margin-left:auto;}
    .packingResetBtn:hover{background:#f8fafc;}
    .packingCategoryTitle i{font-size:10px;transition:transform .2s;}
    .packingCategory.collapsed .packingCategoryTitle i{transform:rotate(-90deg);}
    .packingCategory.collapsed .packingCategoryItems{display:none;}
    .packingItem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s;}
    .packingItem:hover{background:#f8fafc;}
    .packingItem input[type="checkbox"]{
      width:20px;height:20px;margin:0;flex-shrink:0;cursor:pointer;
      accent-color:var(--primary);
    }
    .packingItemIcon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
    .packingItemIcon svg{width:16px;height:16px;color:inherit;}
    .packingItemIcon[data-icon="shorts"] svg{width:20px;height:20px;}
    .packingItemIcon.cat0{background:linear-gradient(135deg,#fce7f3,#fdf2f8);color:#db2777;}
    .packingItemIcon.cat1{background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#059669;}
    .packingItemIcon.cat2{background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#dc2626;}
    .packingItemIcon.cat3{background:linear-gradient(135deg,#e0e7ff,#eef2ff);color:#4f46e5;}
    .packingItemIcon.cat4{background:linear-gradient(135deg,#fef3c7,#fffbeb);color:#d97706;}
    .packingItemIcon.cat5{background:linear-gradient(135deg,#cffafe,#ecfeff);color:#0891b2;}
    .packingItemIcon.cat6{background:linear-gradient(135deg,#f3e8ff,#faf5ff);color:#7c3aed;}
    .packingItemIcon.cat7{background:linear-gradient(135deg,#e0f2fe,#f0f9ff);color:#0284c7;}
    .packingItemIcon.cat8{background:linear-gradient(135deg,#dbeafe,#eff6ff);color:#2563eb;}
    .packingItemLabel{font-size:13px;font-weight:600;flex:1;}
    .packingTips{margin-top:26px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f8fafc;}
    .packingTipsTitle{padding:12px 14px;font-size:13px;font-weight:900;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;}
    .packingTipsTitle:hover{background:#f1f5f9;}
    .packingTipsTitle i{font-size:10px;transition:transform .2s;flex-shrink:0;}
    .packingTips.collapsed .packingTipsTitle i{transform:rotate(-90deg);}
    .packingTips.collapsed .packingTipsBody{display:none;}
    .packingLangSwitch{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;height:40px;box-sizing:border-box;align-items:stretch;}
    .packingLangBtn{
      padding:0 12px;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
      /* Annars kan flagg-emojis falla tillbaka till system-ui — 🇬🇧/🇸🇪 blir GB/SE eller vita mot primary med color:#fff */
      font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",ui-sans-serif,system-ui,sans-serif;
    }
    .packingLangBtn:hover{background:#f8fafc;}
    /* Sätt inte color:#fff här — färskikt flaggor blir då vita/monokroma (framför allt Edge/Chrome på Windows). */
    .packingLangBtn.active{background:var(--primary);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
    .packingTipsBody{padding:0 14px 14px;}
    .packingTipItem{padding:10px 0;font-size:12px;line-height:1.5;color:var(--text);border-bottom:1px solid #e2e8f0;}
    .packingTipItem:last-child{border-bottom:none;}
    .packingTipItem strong{color:#475569;font-size:11px;display:block;margin-bottom:4px;}

    /* Filters sheet: when closed, stack BELOW .top-ui (6000) so the search/filter bar always receives clicks (pointer-events:none alone is unreliable on some WebKit builds). When open, raise above everything. */
    #filtersSheet{
      position:fixed;left:0;right:0;bottom:0;z-index:2;max-width:1032px;margin:0 auto;width:100%;
      background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-bottom:none;
      border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -10px 30px rgba(0,0,0,.14);
      height:var(--sheetMax);transform:translateY(110%);transition:transform .12s cubic-bezier(.2,.8,.2,1);
      display:flex;flex-direction:column;overflow:hidden;
      touch-action:pan-y;overscroll-behavior:contain;
      pointer-events:none;
      will-change:transform;
    }
    #filtersSheet.open{
      transform:translateY(0);
      pointer-events:auto;
      z-index:15000;
    }
    .filtersHeader{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;}
    .filtersHeader h2{margin:0;font-size:16px;font-weight:700;}
    .filtersHeader .sub{font-size:12px;color:var(--muted)}

    /* Title row: Back (advanced) | title | Cluster + Advanced */
    .filtersTitleRow{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      min-width:0;
    }
    .filtersTitleRow h2{
      flex:1;
      min-width:0;
      margin:0;
    }
    .hdrFiltersActions{
      display:flex;
      gap:6px;
      align-items:center;
      flex-shrink:0;
    }
    .hdrFiltersActions .toggleRoute{flex-shrink:0;}

    /* One clean header row: left = subtitle (optional), right = buttons */
    .subRow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:nowrap;
      margin-top:4px;
    }
    .advancedBtn,
    .backBtn,
    .resetAdvancedBtn{
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:0 12px;
      height:40px;
      box-sizing:border-box;
      font-weight:900;
      font-size:12px;
      cursor:pointer;
      user-select:none;
      display:inline-flex;
      gap:6px;
      align-items:center;
      box-shadow:0 6px 16px rgba(0,0,0,.05);
      flex:0 0 auto;
      color:var(--text);
      white-space:nowrap;
    }
    .advancedBtn i{color:var(--primary)}
    .advancedBtn.active{background:rgba(15,23,42,.92);border-color:rgba(15,23,42,.92);color:#fff;}
    .advancedBtn.active i{color:#fff;}
    .backBtn i{color:#334155}
    .resetAdvancedBtn{opacity:.9;}
    .resetAdvancedBtn i{color:var(--danger)}
    .resetAdvancedBtn:hover{opacity:1;border-color:var(--danger)}

    /* IMPORTANT: Back + Reset Advanced only visible in Advanced view */
    #backToCategories,
    #resetAdvanced{display:none;}

    .filtersBody{flex:1 1 auto;padding:12px 14px calc(16px + env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch;overflow-x:hidden;touch-action:pan-y;}
    .filtersBody::-webkit-scrollbar{width:0;height:0}
    .filtersBody{scrollbar-width:none}

    /* Filter sheet: samma rubrikstil för Main Categories, featured, Map Styles m.m. */
    .sectionTitle,
    .filtersGridSectionTitle{
      font-size:12px;
      color:var(--muted);
      font-weight:900;
      margin:14px 0 8px;
      line-height:1.35;
      text-transform:none;
      letter-spacing:0.01em;
    }
    .sectionTitle + .field{margin-top:0;}
    .field + .field{margin-top:0;}
    .filtersGrid{display:grid;grid-template-columns:1fr;gap:10px;pointer-events:auto;position:relative;z-index:1;}
    @media (min-width:420px){.filtersGrid{grid-template-columns:1fr 1fr;}}
    .filtersGridSectionTitle{
      grid-column:1 / -1;
    }
    .filtersGridSectionTitle:first-of-type{margin-top:0;}

    .fChip{
      appearance:none;-webkit-appearance:none;
      border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 10px;
      display:flex;gap:10px;align-items:center;cursor:pointer;user-select:none;
      font:inherit;color:inherit;text-align:left;width:100%;
      font-weight:900;font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.06);min-width:0;
      pointer-events:auto;position:relative;z-index:2;
    }
    .fChip .ic{width:30px;height:30px;border-radius:999px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff;flex:0 0 auto;}
    .fChip .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .fChip.active{border-color:rgba(15,23,42,.9);background:rgba(15,23,42,.06);}
    /* Privat karta: full etikett per betyg (två kolumner) — ikon + text vertikalt centrerade */
    body.map-private #filtersGrid .fChip{align-items:center;}
    body.map-private #filtersGrid .fChip .txt{
      white-space:normal;
      overflow:hidden;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:5;
      line-clamp:5;
      font-size:11px;
      font-weight:700;
      line-height:1.22;
    }

    .miniRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
    .miniBtn{
      border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;
      font-weight:900;font-size:12px;cursor:pointer;user-select:none;
      display:inline-flex;gap:8px;align-items:center;
      box-shadow:0 6px 16px rgba(0,0,0,.05);
    }
    .miniBtn.active{background:rgba(15,23,42,.92);border-color:rgba(15,23,42,.92);color:#fff;}
    .miniBtn i{opacity:.9}

    /* Two-page views inside filters */
    .filtersView{display:none;}
    .filtersView.open{display:block;}

    /* MORE SPACE between Quick filters and Advanced filters title */
    .quickSection{margin-bottom:28px;}
    .mapStylesSection{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
    .mapStylesRow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
    .mapStyleBtn{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border-radius:14px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .15s, box-shadow .2s;overflow:hidden;}
    .mapStyleBtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
    .mapStyleBtn.active{border-color:var(--primary);background:#eff6ff;color:var(--primary);box-shadow:0 0 0 2px rgba(37,99,235,.25);}
    .mapStyleBtnIcon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center;}
    .mapStyleBtn.active .mapStyleBtnIcon:not([style*="background-image"]){background:var(--primary);color:#fff;}

    .field{
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      padding:10px 12px;
      box-shadow:0 6px 16px rgba(0,0,0,.06);
      margin-bottom:10px;
      margin-top:0;
      position:relative;
    }
    .field label{display:block;font-size:11px;color:var(--muted);font-weight:900;margin-bottom:6px;}
    .field input, .field select{
      width:100%;
      border:1px solid #eef2f7;
      background:#f8fafc;
      border-radius:12px;
      padding:10px 10px;
      outline:none;
      font-size:16px;
    }
    /* Subcategories kör readonly picker-beteende och ska se ut som övriga selects. */
    #subcatSearch[readonly]{
      background-color:#fff;
      color:#0f172a;
      border-color:#dbe3ef;
      padding-right:36px;
      cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 10px center;
      background-size:16px 16px;
    }
    #subcatSearch[readonly]::placeholder{
      color:#0f172a;
      opacity:1;
    }
    .field select{
      margin-bottom:8px;
    }
    .field input[type="range"]{
      margin:0 0 8px 0;
      padding:0;
      display:block;
    }
    /* Ett spår, två handtag: två range över varandra; bara tumreglage får pekare (WebKit/Firefox). */
    .field .rangeDual{
      position:relative;
      height:40px;
      margin:0 0 8px 0;
      touch-action:none;
    }
    .field .rangeDualTrack{
      position:absolute;
      left:0;right:0;top:50%;
      transform:translateY(-50%);
      height:6px;
      border-radius:999px;
      background:#e2e8f0;
      pointer-events:none;
    }
    .field .rangeDualFill{
      position:absolute;
      left:0;top:0;bottom:0;
      border-radius:999px;
      background:var(--primary);
      pointer-events:none;
      min-width:4px;
      box-sizing:border-box;
    }
    .field .rangeDualInput{
      position:absolute;
      left:0;width:100%;
      top:0;
      height:40px;
      margin:0;
      padding:0;
      border:none;
      outline:none;
      background:transparent;
      border-radius:0;
      font-size:inherit;
      -webkit-appearance:none;
      appearance:none;
      pointer-events:none;
    }
    .field .rangeDualInput::-webkit-slider-runnable-track{
      height:6px;
      background:transparent;
      border:none;
    }
    .field .rangeDualInput::-moz-range-track{
      height:6px;
      background:transparent;
      border:none;
    }
    .field .rangeDualInput::-webkit-slider-thumb{
      -webkit-appearance:none;
      pointer-events:auto;
      box-sizing:border-box;
      width:18px;height:18px;
      margin-top:-6px;
      border-radius:50%;
      background:#fff;
      border:2px solid var(--primary);
      box-shadow:0 2px 6px rgba(0,0,0,.12);
      cursor:grab;
    }
    .field .rangeDualInput:active::-webkit-slider-thumb{cursor:grabbing;}
    .field .rangeDualInput::-moz-range-thumb{
      pointer-events:auto;
      box-sizing:border-box;
      width:18px;height:18px;
      border-radius:50%;
      background:#fff;
      border:2px solid var(--primary);
      box-shadow:0 2px 6px rgba(0,0,0,.12);
      cursor:grab;
    }
    .field .rangeDualInput:active::-moz-range-thumb{cursor:grabbing;}
    .field .rangeDualMin{z-index:3;}
    .field .rangeDualMax{z-index:4;}
    .field .hint{font-size:11px;color:#94a3b8;margin-top:0;line-height:1.35;}

    /**
     * iOS Safari zoomar viewport vid fokus om text i fältet beräknas till under 16px (samma som .searchbar input).
     * #app fångar filter, packing, framtida fält och t.ex. Mapbox Geocoder — inte range/checkbox/radio/dolda knappar.
     */
    #app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    #app select,
    #app textarea{
      font-size:max(16px,1em);
    }

    .typeahead{
      position:absolute;left:12px;right:12px;top: 74px;
      background:#fff;border:1px solid var(--line);border-radius:14px;
      box-shadow:var(--shadow2);overflow:hidden;display:none;z-index:10;
      max-height: 400px;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
    .typeahead.open{display:block;}
    .typeItem{
      padding:10px 12px;border-bottom:1px solid #f1f5f9;cursor:pointer;font-size:13px;
      touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
    }
    .typeItem:last-child{border-bottom:none;}
    .typeItem:hover{background:#f8fafc;}

    .chipBox{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
    .tinyChip{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:6px 8px;
      font-size:12px;
      font-weight:900;
      display:flex;
      gap:6px;
      align-items:center;
    }
    .tinyChip button{
      border:none;background:transparent;cursor:pointer;color:var(--danger);padding:0;margin:0;font-size:14px;
    }

    /* Marker */
    .m-point{
      width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.96);
      display:flex;align-items:center;justify-content:center;box-shadow:0 10px 18px rgba(0,0,0,.18);
      border:2px solid var(--primary);color:var(--primary);cursor:pointer;user-select:none;
    }
    .m-point i{font-size:14px;}
    .m-point.dim{opacity:.55;}
    .m-point.hit{box-shadow:0 14px 24px rgba(0,0,0,.26);}

    .mapboxgl-ctrl-top-right,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-distance{touch-action:none;}
    .mapboxgl-ctrl-distance{background:#fff;border-radius:4px;box-shadow:0 0 0 2px rgba(0,0,0,.1);}
    .mapboxgl-ctrl-distance button{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#404040;}
    .mapboxgl-ctrl-distance button:hover{background:#f0f0f0;color:#000;}
    .mapboxgl-ctrl-distance button.active,.mapboxgl-ctrl-distance button.active:hover{background:var(--primary);color:#fff;}
    .mapboxgl-ctrl-distance button i{font-size:14px;}
    .mapZoomHud{
      position:fixed;
      left:10px;
      bottom:calc(12px + env(safe-area-inset-bottom));
      z-index:5000;
      background:rgba(255,255,255,.96);
      border:1px solid var(--line);
      border-radius:10px;
      padding:6px 10px;
      font-size:12px;
      font-weight:600;
      box-shadow:var(--shadow2);
      pointer-events:none;
      touch-action:none;
      color:var(--text);
      font-variant-numeric:tabular-nums;
    }
    .mapZoomHudLabel{color:var(--muted);font-weight:700;font-size:11px;margin-right:6px;}
    #distance-container{display:none;position:fixed;right:10px;top:184px;z-index:5000;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;box-shadow:var(--shadow2);pointer-events:auto;touch-action:none;}
    #popup-container{position:fixed;inset:0;z-index:5150;pointer-events:none;touch-action:none;}
    #popup-container .mapboxgl-popup{pointer-events:auto;touch-action:none;}
    @media (min-width:769px){ .popupPill{cursor:help !important;} }
    @media (max-width:768px){ .popupPill{cursor:pointer !important;} }
    #distance-container.visible{display:block;}
    .mapboxgl-popup-content{
      padding:0 0 6px 0 !important;border-radius:16px !important;width:300px !important;max-width:300px !important;overflow:hidden !important;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      position:relative !important;
      box-sizing:border-box !important;
    }
    .mapboxgl-popup-content > div > div[style*="padding:10px 0 2px"]{
      padding:10px 12px 2px 12px !important;
    }
    .mapboxgl-popup-content .popupImageContainer{
      border-radius:16px 16px 0 0 !important;
    }
    .mapboxgl-popup-content .popupImageContainer img{
      border-radius:16px 16px 0 0 !important;
    }
    .mapboxgl-popup-content .popupImageContainer .popupImagePreview{
      cursor:zoom-in !important;
      touch-action:manipulation !important;
      transition:transform .12s ease !important;
    }
    .mapboxgl-popup-content .popupImageContainer .popupImagePreview:active{
      transform:scale(.985) !important;
    }
    .mapboxgl-popup-content > div[style*="276px"]{
      width:100% !important;
      max-width:100% !important;
    }
    .popupImageLightbox{
      position:fixed;
      inset:0;
      z-index:12000;
      background:rgba(2,6,23,.92);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      touch-action:none;
      overscroll-behavior:contain;
    }
    .popupImageLightboxInner{
      width:min(96vw,1200px);
      height:min(90vh,900px);
      display:flex;
      align-items:center;
      justify-content:center;
      touch-action:none;
    }
    .popupImageLightboxImg{
      max-width:100%;
      max-height:100%;
      width:auto;
      height:auto;
      object-fit:contain;
      border-radius:12px;
      box-shadow:0 20px 50px rgba(0,0,0,.45);
      background:#0f172a;
      touch-action:none;
      -webkit-user-select:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    .popupImageLightboxClose{
      position:absolute;
      top:14px;
      right:14px;
      width:36px;
      height:36px;
      border:none;
      border-radius:999px;
      background:rgba(15,23,42,.65);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:18px;
      box-shadow:0 2px 10px rgba(0,0,0,.35);
    }
    .mapboxgl-popup{
      max-width:300px !important;
      z-index:6000 !important;
    }
    /* Gemensam popup-knapp över bilden – i-knappar, glassmorphism */
    .popupCornerBtn{
      font-size:0 !important;
      padding:0 !important;
      margin:0 !important;
      border-radius:50% !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      box-sizing:border-box !important;
      opacity:1 !important;
      visibility:visible !important;
      position:absolute !important;
      cursor:pointer !important;
      background:rgba(0,0,0,.55) !important;
      backdrop-filter:blur(8px) !important;
      -webkit-backdrop-filter:blur(8px) !important;
      border:1px solid rgba(255,255,255,.25) !important;
      box-shadow:0 2px 8px rgba(0,0,0,.5) !important;
      color:#fff !important;
      width:24px !important;
      height:24px !important;
      transition:all .15s ease !important;
      z-index:10 !important;
    }
    .popupCornerBtn:hover{
      background:rgba(0,0,0,.75) !important;
      border-color:rgba(255,255,255,.4) !important;
      color:#fff !important;
    }
    .popupCloseBtn{
      top:0 !important;
    }
    .popupImageInfoBtnWrap{
      position:absolute !important;
      left:8px !important;
      top:8px !important;
      z-index:12 !important;
    }
    .popupImageInfoBtnWrap .popupImageInfoBtn{
      left:0 !important;
      top:0 !important;
      right:auto !important;
      width:18px !important;
      height:18px !important;
    }
    .popupImageInfoBtn::before{ font-size:10px !important; width:10px !important; height:10px !important; }
    .popupCloseBtn{ right:0 !important; left:auto !important; }
    .popupImageInfoBtn::before,
    .popupCloseBtn::before{
      font-family:"Font Awesome 6 Free" !important;
      font-weight:900 !important;
      font-size:13px !important;
      line-height:1 !important;
      display:block !important;
      margin:0 !important;
      padding:0 !important;
      width:13px !important;
      height:13px !important;
      text-align:center !important;
      text-shadow:0 1px 2px rgba(0,0,0,.4) !important;
    }
    .popupImageInfoBtn::before{ content:"\f129" !important; }
    .popupCloseBtn::before{ content:"\f00d" !important; }
    .popupImageInfoOverlay{
      position:absolute !important;
      left:50% !important;
      top:50% !important;
      transform:translate(-50%, -50%) !important;
      margin-top:0 !important;
      width:248px !important;
      max-width:min(78vw,248px) !important;
      padding:11px 12px 10px !important;
      background:rgba(15,23,42,.86) !important;
      backdrop-filter:blur(10px) !important;
      -webkit-backdrop-filter:blur(10px) !important;
      color:#e2e8f0 !important;
      font-size:11px !important;
      line-height:1.42 !important;
      border-radius:12px !important;
      border:1px solid rgba(148,163,184,.28) !important;
      box-shadow:0 14px 28px rgba(2,6,23,.38) !important;
      z-index:11 !important;
      display:none !important;
      pointer-events:auto !important;
    }
    .popupImageInfoOverlay.visible{
      display:block !important;
    }
    .popupImageInfoOverlay a{
      color:#93c5fd !important;
      text-decoration:none !important;
      cursor:pointer !important;
      pointer-events:auto !important;
    }
    .popupImageInfoOverlay a:hover{
      color:#bfdbfe !important;
      text-decoration:underline !important;
    }
    .popupImageInfoTitle{
      font-size:10px !important;
      text-transform:uppercase !important;
      letter-spacing:.08em !important;
      font-weight:800 !important;
      color:#94a3b8 !important;
      margin-bottom:6px !important;
    }
    .popupImageInfoMain{
      color:#f8fafc !important;
      font-size:11.5px !important;
      line-height:1.45 !important;
      margin-bottom:7px !important;
      word-break:break-word !important;
    }
    .popupImageInfoLinks{
      display:flex !important;
      flex-wrap:wrap !important;
      gap:6px !important;
    }
    .popupImageInfoLinks a{
      display:inline-flex !important;
      align-items:center !important;
      padding:4px 8px !important;
      border-radius:999px !important;
      border:1px solid rgba(148,163,184,.35) !important;
      background:rgba(30,41,59,.62) !important;
      font-size:10px !important;
      font-weight:700 !important;
      line-height:1.2 !important;
    }
    .popupImageInfoEmpty{
      color:#cbd5e1 !important;
      font-size:11px !important;
    }
    /* Covers .popupImageContainer only (wrap is a child of that box in DOM). */
    .popupImageInfoWrap{
      position:absolute !important;
      inset:0 !important;
      transform:none !important;
      z-index:10 !important;
      pointer-events:none !important;
    }
    .popupImageInfoWrap .popupImageInfoOverlay{
      pointer-events:auto !important;
    }
    .popupCloseWrap{
      position:absolute !important;
      right:8px !important;
      top:8px !important;
      z-index:10 !important;
    }
    /* Popup action buttons */
    .popupActions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:6px;
      margin-top:10px;
      position:relative;
    }
    .popupActionBtn{
      border:1px solid #e2e8f0;
      background:#fff;
      color:#0f172a;
      border-radius:8px;
      padding:6px 10px;
      cursor:pointer;
      font-weight:900;
      font-size:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4px;
      transition:all .15s ease;
    }
    .popupActionBtn:hover{
      background:#f8fafc;
      border-color:#cbd5e1;
    }
    .popupActionBtn i{
      font-size:12px;
    }

    /* Round icon buttons */
    .popupIconActions{
      display:flex;
      gap:6px;
      justify-content:center;
      align-items:center;
    }
    .popupIconBtn{
      width:40px;
      height:40px;
      border-radius:50%;
      border:1px solid #e2e8f0;
      background:#fff;
      color:#0f172a;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:all .15s ease;
      position:relative;
      flex-shrink:0;
    }
    .popupIconBtn:hover{
      background:#f8fafc;
      border-color:#cbd5e1;
      transform:scale(1.05);
    }
    .popupIconBtnActive{
      background:#0f172a !important;
      border-color:#0f172a !important;
      color:#fff !important;
    }
    .popupIconBtnActive:hover{
      background:#1e293b !important;
      border-color:#1e293b !important;
    }
    .popupIconBtn i{
      font-size:18px;
    }
    .popupIconBtnGoogle{
      background:#fff !important;
    }
    .popupIconBtnGoogle:hover{
      background:#f8fafc !important;
    }
    .popupIconBtnGoogle .googleGIcon,
    .popupIconBtnGoogle .popupIconSvg{
      display:block;
      flex-shrink:0;
    }
    .popupIconBtnGoogle .popupIconSvg{ width:24px !important; height:24px !important; }
    .popupIconBtnGoogle .popupIconSvgLens{ width:28px !important; height:28px !important; }
    .popupIconBtnGoogle .googleGIcon{ width:22px !important; height:22px !important; }

    /* Navigation menu */
    .navMenu{
      position:absolute;
      top:calc(100% + 8px);
      left:50%;
      transform:translateX(-50%);
      width:180px;
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,.12);
      overflow:hidden;
      z-index:10000;
      display:none;
    }
    .navMenu.open{
      display:block;
    }
    .navMenuItem{
      padding:12px 14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:10px;
      border-bottom:1px solid #f1f5f9;
      transition:background .15s ease;
    }
    .navMenuItem:last-child{
      border-bottom:none;
    }
    .navMenuItem:hover{
      background:#f8fafc;
    }
    .navMenuItem i{
      font-size:16px;
      color:#64748b;
      width:20px;
    }
    .navMenuItem span{
      flex:1;
      font-weight:900;
      font-size:13px;
    }

    /* Navigation app choice dialog */
    .map-choice-dialog{
      position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.7); padding:16px; -webkit-overflow-scrolling:touch;
    }
    .map-choice-content{
      background:#2d333b; border-radius:6px; padding:20px; max-width:300px; width:90%;
      box-shadow:0 8px 24px rgba(0,0,0,.3); font-family:inherit;
    }
    .map-choice-content h3{
      margin:0 0 15px; font-size:16px; font-weight:600; text-align:center; color:#fffafa;
    }
    .map-choice-content button{
      display:flex; align-items:center; justify-content:center; gap:8px;
      width:100%; padding:12px; margin:8px 0; border:1px solid #444c56; border-radius:6px;
      background:#22272e; color:#adbac7; font-size:14px; font-weight:600; cursor:pointer;
      transition:all .2s;
    }
    .map-choice-content button:active{ transform:scale(.98); }
    .map-choice-content button:hover{
      background:#bc0ab9; border-color:#bc0ab9; color:#fff;
    }
    .map-choice-content button:hover svg path{ fill:#fff; }
    .map-choice-content .cancel-btn{
      margin-top:16px; background:#2d333b; border-color:#444c56; color:#fffafa;
    }
    .map-choice-content .cancel-btn:hover{
      background:#444c56; border-color:#444c56; color:#fff;
    }
    .map-choice-content .cancel-btn:hover svg path{ fill:#fff; }
    .nav-icon{ width:24px; height:24px; flex-shrink:0; margin-right:8px; }

    /* Help sheet (same layout as Trip plan / Packing) */
    #helpSheet{
      position:fixed;left:0;right:0;bottom:0;z-index:5400;max-width:1032px;margin:0 auto;width:100%;
      background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-bottom:none;
      border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -10px 30px rgba(0,0,0,.14);
      height:var(--sheetMax);transform:translateY(110%);transition:transform .22s cubic-bezier(.16,1,.3,1);
      display:flex;flex-direction:column;overflow:hidden;touch-action:none;
    }
    #helpSheet.open{transform:translateY(0);}
    #routesSheet{position:fixed;left:0;right:0;bottom:0;z-index:5400;max-width:1032px;margin:0 auto;width:100%;background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-bottom:none;border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -10px 30px rgba(0,0,0,.14);height:var(--sheetMax);transform:translateY(110%);transition:transform .22s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;overscroll-behavior:contain;}
    #routesSheet.open{transform:translateY(0);}
    .helpSheetBody{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 14px 18px;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.6;touch-action:pan-y;}
    .helpSheetBody p{margin:0 0 14px;}
    .helpSheetBody p:last-child{margin-bottom:0;}
    .helpIntro{font-weight:600;margin-bottom:16px !important;}
    .helpSheetBody a{color:var(--primary);text-decoration:underline;}
    .helpSheetBody a:hover{text-decoration:none;}
    /* Routes sheet: explore corridor */
    .routesSheetBody{padding-top:8px;touch-action:pan-y;}
    /* Routes: hela innehållet scrollar i body (viktigt på mobil — annars når man inte resultatlistan) */
    #routesSheet .routesSheetBody{
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
      min-height:0;
      overflow-x:hidden;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      scrollbar-gutter:stable;
      scrollbar-width:auto;
      scrollbar-color:#94a3b8 #f1f5f9;
    }
    #routesSheet .routesSheetBody::-webkit-scrollbar{width:14px;}
    #routesSheet .routesSheetBody::-webkit-scrollbar-track{background:#f1f5f9;border-radius:8px;margin:4px 0;}
    #routesSheet .routesSheetBody::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:8px;border:2px solid #f1f5f9;}
    #routesSheet .routesSheetBody::-webkit-scrollbar-thumb:hover{background:#64748b;}
    /* Routes: resultat är bara innehåll i flödet — all scroll sker i routesSheetBody (ingen nästlad lista) */
    .routeExploreResultsScroll{
      margin-top:16px;
      padding:8px 10px 14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#f8fafc;
      flex:0 0 auto;
      overflow:visible;
    }
    .routesIntro{font-size:13px;line-height:1.55;color:#475569;margin:0 0 22px;}
    .routeExploreForm{margin-bottom:8px;flex-shrink:0;}
    .routeGeoField{margin-bottom:12px;}
    .routeGeoField label{display:block;font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
    .routeGeoWrap{position:relative;display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:8px 10px;}
    .routeGeoWrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.2);}
    .routeGeoIcon{color:#94a3b8;font-size:15px;flex-shrink:0;}
    .routeGeoIconStart{color:#0ea5e9;}
    .routeGeoIconDest{color:#8b5cf6;}
    .routeGeoInput{flex:1;min-width:0;border:none;background:transparent;font-size:15px;font-weight:600;color:#0f172a;outline:none;}
    .routeGeoSuggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 28px rgba(15,23,42,.12);max-height:200px;overflow:auto;}
    .routeGeoSuggestItem{padding:10px 12px;font-size:13px;line-height:1.35;cursor:pointer;border-bottom:1px solid #f1f5f9;}
    .routeGeoSuggestItem:last-child{border-bottom:none;}
    .routeGeoSuggestItem:hover,.routeGeoSuggestItem:focus{background:#eff6ff;outline:none;}
    .routeGeoSuggestItemTitle{font-weight:800;color:#0f172a;}
    .routeGeoSuggestItemSub{font-size:11px;color:#64748b;margin-top:2px;}
    .routeRadiusRow{margin-top:20px;margin-bottom:14px;}
    .routeRadiusHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
    .routeRadiusHead label{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;}
    .routeRadiusValue{font-size:14px;font-weight:900;color:#0f172a;}
    #routeRadiusSlider{width:100%;accent-color:var(--primary);}
    .routeExploreSearchBtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;padding:12px 16px;border:none;border-radius:14px;background:var(--primary);color:#fff;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(59,130,246,.35);}
    .routeExploreSearchBtn:hover{filter:brightness(1.05);}
    .routeExploreSearchBtn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
    .routeExploreResetBtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;padding:11px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:#475569;font-size:14px;font-weight:800;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
    .routeExploreResetBtn:hover{border-color:#cbd5e1;background:#f8fafc;color:#0f172a;}
    .routeExploreResetBtn:active{transform:scale(0.99);}
    .routeExploreAlternatives{margin-top:14px;}
    .routeExploreAlternativesLabel{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
    .routeExploreAltRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;}
    .routeExploreAltBtn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:#f8fafc;font-size:12px;font-weight:800;color:#0f172a;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
    .routeExploreAltBtn:hover{border-color:#cbd5e1;background:#fff;}
    .routeExploreAltBtn--active{border-color:var(--primary);background:#eff6ff;box-shadow:0 0 0 1px rgba(59,130,246,.2);}
    .routeExploreAltTitle{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.03em;}
    .routeExploreAltMeta{font-size:12px;font-weight:800;color:#0f172a;line-height:1.35;}
    .routeExploreStats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:14px;padding:12px 14px;background:linear-gradient(135deg,#f0f9ff 0%,#eef2ff 100%);border:1px solid #bae6fd;border-radius:14px;font-size:13px;font-weight:800;color:#0f172a;text-align:center;}
    .routeExploreStat{display:inline-flex;align-items:center;gap:8px;}
    .routeExploreStat i{color:#0369a1;font-size:14px;}
    .routeExploreStatSep{color:#cbd5e1;font-weight:700;}
    .routeExploreError{margin-top:12px;padding:10px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;font-size:13px;font-weight:700;color:#b91c1c;}
    .routeExploreResults{padding-bottom:8px;margin-top:0;}
    .routeExploreResults .itemCard{cursor:default;align-items:stretch;}
    .routeExploreResults .routeExploreItemMain{cursor:pointer;flex:1;min-width:0;}
    .routeExploreResults .routeExploreThumb{cursor:pointer;}
    .routeExploreAddBtn{flex-shrink:0;align-self:center;width:44px;height:44px;border:none;border-radius:14px;background:#e0f2fe;color:#0369a1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,transform .1s;}
    .routeExploreAddBtn:hover{background:#bae6fd;color:#0c4a6e;}
    .routeExploreAddBtn:active{transform:scale(.96);}
    .routeExploreAddBtn--active{background:#dcfce7;color:#15803d;}
    .routeExploreAddBtn--active:hover{background:#bbf7d0;color:#14532d;}
    .routeExploreAddBtn i{font-size:18px;}
    .routeExploreEmpty{padding:28px 12px;text-align:center;color:#64748b;font-size:13px;line-height:1.5;}
    .routeExploreEmpty strong{display:block;color:#0f172a;font-size:14px;margin-bottom:6px;}
    .helpSection{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f8fafc;}
    .helpSection:first-child{margin-top:0;}
    .helpSectionTitle{padding:12px 14px;font-size:13px;font-weight:900;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;}
    .helpSectionTitle:hover{background:#f1f5f9;}
    .helpSectionTitle i{font-size:10px;transition:transform .2s;flex-shrink:0;}
    .helpSection.collapsed .helpSectionTitle i{transform:rotate(-90deg);}
    .helpSection.collapsed .helpSectionBody{display:none;}
    .helpSectionBody{padding:0 14px 14px;}
    .helpSectionBody p{margin:0 0 14px;}
    .helpSectionBody p:last-child{margin-bottom:0;}
    .helpSocialSection{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
    .helpSocialSection .icon-container{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;}
    .helpSocialSection .icon-container a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#e2e8f0;color:#475569;transition:background .2s,color .2s;}
    .helpSocialSection .icon-container a:hover{background:var(--primary);color:#fff;}
    .helpSocialSection .icon-container svg{width:20px;height:20px;}
    #helpSheet > .helpSheetBrandLogo{
      flex-shrink:0;display:flex;justify-content:center;align-items:center;width:100%;margin:0;box-sizing:border-box;
      padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line);
    }
    #helpSheet > .helpSheetBrandLogo img{display:block;height:auto;width:auto;max-width:min(288px,86vw);max-height:62px;object-fit:contain;opacity:0.9;}
    /* =========================
   Popup: meta + tags
   ========================= */
 /* Meta row */
.popupMeta{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
  text-align:left;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

/* Tags wrap direkt under meta */
.popupShowMoreBtn{ display:none; }
.popupShowMoreWrap{ display:block; }
.popupTagsWrap{
  margin-top:6px;
  margin-bottom:10px;
  text-align:left;
  display:block;
}

.popupTogglesRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:center;
}

/* Toggle-rad: samma storlek som meta */
.popupTagsToggle{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-start;
  text-align:left;

  font-size:11px;
  font-weight:700;
  color:#94a3b8;
}

/* Rätt ikon: hashtag (web/internet-känsla) */
.popupTagsToggle i.fa-hashtag{
  color:#94a3b8;
  font-size:1em;
}

.popupAliasesToggle i.fa-tags{
  color:#ef4444;
  font-size:1em;
}

/* (X) matchar meta */
.popupTagsToggle .cnt{
  color:#94a3b8;
  font-weight:700;
}

/* Tags container */
.popupTags{
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start; /* vänster */
  max-height:0;
  overflow:hidden;
  transition:max-height .2s ease;
}

.popupTags.open{
  max-height:120px;
  margin-top:6px;
}

.popupAliases{
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  max-height:0;
  overflow:hidden;
  transition:max-height .2s ease;
}

.popupAliases.open{
  max-height:120px;
  margin-top:6px;
}

.popupTagsWrap:has(.popupTags.open),
.popupTagsWrap:has(.popupAliases.open){
  padding-bottom:4px;
}

.popupDescription{
  margin-top:2px !important;
}

/* Tag-chips (boxarna runt varje tag) */
.popupTag{
  border:1px solid var(--line) !important;
  background:#fff !important;
  border-radius:999px;
  padding:3px 7px;
  font-size:10px;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
  display:inline-block;
  cursor:pointer;
}

/* Mobile finlir */
@media (max-width:768px){
  .sheetStats{padding:10px 14px 10px;}
  .shareDeepLinkGateLogo img{max-height:clamp(77px,28.8vmin,144px);}
  .rowTop{flex-wrap:nowrap;gap:6px;}
  .searchWrap{flex:0 0 72%;min-width:0;max-width:72%;}
  .searchbar{padding:7px 6px;min-height:34px;min-width:0;overflow:hidden;}
  .searchbar .searchbarDivider{height:17px;}
  /* 16px min: iOS Safari zoomar inte in vid fokus i sökfältet */
  .searchbar input{min-width:0;font-size:16px;padding:4px 2px;}
  .searchbar .iconBtn,.searchbar .filtersBtn{padding:4px 6px;font-size:14px;}
  .searchbar .filtersCount{font-size:10px;padding:1px 6px;min-width:18px;}
  .searchbar > i{font-size:14px;}
  .fab{left:12px;right:12px;display:flex;justify-content:center;}
  .fabStack{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px;max-width:312px;align-items:start;}
  .fabStack .fabBtn:nth-child(1){grid-column:1;grid-row:1;justify-self:start;align-self:start;}
  .fabStack .fabBtn:nth-child(2){grid-column:1;grid-row:2;justify-self:start;align-self:start;}
  .fabStack .fabBtn:nth-child(3){grid-column:2;grid-row:1;justify-self:end;align-self:start;}
  .fabStack .fabBtn:nth-child(4){grid-column:2;grid-row:2;justify-self:end;align-self:start;}
  /* 148px: plats för tvåsiffrig badge utan att "Trip plan"/"Packing" radbryts (132px räckte bara för 1 siffra) */
  .fab .fabBtn{width:148px;flex-wrap:nowrap;white-space:nowrap;height:30px !important;min-height:30px !important;padding:8px 11px !important;gap:8px;font-size:11px;border-width:1.5px;box-sizing:border-box;}
  .fab .fabBtn i{font-size:11px;}
  .fab .badge{padding:1px 5px;font-size:9px;min-width:16px;}
  .popupMeta{ font-size:10px !important; }
  .popupTagsToggle{ font-size:10px !important; }
  .popupTag{ font-size:9px !important; padding:2px 5px !important; }
  .popupTags.open{ max-height:92px; }
  .popupAliases.open{ max-height:92px; }
}

/* Liggande (telefon/smal surfplatta): FAB som desktop — vertikal kolumn till höger. Stående oförändrad (2×2-rutnät ovan). */
@media (orientation:landscape) and (max-width:899px){
  .fab{
    left:auto;
    right:calc(12px + env(safe-area-inset-right,0px));
    bottom:calc(5px + env(safe-area-inset-bottom,0px));
    display:flex;
    justify-content:flex-end;
  }
  .fabStack{
    display:flex;
    flex-direction:column;
    gap:3px;
    align-items:flex-end;
    max-width:none;
  }
  .fabStack .fabBtn:nth-child(1),.fabStack .fabBtn:nth-child(2),.fabStack .fabBtn:nth-child(3),.fabStack .fabBtn:nth-child(4){
    grid-column:unset;
    grid-row:unset;
    justify-self:unset;
    align-self:unset;
  }
  /* Samma knappstorlek som stående (små knappar), bara layout som blir kolumn */
  .fab .fabBtn{width:148px;flex-wrap:nowrap;white-space:nowrap;height:30px !important;min-height:30px !important;padding:8px 11px !important;gap:8px;font-size:11px;border-width:1.5px;box-sizing:border-box;}
  .fab .fabBtn i{font-size:11px;}
  .fab .badge{padding:1px 5px;font-size:9px;min-width:16px;}
}


    /* Toast */
    #toast{
      position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));
      z-index:9000;display:none;background:rgba(0,0,0,.82);color:#fff;border:1px solid rgba(255,255,255,.18);touch-action:none;
      border-radius:14px;padding:16px 20px;font-size:14px;font-weight:600;box-shadow:var(--shadow);
      max-width:400px;margin:0 auto;text-align:center;min-height:48px;align-items:center;justify-content:center;
    }

    /* Mobile - smaller popup */
    @media (max-width:768px){
      .mapboxgl-popup-content{
        width:230px !important;
        max-width:230px !important;
        padding:0 0 8px 0 !important;
        font-size:12px !important;
        box-sizing:border-box !important;
      }
      .mapboxgl-popup-content > div > div[style*="padding:10px 0 2px"]{
        padding:10px 8px 2px 8px !important;
      }
      .mapboxgl-popup-content > div[style*="276px"]{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
      }
      .popupCloseWrap{ right:8px !important; top:8px !important; }
      .mapboxgl-popup{
        max-width:230px !important;
      }
      .mapboxgl-popup-content .popupImageContainer{
        height:137px !important;
      }
      .mapboxgl-popup-content .popupImageContainer img{
        height:137px !important;
      }
      .popupIconBtn{
        width:32px !important;
        height:32px !important;
      }
      .popupIconBtn i{
        font-size:14px !important;
      }
      .popupIconBtnGoogle .popupIconSvg{ width:20px !important; height:20px !important; }
      .popupIconBtnGoogle .popupIconSvgLens{ width:22px !important; height:22px !important; }
      .popupIconBtnGoogle .googleGIcon{ width:18px !important; height:18px !important; }
      .mapboxgl-popup-content span[style*="border-radius:999px"][style*="font-size:10px"],
      .mapboxgl-popup-content .popupPill{
        padding:2px 5px !important;
        font-size:8px !important;
        gap:2px !important;
      }
      .mapboxgl-popup-content .popupPill i{
        font-size:8px !important;
      }
      .mapboxgl-popup-content div[style*="padding:8px 10px 6px"]{
        padding:5px 6px 3px !important;
      }
      .mapboxgl-popup-content div[style*="gap:4px"][style*="flex-wrap:nowrap"]{
        gap:2px !important;
      }
      .mapboxgl-popup-content div[style*="padding:10px 0 2px"] div[style*="font-weight:900"][style*="font-size:15px"]{
        font-size:13px !important;
      }
      .mapboxgl-popup-content div[style*="font-size:11px"][style*="color:#64748b"]{
        font-size:10px !important;
      }
      /* Photo credit – samma skalning som smal popup (230 vs 276 px) */
      .mapboxgl-popup-content .popupImageInfoOverlay{
        width:206px !important;
        max-width:min(88vw,206px) !important;
        padding:8px 9px 7px !important;
        font-size:9px !important;
        line-height:1.38 !important;
        border-radius:10px !important;
        box-shadow:0 10px 20px rgba(2,6,23,.32) !important;
        backdrop-filter:blur(8px) !important;
        -webkit-backdrop-filter:blur(8px) !important;
      }
      .mapboxgl-popup-content .popupImageInfoTitle{
        font-size:8px !important;
        letter-spacing:.07em !important;
        margin-bottom:4px !important;
      }
      .mapboxgl-popup-content .popupImageInfoMain{
        font-size:9.5px !important;
        line-height:1.35 !important;
        margin-bottom:5px !important;
      }
      .mapboxgl-popup-content .popupImageInfoLinks{
        gap:4px !important;
      }
      .mapboxgl-popup-content .popupImageInfoLinks a{
        padding:3px 6px !important;
        font-size:8px !important;
      }
      .mapboxgl-popup-content .popupImageInfoEmpty{
        font-size:9px !important;
      }
      .popupShowMoreBtn{
        display:flex !important;
        align-items:center;
        gap:6px;
        padding:7px 0 9px 0 !important;
        font-size:12px;
        font-weight:700;
        color:var(--primary);
        cursor:pointer;
        border:none;
        background:transparent;
        width:100%;
      }
      .popupTagsWrap{ margin-top:2px !important; }
      .popupShowMoreBtn i{ font-size:10px; transition:transform .2s; }
      .popupShowMoreBtn.expanded i{ transform:rotate(180deg); }
      .popupShowMoreWrap{ display:none !important; }
      .popupShowMoreWrap.expanded{ display:block !important; }
    }
    @media (min-width:769px){
      .mapboxgl-popup-content span[style*="border-radius:999px"][style*="font-size:10px"],
      .mapboxgl-popup-content .popupPill{
        padding:4px 7px !important;
        font-size:11px !important;
        gap:4px !important;
      }
      .mapboxgl-popup-content .popupPill i{
        font-size:11px !important;
      }
      .mapboxgl-popup-content .popupDescription{ font-size:14px !important; }
      .mapboxgl-popup-content div[style*="padding:8px 10px 6px"]{
        padding:10px 12px 8px !important;
      }
      .mapboxgl-popup-content div[style*="gap:4px"][style*="flex-wrap:nowrap"]{
        gap:6px !important;
      }
    }

    /* Desktop - 15% larger popup */
    @media (min-width:769px){
      .mapboxgl-popup-content{
        width:345px !important;
        max-width:345px !important;
        padding:0 0 8px 0 !important;
      }
      .mapboxgl-popup-content > div > div[style*="padding:10px 0 2px"]{
        padding:10px 14px 2px 14px !important;
      }
      .mapboxgl-popup{ max-width:345px !important; }
      .mapboxgl-popup-content > div[style*="276px"]{
        width:100% !important;
        max-width:100% !important;
      }
      .mapboxgl-popup-content .popupImageContainer{
        height:193px !important;
      }
      .mapboxgl-popup-content .popupImageContainer img{
        height:193px !important;
      }
      .mapboxgl-popup-content div[style*="padding:10px 0 2px"] + div div[style*="font-weight:900"][style*="font-size:15px"]{
        font-size:17px !important;
      }
      .mapboxgl-popup-content div[style*="font-size:11px"][style*="color:#64748b"]{
        font-size:13px !important;
      }
      .popupMeta{ font-size:12px !important; }
      .popupTag{ font-size:11px !important; padding:3px 7px !important; }
      .popupTags.open{ max-height:130px !important; }
      .popupAliases.open{ max-height:130px !important; }
      .popupImageInfoOverlay{ max-width:300px !important; padding:12px 14px !important; font-size:12px !important; }
      .popupActionBtn{ padding:8px 12px !important; font-size:12px !important; }
      .popupIconBtn{ width:44px !important; height:44px !important; }
      .popupIconBtn i{ font-size:18px !important; }
      .popupCornerBtn{ width:26px !important; height:26px !important; }
      .popupImageInfoBtnWrap .popupImageInfoBtn{ width:20px !important; height:20px !important; }
      .popupImageInfoBtn::before{ font-size:11px !important; width:11px !important; height:11px !important; }
      .popupCloseBtn::before{ font-size:14px !important; width:14px !important; height:14px !important; }
      .popupCloseWrap{ right:8px !important; top:8px !important; }
    }

    /* Desktop */
    @media (min-width:900px){
      .top-ui{padding:16px;}
      .fab{left:auto;right:8px;bottom:43px;justify-content:flex-end;}
      .fabStack{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
      .fabStack .fabBtn:nth-child(1),.fabStack .fabBtn:nth-child(2),.fabStack .fabBtn:nth-child(3),.fabStack .fabBtn:nth-child(4){grid-column:unset;grid-row:unset;justify-self:unset;}
      .fab .fabBtn{width:200px;padding:14px 17px;gap:12px;font-size:17px;flex-wrap:nowrap;white-space:nowrap;}
      .fab .fabBtn i{font-size:17px;}
      .fab .badge{padding:2px 10px;font-size:14px;min-width:26px;}
      #sheet{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:528px;max-height:none;height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);border-radius:22px;border-bottom:1px solid rgba(0,0,0,.06);}
      #packingSheet{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:528px;max-height:none;height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);border-radius:22px;border-bottom:1px solid rgba(0,0,0,.06);}
      #helpSheet{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:528px;max-height:none;height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);border-radius:22px;border-bottom:1px solid rgba(0,0,0,.06);}
      #routesSheet{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:528px;max-height:none;height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);border-radius:22px;border-bottom:1px solid rgba(0,0,0,.06);}
      #filtersSheet{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:528px;max-height:none;height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);border-radius:22px;border-bottom:1px solid rgba(0,0,0,.06);}
    }