/* DokTime – style.css v4 – Doctolib-inspired, green */
:root {
  --green:     #1D9E75;
  --green-dk:  #0F6E56;
  --green-lt:  #E1F5EE;
  --green-mid: #9FE1CB;
  --blue:      #1a6faa;
  --blue-dk:   #145683;
  --blue-lt:   #e8f4fd;
  --white:     #FFFFFF;
  --bg:        #f5f8f7;
  --border:    #dce8e3;
  --text:      #1a2e26;
  --muted:     #5a7a6e;
  --subtle:    #9ab5ac;
  --shadow:    0 2px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.13);
  --r:   14px;
  --rsm: 8px;
  --rpill: 100px;
  --font: system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:  1160px;
  --tr:   .15s ease;
  /* CH-7 (finální schválený redesign karet výsledků): krémová paleta jen
     pro výsledkovou sekci a karty, ne globální --bg — hero/ebar/quick-tiles
     apod. zůstávají beze změny, ať se zásah drží přesně schváleného rozsahu. */
  --cream-bg:     #fdfbf6;
  --cream-border: #e8e2d0;
  --cream-border-soft: #d8d2bd;
  --cream-chip:   #f1efe8;
  --cream-text-muted: #8a8470;
  --blue-btn-lt:  #e6f1fb;
  --blue-btn-dk:  #185fa5;
  --web-btn-lt:   #f5f2e8;
  --web-btn-dk:   #8a7550;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
select,input{font-family:var(--font);font-size:inherit}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.25}

/* ── HEADER ── */
.header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.05)}
.header__inner{max-width:var(--max);margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.logo:hover{text-decoration:none}
.logo__icon{width:26px;height:26px;flex-shrink:0}
.logo__text{font-size:20px;font-weight:400;letter-spacing:-.2px}
.logo__text strong{font-weight:700;color:var(--green)}
.nav{display:flex;align-items:center;gap:22px}
.nav__link{font-size:13px;color:var(--muted);transition:color var(--tr)}
.nav__link:hover{color:var(--green);text-decoration:none}
.lang-switch{display:flex;gap:4px}
.lang-btn{font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px;color:var(--muted);transition:all var(--tr)}
.lang-btn--active{background:var(--green-lt);color:var(--green-dk)}
.lang-btn:hover{color:var(--green);text-decoration:none}

/* ── HERO ── */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, #0d5c47 0%, #1D9E75 60%, #25b882 100%);
  padding:60px 28px 64px;
  text-align:center;
}

/* Blob dekorace / Blob decorations */
.hero__blob{position:absolute;border-radius:50% 40% 60% 50% / 40% 60% 50% 60%;pointer-events:none;opacity:.08;background:#fff}
.hero__blob--1{width:520px;height:420px;top:-120px;right:-80px;transform:rotate(-20deg)}
.hero__blob--2{width:340px;height:280px;bottom:-80px;left:-60px;transform:rotate(15deg)}

.hero__center{position:relative;z-index:1;max-width:820px;margin:0 auto}

/* Eyebrow */
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.75);margin-bottom:18px}
.hero__dot{width:7px;height:7px;background:var(--green-mid);border-radius:50%;flex-shrink:0}

.hero__title{font-size:clamp(28px,4vw,46px);font-weight:700;color:#fff;letter-spacing:-.5px;margin-bottom:10px}
.hero__subtitle{font-size:17px;color:rgba(255,255,255,.82);margin-bottom:32px;line-height:1.6}

/* ── SEARCH BAR ── Doctolib-style rounded pill ── */
.search-bar{
  background:#fff;
  border-radius:var(--rpill);
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:stretch;
  padding:6px 6px 6px 0;
  max-width:780px;
  margin:0 auto 24px;
  gap:0;
}
.search-bar__field{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  cursor:pointer;
  transition:background var(--tr);
  border-radius:var(--rpill);
  min-width:0;
}
.search-bar__field:hover{background:rgba(0,0,0,.03)}
.search-bar__gps-row{display:contents} /* desktop: chová se jako by wrapper neexistoval */
.search-bar__icon{color:var(--muted);flex-shrink:0;display:flex;align-items:center}
.search-bar__wrap{display:flex;flex-direction:column;flex:1;min-width:0}
.search-bar__label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.search-bar__select-wrap{position:relative;display:flex;align-items:center}
.search-bar__select{
  border:none;
  outline:none;
  background:transparent;
  font-size:15px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  padding-left:4px;
  padding-right:20px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.search-bar__select option{color:var(--text);background:#fff}

/* F1 (2026-07-12): živé vyhledávání oboru/výkonu — dropdown návrhů */
.svc-ac-dropdown{
  position:absolute; top:100%; left:0; right:-40px; margin-top:4px;
  background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.15);
  max-height:320px; overflow-y:auto; z-index:60; padding:6px;
}
.svc-ac-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text);
}
.svc-ac-item:hover{background:var(--bg,#f4f5f0)}
.svc-ac-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--bg,#f4f5f0);border-radius:6px;padding:2px 6px;flex-shrink:0}
/* Šipka dolů / Down arrow */
.search-bar__arrow{
  position:absolute;
  right:0;
  font-size:14px;
  color:var(--green);
  pointer-events:none;
  font-style:normal;
  line-height:1;
}
.search-bar__sep{width:1px;background:var(--border);align-self:stretch;margin:8px 0;flex-shrink:0}
.search-bar__btn{
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:var(--rpill);
  padding:14px 28px;
  font-size:15px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  transition:all var(--tr);
  flex-shrink:0;
  white-space:nowrap;
  margin:0 4px 0 6px;
}
.search-bar__btn:hover{background:var(--green-dk);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,110,86,.3)}

/* ── QUICK TILES ── */
.quick-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-bottom:20px}
.quick-tiles__hint{font-size:13px;color:rgba(255,255,255,.65);margin-right:4px;white-space:nowrap}
.qtile{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--rpill);
  padding:6px 18px 6px 6px;
  font-size:13px;
  color:#fff;
  font-weight:500;
  transition:all var(--tr);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:125px;
  box-sizing:border-box;
}
/* CH-13: finální schválená verze (Figma "Varianta 3 bez rámečku") — žádný
   kruhový badge vůbec, ikona je volně na zeleném pozadí pilulky. Předchozí
   "jemný poloprůhledný kruh" byl mezikrok, co se do skutečného kódu nikdy
   nedostal (zůstal jen ve Figma mockupu) — tohle je ta oprava. */
.qtile__badge{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.qtile__icon{color:inherit}
/* Tlustší linework (blíž Lucide/Tabler bold) — přebíjí stroke-width
   jednotlivých tvarů uvnitř SVG jednotnou hodnotou přes CSS, ať nemusíme
   ručně upravovat všech 16 sad cest. */
.qtile__icon path,.qtile__icon line,.qtile__icon circle{stroke-width:1.9}
.qtile:hover,.qtile.is-active{background:#fff;color:var(--green-dk);border-color:#fff;font-weight:600}
.qtile--more{background:transparent;border-style:dashed;opacity:.7}
.qtile--more:hover{background:rgba(255,255,255,.1);opacity:1}


/* Ujištění / Trust row */
.hero__trust{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:4px}
.hero__trust-item{font-size:13px;color:rgba(255,255,255,.75)}
.hero__trust-sep{color:rgba(255,255,255,.3)}

/* ── ALSO SEARCH ── */
.also-search{background:var(--white);border-bottom:1px solid var(--border);padding:12px 0}
.also-search__inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.also-search__label{font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0;font-weight:500}
.atag{background:var(--bg);border:1px solid var(--border);border-radius:var(--rpill);padding:5px 14px;font-size:13px;color:var(--muted);transition:all var(--tr)}
.atag:hover{border-color:var(--green);color:var(--green);background:var(--green-lt)}

/* ── RESULTS ── */
.results{padding:44px 0}
.results__inner{max-width:var(--max);margin:0 auto;padding:0 28px}
.results__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px}
.results__title{font-size:20px;font-weight:700}
.results__count{font-size:14px;font-weight:400;color:var(--subtle);margin-left:6px}
.results__sub{font-size:13px;color:var(--subtle);margin-top:2px}

/* Provider card */
.provider-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:8px;transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);cursor:pointer}
.provider-card:hover{border-color:var(--green);box-shadow:0 3px 18px rgba(29,158,117,.12);transform:translateY(-1px)}
.provider-card__icon{width:50px;height:50px;border-radius:12px;background:var(--green-lt);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--green);font-weight:700;flex-shrink:0}
.provider-card__icon--img{background:#fff;object-fit:contain;padding:4px;box-sizing:border-box}
/* FD-CARD: vlastní nahraná fotka instituce — velký čtverec BEZ rámečku,
   definuje minimální výšku celé karty (viz uživatelský požadavek). */
.provider-card__photo{width:112px;height:112px;border-radius:12px;object-fit:cover;flex-shrink:0}
.provider-card__info{flex:1;min-width:0}
/* BUGFIX (2026-08-14): dřív nowrap+ellipsis (jednořádkové zkrácení) — u
   dlouhých názvů institucí ("PLASTICKÁ CHIRURGIE - MUDr. M. Šamudovský,
   s.r.o.") text přetékal přes pravý okraj karty, hlavně na mobilu, kde se
   .provider-card přepíná na flex-direction:column (viz media query níž) a
   min-width:0 na .provider-card__info tam funguje jinak (hlavní osa je
   výška, ne šířka). Skutečné zalamování je robustní v obou layoutech —
   text nikdy nepřeteče vodorovně, jen zabere víc řádků. */
.provider-card__name{font-size:15px;font-weight:600;white-space:normal;overflow-wrap:break-word;word-break:break-word}
.provider-card__location{font-size:12px;color:var(--muted);margin:2px 0 6px}
.provider-card__tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;background:var(--green-lt);color:var(--green-dk);padding:2px 8px;border-radius:var(--rpill)}
.tag--gray{background:#F1EFE8;color:#5F5E5A}
.provider-card__wait{text-align:right;flex-shrink:0;min-width:120px}
.wait-label-txt{font-size:11px;color:var(--subtle);margin-bottom:4px}
.wait-votes{font-size:11px;color:var(--subtle);margin-top:4px}
.provider-card__btn{background:var(--white);border:1px solid var(--green);color:var(--green);padding:8px 16px;border-radius:var(--rsm);font-size:12px;font-weight:600;transition:all var(--tr);flex-shrink:0}
.provider-card__btn:hover{background:var(--green);color:#fff}
.results__note{text-align:center;font-size:11px;color:var(--subtle);margin-top:16px}
/* CH-9: stránkování výsledků */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:20px;margin-bottom:36px;flex-wrap:wrap}
.pagination__btn{min-width:32px;height:32px;padding:0 8px;border-radius:var(--rsm);border:0.5px solid var(--cream-border);background:#fff;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.pagination__btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.pagination__btn.is-active{background:var(--green-dk);border-color:var(--green-dk);color:#fff}
.pagination__btn:disabled{opacity:.35;cursor:not-allowed}
.pagination__ellipsis{color:var(--subtle);font-size:13px;padding:0 4px}
.results__note a{color:var(--green)}

/* Wait badges */
.wait-badge{display:inline-block;padding:5px 12px;border-radius:var(--rpill);font-size:13px;font-weight:600;white-space:nowrap}
.wait-badge--good{background:#E1F5EE;color:#0F6E56}
.wait-badge--ok{background:#FEF3C7;color:#92400E}
.wait-badge--long{background:#FEE2E2;color:#991B1B}
.wait-badge--unknown{background:#F1EFE8;color:#5F5E5A}

/* States */
.state-msg{text-align:center;padding:48px 0;color:var(--muted)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
/* CH-8: skeleton loading karet místo rotujícího spinneru — opticky rychlejší
   a klidnější dojem při načítání výsledků. */
.state-msg--skeleton{padding:0;text-align:left}
.skeleton-card{height:78px;border-radius:var(--r);background:linear-gradient(90deg,var(--cream-chip) 25%,#fff 50%,var(--cream-chip) 75%);background-size:200% 100%;animation:skeleton-pulse 1.4s ease-in-out infinite;margin-bottom:8px;border:0.5px solid var(--cream-border)}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
.state-msg__icon{font-size:36px;margin-bottom:10px}
.state-msg__icon-svg{color:var(--cream-border-soft);margin-bottom:10px}
.state-msg__title{font-weight:600;font-size:16px}
.state-msg__sub{font-size:13px;margin-top:6px}

/* ── EXPERIENCE FORM ── */
.experience{padding:68px 0;background:var(--white);border-top:1px solid var(--border)}
.experience__inner{max-width:680px;margin:0 auto;padding:0 28px}
/* CH-15: sekce teď zabírá STEJNOU šířku jako řádek "Lidé také hledají"
   (var(--max), stejné jako .homepage-bridge__inner) — Novinky začínají
   přesně pod "Lidé také hledají", formulář končí přesně pod poslední
   dlaždicí ("Rehabilitace"). Oba sloupce 1fr = stejná šířka.
   KROK 2026-09-04 (3. kolo): flex → CSS Grid + subgrid řádky. Uvnitř
   obou sloupců je teď stejná posloupnost 4 bloků (header/obsah/nadpis
   videa/video) — subgrid řádky zarovnají KAŽDÝ z těchto bloků na
   stejnou výšku napříč oběma sloupci, bez ohledu na to, že seznam
   novinek vlevo má jinou (proměnlivou, podle RSS feedu) výšku než
   formulář vpravo. Flexbox tohle neumí bez JS měření výšek — subgrid
   je nativní, přesně k tomuto určený nástroj (nahlásil uživatel
   screenshotem — nadpisy nad videi nebyly na stejném řádku). */
.experience__inner--split{
  max-width:var(--max);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto;
  column-gap:32px;
}
.experience__form-col{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0}
.experience__news-col-wrap{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0}
.experience__news-col{
  background:var(--cream-bg,#fdfbf6);
  border:0.5px solid var(--cream-border,#e8e2d0);
  border-radius:var(--r);
  padding:20px;
}
.news-panel__list{display:flex;flex-direction:column;gap:12px}
.news-panel__loading{font-size:12px;color:var(--subtle)}
.news-panel__item{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;padding-top:0;border-bottom:0.5px solid var(--cream-border,#e8e2d0)}
/* CH-16: barevné odlišení podle zdroje — "naše" zprávy (recenze, nová
   instituce) dostávají jemné zelené podbarvení jen na TÉ konkrétní položce,
   ne na celém panelu; externí zprávy (SÚKL/MZČR) zůstávají neutrální na
   krémovém pozadí panelu, ať je hned jasné, co je "o nás" a co ne. */
.news-panel__item--ours{background:var(--green-lt);border-radius:8px;padding:10px;margin:-2px -10px 10px;border-bottom:none}
.news-panel__item--ours:last-child{margin-bottom:-2px}
.news-panel__item--external{padding-top:10px}
.news-panel__item:last-child{border-bottom:none;padding-bottom:0}
.news-panel__item a{font-size:15px;font-weight:600;color:var(--text);text-decoration:none;line-height:1.4}
.news-panel__item a:hover{color:var(--green-dk);text-decoration:underline}
.news-panel__item-meta{font-size:11px;color:var(--subtle)}
.news-panel__empty{font-size:12px;color:var(--subtle);font-style:italic}
@media(max-width:760px){
  /* Na mobilu jsou oba sloupce stackované pod sebou (1 sloupec) — subgrid
     řádky rodiče by tu způsobily, že se oba bloky snaží zabrat STEJNÉ 4
     řádky (překryv). Vypnuto zpět na normální, nezávislé auto-výšky.
     KROK 2026-09-04: column-gap řeší jen mezeru MEZI sloupci vedle sebe
     (desktop) — když se na mobilu sloupce stacknou pod sebe, žádná
     mezera mezi nimi automaticky nevznikne, druhý nadpis ("Byli jste
     nedávno...") byl nalepený přímo na box novinek nad ním (nahlásil
     uživatel). row-gap přidává svislou mezeru mezi stacknutými bloky. */
  .experience__inner--split{grid-template-columns:1fr;grid-template-rows:none;row-gap:40px}
  .experience__form-col,.experience__news-col-wrap{grid-template-rows:none;grid-row:auto;width:100%}
}

/* KROK 2026-09-04: video náhledy (homepage sekce Novinky/Recenze) —
   tenký tmavě modrý rámeček z existující palety (--blue-dk, stejná
   barva jako hover na .od-room v detailu ordinace), hover = jemné
   "nadzvednutí" se stínem. Klik otevře video v lightboxu (viz main.js
   initVideoTeasers()) — do té doby se ze souboru nenačte ani bajt
   (žádný <video preload>, jen statický JPG náhled). */
.video-teaser{position:relative;cursor:pointer;border-radius:var(--r);overflow:hidden;
  border:1.5px solid var(--blue-dk);margin-bottom:20px;aspect-ratio:16/9;
  transition:transform .2s ease,box-shadow .2s ease}
.video-teaser:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(20,86,131,.28)}
.video-teaser img{width:100%;height:100%;object-fit:cover;display:block}
.video-teaser__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;background:rgba(255,255,255,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--blue-dk);
  padding-left:3px;transition:background .15s,transform .15s}
.video-teaser:hover .video-teaser__play{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
/* KROK 2026-09-04 (2. kolo): nadpis nad videem, vlastní — odlišný od
   .section-title (ten patří k hlavnímu nadpisu sloupce nahoře), menší
   a klidnější, ať video působí jako doplněk sekce, ne jako nová sekce. */
.video-teaser__title{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.3px;text-align:center;margin:28px 0 14px}

/* KROK 2026-09-04 (4. kolo): produktové rozhodnutí — na mobilu žádná
   videa vůbec. .video-teaser--desktop-only teď skrývá jak samotná
   videa, tak jejich nadpisy (viz index.html — h3.video-teaser__title
   má tuhle třídu navíc). Dřívější samostatný mobilní blok
   (.video-teaser--mobile-only, reels-16x9) byl z HTML úplně smazán,
   ne jen skrytý — tahle třída/pravidlo tím padla, žádný element ji
   už nepoužívá. */
@media(max-width:760px){
  .video-teaser--desktop-only{display:none}
}

/* Lightbox — jednoduchý overlay přes celou obrazovku, žádná závislost
   na frameworku. Zavření: křížek, klik mimo video, nebo Esc (viz JS). */
.video-lightbox{position:fixed;inset:0;background:rgba(10,20,18,.88);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:24px}
.video-lightbox__inner{position:relative;max-width:min(920px,92vw);width:100%}
.video-lightbox__inner video{width:100%;max-height:86vh;border-radius:12px;display:block;background:#000}
.video-lightbox__close{position:absolute;top:-40px;right:0;background:none;border:none;
  color:#fff;font-size:22px;cursor:pointer;padding:6px;line-height:1;opacity:.85}
.video-lightbox__close:hover{opacity:1}
@media(max-width:760px){
  .video-lightbox__close{top:-36px}
}

.experience__header{text-align:center;margin-bottom:32px}
.experience__sub{font-size:15px;color:var(--muted);margin-top:10px}
.section-title{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.3px}
/* CH-21: nadpis "Novinky a užitečné informace" je teď odkaz na /novinky —
   zachovává vzhled nadpisu (žádné podtržení/modrá), jen jemný hover
   náznak, že je klikatelný. */
.news-title-link{color:inherit;text-decoration:none;transition:color var(--tr)}
.news-title-link:hover{color:var(--green-dk);text-decoration:none}
.section-title--white{color:#fff}
.exp-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:28px}
.exp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.form-label{font-size:13px;font-weight:600;color:var(--muted)}
/* Wrapper for select with arrow */
.form-select-wrap{position:relative;display:flex;align-items:center}
.form-arrow{position:absolute;right:12px;font-size:13px;color:var(--green);pointer-events:none}
.form-input{background:var(--white);border:1px solid var(--border);border-radius:var(--rsm);padding:10px 14px;font-size:14px;color:var(--text);outline:none;transition:border-color var(--tr);-webkit-appearance:none;appearance:none;width:100%}
.form-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,.1)}
select.form-input{padding-right:36px}
.wait-options{display:flex;flex-wrap:wrap;gap:8px}
.wait-btn{background:var(--white);border:1px solid var(--border);border-radius:var(--rpill);padding:7px 14px;font-size:13px;color:var(--muted);transition:all var(--tr)}
.wait-btn:hover{border-color:var(--green);color:var(--green)}
.wait-btn.is-selected{background:var(--green-lt);border-color:var(--green);color:var(--green-dk);font-weight:600}
.exp-form__footer{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.form-note{font-size:12px;color:var(--subtle)}
.form-message{padding:12px 16px;border-radius:var(--rsm);font-size:14px;margin-top:16px}
.form-message--success{background:var(--green-lt);color:var(--green-dk);border:1px solid var(--green-mid)}
.form-message--error{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}

/* ── HOSPITALS ── */
.hospitals{background:linear-gradient(135deg,#0F6E56 0%,#1D9E75 100%);padding:60px 0}
.hospitals__inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.hospitals__text p{color:rgba(255,255,255,.85);font-size:15px;margin-top:12px;line-height:1.7}
.hospitals__benefits{list-style:none;display:flex;flex-direction:column;gap:12px}
.hospitals__benefits li{color:rgba(255,255,255,.9);font-size:15px;padding-left:24px;position:relative}
.hospitals__benefits li::before{content:"✓";position:absolute;left:0;color:var(--green-mid);font-weight:700}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;padding:10px 20px;border-radius:var(--rsm);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.btn:hover{text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--green);color:#fff;border:none}
.btn--primary:hover{background:var(--green-dk)}
.btn--outline{background:transparent;border:1.5px solid var(--green);color:var(--green)}
.btn--outline:hover{background:var(--green);color:#fff}
.btn--white{background:#F5E9D9;color:#5a4326;border:1.5px solid #E3CBA5;margin-top:20px}
.btn--white:hover{background:#EDD9BC}
.btn--sm{padding:7px 14px;font-size:13px}
.btn--lg{padding:14px 28px;font-size:15px}

/* ── FOOTER ── */
.footer{background:#1A2E26;color:rgba(255,255,255,.7);padding:36px 0}
.footer__inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center}
.footer .logo__text{color:#fff}
.footer .logo__text strong{color:var(--green-mid)}
.footer__tagline{font-size:12px;opacity:.5;margin-top:4px}
.footer__links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.footer__links a{font-size:13px;color:rgba(255,255,255,.6)}
.footer__links a:hover{color:#fff;text-decoration:none}
.footer__note{font-size:11px;text-align:right;opacity:.45;line-height:1.7}

/* ── RESPONSIVE ── */
@media(max-width:780px){
  .search-bar{border-radius:16px;flex-direction:column;padding:8px}
  .search-bar__field{border-radius:10px}
  .search-bar__sep{width:100%;height:1px;margin:0}
  .search-bar__btn{border-radius:10px;width:calc(100% - 8px);margin:4px;justify-content:center;padding:14px}
  .hero{padding:40px 20px 48px}
  .also-search__inner,.results__inner,.experience__inner,.hospitals__inner{padding:0 16px}
  .hospitals__inner{grid-template-columns:1fr;gap:28px}
  .exp-form__row{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;text-align:center;gap:16px}
  .footer__note{text-align:center}
}
@media(max-width:540px){
  .nav{display:none}
  .provider-card{flex-wrap:wrap}
  .provider-card__wait{text-align:left}
  .provider-card__btn{width:100%;text-align:center;justify-content:center}
}

/* ── HEADER PŘIDANÉ STYLY / HEADER ADDED STYLES ── */

/* Nápověda / Help button */
.nav__help {
  display:flex;align-items:center;gap:5px;
  font-size:13px;color:var(--muted);transition:color var(--tr);text-decoration:none;
}
.nav__help:hover{color:var(--green);text-decoration:none}
.nav__help-icon{
  width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.nav__help-text{font-size:13px}

/* Přihlásit se / Login */
.nav__login {
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);border:1px solid var(--border);
  border-radius:var(--rpill);padding:5px 14px;transition:all var(--tr);text-decoration:none;
}
.nav__login:hover{border-color:var(--green);color:var(--green);text-decoration:none;background:var(--green-lt)}

/* Jsem lékař / Pro button */
.nav__pro {
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--green-dk);
  background:var(--green-lt);border:1.5px solid var(--green);
  border-radius:var(--rpill);padding:5px 16px;transition:all var(--tr);text-decoration:none;
  white-space:nowrap;
}
.nav__pro:hover{background:var(--green);color:#fff;text-decoration:none}

/* ── HERO LEFT-ALIGNED / HERO ZAROVNANÝ DOLEVA ── */
/* Přepíšeme centrování na zarovnání doleva s paddingem
   Override centering to left-align with padding */
.hero {
  text-align:left!important;
  padding-left: max(32px, calc((100% - 1100px) / 2))!important;
  padding-right: max(32px, calc((100% - 1100px) / 2))!important;
}
.hero__center { margin:0!important; max-width:860px!important; }
.hero__title { font-size:clamp(30px,4vw,50px)!important; }
.search-bar { margin:0 0 20px!important; max-width:760px!important; }
.quick-tiles { justify-content:flex-start!important; }
.hero__trust { justify-content:flex-start!important; }
.hero__eyebrow { display:flex!important; justify-content:flex-start!important; margin-top:12px!important; }

/* Fulltext pole / Fulltext field */
.search-bar__text {
  border:none;outline:none;background:transparent;
  font-size:15px;font-weight:500;color:var(--text);
  width:100%;
}
.search-bar__text::placeholder{color:var(--subtle)}

/* Fulltext hint */
.search-hint {
  font-size:12px;color:rgba(255,255,255,.65);
  margin-bottom:18px;
}
.search-hint__link {
  color:rgba(255,255,255,.9);text-decoration:underline;font-size:12px;
  background:none;border:none;cursor:pointer;font-family:var(--font);padding:0;
}
.search-hint__link:hover{opacity:.8}

/* Responsive header – schovej nav__pro na malých / Hide nav__pro on small screens */
/* ================================================================
   MOBILNÍ NAVIGACE — hamburger + panel (CH-6)
   Skryté na desktopu default hodnotou display:none, zobrazí se JEN
   uvnitř @media(max-width:900px) níže — stejný breakpoint, kde už
   dřív mizely .nav__pro/.nav__map beze ANY náhrady.
   ================================================================ */
.mnav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; padding: 0; }
.mnav-toggle__bar { width: 22px; height: 2px; background: var(--text, #1f2937); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mnav-toggle.is-open .mnav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mnav-toggle.is-open .mnav-toggle__bar:nth-child(2) { opacity: 0; }
.mnav-toggle.is-open .mnav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mnav-panel { display: none; }
.mnav-panel.is-open {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 12px 24px rgba(0,0,0,.08); z-index: 999; padding: 8px 0;
}
.mnav-panel__link { display: flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 15px; font-weight: 600; color: var(--text, #1f2937); text-decoration: none; }
.mnav-panel__sep { height: 1px; background: var(--border, #e5e7eb); margin: 6px 16px; }
.mnav-panel__langs { display: flex; gap: 10px; padding: 10px 20px; flex-wrap: wrap; }
.mnav-panel__flag { display: block; border-radius: 3px; overflow: hidden; opacity: .55; }
.mnav-panel__flag.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--green, #1D9E75); }
.mnav-panel__flag img { display: block; width: 26px; height: 19px; object-fit: cover; }

@media(max-width:900px){
  .nav__pro{display:none}
  .nav__help-text{display:none}
  .nav__map,.nav__help,.lang-switch,.nav__usr-wrap{display:none !important}
  .mnav-toggle{display:flex}
  .header__inner{position:relative}
}

/* ================================================================
   HERO – COLLAPSIBLE (složitelný hero jako Doctolib)
   ================================================================ */

/* Plná verze / Full version */
.hero__full {
  max-width: 860px;
  padding: 0;
}
/* Animace složení / Collapse animation */
.hero--collapsed .hero__full  { display: none; }
.hero--collapsed .hero__compact { display: block !important; }
.hero--collapsed { padding: 16px max(28px, calc((100% - 1100px)/2)) !important; min-height: unset !important; }

/* Kompaktní search bar / Compact search bar */
.hero__compact { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.search-bar--compact { max-width: 680px !important; margin: 0 !important; }
.search-bar--compact .search-bar__select { font-size: 14px !important; }
.search-bar--compact .search-bar__btn { padding: 11px 18px !important; font-size: 14px !important; }

.hero__back-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: var(--rpill);
  color: rgba(255,255,255,.85); font-size: 13px; padding: 7px 14px;
  transition: all var(--tr); flex-shrink: 0;
}
.hero__back-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Results section - no longer inside hero, full width below */
#results-section { padding: 36px 0; }
#results-section .results__inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ================================================================
   ORGANIC ROWS – sekce s organickými tvary (inspirace Doctolib)
   ================================================================ */
.benefits { padding: 64px 0; background: var(--white); }
.benefits__inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

.organic-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.organic-row:last-of-type { border-bottom: none; }
.organic-row--right { direction: rtl; }
.organic-row--right > * { direction: ltr; }

/* Blob wrap – organické tvary */
.organic-blob-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
}
.organic-blob {
  position: absolute;
  border-radius: 50% 40% 60% 50% / 40% 60% 50% 60%;
}
.organic-blob--green {
  width: 80%; height: 80%;
  top: 5%; left: 5%;
  background: var(--green-lt);
  display: flex; align-items: center; justify-content: center;
}
.organic-blob--green svg { width: 65%; height: 65%; }
.organic-blob--teal {
  width: 50%; height: 50%;
  bottom: 0; right: 0;
  background: var(--green-mid);
  opacity: 0.3;
}
.organic-blob--blue {
  width: 80%; height: 80%;
  top: 5%; left: 5%;
  background: var(--blue-lt);
  display: flex; align-items: center; justify-content: center;
}
.organic-blob--blue svg { width: 65%; height: 65%; }
.organic-blob--offset {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(5deg); }
}

/* Organický text / Organic text */
.organic-text h3 {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; letter-spacing: -.3px;
}
.organic-text p { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 16px; }
.organic-link { font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; }
.organic-link:hover { text-decoration: underline; }

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 0 0;
}
.stat-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px; background: var(--bg);
  border-radius: var(--r); border: 1px solid var(--border);
  text-align: center;
}
.stat-card__num { font-size: 30px; font-weight: 800; color: var(--green); letter-spacing: -.5px; }
.stat-card__label { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Responsive organic */
@media(max-width: 860px) {
  .organic-row { grid-template-columns: 1fr; gap: 28px; direction: ltr; }
  .organic-row--right > * { direction: ltr; }
  .organic-blob-wrap { max-width: 240px; aspect-ratio: 1; margin: 0 auto; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* ================================================================
   FULLTEXT SEARCH BAR
   ================================================================ */
.search-bar--fulltext {
  max-width: 760px !important;
  border-radius: var(--r) !important;
  padding: 8px 16px !important;
}
.search-bar__text {
  border: none; outline: none; background: transparent;
  font-size: 15px; font-weight: 500; color: var(--text); width: 100%;
}
.search-bar__text::placeholder { color: var(--subtle); }

/* ================================================================
   SEARCH HINT
   ================================================================ */
.search-hint {
  font-size: 12px; color: rgba(255,255,255,.65); margin: 8px 0 16px;
}
.search-hint__link {
  color: rgba(255,255,255,.9); text-decoration: underline;
  font-size: 12px; background: none; border: none; cursor: pointer;
  font-family: var(--font); padding: 0;
}

/* Dopřáváme hrdinovi správné zarovnání / Left-align hero properly */
.hero { text-align: left; padding: 56px max(28px, calc((100% - 1100px)/2)) 52px !important; }
.hero__full { max-width: 860px; }
.search-bar { margin: 0 0 8px; max-width: 760px; }
.quick-tiles { justify-content: flex-start; }
.hero__trust { justify-content: flex-start; }
.hero__eyebrow { display: flex; margin-top: 12px; }


/* ================================================================
   HERO LAYOUT – levý sloupec + pravý sloupec s ilustracemi
   ================================================================ */
.hero__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.hero__left-col { min-width: 0; }
.hero__right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Hero cards – ilustrace vpravo */
.hero-card {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 500;
  transition: transform var(--tr), background var(--tr);
}
.hero-card:hover { background: rgba(255,255,255,.22); transform: translateX(4px); }
.hero-card--1 { transform: translateX(0); }
.hero-card--2 { transform: translateX(14px); }
.hero-card--3 { transform: translateX(6px); }
.hero-card__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hero-card__icon svg { width: 32px; height: 32px; }

/* Schovat ilustrace při složení hero / Hide illustrations when collapsed */
.hero--collapsed .hero__right-col { display: none !important; }

/* ================================================================
   SEARCH BAR – šipka vpravo, GPS tlačítko, fulltext inline
   ================================================================ */

/* Přepíšeme layout search-bar fieldů / Override search-bar field layout */
.search-bar__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  position: relative;
  cursor: pointer;
}
.search-bar__field--text { flex: 1.2; }
.search-bar__select {
  flex: 1;
  padding-right: 22px; /* místo pro šipku / space for arrow */
}
/* Šipka absolutně vpravo uvnitř pole / Arrow absolutely right inside field */
.search-bar__arrow {
  position: absolute !important;
  right: 10px !important;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--green);
  pointer-events: none;
}

/* GPS tlačítko / GPS button */
.search-bar__gps {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
  transition: all var(--tr);
  margin: 0 4px;
}
.search-bar__gps:hover { background: rgba(255,255,255,.25); color: #fff; }
.search-bar__gps.is-loading { animation: spin .8s linear infinite; }

/* ================================================================
   QUICK TILES – layout s labelem vlevo
   ================================================================ */
.quick-tiles-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
}
.quick-tiles__label {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 8px; /* vertikální středění s dlaždicemi / vertical align with tiles */
}
.quick-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
}

/* RF (2026-07-12) OPRAVA UMÍSTĚNÍ: tohle MUSÍ být AŽ ZA obecným pravidlem
   .quick-tiles výše — stejná specificita (jeden class selektor), takže při
   konfliktu vyhrává to, co je v souboru POZDĚJI. Dřív bylo moje pravidlo
   definované moc brzy a .quick-tiles{display:flex} ho tiše přebilo, proto
   se dlaždice řadily jako volný řádek (10+6), ne jako pevná 2×8 mřížka. */
/* CH-10: širší pilulky s kruhovým badge (Varianta B) se v pevné 8sloupcové
   mřížce mačkaly (různě dlouhé texty typu "Rehabilitace" vs "MR" v jedné
   šířce sloupce). Přirozený flex-wrap nechá každou pilulku vlastní šířku
   podle obsahu, řádkuje se podle dostupného místa. */
.quick-tiles--grid{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

/* ================================================================
   HOMEPAGE BRIDGE – "Lidé také hledají" na přechodu
   ================================================================ */
.homepage-bridge { background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 0; }
.homepage-bridge__inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

.also-search { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.also-search__label { font-size: 13px; color: var(--muted); white-space: nowrap; flex-shrink: 0; font-weight: 500; padding-top: 5px; }
.also-search__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.atag { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rpill); padding: 5px 14px; font-size: 13px; color: var(--muted); transition: all var(--tr); }
.atag:hover { border-color: var(--green); color: var(--green); background: var(--green-lt); }

.city-filters__clear:hover { color: var(--red, #dc2626); }

/* ================================================================
   RESPONSIVE FIXES
   ================================================================ */
@media(max-width: 900px) {
  .hero__layout { grid-template-columns: 1fr; }
  .hero__right-col { display: none; }
  .quick-tiles-wrap { flex-direction: column; gap: 8px; }
  .quick-tiles__label { margin-top: 0; }
}
@media(max-width: 680px) {
  .search-bar {
    flex-direction: column; border-radius: 16px; padding: 10px;
    background: transparent; box-shadow: none; gap: 12px;
  }
  /* CH-6 MOBIL: dřív každé pole splývalo do jednoho velkého bílého pilulkovitého
     pruhu (pyramida od širokého selectu po úzké tlačítko) — teď každé pole má
     vlastní ohraničený box, stejný vizuální jazyk jako rozšířené hledání (.ebar__input).
     width:100% explicitně — bez toho měly "Vyšetření" a "Vyber kraj" různou šířku. */
  .search-bar__field {
    border: 1.5px solid var(--border); border-radius: var(--rsm);
    background: #fff; padding: 12px 14px; margin: 0;
    width: 100%; box-sizing: border-box; flex: none;
  }
  .search-bar__field:hover { background: #fff; }
  .search-bar__sep { display: none; }
  .search-bar__btn { border-radius: 10px; justify-content: center; }
  .search-bar__gps { width: 100%; border-radius: 10px; height: 38px; }
  /* GPS + více na jednom řádku, stejná šířka, s trochou odstupu nad i pod */
  .search-bar__gps-row { display: flex !important; gap: 10px; width: 100%; margin-top: 2px; }
  .search-bar__gps-row .btn-gps,
  .search-bar__gps-row .btn-ebar-arrow { flex: 1; justify-content: center; }
}

/* ================================================================
   OPRAVA: Hero layout – search bar na celou šířku + karty dole
   FIX: Hero layout – full width search bar + cards below
   ================================================================ */

/* Přepíšeme grid layout / Override grid layout */
.hero__layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 900px;
}
.hero__right-col {
  display: none !important;  /* Schovány, nahradíme kartami dole / Hidden, replaced by bottom cards */
}

/* Hero title – větší, celá šířka / Hero title – bigger, full width */
.hero__title {
  font-size: clamp(32px, 4.5vw, 52px) !important;
  margin-bottom: 20px;
  line-height: 1.1;
}

/* Search bar – bez GPS tlačítka / bez fulltextu na malých
   Search bar wider than before */
.search-bar {
  max-width: 900px !important;
}

/* Quick tiles – na celou šířku / Full width */
.quick-tiles-wrap {
  max-width: 900px;
}

/* ================================================================
   HERO FEATURE CARDS – Doctolib styl, 3 karty na přechodu hero→bílé
   HERO FEATURE CARDS – Doctolib style, 3 cards at hero→white border
   ================================================================ */
.hero-features {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: 0;
  margin-top: 24px; /* CH-6 (2026-07-12): zmenšeno o 25% (bylo 32px) na žádost — méně zeleného prostoru mezi Rychlým filtrem a kartami */
}
.hero-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
}
.hf-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  transition: transform var(--tr), box-shadow var(--tr);
  text-decoration: none;
  color: var(--text);
}
.hf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  text-decoration: none;
}
.hf-card__img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}
.hf-card__img--green { background: var(--green-lt); }
.hf-card__img--blue  { background: var(--blue-lt, #e8f4fd); }
.hf-card__img--teal  { background: #e0f5f0; }
.hf-card__img svg { width: 38px; height: 38px; }
.hf-card__text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.hf-card__text p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* Při složeném hero karty zmizí / Cards disappear when hero collapsed */
.hero--collapsed .hero-features { display: none; }

/* ================================================================
   SEKCE POD HERO – přechod / Section below hero – transition
   ================================================================ */
.homepage-bridge {
  background: var(--white);
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--border);
}
.homepage-bridge__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ================================================================
   HERO FULL – oprava paddingu aby karty "přesahovaly" přes hranici
   HERO FULL – fix padding so cards "overflow" the border
   ================================================================ */
.hero {
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.hero__full {
  padding-bottom: 0 !important;
}
.hero-features {
  /* Karty se posunou přes spodní hranici hero o polovinu své výšky */
  /* Cards shift over the bottom hero border by half their height */
  transform: translateY(30px);
  margin-bottom: 0;
}
/* Sekce po hero musí mít extra padding nahoře pro přesah karet */
.homepage-bridge {
  padding-top: 56px !important;
}

@media(max-width: 760px) {
  .hero-features__grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-features { transform: translateY(20px); }
  .homepage-bridge { padding-top: 44px !important; }
}

/* ================================================================
   SEARCH BAR v5 – čistý 2-field design, bez GPS a inline fulltextu
   ================================================================ */

/* Přepíš vše co se týká search-bar */
.search-bar {
  background: #fff !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 5px !important;
  max-width: 760px !important;
  margin: 0 0 16px !important;
  gap: 0 !important;
}

.search-bar__field {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 16px 8px 18px !important;
  gap: 10px !important;
  position: relative !important;
  min-width: 0 !important;
  cursor: pointer !important;
  border-radius: 50px !important;
  transition: background .12s !important;
}
.search-bar__field:hover { background: rgba(0,0,0,.03) !important; }

.search-bar__icon {
  color: #9ab5ac !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.search-bar__select {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a2e26 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 0 !important;
  padding-right: 24px !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.search-bar__select option { color: #1a2e26; background: #fff; }

/* Šipka – absolutně vpravo */
.search-bar__arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: #1D9E75 !important;
  pointer-events: none !important;
  font-style: normal !important;
  left: auto !important;
}

/* Separator */
.search-bar__sep {
  width: 1px !important;
  background: #dce8e3 !important;
  align-self: stretch !important;
  margin: 8px 0 !important;
  flex-shrink: 0 !important;
}

/* Tlačítko hledat */
.search-bar__btn {
  background: #1D9E75 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 13px 26px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: background .15s, transform .15s !important;
  margin: 0 !important;
}
.search-bar__btn:hover { background: #0F6E56 !important; transform: scale(1.02) !important; }

/* Kompaktní verze */
.search-bar--compact { max-width: 640px !important; }
.search-bar--compact .search-bar__select { font-size: 14px !important; }
.search-bar--compact .search-bar__btn { padding: 11px 20px !important; font-size: 14px !important; }

/* ================================================================
   SEARCH EXTRA – fulltext toggle pod search barem
   ================================================================ */
.search-extra {
  margin-bottom: 20px;
}
.search-extra__toggle {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.search-extra__toggle:hover { background: rgba(255,255,255,.22); color: #fff; }
.search-extra__input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 8px;
  max-width: 760px;
}
.search-extra__input input {
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  flex: 1;
  font-family: var(--font);
}
.search-extra__input input::placeholder { color: rgba(255,255,255,.5); }

/* ================================================================
   HERO – finální layout bez pravého sloupce
   ================================================================ */
.hero {
  padding: 52px max(28px, calc((100% - 1060px)/2)) 0 !important;
  overflow: visible !important;
}
.hero__full { max-width: 760px; }
.hero__title { font-size: clamp(30px,4vw,50px) !important; margin-bottom: 22px; }
.quick-tiles-wrap { max-width: 760px; margin: 18px 0; }
.hero__trust { font-size: 13px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.hero__trust-sep { opacity: .4; }

/* Responsive */
@media(max-width: 680px) {
  .search-bar { border-radius: 16px !important; flex-direction: column !important; padding: 8px !important; }
  .search-bar__field { border-radius: 10px !important; padding: 10px 14px !important; }
  .search-bar__sep { width: 100% !important; height: 1px !important; margin: 0 !important; }
  .search-bar__btn { border-radius: 10px !important; justify-content: center !important; width: 100% !important; }
  .search-bar__arrow { right: 10px !important; }
}

/* ================================================================
   NAV – Mapa institucí link (modrá pilulka, stejná struktura jako .nav__pro)
   ================================================================ */
.nav__map {
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--blue-dk);
  background:var(--blue-lt);border:1.5px solid var(--blue);
  border-radius:var(--rpill);padding:5px 16px;transition:all var(--tr);text-decoration:none;
  white-space:nowrap;
}
.nav__map:hover { background:var(--blue); color:#fff; text-decoration:none; }
.nav__map svg { flex-shrink: 0; }

/* ================================================================
   SEARCH BAR – plná šířka (odpovídá header max-width)
   Full width search bar matching header width
   ================================================================ */
.hero { padding-left: max(28px, calc((100% - var(--max)) / 2)) !important; padding-right: max(28px, calc((100% - var(--max)) / 2)) !important; }
.hero__full { max-width: 100% !important; }
.search-bar { max-width: 100% !important; }
.quick-tiles-wrap { max-width: 100% !important; }

/* GPS button in search bar */
.search-bar__gps {
  background: transparent; border: none;
  color: rgba(255,255,255,.7); padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: color .15s;
  font-size: 14px;
}
.search-bar__gps:hover { color: #fff; }

/* ================================================================
   STATS SECTION – replaces organic blobs
   ================================================================ */
.home-stats {
  background: var(--white);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--border);
}
.home-stats__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 28px;
}
.home-stats__title {
  text-align: center; font-size: 15px; color: var(--muted);
  font-weight: 500; margin-bottom: 36px;
  text-transform: uppercase; letter-spacing: .5px;
}
.home-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hstat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 28px 20px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); transition: border-color var(--tr), transform var(--tr);
}
.hstat:hover { border-color: var(--green); transform: translateY(-2px); }
.hstat__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hstat__icon--green { background: var(--green-lt); }
.hstat__icon--blue  { background: #e8f4fd; }
.hstat__icon--teal  { background: #e0f5f0; }
.hstat__icon--gray  { background: #f0f0ec; }
.hstat__icon svg { width: 28px; height: 28px; }
.hstat__num {
  font-size: 32px; font-weight: 800; color: var(--green);
  letter-spacing: -.5px; line-height: 1; margin-bottom: 6px;
}
.hstat__label { font-size: 13px; color: var(--muted); line-height: 1.4; }

@media(max-width: 700px) {
  .home-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .nav__map { display: none; }
}

/* ================================================================
   HERO FEATURE CARDS – plná šířka jako header
   ================================================================ */
.hero-features__grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 100% !important;
}


/* ================================================================
   HERO FEATURE CARDS – posunuty níž: 30% v zelené, 70% v bílé
   ================================================================ */
.hero-features {
  transform: translateY(62%) !important;  /* víc dolů = víc v bílé */
  margin-bottom: 0 !important;
}
.homepage-bridge {
  padding-top: 110px !important;  /* místo pro přesahující karty */
}

/* Organické sekce vedle sebe / Organic sections side by side */
.organic-rows-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 48px 0 0;
}
.organic-row-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.organic-row-compact .organic-blob-wrap {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  align-self: center;
}
.organic-row-compact .organic-blob {
  width: 80%;
  height: 80%;
  top: 5%;
  left: 5%;
}
.organic-row-compact h3 { font-size: 18px; }
.organic-row-compact p  { font-size: 14px; }

/* Schovej staré organic-row / Hide old organic-row */
.organic-row { display: none !important; }

@media(max-width: 700px) {
  .organic-rows-wrap { grid-template-columns: 1fr; }
  .hero-features { transform: translateY(40%) !important; }
  .homepage-bridge { padding-top: 80px !important; }
}

/* Home stats – schovej / hide (replaced by organic) */
.home-stats { display: none !important; }

/* ================================================================
   D-INST – FINÁLNÍ SCHVÁLENÝ DESIGN KARET VÝSLEDKŮ (CH-7)
   Bílá karta na krémovém pozadí sekce, levý blok (hvězdy+logo) centrovaný
   na celou výšku karty, tenký divider, svislý sloupec 3 stejně širokých
   barevných tlačítek (Objednat se/Mapa/Web), hover jen zelený rámeček.
   ================================================================ */
.provider-card {
  display: flex !important;
  align-items: center !important; /* levý blok i divider i tlačítka centrované na výšku karty */
  gap: 18px !important;
  padding: 16px 20px !important;
  background: var(--white);
  border: 0.5px solid var(--cream-border);
  border-radius: var(--r);
  transition: border-color var(--tr);
  overflow: visible;
}
/* Hover: VÝHRADNĚ zelený rámeček, žádná změna pozadí (na výslovnou žádost) */
.provider-card:hover {
  border: 1.5px solid var(--green);
  padding: 15.5px 19.5px !important; /* kompenzace tloušťky rámečku, karta neposkakuje */
  box-shadow: none;
  transform: none;
}
.provider-card__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
/* FD-CARD: hodnocení — VŽDY 5 hvězdiček, i u neregistrovaných NRPZS záznamů
   (tam všechny šedé/neaktivní) — drží stejné místo v layoutu, logo/monogram
   se nikdy neposouvá bez ohledu na typ záznamu. */
.provider-card__stars { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.pc-star { font-size: 13px; line-height: 1; color: var(--cream-border-soft); }
.pc-star--filled { color: #f59e0b; }
.provider-card__amenities { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tag--amenity { background: var(--cream-chip); color: #5a5648; }
/* FD-CARD-WAIT: čekací doba jako drobný chip vedle specializačních tagů —
   elegantní doplnění, žádný samostatný blok narušující symetrii tlačítek. */
.tag--wait-good { background: var(--green-lt); color: var(--green-dk); }
.tag--wait-ok { background: #FEF3C7; color: #92400E; }
.tag--wait-long { background: #FEE2E2; color: #991B1B; }
/* FD-CARD: jazyky napříč ordinacemi instituce — vlaječky pod sebou, hned
   před svislou dělicí linkou. */
.provider-card__langs { display: grid; grid-template-columns: repeat(2, auto); gap: 3px; flex-shrink: 0; }
.dinst-langs__flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Svislá oddělovací linka mezi levým obsahem a pravým sloupcem tlačítek —
   align-self:stretch = sahá přes celou výšku karty i po hoveru. */
.provider-card__divider {
  width: 1px;
  align-self: stretch;
  background: var(--green-dk);
  opacity: .25;
  flex-shrink: 0;
}
.provider-card:not(.provider-card--verified) .provider-card__divider { opacity: .15; }

/* Pravý akční sloupec: tři tlačítka STEJNÉ ŠÍŘKY, pořadí Objednat se/Mapa/Web */
.dinst-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 130px;
}
.dinst-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 9px 0;
  border-radius: var(--rsm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background-color var(--tr), color var(--tr);
  font-family: var(--font);
}
.dinst-btn:hover { text-decoration: none; }

/* Objednat se — zelená, světlá výchozí / tmavá hover */
.dinst-btn--book { background: var(--green-lt); color: var(--green-dk); }
.dinst-btn--book:hover { background: var(--green-dk); color: #fff; }

/* Mapa — modrá, světlá výchozí / tmavá hover */
.dinst-btn--map { background: var(--blue-btn-lt); color: var(--blue-btn-dk); }
.dinst-btn--map:hover { background: var(--blue-btn-dk); color: #fff; }

/* Web — krémová, světlá výchozí / tmavá hover */
.dinst-btn--web { background: var(--web-btn-lt); color: var(--web-btn-dk); }
.dinst-btn--web:hover { background: var(--web-btn-dk); color: #fff; }

/* Neaktivní "Objednat se" (NRPZS bez online rezervace) nebo "Web" bez URL —
   VŽDY na stejném místě, jen šedé, bez hoveru, needitovatelné. */
.dinst-btn--disabled {
  background: var(--cream-chip);
  color: var(--cream-border-soft);
  font-weight: 400;
  cursor: not-allowed;
  pointer-events: none;
}
/* FD-CARD: krátký pulz po kliknutí na "Objednat se", než proběhne
   přesměrování na detail — potvrzuje uživateli, že klik zabral. */
.dinst-btn--book.is-confirming {
  background: var(--green-dk);
  color: #fff;
  transform: scale(.97);
}
/* FD-CARD: textový fallback vlaječky, pokud PNG chybí/nenačte se */
.dinst-langs__flag--fallback {
  width: 18px; height: 13px; border-radius: 2px;
  background: var(--cream-chip); color: var(--cream-text-muted);
  font-size: 7px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

@media(max-width: 760px) {
  .provider-card { flex-direction: column; align-items: stretch !important; }
  .provider-card__divider { display: none; }
  .dinst-actions { width: 100%; flex-direction: row; margin-top: 12px; }
  .dinst-actions .dinst-btn { flex: 1; }
  /* Hvězdičky a jazyky zatím na mobilu schované — mobilní verze je samostatná fáze */
  .provider-card__stars, .provider-card__langs { display: none; }
  /* Fotka 150×150 byla navržená pro desktop — na úzkém mobilu zabírala
     neúměrně velkou část karty vzhledem k šířce obrazovky. */
  .provider-card__photo, .provider-card__icon { width: 64px; height: 64px; }
}
/* CH-6 MOBIL: globální pojistka proti horizontálnímu přetečení — jednotlivé
   prvky (karty výsledků, detail ordinace) měly na mobilu tendenci "utéct"
   mimo viditelnou šířku obrazovky místo aby se zabalily/zmenšily. Týká se
   jen mobilu (760px), na desktopu nic nemění. */
@media(max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* ================================================================
   GPS BUTTON v search-bar – viditelný button
   ================================================================ */
.btn-gps {
  display: flex !important;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.04);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font);
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--tr);
  white-space: nowrap;
  margin: 0 6px;
}
.btn-gps:hover { border-color: var(--green); color: var(--green); background: var(--green-lt); }
.btn-gps.is-loading { opacity: .5; cursor: wait; }
.btn-gps svg { flex-shrink: 0; }

/* ================================================================
   E-BAR – rozšířené vyhledávání
   ================================================================ */
.ebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--tr);
  margin-top: 10px;
}
.ebar-toggle:hover, .ebar-toggle.is-active { background: rgba(255,255,255,.22); color: #fff; }

.ebar {
  background: rgba(255,255,255,.95);
  border-radius: var(--r);
  padding: 20px;
  margin-top: 10px;
  max-width: 100%;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}
.ebar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.ebar__field { display: flex; flex-direction: column; gap: 4px; }
.ebar__label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing:.4px; }
.ebar__input {
  border: 1.5px solid var(--border); border-radius: var(--rsm); padding: 8px 12px;
  font-size: 14px; color: var(--text); outline: none; font-family: var(--font);
  transition: border-color var(--tr); background: var(--white);
}
.ebar__input:focus { border-color: var(--green); }
.ebar__note { font-size: 12px; color: var(--muted); font-style: italic; }
.ebar__footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media(max-width: 640px) { .ebar__grid { grid-template-columns: 1fr; } }

/* Schovat zpět button / Hide back button */
.hero__back-btn { display: none !important; }


/* ================================================================
   S-BAR / E-BAR SWAP
   ================================================================ */

/* Tlačítko a toggle přilepeny k sobě */
.sbar-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
}
.sbar-btn-wrap .search-bar__btn {
  border-radius: 50px 50px 0 0 !important;
  margin: 0 !important;
}

/* E-bar toggle – přilepené pod Najít termín */
.ebar-toggle {
  background: var(--green-lt) !important;
  color: var(--green-dk) !important;
  border: none !important;
  border-radius: 0 0 50px 50px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: background .15s !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.ebar-toggle:hover { background: var(--green-mid) !important; }

/* E-bar simple toggle */
.ebar-toggle--simple {
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}
.ebar-toggle--simple:hover { background: rgba(255,255,255,.25) !important; color: #fff !important; }

/* E-bar container */
.ebar {
  background: rgba(255,255,255,.95);
  border-radius: var(--r);
  padding: 20px 22px;
  max-width: 100%;
  box-shadow: var(--shadow-lg);
}
.ebar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.ebar__field { display: flex; flex-direction: column; gap: 5px; }
.ebar__label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.ebar__input {
  border: 1.5px solid var(--border); border-radius: var(--rsm);
  padding: 9px 12px; font-size: 14px; color: var(--text);
  outline: none; font-family: var(--font); transition: border-color .15s;
  background: var(--white); width: 100%;
}
.ebar__input:focus { border-color: var(--green); }
.ebar__input:disabled { opacity: .5; cursor: not-allowed; background: var(--bg); }
/* CH-6: "jen s online objednáním" — nahradilo dřívější neaktivní datum od-do */
.ebar__field--checkbox { justify-content: flex-end; }
.ebar__checkbox-row {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: var(--rsm);
  padding: 9px 12px; font-size: 13.5px; color: var(--text);
  cursor: pointer; background: var(--white); height: 38px; box-sizing: border-box;
}
.ebar__checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); flex-shrink: 0; }
.ebar__footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ebar__note { font-size: 12px; color: var(--muted); font-style: italic; }

/* ================================================================
   VÝSLEDKY – padding nahoře aby nebyly přilepeny na hero
   ================================================================ */
.results-section {
  padding-top: 28px !important;
  background: var(--bg);
}
.results-section .results__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ================================================================
   HERO – odstranit padding-bottom (karty přesahují)
   ================================================================ */
.hero { padding-bottom: 0 !important; overflow: visible !important; }

@media(max-width: 760px) {
  .sbar-btn-wrap { flex-direction: row; align-items: stretch; }
  .sbar-btn-wrap .search-bar__btn { border-radius: 50px !important; }
  .ebar-toggle { border-radius: 20px !important; padding: 7px 14px !important; }
  .ebar__grid { grid-template-columns: 1fr; }
}

/* ================================================================
   S-BAR CLEANUP v7 – tenký, bez sbar-btn-wrap
   ================================================================ */
.search-bar {
  padding: 4px 4px 4px 4px !important;
  align-items: center !important;
}
.search-bar__field {
  padding: 8px 14px 8px 16px !important;
}

/* Šipka více/méně – malé tlačítko UVNITŘ bílého boxu */
.btn-ebar-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font);
  padding: 5px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
  margin: 0 2px;
  line-height: 1.2;
}
.btn-ebar-arrow:hover { border-color: var(--green); color: var(--green); background: var(--green-lt); }
.btn-ebar-arrow.is-active { background: var(--green-lt); border-color: var(--green); color: var(--green-dk); }

/* GPS button – kompaktnější */
.btn-gps {
  padding: 5px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

/* ================================================================
   E-BAR – čistý redesign
   ================================================================ */
#ebar-wrap { margin-top: 0; }

.ebar {
  background: rgba(255,255,255,.97) !important;
  border-radius: var(--r) !important;
  padding: 18px 20px 16px !important;
  box-shadow: var(--shadow-lg) !important;
}
.ebar__grid {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.ebar__select-wrap { position: relative; display: flex; align-items: center; }
.ebar__sel-arrow {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--green); pointer-events: none; font-size: 12px;
}
.ebar__input { padding-right: 28px !important; }
.ebar__input--disabled { opacity: .5 !important; cursor: not-allowed !important; background: var(--bg) !important; }
.ebar__soon { font-size: 10px; color: var(--subtle); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ebar__footer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.ebar__footer-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto; /* CH-6: text "Další filtry budou..." smazán, tlačítka bez toho zůstávají vpravo */
}
.ebar__footer-btns .search-bar__btn { border-radius: 50px !important; }
.btn-ebar-simple {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-family: var(--font);
  padding: 4px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.btn-ebar-simple:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ================================================================
   HERO COMPACT – zelené pozadí nahoře i dole (stejný padding)
   ================================================================ */
.hero--collapsed {
  padding-top: 20px !important;
  padding-bottom: 20px !important;  /* stejné jako nahoře = zelená obklopuje s-bar */
}

/* ================================================================
   VÝSLEDKY – bílá sekce s paddingem
   ================================================================ */
.results-section {
  background: var(--cream-bg) !important;
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}
.results-section .results__inner {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

/* Datum vpravo od nadpisu výsledků */
.results__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.results__date {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  padding-top: 2px;
}
.results__date strong { color: var(--text); font-weight: 600; }

/* ================================================================
   FILTER BOX – ohraničený rámeček
   ================================================================ */
.filter-box {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  margin-bottom: 20px;
  overflow: hidden;
}
.filter-box__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.filter-box__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.filter-box__row--soon { opacity: .6; }
.filter-box__label { font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.filter-box__checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.filter-box__checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
.filter-box__btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.filter-box__sep { border-top: 1px solid var(--border); }
.filter-box__clear {
  font-size: 12px; color: var(--muted); text-decoration: underline;
  cursor: pointer; background: none; border: none; font-family: var(--font);
}
.filter-box__clear:hover { color: #dc2626; }
.filter-box__badge {
  font-size: 10px; font-weight: 700; background: var(--green-lt);
  color: var(--green-dk); padding: 2px 8px; border-radius: 10px;
}
.filter-date__label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.filter-date__input {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; font-family: var(--font);
  color: var(--text); outline: none;
}
.filter-date__input:disabled { opacity: .5; cursor: not-allowed; }

/* BUGFIX (2026-08-14): dřív zelené pill-tlačítko (background/border/radius)
   — uživatel chtěl prostý text bez pozadí, oddělený symbolem "|" (jako
   "Brno | České Budějovice | Děčín | ..."), ne dlaždice. Requirement na
   "stejnou šířku" z minula se týkal pill vzhledu, co teď mizí — u
   plynoucího textu přirozeně odpadá, každé město má svou přirozenou šířku. */
.city-filter-btn {
  background: none; border: none; padding: 0;
  font-size: 13px; color: var(--text); cursor: pointer;
  font-family: var(--font); transition: color .12s;
}
.city-filter-btn:not(:last-child)::after {
  content: '|'; margin: 0 10px; color: var(--border); font-weight: 400; cursor: default;
}
.city-filter-btn:hover { color: var(--green); text-decoration: underline; }
.city-filter-btn.is-active { color: var(--green-dk); font-weight: 700; text-decoration: underline; }
/* CH-8: rozbalovací tlačítko pro zbytek měst nad TOP_N */
.city-filter-more {
  background: none; border: none; border-bottom: 1px dashed var(--muted);
  border-radius: 0; padding: 3px 2px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  font-family: var(--font); transition: color .12s;
}
.city-filter-more:hover { color: var(--green); border-color: var(--green); }

/* KROK D (2026-08-13): filtr specializací s počty (checkboxy, OR mezi
   sebou) — stejný vizuální jazyk jako .filter-box/.city-filter-btn výš,
   ale řádkový seznam místo dlaždic, protože obory mívají delší názvy a
   nesou počet vedle sebe. */
/* BUGFIX (2026-08-14): dřív display:flex (odsud), teď display:block dole u
   #service-filter-list.filter-section__body kvůli CSS `columns` (multi-
   column layout funguje JEN na block-level, `display:flex` ho úplně
   ignoruje — přesně to způsobilo, že se sloupce nikdy nezobrazily, i když
   `columns:5` bylo nastavené, nahlášeno). Zbytek (gap/min-width) beze
   změny, jen display se přepisuje specifičtějším pravidlem níž. */
.service-filter-list { flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.service-filter-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--text); cursor: pointer; padding: 2px 0;
}
.service-filter-item input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); flex-shrink: 0; }
.service-filter-item__label { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-filter-count {
  font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted);
  padding: 1px 7px; border-radius: 10px; flex-shrink: 0;
  /* BUGFIX (2026-08-14): pevná šířka pozadí "jako by" číslo mělo vždy 4
     místa (uživatel: "Adiktolog 20 ... to pozadí musí tak odpovídat") —
     text zůstává skutečné číslo (žádné nulování na "0020"), jen pozadí je
     stejně dlouhé u všech položek. 4ch = 4 znaky monospace šířky + padding. */
  min-width: calc(4ch + 14px); text-align: center;
}
.service-filter-count--active { background: var(--green-lt); color: var(--green-dk); }
.service-filter-more {
  background: none; border: none; border-bottom: 1px dashed var(--muted);
  border-radius: 0; padding: 3px 2px; align-self: flex-start;
  font-size: 12px; color: var(--muted); cursor: pointer;
  font-family: var(--font); transition: color .12s;
}
.service-filter-more:hover { color: var(--green); border-color: var(--green); }

/* KROK G (2026-08-13) → KROK I (2026-08-14, PŘEPRACOVÁNO): sbalitelné
   sekce filtr-boxu. Uživatel si NEpřál sloupce u měst ("Ty jsem nechtěl
   dát do sloupců") — jen Obor je ve sloupcích, Město je flex-wrap (jak
   dynamický seznam v rámci kraje, tak pevných 20 největších měst ČR bez
   vybraného kraje, viz main.js TOP_CZ_CITIES). Sbaleno (výchozí u velkých
   seznamů): omezená výška + fade přechod dole. */
.filter-section { padding: 10px 16px; }
.filter-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px;
}
.filter-section__label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.filter-section__toggle {
  background: none; border: none; color: var(--green-dk);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font); padding: 0; white-space: nowrap;
}
.filter-section__toggle:hover { text-decoration: underline; }

/* Sdílené — jen sbalovací výška, žádný layout (ten si určuje každá sekce
   zvlášť níž, Obor sloupce / Město flex-wrap). */
/* BUGFIX (2026-08-14): dřív position:relative + fade gradient (::after) —
   uživatel nahlásil, že to vypadá jako "ustřihnutý druhý řádek", ne jako
   plynulý přechod. Teď jen čistý ořez výšky, bez fade efektu. */
.filter-section__body.is-collapsed {
  max-height: 80px; overflow: hidden;
}

/* OBOR — 5 stejně širokých sloupců (čistý CSS `columns`, žádný nový JS). */
#service-filter-list.filter-section__body {
  display: block; columns: 5; column-gap: 14px;
}
#service-filter-list.filter-section__body .service-filter-item {
  break-inside: avoid; margin: 0 0 6px;
}
@media (max-width: 900px) {
  #service-filter-list.filter-section__body { columns: 2; }
}
@media (max-width: 560px) {
  #service-filter-list.filter-section__body { columns: 1; }
}

/* KROK O (2026-08-14) OPRAVA: pozadí tmavě karamelové nahrazeno #f6f9f8
   (uživatel: "to už máme na webu použité") — tmavě černý text pro
   klikatelná písmena, šedý pro nekliktelná. */
.alphabet-index {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px;
  font-size: 14px;
  background: #f6f9f8;
  border-radius: var(--rsm);
  padding: 6px 12px;
  margin-bottom: 8px;
}
.alphabet-index__letter {
  color: var(--text); cursor: pointer; font-weight: 600;
}
.alphabet-index__letter:hover { text-decoration: underline; }
.alphabet-index__letter.is-selected { text-decoration: underline; }
.alphabet-index__letter.is-disabled {
  color: var(--subtle); cursor: default; pointer-events: none;
}
.alphabet-index:empty { display: none; }

/* MĚSTO (dynamický seznam v rámci vybraného kraje) — plynoucí text s "|"
   oddělovačem (ne dlaždice, ne sloupce — uživatel to tak výslovně chtěl). */
#city-filter-btns.filter-section__body--dynamic-cities {
  display: block;
}

/* MĚSTO (pevných 20 největších měst ČR, bez vybraného kraje) — stejný
   plynoucí text s "|" oddělovačem jako dynamický seznam výš. Requirement
   na stejnou šířku tlačítek odpadl spolu se zrušením pill vzhledu. */
#city-filter-btns.filter-section__body--fixed-cities {
  display: block;
}

@media(max-width: 680px) {
  .ebar__grid { grid-template-columns: 1fr !important; }
  .ebar__footer { flex-direction: column; align-items: stretch; }
  .ebar__footer-btns { align-items: stretch; }
}

/* ================================================================
   PRAVIDLO: VŠECHNA SELECT MENU – JEN ZELENÁ ŠIPKA ▾
   Platí globálně pro VŠECHNY selecty na celém webu.
   Přidávat nová select menu = VŽDY obalit do .sel-wrap
   ================================================================ */

/* Schovej nativní šipku u VŠECH selectů */
select {
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance:         none !important;
  background-image:   none !important;
}

/* Globální wrapper pro select s šipkou */
.sel-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sel-wrap select {
  width: 100%;
  padding-right: 28px !important;
}
/* Šipka – zelená, vždy vpravo */
.sel-wrap::after,
.search-bar__field::after {
  content: none; /* Používáme explicitní span, ne pseudo-element */
}

/* Speciální: search-bar select – šipka je .search-bar__arrow span */
.search-bar__arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--green) !important;
  font-size: 14px !important;
  pointer-events: none !important;
  font-style: normal !important;
  font-weight: 700 !important;
  z-index: 1;
}

/* e-bar selects – šipka */
.ebar__sel-arrow {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--green) !important;
  font-size: 14px !important;
  pointer-events: none !important;
  font-weight: 700 !important;
  z-index: 1;
}

/* form selects – šipka */
.form-arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--green) !important;
  font-size: 14px !important;
  pointer-events: none !important;
  font-weight: 700 !important;
}

/* Admin select – schovej nativní, systém styles nutné */
.form-input[multiple],
.ebar__input[multiple] { padding-right: 8px !important; }

/* ================================================================
   E-BAR FOOTER – méně ▲ vlevo, Najít termín vpravo
   ================================================================ */
.ebar__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}
.ebar__footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.ebar__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* méně ▲ tlačítko */
.btn-ebar-simple {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 20px !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
  font-family: var(--font) !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
.btn-ebar-simple:hover { background: rgba(255,255,255,.28) !important; color: #fff !important; }

/* ================================================================
   DEFINITIVNÍ PRAVIDLO PRO ŠIPKY – PŘEPÍŠE VŠE
   Žádné nativní šipky, POUZE zelená ▾ custom šipka.
   Toto pravidlo platí od teď pro celou dobu projektu.
   Zapsat do SLOVNIK.md: PRAVIDLO-SIPKY
   ================================================================ */

/* 1. Nativní šipka zakázána ABSOLUTNĚ ve všech selectech */
select,
select.search-bar__select,
select.ebar__input,
select.form-input,
select[class] {
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance:         none !important;
  background-image:   none !important;
  background:         transparent !important;
}

/* 2. Každý select MUSÍ mít parent s position:relative (pro custom šipku) */
.search-bar__field,
.ebar__select-wrap,
.form-select-wrap {
  position: relative !important;
}

/* 3. Custom šipka ▾ zelená, absolutně vpravo, PŘES nativní */
.search-bar__arrow,
.ebar__sel-arrow,
.form-arrow {
  position:        absolute !important;
  right:           12px !important;
  top:             50% !important;
  transform:       translateY(-50%) !important;
  color:           var(--green) !important;
  font-size:       15px !important;
  font-weight:     800 !important;
  pointer-events:  none !important;
  z-index:         10 !important;
  line-height:     1 !important;
}

/* 4. Select musí mít padding-right aby text neskákal pod šipku */
.search-bar__select { padding-right: 28px !important; }
.ebar__input[type!="text"][type!="date"] { padding-right: 30px !important; }

/* ================================================================
   FIX: btn-ebar-simple – viditelný na světlém pozadí e-baru
   ================================================================ */
.btn-ebar-simple {
  background: var(--bg) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-family: var(--font) !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
.btn-ebar-simple:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-lt) !important;
}

/* ================================================================
   FD-HF CARDS v2 – větší, výraznější
   ================================================================ */
.hero-features { transform: translateY(56%) !important; }
.homepage-bridge { padding-top: 120px !important; }
.hero-features__grid { gap: 20px !important; }
.hf-card {
  padding: 22px 20px !important; gap: 18px !important;
  border-radius: 16px !important; box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  border: 1.5px solid transparent !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.hf-card:hover {
  transform: translateY(-5px) !important; box-shadow: 0 16px 40px rgba(0,0,0,.15) !important;
  border-color: var(--green) !important; text-decoration: none !important;
}
.hf-card:nth-child(2):hover { border-color: #0F6E56 !important; }
.hf-card:nth-child(3):hover { border-color: var(--blue) !important; }
.hf-card__img {
  width: 72px !important; height: 72px !important; border-radius: 14px !important;
  flex-shrink: 0 !important; padding: 0 !important; overflow: hidden !important;
}
.hf-card__img svg { width: 100% !important; height: 100% !important; display: block !important; }
.hf-card__img--amber { background: #FAEEDA !important; }
.hf-card__text strong { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 5px !important; }
.hf-card__text p { font-size: 13px !important; color: var(--muted) !important; line-height: 1.5 !important; margin: 0 !important; }
@media(max-width: 860px) {
  .hero-features__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-features { transform: translateY(30px) !important; }
  .homepage-bridge { padding-top: 56px !important; }
  .hf-card { padding: 18px 16px !important; }
  .hf-card__img { width: 56px !important; height: 56px !important; }
}

/* ================================================================
   CHYTRÝ POMOCNÍK – /pomocnik  (modul 02)
   ================================================================ */
.pomp { background: var(--bg); padding: 0; }
.pomp__progress-wrap { background: var(--green); height: 3px; }
.pomp__progress-bar  { height: 3px; background: rgba(255,255,255,.25); }
.pomp__progress-fill { height: 100%; background: #fff; transition: width .4s ease; }

/* Širší inner – využívá víc šířky stránky */
.pomp__inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 2rem max(28px, calc((100% - var(--max)) / 2));
}

/* Oblast těla – na širokém layoutu více sloupců */
.pomp__area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* Opts list – na širokém layoutu dvousloupcová mřížka */
.pomp__opts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Urgentní tlačítko vždy přes celou šířku */
.pomp__opts-list .pomp-opt-btn--urgent { grid-column: 1 / -1; }

/* Mode grid – větší karty */
.pomp__mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pomp-screen { display: none; animation: pomp-in .22s ease; }
.pomp-screen.active { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
@keyframes pomp-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.pomp__step-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.pomp__step-label--red { color:#A32D2D; }
.pomp__title { font-size:1.5rem; font-weight:600; color:var(--text); line-height:1.3; margin-bottom:1.25rem; }
.pomp__subtitle { font-size:.875rem; color:var(--muted); line-height:1.65; margin-bottom:1.25rem; }

.pomp__urgent-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:#FCEBEB; border:1.5px solid #F7C1C1; border-radius:99px;
  padding:7px 16px; font-size:13px; font-weight:500; color:#A32D2D;
  cursor:pointer; margin-bottom:1.5rem; transition:background .15s; font-family:var(--font);
}
.pomp__urgent-pill:hover { background:#f8d7d7; }

.pomp-mode-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:1.25rem; cursor:pointer; text-align:center;
  transition:background .15s, border-color .15s, transform .1s;
  display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font);
}
.pomp-mode-card:hover { background:var(--bg); border-color:var(--green); }
.pomp-mode-card:active { transform:scale(.98); }
.pomp-mode-card__icon  { font-size:2rem; }
.pomp-mode-card__title { font-size:.9375rem; font-weight:600; color:var(--text); }
.pomp-mode-card__sub   { font-size:.8125rem; color:var(--muted); }

.pomp__child-toggle { display:flex; align-items:center; gap:10px; font-size:.8125rem; color:var(--muted); cursor:pointer; margin-bottom:1.25rem; }
.pomp__toggle-sw { position:relative; width:36px; height:20px; flex-shrink:0; }
.pomp__toggle-sw input { opacity:0; width:0; height:0; position:absolute; }
.pomp__toggle-track { position:absolute; inset:0; background:var(--border); border-radius:99px; cursor:pointer; transition:background .2s; }
.pomp__toggle-sw input:checked + .pomp__toggle-track { background:var(--green); }
.pomp__toggle-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; pointer-events:none; }
.pomp__toggle-sw input:checked ~ .pomp__toggle-thumb { transform:translateX(16px); }

.pomp-area-btn {
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:.75rem 1rem; cursor:pointer; display:flex; align-items:center;
  gap:10px; font-size:.875rem; color:var(--text); font-family:var(--font);
  transition:background .15s, border-color .15s, transform .1s; text-align:left;
}
.pomp-area-btn span:first-child { font-size:1.25rem; width:26px; text-align:center; flex-shrink:0; }
.pomp-area-btn:hover { background:var(--bg); border-color:var(--green); }
.pomp-area-btn:active { transform:scale(.98); }

.pomp-opt-btn {
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:.875rem 1rem; cursor:pointer; display:flex; align-items:center;
  gap:10px; font-size:.875rem; color:var(--text); font-family:var(--font); text-align:left;
  transition:background .15s, border-color .15s, transform .1s;
}
.pomp-opt-btn:hover { background:var(--bg); border-color:var(--green); }
.pomp-opt-btn:active { transform:scale(.98); }
.pomp-opt-btn--urgent { border-color:#F7C1C1 !important; background:#FCEBEB !important; color:#A32D2D !important; }
.pomp-opt-btn__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; }

.pomp__back { background:none; border:none; cursor:pointer; font-size:.8125rem; color:var(--muted); padding:0 0 .75rem; display:flex; align-items:center; gap:5px; transition:color .15s; font-family:var(--font); }
.pomp__back:hover { color:var(--text); }

.pomp-result-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:1rem 1.25rem; margin-bottom:.75rem; }
.pomp-result-card--primary { border-color:var(--green); border-width:1.5px; }
.pomp-result-card--urgent  { border-color:#F7C1C1; background:#FCEBEB; }
.pomp-result-card__badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; margin-bottom:.6rem; }
.pomp-result-card__badge--primary { background:var(--green-lt); color:var(--green-dk); }
.pomp-result-card__badge--alt     { background:var(--bg); color:var(--muted); }
.pomp-result-card__title  { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:.25rem; }
.pomp-result-card__desc   { font-size:.8125rem; color:var(--muted); line-height:1.6; }
.pomp-result-card__number { font-size:1.75rem; font-weight:700; color:#A32D2D; margin-bottom:.2rem; }
.pomp__alt-label { font-size:11px; color:var(--muted); margin:.5rem 0 .4rem; }
.pomp__divider { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }
.pomp__cta { width:100%; justify-content:center; margin-bottom:.5rem; display:flex; }
.pomp__cta-reset {
  width:100%; background:none; border:1px solid var(--border); border-radius:var(--r);
  padding:.75rem; font-size:.875rem; color:var(--muted); cursor:pointer;
  transition:background .15s; display:block; text-align:center; font-family:var(--font);
}
.pomp__cta-reset:hover { background:var(--bg); }

/* Dynamická mezera – JS nastavuje margin-top jako zápornou hodnotu */
.pomp-benefits { transition: margin-top .3s ease; }

/* FD-PILL-01 */
.hero__new-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  border-radius:99px; padding:5px 14px; font-size:12px; color:rgba(255,255,255,.88);
  margin-bottom:14px; font-weight:500;
}
.hero__new-dot {
  width:6px; height:6px; background:var(--green-mid,#9FE1CB);
  border-radius:50%; flex-shrink:0; animation:hnd-pulse 2s ease-in-out infinite;
}
@keyframes hnd-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Responsive */
@media(max-width: 760px) {
  .pomp__opts-list { grid-template-columns: 1fr; }
  .pomp__area-grid { grid-template-columns: repeat(2, 1fr); }
  .pomp__mode-grid { grid-template-columns: 1fr; }
  .pomp__inner { padding: 1.5rem 1rem; }
}

/* ================================================================
   FD-POMP LAYOUT FIX – plná šířka stránky
   Problém: obsah byl centrovaný do ~640px místo plné šířky
   ================================================================ */

/* Sekce pomocníka přes celou šířku */
.pomp { width: 100%; }
.pomp__inner {
  padding-left:  max(28px, calc((100% - var(--max)) / 2)) !important;
  padding-right: max(28px, calc((100% - var(--max)) / 2)) !important;
}

/* Mode karty – roztáhnou se přes dostupnou šířku */
.pomp__mode-grid {
  max-width: 100% !important;
  grid-template-columns: 1fr 1fr !important;
}

/* Oblast těla – více sloupců na širokých obrazovkách */
.pomp__area-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}

/* Opts list – dvousloupcová mřížka přes celou šířku */
.pomp__opts-list {
  max-width: 100% !important;
  grid-template-columns: 1fr 1fr !important;
}
.pomp__opts-list .pomp-opt-btn--urgent { grid-column: 1 / -1 !important; }

/* Výsledkové karty – max šířka */
#pomp-result-primary,
#pomp-result-alt { max-width: 860px; }

/* Progress bar přes celou šířku */
.pomp__progress-wrap { width: 100%; }

/* Mobilní breakpoint */
@media(max-width: 640px) {
  .pomp__opts-list  { grid-template-columns: 1fr !important; }
  .pomp__mode-grid  { grid-template-columns: 1fr !important; }
  .pomp__area-grid  { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   FE KÓDY v2 – dev overlay pro všechny stránky
   ================================================================ */
.fe-code {
  display: none;
  position: absolute;
  top: 0; left: 0; z-index: 9999;
  background: #1D9E75; color: #fff;
  font: 700 9px/1 monospace;
  padding: 2px 6px;
  border-radius: 0 0 4px 0;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: .04em;
  user-select: none;
}
body.fd-codes-on [class] { position: relative; }
body.fd-codes-on .fe-code { display: inline-block; }

/* ================================================================
   FD-POMP-0 ŠÍŘKA – screeny využívají celou šířku .pomp__inner
   Problém: .pomp-screen a children se scvrkali na min-content
   ================================================================ */
.pomp-screen { width: 100%; }
.pomp__title { width: 100%; max-width: none !important; }
.pomp__mode-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
.pomp-mode-card {
  width: 100% !important;
  padding: 2rem 1.5rem !important;
}
.pomp-mode-card__icon  { font-size: 2.5rem !important; }
.pomp-mode-card__title { font-size: 1rem !important; }
.pomp__urgent-pill { display: flex !important; width: fit-content; }
.pomp__area-grid   { width: 100% !important; }
.pomp__opts-list   { width: 100% !important; max-width: none !important; }
@media(max-width: 640px) {
  .pomp__mode-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pomp-mode-card  { padding: 1.25rem 1rem !important; }
}

/* ================================================================
   FD-POMP FINÁLNÍ FIX – JEDNOU PROVŽDY
   pomp-screen.active byl display:block bez width → scvrkl se na obsah
   ================================================================ */
.pomp-screen.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pomp__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pomp__mode-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-self: stretch !important;
}
.pomp__title {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
}
@media(max-width: 640px) {
  .pomp__mode-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   FD-POMP DEFINITIVNÍ OPRAVA v3 – padding + progress bar
   ================================================================ */

/* 1. Jednoduchý padding bez max() kalkulace – žádné posouvání obsahu */
.pomp__inner {
  max-width: var(--max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2.5rem 28px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* 2. Screeny přes celou šířku */
.pomp-screen.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* 3. Mode grid přes celou šířku */
.pomp__mode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
}

/* 4. Nadpis přes celou šířku, hezký veliký font */
.pomp__title {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
}

/* 5. Progress bar – schovat na úvodním screenu, zobrazit až od kroku 1 */
.pomp__progress-wrap {
  height: 3px !important;
  background: transparent !important;
  transition: background .3s !important;
}
.pomp__progress-wrap.is-active {
  background: var(--green) !important;
}
.pomp__progress-bar  { height: 3px; background: rgba(255,255,255,.25); }
.pomp__progress-fill { height: 100%; background: #fff; transition: width .4s ease; }

/* 6. Urgent pill – zarovnaná vlevo */
.pomp__urgent-pill { align-self: flex-start !important; }

/* 7. Ostatní elementy přes celou šířku */
.pomp__area-grid { width: 100% !important; }
.pomp__opts-list { width: 100% !important; max-width: none !important; }
.pomp-mode-card  { width: 100% !important; padding: 1.75rem 1.25rem !important; }

/* 8. Mobile */
@media(max-width: 640px) {
  .pomp__inner     { padding: 1.5rem 16px !important; }
  .pomp__mode-grid { grid-template-columns: 1fr !important; }
  .pomp-mode-card  { padding: 1.25rem 1rem !important; }
}

/* FD-POMP-0 → FD-BENEFITS mezera */
.pomp-benefits { padding-top: 3rem !important; }

/* ================================================================
   FD-POMP-0-LABEL – logo Chytrého pomocníka (rozcestník)
   ================================================================ */
.pomp__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.pomp__logo-icon {
  flex-shrink: 0;
}
.pomp__logo-text {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.2px;
  color: var(--text);
}
.pomp__logo-text strong {
  font-weight: 700;
  color: var(--green);
}

/* ================================================================
   FD-POMP-0-URG – větší urgentní tlačítko, dva řádky textu
   ================================================================ */
.pomp__urgent-pill {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  align-self: flex-start !important;
  margin-bottom: 1.75rem !important;
  cursor: pointer;
  transition: background .15s !important;
}
.pomp__urgent-pill:hover { background: #f8d7d7 !important; }

.pomp__urgent-icon { flex-shrink: 0; }

.pomp__urgent-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.pomp__urgent-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #A32D2D;
  line-height: 1.2;
}
.pomp__urgent-text span {
  font-size: 12px;
  color: #A32D2D;
  opacity: .8;
  line-height: 1.3;
}

/* =============================================================================
   BL INSTITUTION DETAIL PANEL
   Otevírá se po kliknutí na kartu instituce na frontendu
   ============================================================================= */
.bl-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;
  display:none;align-items:flex-start;justify-content:flex-end}
.bl-detail-overlay.open{display:flex}
.bl-detail-panel{width:min(620px,100vw);height:100vh;background:#fff;overflow-y:auto;
  position:relative;box-shadow:-8px 0 40px rgba(0,0,0,.18);
  animation:slideInRight .25s ease-out}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.bl-detail-close{position:sticky;top:10px;float:right;margin:10px 12px 0 0;
  width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);
  background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;
  z-index:2;flex-shrink:0}
.bl-detail-close:hover{background:var(--bg)}
.bl-detail-content{padding:16px 20px 32px;clear:both}

/* Header */
.bld-header{background:linear-gradient(135deg,#064e3b 0%,#047857 100%);border-radius:10px;
  padding:18px 20px;display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:14px;flex-wrap:wrap}
.bld-header__icon{width:52px;height:52px;background:rgba(255,255,255,.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.bld-header__info{flex:1;min-width:0}
.bld-header__name{font-size:18px;font-weight:800;margin-bottom:2px;word-break:break-word}
.bld-header__type{font-size:12px;opacity:.8}
.bld-book-btn{background:#10B981;color:#fff;border:none;border-radius:8px;padding:8px 14px;
  font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0}
.bld-book-btn:hover{background:#059669;color:#fff}

/* Subnavigace */
.bld-subnav{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:14px;background:#fff;
  position:sticky;top:0;z-index:5}
.bld-snav{padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;background:none;
  border:none;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.bld-snav.active{color:#065f46;border-bottom-color:#10B981}
.bld-snav:hover{color:var(--text)}

/* Sections */
.bld-section{display:none}
.bld-section--active{display:block}
.bld-card{background:#f9fafb;border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin-bottom:12px}
.bld-card__title{font-size:13px;font-weight:700;margin-bottom:10px}
.bld-contacts{display:flex;flex-direction:column;gap:5px;font-size:13px}
.bld-contact-item{display:flex;align-items:center;gap:8px}
.bld-contact-item a{color:#065f46;text-decoration:none}
.bld-contact-item a:hover{text-decoration:underline}
.bld-desc{font-size:13px;color:var(--text);line-height:1.7}
.bld-hint{font-size:12px;color:var(--muted);font-style:italic;padding:4px 0}
.bld-error,.bld-loading{font-size:14px;color:var(--muted);text-align:center;padding:40px 20px}

/* Pracoviště */
.bld-wp{border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:#fff}
.bld-wp__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.bld-wp__dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.bld-wp__addr{font-size:11px;color:var(--muted)}
.bld-wp__map{font-size:11px;color:#065f46;text-decoration:none;margin-left:auto}
.bld-wp__contacts{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.bld-wp__contacts a{color:#065f46;text-decoration:none}

/* Oddělení */
.bld-dept{margin-left:14px;margin-bottom:8px;padding:8px 10px;background:#f8fafc;
  border-radius:8px;border-left:3px solid #cbd5e1}
.bld-dept__head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px;font-size:13px}
.bld-dept__contacts{font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.bld-dept__contacts a{color:#065f46;text-decoration:none}

/* Tagy */
.bld-tag{font-size:10px;padding:1px 7px;border-radius:8px;font-weight:600}
.bld-tag--green{background:#dcfce7;color:#065f46}
.bld-tag--blue{background:#eff6ff;color:#1d4ed8}

/* Ordinace – 2 sloupce (seznam + detail) */
.bld-rooms-split{display:flex;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;
  margin-top:6px;margin-left:14px;min-height:120px}
.bld-rooms-list{width:190px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;max-height:340px}
.bld-room-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.bld-room-item:hover{background:#f9fafb}
.bld-room-item.active{background:#f0fdf4;border-left:3px solid #10B981}
.bld-room-name{font-size:12px;font-weight:600;color:var(--text);word-break:break-word}
.bld-room-slot{font-size:10px;color:var(--muted);margin-top:1px}
.bld-room-spec{font-size:10px;color:#065f46;margin-top:2px}
.bld-rooms-detail{flex:1;overflow-y:auto;max-height:340px}
.bld-room-panel{display:none;padding:12px 14px}
.bld-room-panel.active{display:block}

/* Ordinace bez oddělení */
.bld-rooms-nodept{margin-left:14px;margin-top:6px}
.bld-room-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#f9fafb;
  border-radius:6px;margin-bottom:3px;flex-wrap:wrap}
.bld-room-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bld-room-name{font-size:12px;font-weight:600}
.bld-room-slot{font-size:10px;color:var(--muted)}
.bld-section-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin:6px 0 3px}

/* Hodiny v detailu ordinace */
.bld-room-detail__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.bld-hours{margin-bottom:10px}
.bld-hours__row{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid #f3f4f6;font-size:12px}
.bld-hours__day{width:28px;font-weight:600;flex-shrink:0}
.bld-hours__time{color:#065f46}
.bld-hours__break{color:var(--muted);font-size:11px}
.bld-hours__closed{color:var(--muted)}
.bld-feats{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:12px}
.bld-feat{color:var(--text)}

/* Provider card – cursor pointer pro celou kartu.
   CH-7 OPRAVA (grep při finálním kódování karet): tohle pravidlo dřív
   znovu přidávalo box-shadow na hover, PŘESTOŽE schválený design (sekce
   D-INST výše) explicitně chce jen zelený rámeček bez stínu. Protože je
   toto pravidlo v souboru POZDĚJI, tiše přebíjelo box-shadow:none ze
   sekce D-INST — stejná třída bugu jako opakovaně u bl_modals.js/CSS
   (viz instructions.md bod 5). Box-shadow na hover odstraněn. */
.provider-card{cursor:pointer}

/* ================================================================
   KROK 2026-09-04 (bug — "méně" tlačítko leze mimo obrazovku na mobilu)
   Příčina: .ebar__footer-btns (řádek ~1696) má flex-direction:row,
   flex-shrink:0 a margin-left:auto natvrdo, BEZ vlastní mobilní úpravy
   — mobilní pravidlo na .ebar__footer (řádek ~1954, flex-direction:
   column) mění jen rodiče, ne tenhle vnitřní blok se dvěma tlačítky,
   takže "Vyhledat" + "méně" zůstávají vedle sebe v řadě i na malém
   displeji a nemají se kam vejít (nahlásil uživatel — vidět na
   screenshotu, "méně" ořezané za okrajem displeje).
   Řešení: na mobilu tenhle vnitřní blok taky přepnout na sloupec, obě
   tlačítka na plnou šířku. column-reverse místo column — "méně"
   (btn-ebar-simple) je v DOM AŽ DRUHÉ (za "Vyhledat"), column-reverse
   ho tak přirozeně vykreslí NAHOŘE, přesně jak uživatel navrhl
   ("nad tlačítko Vyhledat"), bez nutnosti měnit pořadí v HTML. Poslední
   pravidlo v souboru = vyhrává v cascade nad staršími !important verzemi
   výš, co měly stejnou specificitu. */
@media(max-width: 680px) {
  .ebar__footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ebar__footer-btns {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
    flex-shrink: 1 !important;
    gap: 8px !important;
  }
  .ebar__footer-btns .search-bar__btn,
  .ebar__footer-btns .btn-ebar-simple {
    width: 100% !important;
    justify-content: center !important;
  }
}