/* ════════════════════════════════════════════════════════════════════════════
   FILE     : assets/css/spritradar.css
   PROJECT  : tanken.kassel.app — SpritRadar v5
   VERSION  : 1.8.0
   CHANGED  : 2026-03-06  v1.8.0 — countdown UI removed (cd-block/lbl/val)
   PREV     : 2026-03-05  v1.7.0 — Rich in-page alert banner: station list,
               best highlighted, dist shown; refined notif-banner CSS
   PREV     : 2026-03-05  v1.6.0 — Google Maps buttons on desktop (hover)
               and mobile (action bar); shared _mapsUrl/_routeUrl helpers
               using lat/lng coords from Tankerkoenig API
   PREV     : 2026-03-05  v1.5.0 — SVG vector logo in navbar + footer;
               inline SVG brand colors from CorelDRAW source (crimson=#dc143c,
               ghost-white=#ffffff, dark=#1a1a1a); refined logo-wrap classes;
               improved OG images generated from vector SVG
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* App palette */
  --bg:     #060b14;
  --s1:     #0c1828;
  --s2:     #101f32;
  --s3:     #152538;
  --bd:     #223450;
  --bd2:    #1a2d42;
  --e5:     #fcd34d;
  --dsl:    #7dd3fc;
  --e10:    #6ee7b7;
  --fav:    #f0abfc;
  --cheap:  #6ee7b7;
  --mut:    #94a3b8;
  --txt:    #e2e8f0;
  --sub:    #cbd5e1;
  --ok:     #6ee7b7;
  --warn:   #fcd34d;
  --err:    #fca5a5;
  --r:      .75rem;
  --T:      44px;   /* minimum touch target */
  --px:     .875rem;/* horizontal page padding */

  /* ── SpritRadar brand colors (from SVG logo) ────────────────────────── */
  --logo-red:    #dc143c;  /* crimson — radar arcs, lightning bolt        */
  --logo-red-d:  #a50e2b;  /* darker crimson for hover/active states       */
  --logo-red-2:  rgba(220,20,60,.18);  /* translucent fill                 */
  --logo-red-3:  rgba(220,20,60,.08);  /* very subtle background tint      */
  --logo-white:  #ffffff;  /* ghost body                                   */
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Base ────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--txt);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px; min-height: 100vh; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    /* SpritRadar crimson — top-left, echoes radar arc */
    radial-gradient(ellipse 55% 30% at 0% 0%, rgba(220,20,60,.08) 0%, transparent 60%),
    /* Sky-blue — top-right */
    radial-gradient(ellipse 60% 35% at 100% 0%, rgba(14,165,233,.07) 0%, transparent 55%),
    /* Amber — bottom-right */
    radial-gradient(ellipse 60% 35% at 90% 100%, rgba(252,211,77,.05) 0%, transparent 50%);
}
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--logo-red); color: #fff; font-weight: 700;
  padding: .5rem 1.2rem; border-radius: 0 0 .5rem .5rem;
  z-index: 9999; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Loading overlay ───────────────────────────────────────────────────────────────────────────── */
#loading {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,11,20,.95); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; transition: opacity .4s;
}
#loading.hide { opacity: 0; pointer-events: none; }
#loading.gone { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════════════════════ */
.app-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(6,11,20,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd);
  /* Crimson hairline at very bottom — echoes logo radar */
  box-shadow: 0 1px 0 0 rgba(220,20,60,.3), 0 4px 18px rgba(0,0,0,.5);
}
.nav-inner {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem var(--px);
  max-width: 1600px; margin: 0 auto;
}
.app-brand      { font-weight: 800; letter-spacing: -.02em; font-size: 1.1rem; margin-right: auto; flex-shrink: 0; display: flex; align-items: center; gap: .45rem; text-decoration: none; }
.nav-logo-wrap  {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(220,20,60,.25);
  transition: box-shadow .2s, transform .15s;
  overflow: hidden;
}
.app-brand:hover .nav-logo-wrap {
  box-shadow: 0 0 0 1px rgba(220,20,60,.55), 0 0 12px rgba(220,20,60,.3);
  transform: scale(1.06);
}
.nav-logo       { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.brand-name     { display: flex; align-items: baseline; }
.brand-fuel     { color: var(--logo-red); }   /* crimson — Tanken */
.brand-radar    { color: var(--logo-white); } /* white   — Kassel */
.nav-actions    { display: flex; align-items: center; gap: .35rem; }

/* cd-block removed — no countdown display */

.btn-push {
  display: flex; align-items: center; gap: .25rem;
  background: rgba(125,211,252,.1); border: 1px solid rgba(125,211,252,.35);
  color: var(--dsl); font-size: .78rem; font-weight: 600;
  padding: 0 .75rem; border-radius: .4rem; cursor: pointer;
  height: var(--T); white-space: nowrap; transition: background .2s, color .2s;
}
.btn-push:hover   { background: rgba(125,211,252,.22); }
.btn-push.granted { background: rgba(110,231,183,.12); border-color: rgba(110,231,183,.4); color: var(--ok); }
.push-txt { display: none; }
@media (min-width: 400px) { .push-txt { display: inline; } }

.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: var(--T); height: var(--T);
  background: rgba(255,255,255,.06); border: 1px solid var(--bd);
  color: var(--mut); border-radius: .4rem; cursor: pointer;
  font-size: 1rem; transition: background .15s, color .15s; flex-shrink: 0;
}
.btn-icon:hover    { background: rgba(255,255,255,.14); color: var(--txt); }
.btn-icon:disabled { opacity: .35; cursor: default; }

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.app-main {
  position: relative; z-index: 1;
  max-width: 1600px; margin: 0 auto;
  padding: .75rem var(--px) 0;
}

/* Common section spacing */
.sec-plz,
.sec-status,
.sec-toolbar,
.sec-stations,
.sec-privacy     { margin-bottom: .75rem; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card          { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r); }
.card-header   { background: var(--s2); border-bottom: 1px solid var(--bd); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); font-weight: 700; padding: .55rem var(--px); }
.card-body     { padding: var(--px); }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--s2) !important; border-color: var(--bd) !important; color: #f8fafc !important;
}
.form-control::placeholder { color: var(--mut) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--dsl) !important;
  box-shadow: 0 0 0 3px rgba(125,211,252,.18) !important;
}
.fc-e5  { color: var(--e5);  }
.fc-dsl { color: var(--dsl); }
.fc-e10 { color: var(--e10); }

/* ════════════════════════════════════════════════════════════════════════════
   PLZ PANEL
   ════════════════════════════════════════════════════════════════════════════ */
.plz-card { padding: .75rem var(--px); }

/* ── Line 1: PLZ + Radius + Suchen (always horizontal) ──────────────────── */
.plz-line1 {
  display: flex; align-items: flex-end; gap: .45rem;
}
.f-label {
  display: block; font-size: .7rem; color: var(--mut); margin-bottom: .25rem;
  white-space: nowrap; font-weight: 600;
}
.plz-inp {
  width: 90px !important; height: var(--T) !important;
  font-weight: 700 !important; letter-spacing: .04em; font-size: .95rem !important;
}
.rad-sel {
  width: 94px !important; height: var(--T) !important; font-size: .88rem !important;
}
.btn-suchen {
  display: flex; align-items: center; gap: .35rem;
  height: var(--T); padding: 0 1rem;
  background: var(--logo-red); color: #fff;
  border: none; border-radius: .5rem;
  font-weight: 700; font-size: .88rem; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.btn-suchen:hover  { background: var(--logo-red-d); }
.btn-suchen:active  { transform: scale(.97); }
.btn-suchen:focus-visible {
  outline: 2px solid var(--logo-red);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(220,20,60,.2);
}

/* ── Line 2: Recent PLZ chips ────────────────────────────────────────────── */
.plz-line2 {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .55rem; min-height: 36px;
}
.recent-lbl   { font-size: .78rem; color: var(--mut); flex-shrink: 0; }
.recent-chips {
  display: flex; gap: .3rem; flex: 1;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.recent-chips::-webkit-scrollbar { display: none; }
.plz-chip {
  display: inline-flex; align-items: center;
  background: var(--s2); border: 1px solid var(--bd);
  color: var(--mut); border-radius: 99px;
  padding: .2rem .75rem; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 32px; transition: all .13s;
}
.plz-chip:hover, .plz-chip.active {
  border-color: var(--dsl); color: var(--dsl);
  background: rgba(125,211,252,.08);
}

/* ── Line 3: Station search ──────────────────────────────────────────────── */
.plz-line3 { margin-top: .55rem; }
.st-search-wrap  { position: relative; }
.st-search-icon  {
  position: absolute; left: .8rem; top: 50%;
  transform: translateY(-50%); color: var(--mut); pointer-events: none; z-index: 1;
}
.st-search-inp   {
  padding-left: 2.45rem !important; padding-right: 2.6rem !important;
  height: var(--T) !important; font-size: .88rem !important;
  border-radius: var(--r) !important;
}
.st-search-clear {
  position: absolute; right: 0; top: 0;
  width: var(--T); height: var(--T);
  background: none; border: none; color: var(--mut);
  cursor: pointer; display: none;
  align-items: center; justify-content: center; font-size: .88rem;
}
.st-search-clear.visible { display: flex; }
.search-count { font-size: .78rem; color: var(--mut); }
.f-err { font-size: .8rem; color: var(--err); margin-top: .3rem; min-height: 1.1em; }

/* ════════════════════════════════════════════════════════════════════════════
   STATUS BAR
   ════════════════════════════════════════════════════════════════════════════ */
.status-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r);
  padding: .5rem var(--px); font-size: .82rem; color: var(--sub);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot.ok      { background: var(--ok);  box-shadow: 0 0 6px var(--ok);  }
.dot.error   { background: var(--err); box-shadow: 0 0 6px var(--err); }
.dot.loading { background: var(--e5);  animation: blink 1s infinite;   }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.status-meta { margin-left: auto; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .75rem; color: var(--mut); }

/* ── API connection indicator bar ────────────────────────────────────────── */
.api-bar {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .38rem var(--px);
  background: rgba(2,6,12,.4);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-size: .74rem;
  margin-top: .35rem;
}

.api-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.api-dot.api-connecting { background: var(--e5);  animation: blink 1s infinite; }
.api-dot.api-live       { background: var(--ok);  box-shadow: 0 0 5px var(--ok); }
.api-dot.api-cache      { background: var(--e5);  box-shadow: 0 0 5px var(--e5); }
.api-dot.api-error      { background: var(--err); box-shadow: 0 0 5px var(--err); animation: blink .6s infinite; }
.api-dot.api-offline    { background: var(--mut); }

.api-label {
  font-weight: 700; font-size: .74rem;
  transition: color .3s;
}
.api-dot.api-live    ~ .api-label,
.api-bar:has(.api-live)   .api-label { color: var(--ok);  }
.api-bar:has(.api-cache)  .api-label { color: var(--e5);  }
.api-bar:has(.api-error)  .api-label { color: var(--err); }
.api-bar:has(.api-offline) .api-label { color: var(--mut); }
.api-bar:has(.api-connecting) .api-label { color: var(--sub); }

.api-detail { color: var(--mut); font-size: .72rem; }
.api-sep    { color: var(--bd); }
.api-src    {
  display: flex; align-items: center; gap: .28rem;
  color: var(--mut); font-size: .7rem; margin-left: auto;
}
.api-src i  { color: var(--dsl); font-size: .75rem; }

@media (max-width: 479px) {
  .api-bar   { font-size: .68rem; gap: .35rem; padding: .32rem var(--px); }
  .api-src   { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TOOLBAR  — mobile collapsible filter drawer
   ════════════════════════════════════════════════════════════════════════════ */

/* Preisfilter panel */
.pf-panel {
  background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r);
  padding: .6rem var(--px); transition: border-color .2s, box-shadow .2s;
  margin-bottom: .45rem;
}
.pf-panel.active { border-color: var(--cheap); box-shadow: 0 0 0 1px rgba(110,231,183,.18); }
.pf-row {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; row-gap: .35rem;
}
.pf-sel  { width: auto !important; min-height: 36px; font-size: .82rem !important; padding: .25rem .5rem !important; }
.pf-unter { font-size: .76rem; color: var(--mut); white-space: nowrap; }
.pf-ig   { width: 115px !important; flex-shrink: 0; }
.pf-ig .form-control { min-height: 36px; font-size: .82rem !important; }
.pf-igunit { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--mut) !important; font-size: .76rem; }
.pf-lbl  { font-size: .78rem; white-space: nowrap; color: var(--sub); }

/* ── Mobile toolbar: collapsible drawer ─────────────────────────────────── */
@media (max-width: 639px) {
  /* Filter drawer toggle button */
  .mob-filter-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r);
    padding: .55rem var(--px); color: var(--sub);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    margin-bottom: .35rem;
    transition: background .12s, border-color .12s;
  }
  .mob-filter-toggle:hover { background: var(--s2); }
  .mob-filter-toggle.open { border-color: var(--dsl); color: var(--dsl); }
  .mob-filter-toggle-l { display: flex; align-items: center; gap: .45rem; }
  .mob-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--logo-red); color: #fff;
    border-radius: 99px; font-size: .65rem; font-weight: 800;
    min-width: 18px; height: 18px; padding: 0 5px;
    line-height: 1;
  }
  .mob-filter-badge:empty { display: none; }
  .mob-filter-chevron { font-size: .78rem; transition: transform .22s; }
  .mob-filter-toggle.open .mob-filter-chevron { transform: rotate(180deg); }

  /* Collapsible drawer body */
  .mob-filter-body {
    background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r);
    border-top: none; border-radius: 0 0 var(--r) var(--r);
    padding: .6rem var(--px); margin-top: -.35rem; margin-bottom: .35rem;
    display: none;
  }
  .mob-filter-body.open { display: block; }
  .mob-filter-section { margin-bottom: .55rem; }
  .mob-filter-section:last-child { margin-bottom: 0; }
  .mob-filter-label {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--mut); font-weight: 700; margin-bottom: .3rem; display: block;
  }

  /* Hide desktop pf-panel on mobile — replaced by drawer */
  .pf-panel { display: none; }

  /* Toolbar row mobile: full width, 2 rows */
  .toolbar-row {
    gap: .35rem; row-gap: .35rem;
  }
  /* SF group takes full width on mobile */
  .sf-grp { flex: 1; }
  .sf-grp .sf-btn { flex: 1; justify-content: center; min-height: 40px; font-size: .8rem; }
  /* Sort select */
  .sort-sel { flex: 1 !important; min-height: 40px !important; font-size: .8rem !important; }
  /* Fuel toggle */
  .fuel-tog { flex: 1; }
  .ftb { flex: 1; min-height: 40px; font-size: .78rem; }
}

/* Show desktop-only toggle button on desktop */
@media (min-width: 640px) {
  .mob-filter-toggle { display: none !important; }
  .mob-filter-body   { display: block !important; padding: 0; margin: 0;
    background: none; border: none; border-radius: 0; }
  .mob-filter-body .mob-filter-section { display: none; } /* hide mobile-only sections */
  /* restore pf-panel on desktop */
  .pf-panel { display: block; }
}

/* Toolbar row (shared) */
.toolbar-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .4rem; row-gap: .4rem;
}

/* Status filter */
.sf-grp .sf-btn {
  display: flex; align-items: center; gap: .2rem;
  min-height: 36px; font-size: .78rem; padding: .25rem .55rem;
}
.btn-check + .btn-outline-secondary       { color: var(--mut); border-color: var(--bd); }
.btn-check + .btn-outline-secondary:hover { color: var(--sub); border-color: var(--bd2); }
.btn-check:checked + .btn-outline-secondary {
  background: rgba(125,211,252,.12); border-color: var(--dsl); color: var(--dsl);
}

/* Sort select */
.sort-sel { width: auto !important; min-height: 36px; font-size: .78rem !important; padding: .25rem .5rem !important; }

/* ── Fuel toggle ─────────────────────────────────────────────────────────── */
.fuel-tog {
  display: flex;
  background: var(--s2); border: 1px solid var(--bd); border-radius: .5rem; overflow: hidden;
  flex-shrink: 0;
}
.ftb {
  background: none; border: none; border-right: 1px solid var(--bd);
  color: var(--mut); font-size: .78rem; font-weight: 700;
  min-height: 36px; min-width: 40px; padding: 0 .6rem;
  cursor: pointer; letter-spacing: .02em;
  transition: background .12s, color .12s;
}
.ftb:last-child { border-right: none; }
.ftb:hover { background: var(--s3); color: var(--sub); }
.ftb.active                          { background: rgba(255,255,255,.09); color: #fff; }
.ftb[data-fuel="e5"].active          { background: rgba(252,211,77,.18);  color: var(--e5);  }
.ftb[data-fuel="diesel"].active      { background: rgba(125,211,252,.18); color: var(--dsl); }
.ftb[data-fuel="e10"].active         { background: rgba(110,231,183,.18); color: var(--e10); }

.row-cnt { font-size: .76rem; color: var(--mut); margin-left: auto; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP TABLE  (≥ 640 px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px)  { #desktopTable { display: block !important; } #mobileCards { display: none !important;  } }
@media (max-width: 639px)  { #desktopTable { display: none  !important; } #mobileCards { display: block !important; } }

.tbl-wrap { border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.table    { margin: 0; --bs-table-bg: transparent; }

.table thead th {
  background: var(--s2); border-bottom: 1px solid var(--bd);
  color: var(--mut); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .6rem var(--px); cursor: pointer; user-select: none; transition: color .15s;
}
.table thead th:hover    { color: var(--txt); }
.table thead th.sorted   { color: var(--dsl); }
.table thead th.sorted-asc  .si::before { content: '\F235'; font-family: "bootstrap-icons"; }
.table thead th.sorted-desc .si::before { content: '\F229'; font-family: "bootstrap-icons"; }
.table thead th .si   { font-size: .76em; margin-left: 3px; opacity: .3; }
.table thead th.sorted .si { opacity: 1; }

.th-fav { width: var(--T); padding-left: .5rem !important; padding-right: .25rem !important; }
.th-nr  { width: 34px; }
.th-p   { width: 105px; }
.th-d   { width: 76px; }
.th-s   { width: 106px; }

.table tbody tr { border-bottom: 1px solid rgba(34,52,80,.6); transition: background .1s; }
.table tbody tr:last-child       { border-bottom: none; }
.table tbody tr:hover td         { background: rgba(125,211,252,.04) !important; }
.table tbody td                  { padding: .65rem var(--px); vertical-align: middle; }
.table tbody tr.row-fav   td     { background: rgba(240,171,252,.05); }
.table tbody tr.row-fav:hover td { background: rgba(240,171,252,.09) !important; }
.table tbody tr.row-cheap td     { background: rgba(110,231,183,.04); }
/* Crimson left accent on the very cheapest station row */
.table tbody tr.row-cheap td:first-child {
  border-left: 2px solid rgba(220,20,60,.4) !important;
}

.section-sep td {
  background: var(--s2) !important; font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--logo-red);
  padding: .28rem var(--px) !important; border-bottom: 1px solid var(--bd);
  border-top: 1px solid rgba(220,20,60,.2) !important;
}

/* Price cells */
.pv { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.pv.e5  { color: var(--e5);  }
.pv.dsl { color: var(--dsl); }
.pv.e10 { color: var(--e10); }
.pv.na  { color: var(--mut); font-weight: 400; font-size: .78rem; }
.pv.cheap { text-decoration: underline; text-decoration-color: var(--cheap); text-underline-offset: 3px; }
.badge-top   { font-size: .57rem; background: rgba(252,211,77,.18); color: var(--e5); border: 1px solid rgba(252,211,77,.35); padding: 1px 4px; border-radius: 3px; vertical-align: middle; margin-left: 3px; font-weight: 700; }
.badge-cheap { font-size: .57rem; background: rgba(110,231,183,.18); color: var(--cheap); border: 1px solid rgba(110,231,183,.3); padding: 1px 4px; border-radius: 3px; vertical-align: middle; margin-left: 3px; }
.price-time,
.pca-time    { font-size: .62rem; color: var(--mut); margin-top: 2px; opacity: .72; white-space: nowrap; }

/* Station column */
.st-name  { font-weight: 700; color: #f8fafc; font-size: .9rem; }
.st-brand { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); }
.st-addr  { font-size: .71rem; color: var(--mut); }

/* Station cell with map buttons (desktop table) */
.st-row       { display: flex; align-items: flex-start; gap: .4rem; justify-content: space-between; }
.st-info      { min-width: 0; flex: 1; }
.st-map-btns  {
  display: flex; flex-direction: column; gap: .22rem;
  flex-shrink: 0; opacity: 0;
  transition: opacity .15s;
}
.table tbody tr:hover .st-map-btns { opacity: 1; }
/* Always visible on touch devices */
@media (hover: none) { .st-map-btns { opacity: 1; } }

.btn-map {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px;
  background: var(--s2); border: 1px solid var(--bd);
  color: var(--mut); border-radius: .35rem;
  font-size: .82rem; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-map:hover       { background: rgba(125,211,252,.12); color: var(--dsl); border-color: rgba(125,211,252,.4); }
.btn-map-route:hover { background: rgba(110,231,183,.12); color: var(--ok);  border-color: rgba(110,231,183,.4); }
.fav-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--fav); display: inline-block; box-shadow: 0 0 5px var(--fav); margin-right: 4px; vertical-align: middle; }

.btn-star {
  display: flex; align-items: center; justify-content: center;
  width: var(--T); height: var(--T);
  background: none; border: none; color: var(--mut); cursor: pointer;
  font-size: 1.05rem; border-radius: 5px;
  transition: color .15s, transform .15s, background .15s;
}
.btn-star:hover        { color: var(--fav); background: rgba(240,171,252,.12); transform: scale(1.15); }
.btn-star.active       { color: var(--fav); }
.btn-star:focus-visible { outline: 2px solid var(--fav); outline-offset: 2px; }

.b-open   { background: rgba(110,231,183,.18); color: var(--ok);  border: 1px solid rgba(110,231,183,.35); font-size: .7rem; padding: .22rem .5rem; }
.b-closed { background: rgba(252,165,165,.14); color: var(--err); border: 1px solid rgba(252,165,165,.28); font-size: .7rem; padding: .22rem .5rem; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE CARDS  (< 640 px)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card container ──────────────────────────────────────────────────────── */
.mob-card {
  background: var(--s1); border: 1px solid var(--bd);
  border-radius: var(--r); padding: .75rem var(--px);
  margin-bottom: .35rem;
  /* Rank number via counter */
}
.mob-card:last-child  { margin-bottom: 0; }
.mob-card.row-fav     {
  border-color: rgba(240,171,252,.5);
  background: rgba(240,171,252,.04);
}
.mob-card.row-cheap   {
  border-color: rgba(110,231,183,.4);
  background: rgba(110,231,183,.03);
  border-left: 3px solid var(--logo-red);
}

/* ── Section divider ─────────────────────────────────────────────────────── */
.mob-sep {
  display: flex; align-items: center; gap: .5rem;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--logo-red);
  padding: .3rem 0 .5rem;
}
.mob-sep::before, .mob-sep::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,20,60,.3), transparent);
}

/* ── Header row ──────────────────────────────────────────────────────────── */
.mob-hdr {
  display: flex; align-items: flex-start; gap: .35rem;
  margin-bottom: .6rem;
}

/* Star button — slimmer */
.mob-hdr .btn-star {
  width: 36px; height: 36px; font-size: 1rem;
  flex-shrink: 0; margin-top: -2px; margin-left: -4px;
}

/* Station info */
.mob-info   { flex: 1; min-width: 0; }
.mob-name   {
  font-weight: 700; font-size: 1rem; color: #f8fafc;
  line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mob-brand  {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--logo-red); font-weight: 700; margin-top: 1px;
}
.mob-addr   {
  font-size: .72rem; color: var(--mut); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Right meta: dist + status */
.mob-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .25rem; flex-shrink: 0;
}
.mob-dist {
  font-size: .75rem; color: var(--mut); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* status badge — larger tap area */
.mob-right .badge {
  font-size: .7rem; padding: .28rem .6rem;
}

/* ── Price cells grid ────────────────────────────────────────────────────── */
.mob-prices     { display: grid; gap: .3rem; grid-template-columns: repeat(3,1fr); }
.mob-prices.one { grid-template-columns: 1fr; max-width: 160px; }

.mob-pc {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: .5rem; padding: .45rem .4rem;
  text-align: center; position: relative;
  transition: border-color .15s;
}
/* Top fuel type accent border */
.mob-pc.e5-cell  { border-top: 2px solid rgba(252,211,77,.5); }
.mob-pc.dsl-cell { border-top: 2px solid rgba(125,211,252,.5); }
.mob-pc.e10-cell { border-top: 2px solid rgba(110,231,183,.5); }

.mob-pc-lbl {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--mut); margin-bottom: 3px; font-weight: 700;
}
.mob-pc-val {
  font-size: 1.18rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mob-prices.one .mob-pc-val { font-size: 1.65rem; }
.mob-pc-val.e5  { color: var(--e5);  }
.mob-pc-val.dsl { color: var(--dsl); }
.mob-pc-val.e10 { color: var(--e10); }
.mob-pc-val.na  { color: var(--mut); font-size: .82rem; font-weight: 400; }

.mob-pc-top {
  font-size: .55rem; background: rgba(252,211,77,.18);
  color: var(--e5); border: 1px solid rgba(252,211,77,.4);
  padding: 1px 5px; border-radius: 3px;
  display: inline-block; margin-top: 3px; font-weight: 700;
}
.mob-pc-time {
  font-size: .58rem; color: var(--mut); margin-top: 2px; opacity: .7;
  white-space: nowrap;
}

/* ── Actions row (tap to map / details) ─────────────────────────────────── */
.mob-actions {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .55rem; padding-top: .5rem;
  border-top: 1px solid rgba(34,52,80,.5);
}
.mob-action-btn {
  display: flex; align-items: center; gap: .3rem;
  flex: 1; justify-content: center;
  background: none; border: 1px solid var(--bd);
  color: var(--mut); border-radius: .4rem;
  font-size: .74rem; font-weight: 600; cursor: pointer;
  min-height: 36px; padding: 0 .5rem;
  transition: background .12s, color .12s, border-color .12s;
  text-decoration: none;
}
.mob-action-btn:hover { background: var(--s2); color: var(--sub); border-color: var(--bd2); }
.mob-action-btn.map:hover   { color: var(--dsl); border-color: rgba(125,211,252,.4); background: rgba(125,211,252,.06); }
.mob-action-btn.route:hover { color: var(--ok);  border-color: rgba(110,231,183,.4); background: rgba(110,231,183,.06); }

/* ════════════════════════════════════════════════════════════════════════════
   PRIVACY + DATA SOURCE
   ════════════════════════════════════════════════════════════════════════════ */
.privacy-notice { background: rgba(110,231,183,.06); border: 1px solid rgba(110,231,183,.2); border-radius: var(--r); padding: .875rem var(--px); }
.privacy-ico    { font-size: 1.3rem; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.privacy-ttl    { display: block; color: var(--ok); font-size: .82rem; margin-bottom: .28rem; }
.privacy-txt    { font-size: .77rem; color: var(--mut); line-height: 1.6; }
.privacy-lnk    { color: var(--dsl); text-decoration: underline; text-decoration-color: rgba(125,211,252,.4); text-underline-offset: 3px; }
.privacy-lnk:hover { color: #fff; }

/* Data source panel — below privacy notice */
.datasrc-panel {
  background: rgba(125,211,252,.04);
  border: 1px solid rgba(125,211,252,.18);
  border-radius: var(--r);
  padding: .75rem var(--px);
  margin-top: .5rem;
}
.datasrc-row  { display: flex; align-items: flex-start; gap: .75rem; }
.datasrc-ico  { font-size: 1.1rem; color: var(--dsl); flex-shrink: 0; margin-top: 1px; }
.datasrc-body { display: flex; flex-direction: column; gap: .18rem; }
.datasrc-ttl  {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--dsl);
}
.datasrc-txt  { font-size: .76rem; color: var(--mut); line-height: 1.65; }
.datasrc-link {
  color: var(--dsl);
  text-decoration: underline;
  text-decoration-color: rgba(125,211,252,.35);
  text-underline-offset: 2px;
  transition: color .13s;
}
.datasrc-link:hover { color: #fff; text-decoration-color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
.app-footer {
  background: var(--s1);
  border-top: 1px solid var(--bd);
  box-shadow: 0 -1px 0 0 rgba(220,20,60,.25);
  margin-top: 1rem;
}

/* ── Main brand row ──────────────────────────────────────────────────────── */
.footer-inner {
  max-width: 1600px; margin: 0 auto; padding: .7rem var(--px);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .45rem;
}
.footer-brand-wrap { display: flex; align-items: center; gap: .35rem; }
.footer-brand  { font-weight: 800; font-size: .85rem; }
.footer-logo-wrap {
  display: flex; align-items: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden;
  opacity: .8;
  box-shadow: 0 0 0 1px rgba(220,20,60,.2);
}
.footer-logo    { width: 24px; height: 24px; display: block; }
.footer-links   { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .76rem; }
.fdot           { color: var(--bd); }
.flink          { color: var(--mut); text-decoration: underline; text-decoration-color: rgba(148,163,184,.3); text-underline-offset: 2px; transition: color .15s; }
.flink:hover    { color: var(--dsl); }
.fmaker         { color: var(--dsl) !important; font-weight: 600; }
.fmaker:hover   { color: #fff !important; }
.footer-notrack  { color: var(--ok); font-size: .76rem; }
.footer-contact  { color: var(--sub); font-size: .76rem; }
.footer-contact-name { color: #f8fafc; font-weight: 700; }
.footer-tel      { white-space: nowrap; }
.footer-tel:hover { color: var(--ok) !important; }

/* ── Legal bar ───────────────────────────────────────────────────────────── */
.footer-legal {
  border-top: 1px solid rgba(34,52,80,.7);
  background: rgba(2,6,12,.35);
}
.footer-legal-inner {
  max-width: 1600px; margin: 0 auto; padding: .65rem var(--px);
  display: flex; flex-direction: column; gap: .38rem;
}
.footer-legal-block {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .72rem; line-height: 1.55; color: var(--mut);
}
.footer-legal-block i { flex-shrink: 0; margin-top: 2px; font-size: .82rem; }

/* Non-commercial notice */
.footer-noncom { color: rgba(148,163,184,.75); }
.footer-noncom strong { color: rgba(203,213,225,.85); }

/* Attribution */
.footer-attrib i { color: var(--dsl); opacity: .7; }

/* Copyright */
.footer-copy   i { color: var(--mut); opacity: .6; }

.footer-legal-link {
  color: rgba(125,211,252,.7);
  text-decoration: underline;
  text-decoration-color: rgba(125,211,252,.25);
  text-underline-offset: 2px;
  transition: color .13s;
  white-space: nowrap;
}
.footer-legal-link:hover { color: var(--dsl); text-decoration-color: rgba(125,211,252,.5); }

@media (max-width: 479px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-legal-block { font-size: .68rem; }
  .footer-notrack { display: none; } /* already shown in datasrc panel */
}

/* ════════════════════════════════════════════════════════════════════════════
   STICKY SHARE FAB
   Fixed bottom-right. Panel opens above. base64 URL with filter summary.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.sfab {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  right: 1rem;
  z-index: 1040;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}

/* ── FAB button ──────────────────────────────────────────────────────────── */
.sfab-btn {
  display: flex; align-items: center; gap: .45rem;
  height: var(--T); padding: 0 1.1rem;
  background: var(--logo-red); color: #fff;
  border: none; border-radius: calc(var(--T) / 2);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 18px rgba(220,20,60,.45), 0 0 0 1px rgba(220,20,60,.4);
  transition: background .15s, transform .12s, box-shadow .15s;
  user-select: none;
}
.sfab-btn:hover  { background: var(--logo-red-d); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(220,20,60,.55); }
.sfab-btn:active { transform: translateY(0); }
.sfab-btn[aria-expanded="true"] { background: var(--s3); color: var(--txt); border: 1px solid var(--bd); box-shadow: none; }
.sfab-ico { font-size: 1rem; transition: transform .2s; }
.sfab-lbl { font-size: .82rem; }
@media (max-width: 380px) { .sfab-lbl { display: none; } }

/* ── Popup panel (above FAB) ─────────────────────────────────────────────── */
.sfab-panel {
  background: var(--s1); border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(125,211,252,.08);
  width: min(92vw, 360px);
  animation: sfabIn .2s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
}
@keyframes sfabIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.sfab-panel-inner { padding: .875rem; }

.sfab-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .65rem;
}
.sfab-title {
  font-size: .82rem; font-weight: 700; color: var(--logo-red);
  display: flex; align-items: center; gap: .3rem;
}
.sfab-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: none; color: var(--mut);
  border-radius: .35rem; cursor: pointer; font-size: .88rem;
  transition: background .12s, color .12s;
}
.sfab-close:hover { background: rgba(255,255,255,.08); color: var(--txt); }

/* Meta tags: shows what's encoded */
.sfab-meta {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: .6rem; min-height: 1.4em;
}
.sfab-tag {
  display: inline-flex; align-items: center;
  background: var(--s2); border: 1px solid var(--bd);
  color: var(--mut); border-radius: 99px;
  font-size: .7rem; padding: .15rem .6rem;
  font-weight: 600; white-space: nowrap;
}
.sfab-tag-fuel { color: var(--e5); border-color: rgba(252,211,77,.35); background: rgba(252,211,77,.08); }

/* URL row */
.sfab-url-row {
  display: flex; gap: .35rem; align-items: center; margin-bottom: .5rem;
}
.sfab-url-inp {
  flex: 1; font-size: .73rem !important;
  font-family: 'Courier New', monospace;
  color: var(--dsl) !important; min-height: 36px;
  cursor: text; letter-spacing: .01em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sfab-url-inp:focus { border-color: var(--dsl) !important; }

.sfab-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--s2); border: 1px solid var(--bd);
  color: var(--mut); border-radius: .4rem; cursor: pointer;
  font-size: .95rem; transition: background .12s, color .12s, border-color .12s;
}
.sfab-action-btn:hover { background: rgba(125,211,252,.12); color: var(--dsl); border-color: var(--dsl); }
.sfab-native-btn:hover { background: rgba(110,231,183,.12); color: var(--ok);  border-color: var(--ok); }

/* Chip buttons */
.sfab-chips {
  display: flex; gap: .35rem; flex-wrap: wrap;
}
.sfab-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--s2); border: 1px solid var(--bd);
  color: var(--mut); border-radius: .4rem;
  font-size: .74rem; font-weight: 600; padding: .3rem .65rem;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  min-height: 32px;
}
.sfab-chip:hover { background: rgba(125,211,252,.08); color: var(--dsl); border-color: rgba(125,211,252,.4); }
.sfab-chip-full:hover { background: rgba(110,231,183,.08); color: var(--ok); border-color: rgba(110,231,183,.4); }

.sfab-hint    { font-size: .74rem; color: var(--mut); margin-top: .4rem; min-height: 1.1em; }
.sfab-hint.ok { color: var(--ok); }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT REFINEMENTS  (< 640 px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Section spacing — tighter on mobile */
  .sec-plz, .sec-status, .sec-toolbar,
  .sec-stations, .sec-settings, .sec-privacy { margin-bottom: .55rem; }

  /* PLZ panel — tighter */
  .plz-card { padding: .6rem var(--px); }

  /* Log — extra compact header */
  .log-hdr { padding: .5rem var(--px); min-height: 42px; }
  .log-ttl  { font-size: .78rem; }

  /* Status bar — stack count to next line */
  .status-bar { flex-wrap: wrap; gap: .2rem; font-size: .78rem; }
  .status-meta { width: 100%; font-size: .72rem; }

  /* Section headings — hide section separators that waste space */


  /* Charts — scrollable on mobile */
  .chart-toolbar { padding: .4rem var(--px); gap: .25rem; }

  /* Privacy notice — more compact */
  .privacy-notice { padding: .65rem var(--px); }
  .privacy-txt    { font-size: .73rem; }

  /* Search input — full width, bigger */
  .st-search-inp { font-size: .88rem !important; }

  /* Footer — minimal on mobile */
  .footer-notrack { display: none; }

  /* FAB — move up slightly to avoid iOS home bar */
  .sfab {
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    right: .85rem;
  }
}

/* Very small screens ≤ 360px */
@media (max-width: 360px) {
  :root { --px: .65rem; }
  .mob-name   { font-size: .9rem; }
  .mob-pc-val { font-size: 1.05rem; }
  .sf-grp .sf-btn { padding: .25rem .35rem; font-size: .74rem; }
  .ftb { min-width: 32px; font-size: .72rem; padding: 0 .4rem; }
}