/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Hlína: rezervační komponenta. Kroky vlevo, souhrn vpravo (na počítači
   jede s obrazovkou), na telefonu pod sebou a dole lišta s cenou, která se
   klepnutím rozbalí do souhrnu. Kalendář má dva pohledy téhož kroku: den
   (pás dnů a hodiny) a týden (mřížka dnů a hodin). Volné hodiny svítí,
   obsazené jsou tlumené a neklikací. Najetí nikdy nic nezvedá (Hlína 47). */
.h-rez {
  padding-bottom: 120px;
  /* místo pro spodní lištu na telefonu */
}
.h-rez__hlava {
  margin-bottom: 26px;
}
.h-rez__nadpis {
  margin-bottom: 8px;
}
.h-rez__uvod {
  margin: 0;
}
.h-rez__telo {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
.h-rez__kroky {
  display: flex;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}
.h-rez__krok-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.h-rez__krok-hlava .h-rez__krok-nadpis {
  margin: 0;
}
.h-rez__krok-nadpis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: clamp(20px, calc(15px + 1.3vw), 26px);
  font-weight: 500;
}
.h-rez__cislo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2a1d17;
  color: #f5ede3;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 30px;
}
.h-rez__podnadpis {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7d6252;
}
.h-rez__podnadpis--cas {
  margin-top: 20px;
}
.h-rez__pohledy {
  margin-bottom: 0;
}
.h-rez__krok--dvojity {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* volby aktivit */
.h-rez__volby {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
.h-volba {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  min-height: 70px;
  border: 1.5px solid #e7d9c6;
  border-radius: 20px;
  background: #fbf6ef;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.hlina .h-volba i[data-coral-ikona] {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  padding: 11px;
  border-radius: 14px;
  background: #f5ede3;
  color: #c4633b;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.h-volba__nazev {
  font-size: 17px;
  font-weight: 600;
  color: #2a1d17;
}
.h-volba__popis {
  font-size: 13px;
  color: #7d6252;
}
.h-volba:hover {
  border-color: #d8c5ab;
  background: rgba(245, 237, 227, 0.6);
}
.h-volba.je-vybrana {
  border-color: #c4633b;
  background: rgba(196, 99, 59, 0.07000000000000001);
  box-shadow: 0 0 0 3px rgba(196, 99, 59, 0.14);
}
body.hlina .h-volba.je-vybrana i[data-coral-ikona] {
  background: #c4633b;
  color: #fbf6ef;
}
/* datum a týden: navigace ← hodnota → */
.h-rez__datum {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  padding: 4px;
  /* šipky na téže svislici jako přepínač Den a Týden nad nimi */
  border-radius: 20px;
  background: #fbf6ef;
  border: 1.5px solid #e7d9c6;
}
.h-rez__sipka {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #e7d9c6;
  background: #f5ede3;
  color: #2a1d17;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.h-rez__sipka:hover {
  background: #e7d9c6;
  border-color: #d8c5ab;
}
.h-rez__sipka[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
body.hlina .h-rez__sipka i[data-coral-ikona] {
  width: 22px;
  height: 22px;
}
.h-rez__datum-stred {
  text-align: center;
  min-width: 0;
}
.h-rez__datum-den {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d6252;
}
.h-rez__datum-hodnota {
  position: relative;
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  color: #2a1d17;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.h-rez__datum-hodnota:hover {
  background: #f5ede3;
}
.h-rez__datum-hodnota--text {
  cursor: default;
  font-size: 19px;
}
.h-rez__datum-hodnota--text:hover {
  background: transparent;
}
.h-rez__datum-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.h-rez__tyden {
  display: grid;
  grid-template-columns: repeat(7, minmax(40px, 1fr));
  /* Hlína 70: na nejužším telefonu (280 px pro týden) mezera ustoupí, ať má
     každý den 40 px na klepnutí */
  column-gap: clamp(0px, calc((100% - 280px) / 6), 5px);
  margin-top: 10px;
}
.h-den {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 7px;
  min-height: 64px;
  min-width: 0;
  border: 1.5px solid #e7d9c6;
  border-radius: 15px;
  background: #fbf6ef;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.h-den__jmeno {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7d6252;
}
.h-den__cislo {
  font-size: 15px;
  font-weight: 600;
  color: #2a1d17;
  white-space: nowrap;
}
.h-den__mesic {
  display: none;
}
.h-den__tecka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8c5ab;
}
.h-den--volno .h-den__tecka {
  background: #6f8f5e;
}
.h-den--cast .h-den__tecka {
  background: #d99a4e;
}
.h-den--plno .h-den__tecka {
  background: #b9503c;
}
.h-den--zavreno,
.h-den--minulost {
  opacity: 0.45;
}
.h-den[disabled] {
  cursor: not-allowed;
}
.h-den:not([disabled]):hover {
  border-color: #d8c5ab;
  background: rgba(245, 237, 227, 0.7);
}
.h-den.je-vybrany {
  border-color: #c4633b;
  background: rgba(196, 99, 59, 0.07000000000000001);
}
.h-rez__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 12px;
  color: #7d6252;
}
.h-rez__legenda-polozka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.h-rez__legenda-polozka::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8c5ab;
}
.h-rez__legenda-polozka--volno::before {
  background: #6f8f5e;
}
.h-rez__legenda-polozka--cast::before {
  background: #d99a4e;
}
.h-rez__legenda-polozka--plno::before {
  background: #b9503c;
}
/* hodiny dne */
.h-rez__zavreno {
  margin: 0 0 12px;
  font-size: 15px;
}
.h-rez__hodiny {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  transition: opacity 0.2s ease;
}
.h-rez__hodiny.je-nacita {
  opacity: 0.6;
}
.h-hodina {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 13px;
  min-height: 58px;
  border: 1.5px solid #e7d9c6;
  border-radius: 15px;
  background: #fbf6ef;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.h-hodina__cas {
  font-size: 17px;
  font-weight: 600;
  color: #2a1d17;
}
.h-hodina__stav {
  font-size: 12px;
  color: #7d6252;
}
.h-hodina--volno {
  border-color: rgba(111, 143, 94, 0.55);
  background: rgba(111, 143, 94, 0.09);
}
.h-hodina--volno .h-hodina__stav {
  color: #46613a;
  font-weight: 600;
}
.h-hodina--cast {
  border-color: rgba(217, 154, 78, 0.65);
  background: rgba(217, 154, 78, 0.1);
}
.h-hodina--cast .h-hodina__stav {
  color: #7a4f14;
  font-weight: 600;
}
.h-hodina--plno,
.h-hodina--zavreno,
.h-hodina--minulost {
  background: #f5ede3;
  border-color: rgba(231, 217, 198, 0.6);
  cursor: not-allowed;
}
.h-hodina--plno .h-hodina__cas,
.h-hodina--zavreno .h-hodina__cas,
.h-hodina--minulost .h-hodina__cas {
  color: rgba(125, 98, 82, 0.55);
  text-decoration: line-through;
}
.h-hodina--plno .h-hodina__stav {
  color: #b9503c;
}
.h-hodina[disabled]:not(.h-hodina--plno):not(.h-hodina--zavreno):not(.h-hodina--minulost) {
  cursor: not-allowed;
  opacity: 0.55;
}
.h-hodina--volno:not([disabled]):hover {
  background: rgba(111, 143, 94, 0.17);
  border-color: #6f8f5e;
}
.h-hodina--cast:not([disabled]):hover {
  background: rgba(217, 154, 78, 0.19);
  border-color: #d99a4e;
}
.h-hodina.je-vybrana {
  border-color: #c4633b;
  background: #c4633b;
}
.h-hodina.je-vybrana .h-hodina__cas,
.h-hodina.je-vybrana .h-hodina__stav {
  color: #fbf6ef;
}
.h-hodina.je-vybrana:hover {
  background: #c4633b;
  border-color: #c4633b;
}
.h-hodina.je-v-rozsahu {
  border-color: #c4633b;
  background: rgba(196, 99, 59, 0.16);
}
/* týden: mřížka dnů a hodin, vejde se i do telefonu */
.h-rez__mrizka {
  position: relative;
  transition: opacity 0.2s ease;
}
.h-rez__mrizka.je-nacita {
  opacity: 0.6;
}
.h-rez__mr-nacitam {
  margin: 16px 0;
}
/* na telefonu úzký sloupec hodin (8:00) a mezera 3 px, ať má každá buňka
   aspoň 40 px na šířku i na 375 px */
.h-mr {
  display: grid;
  grid-template-columns: 28px repeat(var(--h-mr-dnu, 7), minmax(0, 1fr));
  gap: 3px;
  margin-top: 12px;
}
.h-mr__roh {
  display: block;
}
.h-mr__den {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 6px;
  font-size: 11px;
  line-height: 1.2;
  color: #7d6252;
  text-align: center;
  white-space: nowrap;
}
.h-mr__den b {
  font-size: 12px;
  font-weight: 700;
  color: #2a1d17;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.h-mr__den.je-dnes b {
  color: #c4633b;
}
.h-mr__cas {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #7d6252;
  white-space: nowrap;
}
.h-mr-bunka {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: #e7d9c6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.h-mr-bunka span {
  opacity: 0.85;
}
.h-mr-bunka--volno {
  background: rgba(111, 143, 94, 0.2);
  border-color: rgba(111, 143, 94, 0.45);
  color: #3f5a33;
}
.h-mr-bunka--cast {
  background: rgba(217, 154, 78, 0.24);
  border-color: rgba(217, 154, 78, 0.55);
  color: #6d4512;
}
.h-mr-bunka--plno {
  background: rgba(185, 80, 60, 0.16);
  border-color: transparent;
  cursor: not-allowed;
}
.h-mr-bunka--zavreno,
.h-mr-bunka--minulost {
  background: repeating-linear-gradient(135deg, #e7d9c6 0 5px, #f5ede3 5px 10px);
  cursor: not-allowed;
}
.h-mr-bunka--volno:not([disabled]):hover {
  background: rgba(111, 143, 94, 0.34);
  border-color: #6f8f5e;
}
.h-mr-bunka--cast:not([disabled]):hover {
  background: rgba(217, 154, 78, 0.38);
  border-color: #d99a4e;
}
.h-mr-bunka.je-vybrana,
.h-mr-bunka.je-vybrana:hover {
  background: #c4633b;
  border-color: #c4633b;
  color: #fbf6ef;
}
.h-mr-bunka.je-v-rozsahu {
  background: rgba(196, 99, 59, 0.22);
  border-color: #c4633b;
  color: #a44e2b;
}
/* počet a délka */
.h-rez__pocet-popis {
  margin: 8px 0 0;
  font-size: 14px;
}
.h-rez__delky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.h-rez__delka {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid #e7d9c6;
  background: #fbf6ef;
  color: #2a1d17;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.h-rez__delka:hover {
  border-color: #d8c5ab;
  background: rgba(245, 237, 227, 0.7);
}
.h-rez__delka.je-vybrana,
.h-rez__delka.je-vybrana:hover {
  background: #2a1d17;
  border-color: #2a1d17;
  color: #f5ede3;
}
/* souhrn */
.h-rez__souhrn {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.h-rez__karta h3 {
  margin-bottom: 6px;
}
.h-rez__prehled {
  margin: 10px 0 14px;
  padding: 0;
}
.h-rez__prehled div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(216, 197, 171, 0.5);
}
.h-rez__prehled dt {
  font-size: 13px;
  color: #7d6252;
  margin: 0;
  flex: none;
}
.h-rez__prehled dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: #2a1d17;
}
.h-rez__celkem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 16px;
  font-size: 15px;
  color: #7d6252;
}
.h-rez__celkem strong {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  color: #2a1d17;
}
.h-rez__pozn {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
}
.h-rez__rekap .h-tl + .h-tl {
  margin-top: 10px;
}
/* Hlína 89: sekce rezervace leží o vrstvu výš než sekce za ní, jinak by
   její spodní lišta (pevná, ale uvnitř sekce) zajela pod další sekci,
   třeba pod Pět kroků, a Pokračovat by nešlo stisknout */
.h-rez.h-sekce {
  z-index: 3;
}
/* spodní lišta na telefonu: cena a Pokračovat, klepnutí na cenu rozbalí souhrn */
.h-rez__lista {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 40;
  padding: 8px;
  border-radius: 26px;
  background: #2a1d17;
  color: #f5ede3;
  box-shadow: 0 18px 40px -18px rgba(42, 29, 23, 0.6);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.h-rez__lista.je-skryta {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
}
.h-rez__lista-radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.h-rez__lista-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #f5ede3;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.h-rez__lista-text strong {
  font-size: 20px;
  font-weight: 600;
  color: #f5ede3;
}
.h-rez__lista-text strong::after {
  content: " ▴";
  font-size: 12px;
  color: #c8a889;
}
.h-rez__lista.je-rozbalena .h-rez__lista-text strong::after {
  content: " ▾";
}
.h-rez__lista-text span {
  max-width: 100%;
  font-size: 12px;
  color: #c8a889;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-rez__lista .h-tl {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
}
.h-rez__lista-detail {
  padding: 6px 10px 4px;
}
.h-rez__prehled--lista {
  margin: 0 0 6px;
}
.h-rez__prehled--lista div {
  border-bottom-color: rgba(200, 168, 137, 0.25);
}
body.hlina .h-rez__prehled--lista dt {
  color: #c8a889;
}
body.hlina .h-rez__prehled--lista dd {
  color: #f5ede3;
}
/* Hlína 70: volby aktivit se měří šířkou sloupce s kroky, ne oknem. Tři karty
   vedle sebe, až když se vejdou; na tabletu vedle souhrnu zůstanou řádky
   jako na telefonu a text se nemačká do čtyř řádků. */
.h-rez__kroky {
  container: h-rez-kroky / inline-size;
}
@container h-rez-kroky (min-width: 540px) {
  .h-rez__volby {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .h-volba {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 6px;
    padding: 18px;
    min-height: 140px;
    align-content: start;
  }
  body.hlina .h-volba i[data-coral-ikona] {
    grid-row: auto;
    margin-bottom: 4px;
  }
}
/* počítač */
@media (min-width: 768px) {
  .h-mr {
    grid-template-columns: 44px repeat(var(--h-mr-dnu, 7), minmax(0, 1fr));
    gap: 4px;
  }
  .h-rez {
    padding-bottom: 88px;
  }
  .h-rez__telo {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: 40px;
    align-items: start;
  }
  /* souhrn jede s obrazovkou a drží se kolem její poloviny, ať je po nastavení osob a délky pořád vidět */
  .h-rez__souhrn {
    position: sticky;
    top: max(calc(var(--h-hlava) + 16px), calc(50vh - 290px));
  }
  .h-rez__lista {
    display: none;
  }
  .h-rez__hodiny {
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  }
  .h-den__mesic {
    display: inline;
  }
  .h-mr {
    grid-template-columns: 48px repeat(var(--h-mr-dnu, 7), minmax(0, 1fr));
    gap: 5px;
  }
  .h-mr-bunka {
    height: 34px;
  }
}