/* Widget a zákaznická část — jeden styl (jádro §8, nález P20).
 *
 * Rozpočet N8 je 40 kB gzip na všechno, co se stáhne při prvním zobrazení,
 * a hlídá to test (H48). Proto tady není framework, není reset, nejsou
 * proměnné, které nikdo nečte, a není nic pro obrazovky, které neexistují.
 *
 * H49 — od 320 px se nic nepřetéká: jeden sloupec, jeden zlom. Zvětšení
 * kliknutelných ploch je pro palec na telefonu na cizí wifi (N4), ne pro vzhled.
 *
 * H43 — systémový font. Webový font odkudkoli jinud je požadavek třetí strany
 * s IP hosta, tedy sledování, které H50 zakazuje, a stojí čas na špatné síti.
 *
 * Čtyři hodnoty, které smí nastavit hotel, přicházejí jako `--accent`,
 * `--on-accent`, `--radius` a `--font` (H41). Nic dalšího; vlastní CSS je
 * zamítnuté (H42), protože selektor na hodnotu atributu spolu s
 * `background-image: url(…)` odesílá to, co host napsal, na cizí server. */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --sub: #5a5a5a;
  --line: #d8d8d8;
  --card: #f6f6f6;
  --err: #a4262c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #16181c;
    --fg: #ececec;
    --sub: #a8a8a8;
    --line: #33373d;
    --card: #1f2228;
    --err: #ff8a8a;
  }
}
:root[data-theme='dark'] {
  --bg: #16181c;
  --fg: #ececec;
  --sub: #a8a8a8;
  --line: #33373d;
  --card: #1f2228;
  --err: #ff8a8a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--font);
  /* N4 — na špatném telefonu je vodorovné rolování stránky chyba, ne detail. */
  overflow-x: hidden;
}

.bk { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.bk h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
/* Jméno jednotky na stránce nabídky (H15 — co si host kupuje, ne jen za kolik). */
.bk h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.bk-sub { display: block; color: var(--sub); font-size: .875rem; }
.bk-msg {
  margin: 0 0 1rem;
  padding: .625rem .75rem;
  background: var(--card);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ formulář */

.bk-f { margin: 0 0 .75rem; }
.bk-f label { display: block; font-size: .875rem; color: var(--sub); margin-bottom: .25rem; }
.bk-f input {
  width: 100%;
  /* 44 px je nejmenší plocha, kterou palec spolehlivě trefí. */
  min-height: 2.75rem;
  padding: .5rem .625rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bk-f input:focus-visible,
.bk button:focus-visible,
.bk-day a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bk-err input { border-color: var(--err); }
.bk-e { display: block; margin-top: .25rem; color: var(--err); font-size: .875rem; }

.bk button {
  min-height: 2.75rem;
  padding: .5rem 1.125rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.bk-search { display: grid; gap: 0 .75rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) {
  .bk-search { grid-template-columns: 1fr 1fr; }
  .bk-search button { grid-column: 1 / -1; justify-self: start; }
}

/* H27 — past je **mimo obrazovku**, ne `display:none`: skryté pole se jménem,
 * které trefí automatické vyplňování, by vyplnil prohlížeč hosta a rezervace
 * by se zahodila. Odečítač ho nevidí kvůli `aria-hidden` v HTML. */
.bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ výsledky */

.bk-opts { list-style: none; margin: 0; padding: 0; }
.bk-opt {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem;
  padding: .875rem;
  background: var(--card);
  border-radius: var(--radius);
}
.bk-price { font-size: 1.125rem; font-weight: 600; margin-top: .25rem; }

/* Odkaz na stránku hotelu o jednotce. Blokový, aby na kartě neskončil na témž
   řádku jako popis, a s vlastní plochou na dotek — palec ho musí trefit vedle
   tlačítka „Vybrat", ne místo něj. */
.bk-detail {
  display: inline-block;
  margin-top: .25rem;
  padding: .25rem 0;
  color: var(--accent);
  font-size: .875rem;
}

.bk-sumtab { width: 100%; border-collapse: collapse; }
.bk-sumtab th { text-align: left; font-weight: 400; padding: .375rem 0; }
.bk-sumtab td { text-align: right; padding: .375rem 0; white-space: nowrap; }
.bk-sum th, .bk-sum td { border-top: 1px solid var(--line); font-weight: 700; padding-top: .625rem; }
.bk-code { font-size: 1.125rem; font-weight: 600; }

/* ------------------------------------------------------------------ kalendář */

.bk-cal {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(7, 1fr);
}
.bk-day { border-radius: var(--radius); background: var(--card); text-align: center; }
.bk-day a, .bk-day { display: block; padding: .375rem .125rem; color: inherit; text-decoration: none; }
.bk-free a { background: var(--accent); color: var(--on-accent); border-radius: var(--radius); }
.bk-busy { opacity: .45; }
.bk-d { display: block; font-weight: 600; }
.bk-c, .bk-m { display: block; font-size: .6875rem; }