*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{margin:0;height:100%}
body{font-family:'Onest',-apple-system,Segoe UI,Roboto,sans-serif;background:#e8ede9;color:#0f1b14}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d4ddd6;border-radius:8px}
@keyframes gb-pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.8);opacity:0}100%{opacity:0}}
@keyframes gb-up{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes gb-toast{0%{transform:translate(-50%,12px);opacity:0}12%{opacity:1;transform:translate(-50%,0)}88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@keyframes gb-slide{0%{transform:translateX(-12px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes gb-fade{from{opacity:0}to{opacity:1}}
@keyframes gb-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* при открытом попапе/модалке — блокируем скролл страницы */
body.gb-noscroll{overflow:hidden!important;touch-action:none}
/* скелетоны загрузки */
@keyframes gb-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.gb-sk{background:linear-gradient(90deg,#eef2ef 25%,#e1e8e3 37%,#eef2ef 63%);background-size:840px 100%;animation:gb-shimmer 1.3s linear infinite;border-radius:8px}
.gb-sk-row{display:flex;gap:12px;padding:12px 11px;align-items:center;margin-bottom:7px}
#mapSkel{position:absolute;inset:0;z-index:6}
#mapSkel .m{position:absolute;inset:0;background:linear-gradient(90deg,#e8ede9 25%,#dee5df 37%,#e8ede9 63%);background-size:840px 100%;animation:gb-shimmer 1.4s linear infinite}
/* карточка АЗС попапом на десктопе (ОТКАТ: удалить этот блок + #detailModal в index +
   ветку useModal в renderMiddle). Показывается только когда .show выставлен из JS (десктоп). */
#detailModal{display:none}
#detailModal.show{display:block}
#detailModal .dm-back{position:fixed;inset:0;background:rgba(15,27,20,.45);z-index:60;animation:gb-fade .2s ease}
#detailModal .dm-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:61;width:min(94vw,480px);max-height:88vh;overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 30px 80px -20px rgba(15,27,20,.55);display:flex;flex-direction:column;animation:gb-pop .2s cubic-bezier(.4,0,.2,1)}
@keyframes gb-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* чипы марок над картой убраны — фильтр остаётся в сайдбаре/списке */
#mapFuel{display:none}

.app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* Sidebar */
.sidebar{width:400px;flex:0 0 400px;height:100vh;background:#fff;border-right:1px solid #e7ece8;display:flex;flex-direction:column;box-shadow:6px 0 28px -18px rgba(16,40,28,.4);z-index:5}
.side-head{padding:16px 18px 14px;border-bottom:1px solid #f0f3f1;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;transition:opacity .15s}
.brand:hover{opacity:.65}
.brand-logo{width:40px;height:40px;border-radius:12px;background:#12b76a;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px -3px rgba(18,183,106,.6);flex:0 0 auto}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.4px;color:#0f1b14;line-height:1}
.brand-name span{color:#12b76a}
.brand-sub{display:none}
.side-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto}
.side-clock{font-size:10.5px;color:#7c8a82;font-weight:600;text-align:right;line-height:1.3;max-width:170px}
.side-clock:empty{display:none}
.counters{display:flex;gap:7px}
.counter{text-align:center;background:#f1f5f2;border-radius:11px;padding:6px 10px}
.c-num{font-size:14px;font-weight:800}
.c-lbl{font-size:9px;color:#7c8a82;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.middle{flex:1;display:flex;flex-direction:column;min-height:0}
.side-foot{padding:11px 18px 13px;border-top:1px solid #f0f3f1;display:flex;align-items:center;gap:8px}
.foot-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border-radius:11px;font-size:12.5px;font-weight:700;text-decoration:none}
.foot-btn.tg{background:#e9f3fb;color:#2b8fd6}
.foot-btn.vk{background:#eaf0f7;color:#3a6ea5}
.foot-gear{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:11px;background:#f1f5f2;color:#5a6962;text-decoration:none}

/* Map pane */
.map-pane{flex:1;position:relative;overflow:hidden;min-width:0}
.ymap{position:absolute;inset:0;background:#e6ebe6}
.fallback{position:absolute;inset:0}
.region-chip{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top, 0px));z-index:6;display:flex;align-items:center;gap:8px;background:#fff;padding:9px 14px;border-radius:13px;box-shadow:0 6px 18px -8px rgba(16,40,28,.4);font-weight:700;font-size:13px;border:none;font-family:inherit;color:#0f1b14;cursor:pointer;transition:box-shadow .15s}
.region-chip:hover{box-shadow:0 8px 22px -6px rgba(16,40,28,.5)}
.region-empty{position:absolute;left:0;right:0;top:64px;z-index:5;display:none;justify-content:center;pointer-events:none}
.region-empty-card{background:rgba(255,255,255,.95);backdrop-filter:blur(4px);padding:10px 18px;border-radius:14px;box-shadow:0 8px 22px -8px rgba(16,40,28,.4);font-size:13px;font-weight:700;color:#5a6962}
.region-modal{position:fixed;inset:0;z-index:50;background:rgba(15,27,20,.45);display:none;align-items:flex-start;justify-content:center;padding:7vh 16px 16px}
.region-card{background:#fff;border-radius:18px;width:100%;max-width:420px;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -18px rgba(0,0,0,.5);animation:gb-slide .2s ease}
.region-list{overflow-y:auto;padding:4px 10px 12px;display:flex;flex-direction:column;gap:2px}
.region-item{text-align:left;background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:#0f1b14;padding:11px 12px;border-radius:10px;cursor:pointer}
.region-item:hover{background:#f4f7f5}
.geo-fab{position:absolute;right:16px;bottom:16px;z-index:6;width:48px;height:48px;border-radius:14px;background:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(16,40,28,.4);cursor:pointer}
.demo-badge{position:absolute;left:16px;bottom:16px;z-index:6;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);padding:7px 12px;border-radius:20px;box-shadow:0 4px 14px -6px rgba(16,40,28,.4);font-size:11.5px;font-weight:600;color:#8a978f}

/* generic helpers used by JS-rendered parts */
.gb-input{border:none;background:transparent;outline:none;font-family:inherit;width:100%;color:#0f1b14}
.scroll{flex:1;overflow-y:auto}

/* SEO-статья: серверный экземпляр (#seoAbout) виден только без JS (для поиска);
   с JS app.js прячет его и вставляет статью в конец скролла списка АЗС */
body.gb-sheet .seo-about{display:none} /* в мобильной «шторке» АЗС статью прячем, как и дисклеймер */

/* Чипы топлива: перенос на строки на ЛЮБОЙ ширине — после добавления «АИ-95 Pulsar»
   ряд перестал влезать и на десктопе (вылезал за пределы сайдбара на карту) */
.fuel-row{align-items:flex-start}
.fuel-row>span{padding-top:9px}
#fuelChips{flex:1;min-width:0;flex-wrap:wrap}
#fuelChips>button{flex:0 0 auto}

/* Mobile */
@media (max-width:820px){
  /* карта на весь первый экран; панель со списком/карточкой — ниже (скролл вниз) */
  .app{flex-direction:column;height:auto;min-height:100vh;position:relative}
  .map-pane{order:1;height:100vh;height:100dvh;min-height:420px}
  .sidebar{width:100%;flex:none;height:auto;border-right:none;box-shadow:none;order:2}

  /* шапка → плавающая «кнопка-логотип» в углу карты, а не полоса, съедающая высоту */
  .side-head{
    position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:12;
    width:auto;padding:6px 12px 6px 7px;border-bottom:none;justify-content:flex-start;gap:7px;
    background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-radius:13px;box-shadow:0 6px 18px -8px rgba(16,40,28,.45)
  }
  .side-head .side-right{display:none}   /* часы/счётчики убираем с плавающей кнопки */
  .brand-sub{display:none}
  .brand-logo{width:26px;height:26px;border-radius:8px}
  .brand-logo svg{width:16px;height:16px}
  .brand-name{font-size:14px}

  .middle{min-height:0}
  .scroll{max-height:none;overflow:visible}
  /* iOS не зумит при фокусе, если у поля font-size >= 16px (select не зумит — ему не нужно) */
  input, textarea { font-size:16px !important; }
  /* Чипы топлива: перенос на строки, чтобы все марки были видны */
  .fuel-row{align-items:flex-start !important;}
  .fuel-row>span{padding-top:9px;}
  #fuelChips{flex:1;min-width:0;flex-wrap:wrap;}
  #fuelChips>button{flex:0 0 auto;}

  /* ── Карточка АЗС на весь экран (mobile). ──
     ОТКАТ: удалить этот блок в CSS + строку с classList.toggle('gb-sheet') в app.js.
     Класс gb-sheet вешается на <body> только когда открыта карточка (S.sel). */
  body.gb-sheet{overflow:hidden}
  body.gb-sheet .sidebar{
    position:fixed;inset:0;z-index:30;order:0;
    height:100dvh;max-height:none;background:#fff;
    padding-top:env(safe-area-inset-top,0px);
    border-radius:0;box-shadow:none;
    animation:gb-sheet-up .26s cubic-bezier(.4,0,.2,1)
  }
  body.gb-sheet .side-head,body.gb-sheet .disclaimer,body.gb-sheet .ticker,body.gb-sheet .side-foot{display:none}
  body.gb-sheet .middle{flex:1;min-height:0}
  body.gb-sheet .scroll{max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ── Бегущая строка (управляется из админки) — мягкий брендовый акцент ── */
.ticker{display:flex;align-items:center;gap:8px;height:36px;flex-shrink:0;padding:0 6px 0 12px;background:#eafaf1;border-bottom:1px solid #cdeeda;overflow:hidden}
.ticker .tk-ico{flex:0 0 auto;font-size:14px;opacity:.85}
.ticker .tk-track{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.ticker .tk-run{display:inline-flex;white-space:nowrap;animation:tkscroll linear infinite;will-change:transform}
.ticker .tk-run span{padding-right:64px;font-size:13px;font-weight:600;color:#0a8f53}
.ticker .tk-track:hover .tk-run{animation-play-state:paused}
.ticker .tk-x{flex:0 0 auto;width:24px;height:24px;border:none;background:transparent;color:#7ba894;font-size:12px;cursor:pointer;border-radius:6px;line-height:1}
.ticker .tk-x:hover{background:rgba(10,143,83,.12);color:#0a8f53}
@keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .tk-run{animation:none}}