/* ============================================================
   Витрина наличия топлива — та же дизайн-система, что в приложении Fbenz.
   Токены, радиусы, Manrope, монеты-маркеры с кольцом статуса, кластеры-пончики.
   Раскладка повторяет приложение: топбар сверху, на телефоне карточка нижним
   шитом, на широком экране — панель слева.
   ============================================================ */

:root{
  --red:#E8132B; --red-2:#F0203A; --red-soft:rgba(232,19,43,.14);
  --st-yes:#1FBF75; --st-queue:#F0A93A; --st-low:#F4C732; --st-no:#FF3B5C; --st-nodata:#8A8FA8;
  --st-yes-bg:rgba(31,191,117,.16); --st-no-bg:rgba(255,59,92,.16); --st-nodata-bg:rgba(138,143,168,.16);
  --r:18px; --r-sm:12px; --r-lg:24px; --r-pill:999px;
  --f:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --sheet-max:520px; --panel-w:392px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-theme="dark"]{
  --bg:#101225; --surface:#181A30; --surface-2:#1F2240; --surface-3:#262A4D;
  --text:#EEF0F8; --text-2:#A4A9C6; --text-3:#71769A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13);
  --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-sm:0 6px 20px rgba(0,0,0,.35);
  --glow:radial-gradient(120% 90% at 100% 0%, rgba(232,19,43,.14), transparent 55%);
  --tile-filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85);
  --coin:#FFFFFF;            /* монета маркера всегда светлая: логотип сети читается на ней */
}
html[data-theme="light"]{
  --bg:#EEF0F5; --surface:#FFFFFF; --surface-2:#F5F6FA; --surface-3:#EBEDF3;
  --text:#181B2B; --text-2:#5A5F76; --text-3:#9499AE;
  --line:rgba(20,22,45,.09); --line-2:rgba(20,22,45,.14);
  --shadow:0 18px 50px rgba(60,64,90,.20); --shadow-sm:0 6px 18px rgba(60,64,90,.14);
  --glow:radial-gradient(120% 90% at 100% 0%, rgba(232,19,43,.07), transparent 55%);
  --tile-filter:none;
  --st-yes:#0d8a4f; --st-no:#c41f37; --st-nodata:#565b73;
  --coin:#FFFFFF;
}

*{box-sizing:border-box}
*{touch-action:pan-x pan-y}
.leaflet-container,.leaflet-container *{touch-action:none}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  font-family:var(--f);background:var(--bg);color:var(--text);
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:15px;line-height:1.45;position:fixed;width:100%;
}
button{font-family:inherit;cursor:pointer;color:inherit;border:0;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}

#map{position:fixed;inset:0;z-index:1;background:var(--bg)}
.leaflet-container{background:var(--bg);font-family:var(--f)}
.leaflet-tile-pane{filter:var(--tile-filter)}
.leaflet-control-zoom{display:none}   /* телефон зумит щипком, десктопу хватает колеса */

/* ---------------- ТОПБАР ---------------- */
.topbar{
  position:fixed;z-index:20;top:0;left:0;right:0;height:64px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{
  display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 15px 8px 13px;box-shadow:var(--shadow-sm);color:var(--text);
}
.brand-logo{height:27px;width:auto;display:block;flex:0 0 auto;color:var(--text)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.fresh-pill{
  display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font:700 12.5px/1 var(--f);color:var(--text-2);white-space:nowrap;
}
.fresh-pill.stale{color:var(--st-no);border-color:var(--st-no-bg)}
.fresh-pill[hidden]{display:none}

.tb-btn, #ctrl button{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;padding:0;
}
.tb-btn svg, #ctrl button svg{width:20px;height:20px;fill:currentColor}
.tb-btn:active, #ctrl button:active{transform:scale(.94)}
#ctrl{position:fixed;z-index:20;right:14px;bottom:calc(24px + var(--safe-b));display:grid;gap:8px}
html[data-theme="dark"] .i-sun{display:none}
html[data-theme="light"] .i-moon{display:none}

/* ---------------- ЧИПЫ ТОПЛИВА ---------------- */
#chips{
  position:fixed;z-index:19;top:64px;left:0;right:0;display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;padding:2px 14px 6px;
}
#chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);color:var(--text-2);font:700 12.5px/1 var(--f);
  box-shadow:var(--shadow-sm);white-space:nowrap;transition:background .16s var(--ease),color .16s var(--ease);
}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}

/* ---------------- ПОИСК ---------------- */
#searchbox{
  position:fixed;z-index:30;top:10px;left:14px;right:14px;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;
}
#searchInp{
  width:100%;border:0;outline:0;background:transparent;color:var(--text);
  font:600 15px/1 var(--f);padding:15px 16px;
}
#sugs{max-height:min(50vh,340px);overflow:auto}
.sug{padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.sug:hover{background:var(--surface-2)}
.sug b{font-weight:700;font-size:14px}
.sug i{font-style:normal;color:var(--text-3);font-size:12.5px}

/* ---------------- МАРКЕРЫ ---------------- */
.fmk{position:relative;width:36px;height:36px;--sc:var(--st-nodata)}
.fmk i{position:absolute;top:50%;left:50%;border-radius:50%}
.fmk::after{
  content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;background:var(--sc);filter:blur(8px);opacity:.55;z-index:0;pointer-events:none;
}
.fmk.s-nodata::after{opacity:.3}
.fmk.s-no::after{opacity:.8}
.fmk-coin{
  width:26px;height:26px;margin:-13px 0 0 -13px;display:grid;place-items:center;overflow:hidden;
  background:var(--coin);color:#23263C;font:800 9px/1 var(--f);z-index:3;user-select:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--sc),0 3px 8px rgba(0,0,0,.45);
}
.fmk-coin img{width:18px;height:18px;object-fit:contain;display:block}
.fmk.s-yes{--sc:var(--st-yes)}
.fmk.s-no{--sc:var(--st-no)}
.fmk.s-nodata .fmk-coin{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sc),0 3px 8px rgba(0,0,0,.45)}
.fmk:not(.s-nodata) .fmk-coin{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--sc),0 0 9px -1px var(--sc),0 3px 8px rgba(0,0,0,.45)}
/* совпало с выбранной маркой — золотое кольцо, как в приложении */
.fmk.match .fmk-coin{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--sc),0 0 0 7px #FFC83A,0 4px 9px rgba(0,0,0,.5)}

.clp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.clp span{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--text);font:800 13px/1 var(--f);
}
.clp.big span{font-size:12px}

/* ---------------- КАРТОЧКА СТАНЦИИ ---------------- */
#sheet{
  position:fixed;z-index:40;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow);border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .28s var(--ease);
  max-height:min(76vh,var(--sheet-max));overflow:auto;
  padding:20px 18px calc(20px + var(--safe-b));
}
#sheet.open{transform:translateY(0)}
#sheetClose{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
  display:grid;place-items:center;padding:0;
}
#sheetClose svg{width:16px;height:16px;fill:currentColor}

.st-name{font:800 18px/1.25 var(--f);margin:0 44px 3px 0}
.st-addr{font-size:13.5px;color:var(--text-2)}
.st-meta{font-size:12.5px;color:var(--text-3);margin:2px 0 14px}
.st-meta.stale{color:var(--st-no)}

.fuel-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:8px}
.fuel-badge{
  flex:0 0 auto;min-width:48px;text-align:center;padding:7px 9px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text);font:800 12.5px/1 var(--f);
}
.fuel-main{flex:1 1 auto;min-width:0}
.fuel-since{font-size:11.5px;color:var(--text-3);margin-top:3px}
.fuel-right{flex:0 0 auto;text-align:right}
.fuel-price{font:800 15.5px/1.2 var(--f)}
.fuel-price span{font-size:11.5px;color:var(--text-3);font-weight:600}
.pill{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);font:800 11.5px/1.35 var(--f)}
.pill.yes{background:var(--st-yes-bg);color:var(--st-yes)}
.pill.no{background:var(--st-no-bg);color:var(--st-no)}
.pill.nodata{background:var(--st-nodata-bg);color:var(--st-nodata)}
.st-services{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.5}
.st-empty{padding:14px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font-size:13.5px}

/* ---------------- ЛЕГЕНДА И СЛУЖЕБНОЕ ---------------- */
#legend{
  position:fixed;z-index:19;left:14px;bottom:calc(16px + var(--safe-b));display:flex;gap:10px;
  padding:8px 13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);font:600 11.5px/1 var(--f);color:var(--text-2);
}
#legend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.d-yes{background:var(--st-yes)} .d-no{background:var(--st-no)} .d-nodata{background:var(--st-nodata)}

#toast{
  position:fixed;z-index:50;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);
  background:var(--surface);color:var(--text);padding:11px 17px;border-radius:var(--r-pill);
  box-shadow:var(--shadow);border:1px solid var(--line);font:600 13px/1 var(--f);white-space:nowrap;
}
#err{
  position:fixed;z-index:60;inset:0;display:grid;place-items:center;background:var(--bg);
  color:var(--text-2);font:600 14px/1.5 var(--f);text-align:center;padding:24px;
}
#err[hidden],#toast[hidden],#searchbox[hidden]{display:none}

/* ---------------- АДАПТИВ ---------------- */
/* Телефон: карточка занимает низ целиком, всё под ней прячется — иначе кнопки
   и легенда просвечивают сквозь и ловят промахи пальцем. */
@media (max-width:1023px){
  body.sheet-open #ctrl, body.sheet-open #legend, body.sheet-open #chips{visibility:hidden}
}
@media (max-width:560px){
  .brand{padding:7px 12px 7px 11px}
  .brand-logo{height:23px}
  .fresh-pill{padding:0 11px;font-size:11.5px}
  #legend{gap:8px;padding:7px 11px}
}
@media (max-width:380px){
  .fresh-pill{display:none}   /* на самых узких важнее кнопки, время видно в карточке */
}

/* Широкий экран: карточка — панель слева, как список в приложении; карта остаётся живой. */
@media (min-width:1024px){
  .topbar{padding:14px 24px}
  #chips{top:70px;padding:2px 24px 6px}
  #searchbox{left:24px;right:auto;width:var(--panel-w);top:14px}
  #ctrl{right:24px;bottom:24px}
  #legend{left:24px;bottom:24px}
  #sheet{
    left:14px;right:auto;bottom:14px;top:auto;width:var(--panel-w);
    border-radius:var(--r-lg);border:1px solid var(--line);
    max-height:calc(100vh - 140px);transform:translateY(calc(100% + 24px));
  }
  #sheet.open{transform:translateY(0)}
  body.sheet-open #legend{visibility:hidden}
  .fmk-coin{width:28px;height:28px;margin:-14px 0 0 -14px}
  .fmk-coin img{width:19px;height:19px}
}

@media (prefers-reduced-motion:reduce){
  #sheet{transition:none}
  .chip{transition:none}
}