/* ===================== THEMES ===================== */
    :root{
      --bg:#08070e; --panel:rgba(18,14,30,.55); --panel-solid:#12101e;
      --muted:#9e95b7; --text:#f0eef6;
      --accent:#a78bfa; --accent-2:#7c3aed;
      --accent-rgb:167,139,250;
      --accent-glow:rgba(167,139,250,.35);
      --card:rgba(255,255,255,.03); --border:rgba(167,139,250,.15);
      --gold:#fbbf24; --danger:#fb7185;
      --route-color:#a78bfa; --route-glow:rgba(167,139,250,.6);
    }

    /* Cyberpunk Theme */
    [data-theme="cyberpunk"]{
      --bg:#0a0e27; --panel:rgba(15,23,42,.6); --panel-solid:#0f172a;
      --muted:#94a3b8; --text:#f1f5f9;
      --accent:#06b6d4; --accent-2:#0891b2;
      --accent-rgb:6,182,212;
      --accent-glow:rgba(6,182,212,.4);
      --card:rgba(6,182,212,.05); --border:rgba(6,182,212,.2);
      --gold:#fbbf24; --danger:#f43f5e;
      --route-color:#06b6d4; --route-glow:rgba(6,182,212,.8);
    }

    /* Sunset Theme */
    [data-theme="sunset"]{
      --bg:#1a0a0e; --panel:rgba(30,10,20,.6); --panel-solid:#1e0a14;
      --muted:#d8b4a0; --text:#fef3f2;
      --accent:#fb923c; --accent-2:#f97316;
      --accent-rgb:251,146,60;
      --accent-glow:rgba(251,146,60,.4);
      --card:rgba(251,146,60,.05); --border:rgba(251,146,60,.2);
      --gold:#fbbf24; --danger:#fb7185;
      --route-color:#fb923c; --route-glow:rgba(251,146,60,.8);
    }

    /* Forest Theme */
    [data-theme="forest"]{
      --bg:#0a1410; --panel:rgba(10,25,20,.6); --panel-solid:#0a1914;
      --muted:#a7c9b8; --text:#f0fdf4;
      --accent:#10b981; --accent-2:#059669;
      --accent-rgb:16,185,129;
      --accent-glow:rgba(16,185,129,.4);
      --card:rgba(16,185,129,.05); --border:rgba(16,185,129,.2);
      --gold:#fbbf24; --danger:#fb7185;
      --route-color:#10b981; --route-glow:rgba(16,185,129,.8);
    }

    /* Ocean Theme */
    [data-theme="ocean"]{
      --bg:#020617; --panel:rgba(15,23,42,.6); --panel-solid:#0f172a;
      --muted:#94a3b8; --text:#f1f5f9;
      --accent:#3b82f6; --accent-2:#2563eb;
      --accent-rgb:59,130,246;
      --accent-glow:rgba(59,130,246,.4);
      --card:rgba(59,130,246,.05); --border:rgba(59,130,246,.2);
      --gold:#fbbf24; --danger:#f43f5e;
      --route-color:#3b82f6; --route-glow:rgba(59,130,246,.8);
    }

    /* Neon Theme */
    [data-theme="neon"]{
      --bg:#0d0208; --panel:rgba(20,5,15,.6); --panel-solid:#14050f;
      --muted:#e9a6ff; --text:#fff5fe;
      --accent:#d946ef; --accent-2:#c026d3;
      --accent-rgb:217,70,239;
      --accent-glow:rgba(217,70,239,.5);
      --card:rgba(217,70,239,.08); --border:rgba(217,70,239,.3);
      --gold:#fbbf24; --danger:#fb7185;
      --route-color:#d946ef; --route-glow:rgba(217,70,239,.9);
    }
    
    /* Tulip Fields Theme */
    [data-theme="tulip"]{
      --bg:#0f0a08; --panel:rgba(30,15,10,.6); --panel-solid:#1e0f0a;
      --muted:#ffb4a2; --text:#fff9f5;
      --accent:#ef4444; --accent-2:#dc2626;
      --accent-rgb:239,68,68;
      --accent-glow:rgba(239,68,68,.4);
      --card:rgba(239,68,68,.05); --border:rgba(239,68,68,.2);
      --gold:#fbbf24; --danger:#fb7185;
      --route-color:#ef4444; --route-glow:rgba(239,68,68,.8);
    }
    
    /* Redline Theme - Dark and intense */
    [data-theme="redline"]{
      --bg:#0a0000; --panel:rgba(20,0,0,.7); --panel-solid:#140000;
      --muted:#ff6b6b; --text:#ffffff;
      --accent:#ff0000; --accent-2:#cc0000;
      --accent-rgb:255,0,0;
      --accent-glow:rgba(255,0,0,.6);
      --card:rgba(255,0,0,.08); --border:rgba(255,0,0,.3);
      --gold:#fbbf24; --danger:#ff0000;
      --route-color:#ff0000; --route-glow:rgba(255,0,0,.9);
    }
    
    *,*::before,*::after{box-sizing:border-box}
    html,body,#map{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;transition:background-color .3s, color .3s;overflow:hidden}
    a{color:var(--accent)}

    /* Smooth theme transitions */
    .topbar, .search-control, .filter-pills, .theme-switcher, #authBar, .leaflet-control-geoloc,
    .shop-info-flyout, .btn{transition:background .3s, border-color .3s, color .3s, box-shadow .3s}

    /* Modern route animations */
    @keyframes route-flow{
      0%{stroke-dashoffset:0}
      100%{stroke-dashoffset:40}
    }
    .route-line{
      animation:route-flow 1s linear infinite;
      filter:drop-shadow(0 0 8px var(--route-glow));
    }
    .route-glow{
      filter:blur(8px);
    }
    .route-arrow{
      filter:drop-shadow(0 0 4px rgba(251,191,36,.8));
      animation:arrow-pulse 1.5s ease-in-out infinite;
    }
    @keyframes arrow-pulse{
      0%, 100%{opacity:1; transform:scale(1)}
      50%{opacity:.7; transform:scale(1.15)}
    }

    /* Loading Spinner */
    .loading-overlay{
      position:fixed; inset:0; z-index:10000;
      background:var(--bg);
      display:flex; align-items:center; justify-content:center; flex-direction:column;
      gap:20px;
      opacity:1; transition:opacity .5s;
    }
    .loading-overlay.hidden{
      opacity:0; pointer-events:none;
    }
    .spinner{
      width:48px; height:48px; border-radius:50%;
      border:4px solid rgba(167,139,250,.1);
      border-top-color:var(--accent);
      animation:spin 1s linear infinite;
    }
    @keyframes spin{
      to{transform:rotate(360deg)}
    }
    .loading-text{
      color:var(--muted); font-size:14px; font-weight:600;
      animation:pulse-text 1.5s ease-in-out infinite;
    }
    @keyframes pulse-text{
      0%, 100%{opacity:.6}
      50%{opacity:1}
    }

    /* ===================== TOP BAR ===================== */
    .topbar{
      position:absolute; top:12px; left:12px; right:12px; z-index:1000;
      display:flex; gap:12px; align-items:center; flex-wrap:wrap;
      background:var(--panel); backdrop-filter:blur(24px) saturate(1.4);
      padding:10px 14px; border-radius:16px; border:1px solid var(--border);
      box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(167,139,250,.06);
    }

    /* Improved search with icon */
    .search-control{
      display:flex; gap:8px; align-items:center; flex:1; min-width:240px;
    }
    .search-control input{
      flex:1; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
      color:var(--text); border-radius:10px; padding:9px 12px 9px 36px; outline:none;
      font-size:14px; transition:all .2s;
      background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%239e95b7" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
      background-repeat:no-repeat; background-position:10px center;
    }
    .search-control input:focus{
      border-color:var(--accent); 
      box-shadow:0 0 0 3px var(--accent-glow);
      background-color:rgba(255,255,255,.08);
    }
    .search-control input::placeholder{color:var(--muted); opacity:.7}
    .search-control button{
      border:none; background:rgba(255,255,255,.05);
      color:var(--muted); border-radius:8px; padding:8px 10px; cursor:pointer;
      transition:all .2s; font-size:16px;
    }
    .search-control button:hover{
      background:rgba(251,113,133,.15); 
      color:var(--danger);
    }

    /* Divider in topbar */
    .topbar-divider{
      width:1px; height:28px;
      background:linear-gradient(180deg, transparent, var(--border), transparent);
      margin:0 4px;
    }

    /* Theme Switcher - Compact */
    /* Theme Indicator - Read-only */
    .theme-indicator{
      font-size:11px;
      color:#808080;
      padding:6px 10px;
      background:rgba(128,128,128,.1);
      border-radius:8px;
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:4px;
    }

    /* Map Style Selector */
    .map-style-selector{
      display:flex; gap:6px; align-items:center;
    }
    .map-style-btn{
      width:32px; height:32px; border-radius:8px; border:2px solid transparent;
      cursor:pointer; transition:all .2s; font-size:14px;
      background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
      position:relative; overflow:hidden;
    }
    .map-style-btn:hover{
      transform:scale(1.08); 
      border-color:rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
    }
    .map-style-btn.active{
      border-color:var(--accent); 
      background:linear-gradient(135deg, rgba(167,139,250,.15), rgba(124,58,237,.15));
      box-shadow:0 0 12px var(--accent-glow);
    }
    .map-style-btn::after{
      content:attr(data-tooltip);
      position:absolute; top:-30px; left:50%; transform:translateX(-50%);
      background:var(--panel-solid); color:var(--text); 
      padding:4px 8px; border-radius:6px; font-size:10px;
      white-space:nowrap; opacity:0; pointer-events:none;
      transition:opacity .2s; border:1px solid var(--border);
      box-shadow:0 4px 12px rgba(0,0,0,.3);
    }
    .map-style-btn:hover::after{opacity:1}
    
    /* Clustering Toggle Button */
    .cluster-toggle-btn{
      width:32px; height:32px; border-radius:8px; border:2px solid transparent;
      cursor:pointer; transition:all .2s; font-size:10px;
      background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
      position:relative; line-height:1; letter-spacing:-1px;
    }
    .cluster-toggle-btn:hover{
      transform:scale(1.08); 
      border-color:rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
    }
    .cluster-toggle-btn.active{
      border-color:var(--accent); 
      background:linear-gradient(135deg, rgba(167,139,250,.15), rgba(124,58,237,.15));
      box-shadow:0 0 12px var(--accent-glow);
    }
    .cluster-toggle-btn.active .cluster-icon{
      color:var(--accent);
    }
    .cluster-toggle-btn:not(.active) .cluster-icon{
      color:var(--muted);
      text-decoration:line-through;
    }
    .cluster-toggle-btn::after{
      content:attr(data-tooltip);
      position:absolute; top:-30px; left:50%; transform:translateX(-50%);
      background:var(--panel-solid); color:var(--text); 
      padding:4px 8px; border-radius:6px; font-size:10px;
      white-space:nowrap; opacity:0; pointer-events:none;
      transition:opacity .2s; border:1px solid var(--border);
      box-shadow:0 4px 12px rgba(0,0,0,.3);
    }
    .cluster-toggle-btn:hover::after{opacity:1}

    /* Language Switcher */
    .lang-switcher{
      display:flex; gap:6px; align-items:center;
    }
    .lang-btn{
      width:32px; height:32px; border-radius:8px; border:2px solid transparent;
      cursor:pointer; transition:all .2s; font-size:16px;
      background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
    }
    .lang-btn:hover{transform:scale(1.12); border-color:rgba(255,255,255,.3)}
    .lang-btn.active{
      border-color:#fff; 
      box-shadow:0 0 0 2px var(--accent-glow);
      transform:scale(1.05);
      background:rgba(167,139,250,.15);
    }

    /* Filter Pills - Inline */
    .filter-pills{
      display:flex; gap:6px; align-items:center; flex-wrap:wrap;
    }
    .filter-pills button{
      padding:7px 11px; border:none; border-radius:10px; cursor:pointer; 
      font-weight:600; font-size:12px;
      background:rgba(255,255,255,.05); color:var(--text); 
      border:1px solid rgba(255,255,255,.08);
      transition:all .2s;
      display:flex; align-items:center; gap:6px;
      white-space:nowrap; /* Prevent text wrapping */
      min-width:fit-content; /* Ensure button fits content */
    }
    .filter-pills button .icon{
      width:16px; height:16px; 
      background-size:contain; background-repeat:no-repeat; background-position:center;
      opacity:1; /* Always visible */
      transition:all .2s;
    }
    .filter-pills button:hover .icon{
      filter:brightness(1.2); /* Brighten on hover */
    }
    .filter-pills button.active .icon{
      /* When filter is active, icon stays colorful and visible */
      filter:drop-shadow(0 0 3px rgba(255,255,255,0.8));
      opacity:1;
    }
    .filter-pills button:hover{
      background:rgba(167,139,250,.1); 
      border-color:var(--accent);
      transform:translateY(-1px);
    }
    .filter-pills button.active{
      background:linear-gradient(135deg, var(--accent-2), var(--accent)); 
      color:#fff;
      border-color:transparent; 
      box-shadow:0 2px 8px rgba(124,58,237,.3);
    }
    /* Remove the duplicate icon rules that were causing issues */
    .icon-star{
      background-image:none !important;
      position:relative;
    }
    .icon-star::before{
      content:'★';
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
      color:#fbbf24;
    }
    .filter-pills button.active .icon-star::before{
      color:#fff;
    }

    /* ===================== AUTH BAR ===================== */
    #authBar{
      display:flex; gap:8px; align-items:center; margin-left:auto;
    }
    #authBar span{
      font-size:13px; font-weight:600; color:var(--muted);
      padding:0 4px;
    }
    #authBar button{
      background:rgba(255,255,255,.05); color:var(--text); 
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px; padding:6px 12px; cursor:pointer; 
      font-size:12px; font-weight:600;
      transition:all .2s;
    }
    #authBar button:hover{
      background:linear-gradient(135deg, var(--accent-2), var(--accent)); 
      color:#fff; border-color:transparent;
      transform:translateY(-1px);
    }

    /* ===================== SHOP INFO FLYOUT (replaces sidebar) ===================== */
    .shop-info-flyout{
      position:fixed; 
      right:16px; 
      top:80px;
      bottom:16px;
      z-index:1100;
      width:440px; 
      max-width:calc(100vw - 32px);
      max-height:calc(100vh - 96px);
      display:none;
      flex-direction:column;
      background:var(--panel); 
      backdrop-filter:blur(40px) saturate(1.5);
      border:1px solid var(--border); 
      border-radius:20px;
      box-shadow:0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.08);
      overflow:hidden;
      overflow-x:hidden;
    }
    .shop-info-flyout.open{
      display:flex;
      animation:slideInRight .35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes slideInRight{
      from{opacity:0; transform:translateX(100px) scale(0.95)}
      to{opacity:1; transform:translateX(0) scale(1)}
    }
    
    .close-btn{
      position:absolute;
      top:12px;
      right:12px;
      z-index:10;
      background:rgba(0,0,0,.6);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      width:36px;
      height:36px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:18px;
      font-weight:700;
      transition:all .2s ease;
      box-shadow:0 4px 12px rgba(0,0,0,.5);
    }
    .close-btn:hover{
      background:rgba(251,113,133,.8);
      border-color:var(--danger);
      transform:scale(1.1);
    }
    
    .shop-info-flyout .body{
      padding:0; 
      display:flex;
      flex-direction:column;
      flex:1;
      min-height:0;
      overflow:hidden;
    }
    
    .shop-details-scrollable{
      flex:1;
      overflow-y:auto;
      padding:20px;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .shop-details-scrollable::-webkit-scrollbar{
      display:none;
    }
    
    .shop-details-content{
    }
    .shop-details-content h3{
      font-size:20px;
      font-weight:800;
      margin:0 0 10px 0;
      color:var(--text);
      line-height:1.3;
      padding-right:40px;
    }
    .shop-logo{
      width:100%; 
      max-height:140px; 
      object-fit:cover;
      object-position:center;
      display:block; 
      margin:0 0 14px 0; 
      border-radius:12px; 
      background:#fff;
      box-shadow:0 4px 16px rgba(0,0,0,.3);
    }
    .prop{
      margin:10px 0; 
      font-size:13px; 
      color:var(--muted); 
      line-height:1.6;
      display:flex;
      align-items:flex-start;
      gap:8px;
    }
    .prop b{
      color:var(--text);
      font-weight:700;
      min-width:24px;
      flex-shrink:0;
    }
    .shop-actions{
      display:flex;
      gap:8px;
      margin-top:14px;
      flex-wrap:wrap;
    }
    .shop-actions .btn{
      flex:1;
      min-width:120px;
      font-size:13px;
      padding:8px 12px;
    }

    /* ===================== FLYOUTS ===================== */
    .route-fab,.fav-fab{
      position:fixed;
      z-index:1100;
      background:var(--panel-solid);
      backdrop-filter:blur(20px) saturate(1.2);
      color:var(--text);
      padding:14px 20px;
      border-radius:12px;
      font-weight:700;
      font-size:14px;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 0 1px var(--border), inset 0 1px 0 rgba(255,255,255,.1);
      border:1px solid var(--border);
      user-select:none;
      transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
      display:flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
      min-width:140px;
      justify-content:center;
    }
    .route-fab:hover,.fav-fab:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.15);
      border-color:var(--accent);
      background:linear-gradient(135deg, rgba(167,139,250,.12), rgba(124,58,237,.12));
    }
    .fab-icon{
      font-size:20px;
      font-weight:normal;
    }
    .route-fab:active,.fav-fab:active{transform:translateY(0) scale(0.96)}
    .route-fab{bottom:250px; left:16px}
    .fav-fab{bottom:180px; left:16px}

    .route-flyout,.fav-flyout{
      position:fixed; z-index:1050;
      width:380px; max-height:calc(100vh - 180px); overflow:hidden;
      display:none; flex-direction:column;
      background:var(--panel-solid); backdrop-filter:blur(32px) saturate(1.4);
      border:1px solid var(--border); border-radius:16px;
      box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(167,139,250,.1);
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Route flyout - appears ABOVE route button */
    .route-flyout{left:16px; bottom:310px}
    /* Fav flyout - appears to the RIGHT of fav button */
    .fav-flyout{left:180px; bottom:180px}
    .route-flyout[style*="display: block"],
    .fav-flyout[style*="display: block"] {
      display:flex;
    }

    .route-flyout .head,.fav-flyout .head{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px; background:rgba(255,255,255,.04);
      border-bottom:1px solid var(--border);
      font-weight:800; font-size:15px; flex-shrink:0;
      white-space:nowrap; /* Prevent text wrapping */
      min-height:50px; /* Consistent height */
    }
    .route-flyout .body,.fav-flyout .body{
      padding:16px 18px; overflow-y:auto; flex:1;
    }

    #addStepBar{display:flex; gap:8px; margin-bottom:12px}
    #addStepBar input{
      flex:1; background:var(--card); color:var(--text); border:1px solid var(--border);
      border-radius:10px; padding:9px 12px; outline:none; font-size:13px;
      transition:border .2s, box-shadow .2s;
    }
    #addStepBar input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow)}
    #addStepBar button{white-space:nowrap}

    .mode-toggle{display:flex; gap:6px; margin:8px 0 12px}
    .mode-toggle button{
      padding:7px 12px; border:1px solid var(--border); border-radius:10px;
      background:rgba(255,255,255,.04); color:var(--text); cursor:pointer;
      font-weight:700; font-size:13px; transition:all .2s;
      white-space:nowrap; /* Prevent text wrapping on translation */
      flex:1; /* Equal width distribution */
      text-align:center; /* Center text */
    }
    .mode-toggle button:hover{background:rgba(167,139,250,.08)}
    .mode-toggle button.active{
      background:linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff;
      border-color:transparent; box-shadow:0 4px 16px rgba(124,58,237,.3);
    }

    #routeList{list-style:none; padding:0; margin:0}
    .route-item{
      display:flex; align-items:center; gap:10px;
      background:var(--card); border:1px solid var(--border);
      padding:10px 12px; border-radius:12px; margin-bottom:8px;
      transition:border-color .15s;
    }
    .route-item:hover{border-color:rgba(167,139,250,.3)}
    .route-item .grab{cursor:grab; user-select:none; font-size:18px; opacity:.5}
    .route-item .name{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}
    .route-item .rm{
      background:rgba(251,113,133,.08); color:var(--danger); border:1px solid rgba(251,113,133,.2);
      border-radius:10px; padding:6px 10px; cursor:pointer; transition:all .15s;
    }
    .route-item .rm:hover{background:rgba(251,113,133,.15)}

    .route-summary{
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:12px 14px; margin-top:8px; font-size:14px; line-height:1.6;
      min-height:80px; /* Prevent height jumping on translation */
    }
    .route-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

    .btn{
      display:inline-flex; align-items:center; gap:8px;
      background:linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff;
      border:none; padding:8px 14px; border-radius:12px; font-weight:700; font-size:13px;
      cursor:pointer; box-shadow:0 4px 16px rgba(124,58,237,.25);
      transition:transform .1s, filter .15s, box-shadow .2s;
      white-space:nowrap; /* Prevent text wrapping on translation */
      justify-content:center; /* Center button content */
    }
      position:relative; overflow:hidden;
    }
    .btn::after{
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.1), transparent 60%);
      pointer-events:none;
    }
    .btn:hover{filter:brightness(1.08); box-shadow:0 6px 24px rgba(124,58,237,.35); transform:translateY(-1px)}
    .btn:active{transform:translateY(1px)}
    .btn.ghost{
      background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--border); box-shadow:none;
    }
    .btn.ghost::after{display:none}
    .btn.ghost:hover{background:rgba(167,139,250,.08); border-color:var(--accent)}

    /* ===================== FAVORIS LIST ===================== */
    .fav-item{
      display:flex; align-items:center; justify-content:space-between;
      gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; margin-top:8px;
      background:var(--card); transition:border-color .15s;
    }
    .fav-item:hover{border-color:rgba(167,139,250,.3)}
    .fav-item .name{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}
    .fav-item .actions button{
      background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--border);
      border-radius:8px; padding:5px 8px; cursor:pointer; transition:all .15s; font-size:12px;
    }
    .fav-item .actions button:hover{background:rgba(167,139,250,.08); border-color:var(--accent)}

    /* ===================== COMMENTS ===================== */
    .comments-card{
      background:var(--card); border:1px solid var(--border); border-radius:16px;
      padding:16px; margin:20px; backdrop-filter:blur(8px);
      flex-shrink:0;
      border-top:2px solid var(--accent);
    }
    .comments-card h2{font-size:16px; font-weight:800; letter-spacing:-.3px; margin-bottom:12px;}
    
    #comments-section{
      max-height:200px;
      overflow-y:auto;
      overflow-x:hidden;
      margin-bottom:16px;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    #comments-section::-webkit-scrollbar{
      display:none;
    }
    #comments-section:empty::after{
      content:'Aucun commentaire pour le moment...';
      color:var(--muted);
      font-size:13px;
      display:block;
      padding:20px;
      text-align:center;
    }
    
    .comment-item{
      border-bottom:1px solid var(--border); 
      padding:12px 0;
      overflow-x:hidden;
      word-wrap:break-word;
    }
    .comment-item:last-child{border-bottom:none}
    
    /* Highlighted comment effect */
    .comment-item.highlighted{
      background:linear-gradient(135deg, rgba(251,191,36,.08), rgba(251,191,36,.04));
      border:2px solid rgba(251,191,36,.4);
      border-radius:12px;
      padding:14px;
      margin:8px 0;
      box-shadow:0 0 20px rgba(251,191,36,.2), 0 4px 12px rgba(0,0,0,.1);
      position:relative;
      animation:highlightGlow 3s ease-in-out infinite;
    }
    
    .comment-item.highlighted::before{
      content:'⭐ Highlighted';
      position:absolute;
      top:8px;
      right:8px;
      background:linear-gradient(135deg, #f59e0b, #fbbf24);
      color:#fff;
      padding:3px 10px;
      border-radius:12px;
      font-size:10px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.5px;
      box-shadow:0 2px 8px rgba(251,191,36,.4);
    }
    
    @keyframes highlightGlow{
      0%, 100%{
        box-shadow:0 0 20px rgba(251,191,36,.2), 0 4px 12px rgba(0,0,0,.1);
        border-color:rgba(251,191,36,.4);
      }
      50%{
        box-shadow:0 0 30px rgba(251,191,36,.4), 0 6px 16px rgba(0,0,0,.15);
        border-color:rgba(251,191,36,.6);
      }
    }
    
    .comment-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
    .avatar{
      min-width:30px; min-height:30px; 
      width:30px; height:30px; border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      display:flex; align-items:center; justify-content:center;
      color:#fff; font-weight:700; font-size:13px;
      box-shadow:0 2px 8px rgba(124,58,237,.25);
      flex-shrink:0;
      position: relative;
    }
    
    /* Comment avatar borders */
    .avatar.border-verified {
      animation: rainbow-glow-comment 3s linear infinite;
    }
    @keyframes rainbow-glow-comment {
      0%, 100% { box-shadow: 0 0 10px #7c3aed; border: 2px solid #7c3aed; }
      25% { box-shadow: 0 0 10px #ec4899; border: 2px solid #ec4899; }
      50% { box-shadow: 0 0 10px #06b6d4; border: 2px solid #06b6d4; }
      75% { box-shadow: 0 0 10px #10b981; border: 2px solid #10b981; }
    }
    
    .avatar.border-gold {
      animation: gold-spin-comment 4s ease-in-out infinite;
      border: 2px solid #ffd700;
    }
    @keyframes gold-spin-comment {
      0%, 100% { box-shadow: 0 0 15px #ffd700; }
      50% { box-shadow: 0 0 20px #ffb700; }
    }
    
    .avatar.border-neon {
      animation: neon-pulse-comment 2s ease-in-out infinite;
      border: 2px solid #d946ef;
    }
    @keyframes neon-pulse-comment {
      0%, 100% { box-shadow: 0 0 10px rgba(217,70,239,.6); }
      50% { box-shadow: 0 0 15px rgba(217,70,239,.8); }
    }
    
    .avatar.border-fire {
      animation: fire-flicker-comment 1.5s ease-in-out infinite;
      border: 2px solid #f97316;
    }
    @keyframes fire-flicker-comment {
      0%, 100% { box-shadow: 0 0 10px rgba(249,115,22,.7); }
      50% { box-shadow: 0 0 15px rgba(249,115,22,.9); }
    }
    
    .avatar.border-sixSevennn {
      position: relative;
      border: 3px solid #ff0000;
      animation: police-siren-comment 2s linear infinite;
    }
    @keyframes police-siren-comment {
      0%, 24% { 
        border-color: #ff0000;
        box-shadow: -8px 0 15px rgba(255,0,0,1), 8px 0 5px rgba(0,0,255,0.3);
      }
      25%, 49% {
        border-color: #0000ff;
        box-shadow: 8px 0 15px rgba(0,0,255,1), -8px 0 5px rgba(255,0,0,0.3);
      }
      50%, 74% { 
        border-color: #ff0000;
        box-shadow: -8px 0 15px rgba(255,0,0,1), 8px 0 5px rgba(0,0,255,0.3);
      }
      75%, 100% {
        border-color: #0000ff;
        box-shadow: 8px 0 15px rgba(0,0,255,1), -8px 0 5px rgba(255,0,0,0.3);
      }
    }
    
    /* Animated badge in comments */
    .badge-icon {
      display: inline-block;
    }
    
    .badge-icon.animated {
      display: inline-block;
      animation: badge-sparkle-comment 2s ease-in-out infinite;
    }
    
    .badge-icon.rainbow {
      display: inline-block;
      animation: badge-rainbow-comment 3s ease-in-out infinite;
    }
    
    @keyframes badge-sparkle-comment {
      0%, 100% { 
        transform: scale(1) translateY(0px) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
      }
      25% { 
        transform: scale(1.05) translateY(-1px) rotate(-2deg);
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.9));
      }
      50% { 
        transform: scale(1.08) translateY(-2px) rotate(0deg);
        filter: drop-shadow(0 0 8px rgba(255,215,0,1));
      }
      75% { 
        transform: scale(1.05) translateY(-1px) rotate(2deg);
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.9));
      }
    }
    
    @keyframes badge-rainbow-comment {
      0% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(255,0,255,0.8));
      }
      14% { 
        transform: scale(1.05) rotate(-3deg);
        filter: drop-shadow(0 0 8px rgba(255,0,0,0.9));
      }
      28% { 
        transform: scale(1.08) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(255,127,0,1));
      }
      42% { 
        transform: scale(1.05) rotate(3deg);
        filter: drop-shadow(0 0 8px rgba(255,255,0,0.9));
      }
      57% { 
        transform: scale(1.08) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(0,255,0,1));
      }
      71% { 
        transform: scale(1.05) rotate(-3deg);
        filter: drop-shadow(0 0 8px rgba(0,127,255,0.9));
      }
      85% { 
        transform: scale(1.08) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(75,0,130,1));
      }
      100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(255,0,255,0.8));
      }
    }
    
    .author{font-weight:600; color:var(--text); font-size:14px}
    .date{color:var(--muted); font-size:11px}
    .stars{color:var(--gold); margin-left:auto; letter-spacing:1px}
    .comment-text{color:rgba(240,238,246,.85); font-size:14px; line-height:1.5}
    .comment-photo{
      width:100%; max-height:180px; object-fit:cover; border-radius:12px;
      margin-top:8px; cursor:pointer; transition:.25s;
    }
    .comment-photo:hover{filter:brightness(1.1); transform:scale(1.01)}
    
    /* Comment voting actions - integrated design */
    .comment-actions{
      display:flex; align-items:center; gap:4px; margin-top:8px;
      opacity:0.7; transition:opacity 0.3s;
    }
    .comment-item:hover .comment-actions{
      opacity:1;
    }
    .vote-btn{
      display:inline-flex; align-items:center; gap:5px;
      background:var(--surface); border:1px solid var(--border);
      padding:4px 10px; border-radius:6px; font-size:12px;
      color:var(--muted); cursor:pointer; transition:all 0.2s ease;
      font-weight:500; min-width:50px; justify-content:center;
    }
    .vote-btn svg{
      width:14px; height:14px; opacity:0.7; transition:all 0.2s;
    }
    .vote-btn:hover{
      background:var(--card); border-color:var(--accent);
      color:var(--text); transform:translateY(-1px);
    }
    .vote-btn:hover svg{
      opacity:1; transform:scale(1.1);
    }
    .vote-btn:active{
      transform:translateY(0);
    }
    .vote-btn.upvote.active{
      background:rgba(var(--accent-rgb, 187,134,252), 0.1);
      border-color:var(--accent);
      color:var(--accent);
    }
    .vote-btn.downvote.active{
      background:rgba(var(--accent-rgb, 187,134,252), 0.1);
      border-color:var(--accent);
      color:var(--accent);
    }
    .vote-btn.active svg{
      opacity:1;
    }
    .vote-count{
      font-weight:600; font-size:11px; opacity:0.9;
    }
    .vote-btn.active .vote-count{
      opacity:1; color:var(--accent);
    }
    .vote-score{
      font-size:12px; font-weight:600; padding:4px 10px;
      border-radius:6px; margin:0 2px;
      background:var(--surface); border:1px solid var(--border);
      color:var(--muted); min-width:36px; text-align:center;
      transition:all 0.2s;
    }
    .vote-score.positive{
      color:var(--accent); border-color:var(--accent);
      background:rgba(var(--accent-rgb, 187,134,252), 0.05);
    }
    .vote-score.negative{
      opacity:0.6;
    }
    .vote-score.neutral{
      opacity:0.5;
    }


    /* ===================== FORM ===================== */
    .form-row{display:flex; gap:10px; margin-bottom:12px}
    .form-row input,.form-row textarea{
      flex:1; 
      background:rgba(255,255,255,.03); 
      color:var(--text); 
      border:2px solid var(--border);
      border-radius:12px; 
      padding:12px 16px; 
      outline:none; 
      font-size:14px;
      transition:all .3s ease;
    }
    .form-row input:focus,.form-row textarea:focus{
      border-color:var(--accent); 
      box-shadow:0 0 0 4px var(--accent-glow);
      background:rgba(255,255,255,.05);
    }
    .form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted); opacity:.6}
    .form-row textarea{min-height:80px; resize:vertical}
    .form-row input[type="file"]{
      background:linear-gradient(135deg, rgba(167,139,250,.08), rgba(124,58,237,.08));
      border:2px dashed var(--border);
      border-radius:12px;
      padding:16px;
      cursor:pointer;
      transition:all .3s ease;
      font-size:13px;
      color:var(--text);
    }
    .form-row input[type="file"]:hover{
      border-color:var(--accent);
      background:linear-gradient(135deg, rgba(167,139,250,.12), rgba(124,58,237,.12));
      transform:translateY(-2px);
    }
    .form-row input[type="file"]:focus{
      border-color:var(--accent);
      border-style:solid;
      box-shadow:0 0 0 4px var(--accent-glow);
      background:linear-gradient(135deg, rgba(167,139,250,.15), rgba(124,58,237,.15));
    }
    .form-row input[type="file"]::file-selector-button{
      background:linear-gradient(135deg, var(--accent-2), var(--accent));
      color:#fff;
      border:none;
      border-radius:8px;
      padding:8px 16px;
      font-weight:700;
      font-size:12px;
      cursor:pointer;
      margin-right:12px;
      transition:all .2s;
      box-shadow:0 2px 8px rgba(124,58,237,.3);
    }
    .form-row input[type="file"]::file-selector-button:hover{
      filter:brightness(1.1);
      transform:translateY(-1px);
      box-shadow:0 4px 12px rgba(124,58,237,.4);
    }
    .rating-row{
      display:flex; 
      align-items:center; 
      gap:16px; 
      margin-bottom:12px;
      padding:12px;
      background:rgba(255,255,255,.02);
      border-radius:12px;
    }
    .rating-row span{
      font-size:14px;
      color:var(--text);
      font-weight:600;
    }
    .rating-stars{
      display:flex;
      gap:4px;
      margin-right:auto;
    }
    .rating-stars i{
      font-size:28px; 
      cursor:pointer; 
      color:rgba(255,255,255,.12); 
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
    }
    .rating-stars i:hover{
      color:rgba(251,191,36,.5);
      transform:scale(1.15) rotate(-5deg);
    }
    .rating-stars i.active{
      color:var(--gold); 
      text-shadow:0 0 16px rgba(251,191,36,.6);
      transform:scale(1.05);
    }

    /* Modern file upload button */
    .file-upload-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.04);
      border:2px solid var(--border);
      padding:10px 16px;
      border-radius:12px;
      font-size:13px;
      font-weight:600;
      color:var(--text);
      cursor:pointer;
      transition:all .3s ease;
      white-space:nowrap;
    }
    .file-upload-btn:hover{
      background:rgba(255,255,255,.08);
      border-color:var(--accent);
      transform:translateY(-2px);
      box-shadow:0 4px 12px rgba(var(--accent-rgb, 187,134,252),.2);
    }
    .file-upload-btn:active{
      transform:translateY(0);
    }

    /* Modern submit button */
    .submit-comment-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, var(--accent-2), var(--accent));
      color:#fff;
      border:none;
      padding:10px 20px;
      border-radius:12px;
      font-weight:700;
      font-size:14px;
      cursor:pointer;
      box-shadow:0 4px 16px rgba(var(--accent-rgb, 187,134,252),.3);
      transition:all .2s ease;
      white-space:nowrap;
    }
    .submit-comment-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(var(--accent-rgb, 187,134,252),.4);
      filter:brightness(1.1);
    }
    .submit-comment-btn:active{
      transform:translateY(0);
    }
    .submit-comment-btn:disabled{
      opacity:0.5;
      cursor:not-allowed;
      transform:none;
    }

    /* ===================== PULSE HIGHLIGHT ===================== */
    .pulse-marker{position:relative; width:20px; height:20px; transform:translate(-10px,-10px); pointer-events:none}
    .pulse-marker::after{
      content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px;
      border-radius:50%; border:3px solid var(--accent); animation:pulse 1.3s ease-out 0s 4; opacity:.9;
    }
    @keyframes pulse{0%{transform:scale(0.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

    /* Custom Marker Clusters */
    .marker-cluster-custom {
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(10px);
      border: 2px solid var(--accent);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    .marker-cluster-custom:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--accent-2);
      transform: scale(1.1);
      box-shadow: 0 0 20px var(--accent-glow);
    }
    .marker-cluster-custom div {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    .marker-cluster-custom-small div {
      font-size: 12px;
    }
    .marker-cluster-custom-large div {
      font-size: 15px;
    }
    .marker-cluster-custom span {
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ===================== LIGHTBOX / POPUP / TOAST ===================== */
    #lightbox{
      display:none; position:fixed; inset:0;
      background:rgba(8,7,14,.9); backdrop-filter:blur(12px);
      justify-content:center; align-items:center; z-index:9999;
    }
    #lightbox-img{max-width:90%; max-height:90%; border-radius:12px; box-shadow:0 24px 64px rgba(0,0,0,.6)}
    #lightbox-close{position:absolute; top:20px; right:30px; font-size:32px; color:white; cursor:pointer; opacity:.7; transition:opacity .15s}
    #lightbox-close:hover{opacity:1}

    #loginPopup{position:fixed; inset:0; background:rgba(8,7,14,.8); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:10000}
    #loginPopup .popup-content{
      background:var(--panel); backdrop-filter:blur(24px);
      border:1px solid var(--border); padding:2rem; border-radius:20px;
      text-align:center; color:#fff;
      box-shadow:0 24px 64px rgba(0,0,0,.5), 0 0 80px -20px rgba(124,58,237,.2);
    }
    #loginPopup .popup-content h3{font-size:18px; font-weight:800; margin:0 0 8px}
    #loginPopup .popup-content button{
      margin-top:1rem;
      background:linear-gradient(135deg, var(--accent-2), var(--accent));
      border:none; padding:12px 20px; border-radius:12px; cursor:pointer;
      font-weight:700; color:#fff; font-size:14px;
      box-shadow:0 4px 16px rgba(124,58,237,.3);
    }

    #toast{
      position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
      background:var(--panel); backdrop-filter:blur(24px) saturate(1.4);
      border:1px solid var(--border); color:var(--text);
      padding:12px 20px; border-radius:16px; display:none; z-index:9999;
      font-size:14px; font-weight:600;
      box-shadow:0 12px 32px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
      animation:toast-in .3s cubic-bezier(0.4, 0, 0.2, 1);
      white-space:nowrap; /* Prevent wrapping */
      max-width:90vw; /* Prevent overflow on small screens */
    }
    @keyframes toast-in{
      from{opacity:0; transform:translate(-50%, 20px)}
      to{opacity:1; transform:translate(-50%, 0)}
    }

    /* ===================== GEOLOC CONTROL ===================== */
    .leaflet-bottom.leaflet-left .leaflet-control{margin-bottom:8px}
    .locate-control.leaflet-bar a{
      display:block; width:36px; height:36px; line-height:36px; text-align:center;
      font-size:18px; text-decoration:none;
      background:var(--panel-solid); color:var(--text);
      border:1px solid var(--border); border-radius:10px;
      box-shadow:0 4px 16px rgba(0,0,0,.3);
      transition:all .2s;
    }
    .locate-control.leaflet-bar a:hover{border-color:var(--accent)}
    .locate-control.leaflet-bar a.active{
      background:linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff;
      border-color:transparent;
      animation:glow 1.2s ease-in-out infinite alternate;
    }
    @keyframes glow{from{box-shadow:0 0 0 rgba(167,139,250,0)}to{box-shadow:0 0 20px var(--accent-glow)}}

    #route-time-box{display:none !important}

    /* ===================== STOP BADGES ===================== */
    .stop-badge{
      background:var(--panel-solid);
      border:2px solid var(--gold); color:var(--gold);
      font-weight:900; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      width:28px; height:28px; line-height:24px; text-align:center;
      border-radius:50%;
      box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 12px rgba(251,191,36,.15);
    }

    @media(max-width:640px){
      /* MOBILE-FIRST TOPBAR - Icon-based, minimal */
      .topbar{
        flex-direction:row; 
        align-items:center; 
        gap:4px; 
        padding:4px 6px;
        top:4px;
        left:4px;
        right:4px;
        flex-wrap:nowrap;
        height:40px;
      }
      
      /* Hide filters completely on mobile */
      .filter-pills{
        display:none !important;
      }
      
      /* Hide theme indicator */
      .theme-indicator{
        display:none !important;
      }
      
      /* Hide language switcher on mobile */
      .lang-switcher{
        display:none !important;
      }
      
      .topbar-divider{display:none;}
      
      /* Collapsible search - icon only by default */
      .search-control{
        flex:0;
        min-width:32px;
        order:1;
        position:relative;
      }
      
      .search-control input{
        width:32px;
        padding:8px;
        font-size:14px;
        background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%239e95b7" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
        background-position:center center;
        background-size:16px;
        transition:width .3s ease;
        cursor:pointer;
        text-indent:-999px;
      }
      
      .search-control input:focus,
      .search-control input.expanded{
        width:180px;
        text-indent:0;
        padding:8px 32px 8px 10px;
        background-position:right 8px center;
        cursor:text;
      }
      
      .search-control button{
        display:none;
      }
      
      .search-control input:focus ~ button,
      .search-control input.expanded ~ button{
        display:block;
        position:absolute;
        right:4px;
        top:50%;
        transform:translateY(-50%);
      }
      
      /* Small theme/lang buttons */
      .theme-switcher, .lang-switcher{
        order:2;
      }
      .theme-btn, .lang-btn{
        width:32px;
        height:32px;
        font-size:13px;
      }
      
      /* Map style buttons - compact */
      .map-style-selector{
        order:2;
        gap:2px;
      }
      .map-style-btn{
        width:32px;
        height:32px;
        font-size:16px;
        padding:0;
      }
      
      /* Cluster toggle - compact */
      .cluster-toggle-btn{
        order:2;
        width:32px;
        height:32px;
        font-size:14px;
        padding:0;
      }
      
      /* Compact profile button */
      #authBar{
        order:3;
        padding:0;
        margin-left:auto;
      }
      #authBar button{
        min-height:32px;
        font-size:10px;
        padding:6px 8px;
        white-space:nowrap;
      }
      
      /* Hide username on mobile to save space */
      #authBar #who{
        display:none;
      }
      
      /* SHOP INFO - Properly sized for mobile screens */
      .shop-info-flyout{
        width:100% !important; 
        right:0; 
        left:0; 
        top:auto !important;
        bottom:0 !important;
        border-radius:12px 12px 0 0;
        max-width:100%;
        max-height:65vh !important;
        height:auto;
        flex-direction:column;
      }
      
      /* Mobile-specific slide-up animation */
      .shop-info-flyout.open{
        animation:slideInBottom .3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      @keyframes slideInBottom{
        from{opacity:0; transform:translateY(100%)}
        to{opacity:1; transform:translateY(0)}
      }
      
      /* Shop details - compact scrollable area */
      .shop-details-scrollable{
        padding:10px;
        flex:1;
        overflow-y:auto;
        max-height:35vh;
        min-height:0;
      }
      
      .shop-logo{
        max-height:80px;
        margin-bottom:8px;
        border-radius:8px;
      }
      
      .shop-details-content h3{
        font-size:15px;
        margin-bottom:5px;
        padding-right:32px;
        line-height:1.2;
      }
      
      .prop{
        margin:4px 0;
        font-size:12px;
        line-height:1.3;
      }
      
      .action-buttons{
        gap:6px;
        margin-top:8px;
      }
      
      .modern-btn{
        padding:8px 12px;
        font-size:11px;
        min-height:36px;
      }
      
      /* COMMENTS SECTION - Compact for mobile */
      .comments-card{
        padding:8px;
        flex-shrink:0;
        max-height:unset !important;
        display:flex;
        flex-direction:column;
        border-top:1px solid var(--border);
        background:var(--panel-solid);
      }
      
      .comments-card h4{
        font-size:11px;
        margin-bottom:4px;
        flex-shrink:0;
      }
      
      #comments-section{
        flex:0 1 auto;
        overflow-y:auto;
        max-height:80px !important;
        margin-bottom:6px;
        min-height:0;
      }
      
      /* Compact mobile comment form */
      #comment-form{
        flex-shrink:0;
        padding:6px 0;
      }
      
      #comment-form .form-row{
        margin-bottom:4px;
      }
      
      #comment-form textarea{
        min-height:40px !important;
        max-height:40px !important;
        font-size:12px !important;
        padding:6px 8px !important;
        margin-bottom:0;
      }
      
      #comment-form input[type="file"]{
        font-size:10px !important;
        padding:4px !important;
        border:1px solid var(--border);
        border-radius:6px;
      }
      
      #comment-form .rating-row{
        display:flex;
        align-items:center;
        gap:6px !important;
        margin-bottom:0 !important;
        padding:6px !important;
        background:rgba(255,255,255,.02);
        border-radius:6px;
        flex-wrap:nowrap;
      }
      
      #comment-form .rating-row span{
        font-size:11px !important;
        white-space:nowrap;
        flex-shrink:0;
      }
      
      #comment-form .rating-stars{
        font-size:16px !important;
        gap:2px !important;
        flex-shrink:0;
      }
      
      #comment-form .rating-row button{
        padding:6px 10px !important;
        font-size:10px !important;
        min-height:30px !important;
        flex:1;
        min-width:70px;
      }
      
      .comment-item{
        padding:6px;
        margin-bottom:4px;
        font-size:11px;
      }
      
      .comment-author{
        font-size:11px;
        font-weight:700;
      }
      
      .comment-text{
        font-size:11px;
        line-height:1.4;
      }
      
      .close-btn{
        width:30px;
        height:30px;
        font-size:16px;
        top:8px;
        right:8px;
      }
      
      /* ROUTE AND FAV FLYOUTS - Compact mobile versions */
      .route-flyout,.fav-flyout{
        width:calc(100% - 8px); 
        left:4px; 
        right:4px;
        max-height:50vh;
        border-radius:12px;
      }
      
      .route-flyout .header,
      .fav-flyout .header{
        padding:8px 10px;
        font-size:13px;
      }
      
      .route-flyout .body,
      .fav-flyout .body{
        padding:8px;
        max-height:40vh;
        overflow-y:auto;
      }
      
      .route-flyout{
        bottom:70px;
      }
      .fav-flyout{
        bottom:4px;
      }
      
      .route-fab{
        bottom:70px; 
        right:4px;
        left:auto;
        padding:8px 12px; 
        font-size:11px;
        min-width:auto;
      }
      .fav-fab{
        bottom:4px; 
        right:4px;
        left:auto;
        padding:8px 12px; 
        font-size:11px;
        min-width:auto;
      }
      
      .modern-shop-card{
        padding:10px;
        border-radius:10px;
        margin-bottom:6px;
      }
      
      .shop-name{
        font-size:13px;
      }
      
      .shop-category{
        font-size:10px;
      }
    }

    /* Phone-specific improvements - ULTRA COMPACT */
    @media(max-width:480px){
      /* MINIMAL topbar - icon-only interface */
      .topbar{
        padding:3px 4px; 
        gap:3px;
        border-radius:8px;
        height:36px;
      }
      
      .search-control input{
        font-size:16px; /* Prevent zoom on iOS */
        width:28px;
        height:28px;
        padding:6px;
      }
      
      .search-control input:focus,
      .search-control input.expanded{
        width:160px;
        padding:6px 28px 6px 8px;
      }
      
      .theme-btn, .lang-btn{
        width:28px; 
        height:28px;
        font-size:12px;
      }
      
      #authBar button{
        min-height:28px;
        font-size:9px;
        padding:4px 6px;
      }
      
      /* SHOP INFO - Phone optimized (fits screen perfectly) */
      .shop-info-flyout{
        width:100% !important; 
        right:0; 
        left:0; 
        top:auto !important;
        bottom:0 !important;
        border-radius:10px 10px 0 0;
        max-width:100%;
        max-height:65vh !important;
        height:auto;
      }
      
      .shop-details-scrollable{
        padding:8px;
        max-height:30vh;
        overflow-y:auto;
      }
      
      .shop-logo{
        max-height:70px;
        margin-bottom:6px;
        border-radius:6px;
      }
      
      .shop-details-content h3{
        font-size:14px;
        margin-bottom:4px;
        padding-right:28px;
      }
      
      .prop{
        margin:3px 0;
        font-size:11px;
      }
      
      .action-buttons{
        gap:4px;
        margin-top:6px;
        flex-direction:column;
      }
      
      .modern-btn{
        width:100%;
        padding:6px 10px;
        font-size:10px;
        min-height:32px;
      }
      
      .close-btn{
        width:26px;
        height:26px;
        font-size:14px;
        top:6px;
        right:6px;
      }
      
      /* COMMENTS - Very compact, scrollable */
      .comments-card{
        padding:6px;
        max-height:unset !important;
        border-top:1px solid var(--border);
        display:flex;
        flex-direction:column;
      }
      
      .comments-card h4{
        font-size:10px;
        margin-bottom:3px;
        flex-shrink:0;
      }
      
      #comments-section{
        max-height:60px !important;
        margin-bottom:4px;
        overflow-y:auto;
        flex:0 1 auto;
      }
      
      /* Ultra-compact form for small phones */
      #comment-form{
        flex-shrink:0;
        padding:4px 0;
      }
      
      #comment-form .form-row{
        margin-bottom:3px;
      }
      
      #comment-form textarea{
        min-height:35px !important;
        max-height:35px !important;
        font-size:11px !important;
        padding:5px 6px !important;
        margin-bottom:0;
      }
      
      #comment-form input[type="file"]{
        font-size:9px !important;
        padding:3px !important;
        border:1px solid var(--border);
        border-radius:4px;
      }
      
      #comment-form .rating-row{
        display:flex;
        align-items:center;
        gap:4px !important;
        margin-bottom:0 !important;
        padding:4px !important;
        background:rgba(255,255,255,.02);
        border-radius:4px;
        flex-wrap:nowrap;
      }
      
      #comment-form .rating-row span{
        font-size:10px !important;
        white-space:nowrap;
        flex-shrink:0;
      }
      
      #comment-form .rating-stars{
        font-size:14px !important;
        gap:2px !important;
        flex-shrink:0;
      }
      
      #comment-form .rating-row button{
        padding:5px 8px !important;
        font-size:9px !important;
        min-height:28px !important;
        flex:1;
        min-width:60px;
      }
      
      .comment-item{
        padding:5px;
        margin-bottom:3px;
        font-size:10px;
      }
      
      .comment-author{
        font-size:10px;
      }
      
      .comment-text{
        font-size:10px;
        line-height:1.3;
      }
      
      /* ROUTE & FAV - Minimal flyouts */
      .route-flyout,.fav-flyout{
        width:calc(100% - 6px); 
        right:3px; 
        left:3px;
        max-height:45vh;
        border-radius:10px;
      }
      
      .route-flyout .header,
      .fav-flyout .header{
        padding:6px 8px;
        font-size:12px;
      }
      
      .route-flyout .body,
      .fav-flyout .body{
        padding:6px;
        max-height:35vh;
      }
      
      .route-flyout{
        bottom:62px;
      }
      .fav-flyout{
        bottom:3px;
      }
      
      .route-fab{
        bottom:62px; 
        right:3px;
        left:auto;
        width:auto;
        padding:6px 10px;
        font-size:10px;
      }
      .fav-fab{
        bottom:3px; 
        right:3px;
        left:auto;
        width:auto;
        padding:6px 10px;
        font-size:10px;
      }
      
      .modern-shop-card{
        padding:8px;
        border-radius:8px;
        margin-bottom:4px;
      }
      
      .shop-name{
        font-size:12px;
      }
      
      .shop-category{
        font-size:9px;
      }
      
      .btn{
        min-height:32px;
        padding:6px 10px;
        font-size:11px;
      }
      
      #toast{
        bottom:12px; 
        max-width:96%;
        font-size:10px; 
        padding:6px 10px;
      }
      
      /* Prevent zoom on inputs */
      input, textarea, select{
        font-size:16px !important;
      }
    }

    /* Landscape mobile */
    @media(max-width:900px) and (max-height:500px){
      .topbar{
        flex-direction:row; 
        flex-wrap:wrap; 
        gap:6px; 
        padding:6px;
      }
      .route-flyout,.fav-flyout{
        max-height:65vh;
      }
      .shop-info-flyout{
        max-height:90vh !important;
        height:90vh;
      }
    }
    
    /* Tablet improvements (641px - 900px) */
    @media(min-width:641px) and (max-width:900px){
      .topbar{
        padding:10px;
        gap:10px;
      }
      .shop-info-flyout{
        width:400px;
        top:80px;
        bottom:16px;
        right:12px;
        max-height:calc(100vh - 96px);
      }
      .route-flyout{
        bottom:16px;
        right:420px;
        width:300px;
      }
      .fav-flyout{
        bottom:16px;
        right:420px;
        width:300px;
      }
      .route-fab{
        bottom:16px;
        right:420px;
      }
      .fav-fab{
        bottom:16px;
        right:420px;
      }
    }
        max-height:85vh;
      }
    }