/* mBenzin.cz — vizuální styl v brandu živého webu.
Vlastní CSS (ne kopie jejich Bootstrap/theme.css). Brandové tokeny odvozeny
z živého mbenzin.cz: petrolejová #0097a9, font Open Sans. */
:root {
--brand: #0097a9; /* petrolejová — logo, ceny, odkazy, taby */
--brand-dark: #0c5460; /* tmavší (hover, nadpisy) */
--brand-light: #6fd7e2; /* světlý akcent */
--ink: #212529; /* základní text */
--muted: #868e96; /* sekundární text */
--border: #dee2e6;
--bg: #ffffff;
--nav-bg: #f2f2f2;
--row-alt: #f7fbfc;
--info-bg: #d1ecf1; /* informační proužek */
--info-ink: #0c5460;
/* Ikony jako CSS masky (obarví se přes `background: currentColor`), ať se
nemusí tahat ikonový font ani opakovat SVG v šablonách. */
--pump-mask: url('data:image/svg+xml;utf8,');
--ico-phone: url('data:image/svg+xml;utf8,');
--ico-web: url('data:image/svg+xml;utf8,');
--ico-map: url('data:image/svg+xml;utf8,');
--ico-nav: url('data:image/svg+xml;utf8,');
--ico-card: url('data:image/svg+xml;utf8,');
--ico-warn: url('data:image/svg+xml;utf8,');
--ico-stk: url('data:image/svg+xml;utf8,');
--ico-pin: url('data:image/svg+xml;utf8,');
--ico-search: url('data:image/svg+xml;utf8,');
--ico-mail: url('data:image/svg+xml;utf8,');
--ico-at: url('data:image/svg+xml;utf8,');
/* Mapové pozadí hero sekce — jemná mřížka ulic, ne fotka: drží ~2 kB a nemusí
se shipovat obrázek. Originál používá img/bg-map.jpg. */
--map-bg: url('data:image/svg+xml;utf8,');
--ico-info: url('data:image/svg+xml;utf8,');
/* Ikony lišty mobilní appky (app_base.html) */
--ico-menu: url('data:image/svg+xml;utf8,');
--ico-user: url('data:image/svg+xml;utf8,');
--ico-back: url('data:image/svg+xml;utf8,');
--ico-heart: url('data:image/svg+xml;utf8,');
--ico-money: url('data:image/svg+xml;utf8,');
}
* { box-sizing: border-box; }
/* Typografie i rozměry jsou ODMĚŘENÉ z živého mbenzin.cz, ne odhadnuté:
body 11pt (= 14,6667 px) / 22 px Open Sans, nadpisy Raleway 500, kontejner
1140 px s 15px paddingem, sloupce 780 + 30 + 300. Kdo tohle mění, mění
vzhled celého webu — ověř proti originálu, ne proti citu. */
/* `overflow-x: hidden` na BODY ořízne přetečení sekcí roztažených na celou
šířku okna (`.section`, `vw`-margin trik neguje šířku scrollbaru), ať
stránka nemá vodorovný posuvník. Musí být na `body`, ne na `main.wrap` —
ten je sám jen 1140 px široký (centrovaný), takže by tím oříznul přesně to
přetečení, kterým se `.section--map` roztahuje k okraji okna. `overflow-x`
samotné (bez `overflow-y`) se propaguje na viewport a NEVYTVOŘÍ z body
lokální scroll-kontejner, takže sticky reklama v sidebaru (`.ad-sticky`)
zůstává funkční — ověřeno v praxi (na rozdíl od `clip`, ten propagaci na
viewport v tomto enginu vodorovný scroll nezastavil). */
body {
margin: 0; color: var(--ink); background: var(--bg); overflow-x: hidden;
font: 14.6667px/22px "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.gtm-noscript { display: none; visibility: hidden; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 15px; }
/* ---- hlavička + logo (samostatná bílá lišta, 57 px) ---- */
.site-header { background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; height: 57px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brand); }
.brand-icon { color: var(--brand); flex: none; }
.brand-logo { display: block; height: 25px; width: auto; }
.brand-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--brand); }
.brand-tld { font-weight: 400; }
/* ---- hlavní navigace ----
Originál má tenhle pruh průhledný na bílém (ověřeno na živém mbenzin.cz) —
tady VĚDOMÁ ODCHYLKA od 1:1 parity (Martin, 30.7.): pruh nese brandovou
barvu na obou značkách (mbenzin i fuently), ne bílou. Položky Raleway
verzálkami, hover/active ztmaví podklad (ne podtržení). */
.mainnav { background: var(--brand); }
.mainnav .wrap { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 54px; }
.mainnav a {
text-decoration: none; color: #fff; font-size: 14.6667px; font-weight: 400;
font-family: Raleway, "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase; padding: 8px 12px; display: inline-flex; align-items: center;
}
.mainnav a:hover { background: rgba(0, 0, 0, .2); color: #fff; }
.mainnav a.active { background: rgba(0, 0, 0, .15); }
main.wrap { padding-top: 16px; padding-bottom: 40px; }
/* ---- typografie ---- */
h1, h2, h3, h4, h5 {
font-family: Raleway, "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500; line-height: 1.1; margin-top: 0; margin-bottom: .5rem; color: inherit;
}
h1 { font-size: 2em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
.lead { color: #495057; font-size: 1em; max-width: 72ch; }
.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* ---- dlaždice (přehled průměrů) ---- */
.tiles { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.tile { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--brand);
border-radius: 6px; padding: 16px 20px; min-width: 220px; flex: 1; }
.tile-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tile-value { font-size: 1.8rem; font-weight: 700; color: var(--brand); margin: 6px 0; }
.tile-sub { font-size: .8rem; color: var(--muted); }
.tile-unit { font-size: .9rem; font-weight: 400; color: var(--muted); }
/* ---- palivo: vlastní box, vlastní aktualizace (detail čerpačky) ---- */
.fuel-tile { min-width: 150px; }
.fuel-edit { margin-top: 8px; }
.fuel-edit summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--brand-dark); list-style: none; }
.fuel-edit summary::-webkit-details-marker { display: none; }
.fuel-edit summary:hover { color: var(--brand); }
.fuel-edit-form { display: flex; gap: 8px; margin-top: 8px; }
.fuel-edit-form input { width: 88px; padding: 6px 8px; border: 1px solid var(--border);
border-radius: 6px; font: inherit; font-size: .9rem; }
/* ---- cenové tabulky ---- */
table.prices { width: 100%; border-collapse: collapse; background: var(--bg);
border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
table.prices th, table.prices td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
table.prices thead th { background: var(--brand); color: #fff; font-size: .8rem;
text-transform: uppercase; letter-spacing: .02em; font-weight: 600; border-bottom: none; }
table.prices tbody tr:last-child td { border-bottom: none; }
table.prices tbody tr:nth-child(even) { background: var(--row-alt); }
table.prices tbody a { text-decoration: none; font-weight: 600; }
table.prices tbody a:hover { text-decoration: underline; }
table.prices .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand); }
/* ---- graf vývoje cen (SVG vykreslené serverem, bez JS knihovny) ---- */
.price-chart { width: 100%; max-width: 640px; height: auto; background: var(--bg);
border: 1px solid var(--border); border-radius: 6px; margin: 12px 0 6px; }
.price-chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.price-chart-line--benzin { stroke: var(--brand); }
.price-chart-line--nafta { stroke: var(--ink); }
.price-chart-legend { font-size: .8rem; color: var(--muted); display: flex; align-items: center;
gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.legend-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.legend-swatch--benzin { background: var(--brand); }
.legend-swatch--nafta { background: var(--ink); }
/* ---- karty stanic ---- */
.stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.station { background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
padding: 12px 14px; display: flex; flex-direction: column; }
.station:hover { border-color: var(--brand-light); }
.station-chain { font-weight: 700; color: var(--brand); text-decoration: none; }
.station-chain:hover { text-decoration: underline; }
.station-addr { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.station-more { margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--brand);
text-decoration: none; }
.station-more:hover { text-decoration: underline; }
/* ---- seznamy odkazů ---- */
.city-links, .topic-links { list-style: none; padding: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; }
.city-links a, .topic-links a { text-decoration: none; color: var(--brand); }
.city-links a:hover, .topic-links a:hover { text-decoration: underline; }
/* ---- informační proužek (např. sekce elektřina „připravujeme") ---- */
.notice { background: var(--info-bg); border: 1px solid #bee5eb; color: var(--info-ink);
border-radius: 6px; padding: 16px 20px; margin: 16px 0; }
.notice p { margin: 4px 0; }
.notice .muted { color: var(--info-ink); opacity: .8; }
.muted { color: var(--muted); }
/* ---- dvousloupcový layout (hlavní obsah + pravý sidebar) jako originál ---- */
.layout { display: grid; grid-template-columns: minmax(0, 780px) 300px; gap: 30px;
align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
/* vyhledávací pruh */
.searchbar { display: flex; gap: 10px; align-items: stretch; margin-bottom: 0; flex-wrap: wrap; }
.searchbar input, .searchbar select {
border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font: inherit; background: #fff; }
.searchbar input { flex: 1 1 220px; }
.searchbar select { flex: 0 0 auto; color: var(--ink); }
.searchbar .search-go { background: var(--brand); color: #fff; border: none; border-radius: 6px;
padding: 0 18px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.searchbar .search-go:hover { background: var(--brand-dark); }
/* Záložky v tyrkysové hlavičce karty — přesně jako originál:
neaktivní bílý text, aktivní BÍLÁ záložka s tyrkysovým TUČNÝM textem,
zaoblená jen nahoře. Žádný rámeček: bootstrapí `.nav-tabs` kreslí aktivní
záložce border s bílým spodkem a originál ho vypíná (`border: 0 !important`).
Bez toho se na první aktivní záložce objeví ta rozbitá linka. */
.fueltabs { display: flex; flex-wrap: wrap; background: var(--brand);
border-radius: 4px 4px 0 0; overflow: hidden; }
.fueltabs a { color: #fff; text-decoration: none; padding: 15px 16px;
font-size: .95rem; font-weight: 400; white-space: nowrap; border: 0; }
.fueltabs a h2 { margin: 0; font-size: inherit; font-weight: inherit; color: inherit;
line-height: 1.1; }
.fueltabs a:hover { background: #008999; color: #fff; }
.fueltabs a.active { background: #fff; color: var(--brand);
border-radius: 4px 4px 0 0; }
.fueltabs a.active h2 { font-weight: 700; }
.fueltabs a.active:hover { background: #fff; color: var(--brand); }
/* Vyhledávací pruh nad kartou (nahradil celostránkový pruh v shellu) */
.mb-search { display: flex; align-items: stretch; margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12); border-radius: 3px; background: #fff; }
.mb-search-loc, .mb-search-go { flex: none; width: 60px; border: 1px solid rgba(0, 0, 0, .15);
background: #fff; color: var(--brand); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; }
.mb-search-loc { border-right: 0; border-radius: 3px 0 0 3px; }
.mb-search-go { background: var(--brand); border-color: #008999; color: #fff;
border-radius: 0 3px 3px 0; }
.mb-search-go:hover { background: #008999; }
.mb-search-go .ico, .mb-search-loc .ico { width: 20px; height: 20px; background: currentColor; }
.mb-search-input { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(0, 0, 0, .15);
padding: .5rem .75rem; font: inherit; font-size: .95rem; color: #495057;
/* vodoznak poskytovatele adres vpravo v poli, jako na originále */
background: #fff url("https://api.mapy.com/img/api/logo.svg") no-repeat right .5rem center;
background-size: auto 14px; }
.mb-search-input:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.mb-search-chain { position: relative; flex: none; }
.mb-search-chain > summary { list-style: none; cursor: pointer; height: 100%;
min-width: 200px; display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: .5rem 1rem; border: 1px solid rgba(0, 0, 0, .15);
border-left: 0; border-right: 0; color: var(--brand); font-size: 1rem; }
.mb-search-chain > summary::-webkit-details-marker { display: none; }
.mb-search-chain > summary::after { content: "▾"; }
.mb-search-menu { position: absolute; right: 0; top: 100%; z-index: 40; width: 260px;
max-height: 300px; overflow-y: auto; background: #fff;
border: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 3px 3px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.mb-search-menu a { display: block; padding: 6px 16px; text-decoration: none; color: var(--ink); }
.mb-search-menu a:hover { background: var(--row-alt); color: var(--brand); }
@media (max-width: 640px) {
/* Na úzkém displeji se výběr provozovatele zalomí pod pole. Tlačítko lupy
musí zůstat U POLE (`order`), jinak ho výběr odsune na TŘETÍ řádek — tam
se roztáhne přes celou šířku a pruh vypadá rozbitě. Pole je uvnitř ještě
zabalené v `.ac-wrap` (našeptávač), takže basis patří jemu, ne inputu. */
.mb-search { flex-wrap: wrap; }
.mb-search-loc { order: 1; }
/* basis 0, ne „100 % − tlačítka": při přesně vyplněném řádku stačí zlomek
pixelu a lupa spadne na další řádek. Takhle si pole vezme, co zbude. */
.mb-search-input, .ac-wrap { order: 2; flex: 1 1 0; min-width: 0; }
.mb-search-go { order: 3; border-radius: 0 3px 3px 0; }
.mb-search-chain { order: 4; flex-basis: 100%; }
.mb-search-chain > summary { border-left: 1px solid rgba(0, 0, 0, .15);
border-right: 1px solid rgba(0, 0, 0, .15);
border-radius: 0 0 3px 3px; }
.mb-search-menu { width: 100%; }
/* Vodoznak Mapy.com sedí vpravo v poli — text pod něj nesmí zajet. */
.mb-search-input { padding-right: 74px; }
}
/* ---- Sekce stránky --------------------------------------------------------
Originál skládá stránku ze `.section` bloků oddělených tenkou linkou. Mapové
pozadí (jeho vlastní img/bg-map.jpg, stažený do statiky) má v originále JEN
ÚVODNÍ STRÁNKA (+ detail stanice) — ne rozcestníky měst/krajů/paliv/STK/ČOI.
Modifikátor `.section--map` proto patří jen do home.html, nikam jinam.
Pruh jde přes CELOU šířku okna, obsah v něm zůstává v mřížce 1140. Originál
má `.section` jako sourozence nad kontejnerem; u nás leží uvnitř
`main.wrap` (max 1140 px, centrovaný), takže se z něj musí vylomit.
`margin-left: calc(50% - 50vw)` s `width: 100vw` počítá posun PŘESNĚ (ne
naslepo `-50vw`/`50vw` jako dřív) — 50 % je vztaženo k šířce `main.wrap`
(rodič), 50vw k šířce okna; protože je `main.wrap` na stránce vycentrovaný,
rozdíl vyjde vždy přesně na okraj okna, ať je okno jakkoli široké. Starý
`-50vw` margin počítal posun vůči šířce OKNA, ne vůči tomu, jak daleko od
okraje `main.wrap` doopravdy je — na širokém okně tak zbýval mezi mapou a
okrajem okna pruh čistého pozadí stránky. Drobný přesah z `vw` (nepočítá
s šířkou svislého scrollbaru) ořízne `overflow-x: hidden` na `body`. */
.section { border-bottom: 1px solid #eaeaea; padding: 16px 0; width: 100vw; margin-left: calc(50% - 50vw); }
.section--map { background: url("/static/bg-map.jpg") center / cover no-repeat; }
.section--last { border-bottom: 0; }
.section > .layout, .section > .wrap { max-width: 1140px; margin: 0 auto; padding: 0 15px; }
/* Dvě karty vedle sebe v hlavním sloupci (Kraje | Poslední dny, Evropa | Trasa) */
.cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.cardrow > .card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.cardrow > .card > .card-body { flex: 1 1 auto; }
@media (max-width: 760px) { .cardrow { grid-template-columns: 1fr; gap: 0; }
.cardrow > .card { margin-bottom: 24px; } }
/* Tyrkysový proužek s výzvou (ČOI) */
.alert { padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: .25rem;
margin: 1rem 0; }
.alert-brand { background: var(--brand); border-color: #008999; color: #fff; }
.alert-brand h3 { margin: 0; color: #fff; }
.alert-brand a { color: #fff; text-decoration: underline; }
/* Článek v proudu titulky */
.artrow { padding: 1rem 0; }
.artrow h3 { padding-bottom: .5rem; margin-bottom: 1rem; line-height: 1.4;
border-bottom: 1px solid #efefef; }
.artrow a { text-decoration: none; }
.artrow-body { display: flex; gap: 1rem; align-items: flex-start; }
.artrow-thumb { flex: 0 0 33%; max-width: 33%; }
.artrow-thumb img { width: 100%; height: auto; display: block; }
.artrow-text { flex: 1 1 auto; min-width: 0; }
.artrow-text p { margin: 0 0 .5rem; }
.artrow-more { text-align: right; margin: 0; }
@media (max-width: 560px) { .artrow-body { flex-direction: column; }
.artrow-thumb { flex-basis: auto; max-width: 100%; } }
/* Pole s ikonou špendlíku (plánovač trasy) */
.pin-input { display: flex; margin-bottom: .75rem; }
.pin-input-btn { flex: none; width: 46px; display: inline-flex; align-items: center;
justify-content: center; border: 1px solid rgba(0, 0, 0, .15);
border-right: 0; border-radius: 3px 0 0 3px; background: #fff; color: var(--brand); }
.pin-input-btn .ico { width: 18px; height: 18px; background: currentColor; }
.pin-input input { flex: 1 1 auto; min-width: 0; padding: .5rem .75rem; font: inherit;
border: 1px solid rgba(0, 0, 0, .15); border-radius: 0 3px 3px 0; }
.pin-input input:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.text-center { text-align: center; }
/* Magazínová navigace (pruh pod výpisem stanic) */
/* Magazínový pruh je v originále taky celá `.section` s kontejnerem uvnitř —
proto stejné vylomení na celou šířku okna jako u `.section`. */
.magnav { background: #fff; border-bottom: 1px solid #eaeaea; padding: 0 50vw; margin: 0 -50vw; }
.magnav .wrap { display: flex; flex-wrap: wrap; align-items: center; min-height: 54px; }
.magnav a { padding: 8px 12px; text-decoration: none; color: #000; text-transform: uppercase;
font-family: Raleway, "Open Sans", sans-serif; font-size: 14.6667px; }
.magnav a:hover { background: rgba(0, 151, 169, .2); }
.magnav-brand { background: rgba(0, 151, 169, .2); }
/* pravý sloupec bez karty (jen sticky reklama) */
.sidecol { min-width: 0; }
/* seznam stanic ve stylu originálu */
.stationlist { background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.st-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.st-row:last-child { border-bottom: none; }
.st-row:nth-child(even) { background: var(--row-alt); }
.st-pump { flex: none; color: var(--brand); }
.st-main { flex: 1 1 auto; min-width: 0; }
/* Název stanice = NORMÁLNÍ řez (jako originál mbenzin.cz, weight 400) — ne tučně. */
.st-name { font-weight: 400; color: var(--brand); text-decoration: none; }
.st-name:hover { text-decoration: underline; }
.st-name { font-size: 1.1rem; }
.st-addr { font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }
/* Štítek „přijímá kartu CCS". Jen pozitivní tvrzení — protějšek „bez CCS"
neexistuje záměrně, viz makro ccs_badge v _macros.html. */
.st-ccs { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
font-size: .72rem; font-weight: 700; color: var(--brand-dark);
background: #e9f6f8; border: 1px solid #bee5eb; }
/* Vzdálenost = špendlík NAD číslem, vystředěné (jako originál). */
.st-meta { flex: 0 0 auto; width: 25%; min-width: 70px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 2px; }
.st-meta .ico { width: 20px; height: 20px; background: var(--brand); }
.st-km { font-size: .8rem; color: var(--muted); }
.st-prices { flex: 0 0 auto; width: 42%; display: flex; }
.st-price { flex: 1 1 0; min-width: 0; text-align: center; padding: 4px; }
.st-price .lbl { display: block; font-size: .7rem; color: var(--muted); }
.st-price .val { display: block; font-size: 1.2rem; font-weight: 400; color: var(--brand);
font-variant-numeric: tabular-nums; line-height: 1.2; }
.st-price .val.na { color: var(--muted); }
.st-price-wide { min-width: 96px; }
.st-map { flex: 0 0 auto; order: 5; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.st-map:hover { text-decoration: underline; }
/* Výpis mimo záložky (fueltabs) — LPG/CNG/nejlevnější/řetězec: uzavřená karta. */
.stationlist--card { border-top: 1px solid var(--border); border-radius: 6px; margin: 6px 0 24px; }
.list-more { padding: 14px 16px; text-align: center; }
@media (max-width: 560px) {
.st-row { flex-wrap: wrap; }
.st-meta { order: 3; text-align: left; }
.st-prices { order: 4; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
/* Řádek výpisu ČOI (/Nekvalitni-palivo-COI) — stejná geometrie jako .st-row,
ale místo cenových sloupců nese kontrolu (datum + pokuta) a popis závady. */
.coi-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px;
border-bottom: 1px solid var(--border); }
.coi-row:last-child { border-bottom: none; }
.coi-row:nth-child(even) { background: var(--row-alt); }
.coi-main { flex: 1 1 34%; min-width: 0; }
.coi-check { flex: 1 1 26%; font-size: .8rem; color: var(--muted); }
.coi-note { flex: 1 1 40%; font-size: .8rem; }
.coi-note-label { font-weight: 700; }
@media (max-width: 560px) {
.coi-row { flex-wrap: wrap; }
.coi-main, .coi-check, .coi-note { flex: 1 1 100%; }
}
/* Karta — základní stavební blok originálu: tyrkysová hlavička s nadpisem a
bílé tělo. Skládá se z ní titulka i většina rozcestníků. */
.card { border: 1px solid rgba(0, 0, 0, .125); border-radius: 4px; overflow: hidden;
background: var(--bg); margin: 0 0 24px; }
/* Šedá hlavička = výchozí (jako .card-header na originále); tyrkysová je
varianta pro karty se záložkami a boční kartu. */
.card-header { background: rgba(0, 0, 0, .1); color: var(--ink); padding: 12px 20px;
border-bottom: 1px solid rgba(0, 0, 0, .125); }
.card-header h2 { margin: 0; font-size: .95rem; font-weight: 500; color: inherit;
border: none; padding: 0; }
.card-header--brand { background: var(--brand); color: #fff; border-bottom: none; }
.card-header--brand h2 { color: #fff; }
/* H1 titulní karty: na originále je bílý v tyrkysové hlavičce, ne velký černý
nadpis nad obsahem — odměřeno 16,13 px, weight 400. */
.card-header--brand h1 { margin: 0; font-size: 1.1em; font-weight: 400; line-height: 1.3;
color: #fff; }
.card-body { padding: 20px; }
.card-body--flush { padding: 0; }
.card-body table.prices { border: none; border-radius: 0; }
.prices--sm { font-size: .8rem; }
.prices--sm th, .prices--sm td { padding: .3rem .75rem; }
/* zebra na LICHÝCH řádcích — originál používá bootstrapí .table-striped */
.card-body table.prices tbody tr:nth-child(even) { background: transparent; }
/* Zvýrazněný řádek domovské země na /Ceny-benzinu-a-nafty-v-evrope a /sk/Ceny-v-Europe */
table.prices tr.highlight { background: var(--brand-soft, #e6f6f8); font-weight: 600; }
.card-body table.prices tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .05); }
.card-foot--center { text-align: center; }
.card-body table.prices thead th { background: var(--row-alt); color: var(--muted);
border-bottom: 1px solid var(--border); }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: .9rem; }
/* čtyři průměry vedle sebe (karta „Aktuální průměrné ceny …") */
.avg-row { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.avg-cell { padding: 6px 4px; }
.avg-label { font-size: .8rem; color: var(--muted); }
.avg-value { font-size: 1.6rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.avg-unit { font-size: .95rem; font-weight: 400; color: var(--muted); }
@media (max-width: 560px) { .avg-row { grid-template-columns: repeat(2, 1fr); } }
/* formulář plánovače na titulce */
.planner { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.planner label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.planner input, .planner select { width: 100%; padding: 9px 12px; border: 1px solid var(--border);
border-radius: 6px; font: inherit; background: #fff; }
@media (max-width: 640px) { .planner { grid-template-columns: 1fr; } }
/* /Planovani-trasy: odkud/kam + filtr paliva/vzdálenosti od trasy, 5 polí v řadě */
.planner--full { grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto; }
@media (max-width: 900px) { .planner--full { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .planner--full { grid-template-columns: 1fr; } }
/* pravý sidebar (card s tyrkysovou hlavičkou) */
.sidecard { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sidecard-head { background: var(--brand); color: #fff; padding: 12px 16px; font-size: 1.1rem; font-weight: 700; }
.sidecard-body { padding: 14px 16px; }
.sidecard-body h3 { font-size: .95rem; margin: 12px 0 4px; color: var(--ink); }
.sidecard-body h3:first-child { margin-top: 0; }
.sidecard-body p { margin: 0 0 8px; font-size: .9rem; color: #495057; }
.sidecard-links { list-style: none; padding: 0; margin: 0 0 8px; }
.sidecard-links li { margin: 4px 0; }
.sidecard-links a { text-decoration: none; }
.sidecard-links a:hover { text-decoration: underline; }
/* ---- administrace ---- */
.admin-header { background: var(--brand-dark); color: #fff; }
.admin-header .wrap { display: flex; align-items: center; gap: 24px; height: 56px; }
.admin-brand { font-weight: 700; font-size: 1.1rem; }
.admin-header nav { display: flex; gap: 18px; margin-left: auto; }
.admin-header nav a { color: #cfeff4; text-decoration: none; font-size: .9rem; font-weight: 600; }
.admin-header nav a:hover { color: #fff; text-decoration: underline; }
.admin-main { padding-top: 20px; padding-bottom: 60px; }
/* admin menu s rozbalovacími podmenu (jako czechscout) */
.admin-nav { display: flex; gap: 4px; margin-left: auto; align-items: stretch; }
.admin-nav > a, .admin-menu-top { color: #cfeff4; text-decoration: none; font-size: .9rem;
font-weight: 600; padding: 0 12px; line-height: 56px; display: inline-block; cursor: default; }
.admin-nav > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.admin-menu { position: relative; }
.admin-menu:hover .admin-menu-top { color: #fff; background: rgba(255,255,255,.1); }
.admin-submenu { display: none; position: absolute; right: 0; top: 56px; background: #fff;
min-width: 220px; border: 1px solid var(--border); border-radius: 0 0 6px 6px; z-index: 20;
box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.admin-menu:hover .admin-submenu { display: block; }
.admin-submenu a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.admin-submenu a:hover { background: var(--row-alt); color: var(--brand-dark); }
/* FuelList tabulka (úzké vstupy cen) */
table.admin-fuel th, table.admin-fuel td { padding: 6px 8px; font-size: .8rem; white-space: nowrap; }
table.admin-fuel input { width: 62px; padding: 4px 6px; border: 1px solid var(--border);
border-radius: 4px; font: inherit; text-align: right; }
table.admin-fuel input:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--muted); }
.link-btn { background: none; border: none; color: var(--brand); font: inherit; font-weight: 600;
cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap; }
.link-btn:hover { color: var(--brand-dark); }
.admin-pick { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.admin-pick select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; min-width: 260px; }
table.admin-edit input { width: 110px; padding: 6px 8px; border: 1px solid var(--border);
border-radius: 5px; font: inherit; text-align: right; }
table.admin-edit input:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
/* ---- mapa v detailu stanice ---- */
.map { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 460px;
border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #eef2f4; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
/* ---- karta stanice na detailu (malá mapa vlevo + kontakt vpravo, jako originál) ---- */
.station-card { display: flex; align-items: stretch; flex-wrap: wrap;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
overflow: hidden; margin: 18px 0 8px; }
.station-card-map { flex: 0 0 34%; max-width: 34%; min-width: 220px; }
.station-card-map .map { width: 100%; height: 100%; aspect-ratio: unset; max-height: none;
border: none; border-radius: 0; }
.station-card-map .map-links { margin: 10px 20px; font-size: .9rem; }
.station-card-map > iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }
.station-card-info { flex: 1 1 60%; min-width: 280px; padding: 22px 26px; }
@media (max-width: 700px) {
.station-card-map { flex-basis: 100%; max-width: 100%; }
.station-card-map .map { aspect-ratio: 16 / 9; height: auto; min-height: 220px; }
.station-card-map > iframe { min-height: 220px; }
}
/* Detail stanice: H1 = jen značka, H2 = obec s odkazem na město (jako originál).
Pod tím dva sloupce — vlevo adresa a kontakt, vpravo akce. */
.station-card-info h1 { font-size: 1.6rem; margin: 2px 0 12px; }
.station-card-info h2 { font-size: 1.1rem; margin: 0 0 4px; font-weight: 400; }
.station-card-info h2 a { text-decoration: none; }
.station-card-info h2 a:hover { text-decoration: underline; }
.st-pump-h1 { display: inline-block; width: 20px; height: 22px; margin-right: 8px;
vertical-align: -3px; color: var(--brand);
background: currentColor;
-webkit-mask: var(--pump-mask) center / contain no-repeat;
mask: var(--pump-mask) center / contain no-repeat; }
.station-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.station-addr-col { font-size: .9rem; }
.station-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: .9rem; }
/* Ikony adresy/kontaktů drží společný sloupec vlevo (jako originál), proto i
adresní blok jede přes .station-line — první řádek nesmí mít horní mezeru
a ikona musí sedět na účaří H2, ne na jeho horní hraně. */
.station-addr-col > .station-line:first-child { margin-top: 0; }
.station-addr-col > .station-line:first-child > .ico { margin-top: 4px; }
.station-addr-col h2 { margin-top: 0; }
.station-links-col { display: flex; flex-direction: column; gap: 6px; }
.station-link { display: flex; align-items: center; gap: 8px; font-size: .9rem; text-decoration: none; }
.station-link:hover { text-decoration: underline; }
.station-hours { margin-top: 12px; }
@media (max-width: 640px) { .station-cols { grid-template-columns: 1fr; } }
/* jednoduché ikonky vedle údajů (bez ikonového fontu — jen barevná tečka-tvar) */
.ico { flex: none; width: 16px; height: 16px; background: var(--brand);
-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico-phone { -webkit-mask-image: var(--ico-phone); mask-image: var(--ico-phone); }
.ico-web { -webkit-mask-image: var(--ico-web); mask-image: var(--ico-web); }
.ico-mail { -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail); }
.ico-at { -webkit-mask-image: var(--ico-at); mask-image: var(--ico-at); }
.ico-map { -webkit-mask-image: var(--ico-map); mask-image: var(--ico-map); }
.ico-nav { -webkit-mask-image: var(--ico-nav); mask-image: var(--ico-nav); }
.ico-card { -webkit-mask-image: var(--ico-card); mask-image: var(--ico-card); }
.ico-warn { -webkit-mask-image: var(--ico-warn); mask-image: var(--ico-warn); }
.ico-info { -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info); }
.ico-pin { -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); }
.ico-search{ -webkit-mask-image: var(--ico-search);mask-image: var(--ico-search); }
.ico-stk { -webkit-mask-image: var(--ico-stk); mask-image: var(--ico-stk); flex: none; width: 22px; height: 22px; }
.ico-menu { -webkit-mask-image: var(--ico-menu); mask-image: var(--ico-menu); }
.ico-user { -webkit-mask-image: var(--ico-user); mask-image: var(--ico-user); }
.ico-back { -webkit-mask-image: var(--ico-back); mask-image: var(--ico-back); }
.ico-heart { -webkit-mask-image: var(--ico-heart); mask-image: var(--ico-heart); }
.ico-pump { -webkit-mask-image: var(--pump-mask); mask-image: var(--pump-mask); }
.ico-money { -webkit-mask-image: var(--ico-money); mask-image: var(--ico-money); }
/* Text jen pro odečítač obrazovky (ikonová tlačítka lišty appky). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ---- Čtyři cenové karty na detailu (Benzín/Nafta/LPG/CNG) ------------- */
.fuelcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0 8px; }
.fuelcard { border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
text-align: center; overflow: hidden; }
.fuelcard-head { border-bottom: 1px solid var(--border); padding: 10px 8px; }
.fuelcard-head h2 { margin: 0; font-size: 1rem; font-weight: 400; }
.fuelcard-body { padding: 14px 10px 16px; }
.fuelcard-cost { display: block; font-size: 1.9rem; color: var(--brand);
font-variant-numeric: tabular-nums; line-height: 1.1; }
.fuelcard-cost--na { color: #adb5bd; }
.fuelcard-age { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; min-height: 16px; }
.fuelcard .btn { margin-top: 12px; }
@media (max-width: 760px) { .fuelcards { grid-template-columns: repeat(2, 1fr); } }
/* ---- Modální okna (static/modal.js) ----------------------------------- */
.modal { display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0, 0, 0, .5); padding: 20px; overflow-y: auto; }
.modal.open { display: flex; align-items: flex-start; justify-content: center; }
body.modal-open { overflow: hidden; }
.modal-dialog { width: 100%; max-width: 520px; margin: 5vh auto; }
.modal-dialog.modal-sm { max-width: 340px; }
.modal-content { background: var(--bg); border-radius: 8px; overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.modal-header { display: flex; align-items: center; gap: 12px;
background: var(--brand); color: #fff; padding: 12px 16px; }
.modal-title { margin: 0; font-size: 1rem; font-weight: 600; flex: 1 1 auto; }
.modal-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1;
cursor: pointer; padding: 0 4px; }
.modal-body { padding: 16px; }
.modal-body--center { text-align: center; }
.modal-lead { margin: 0 0 10px; }
.modal-body label { display: block; font-size: .8rem; color: var(--muted);
margin: 10px 0 4px; text-align: left; }
.modal-input, .cost-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border);
border-radius: 6px; font: inherit; background: var(--bg); color: var(--ink); }
.modal-input:focus, .cost-input:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.cost-input { font-size: 1.8rem; text-align: center; font-variant-numeric: tabular-nums; }
.cost-steps { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.btn-group { display: inline-flex; gap: 4px; }
/* ---- Tlačítka -----------------------------------------------------------
JEDNA sada pro celý web, rozměry a barvy odměřené z originálu. Dřív tu byly
DVĚ definice `.btn` na různých místech a ta pozdější (`border: none`)
přebíjela `.btn-outline`, takže obrysová tlačítka měla bílý rámeček. */
.btn { display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
font: inherit; font-weight: 400; padding: .375rem .75rem; border-radius: .25rem;
border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.btn:hover { background: #008999; border-color: #008999; color: #fff; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary { background: var(--brand); border-color: #008999; color: #fff; }
.btn-primary:hover { background: #008999; color: #fff; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px;
padding: 12px 16px; border-top: 1px solid var(--border); }
@media (max-width: 520px) { .modal-grid { grid-template-columns: 1fr; } }
/* ---- Mapa cen (mapa.html) + mapy v sekcích (CNG) ---------------------- */
#map { height: 64vh; min-height: 400px; border: 1px solid var(--border); border-radius: 8px; }
.mapfilters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0; }
.fuelbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.fbtn { border: 1px solid var(--border); background: var(--bg); color: var(--ink);
border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.fbtn:hover { border-color: var(--brand); }
.fbtn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.ccschk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.maplegend { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.maplegend b.ccs { color: var(--brand); }
.map-fresh { color: #868e96; } /* datum čerstvosti v popupu mapy */
/* ---- Infobox (vysvětlivky pod výpisem, např. CNG) -------------------- */
.tile-unit { font-size: .6em; font-weight: 600; color: var(--muted); }
.infobox { background: var(--row-alt); border: 1px solid var(--border); border-radius: 10px;
padding: 8px 22px 18px; margin: 8px 0 24px; }
.infobox ul { padding-left: 20px; }
.infobox li { margin: 8px 0; }
/* ---- Reklamní slot (_ads.html) --------------------------------------- */
.adsbox { display: block; margin: 16px 0; }
/* Dokud AdSense review na doméně neschválí zobrazování (fuently.com od
30.7.2026 čeká), Google vrací data-ad-status="unfilled" a přesto si drží
rezervovaných ~280px prázdného místa na KAŽDÉM slotu — velké bílé díry po
celém webu. Zkolabování nevyplněných slotů je Google's vlastní doporučený
postup (ne obcházení politiky) — jakmile review projde a sloty se začnou
plnit, pravidlo se přestane uplatňovat samo (status už nebude "unfilled"). */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; margin: 0 !important; }
.adslot-ph { min-height: 90px; display: flex; align-items: center; justify-content: center;
background: #f2f5f7; border: 1px dashed #c3d0d6; border-radius: 6px; color: #90a4ae;
font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin: 16px 0; }
/* fixní rozměr u slotů, co originál neservíruje jako responsive „auto"
(sidebar = 300×600, „half page") — přes třídu, ne inline style (DESIGN.md §0). */
.adsbox--sidebar { display: inline-block; width: 300px; height: 600px; }
.adslot-ph--sidebar { width: 300px; height: 600px; max-width: 100%; margin: 16px auto; }
/* Původní /app na mobilu neměl desktopový leaderboard ani 300×600 sidebar;
mezi výsledky servíroval vlastní mobilní responsive jednotku. Náhled tuto
inventuru kopíruje, aniž by poslal jediný reklamní request. */
@media (max-width: 900px) {
.adslot-ph--desktop-only { display: none; }
}
/* sticky reklama v pravém sloupci — jako originál (sticky-top, jen desktop) */
@media (min-width: 901px) {
.ad-sticky { position: sticky; top: 12px; }
}
/* drobný odstup poznámky pod detailem stanice */
.note-gap { margin-top: 12px; }
/* ---- sitewide banner: aktuální dění (admin, base.html) ---- */
.sitenotice { background: var(--info-bg); border-bottom: 1px solid #bee5eb; }
.sitenotice .wrap { color: var(--info-ink); font-size: .9rem; font-weight: 600;
padding: 8px 16px; }
/* ---- proužek s cenami nahoře ---- */
.notice.pricebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.notice.pricebar b { color: var(--brand-dark); }
.notice.pricebar a { margin-left: auto; font-weight: 600; }
/* ---- magazín / články ---- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head h2 { flex: 1; }
.section-head a { font-weight: 600; white-space: nowrap; }
.magazine { margin-top: 8px; }
.mag-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chip { text-decoration: none; font-size: .8rem; font-weight: 600; color: var(--brand-dark);
background: #e9f6f8; border: 1px solid #bee5eb; border-radius: 999px; padding: 5px 12px; }
.chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.chip--on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Pruh s filtrem nad výpisem stanic (např. „Jen stanice s CCS"). */
.listfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 16px 0; font-size: .85rem; }
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.art-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px;
display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.art-card:hover { border-color: var(--brand-light); box-shadow: 0 2px 10px rgba(0,151,169,.08); }
.art-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-decoration: none; color: var(--ink); }
.art-title:hover { color: var(--brand); }
.art-perex { margin: 0; font-size: .9rem; color: #495057; line-height: 1.5; }
.art-meta { margin-top: auto; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
/* Patička jako na originále: tmavý blok se čtyřmi sloupci odkazů. Není to jen
vzhled — ty odkazy jsou na každé stránce a tvoří velkou část vnitřního
prolinkování (viz base.html). Dřív byla světlá a nesla jen sedm odkazů. */
.site-footer { border-top: 3px solid var(--brand); background: #343a40; margin-top: 44px; }
.site-footer .wrap { padding: 26px 20px; font-size: .9rem; color: #ced4da; }
.site-footer p { margin: 4px 0; }
/* globální .muted je šedá na světlé pozadí; na tmavé patičce by měla nečitelný
kontrast (~3,4:1), proto se tady zesvětluje */
.site-footer .muted { color: #adb5bd; }
.footcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px;
margin-bottom: 18px; }
.footcol { display: flex; flex-direction: column; gap: 4px; }
.footcol h3 { margin: 0 0 6px; font-size: .95rem; color: #fff; }
.footcol a { font-size: .8rem; color: #ced4da; text-decoration: none; }
.footcol a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .footcols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footcols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.site-header .wrap { height: 60px; }
.brand-name { font-size: 1.4rem; }
.mainnav .wrap { gap: 2px 18px; }
.mainnav a { padding: 11px 0; font-size: .8rem; }
h1 { font-size: 1.6rem; }
}
/* ================= TITULKA (homepage) — sekce „pro lidi" ================= */
/* Hero s vyhledáváním města */
.hero2 { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff; border-radius: 12px; padding: 34px 28px; margin: 4px 0 22px; }
.hero2 h1 { color: #fff; margin: 0 0 8px; font-size: 2rem; }
.hero2 .sub { color: #e6fbff; font-size: 1.1rem; margin: 0 0 18px; max-width: 62ch; }
.finder { display: flex; gap: 10px; flex-wrap: wrap; }
.finder input { flex: 1; min-width: 220px; padding: 13px 15px; border: none;
border-radius: 8px; font-size: 1rem; color: var(--ink); }
.finder button { background: #fff; color: var(--brand-dark); border: none; border-radius: 8px;
padding: 13px 24px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.finder button:hover { background: #e6fbff; }
/* Přehledové cenové dlaždice */
.pricegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin: 0 0 8px; }
.pcard { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--brand);
border-radius: 8px; padding: 16px 18px; }
.pcard .lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
color: var(--muted); font-weight: 600; }
.pcard .val { font-size: 1.6rem; font-weight: 800; color: var(--brand); margin-top: 4px; }
.pcard.cheap .val { color: #16a34a; }
/* „Jak mBenzin.cz funguje" — 4 bloky */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feature { background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 22px 18px; text-align: center; }
.feature .ico { color: var(--brand); margin-bottom: 10px; display: inline-flex; }
.feature h3 { font-size: 1rem; margin: 0 0 6px; color: var(--brand-dark); border: none; padding: 0; }
.feature p { font-size: .9rem; color: #495057; margin: 0; line-height: 1.5; }
/* Teaser karty (Evropa / STK / ČOI / Trasa) */
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.teaser { display: block; text-decoration: none; border: 1px solid var(--border);
border-radius: 10px; padding: 18px; background: var(--bg); color: var(--ink); }
.teaser:hover { border-color: var(--brand); box-shadow: 0 2px 12px rgba(0,151,169,.10); }
.teaser .t { font-weight: 700; color: var(--brand-dark); }
.teaser .d { font-size: .8rem; color: var(--muted); margin-top: 4px; }
/* ================= MOBILNÍ MENU (hamburger) ================= */
.navtoggle { display:none; background:none; border:0; cursor:pointer; padding:12px 0;
flex-direction:column; gap:5px; }
.navtoggle span { display:block; width:26px; height:2px; background:#343a40; transition:.2s; }
.navtoggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle.open span:nth-child(2){ opacity:0; }
.navtoggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Bez mezery mezi položkami — odstup dělá jejich vlastní padding, jako na
originále. S gapem se sedm položek nevešlo na řádek a pruh se zdvojil. */
.navlinks { display:flex; flex-wrap:wrap; flex:1; }
@media (max-width:760px){
.mainnav .wrap { display:flex; align-items:center; }
.navtoggle { display:flex; }
.navlinks { display:none; position:absolute; left:0; right:0; top:100%; z-index:50;
flex-direction:column; gap:0; background:var(--nav-bg);
border-bottom:1px solid var(--border); padding:4px 20px 12px; }
.navlinks.open { display:flex; }
.navlinks a { padding:13px 0; border-bottom:1px solid var(--border); width:100%; }
.mainnav { position:relative; }
}
/* mapa — tlačítko „najít mě" + ovládání na mobilu */
.locbtn { background:var(--brand); color:#fff; border:0; border-radius:6px;
padding:9px 14px; font-weight:600; font-size:.9rem; cursor:pointer;
display:inline-flex; align-items:center; gap:6px; }
.locbtn:hover { background:var(--brand-dark); }
@media (max-width:640px){
#map { height:62vh; }
.fbtn { padding:8px 11px; font-size:.8rem; }
}
/* ---- Našeptávač vyhledávání (search.js) ------------------------------- */
.ac-wrap { position: relative; flex: 1 1 220px; display: flex; }
.ac-wrap input { width: 100%; flex: 1 1 auto; }
.ac-box {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
background: #fff; border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,.14); max-height: 360px; overflow-y: auto; }
.ac-item {
display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
text-decoration: none; color: var(--ink); border-bottom: 1px solid #eef2f4; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: var(--brand-light); color: var(--brand-dark); }
.ac-label { font-weight: 600; }
.ac-sub { color: var(--muted); font-size: .85em; }
.ac-item:hover .ac-sub, .ac-item.ac-active .ac-sub { color: var(--brand-dark); }
.ac-type {
margin-left: auto; flex: none; font-size: .68em; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px;
border-radius: 999px; background: #eef4f5; color: var(--brand-dark); }
.ac-type.ac-station { background: #fff1e6; color: #a85; }
.ac-type.ac-chain { background: #eae6ff; color: #5b45c9; }
/* ---- Celostránkový vyhledávací pruh v hlavičce (base.html) ------------ */
.sitesearch { background: #f2fafb; border-bottom: 1px solid var(--border); }
.sitesearch .wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; }
.sitesearch .searchbar { flex: 1 1 300px; margin: 0; }
/* ---- účet v hlavičce ---- */
.header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.account-link { display: inline-flex; align-items: center; gap: 6px;
text-decoration: none; color: var(--brand-dark); font-weight: 600; font-size: .9rem;
border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
.account-link:hover { background: var(--row-alt); color: var(--brand-dark); }
.account-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.account-avatar[hidden], .account-icon[hidden] { display: none; }
/* ---- tlačítko instalace PWA (skryté, odkryje app-install.js na Androidu) ---- */
.pwa-install { display: inline-flex; align-items: center; gap: 6px;
border: 0; cursor: pointer; background: var(--brand); color: #fff; font-weight: 600;
font-size: .9rem; border-radius: 999px; padding: 8px 14px; font-family: inherit; }
.pwa-install:hover { background: var(--brand-dark); }
.pwa-install[hidden] { display: none; }
/* Na úzkých displejích schovej text, nech jen ikonu (šetří místo v hlavičce). */
@media (max-width: 460px) { .pwa-install span { display: none; } .pwa-install { padding: 8px; } }
/* ---- footer odkazy (další sekce, demotované z menu) ---- */
.footlinks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; }
.footlinks a { font-size: .9rem; font-weight: 600; text-decoration: none; }
/* ---- tlačítko oblíbených ---- */
.head-with-fav { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-with-fav h1 { margin-right: auto; }
.favform { margin: 4px 0; }
.favbtn { cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
background: var(--bg); color: var(--brand-dark); border: 1.5px solid var(--brand);
border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.favbtn:hover { background: var(--row-alt); }
.favbtn.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* ---- kontakt + akce stanice (detail čerpačky) ---- */
.station-contact { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 8px;
margin: 14px 0 20px; padding: 0; list-style: none; }
.contact-item { display: flex; align-items: center; gap: 7px;
font-size: .9rem; color: var(--ink); }
.contact-item svg { flex: none; color: var(--brand); }
a.contact-item, .station-contact a { color: var(--ink); text-decoration: none; }
a.contact-item:hover, .station-contact a:hover { color: var(--brand); text-decoration: underline; }
/* provozní doba — vlastní řádek, rozpis po dnech drží zalomení ze zdroje */
.station-hours { display: flex; align-items: flex-start; gap: 7px;
font-size: .9rem; color: var(--ink); margin: 0 0 18px; }
.station-hours svg { flex: none; color: var(--brand); margin-top: 3px; }
.hours-text { white-space: pre-line; }
.station-actions { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 6px; }
.favheart { font-size: 1rem; line-height: 1; }
/* ---- profil ---- */
.flash-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb;
border-radius: 8px; padding: 10px 14px; font-weight: 600; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0 40px; }
.profile-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.profile-card h2 { margin-top: 0; }
.profile-form { display: flex; flex-direction: column; gap: 14px; }
.profile-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .9rem; }
.profile-form input, .profile-form select { font: inherit; padding: 9px 11px; border: 1px solid var(--border);
border-radius: 8px; background: var(--bg); color: var(--ink); }
.fav-group { font-size: .95rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
margin: 18px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.favlist { list-style: none; padding: 0; margin: 0; }
.favrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--row-alt); }
.favrow-main { display: flex; flex-direction: column; }
.favrow-detail { font-size: .8rem; }
.linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: .9rem; text-decoration: underline; padding: 0; }
.linkbtn:hover { color: #c0392b; }
.profile-hint { margin-top: 18px; font-size: .8rem; }
.notif-unread { background: var(--row-alt); border-left: 3px solid var(--brand); padding-left: 10px; }
/* ---- přihlášení (OAuth Google/Facebook) ---- */
.flash-err { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7;
border-radius: 8px; padding: 10px 14px; font-weight: 600; }
.auth-bar { display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; background: var(--nav-bg); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 16px; margin: 4px 0 22px; }
.auth-ident { display: flex; align-items: center; gap: 12px; }
.auth-avatar { border-radius: 50%; object-fit: cover; }
.auth-who { display: flex; flex-direction: column; line-height: 1.3; }
.auth-who .muted { font-size: .8rem; }
.auth-box { max-width: 460px; margin: 22px 0 40px; }
.auth-providers { display: flex; flex-direction: column; gap: 12px; }
.btn-oauth { align-self: stretch; text-align: center; padding: 12px 18px; color: #fff; }
.btn-oauth-google { background: #4285f4; }
.btn-oauth-google:hover { background: #3367d6; color: #fff; }
.btn-oauth-facebook { background: #1877f2; }
.btn-oauth-facebook:hover { background: #145dbf; color: #fff; }
.auth-note { margin-top: 14px; font-size: .8rem; }
/* ---- danger zone (smazání účtu) ---- */
.danger-zone { border: 1px solid #f5c2c7; background: #fff5f5; border-radius: 12px;
padding: 18px 22px; margin: 8px 0 40px; }
.danger-zone h2 { margin-top: 0; color: #b02a37; border: none; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #a02318; }
/* ---- právní texty (ochrana soukromí, smazání údajů) ---- */
.legal { max-width: 78ch; }
.legal h2 { font-size: 1.2rem; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 6px 0; }
/* ---- myčky aut (sekce /Mycky) ---- */
.wfilters { display: flex; gap: 16px; flex-wrap: wrap; background: var(--nav-bg);
border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.wfilters label { font-size: .9rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.wfilters select { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--ink); min-width: 190px; }
.washlist { list-style: none; padding: 0; margin: 6px 0 40px; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wash { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.wash.is-featured { background: #fff9e8; border-color: #f0d16b; }
.wash-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.wash-head strong { flex-basis: 100%; font-size: 1.02rem; }
.wash-meta { font-size: .9rem; color: var(--muted); }
.wtag { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
background: #e6eef0; color: var(--brand-dark); }
.wtag-auto { background: #e9e2f6; color: #4b3a86; }
.wtag-fuel { background: #fdeecb; color: #7a5b00; }
.wtag-featured { background: #ffe9a8; color: #7a5b00; }
.wtag-real { background: #d7f0dd; color: #1c6b34; }
.wtag-guide { background: #eee7d3; color: #715a1a; }
.wash-prices { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.wash-prices > summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--brand-dark);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.wash-prices > summary::-webkit-details-marker { display: none; }
.wash-prices > summary::before { content: "›"; transition: transform .15s; color: var(--muted); }
.wash-prices[open] > summary::before { transform: rotate(90deg); }
.price-range { font-weight: 800; color: var(--brand); }
.wash-prices .pricetable { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: .9rem; }
.wash-prices .pricetable td { padding: 4px 0; border-bottom: 1px solid var(--row-alt); vertical-align: top; }
.wash-prices .pricetable td.price-val { text-align: right; white-space: nowrap; font-weight: 700; padding-left: 10px; }
.price-note { font-size: .8rem; margin: 4px 0 0; }
.wash-links { margin-top: 10px; display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.wfav { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: var(--bg);
color: var(--brand-dark); border: 1.5px solid var(--brand); border-radius: 999px; padding: 5px 13px;
font: inherit; font-size: .8rem; font-weight: 700; }
.wfav:hover { background: var(--row-alt); }
.wfav.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* ---- mezinárodní rozcestník (world.html, titulka fuently.com) ----
Výběr trhu, ne výpis stanic — proto vlastní komponenta a ne station_row.
Barvy jen z tokenů; „soon" je záměrně bez odkazu a ztlumené, ať je na první
pohled vidět, kde už data máme. */
.countrylist { list-style: none; padding: 0; margin: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.country-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
color: var(--ink); text-decoration: none; height: 100%; }
a.country-link:hover { border-color: var(--brand); background: var(--row-alt); }
.country--soon .country-link { background: var(--row-alt); color: var(--muted); }
.country-code { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .5px; }
.country--soon .country-code { background: var(--border); color: var(--muted); }
.country-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.country-name { font-weight: 700; font-size: 1.02rem; }
.country-en { font-weight: 400; color: var(--muted); }
.country-note { font-size: .9rem; color: var(--muted); }
.country-tag { margin-left: auto; flex: 0 0 auto; align-self: flex-start;
font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
background: #e6eef0; color: var(--brand-dark); white-space: nowrap; }
.country--soon .country-tag { background: var(--border); color: var(--muted); }
/* ---- intake: nahlásit stanici / navrhnout stanici ---- */
.report-box { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.report-box summary { cursor: pointer; font-weight: 700; color: var(--brand-dark);
display: inline-block; padding: 6px 0; }
.report-box summary:hover { color: var(--brand); }
.report-thanks { color: #1a8f5a; font-weight: 700; }
.report-form, .suggest-form { display: flex; flex-direction: column; gap: 12px;
max-width: 560px; margin-top: 12px; }
.report-form label, .suggest-form label { display: flex; flex-direction: column; gap: 5px;
font-size: .9rem; font-weight: 600; color: var(--ink); }
.report-form input, .report-form select, .report-form textarea,
.suggest-form input, .suggest-form textarea {
font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
font-weight: 400; }
.report-form input:focus, .report-form select:focus, .report-form textarea:focus,
.suggest-form input:focus, .suggest-form textarea:focus {
outline: 2px solid var(--brand-light); border-color: var(--brand); }
.report-form button, .suggest-form button { align-self: flex-start; }
.suggest-row { display: flex; gap: 12px; flex-wrap: wrap; }
.suggest-row label { flex: 1 1 200px; }
.notice-box { background: var(--info-bg); border-radius: 10px; padding: 16px 18px;
color: var(--info-ink); margin: 16px 0; }
/* ============================================================================
MOBILNÍ APPKA (.app-view) — samostatná kůže pro telefony
----------------------------------------------------------------------------
Předloha: mobilní verze živého mbenzin.cz (/app — fixní tyrkysová lišta,
šuplík s menu a hledáním, celoplošný výpis nejbližších stanic). Servíruje se
na TÉŽE URL jako desktop, jen v jiném rámci — viz app/mobile.py a
app_base.html; obsah stránky je shodný, mění se jen jeho obal a hustota.
Aplikační dojem stojí na třech věcech, ne na dekoraci:
1) fixní lišty nahoře i dole (navigace pod palcem, obsah mezi nimi roluje),
2) šedé plátno + bílé zaoblené karty bez hairline rámečků,
3) velké dotykové cíle — celý řádek stanice je klikatelný.
========================================================================== */
.app-view {
--appbar-h: 52px; /* horní lišta (bez safe-area) */
--apptabs-h: 56px; /* spodní lišta se záložkami */
--app-bg: #eef2f3; /* plátno pod kartami */
--app-shadow: 0 1px 3px rgba(16, 42, 50, .13);
background: var(--app-bg);
/* obsah nesmí zmizet pod fixními lištami (ani pod výřezem displeje) */
padding-top: calc(var(--appbar-h) + env(safe-area-inset-top));
padding-bottom: calc(var(--apptabs-h) + env(safe-area-inset-bottom));
-webkit-tap-highlight-color: rgba(0, 151, 169, .15);
}
/* otevřený šuplík / hledání = stránka pod ním se neroluje */
.app-view.app-menu-open, .app-view.app-search-open { overflow: hidden; }
/* ---- horní lišta ---------------------------------------------------------- */
.appbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
display: flex; align-items: center;
height: calc(var(--appbar-h) + env(safe-area-inset-top));
padding: env(safe-area-inset-top) 4px 0;
background: var(--brand); color: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.appbar-brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0;
margin-right: auto; padding: 0 6px; color: #fff; text-decoration: none; }
/* Bílá varianta loga (`logo-mbenzin-white.png`) — zdrojové logo je tyrkysové na
BÍLÉM podkladu BEZ průhlednosti, takže přebarvení filtrem z něj na liště
udělalo bílý obdélník. Proto samostatný soubor s alfou, ne filtr. */
.appbar-logo { display: block; height: 21px; width: auto; }
/* Cedule sekce — v původní appce hlavní vodítko „kde jsem". Dlouhý název
(jméno stanice) se zkrátí třemi tečkami, nikdy nezalomí lištu. */
.appbar-title { flex: 1 1 auto; min-width: 0; margin-right: auto; padding: 0 6px;
font-family: Raleway, "Open Sans", "Segoe UI", sans-serif; font-weight: 500;
font-size: 1.12rem; color: #fff; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.appbar-name { font-family: Raleway, "Open Sans", "Segoe UI", sans-serif;
font-weight: 700; font-size: 1.1rem; color: #fff; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.appbar-brand .ico { width: 22px; height: 22px; background: #fff; }
.appbar-btn { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
background: none; color: #fff; cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center; }
.appbar-btn:active { background: rgba(0, 0, 0, .18); }
.appbar-btn .ico { width: 22px; height: 22px; background: #fff; }
.appbar .account-avatar { width: 26px; height: 26px; border-radius: 50%; }
/* ---- spodní lišta se záložkami ------------------------------------------- */
.apptabs {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex;
background: #fff; border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -1px 8px rgba(16, 42, 50, .08);
}
.apptab { flex: 1 1 0; min-width: 0; height: var(--apptabs-h); padding: 0; border: 0;
background: none; cursor: pointer; text-decoration: none; color: var(--muted);
font: inherit; font-size: .68rem; line-height: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.apptab .ico { width: 22px; height: 22px; background: currentColor; }
.apptab.active, .apptab[aria-expanded="true"] { color: var(--brand); font-weight: 700; }
.apptab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- šuplík s menu -------------------------------------------------------- */
.appdrawer {
position: fixed; z-index: 70; top: 0; bottom: 0; right: 0; width: min(86vw, 330px);
display: flex; flex-direction: column; overflow-y: auto; background: #fff;
padding-top: env(safe-area-inset-top);
transform: translateX(100%); visibility: hidden;
/* visibility SKOKEM (0s), ne přechodem: zavřený šuplík nesmí zůstat čitelný
pro odečítač ani zachytávat doteky, ale animovaná visibility se v zamrzlé
(nevykreslované) záložce nedopočítá a šuplík by se neotevřel vůbec.
Při zavírání se skok odloží až za dojezd posunu. */
transition: transform .22s ease, visibility 0s linear .22s;
box-shadow: -2px 0 18px rgba(0, 0, 0, .25);
}
.app-menu-open .appdrawer { transform: none; visibility: visible;
transition: transform .22s ease, visibility 0s; }
.appdrawer-head { display: flex; align-items: center; justify-content: space-between;
height: var(--appbar-h); padding: 0 6px 0 18px; background: var(--brand); color: #fff;
font-family: Raleway, "Open Sans", "Segoe UI", sans-serif; font-weight: 700; }
.appdrawer-close { width: 40px; height: 40px; border: 0; background: none; color: #fff;
font-size: 1.7rem; line-height: 1; cursor: pointer; }
.appdrawer-links { display: flex; flex-direction: column; }
.appdrawer-links a { padding: 13px 18px; border-bottom: 1px solid #eef2f4;
color: var(--ink); text-decoration: none; font-size: .95rem; }
.appdrawer-links a:active { background: var(--row-alt); }
.appdrawer-links--extra { margin-top: 10px; }
.appdrawer-links--extra a { color: var(--brand-dark); }
.appdrawer-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start;
gap: 12px; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
.appdrawer-web { font-size: .85rem; font-weight: 600; }
.appscrim { position: fixed; inset: 0; z-index: 65; background: rgba(16, 42, 50, .45); border: 0; }
.appscrim[hidden] { display: none; }
/* ---- vyhledávací panel (záložka „Hledat") -------------------------------- */
.appsearch {
position: fixed; z-index: 68; left: 0; right: 0;
top: calc(var(--appbar-h) + env(safe-area-inset-top));
display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff;
box-shadow: 0 6px 14px rgba(16, 42, 50, .16);
transform: translateY(-130%); visibility: hidden;
transition: transform .2s ease, visibility 0s linear .2s; /* viz šuplík výš */
}
.app-search-open .appsearch { transform: none; visibility: visible;
transition: transform .2s ease, visibility 0s; }
.appsearch .mb-search { flex: 1 1 auto; margin: 0; box-shadow: none;
border: 1px solid var(--border); border-radius: 10px; }
.appsearch-close { flex: none; padding: 8px 2px; border: 0; background: none;
font: inherit; font-weight: 700; color: var(--brand-dark); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
.appdrawer, .appsearch { transition: none; }
}
/* ---- plátno a karty ------------------------------------------------------- */
.app-view main.wrap { max-width: none; padding: 10px 12px 24px; }
.app-view .layout { display: block; margin-top: 0; }
.app-view .sidecol { margin-top: 14px; }
/* Celoplošné pruhy (.section) jsou desktopová dekorace — na 375px z nich zbude
jen svislý odstup. Mapová textura se navíc netahá vůbec (šetří mobilní data). */
.app-view .section { width: auto; margin-left: 0; padding: 0 0 6px; border-bottom: 0; }
.app-view .section > .layout, .app-view .section > .wrap { max-width: none; padding: 0; }
/* Mapová textura za hledáním — appka originálu ji má taky (`.bg-map`). Vylomí
se z odsazení `main`, ať sahá od kraje ke kraji jako tam. */
.app-view .section--map { margin: -10px -12px 6px; padding: 12px; }
.app-view .card, .app-view .stationlist, .app-view .stationlist--card, .app-view .infobox,
.app-view .art-card, .app-view .teaser, .app-view .feature, .app-view .notice,
.app-view .notice-box, .app-view .alert, .app-view .adslot-ph, .app-view .sidecard {
border: 0; border-radius: 14px; box-shadow: var(--app-shadow); }
.app-view .card, .app-view .sidecard { overflow: hidden; margin-bottom: 14px; background: #fff; }
.app-view .card-header { padding: 12px 16px; }
.app-view .card-body { padding: 14px 16px; }
.app-view .card-foot { padding: 10px 16px; }
.app-view h1 { font-size: 1.45rem; }
.app-view h2 { font-size: 1.15rem; }
.app-view .card-header--brand h1 { font-size: 1.05rem; }
.app-view .crumbs { margin: 2px 0 8px; }
.app-view .sitenotice .wrap { padding: 8px 14px; }
/* Výběr výpisu = rozbalovací seznam přes celou šířku (jako originál), ne
záložky: na 375 px by se šest položek muselo rolovat do strany. */
.fueldrop { margin-bottom: 10px; background: #fff; border-radius: 12px;
box-shadow: var(--app-shadow); }
.fueldrop > summary { list-style: none; cursor: pointer; display: flex;
align-items: center; justify-content: space-between; padding: 13px 16px;
font-size: 1.1rem; color: var(--brand); }
.fueldrop > summary::-webkit-details-marker { display: none; }
.fueldrop > summary::after { content: "▾"; color: var(--muted); }
.fueldrop[open] > summary { border-bottom: 1px solid #eef2f4; }
.fueldrop-menu a { display: block; padding: 11px 16px; color: var(--ink);
text-decoration: none; font-size: 1.05rem; border-top: 1px solid #f3f7f8; }
.fueldrop-menu a:first-child { border-top: 0; }
.fueldrop-menu a.active { color: var(--brand); font-weight: 700; }
.fueldrop-menu h2 { margin: 0; font: inherit; }
.app-view .stationlist { border-radius: 0 0 14px 14px; background: #fff; }
.app-view .stationlist--card { border-radius: 14px; margin: 8px 0 16px; }
/* ---- řádek stanice: rozvržení 1:1 s appkou originálu ----------------------
Vlevo název, pod ním adresa a pod ní vzdálenost; vpravo dvě cenové kolonky
(Benzín / Nafta — kolik jich je, řídí `station_row`, viz DESIGN.md §5).
Mřížka, ne flex: vzdálenost musí být POD adresou ve stejném sloupci, i když
je v markupu sourozencem (a markup se kvůli mobilu nepřepisuje). */
.app-view .st-row { position: relative; display: grid; align-items: center;
grid-template-columns: 26px minmax(0, 1fr) auto;
grid-template-areas: "pump main prices" "pump meta prices";
gap: 0 9px; padding: 9px 12px; }
.app-view .st-pump { grid-area: pump; align-self: start; margin-top: 2px; }
.app-view .st-main { grid-area: main; }
.app-view .st-meta { grid-area: meta; }
.app-view .st-prices { grid-area: prices; }
/* `flex-basis: 0`, ne auto: s auto se za základ bere DÉLKA ADRESY, takže na
dlouhé adrese (Praha 3 - Žižkov, U Rajské Zahrady 114) odznak vzdálenosti
nevešel na řádek a spadl pod ni — řádek pak měřil skoro 200 px. */
/* Řezy odměřené z appky originálu: název 1.2rem/400, adresa 0.9rem šedá,
vzdálenost 0.8rem šedá pod ní, cena 1.2rem. */
.app-view .st-name { display: block; font-size: 1.15rem; line-height: 1.25; }
/* Adresa a odznak CCS na JEDNOM řádku — jinak řádek naroste o celou linku
navíc a výpis přestane sedět s originálem (ten má název / adresu / vzdálenost). */
.app-view .st-addr { display: inline; font-size: .85rem; line-height: 1.35; }
.app-view .st-ccs { margin: 0 0 0 6px; vertical-align: middle; }
/* Vzdálenost pod adresou, obyčejný šedý text (ne odznak) — jako originál. */
.app-view .st-meta { width: auto; min-width: 0; padding: 0; background: none;
flex-direction: row; align-items: center; gap: 3px; justify-content: flex-start; }
.app-view .st-meta:empty { display: none; }
.app-view .st-meta .ico { width: 12px; height: 12px; background: var(--muted); }
.app-view .st-km { font-size: .78rem; font-weight: 400; color: var(--muted); }
/* Ceny vpravo vedle názvu: dvě kolonky, popisek nad hodnotou, vystředěné. */
.app-view .st-prices { width: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
/* Ceny musí stát na jedné lince i tam, kde se popisek zalomí na dva řádky
(STK: „Emise (benzín)") — jinak čísla ve sloupcích poskakují nahoru dolů. */
.app-view .st-price { display: flex; flex-direction: column; justify-content: center;
min-width: 52px; padding: 0 3px; }
.app-view .st-price .lbl { font-size: .68rem; line-height: 1.25; }
.app-view .st-price .val { font-size: 1.15rem; }
.app-view .st-price-wide { min-width: 78px; }
/* Výpisy se širším ceníkem (STK: čtyři kolonky) — pruh pod názvem přes celou
šířku, jinak by se čísla slepila na 375 px. */
.app-view .st-row--wide { grid-template-columns: 26px minmax(0, 1fr);
grid-template-areas: "pump main" "pump meta" "prices prices"; }
.app-view .st-row--wide .st-prices { width: 100%; margin-top: 5px;
padding-top: 5px; border-top: 1px solid #eef2f4; }
.app-view .st-row--wide .st-price { min-width: 0; }
/* Celý řádek je dotykový cíl (jako v appce): odkaz na názvu se roztáhne přes
něj. Ostatní odkazy v řádku musí zůstat NAD ním, jinak by přestaly jít kliknout. */
.app-view .st-row .st-name::after { content: ""; position: absolute; inset: 0; }
.app-view .st-map, .app-view .st-ccs, .app-view .favform { position: relative; z-index: 1; }
/* Reklama MEZI řádky výpisu (jako v appce originálu) — musí sedět v proudu
řádků, ne se tvářit jako další karta. */
.app-view .stationlist > .ad-mount, .app-view .stationlist > .adsbygoogle,
.app-view .stationlist > .adslot-ph {
display: block; margin: 0; padding: 10px 12px; border-radius: 0;
border-top: 1px solid #eef2f4; border-bottom: 1px solid #eef2f4;
box-shadow: none; background: #fbfdfd; }
/* ---- pruh akcí na detailu stanice (jen appka) -----------------------------
Čtyři palcové cíle hned pod lištou, jako v mobilní appce originálu:
Ceny · Navigovat · Doplnit · Nahlásit. Vykresluje ho station.html pod
`app_view`; na desktopu tenhle blok vůbec není. */
.appactions { display: flex; margin: 0 0 12px; background: #fff; border-radius: 14px;
box-shadow: var(--app-shadow); overflow: hidden; }
.appactions a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 5px; padding: 11px 4px;
color: var(--brand); text-decoration: none; font-size: .72rem; text-align: center; }
.appactions a + a { border-left: 1px solid #eef2f4; }
.appactions a:active { background: var(--row-alt); }
.appactions .ico { width: 21px; height: 21px; background: currentColor; }
/* Rozbalovací sekce (hlídání ceny, ceník myčky…) musí na dotek vypadat jako
tlačítko, ne jako tučný nadpis — jinak na ně nikdo neklikne. */
.app-view .report-box { margin-top: 16px; padding-top: 0; border-top: 0; }
.app-view .report-box summary { display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 13px 16px; background: #fff; border-radius: 12px;
box-shadow: var(--app-shadow); }
.app-view .report-box summary::after { content: "›"; font-size: 1.4rem; line-height: 1;
color: var(--muted); transform: rotate(90deg); }
.app-view .report-box details[open] summary { border-radius: 12px 12px 0 0; }
/* ---- ostatní komponenty v mobilní hustotě -------------------------------- */
.app-view .magnav { margin: 0 0 12px; padding: 0; background: none; border: 0; }
.app-view .magnav .wrap { min-height: 0; padding: 0; gap: 8px; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; }
.app-view .magnav .wrap::-webkit-scrollbar { display: none; }
.app-view .magnav a { white-space: nowrap; padding: 8px 14px; font-size: .72rem;
background: #fff; border-radius: 999px; box-shadow: var(--app-shadow); }
.app-view .mb-search { border-radius: 12px; box-shadow: var(--app-shadow); }
.app-view .tiles { gap: 10px; }
.app-view .tile { flex: 1 1 44%; min-width: 0; border-radius: 12px; }
.app-view .pricegrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.app-view .city-links, .app-view .topic-links { grid-template-columns: repeat(2, 1fr); }
/* Široká tabulka se na 375px nezalomí — ať radši roluje sama v sobě, než aby
roztáhla celou stránku (vodorovné rolování stránky = rozbitá appka). */
.app-view table.prices { display: block; overflow-x: auto; white-space: nowrap; }
.app-view #map { height: 64vh; border-radius: 12px; }
.app-view .adslot-ph { margin: 12px 0; }
/* ---- patička: v appce jen přepínač zobrazení (rozcestník je v šuplíku) ---- */
.app-view .site-footer { margin-top: 14px; }
.app-view .site-footer .wrap { padding: 14px 16px; text-align: center; }
.app-view .site-footer .viewswitch { margin: 0; }
/* Drobečky nahrazuje šipka zpět + název sekce v liště (jako v appce originálu). */
.app-view .crumbs { display: none; }
.viewswitch { margin-top: 16px; }
.viewswitch a { font-size: .85rem; font-weight: 600; color: #ced4da; text-decoration: underline; }
.viewswitch a:hover { color: #fff; }