/* =============================================================================
   Iconzone — rezervační prototyp v1
   styles.css — vizuál podle skillu iconzone-web-brand-manual (verze 2)

   VŠECHNO je prefixované .iz-rez-. Žádný selektor na body, *, h1–h6.
   Výstup poletí do WordPressu vedle cizích stylů a nesmí rozbít zbytek stránky.

   Vědomé odchylky od živého webu (skill, sekce 6): tmavý text v tlačítku,
   rám pole #6E6E6E místo #DDD, pole 48 px místo 43 px, text 16 px místo 14 px.
   ========================================================================== */

/* Jediná třída na <body> — pro prototyp, aby stránka měla béžovou plochu.
   Při vložení do WordPressu tuhle třídu z body sundat, plochu řeší šablona. */
.iz-rez-standalone { margin: 0; background: #d8cbb6; }

/* --- tokeny, scopnuté do obalu ------------------------------------------- */

.iz-rez {
  --iz-rez-text:         #333333;
  --iz-rez-heading:      #3a3a3a;
  --iz-rez-muted:        #4b4f58;
  --iz-rez-white:        #ffffff;
  --iz-rez-sand:         #d8cbb6;
  --iz-rez-sand-deep:    #c3b08f;
  --iz-rez-field-bg:     #fafafa;
  --iz-rez-field-border: #6e6e6e;
  --iz-rez-error:        #8c1d18;

  /* placeholder v poli — vlastní, výrazně světlejší token než --iz-rez-muted.
     --iz-rez-muted (#4b4f58) je na bílém pozadí poli skoro nerozeznatelný
     od skutečně vyplněného textu (--iz-rez-text #333333) — placeholder typu
     „000 000 000" pak vypadal jako už zadané číslo. */
  --iz-rez-placeholder:  #9a9ea5;

  /* vybraná dlaždice (den i čas) — teplá hnědá místo syrové černé,
     kontrast prakticky totožný s #333333 (12,66 vs 12,63 na bílém textu,
     7,92 vs 7,90 proti pozadí stránky), takže čitelnost se nemění. */
  --iz-rez-vybrano:      #3e3028;

  /* světlé podbarvení řádku pod kurzorem — našeptávač příjmení (28. 9. 2026).
     Musí zůstat tak světlé, aby na něm --iz-rez-text držel kontrast; tmavé
     --iz-rez-vybrano se na položku seznamu nehodí, ta se jen zvýrazňuje. */
  --iz-rez-vyber-svetly: #f1eadc;

  /* disabled — pevná neutrální šedá, ne průhledná písková. Odlišná barevná
     rodina než --iz-rez-vybrano a --iz-rez-sand-deep schválně: „vybráno"
     a „nejde kliknout" musí jít od sebe poznat na první pohled, ne jen
     odstínem průhlednosti. */
  --iz-rez-disabled-bg:     #e7e1d3;
  --iz-rez-disabled-border: #cdc4ae;
  --iz-rez-disabled-text:   #8a8474;

  /* uplynulá buňka v Týdnu — neutrální šedá, schválně jiná barevná rodina
     než písková škála mřížky. Proti #c3b08f („plno") a #eadfc9 („část
     obsazená") se pozná hned, že políčko už není živé. Text 4,66 : 1
     na tomhle pozadí, takže zkratka ošetření zůstane čitelná. */
  --iz-rez-uplynulo:      #cac8c5;
  --iz-rez-uplynulo-text: #55524d;

  /* bodovaný termín — teplý zlatý akcent, ne varovná barva.
     Rámeček musí být SILNĚJŠÍ než obyčejná dlaždice, jinak se zvýrazněná
     dlaždice čte jako méně důležitá. Proti pozadí stránky: běžný rámeček
     #6e6e6e má 3,19 : 1, původní zlatý #ab9163 jen 1,89 : 1 — proto
     #7a5f30 s 3,75 : 1. Váha jde do rámečku, ne do výplně: tmavší výplň
     sice pomůže zblízka, ale na dálku se dlaždice slije s béžovým pozadím. */
  --iz-rez-bod-bg:       #f5eddc;
  --iz-rez-bod-line:     #7a5f30;
  --iz-rez-bod-star:     #7a5f30;

  /* štítek SMS v Dni (7. 10. 2026) — stejný tvar jako „★ bod".
     Zelená = připomínka odejde / odešla, červená = neodejde. Text i rámeček
     drží na své výplni kontrast přes 4,5 : 1. */
  --iz-rez-sms-bg:        #e3eedb;
  --iz-rez-sms-line:      #4a7a3f;
  --iz-rez-sms-text:      #2f5d33;
  --iz-rez-sms-chyba-bg:  #f8e1df;

  /* Zlatý odznak bodovaného termínu na klientském formuláři (kolečko
     s hvězdou v rohu dlaždice + menší varianta ve větě nad mřížkou).
     Samostatný token od --iz-rez-bod-* výš — ty zůstávají beze změny pro
     štítek „★ bod" v adminu, který má jiné, plošší zobrazení (viz níž). */
  --iz-rez-bod-badge:    #b8860b;

  --iz-rez-font-head: "Brygada 1918", Georgia, serif;
  --iz-rez-font-body: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;

  --iz-rez-h2: 48px;    --iz-rez-h2-lh: 62px;
  --iz-rez-h3: 24px;    --iz-rez-h3-lh: 31px;
  --iz-rez-h4: 20px;    --iz-rez-h4-lh: 24px;
  --iz-rez-kicker: 16px;
  --iz-rez-body: 16px;  --iz-rez-body-lh: 26px;
  --iz-rez-btn: 17px;

  --iz-rez-container: 1200px;
  --iz-rez-gap: 24px;
  --iz-rez-pill: 30px;
  --iz-rez-radius: 6px;
  --iz-rez-field-h: 48px;
  --iz-rez-tracking: 2px;

  background: var(--iz-rez-sand);
  color: var(--iz-rez-text);
  font: 400 var(--iz-rez-body)/var(--iz-rez-body-lh) var(--iz-rez-font-body);
  min-height: 100vh;
  padding-bottom: 48px;
  box-sizing: border-box;

  /* iOS Safari v režimu na šířku samo zvětšuje písmo v širších blocích
     (text autosizing) — popisek „poznámka" přes dva sloupce pak byl větší
     než „e-mail" vedle. Tohle ho vypne, velikosti řídí jen CSS. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.iz-rez *,
.iz-rez *::before,
.iz-rez *::after { box-sizing: border-box; }

@media (max-width: 921px) {
  .iz-rez { --iz-rez-h2: 28px; --iz-rez-h2-lh: 36px; --iz-rez-kicker: 15px; }
}

/* --- layout -------------------------------------------------------------- */

.iz-rez-container {
  max-width: var(--iz-rez-container);
  margin-inline: auto;
  padding-inline: 24px;
}

.iz-rez-topbar { border-bottom: 1px solid var(--iz-rez-sand-deep); }
.iz-rez-topbar__in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding-block: 12px;
}
.iz-rez-zpet {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 14px;
  border: 1px solid var(--iz-rez-text); border-radius: var(--iz-rez-pill);
  background: transparent;
  font: 600 16px/1 var(--iz-rez-font-body);   /* normální písmena, ne verzálky */
  text-decoration: none; white-space: nowrap;
}
.iz-rez-zpet:hover { background: rgba(255, 255, 255, .35); }
.iz-rez-zpet__sipka { font-size: 20px; line-height: 1; margin-top: -2px; }
.iz-rez-toplogo {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 4px; border-radius: var(--iz-rez-radius);
}
.iz-rez-toplogo img { display: block; width: 118px; height: auto; }
@media (min-width: 600px) {
  .iz-rez-toplogo { position: absolute; left: 50%; transform: translateX(-50%); }
  .iz-rez-toplogo img { width: 160px; }
}

/* Spuštěno z ikony na ploše telefonu (zadání 21. 9. 2026). Tam je aplikace
   sama v okně bez adresního řádku a odkaz „Zpět na web" vede mimo ni — iOS
   by ho otevřel v druhém okně Safari a klientka skončí ve dvou aplikacích.
   Lištu proto schováme, v samostatném okně nemá co dělat. */
@media (display-mode: standalone) {
  .iz-rez-topbar { display: none; }
  .iz-rez-head { padding-top: 24px; }
}

.iz-rez-head { padding: 40px 0 32px; text-align: center; }
.iz-rez-logo { display: block; width: 210px; height: auto; margin: 0 auto 24px; }

.iz-rez-kicker {
  font: 500 var(--iz-rez-kicker)/22px var(--iz-rez-font-head);
  letter-spacing: var(--iz-rez-tracking);
  text-transform: uppercase;
  color: var(--iz-rez-muted);
  margin: 0 0 12px;
}

.iz-rez-h2 {
  font: 600 var(--iz-rez-h2)/var(--iz-rez-h2-lh) var(--iz-rez-font-head);
  color: var(--iz-rez-heading);
  text-align: center;
  margin: 0 0 var(--iz-rez-gap);
}

.iz-rez-h3 {
  font: 600 var(--iz-rez-h3)/var(--iz-rez-h3-lh) var(--iz-rez-font-head);
  color: var(--iz-rez-heading);
  margin: 0 0 12px;
}

.iz-rez-h4 {
  font: 600 var(--iz-rez-h4)/var(--iz-rez-h4-lh) var(--iz-rez-font-head);
  color: var(--iz-rez-heading);
  margin: 0 0 8px;
}

.iz-rez-lead { max-width: 750px; margin: 0 auto; color: var(--iz-rez-muted); }
.iz-rez-note { font-size: 14px; line-height: 22px; color: var(--iz-rez-muted); margin: 8px 0 0; }
.iz-rez-note--center { text-align: center; }
.iz-rez-form { max-width: 750px; margin: 0 auto; }

.iz-rez-step { margin: 0 0 40px; }
.iz-rez-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: 10px; vertical-align: middle;
  border: 1px solid var(--iz-rez-text); border-radius: 50%;
  font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-text);
}
/* hotový krok: plné kolečko s fajfkou (JS oznacHotoveKroky) */
.iz-rez-step--hotovo .iz-rez-step-num {
  background: var(--iz-rez-vybrano); border-color: var(--iz-rez-vybrano);
  color: var(--iz-rez-white);
}

/* --- tlačítko ------------------------------------------------------------ */

.iz-rez-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--iz-rez-field-h); min-width: 48px;
  font: 600 var(--iz-rez-btn) var(--iz-rez-font-body);
  letter-spacing: var(--iz-rez-tracking);
  text-transform: uppercase;               /* verzálky dělá CSS, ne HTML */
  text-decoration: none; padding: 12px 24px;
  border-radius: var(--iz-rez-pill);
  background: var(--iz-rez-sand-deep);
  border: 1px solid var(--iz-rez-text);
  color: var(--iz-rez-text);               /* NE bílá — bílá má na zlaté 2,1:1 */
  cursor: pointer; transition: filter .2s ease;
}
.iz-rez-btn:hover { filter: brightness(0.94); }
.iz-rez-btn[disabled] {
  opacity: 1; cursor: not-allowed; filter: none; pointer-events: none;
  background: var(--iz-rez-disabled-bg); border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text);
}
.iz-rez-btn--wide { width: 100%; }
.iz-rez-btn--small {
  font-size: 14px; letter-spacing: 1px; padding: 8px 16px;
  min-height: 40px; border-radius: var(--iz-rez-pill);
}
.iz-rez-btn--ghost { background: transparent; }
.iz-rez-btn--danger { background: var(--iz-rez-error); color: var(--iz-rez-white); border-color: #5d1310; }

/* Čeká se na server — tlačítko NEzešedne (to znamená „nejde kliknout"),
   jen před textem točí kolečko. Klik blokuje JS příznak, ne disabled. */
.iz-rez-btn--loading { cursor: progress; gap: 10px; }
.iz-rez-btn--loading::before {
  content: ''; flex: none; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: iz-rez-otacej .8s linear infinite;
}
@keyframes iz-rez-otacej { to { transform: rotate(360deg); } }
/* bez pohybu zůstane stojící půlkruh — pořád je poznat, že se něco děje */
@media (prefers-reduced-motion: reduce) {
  .iz-rez-btn--loading::before { animation: none; }
}

/* Vybraná záložka hlavního menu — stejná barva jako vybraný den/čas
   u klientky (--iz-rez-vybrano), ne obyčejná písková jako kterékoli
   jiné tlačítko. Vysoká specificita schválně, ať vyhraje i nad --ghost,
   které JS na aktivní záložce zrovna sundává. */
.iz-rez-tabs [role="tab"][aria-selected="true"] {
  background: var(--iz-rez-vybrano); border-color: var(--iz-rez-vybrano); color: var(--iz-rez-white);
}

/* focus je vidět na všem, co jde ovládat */
.iz-rez a:focus-visible,
.iz-rez button:focus-visible,
.iz-rez input:focus-visible,
.iz-rez select:focus-visible,
.iz-rez textarea:focus-visible {
  outline: 2px solid var(--iz-rez-text);
  outline-offset: 2px;
}

/* --- formulářová pole ---------------------------------------------------- */

.iz-rez-row { margin: 0 0 20px; }

.iz-rez-label {
  display: block; margin-bottom: 6px;
  font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-text);
  /* malá písmena, žádné verzálky — ty patří jen tlačítkům, navigaci a kickeru */
}
.iz-rez-label__hint { font-weight: 400; color: var(--iz-rez-muted); }

.iz-rez-field {
  display: block; width: 100%;
  min-height: var(--iz-rez-field-h); padding: 12px;
  font: 400 var(--iz-rez-body) var(--iz-rez-font-body);   /* 16 px: iOS jinak zoomuje */
  color: var(--iz-rez-text);
  background: var(--iz-rez-field-bg);
  border: 1px solid var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
}
.iz-rez-field::placeholder { color: var(--iz-rez-placeholder); opacity: 1; }
.iz-rez-field[aria-invalid="true"] { border-color: var(--iz-rez-error); border-width: 2px; }
.iz-rez-field[disabled] {
  background: var(--iz-rez-disabled-bg); border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text); cursor: not-allowed; opacity: 1;
}

/* Datum a čas mají pevný formát — na rozdíl od textových polí nikdy
   nepotřebují roztáhnout na celou šířku mřížky. Stejná zbytečná mezera
   jako dřív u týdenní tabulky, jen v jiných formulářích. */
.iz-rez-field[type="date"],
.iz-rez-field[type="time"],
.iz-rez-cas {
  width: auto; min-width: 160px; max-width: 220px;
}

/* iOS Safari kreslí datum a čas jako nativní prvek s vlastní minimální
   šířkou i výškou a text centruje — v mřížce „Přidat rezervaci ručně" pak
   pole přetékalo do vedlejšího a na výšku mimo obrazovku. appearance: none
   ho srovná s ostatními poli; výběr data po klepnutí zůstává nativní. */
.iz-rez-field[type="date"],
.iz-rez-field[type="time"] {
  -webkit-appearance: none; appearance: none;
  height: var(--iz-rez-field-h);
}
.iz-rez-field::-webkit-date-and-time-value { text-align: left; }

/* Roletky času v adminu. Vybraná položka je tmavě hnědá — stejná barva
   jako vybraná dlaždice v rezervaci u klientky, ne systémová modrá.
   Prohlížeč si popup kreslí sám, takže tohle platí na Windows a Linuxu;
   macOS barvu seznamu ignoruje a použije systémovou. */
.iz-rez-cas option { background: var(--iz-rez-field-bg); color: var(--iz-rez-text); }
.iz-rez-cas option:checked,
.iz-rez-cas option:hover {
  background: var(--iz-rez-vybrano); color: var(--iz-rez-white);
}

select.iz-rez-field {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.iz-rez-error {
  display: block; margin-top: 6px;
  font: 400 14px/20px var(--iz-rez-font-body); color: var(--iz-rez-error);
}
.iz-rez-error:empty { display: none; }

.iz-rez-check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--iz-rez-field-h); padding: 6px 0;
  font: 400 var(--iz-rez-body)/1.5 var(--iz-rez-font-body);
  color: var(--iz-rez-text); cursor: pointer;
}
/* Dvě zaškrtávátka u volných termínů vedle sebe (zadání 22. 9. 2026).
   Žádný breakpoint — wrap zalomí řádek přesně tam, kde už se nevejde,
   takže na počítači i tabletu stojí vedle sebe a na úzkém mobilu pod sebou. */
.iz-rez-check-radek { display: flex; flex-wrap: wrap; gap: 0 32px; }

/* Hvězdička „za věrnostní bod“ v zaškrtávátku (zadání v15). Odznak
   je flex kolečko, proto potřebuje flexový řádek kolem sebe — stejně
   jako na klientské stránce v .iz-rez-bonus. */
.iz-rez-check__bod { display: flex; align-items: center; gap: 8px; }

.iz-rez-check input {
  flex: none; width: 24px; height: 24px; margin: 2px 0 0;
  accent-color: var(--iz-rez-vybrano);
}
.iz-rez a { color: var(--iz-rez-text); }

/* „Potřebujete poradit? ↓" — text lícuje s textem v selectu nad ním:
   vnitřní odsazení .iz-rez-field (12px) + jeho rám (1px) */
.iz-rez-poradit {
  margin: 4px 0 0; padding-left: calc(12px + 1px);
  font-size: 16px; line-height: 24px; color: var(--iz-rez-muted);
}
.iz-rez-poradit a { display: inline-block; padding-block: 12px; text-underline-offset: 3px; }

.iz-rez-pomoc {
  margin-top: 32px; padding: 24px 20px;
  border: 1px solid var(--iz-rez-text); border-radius: var(--iz-rez-radius);
  text-align: center; transition: box-shadow .5s;
}
.iz-rez-pomoc .iz-rez-h4 { margin: 0 0 8px; }
.iz-rez-pomoc .iz-rez-h4:focus { outline: none; }   /* focus jen programový, tabem se nedá */
.iz-rez-pomoc p { margin: 0 0 16px; }
.iz-rez-pomoc__tlacitka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iz-rez-pomoc__tlacitka .iz-rez-btn { font-size: 15px; letter-spacing: 1px; padding: 12px 8px; }
@media (max-width: 360px) { .iz-rez-pomoc__tlacitka { grid-template-columns: 1fr; } }
.iz-rez-pomoc--flash { box-shadow: 0 0 0 4px var(--iz-rez-vybrano); }
.iz-rez-zpet-nahoru { display: inline-block; margin-top: 12px; padding-block: 12px; font-size: 16px; }
.iz-rez-zpet-nahoru[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .iz-rez-pomoc { transition: none; } }

/* --- pás dnů ------------------------------------------------------------- */

.iz-rez-days {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.iz-rez-day {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 88px; min-height: 76px; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--iz-rez-field-bg);
  border: 1px solid var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
  font: 400 var(--iz-rez-body) var(--iz-rez-font-body);
  color: var(--iz-rez-text); cursor: pointer;
}
.iz-rez-day b { font-weight: 600; }
.iz-rez-day small { font-size: 13px; color: var(--iz-rez-muted); }
.iz-rez-day[aria-pressed="true"] {
  background: var(--iz-rez-vybrano); border-color: var(--iz-rez-vybrano); color: var(--iz-rez-white);
}
.iz-rez-day[aria-pressed="true"] small { color: var(--iz-rez-white); }
.iz-rez-day[disabled] {
  background: transparent; border-style: dashed; color: var(--iz-rez-muted);
  cursor: not-allowed; text-decoration: line-through;
}
.iz-rez-day[disabled] small { text-decoration: none; }

/* --- mřížka časů --------------------------------------------------------- */

.iz-rez-slots {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.iz-rez-slot {
  position: relative;                 /* kvůli hvězdičce bodovaného termínu */
  min-height: 48px; padding: 12px 8px;
  background: var(--iz-rez-field-bg);
  border: 1px solid var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
  font: 600 var(--iz-rez-body) var(--iz-rez-font-body);
  color: var(--iz-rez-text); cursor: pointer;
}
.iz-rez-slot[aria-pressed="true"] {
  background: var(--iz-rez-vybrano); border-color: var(--iz-rez-vybrano); color: var(--iz-rez-white);
}

/* --- bodovaný termín -----------------------------------------------------
   Zvýrazňujeme čas, kde už někdo je — klientka tím salon doplní a dostane
   bod do věrnostního programu.

   UX test ukázal, že zlaté pozadí + silnější rámeček klientky četly jako
   „obsazeno", ne „volno + odměna". Dlaždice má teď STEJNÉ pozadí a rámeček
   jako obyčejná volná — signál nese jen zlatý odznak v rohu, žádná změna
   plochy pod ním. */

.iz-rez-slot-hvezda {
  position: absolute; top: -9px; right: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--iz-rez-bod-badge); color: var(--iz-rez-white);
  font-size: 15px; line-height: 1; font-weight: 400;
  /* druhý stín je obrys v barvě pozadí dlaždice pod odznakem — odsazuje
     odznak od okraje dlaždice, ať nepůsobí uřízlý */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 2px var(--iz-rez-field-bg);
}
.iz-rez-slot[aria-pressed="true"] .iz-rez-slot-hvezda {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 2px var(--iz-rez-vybrano);
}

/* --- už tam je jiná rezervace (jen adminka) --------------------------------
   Kontext pro administrátorku, ne odměna jako u bodu — proto neutrální
   tlustý rámeček, ne zlatá. Box-shadow místo border-width ze stejného
   důvodu jako u --bod: dlaždice si drží stejný rozměr jako ostatní. */
.iz-rez-slot--obsazeno {
  box-shadow: inset 0 0 0 1px var(--iz-rez-text);
}
.iz-rez-slot[aria-pressed="true"].iz-rez-slot--obsazeno { box-shadow: none; }
.iz-rez-slot-obsazeno {
  display: block; margin-top: 2px;
  font: 400 11px var(--iz-rez-font-body); letter-spacing: .2px;
  color: var(--iz-rez-error);
}
.iz-rez-slot[aria-pressed="true"] .iz-rez-slot-obsazeno { color: var(--iz-rez-white); }

/* --- zamrzlý formulář po úspěšné rezervaci ---------------------------------
   Ne native [disabled] na dlaždicích dnů/časů — ten už znamená „termín není
   k dispozici" (přeškrtnuté, čárkovaný rámeček, viz .iz-rez-day[disabled]
   výš). Zamrzlý stav po rezervaci má jiný význam (hotovo, jen pro přehled),
   proto samostatná třída na formuláři, ne ta samá vlastnost. */
.iz-rez-frozen .iz-rez-day,
.iz-rez-frozen .iz-rez-slot {
  pointer-events: none; cursor: not-allowed;
  background: var(--iz-rez-disabled-bg); border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text); box-shadow: none;
}
.iz-rez-frozen .iz-rez-day[aria-pressed="true"],
.iz-rez-frozen .iz-rez-slot[aria-pressed="true"] {
  background: var(--iz-rez-disabled-border);
}
.iz-rez-frozen .iz-rez-day small,
.iz-rez-frozen .iz-rez-slot-hvezda,
.iz-rez-frozen .iz-rez-slot-obsazeno { color: var(--iz-rez-disabled-text); }

/* --- akce po úspěšné rezervaci ---------------------------------------------
   Nahradí řádky s GDPR/storno informací — viz zavriModal() v app.js. */
.iz-rez-po-rezervaci { margin-top: 20px; }
.iz-rez-po-rezervaci .iz-rez-btn + .iz-rez-btn { margin-top: 12px; }
/* .iz-rez-btn má display: inline-flex, který by atribut hidden přebil */
.iz-rez-po-rezervaci [hidden] { display: none; }

.iz-rez-bonus {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px;
  font-size: 14px; line-height: 22px;
  color: var(--iz-rez-muted);
}
.iz-rez-bonus[hidden] { display: none; }
/* Menší odznak stejného vzhledu jako na dlaždici (75 % — 18 px místo 24 px),
   ať věta a dlaždice mluví stejnou barvou/tvarem. Vycentrovaný k textu přes
   flex na .iz-rez-bonus výš, ne vertical-align — spolehlivější napříč
   prohlížeči než ladění posunu od základní linky textu. */
.iz-rez-bonus-hvezda {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--iz-rez-bod-badge); color: var(--iz-rez-white);
  font-size: 11px; line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.iz-rez-empty {
  padding: 16px; border: 1px dashed var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
  font-size: var(--iz-rez-body); line-height: var(--iz-rez-body-lh);
  color: var(--iz-rez-muted);
}
.iz-rez-empty a { color: var(--iz-rez-text); white-space: nowrap; }

/* --- souhrn výběru ------------------------------------------------------- */

.iz-rez-summary {
  padding: 16px; margin: 0 0 24px;
  border: 1px solid var(--iz-rez-text); border-radius: var(--iz-rez-radius);
  background: rgba(255, 255, 255, .35);
  font-size: var(--iz-rez-body); line-height: var(--iz-rez-body-lh);
}
.iz-rez-summary b { font-weight: 600; }

/* --- modální potvrzení --------------------------------------------------- */

.iz-rez-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .44);
}
.iz-rez-modal[hidden] { display: none; }
.iz-rez-modal__box {
  position: relative; width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  padding: 32px 24px; background: var(--iz-rez-sand);
  border: 1px solid var(--iz-rez-text); border-radius: var(--iz-rez-radius);
  font-size: var(--iz-rez-body); line-height: var(--iz-rez-body-lh);
}
.iz-rez-modal__close {
  position: absolute; top: 8px; right: 8px;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  font: 400 24px/1 var(--iz-rez-font-body); color: var(--iz-rez-text); cursor: pointer;
}
.iz-rez-modal__close:hover { background: rgba(0, 0, 0, .06); }
.iz-rez-modal p { margin: 0 0 12px; }
.iz-rez-modal .iz-rez-h4 { padding-right: 44px; }   /* ať nadpis nepodleze křížek */

/* --- patička ------------------------------------------------------------- */

.iz-rez-footer {
  margin-top: 48px; padding: 32px 24px;
  background: var(--iz-rez-sand-deep); color: var(--iz-rez-text);
  font-size: var(--iz-rez-body); line-height: var(--iz-rez-body-lh);
  text-align: center;
}
.iz-rez-footer p { margin: 0 0 4px; }

/* =============================================================================
   ADMIN — jen doplněk, stejné tokeny
   ========================================================================== */

.iz-rez-warn {
  padding: 12px 16px; margin: 0 0 24px;
  border: 2px solid var(--iz-rez-error); border-radius: var(--iz-rez-radius);
  background: rgba(255, 255, 255, .5);
  font-size: 14px; line-height: 22px; color: var(--iz-rez-error);
}

.iz-rez-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 24px; }
.iz-rez-tabs__odhlasit { margin-left: auto; }
/* Ikony v menu (zadání v10) — emoji bez proložení písma velkých písmen */
.iz-rez-tabs__ikona { font-size: 18px; line-height: 1; letter-spacing: 0; }
/* Klientky a Nastavení — černé SVG, větší než emoji; na vybrané záložce
   přebírají bílou barvu tlačítka (currentColor) */
.iz-rez-tabs__ikona--svg { display: inline-flex; color: #111111; }
.iz-rez-tabs [aria-selected="true"] .iz-rez-tabs__ikona--svg { color: inherit; }
.iz-rez-tabs__ikona--svg svg { width: 24px; height: 24px; display: block; }
.iz-rez-tabs .iz-rez-tabs__ikonovy { padding-inline: 14px; }
/* kruh: .iz-rez-btn má min-width 48 px, bez přepsání by z kruhu byl ovál */
.iz-rez-tabs .iz-rez-tabs__obnovit { width: 40px; min-width: 40px; padding: 0; border-radius: 50%; }

/* Zkrácení popisků na úzkém mobilu — viz @media (max-width: 430px) níž.
   Ve výchozím stavu je vidět text, zkratka z data-zkratka se nevykresluje. */
.iz-rez-tabs__text { display: inline; }
[data-zkratka]::before { content: none; }

.iz-rez-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 0 0 20px;
}
.iz-rez-toolbar > div { flex: 0 1 auto; }
.iz-rez-toolbar .iz-rez-field { width: auto; min-width: 160px; }

/* štítky vybraných klientek — viditelné i pro řádky skryté aktuálním filtrem */
.iz-rez-kl-stitky {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 4px 0 0; padding: 0; width: 100%;
}
.iz-rez-kl-stitky:empty { display: none; }
.iz-rez-kl-stitek {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 12px; border-radius: var(--iz-rez-pill);
  border: 1px solid var(--iz-rez-text); font-size: 13px;
  background: var(--iz-rez-field-bg);
}
.iz-rez-kl-stitek button {
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  font: 400 16px/1 var(--iz-rez-font-body); color: var(--iz-rez-text); cursor: pointer;
}
.iz-rez-kl-stitek button:hover { background: rgba(0, 0, 0, .08); }

.iz-rez-panel { margin: 0 0 40px; }
.iz-rez-panel[hidden] { display: none; }

.iz-rez-card {
  padding: 20px; margin: 0 0 24px;
  border: 1px solid var(--iz-rez-field-border); border-radius: var(--iz-rez-radius);
  background: rgba(255, 255, 255, .35);
}

/* denní přehled */
.iz-rez-daylist { display: flex; flex-direction: column; gap: 6px; }
.iz-rez-block {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px;
  padding: 10px 12px; border-radius: var(--iz-rez-radius);
  border: 1px solid var(--iz-rez-field-border);
  background: var(--iz-rez-field-bg);
}
/* zavřené bloky drž nízké, ať v seznamu nepřeválcují pracovní dobu */
.iz-rez-block--closed {
  background: transparent; border-style: dashed; color: var(--iz-rez-muted);
  padding: 4px 12px; font-size: 13px; line-height: 20px; align-items: center;
}
.iz-rez-block--closed .iz-rez-block__time { font-weight: 400; }
.iz-rez-block--closed .iz-rez-block__free { font-size: 13px; line-height: 20px; }
.iz-rez-block__time { font-weight: 600; }
.iz-rez-block__free { font-size: 14px; line-height: 20px; color: var(--iz-rez-muted); }
.iz-rez-block__full { color: var(--iz-rez-error); }

/* Den — kulaté tlačítko pro zavolání klientce, vždy na konci řádku */
.iz-rez-block--volat { grid-template-columns: 74px 1fr auto; align-items: center; }
.iz-rez-block--volat .iz-rez-block__time { align-self: start; padding-top: 8px; }
/* .iz-rez a { color } by jinak přebilo bílou a ikona by splynula s kruhem */
.iz-rez .iz-rez-volat {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--iz-rez-vybrano); color: #fff; text-decoration: none;
  transition: filter .15s, transform .1s;
}
.iz-rez-volat:hover { filter: brightness(1.2); }
.iz-rez-volat:active { transform: scale(.94); }
.iz-rez-volat:focus-visible { outline: 2px solid var(--iz-rez-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .iz-rez-volat { transition: none; } .iz-rez-volat:active { transform: none; } }

/* Proužek rezervace v Dni je klikací — otevře okno Změnit / Zrušit (28. 9. 2026).
   Tlačítko nese obě sloupce původní mřížky a telefon zůstává jeho sourozencem:
   odkaz uvnitř tlačítka je neplatné HTML a na klávesnici se chová nepředvídatelně.
   Rozměry ani odsazení proužku se tím nemění, jen přibude stav pod myší. */
.iz-rez-block--klik { grid-template-columns: 1fr; }
.iz-rez-block--klik.iz-rez-block--volat { grid-template-columns: 1fr auto; }
.iz-rez-block__akce {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start;
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--iz-rez-radius); transition: background .15s;
}
.iz-rez-block__akce:hover { background: rgba(255, 255, 255, .55); }
.iz-rez-block__akce:hover .iz-rez-booking__who { text-decoration: underline; }
.iz-rez-block__akce:focus-visible { outline: 2px solid var(--iz-rez-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .iz-rez-block__akce { transition: none; } }

/* Našeptávač příjmení v ruční rezervaci (28. 9. 2026).
   Roletka visí pod polem a překrývá, co je pod ním — proto z-index nad
   ostatní pole formuláře. Obal musí být position: relative, jinak by se
   ukotvila k celé stránce. */
.iz-rez-napoveda-obal { position: relative; }
.iz-rez-napoveda {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--iz-rez-white); border: 2px solid #111111;
  border-radius: var(--iz-rez-radius);
  box-shadow: 0 8px 20px rgba(51, 41, 26, .18);
  max-height: 320px; overflow: hidden auto;
}
.iz-rez-napoveda__volba {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
  /* 52 px je dotykový cíl — na mobilu se musí dát trefit prstem */
  width: 100%; padding: 12px 14px; min-height: 52px;
  border: 0; border-top: 1px solid var(--iz-rez-field-border);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.iz-rez-napoveda__volba:first-child { border-top: 0; }
.iz-rez-napoveda__volba:hover,
.iz-rez-napoveda__volba.je-aktivni { background: var(--iz-rez-vyber-svetly); }
.iz-rez-napoveda__volba:focus-visible { outline: 2px solid var(--iz-rez-text); outline-offset: -2px; }
.iz-rez-napoveda__kdo { min-width: 0; }
.iz-rez-napoveda__kdo b { font-weight: 600; }
.iz-rez-napoveda__kdo mark { background: #ebd9a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.iz-rez-napoveda__tel { font-variant-numeric: tabular-nums; color: var(--iz-rez-muted); font-size: 14px; }
.iz-rez-napoveda__tel--bez { font-style: italic; }
.iz-rez-napoveda__pozn {
  margin: 0; padding: 8px 14px; border-top: 1px solid var(--iz-rez-field-border);
  background: var(--iz-rez-field-bg); color: var(--iz-rez-muted); font-size: 13px;
}
/* Na úzkém displeji se číslo nevejde vedle jména, jde pod něj. */
@media (max-width: 544px) {
  .iz-rez-napoveda__volba { grid-template-columns: 1fr; }
}

.iz-rez-booking {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid rgba(110, 110, 110, .35);
  font-size: 14px; line-height: 20px;
}
.iz-rez-booking:first-child { border-top: 0; }
.iz-rez-booking__who { font-weight: 600; font-size: var(--iz-rez-body); }
.iz-rez-booking__meta { color: var(--iz-rez-muted); }
.iz-rez-tag {
  display: inline-block; padding: 2px 10px; border-radius: var(--iz-rez-pill);
  border: 1px solid var(--iz-rez-text); font-size: 12px; letter-spacing: .5px;
}
.iz-rez-tag--forced { border-color: var(--iz-rez-error); color: var(--iz-rez-error); }
/* věrnostní body při plném stavu (10) — zvýraznit, ne přehlédnout */
.iz-rez-body-plne { color: var(--iz-rez-error); font-weight: 700; }

/* bodovaný termín — stejný zlatý akcent jako dlaždice u klientky */
.iz-rez-tag--bod {
  border-color: var(--iz-rez-bod-line);
  background: var(--iz-rez-bod-bg);
  color: var(--iz-rez-bod-star);
}
.iz-rez-tag--sms {
  border-color: var(--iz-rez-sms-line);
  background: var(--iz-rez-sms-bg);
  color: var(--iz-rez-sms-text);
}
.iz-rez-tag--sms-chyba {
  border-color: var(--iz-rez-error);
  background: var(--iz-rez-sms-chyba-bg);
  color: var(--iz-rez-error);
}

/* týdenní přehled */
/* Tabulka roluje ve vlastním okně, ne se stránkou — jen tak jde spolehlivě
   zafixovat hlavička s dny i sloupec s časy (jako v Excelu). Kdyby scroll
   zůstal na stránce, `position: sticky; top: 0` se váže k tomuhle obalu
   (dělá ho z něj overflow) a hlavička by se k hornímu okraji nepřilepila. */
.iz-rez-weekwrap {
  overflow: auto; max-height: 70vh; -webkit-overflow-scrolling: touch;
}
/* separate místo collapse: se `collapse` prohlížeče u sticky buněk
   zahazují rámečky. Proto má každá buňka jen pravý a spodní rámeček
   a krajní se doplní zvlášť — výsledná mřížka vypadá stejně jako dřív. */
.iz-rez-week { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }
.iz-rez-week th, .iz-rez-week td {
  border-right: 1px solid rgba(110, 110, 110, .5);
  border-bottom: 1px solid rgba(110, 110, 110, .5);
  padding: 4px 6px; font-size: 13px; line-height: 18px; text-align: left;
  vertical-align: top;
}
.iz-rez-week tr > *:first-child { border-left: 1px solid rgba(110, 110, 110, .5); }
.iz-rez-week thead th { border-top: 1px solid rgba(110, 110, 110, .5); }
.iz-rez-week th { font: 600 14px var(--iz-rez-font-body); }

/* Fixovaná hlavička a sloupec s časy. Neprůhledné pozadí je povinné —
   pod průsvitnou buňkou by při rolování prosvítal zbytek tabulky. */
.iz-rez-week thead th {
  position: sticky; top: 0; z-index: 2; background: var(--iz-rez-sand);
}
.iz-rez-week .iz-rez-week__hour {
  position: sticky; left: 0; z-index: 1; background: var(--iz-rez-sand);
}
.iz-rez-week thead th:first-child { z-index: 3; left: 0; }
.iz-rez-week th button {
  width: 100%; min-height: 48px; padding: 6px 4px;
  background: var(--iz-rez-field-bg); border: 1px solid var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
  font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-text); cursor: pointer;
}
.iz-rez-week td.is-closed { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(110,110,110,.18) 5px, rgba(110,110,110,.18) 10px); }
.iz-rez-week td.is-open  { background: var(--iz-rez-field-bg); }
.iz-rez-week td.is-part  { background: #eadfc9; }
.iz-rez-week td.is-full  { background: var(--iz-rez-sand-deep); }
.iz-rez-week .iz-rez-week__hour { font-weight: 600; white-space: nowrap; }
.iz-rez-week em { font-style: normal; display: block; }

/* Buňka dne a času je klikací (skočí do Rezervace s předvyplněným termínem) —
   musí to být poznat kurzorem, ne jen tím, že se něco stane po kliknutí. */
.iz-rez-week td[data-datum] { cursor: pointer; }
/* Uběhlá buňka nereaguje (dřívější den, dnešní prázdná). Je jednotně šedá
   bez ohledu na to, jestli v ní bylo volno, část, nebo plno — šedá tím znamená
   přesně jedno: klepnutí nic neudělá (zadání v14, bod 5). Mimo pracovní dobu
   si šrafu nechává, tam žádné okno vydefinované nebylo.

   Dnešní obsazená půlhodina po čase šedá NENÍ: klientka nedorazila, volá,
   a termín se jí mění nebo ruší. Prázdná po čase šedá je — není tam koho
   měnit a zpětně se do kalendáře nedopisuje. */
.iz-rez-week td[data-datum].is-minule { cursor: default; }
.iz-rez-week td[data-datum].is-minule:not(.is-closed) {
  background: var(--iz-rez-uplynulo);
  color: var(--iz-rez-uplynulo-text);
}

/* Krátká odezva na dotyk/klik, než naběhne panel Rezervace. Bez ní člověk
   na mobilu neví, jestli klepnutí zabralo. Obrys + ztmavení funguje na
   všech variantách buňky (volno/část/plno/zavřeno), které mají každá jiné
   pozadí — proto obrys navíc, ne jen změna barvy. */
.iz-rez-week td[data-datum].is-klik {
  box-shadow: inset 0 0 0 2px var(--iz-rez-vybrano);
  filter: brightness(.94);
}
/* Dnešek. Jen rámeček, žádná jiná barva pozadí - hlavička dne je zároveň
   tlačítko a barevná výplň by vypadala jako "vybráno". Rámeček je uvnitř
   (box-shadow), aby se tlačítko neroztáhlo a sloupce zůstaly stejně široké. */
.iz-rez-week th button.je-dnes {
  border-color: var(--iz-rez-vybrano);
  box-shadow: inset 0 0 0 2px var(--iz-rez-vybrano);
}
/* Totéž pro hlavičku dne (skok do okna Den) - tučný tmavý rámeček. Na dnešku
   už takový rámeček je, proto navíc ztmavení: jinak by klepnutí na dnešní
   hlavičku nedalo žádnou odezvu. */
.iz-rez-week th button.is-klik {
  border-color: var(--iz-rez-vybrano);
  box-shadow: inset 0 0 0 2px var(--iz-rez-vybrano);
  filter: brightness(.94);
}
@media (prefers-reduced-motion: reduce) {
  .iz-rez-week td[data-datum].is-klik,
  .iz-rez-week th button.is-klik { filter: none; }
}

.iz-rez-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; font-size: 14px; }
.iz-rez-legend span { display: inline-flex; align-items: center; gap: 6px; }
.iz-rez-legend i {
  width: 18px; height: 18px; display: inline-block;
  border: 1px solid var(--iz-rez-field-border); border-radius: 3px;
}

/* seznamy a tabulky */
.iz-rez-list { list-style: none; margin: 0; padding: 0; }
.iz-rez-list li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(110, 110, 110, .35);
  font-size: var(--iz-rez-body); line-height: var(--iz-rez-body-lh);
}
.iz-rez-list li > span:first-child { flex: 1 1 240px; }
/* skok z Týdne na řádek rezervace — na chvíli zvýrazněný */
.iz-rez-list li { transition: box-shadow .5s; }
.iz-rez-list li.is-zvyraznena { box-shadow: 0 0 0 4px var(--iz-rez-vybrano); }
@media (prefers-reduced-motion: reduce) { .iz-rez-list li { transition: none; } }

/* okno obsazené buňky v Týdnu */
.iz-rez-bunka-volby { display: grid; gap: 10px; }
/* Selektor s obalem modálu schválně: `.iz-rez-modal p` má vyšší specificitu
   a přebíjelo by mezery na 0 nahoře / 12px dole — popisek pak seděl u tlačítka
   Nová rezervace místo u seznamu. Mezery počítají s gap 10px mřížky výš:
   nad popiskem vyjde 22px, pod ním 4px. */
.iz-rez-modal .iz-rez-bunka-predel {
  margin: 12px 4px -6px; font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-muted);
}
.iz-rez-bunka-volba {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 16px; text-align: left;
  font: 400 var(--iz-rez-body)/22px var(--iz-rez-font-body); color: var(--iz-rez-text);
  background: transparent; border: 1px solid var(--iz-rez-text); border-radius: var(--iz-rez-pill);
  cursor: pointer;
}
.iz-rez-bunka-volba:hover { background: rgba(255, 255, 255, .35); }
.iz-rez-bunka-volba small { display: block; font-size: 14px; color: var(--iz-rez-muted); }
.iz-rez-bunka-ikona {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--iz-rez-text); border-radius: 50%; font-size: 14px;
}

/* Zavřít půlhodinu — v okně buňky Týdne (zadání v15). Tišší než Nová
   rezervace: je to zásah do rozvrhu, ne ta akce, kvůli které se sem kliká. */
.iz-rez-bunka-zavrit-okno {
  width: 100%; gap: 10px;
  background: transparent;
  font-size: 15px; letter-spacing: .04em; text-transform: none;
}

.iz-rez-grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Label může zabrat jeden i dva řádky (dlouhé popisky typu „rozšířené pásmo
   po kliknutí Další") — bez pevné výšky by pole pod kratšími popisky sedělo
   výš než pole vedle nich ve stejné řadě mřížky. */
.iz-rez-grid2 > div > .iz-rez-label {
  min-height: 34px; display: flex; align-items: end;
}

/* --- karta klientky -------------------------------------------------------
   Hlavička s kontaktem a tlačítky Zavolat / E-mail, pod ní pevná mřížka
   2 sloupců (auto-fit dřív na PC spočítal 4 úzké sloupce a telefon se
   lámal). Historie je na širokém PC vedle údajů, jinde pod nimi. */
/* Zadání v11: jméno a telefon | OK | ☆ body a návštěv vlevo u sebe,
   tlačítka Zavolat / SMS / E-mail odsazená doprava. */
.iz-rez-kk-hlava {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding: 0 0 16px; margin: 0 0 16px;
  border-bottom: 1px solid rgba(110, 110, 110, .35);
}
.iz-rez-kk-hlava__akce { margin-left: auto; }
.iz-rez-kk-ok { display: grid; justify-items: center; gap: 2px; cursor: pointer; }
.iz-rez-kk-ok__nazev { font: 700 15px/18px var(--iz-rez-font-body); letter-spacing: .5px; }
.iz-rez-kk-ok input { width: 28px; height: 28px; margin: 0; accent-color: #111111; cursor: pointer; }
.iz-rez-kk-cisla {
  display: grid; font-size: 15px; line-height: 22px; color: var(--iz-rez-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.iz-rez-kk-cisla > span { display: inline-flex; align-items: center; gap: 4px; }
.iz-rez-kk-cisla svg { color: #111111; flex: none; }
.iz-rez-kk-hlava .iz-rez-h4 { margin: 0 0 4px; overflow-wrap: break-word; }
.iz-rez-kk-hlava__kontakt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: 15px; line-height: 22px;
}
.iz-rez .iz-rez-kk-hlava__tel {
  font-weight: 600; color: var(--iz-rez-vybrano);
  text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums;
}
.iz-rez-kk-hlava__akce { display: flex; align-items: center; gap: 12px; }

.iz-rez-kk-formular { display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iz-rez-kk-cela { grid-column: 1 / -1; }
.iz-rez-kk-body { max-width: 140px; }
/* věrnostní body + SMS v jedné řadě na všech šířkách (140 + 24 + ~50 px) */
.iz-rez-kk-dvojice { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; }
.iz-rez-kk-dvojice__body { width: 140px; }
/* celá plocha 48 × 48 px je klikací, ne jen 28px políčko */
.iz-rez-kk-sms {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: var(--iz-rez-field-h); cursor: pointer;
}
.iz-rez-kk-sms input { width: 28px; height: 28px; margin: 0; accent-color: var(--iz-rez-text); cursor: pointer; }

/* --- okno ⭐ Nové rezervace ------------------------------------------------ */
.iz-rez-nove-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iz-rez-nova-karta {
  display: grid; gap: 2px; padding: 12px 14px;
  border: 1px solid rgba(110, 110, 110, .45); border-radius: var(--iz-rez-radius);
  background: var(--iz-rez-field-bg);
}
.iz-rez-nova-karta.is-nova { background: #fbf3dc; border-color: #7a5f30; }
/* Bílá karta jde klepnutím označit znovu jako novou (12. 10. 2026).
   Nápověda jen při najetí myší, na dotykovém displeji by překážela. */
.iz-rez-nova-karta.is-klik { position: relative; cursor: pointer; }
.iz-rez-nova-karta.is-klik:focus-visible { outline: 2px solid var(--iz-rez-text); outline-offset: 2px; }
@media (hover: hover) {
  .iz-rez-nova-karta.is-klik:hover { box-shadow: inset 0 0 0 1px #7a5f30; }
  .iz-rez-nova-karta.is-klik:hover::after {
    content: 'označit jako novou'; position: absolute; top: 12px; right: 14px;
    font-size: 12px; line-height: 18px; color: #7a5f30;
  }
}
.iz-rez-nova-karta__prijato {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 13px; line-height: 20px; color: var(--iz-rez-muted);
}
.iz-rez-nova-karta__stitek {
  font: 700 11px/18px var(--iz-rez-font-body); letter-spacing: .6px; text-transform: uppercase;
  color: #7a5f30; background: #fff6dc; border: 1px solid #7a5f30; border-radius: var(--iz-rez-pill); padding: 0 8px;
}
.iz-rez-nova-karta__termin { font-weight: 700; font-size: var(--iz-rez-body); line-height: 24px; }
.iz-rez-nova-karta__kdo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 15px; line-height: 22px; }
.iz-rez .iz-rez-nova-karta__kdo a {
  color: var(--iz-rez-vybrano); font-weight: 600; text-underline-offset: 3px; font-variant-numeric: tabular-nums;
}
.iz-rez-nove-predel {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 8px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--iz-rez-muted);
}
.iz-rez-nove-predel::after { content: ''; flex: 1; height: 1px; background: rgba(110, 110, 110, .4); }
/* --- zprávy z info@ v okně ⭐ (6. 10. 2026) -------------------------------
   Kompaktní oranžová karta: [políčko] [obsah] [NEW/KARTA + telefon].
   Štítek a čas přijetí mají velikost nadpisu SMS upozornění. Na mobilu
   jdou tlačítka pod obsah, zarovnaná vpravo. */
.iz-rez-zpravy { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.iz-rez-zpravy[hidden] { display: none; }
.iz-rez-zprava {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 10px 14px; background: #fbe2c8; color: #5a2a08;
  border: 1px solid #a8541a; border-left-width: 5px; border-radius: var(--iz-rez-radius);
}
.iz-rez-zprava__check { display: inline-flex; padding-top: 1px; cursor: pointer; }
.iz-rez-zprava__check input { width: 24px; height: 24px; margin: 0; accent-color: var(--iz-rez-vybrano); cursor: pointer; }
.iz-rez-zprava__obsah { min-width: 0; display: grid; gap: 2px; }
.iz-rez-zprava__hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.iz-rez-zprava__stitek {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  font: 700 13px/1 var(--iz-rez-font-body); letter-spacing: .6px; text-transform: uppercase;
  color: #a8541a; background: #fff1e2; border: 1px solid #a8541a; border-radius: var(--iz-rez-pill);
}
.iz-rez-zprava__stitek svg { width: 15px; height: 15px; flex: none; }
.iz-rez-zprava__prijato { font-weight: 700; font-size: var(--iz-rez-body); line-height: 26px; }
.iz-rez-zprava__kdo { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; line-height: 23px; }
.iz-rez-zprava__kdo span { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.iz-rez-zprava__text { margin: 0; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; white-space: pre-line; }
.iz-rez-zprava__text b { margin-right: 8px; }
.iz-rez-zprava__akce { display: flex; align-items: center; gap: 10px; }
.iz-rez-zprava__akce .iz-rez-volat { width: 44px; height: 44px; }
.iz-rez-zprava-vratit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 14px; margin: 0 0 10px;
  border: 1px dashed #a8541a; border-radius: var(--iz-rez-radius);
  font-size: 14px; color: #5a2a08; background: var(--iz-rez-field-bg);
}
.iz-rez .iz-rez-zprava-vratit button {
  font: 600 14px var(--iz-rez-font-body); background: none; border: 0; padding: 4px 0;
  color: #a8541a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#iz-rez-nove-zpravy-problem[hidden] { display: none; }
@media (max-width: 600px) {
  .iz-rez-zprava { grid-template-columns: auto minmax(0, 1fr); }
  .iz-rez-zprava__akce { grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
  .iz-rez-zprava__kdo { flex-direction: column; }
}

.iz-rez-kk-akce { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.iz-rez-kk-historie { margin-top: 28px; }
.iz-rez-kk-historie .iz-rez-h4 { margin: 0 0 8px; }

@media (min-width: 1180px) {
  .iz-rez-kk-telo {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start;
  }
  .iz-rez-kk-historie {
    margin-top: 0; padding-left: 32px; border-left: 1px solid rgba(110, 110, 110, .35);
  }
  .iz-rez-kk-historie .iz-rez-list { max-height: 360px; overflow-y: auto; }
}

/* SMS okno a souhrn sloučení (zadání v11) */
.iz-rez-sms-radek { margin: 0 0 4px; }
.iz-rez-sms-radek:last-of-type { margin-bottom: 12px; }
/* Oba řádky tlačítek žijí uvnitř .iz-rez-modal, kde má `.iz-rez-modal p`
   vyšší specificitu a přebilo by horní mezeru na nulu — tlačítko pak
   sedělo natěsno pod polem. Proto selektor s obalem modálu. */
.iz-rez-modal .iz-rez-sms-akce, .iz-rez-modal .iz-rez-sl-tlacitka {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 16px 0 0;
}
.iz-rez-sl-souhrn { margin: 0 0 12px; padding-left: 20px; }
.iz-rez-sl-souhrn li { margin: 0 0 4px; }

@media (max-width: 544px) {
  .iz-rez-kk-hlava { gap: 12px 18px; }
  .iz-rez-kk-hlava__text { flex: 1 1 100%; }
  .iz-rez-kk-hlava .iz-rez-volat { width: 44px; height: 44px; }
  .iz-rez-kk-hlava__akce { gap: 8px; }
  .iz-rez-sms-akce .iz-rez-btn, .iz-rez-sl-tlacitka .iz-rez-btn { flex: 1 1 auto; min-height: 48px; }
  .iz-rez-kk-formular { grid-template-columns: 1fr; }
  .iz-rez-kk-akce { flex-direction: column; }
  .iz-rez-kk-akce .iz-rez-btn { width: 100%; min-height: 48px; }
}

/* Checkbox „jiné ošetření" je obyčejný grid item bez vlastní pozice —
   sedí tam, kam padne v pořadí (2. sloupec bez zaškrtnutí, 3. sloupec
   se zaškrtnutím, až se před něj vsune název a délka). Svisle na střed
   pole vedle něj (výšky selectu, ne celého bloku s labelem) —
   align-items: end na .iz-rez-nova-mrizka zarovná dolní hranu, uvnitř
   48px vysokého checku se pak input i text vycentrují sami. */
.iz-rez-nova-vlastni-box { display: flex; }
.iz-rez-nova-vlastni-box .iz-rez-check { padding: 0; min-height: var(--iz-rez-field-h); }

/* Datum má jinde v appce omezenou šířku (viz .iz-rez-field[type="date"]
   níž) — tady v mřížce má ale zaplnit celý sloupec jako pole vedle něj. */
.iz-rez-nova-mrizka .iz-rez-field[type="date"] { width: 100%; max-width: none; min-width: 0; }

/* Položka mřížky má výchozí min-width: auto — široký obsah (nativní datum
   na iOS) by pak přetlačil sloupec i přes minmax(0, 1fr). */
.iz-rez-nova-mrizka > * { min-width: 0; }

/* Přidat rezervaci ručně — dvě samostatné mřížky s napevno 3 sloupci
   (ne .iz-rez-grid2 s auto-fit, ten by si podle šířky karty klidně
   spočítal 4 sloupce a smíchal řádky dohromady). */
.iz-rez-nova-mrizka {
  display: grid; gap: 16px 20px; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.iz-rez-nova-span2 { grid-column: span 2; }

/* Pár úzkých polí vedle sebe (datum/čas) — na rozdíl od .iz-rez-grid2
   se sloupce NEROZTAHUJÍ na zbylý prostor. Pole tak zůstávají u sebe
   místo co nejdál od sebe. */
.iz-rez-polepary { display: flex; flex-wrap: wrap; align-items: end; gap: 24px; }

/* Individuální plánování: datum + libovolný počet bloků (čas od/do/tlačítko).
   Skutečná mřížka, ne řada samostatných flexů — díky tomu jsou sloupce
   od/do/tlačítko zarovnané ve všech řádcích, ne jen v tom prvním. */
.iz-rez-okno-mrizka {
  display: grid; grid-template-columns: repeat(3, minmax(160px, 220px)) auto;
  align-items: end; gap: 16px 24px;
}

.iz-rez-ok    { color: #1d5c2a; font-size: 14px; }
.iz-rez-alert { color: var(--iz-rez-error); font-size: 14px; line-height: 20px; }

@media (max-width: 544px) {
  .iz-rez-container { padding-inline: 16px; }
  .iz-rez-head { padding: 28px 0 20px; }
  .iz-rez-logo { width: 168px; }
  .iz-rez-slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .iz-rez-block { grid-template-columns: 66px 1fr; gap: 8px; }
  .iz-rez-block--volat { grid-template-columns: 66px 1fr auto; }
  .iz-rez-block--klik { grid-template-columns: 1fr; }
  .iz-rez-block--klik.iz-rez-block--volat { grid-template-columns: 1fr auto; }
  .iz-rez-block__akce { grid-template-columns: 66px 1fr; gap: 8px; }
  .iz-rez-toolbar .iz-rez-field { width: 100%; }
}

/* =============================================================================
   VERZE 2 — nové komponenty
   Stejné tokeny, stejný prefix. Doplněno k odladěnému vizuálu z v1.
   ========================================================================== */

/* --- telefon: roletka předvolby + číselné pole ---------------------------- */

.iz-rez-tel { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }

/* Roletka musí uvést celou předvolbu („ČR +420"), jinak se číslo ořízne
   a klientka netuší, co vlastně vybrala. Font zůstává 16 px — pod tím
   iOS Safari při kliknutí do pole zoomuje stránku. Místo zmenšování písma
   je proto pole širší a šipka blíž ke kraji. */
.iz-rez-tel__zeme {
  flex: 0 0 150px; width: 150px;
  padding-right: 30px;
  background-position: right 10px center;
}
/* Když na číslo zbude míň než 145 px — v adminu je telefon v úzkém sloupci
   mřížky — spadne pole na vlastní řádek pod roletku. Rakouské číslo má
   13 číslic a do zbytku úzkého sloupce by se jinak nevešlo. */
.iz-rez-tel__cislo { flex: 1 1 145px; min-width: 0; }

/* Varianta, která se NIKDY nezalomí — předvolba a číslo zůstanou vedle sebe
   na každé šířce. Používá ji „Přidat rezervaci ručně", kde telefon dostane
   pod ~700 px celý řádek pro sebe (viz .iz-rez-nova-telefon-box níž), takže
   na číslo zbyde dost místa i na 375px mobilu. */
.iz-rez-tel--pevny { flex-wrap: nowrap; }
/* Přidat rezervaci ručně — telefon trvale silnějším rámečkem, navádí, že
   vyplněné číslo doplní jméno (zadání v11). Předvolba zůstává beze změny. */
.iz-rez .iz-rez-field--silne { border: 2px solid #111111; }
.iz-rez-tel--pevny .iz-rez-tel__cislo { flex: 1 1 auto; }

/* honeypot — pole pro roboty, člověk ho nikdy neuvidí ani netrefí tabulátorem */
.iz-rez-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* --- políčka PINu ---------------------------------------------------------
   Deset samostatných políček. Dotykový cíl 48 × 48 px i na 375 px.
   Pevná mřížka 5 + 5 na všech šířkách, celé na střed. Logo nad nimi má
   šířku přesně jednoho řádku políček — počítá se ze stejných proměnných.
--------------------------------------------------------------------------- */

.iz-rez-pinform {
  max-width: 620px; text-align: center;
  --iz-rez-pin-sloupcu: 5;
  --iz-rez-pin-mezera: 8px;
}
.iz-rez-pin__logo {
  display: block; height: auto; margin: 40px auto 32px;
  width: calc(var(--iz-rez-pin-sloupcu) * 48px + (var(--iz-rez-pin-sloupcu) - 1) * var(--iz-rez-pin-mezera));
}

/* PIN maskovaný tečkami bez type="password" — pole pro heslo by na stránku
   přivolalo správce hesel Chromu a ten vyplňoval e-mail do rezervace
   (viz IZ_BEZ_AUTOVYPLNENI v sprava-8c10b6c4.php). */
.iz-rez-maskovane { -webkit-text-security: disc; }

.iz-rez-pin {
  display: grid; gap: var(--iz-rez-pin-mezera);
  grid-template-columns: repeat(var(--iz-rez-pin-sloupcu), 48px);
  justify-content: center;
  margin: 0 0 6px;
}
.iz-rez-pin__pole {
  flex: 0 0 auto;
  width: 48px; height: 48px; padding: 0;
  text-align: center;
  font: 600 20px/48px var(--iz-rez-font-body);
  color: var(--iz-rez-text);
  background: var(--iz-rez-field-bg);
  border: 1px solid var(--iz-rez-field-border);
  border-radius: var(--iz-rez-radius);
}

/* --- citát dne pod PINem (zadání 22. 9. 2026) -----------------------------
   Návrh A „tichý blok": žádný rám, jen vlasová linka, datum verzálkami
   a citát kurzívou v patkovém písmu. Přihlašovací obrazovka je pracovní
   nástroj — oko musí jít pořád první na PIN, ne na citát. */
.iz-rez-citat {
  max-width: 460px; margin: 40px auto 0; padding: 0;
}
.iz-rez-citat::before {
  content: ""; display: block; width: 40px; height: 1px;
  margin: 0 auto 18px; background: var(--iz-rez-field-border); opacity: .55;
}
.iz-rez-citat__datum {
  margin: 0 0 14px;
  font: 600 11px/1 var(--iz-rez-font-body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--iz-rez-muted);
}
.iz-rez-citat__text {
  margin: 0; padding: 0; border: 0;
  font: italic 400 20px/1.5 var(--iz-rez-font-head);
  color: var(--iz-rez-text);
  text-wrap: pretty;
}
.iz-rez-citat__autor {
  margin: 16px 0 0;
  font: 500 12px/1 var(--iz-rez-font-body);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--iz-rez-muted);
}


/* --- hledání s ikonou lupy ------------------------------------------------ */

.iz-rez-search { position: relative; }
.iz-rez-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; pointer-events: none;
}
.iz-rez-search__pole { padding-left: 40px; }

/* --- víceřádkové pole ----------------------------------------------------- */

.iz-rez-textarea {
  min-height: 96px; line-height: var(--iz-rez-body-lh);
  resize: vertical;
}

/* --- pauza v pracovních oknech ------------------------------------------- */

.iz-rez-okno-cislo[hidden] { display: none; }

/* --- štítek pro neaktivní stav (SMS) ------------------------------------- */

.iz-rez-tag--off { border-color: var(--iz-rez-field-border); color: var(--iz-rez-muted); }

/* --- návrh duplicit ------------------------------------------------------- */

.iz-rez-dup {
  padding: 16px; margin: 0 0 16px;
  border: 1px solid var(--iz-rez-field-border); border-radius: var(--iz-rez-radius);
  background: rgba(255, 255, 255, .35);
}
.iz-rez-dup:last-child { margin-bottom: 0; }
.iz-rez-dup .iz-rez-check { align-items: flex-start; }
.iz-rez-dup .iz-rez-check input { width: 24px; height: 24px; }

/* --- seznam chyb v kolizním hlášení --------------------------------------- */

.iz-rez-alert ul { margin: 6px 0; padding-left: 20px; }
.iz-rez-alert li { margin: 0 0 2px; }
.iz-rez-alert:empty { display: none; }

/* --- mobil ---------------------------------------------------------------- */

/* Střední šířky: „Přidat rezervaci ručně" ze tří sloupců na dva a telefon
   dostane celý řádek pod datum a jméno. Ve třech sloupcích byl telefon
   v tak úzkém sloupci, že se předvolba a číslo lámaly pod sebe. */
@media (max-width: 700px) {
  .iz-rez-nova-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* v11: datum / telefon / jméno — datum i telefon mají každý celý řádek,
     jméno | e-mail pak spolu; v mřížce tak nevznikne prázdné místo */
  .iz-rez-nova-datum-box,
  .iz-rez-nova-telefon-box,
  .iz-rez-nova-span2 { grid-column: 1 / -1; }
}

@media (max-width: 544px) {
  /* i na 375 px musí být „ČR +420" celé vidět; číslu pak zbude ~190 px */
  .iz-rez-tel__zeme { flex: 0 0 142px; width: 142px; }

  /* PIN 5 + 5 (viz .iz-rez-pinform), na úzkém displeji menší mezery */
  .iz-rez-pinform { --iz-rez-pin-mezera: 6px; }
  .iz-rez-pin__logo { margin: 28px auto 24px; }
  /* citat o dva body menší, ať se na 390 px nerozlomí do pěti řádků */
  .iz-rez-citat { margin-top: 32px; }
  .iz-rez-citat__text { font-size: 18px; }

  /* seznam klientek i denní přehled musí být na 375 px použitelné */
  .iz-rez-list li > span:first-child { flex: 1 1 100%; }
  .iz-rez-list li .iz-rez-btn { flex: 1 1 auto; }
  .iz-rez-toolbar > div { flex: 1 1 100%; }
}

/* --- úzký mobil (iPhone 14 = 390 px, Pro Max = 430 px) ---------------------
   Popisky tlačítek se zkrátí na jedno písmeno / znak. Vykresluje ho CSS
   z atributu data-zkratka, plný název zůstává v aria-label — odečítač tedy
   čte pořád „Pracovní okna", i když je vidět jen „O". */
@media (max-width: 430px) {
  [data-zkratka] .iz-rez-tabs__text { display: none; }
  [data-zkratka]::before { content: attr(data-zkratka); }

  /* Sedm položek na jeden řádek: menší mezera a užší tlačítka, ale dotykový
     cíl zůstává 44 px (WCAG 2.2 minimum je 24 px, 44 px je praxe). */
  /* Zadání v10: devět položek (↻ D T R ⭐ O 👤 🔧 X) v JEDNOM řádku —
     na 390 px vyjde tlačítko na ≈ 36 px šířky (výška zůstává 40 px).
     Vědomě pod doporučenými 44 px, rozhodla to administrátorka. */
  .iz-rez-tabs { gap: 4px; flex-wrap: nowrap; }
  .iz-rez-tabs .iz-rez-btn {
    flex: 1 1 0; min-width: 0; padding: 8px 2px; letter-spacing: 0;
  }
  .iz-rez-tabs .iz-rez-tabs__obnovit { width: auto; border-radius: var(--iz-rez-pill); }
  .iz-rez-tabs__ikona { font-size: 16px; }
  .iz-rez-tabs__ikona--svg svg { width: 22px; height: 22px; }
  .iz-rez-tabs__odhlasit { margin-left: 0; }

  /* Lišta Den: ‹ [datum] › Dnes na jednom řádku. Pole s datem se přestane
     roztahovat na celou šířku (viz .iz-rez-toolbar > div výš). */
  .iz-rez-toolbar--kompakt { flex-wrap: nowrap; gap: 6px; align-items: center; }
  .iz-rez-toolbar--kompakt > div { flex: 1 1 auto; min-width: 0; }
  .iz-rez-toolbar--kompakt .iz-rez-field {
    width: 100%; min-width: 0; max-width: 160px; padding-inline: 8px;
  }
  .iz-rez-toolbar--kompakt .iz-rez-btn { flex: 0 0 auto; padding: 8px 10px; }

  /* Šipky v Dnu a Týdnu byly ve 14 px drobásek (zadání 22. 9. 2026).
     Musí stát AŽ ZA pravidlem výš: to má stejnou specificitu a přebíjelo by
     nižší padding. Platí jen pro tyhle dvě lišty — horní menu má na 390 px
     devět položek v řádku a větší znak by ho rozhodil. Nižší svislý padding
     drží tlačítko na 40 px, aby vedle Dnes nekošatilo. */
  .iz-rez-toolbar--kompakt [data-zkratka] { padding-block: 7px; }
  .iz-rez-toolbar--kompakt [data-zkratka]::before {
    font-size: 24px; font-weight: 700; line-height: 1;
  }

  /* Formulář rezervace: na téhle šířce se dva sloupce polí už neuživí,
     pole s datem by se ořízlo. Telefon zůstává v páru vedle sebe. */
  .iz-rez-nova-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* --- tlačítko „Další časy" v mřížce časů ----------------------------------
   Vypadá jako dlaždice času a má stejnou výšku, jen menší písmo a šipku —
   klientka pak nemusí přemýšlet, co je tlačítko a co údaj.

   Rozestupy jsou těsnější, než by se čekalo, a je to schválně: nejužší
   dlaždice vychází na 88 px (iPhone Pro Max, 414 px šířky), kde má text
   „Další časy" v Interu 13 px zrovna 62 px. S odsazením 6 px a mezerou
   8 px by se nevešel a zalomil by se. Změřeno, ne odhadnuto.
--------------------------------------------------------------------------- */

.iz-rez-slot--dalsi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  background: var(--iz-rez-field-bg);
  border: 1px solid var(--iz-rez-field-border);
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;                 /* akce, ne hodnota — proto ne tučně */
  color: var(--iz-rez-text);
}
.iz-rez-slot--dalsi svg { flex: none; }
.iz-rez-slot--dalsi:hover { filter: brightness(0.96); }

/* Klientský formulář jen — z UX testování si klientky tlačítka nevšímaly.
   Text na dvou tučných řádcích, šipka vpravo, svisle vycentrovaná k oběma
   řádkům (zdědí se z .iz-rez-slot--dalsi výš). Admin zůstává na jednom
   řádku, menším a netučným písmem. */
.iz-rez-slot--dalsi-klient {
  gap: 8px;
  padding: 6px 8px;
  font-size: 15px;
  line-height: 17px;
  font-weight: 700;
}
.iz-rez-slot-dalsi-radky { display: flex; flex-direction: column; gap: 2px; }

/* --- defaultní plánování: týdenní tabulka -------------------------------- */

.iz-rez-tydenwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* žádné width:100% — tabulka ať je široká jen tak, jak potřebuje svůj
   obsah, ne na celou kartu. To je přesně ta zbytečná mezera navíc. */
.iz-rez-tyden-tab { border-collapse: collapse; min-width: 420px; }
.iz-rez-tyden-tab th,
.iz-rez-tyden-tab td {
  padding: 6px 8px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid rgba(110, 110, 110, .35);
}
.iz-rez-tyden-tab th {
  font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-text);
}
.iz-rez-tyden-tab th:first-child,
.iz-rez-tyden-tab td:first-child { text-align: left; white-space: nowrap; }
.iz-rez-tyden-tab .iz-rez-field { min-width: 116px; }
.iz-rez-tyden-tab input[type="checkbox"] {
  width: 24px; height: 24px; accent-color: var(--iz-rez-text);
}

/* --- pole „jiný čas" v adminu --------------------------------------------- */
.iz-rez-cas-uzky { max-width: 180px; }

/* --- jiný čas + „Otevřít okno pro další klientky" (7. 10. 2026) ------------
   Návrh dokumenty/ux-rezervace-mimo-pracovni-dobu-v9.html. Zaškrtávátko stojí
   těsně u roletky, na mobilu pod ní přes celou šířku. Odškrtnuté = individuální
   termín, proto jiný vzhled: bílé, čárkovaný rámeček, zámek. */
.iz-rez-cas-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; }
.iz-rez-cas-radek .iz-rez-cas-uzky { flex: 0 0 180px; }
.iz-rez-okno {
  display: flex; padding: 0 12px 0 8px;
  border: 1px dashed transparent; border-radius: var(--iz-rez-radius);
}
.iz-rez-okno .iz-rez-check { align-items: center; padding: 0; font-weight: 600; }
.iz-rez-okno .iz-rez-check input { margin: 0; }
.iz-rez-okno__zamek { display: none; flex: none; color: var(--iz-rez-muted); }
/* display: flex výš by jinak přebil atribut hidden */
.iz-rez-okno[hidden], .iz-rez-ulozit-radek .iz-rez-btn[hidden] { display: none; }
.iz-rez-okno--jen-pro-ni { background: var(--iz-rez-white); border-color: var(--iz-rez-muted); }
.iz-rez-okno--jen-pro-ni .iz-rez-okno__zamek { display: inline; }
@media (max-width: 560px) {
  .iz-rez-cas-radek > * { flex: 1 1 100%; }
  .iz-rez-cas-radek .iz-rez-cas-uzky { flex: 1 1 100%; max-width: none; }
}

/* Vybraný jiný čas: dlaždice z nabídky ztlumené (vypadají neaktivně, ale dál
   jdou kliknout, klik jiný čas zruší), roletka zvýrazněná. Ne [disabled],
   ten u dlaždice znamená „termín není k dispozici". admin.js: obnovJinyCas() */
.iz-rez-slots--ztlumene .iz-rez-slot {
  background: var(--iz-rez-disabled-bg); border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text); font-weight: 400;
}
/* i dlaždice s rezervací (tlustý rámeček) a jejich popisek ztlumit */
.iz-rez-slots--ztlumene .iz-rez-slot--obsazeno { box-shadow: none; }
.iz-rez-slots--ztlumene .iz-rez-slot-obsazeno { color: var(--iz-rez-disabled-text); }
.iz-rez-slots--ztlumene .iz-rez-slot:hover { border-color: var(--iz-rez-field-border); color: var(--iz-rez-text); }
.iz-rez-field.iz-rez-field--vybrano {
  border: 2px solid var(--iz-rez-vybrano); padding-left: 11px;
  background: var(--iz-rez-vyber-svetly); font-weight: 600;
}
.iz-rez-vybrano-stitek {
  display: none; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--iz-rez-vybrano); color: var(--iz-rez-white);
  font: 600 12px/18px var(--iz-rez-font-body);
}
.iz-rez-label--vybrano .iz-rez-vybrano-stitek { display: inline-block; }

/* štítek individuálního termínu v Dni (místo „mimo pracovní dobu") */
.iz-rez-tag--jen-pro-ni { border-style: dashed; background: var(--iz-rez-white); }
.iz-rez-tag--jen-pro-ni .iz-rez-okno__zamek { display: inline; vertical-align: -1px; }

/* =============================================================================
   TABULKA KLIENTEK
   Načítá se celá naráz a musí být plynulá na 5 000 řádcích, proto žádné
   stíny ani přechody na řádcích — jen to, co je potřeba k orientaci.
   ========================================================================== */

.iz-rez-tabwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Vzhled listu — buňky mají viditelné pozadí a svislé oddělovače sloupců,
   ne jen vodorovné linky. Schváleno jako varianta B (bez zebry). */
/* separate místo collapse: se `collapse` prohlížeče u sticky buněk
   zahazují rámečky (stejně jako u Týdne). Buňky mají jen pravý a spodní
   rámeček, takže mřížka vypadá stejně. */
.iz-rez-tab { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }

.iz-rez-tab th,
.iz-rez-tab td {
  padding: 8px 10px; text-align: left; vertical-align: middle;
  border-right: 1px solid rgba(110, 110, 110, .3);
  border-bottom: 1px solid rgba(110, 110, 110, .3);
  font-size: 14px; line-height: 20px;
  background: var(--iz-rez-field-bg);
}
.iz-rez-tab th:last-child,
.iz-rez-tab td:last-child { border-right: none; }

/* Tabulka ošetření: sloupec ID a čitelnost na úzkém displeji (24. 9. 2026).
   ID se zobrazuje proto, že je v adrese odkazu na konkrétní ošetření
   (/rezervace/10) - jinde v aplikaci není vidět.

   Zužuje se ve dvou krocích, ať se nikde nejezdí do strany:
     do 900 px  - schovají se Obsluha, Kapacita a Body
     do 560 px  - navíc Délka a Stav, a šipky i tlačítka jdou pod sebe
                  (stav říká i tlačítko Vypnout/Zapnout vedle)
   Schované hodnoty se vypíšou drobně pod název, stejným způsobem jako
   „N× naplánováno" ve sloupci Stav. */
#iz-rez-sluzby-tabulka { min-width: 820px; }
#iz-rez-sluzby-tabulka .iz-rez-tab__id { font-variant-numeric: tabular-nums; color: var(--iz-rez-muted); }
.iz-rez-tab__sbaleno { display: none; }

@media (max-width: 900px) {
  #iz-rez-sluzby-tabulka { min-width: 0; }
  #iz-rez-sluzby-tabulka .iz-rez-tab__skryvane { display: none; }
  .iz-rez-tab__sbaleno {
    display: block; margin-top: 4px;
    font-size: 12px; line-height: 16px; color: var(--iz-rez-muted);
  }
}

@media (max-width: 560px) {
  #iz-rez-sluzby-tabulka .iz-rez-tab__skryvane--uzke { display: none; }
  #iz-rez-sluzby-tabulka th,
  #iz-rez-sluzby-tabulka td { padding: 6px; }
  /* šipky a akce pod sebe — vedle sebe by sežraly polovinu řádku */
  #iz-rez-sluzby-tabulka .iz-rez-sipky,
  #iz-rez-sluzby-tabulka .iz-rez-tab__akce { flex-direction: column; gap: 4px; }
  #iz-rez-sluzby-tabulka .iz-rez-tab__akce .iz-rez-btn {
    width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px;
  }
  /* pole s názvem má jinak min-width 180 px a samo o sobě tabulku roztáhne */
  #iz-rez-sluzby-tabulka .iz-rez-sluzba-editace { min-width: 0; width: 100%; }
}

.iz-rez-tab th {
  font: 600 14px var(--iz-rez-font-body); color: var(--iz-rez-text);
  cursor: pointer; user-select: none; white-space: nowrap;
  background: #efe8db;
  border-right-color: var(--iz-rez-field-border);
  border-bottom: 2px solid var(--iz-rez-field-border);
}
.iz-rez-tab th button {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.iz-rez-tab th[data-sloupec]::after { content: ' ↕'; opacity: .35; }
.iz-rez-tab th[aria-sort="ascending"]::after  { content: ' ↑'; opacity: 1; }
.iz-rez-tab th[aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }
.iz-rez-tab th.is-aktivni { background: #e4dcc9; }

.iz-rez-tab tbody tr { cursor: pointer; }
.iz-rez-tab tbody tr:hover td { background: #f2ede2; }

.iz-rez-tab__vyber { width: 44px; text-align: center; }
.iz-rez-tab__vyber input { width: 28px; height: 28px; accent-color: var(--iz-rez-text); }
.iz-rez-tab__cislo { text-align: right; white-space: nowrap; }
.iz-rez-tab th.iz-rez-tab__stred, .iz-rez-tab td.iz-rez-tab__stred { text-align: center; }

/* dlouhý rozpis ošetření se ořízne, celý je v title */
.iz-rez-tab__osetreni {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nová klientka ve formuláři karty — upozornění na duplicitu. Prázdné
   místo nezabírá; obsazený telefon červeně (blokuje uložení), stejné jméno
   hnědě (jen upozornění). */
.iz-rez-kk-dup { font-size: 14px; line-height: 22px; color: var(--iz-rez-error); margin-top: 6px; }
.iz-rez-kk-dup:empty { display: none; }
.iz-rez-kk-dup--pozor { color: #7a5f30; margin-top: -4px; }
.iz-rez-kk-dup .iz-rez-btn { min-height: 32px; padding: 4px 12px; margin: 2px 0 0 4px; font-size: 12px; }

/* Klientky (zadání v11): podezření z duplicity šedě — plná barva, ať nic
   neprosvítá ani pod fixovanými sloupci. Úzké vycentrované sloupce ★ / SMS
   / Návštěv jsou jen tak široké, jak je obsah. */
.iz-rez-tab tbody tr.iz-rez-tab--dup td { background: #dcd8d0; }
.iz-rez-tab tbody tr.iz-rez-tab--dup:hover td { background: #d2cdc3; }
.iz-rez-tab th.iz-rez-tab__uzky,
.iz-rez-tab td.iz-rez-tab__uzky {
  width: 1%; text-align: center; white-space: nowrap; padding-inline: 8px; font-variant-numeric: tabular-nums;
}

/* Klientky — výběr a Příjmení zůstanou při vodorovném rolování vlevo.
   Pevná šířka prvního sloupce = posun druhého. Všechna pozadí buněk
   (hover, zvýraznění, nový řádek) jsou plná, jinak by pod nimi prosvítal
   odrolovaný obsah. */
.iz-rez-tabwrap { scroll-padding-left: 190px; }
.iz-rez-tab .iz-rez-tab__fix1 {
  position: sticky; left: 0; z-index: 1;
  box-sizing: border-box; width: 56px; min-width: 56px; max-width: 56px;
}
.iz-rez-tab .iz-rez-tab__fix2 { position: sticky; left: 56px; z-index: 1; }
/* Klientky jako v Excelu: tabulka roluje ve vlastním rámečku vysokém skoro
   jako okno — hlavička zůstává nahoře, výběr a Příjmení vlevo a vodorovný
   posuvník je vždy vidět dole. Rohové buňky hlavičky nad oběma. */
#iz-rez-panel-klientky .iz-rez-tabwrap {
  max-height: calc(100vh - 120px); overflow: auto; scroll-padding-top: 48px;
}
#iz-rez-kl-tabulka thead th { position: sticky; top: 0; z-index: 2; }
#iz-rez-kl-tabulka thead th.iz-rez-tab__fix1,
#iz-rez-kl-tabulka thead th.iz-rez-tab__fix2 { z-index: 3; }

.iz-rez-tabwrap.is-odrolovano .iz-rez-tab__fix2 {
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, .22);
}

/* jen pro odečítač obrazovky */
.iz-rez-skryte {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 544px) {
  .iz-rez-tab__osetreni { max-width: 140px; }
  /* fixovaná část nesmí sníst displej — dlouhé příjmení se zalomí
     (max-width na buňce tabulky prohlížeče ignorují, proto na obsahu) */
  .iz-rez-tab td.iz-rez-tab__fix2 > b { display: block; max-width: 110px; overflow-wrap: break-word; }
}

/* --- katalog ošetření v Nastavení (zadání v12) -----------------------------
   Vypnuté ošetření musí jít poznat na první pohled, ale zůstává čitelné —
   je to pracovní stav („stroj je v servisu"), ne chyba. */

.iz-rez-tab tbody tr.iz-rez-tab--vypnuto td { background: #e7e1d3; color: #5f5a4e; }
.iz-rez-tab tbody tr.iz-rez-tab--vypnuto:hover td { background: #ded7c6; }
.iz-rez-tab__pozn { font-size: 13px; color: var(--iz-rez-muted); }
.iz-rez-tab__akce { display: flex; gap: 6px; flex-wrap: wrap; }

.iz-rez-sluzba-editace { min-width: 180px; height: 40px; }

.iz-rez-sipky { display: inline-flex; gap: 4px; }
.iz-rez .iz-rez-sipka {
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--iz-rez-field-border); border-radius: 3px;
  background: var(--iz-rez-white); color: var(--iz-rez-text);
  font: 400 13px/1 var(--iz-rez-font-body); cursor: pointer;
}
.iz-rez .iz-rez-sipka:hover { background: var(--iz-rez-sand); }
.iz-rez .iz-rez-sipka:disabled {
  background: var(--iz-rez-disabled-bg);
  border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text);
  cursor: not-allowed;
}

/* --- nabídka pod tlačítkem (Export v okně Klientky) ------------------------ */

.iz-rez-menu-obal { position: relative; display: inline-block; }

.iz-rez-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 240px; padding: 6px;
  background: var(--iz-rez-white);
  border: 1px solid var(--iz-rez-field-border); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(62, 48, 40, .18);
}
.iz-rez-menu[hidden] { display: none; }
.iz-rez-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; border: 0; border-radius: 3px;
  background: none; color: var(--iz-rez-text);
  font: 400 16px/1.4 var(--iz-rez-font-body); cursor: pointer;
}
.iz-rez-menu button:hover { background: var(--iz-rez-sand); }
.iz-rez-menu small { display: block; font-size: 14px; color: var(--iz-rez-muted); }

@media (max-width: 430px) {
  .iz-rez-menu { left: auto; right: 0; }
}

/* --- blok SMS zprávy v Nastavení (16. 9. 2026) ----------------------------- */

/* přepínač — <button role="switch">, stav v aria-checked */
.iz-rez .iz-rez-switch {
  position: relative; flex: 0 0 auto;
  width: 46px; min-width: 46px; height: 26px; padding: 0;
  border: 0; border-radius: 999px;
  background: #b9ae98; cursor: pointer;
  transition: background-color .18s ease;
}
.iz-rez .iz-rez-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--iz-rez-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.iz-rez .iz-rez-switch[aria-checked="true"] { background: var(--iz-rez-vybrano); }
.iz-rez .iz-rez-switch[aria-checked="true"]::after { transform: translateX(20px); }
.iz-rez .iz-rez-switch:focus-visible { outline: 2px solid var(--iz-rez-vybrano); outline-offset: 3px; }
.iz-rez .iz-rez-switch--velky { width: 54px; min-width: 54px; height: 30px; }
.iz-rez .iz-rez-switch--velky::after { width: 24px; height: 24px; }
.iz-rez .iz-rez-switch--velky[aria-checked="true"]::after { transform: translateX(24px); }

@media (prefers-reduced-motion: reduce) {
  .iz-rez .iz-rez-switch, .iz-rez .iz-rez-switch::after { transition: none; }
}

.iz-rez-sms-hlavni {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 8px; padding: 14px 16px;
  background: #f3ede3; border: 1px solid var(--iz-rez-disabled-border); border-radius: 4px;
}
.iz-rez-sms-hlavni__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iz-rez-sms-hlavni__nazev { font-weight: 600; }

.iz-rez-sms-stitek {
  font: 600 11px/1 var(--iz-rez-font-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px;
  background: var(--iz-rez-disabled-bg); color: var(--iz-rez-disabled-text);
}
.iz-rez-sms-stitek--zapnuto { background: #dfe8d6; color: #2f5d33; }

/* SMS brána a Připomínka vedle sebe, na mobilu pod sebou.
   POZOR: ne .iz-rez-sms-radek — ten název má řádek v okně SMS zprávy. */
.iz-rez-sms-prepinace-radek {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
  margin-top: 8px;
}
.iz-rez-sms-prepinace-radek .iz-rez-sms-hlavni { margin-top: 0; }
.iz-rez-sms-pripominka__pozn { font-size: 14px; color: var(--iz-rez-muted); }
.iz-rez-sms-pripominka--ztlumeno .iz-rez-sms-hlavni__nazev,
.iz-rez-sms-pripominka--ztlumeno .iz-rez-sms-pripominka__pozn { color: var(--iz-rez-disabled-text); }

.iz-rez-sms-dlazdice {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-top: 10px;
}
.iz-rez-sms-dlazdice__polozka {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: #f3ede3; border: 1px solid var(--iz-rez-disabled-border); border-radius: 4px;
}
.iz-rez-sms-dlazdice__hlava { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.iz-rez-sms-dlazdice__nazev { font-weight: 600; }
.iz-rez-sms-dlazdice__pozn { margin: 0; font-size: 14px; color: var(--iz-rez-muted); }
/* vypnutá brána: dlaždice ztlumené, ale klikatelné — zapnutí bránu zapne */
.iz-rez-sms-dlazdice__polozka--ztlumeno .iz-rez-sms-dlazdice__nazev,
.iz-rez-sms-dlazdice__polozka--ztlumeno .iz-rez-sms-dlazdice__pozn { color: var(--iz-rez-disabled-text); }


/* --- pilulka „Poslat SMS" u uložení rezervace (16. 9. 2026) ---------------- */

.iz-rez-ulozit-radek {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 16px 0 0;
}
.iz-rez-ulozit-radek__oddelovac { width: 1px; align-self: stretch; background: var(--iz-rez-disabled-border); }
/* ať tlačítka neposkakují, když se přejmenují na „… + SMS" */
.iz-rez #iz-rez-nova-ulozit { min-width: 13.5em; }
.iz-rez #iz-rez-nova-presto { min-width: 15.5em; }

.iz-rez .iz-rez-sms-pilulka {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px 0 8px;
  border: 1px solid var(--iz-rez-field-border); border-radius: 999px;
  background: var(--iz-rez-field-bg); color: var(--iz-rez-text);
  font: 600 13px/1 var(--iz-rez-font-body); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.iz-rez .iz-rez-sms-pilulka[aria-checked="true"] { background: #e3d5bd; border-color: var(--iz-rez-vybrano); }
.iz-rez .iz-rez-sms-pilulka[aria-checked="true"] .iz-rez-switch { background: var(--iz-rez-vybrano); }
.iz-rez .iz-rez-sms-pilulka[aria-checked="true"] .iz-rez-switch::after { transform: translateX(20px); }
.iz-rez .iz-rez-sms-pilulka:disabled {
  background: var(--iz-rez-disabled-bg); border-color: var(--iz-rez-disabled-border);
  color: var(--iz-rez-disabled-text); cursor: not-allowed;
}
.iz-rez .iz-rez-sms-pilulka:disabled .iz-rez-switch { opacity: .45; }
.iz-rez .iz-rez-sms-pilulka:focus-visible { outline: 2px solid var(--iz-rez-vybrano); outline-offset: 3px; }
/* šoupátko uvnitř pilulky není samostatné tlačítko */
.iz-rez .iz-rez-sms-pilulka .iz-rez-switch { cursor: inherit; }

@media (max-width: 560px) {
  .iz-rez .iz-rez-sms-pilulka { flex: 1 1 100%; justify-content: flex-start; }
  .iz-rez-ulozit-radek__oddelovac { display: none; }
}

/* --- štítek připomínky u rezervace ----------------------------------------- */
.iz-rez .iz-rez-tag--pripominka-ceka { background: #f5eddc; border-color: #7a5f30; color: #5a4521; }
.iz-rez .iz-rez-tag--pripominka-odeslana { background: #dfe8d6; border-color: #9bb58f; color: #2f5d33; }

/* --- karta klientky: „Připomínka SMS 18:00" se na úzkém mobilu zalomí
       do dvou řádků a zůstane vedle věrnostních bodů ------------------------ */
.iz-rez-kk-dvojice__sms { flex: 1 1 110px; min-width: 0; }


/* --- upozornění na SMS: tečka na hvězdičce a červené bloky v okně ⭐ ------- */

.iz-rez-tabs [role="tab"] { position: relative; }
.iz-rez-tabs__tecka {
  position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #b3261e; border: 2px solid var(--iz-rez-sand);
  pointer-events: none;
}
.iz-rez-tabs__tecka[hidden] { display: none; }

#iz-rez-nove-sms-problem { margin: 0 0 12px; }
#iz-rez-nove-sms-problem[hidden] { display: none; }
.iz-rez-sms-alarm {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 10px;
  background: #f6dcd8; color: #6f1612;
  border: 1px solid #8c1d18; border-left-width: 5px; border-radius: var(--iz-rez-radius);
}
.iz-rez-sms-alarm__ikona { flex: 0 0 auto; font-size: 20px; line-height: 1.2; }
.iz-rez-sms-alarm__nadpis { margin: 0; font-weight: 700; }
.iz-rez-sms-alarm__text { margin: 2px 0 0; font-size: 15px; }
.iz-rez .iz-rez-sms-alarm a { color: #8c1d18; font-weight: 600; }