/* 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,');
/* 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,');
}
* { 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;
}
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) {
.mb-search { flex-wrap: wrap; }
.mb-search-input { flex-basis: calc(100% - 120px); }
.mb-search-chain { 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); }
}
/* ---- 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; }
.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; }
@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 { width: 100%; padding: 9px 12px; border: 1px solid var(--border);
border-radius: 6px; font: inherit; }
@media (max-width: 640px) { .planner { 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; }
.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-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; }
/* ---- Č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; }
.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; }
/* 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); }
/* ---- 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); }
/* ---- 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; }