/* ──────────────────────────────────────────────────────────────────────────
   Bar Cobra — rezervace a pronájem
   Doplněk k theme.css, ne náhrada. Drží se barev a typografie webu.

   Barvy jsou proměnné a přepínají se atributem data-theme na <html>:
   výchozí je tmavý režim, světlý je doplňková volba (přepínač v hlavičce).
   ────────────────────────────────────────────────────────────────────────── */

/* ── písma ──────────────────────────────────────────────────────────────────
   Až přijde balíček Fonts & Logos, nahrají se soubory do rezervace/fonts/
   a odkomentují se bloky @font-face níž. Do té doby běží Raleway a
   Inconsolata z theme.css — proměnné mají fallback.

@font-face {
  font-family: "HeadingNow";
  src: url("fonts/HeadingNow-35Medium.woff2") format("woff2"),
       url("fonts/HeadingNow-35Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Uncut Sans";
  src: url("fonts/UncutSans-Regular.woff2") format("woff2"),
       url("fonts/UncutSans-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

:root {
  --rez-font-heading: "HeadingNow", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rez-font-body: "Uncut Sans", "Inconsolata", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* světlý režim = původní podoba */
  /* světlý režim: Poláčkova šeď (varianta D) */
  --rez-bg: #d9d9d9;
  --rez-ink: #161616;
  --rez-card: #ebebeb;
  --rez-line: rgba(0, 0, 0, 0.14);
  --rez-line-strong: rgba(0, 0, 0, 0.4);
  --rez-muted: rgba(22, 22, 22, 0.64);
  --rez-fill: #161616;         /* výplň vybraných prvků a tlačítek */
  --rez-fill-ink: #ffffff;     /* text na výplni */
  --rez-fill-muted: rgba(255, 255, 255, 0.72);
  --rez-warn: #8a5a1e;
  --rez-warn-bg: rgba(190, 130, 40, 0.12);
  --rez-warn-line: rgba(190, 130, 40, 0.45);
  --rez-err: #8a2e1e;
  --rez-err-bg: rgba(190, 60, 40, 0.08);
  --rez-err-line: rgba(190, 60, 40, 0.5);
  --rez-ok: #26b351;
  --rez-shadow: rgba(0, 0, 0, 0.1);
  --rez-placeholder: rgba(22, 22, 22, 0.4);
}

html[data-theme="dark"] {
  /* tmavý režim: neutrální „not quite black“ (varianta B) */
  color-scheme: dark;
  --rez-bg: #121212;
  --rez-ink: #ececec;
  --rez-card: #1e1e1e;
  --rez-line: rgba(255, 255, 255, 0.13);
  --rez-line-strong: rgba(255, 255, 255, 0.34);
  --rez-muted: #aaaaaa;
  --rez-fill: #ececec;
  --rez-fill-ink: #121212;
  --rez-fill-muted: rgba(18, 18, 18, 0.66);
  --rez-warn: #e2b46a;
  --rez-warn-bg: rgba(226, 180, 106, 0.1);
  --rez-warn-line: rgba(226, 180, 106, 0.4);
  --rez-err: #f0a08e;
  --rez-err-bg: rgba(240, 120, 100, 0.1);
  --rez-err-line: rgba(240, 120, 100, 0.45);
  --rez-ok: #5fd484;
  --rez-shadow: rgba(0, 0, 0, 0.4);
  --rez-placeholder: rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] footer.bg-primary { background: #111 !important; }

/* ── základ ── */
body { background: var(--rez-bg); }
.rez-nav .logo { max-height: 110px; }
.rez-section { padding: 64px 0 96px; background: var(--rez-bg); color: var(--rez-ink); overflow: visible; }
/* šablona dává sekcím overflow:hidden — to by zabilo „lepivý“ souhrn objednávky */
section.rez-section { overflow: visible !important; }
.rez-section h2, .rez-section h3, .rez-section p, .rez-section label,
.rez-section span, .rez-section a { color: var(--rez-ink); }
.rez-section, .rez-section input, .rez-section select, .rez-section textarea, .rez-section button {
  font-family: var(--rez-font-body);
}
.rez-section h2, .rez-section h3, .rez-card h3 { font-family: var(--rez-font-heading); }
@media (max-width: 767px) { .rez-section { padding: 40px 0 64px; } }

.rez-hidden { display: none !important; }

/* přepínač režimu v hlavičce */
.rez-theme {
  display: inline-block;
  margin-left: 18px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 99px;
  width: 30px; height: 30px;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
  transition: border-color .15s;
}
.rez-theme:hover { border-color: #fff; }
.rez-theme .ikona-svetlo, html[data-theme="dark"] .rez-theme .ikona-tma { display: none; }
html[data-theme="dark"] .rez-theme .ikona-svetlo { display: inline; }

.rez-h2 {
  font-size: 28px;
  letter-spacing: 4px !important;
  margin-bottom: 12px;
}
.rez-lead {
  color: var(--rez-muted) !important;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 44em;
}
.text-center .rez-lead, .rez-lead.text-center { margin-left: auto; margin-right: auto; }

/* ── tlačítka z theme.css v našich barvách ── */
.rez-section .btn {
  border-color: var(--rez-fill);
  color: var(--rez-ink);
  background: transparent;
}
.rez-section .btn:hover,
.rez-section .btn.btn-plna {
  background: var(--rez-fill);
  color: var(--rez-fill-ink);
  border-color: var(--rez-fill);
}
.rez-section .btn.btn-plna:hover { opacity: .9; }
html[data-theme="dark"] .rez-section .btn {
  color: #f2f2f2;
  background: #2a2a2a;
  border: 2px solid #a6a6a6;
}
html[data-theme="dark"] .rez-section .btn:hover { color: #fff; background: #444; border-color: #fff; }
.rez-section .btn.btn-ghost {
  background: transparent !important;
  color: var(--rez-ink) !important;
  border: 1px solid var(--rez-line-strong) !important;
}
.rez-section .btn.btn-ghost:hover { border-color: var(--rez-ink) !important; }
.rez-section .btn.btn-mala {
  height: 34px; line-height: 30px; min-width: 0; padding: 0 18px; font-size: 10px; margin: 0 0 22px;
}

/* ── karty rozcestníku ── */
.rez-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 767px) { .rez-cards { grid-template-columns: 1fr; gap: 14px; } }

.rez-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--rez-line);
  border-radius: 10px;
  background: var(--rez-card);
  padding: 26px 28px;
  min-height: 190px;
  text-decoration: none !important;
  color: var(--rez-ink) !important;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  text-align: left;
}
.rez-card:hover {
  border-color: var(--rez-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--rez-shadow);
}
.rez-card .rez-chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rez-muted);
  border: 1px solid var(--rez-line);
  border-radius: 99px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.rez-card h3 {
  font-size: 19px;
  letter-spacing: 2px !important;
  margin: 0 0 6px;
}
.rez-card p { color: var(--rez-muted) !important; font-size: 14px; margin: 0; line-height: 1.55; }
.rez-card .rez-cta { display: inline-block; margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 700; }
.rez-card .rez-znacka { height: 28px; width: auto; margin-bottom: 12px; }
.rez-other { color: var(--rez-muted) !important; font-size: 14px; margin-top: 28px; }
.rez-other a { color: var(--rez-ink); text-decoration: underline; }

/* karta jako volba (výběr podniku ve formuláři) — stejná komponenta, jen s výběrem */
.rez-card.rez-volba { cursor: pointer; min-height: 0; margin: 0; }
.rez-card.rez-volba.on {
  background: var(--rez-fill);
  border-color: var(--rez-fill);
  color: var(--rez-fill-ink) !important;
}
.rez-card.rez-volba.on h3, .rez-card.rez-volba.on span { color: var(--rez-fill-ink) !important; }
.rez-card.rez-volba.on p, .rez-card.rez-volba.on .rez-chip { color: var(--rez-fill-muted) !important; border-color: var(--rez-fill-muted); }
.rez-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) { .rez-cards2 { grid-template-columns: 1fr; } }

/* ── kroky ── */
.rez-steps { display: flex; gap: 4px; margin-bottom: 28px; }
.rez-steps span { flex: 1; height: 2px; background: var(--rez-line); transition: background .3s; }
.rez-steps span.done { background: var(--rez-ink); }
.rez-steps span.now  { background: var(--rez-ink); opacity: .45; }
.rez-steptitle {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rez-muted) !important;
  margin-bottom: 18px;
}

/* ── pole ── */
.rez-field { margin-bottom: 22px; }
/* :not(.rez-item) — položky s odškrtávátkem jsou taky <label> přímo v poli,
   ale ty si řídí rozvržení samy (viz .rez-item níž). */
.rez-field > label:not(.rez-item),
.rez-legend {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .5px;
}
.rez-hint { font-size: 13px; color: var(--rez-muted) !important; margin-bottom: 8px; line-height: 1.5; }

.rez-field input[type=text],
.rez-field input[type=tel],
.rez-field input[type=email],
.rez-field input[type=date],
.rez-field input[type=number],
.rez-field select,
.rez-field textarea {
  width: 100%;
  background: var(--rez-card);
  border: 1px solid var(--rez-line-strong);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--rez-ink);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.rez-field input::placeholder, .rez-field textarea::placeholder { color: var(--rez-placeholder); }
.rez-field input:focus,
.rez-field select:focus,
.rez-field textarea:focus { border-color: var(--rez-ink); }
.rez-field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.rez-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rez-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .rez-row2, .rez-row3 { grid-template-columns: 1fr; } }

/* ── volby ── */
.rez-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rez-opt {
  border: 1px solid var(--rez-line-strong);
  background: var(--rez-card);
  border-radius: 99px;
  padding: 9px 18px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: all .13s;
  margin: 0;
}
.rez-opt:hover { border-color: var(--rez-ink); }
.rez-opt input { display: none; }
.rez-opt.on { background: var(--rez-fill); color: var(--rez-fill-ink) !important; border-color: var(--rez-fill); }

/* počítadlo osob */
.rez-citac { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rez-citac button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--rez-line-strong);
  background: var(--rez-card);
  color: var(--rez-ink);
  border-radius: 6px;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: border-color .13s;
}
.rez-citac button:hover { border-color: var(--rez-ink); }
.rez-field .rez-citac input[type=number] {
  width: 90px; margin: 0; text-align: center; font-size: 17px; font-weight: 700;
  -moz-appearance: textfield;
}
.rez-citac input::-webkit-outer-spin-button,
.rez-citac input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── položky ceníku ── */
.rez-group-title {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rez-muted) !important;
  border-bottom: 1px solid var(--rez-line);
  padding-bottom: 8px;
  margin: 26px 0 12px;
}
.rez-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--rez-line);
  border-radius: 8px;
  background: var(--rez-card);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .13s;
}
.rez-item:hover { border-color: var(--rez-line-strong); }
.rez-item.on { border-color: var(--rez-ink); }
.rez-item-body { flex: 1; min-width: 0; }
.rez-item-name { display: block; font-size: 14.5px; }
.rez-item-note { display: block; font-size: 12.5px; color: var(--rez-muted) !important; margin-top: 1px; }
.rez-item-price { font-size: 14px; color: var(--rez-muted) !important; white-space: nowrap; min-width: 72px; text-align: right; }
.rez-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--rez-fill); }
/* theme.css dělá ze selectů velké verzálkové boxy — tady chceme malou rozbalovačku */
.rez-section .rez-item select {
  height: auto !important; min-height: 0; line-height: 1.3; margin: 4px 0 0 !important;
  background: var(--rez-card); color: var(--rez-ink);
  border: 1px solid var(--rez-line-strong); border-radius: 6px; padding: 5px 8px !important;
  font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
  max-width: 240px; width: auto;
}

.rez-count { display: flex; align-items: center; gap: 6px; flex: none; }
.rez-count input[type=number] { margin: 0; }
.rez-item select { margin: 0; }
.rez-count button {
  width: 34px; height: 34px;
  border: 1px solid var(--rez-line-strong);
  background: var(--rez-card);
  color: var(--rez-ink);
  border-radius: 6px;
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.rez-count button:hover { border-color: var(--rez-ink); }
.rez-count input {
  width: 48px; margin: 0; text-align: center;
  background: var(--rez-card); color: var(--rez-ink);
  border: 1px solid var(--rez-line-strong);
  border-radius: 6px; padding: 7px 2px; font-size: 15px;
  -moz-appearance: textfield;
}
.rez-count input::placeholder { color: var(--rez-placeholder); }
.rez-count input::-webkit-outer-spin-button,
.rez-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rez-total {
  border: 1px solid var(--rez-line-strong);
  border-radius: 8px;
  background: var(--rez-card);
  padding: 14px 16px;
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.rez-total b { font-size: 19px; }
.rez-total-note { flex-basis: 100%; font-size: 12.5px; color: var(--rez-muted) !important; }

/* ── hlášky ── */
.rez-note {
  border: 1px solid var(--rez-warn-line);
  background: var(--rez-warn-bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.55;
}
.rez-note b { display: block; margin-bottom: 4px; color: var(--rez-warn) !important; }
.rez-note .btn { display: block; width: fit-content; margin: 12px 0 0; }
.rez-err {
  border: 1px solid var(--rez-err-line);
  background: var(--rez-err-bg);
  color: var(--rez-err) !important;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.rez-field-err { font-size: 13px; color: var(--rez-err); margin-top: 5px; }
.rez-field input.bad, .rez-field select.bad, .rez-field textarea.bad { border-color: #c0392b; }
/* chybějící volba (podnik, typ akce) a nezaškrtnutý souhlas — červený rámeček kolem celé skupiny */
.rez-opts.bad, .rez-cards2.bad { outline: 1.5px solid #c0392b; outline-offset: 6px; border-radius: 10px; }
.rez-gdpr.bad { border-color: #c0392b !important; }
/* volby jdou ovládat klávesnicí (Tab, Enter / mezerník) */
.rez-opt:focus-visible { outline: 2px solid var(--rez-ink); outline-offset: 2px; }

/* ── navigace formuláře ── */
.rez-nav-btns {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rez-line);
}
.rez-nav-btns .btn { margin: 0; }
/* na prvním kroku není „Zpět“, ať Pokračovat zůstane vpravo */
.rez-nav-btns [data-prev].rez-hidden + [data-next] { margin-left: auto; }
.rez-back { margin-bottom: 18px; }

/* ── souhlas a poděkování ── */
.rez-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--rez-line);
  border-radius: 8px;
  background: var(--rez-card);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--rez-muted) !important;
  cursor: pointer;
  line-height: 1.5;
}
.rez-gdpr span { color: var(--rez-muted) !important; }
.rez-gdpr a { color: var(--rez-ink) !important; text-decoration: underline; }
.rez-gdpr input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--rez-fill); }
/* stůl: „Budeme jíst“ / „Přijdu s ratolestí“ */
.rez-prani { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.rez-prani-volba { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rez-line); border-radius: 8px; background: var(--rez-card); padding: 11px 16px; margin: 0; cursor: pointer; font-weight: 400; font-size: 14.5px; }
.rez-prani-volba:has(input:checked) { border-color: var(--rez-line-strong); }
.rez-prani-volba input { margin: 0; width: 16px; height: 16px; accent-color: var(--rez-fill); }
.rez-gdpr.rez-souhlas { margin-top: 8px; border-style: dashed; }   /* nepovinný souhlas s nabídkami */

.rez-done {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid var(--rez-ok);
  color: var(--rez-ok);
  font-size: 26px;
  line-height: 56px;
  margin: 0 auto 20px;
}
.rez-summary {
  border: 1px solid var(--rez-line);
  border-radius: 8px;
  background: var(--rez-card);
  padding: 18px 20px;
  margin: 0 auto 26px;
  max-width: 30em;
  text-align: left;
  font-size: 14px;
}
.rez-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.rez-summary span:first-child { color: var(--rez-muted) !important; }
.rez-summary b { text-align: right; }

/* honeypot */
.rez-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── vyskakovací okno (zásady zpracování) ── */
.rez-dialog {
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100vh; margin: 0; inset: 0; display: none; align-items: center; justify-content: center;
}
.rez-dialog[open] { display: flex; }
.rez-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.rez-dialog-obsah {
  position: relative;
  background: var(--rez-card); color: var(--rez-ink);
  border: 1px solid var(--rez-line-strong); border-radius: 12px;
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow: auto; padding: 34px 38px 26px;
  font-family: var(--rez-font-body); font-size: 15px; line-height: 1.6;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
@media (max-width: 640px) { .rez-dialog-obsah { padding: 28px 22px 20px; } }
.rez-dialog-obsah h2 { font-family: var(--rez-font-heading); font-size: 22px; letter-spacing: 3px; margin: 0 0 4px; color: var(--rez-ink); }
.rez-dialog-obsah h3 { font-family: var(--rez-font-heading); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--rez-muted); margin: 26px 0 8px; }
.rez-dialog-obsah p { margin: 0 0 12px; color: var(--rez-ink); }
.rez-dialog-obsah a { color: var(--rez-ink); text-decoration: underline; }
.rez-gdpr-pod { color: var(--rez-muted) !important; font-size: 14px; }
.rez-gdpr-datum { color: var(--rez-muted) !important; font-size: 13px; margin-top: 22px !important; }
.rez-dialog-zavrit {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; color: var(--rez-muted); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.rez-dialog-zavrit:hover { color: var(--rez-ink); }
.rez-dialog-paticka { margin: 24px 0 0; }
.rez-dialog-paticka .btn { margin: 0; color: var(--rez-ink) !important; border-color: var(--rez-line-strong) !important; }
html[data-theme="dark"] .rez-dialog-paticka .btn { background: transparent; }

/* ── varianty nabídky cateringu ──────────────────────────────────────────────
   .rez-cat-karty  — výchozí, položky v rámečcích (styly .rez-item výš)
   .rez-cat-radky  — hustý seznam
   .rez-cat-skladaci — zabalené kategorie
   .rez-cat-mriz   — dva sloupce                                              */

/* řádky: bez rámečků, jen oddělovače, menší počítadlo */
.rez-cat-radky .rez-item,
.rez-cat-skladaci .rez-item {
  border: 0; border-bottom: 1px solid var(--rez-line); border-radius: 0;
  background: transparent; padding: 9px 4px; margin: 0; gap: 12px;
}
.rez-cat-radky .rez-item:last-child,
.rez-cat-skladaci .rez-item:last-child { border-bottom: 0; }
.rez-cat-radky .rez-item.on,
.rez-cat-skladaci .rez-item.on { background: var(--rez-card); border-radius: 6px; }
.rez-cat-radky .rez-item-name,
.rez-cat-skladaci .rez-item-name { font-size: 14px; }
.rez-cat-radky .rez-item-body,
.rez-cat-skladaci .rez-item-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rez-cat-radky .rez-item-name,
.rez-cat-skladaci .rez-item-name { display: inline; }
.rez-cat-radky .rez-item-note,
.rez-cat-skladaci .rez-item-note { display: inline; font-size: 12px; margin: 0; }
.rez-cat-radky .rez-item-note::before,
.rez-cat-skladaci .rez-item-note::before { content: '· '; }
.rez-cat-radky .rez-section .rez-item select, .rez-section .rez-cat-radky .rez-item select,
.rez-section .rez-cat-skladaci .rez-item select { margin: 0 !important; padding: 3px 6px !important; font-size: 12px !important; }
.rez-cat-radky .rez-count button,
.rez-cat-skladaci .rez-count button { width: 28px; height: 28px; font-size: 15px; }
.rez-cat-radky .rez-count input,
.rez-cat-skladaci .rez-count input { width: 40px; padding: 4px 2px; font-size: 14px; }
.rez-cat-radky .rez-item select,
.rez-cat-skladaci .rez-item select { padding: 3px 6px; font-size: 12.5px; margin-top: 3px !important; }
.rez-cat-radky .rez-group-title { margin: 22px 0 4px; }

/* skládací kategorie */
.rez-cat-skupina {
  border: 1px solid var(--rez-line); border-radius: 8px; background: var(--rez-card);
  margin-bottom: 8px; overflow: hidden;
}
.rez-cat-skupina summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; user-select: none;
}
.rez-cat-skupina summary::-webkit-details-marker { display: none; }
.rez-cat-skupina summary::before {
  content: '❯'; font-size: 11px; color: var(--rez-muted); transition: transform .15s; flex: none;
}
.rez-cat-skupina[open] summary::before { transform: rotate(90deg); }
.rez-cat-skupina summary:hover .rez-cat-nazev { text-decoration: underline; }
.rez-cat-nazev { flex: 1; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.rez-cat-info { font-size: 13px; color: var(--rez-muted) !important; white-space: nowrap; }
.rez-cat-skupina .rez-cat-telo { padding: 0 12px 8px; border-top: 1px solid var(--rez-line); }
.rez-cat-skladaci .rez-item.on { background: var(--rez-bg); }

/* mřížka: dva sloupce kompaktních karet */
.rez-cat-mriz .rez-cat-telo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .rez-cat-mriz .rez-cat-telo { grid-template-columns: 1fr; } }
.rez-cat-mriz .rez-item { flex-wrap: wrap; padding: 12px 14px; margin: 0; gap: 6px 10px; align-content: flex-start; }
.rez-cat-mriz .rez-item-body { flex-basis: 100%; }
.rez-cat-mriz .rez-item-name { font-size: 14px; }
.rez-cat-mriz .rez-item-price { flex: 1; text-align: left; min-width: 0; }
.rez-cat-mriz .rez-count button { width: 30px; height: 30px; font-size: 15px; }
.rez-cat-mriz .rez-count input { width: 42px; padding: 5px 2px; font-size: 14px; }

/* hláška o kapacitě sedí hned pod počtem osob */
#rez-hlaska .rez-note { margin-top: -4px; }

/* ── volič počtu lidí na rozcestníku ─────────────────────────────────────── */
:root { --rez-z1: #7fb4a8; --rez-z2: #e2b46a; --rez-z3: #d98b6a; --rez-akcent: #e2b46a; }
html:not([data-theme="dark"]) { --rez-z1: #5f9c8f; --rez-z2: #c9963f; --rez-z3: #c4714e; --rez-akcent: #b8862f; }

.rez-volic {
  max-width: 1000px; margin: 0 auto 34px;
  border: 1px solid var(--rez-line); border-radius: 12px; background: var(--rez-card);
  padding: 26px 30px 22px;
}
@media (max-width: 640px) { .rez-volic { padding: 20px 18px 16px; } }
.rez-volic-hlava { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.rez-volic-cislo { font-family: var(--rez-font-heading); font-size: 56px; line-height: 1; letter-spacing: 2px; }
.rez-volic-cislo { display: flex; align-items: baseline; gap: 12px; }
.rez-volic-cislo small { font-family: var(--rez-font-body); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--rez-muted) !important; white-space: nowrap; }
.rez-volic-cislo span.sam { visibility: hidden; }
.rez-volic-veta { flex: 1; min-width: 14em; font-size: 15px; color: var(--rez-muted) !important; line-height: 1.5; padding-bottom: 6px; }
.rez-volic-veta b { color: var(--rez-ink); }

.rez-volic-pas { position: relative; padding: 44px 0 26px; }
.rez-volic-nad, .rez-volic-pod {
  position: absolute; left: 0; right: 0; height: 18px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
.rez-volic-nad { top: 0; color: var(--rez-ink); }
.rez-volic-pod { bottom: 0; color: var(--rez-muted); }
.rez-volic-nad span, .rez-volic-pod span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rez-volic-pod span:last-child { transform: translateX(-100%); }
.rez-volic-pod span::before { content: ''; display: block; width: 1px; height: 6px; background: var(--rez-line-strong); margin: 0 auto 3px; }
.rez-volic-pod span:last-child::before { margin-right: 0; }

.rez-volic-zony { position: absolute; left: 0; right: 0; top: 44px; height: 6px; border-radius: 99px; overflow: hidden; display: flex; pointer-events: none; }
.rez-volic-zony span { height: 100%; flex: 1; }
.rez-volic-zony .z1 { background: var(--rez-z1); }
.rez-volic-zony .z2 { background: var(--rez-z2); }
.rez-volic-zony .z3 { background: var(--rez-z3); }

.rez-volic input[type=range] {
  -webkit-appearance: none; appearance: none; position: relative; z-index: 2;
  width: 100%; height: 6px; margin: 0; background: transparent; cursor: grab;
}
.rez-volic input[type=range]:active { cursor: grabbing; }
.rez-volic input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.rez-volic input[type=range]::-moz-range-track { height: 6px; background: transparent; }
.rez-volic input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; margin-top: -12px;
  background: var(--rez-fill); border: 3px solid var(--rez-card); box-shadow: 0 0 0 2px var(--rez-fill);
}
.rez-volic input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--rez-fill); border: 3px solid var(--rez-card); box-shadow: 0 0 0 2px var(--rez-fill);
}

/* karty po posunutí: doporučená svítí, ostatní ustoupí */
.rez-card { transition: border-color .25s, transform .2s, box-shadow .25s, opacity .25s; }
.rez-card.rez-doporucena {
  border-color: var(--rez-akcent);
  box-shadow: 0 0 0 1px var(--rez-akcent), 0 10px 30px var(--rez-shadow);
}
.rez-card.rez-utlumena { opacity: .45; }
.rez-card.rez-utlumena:hover { opacity: .85; }

/* ── ikony na kartách ── */
.rez-ikona { display: block; width: 34px; height: 34px; margin-bottom: 12px; color: var(--rez-muted); transition: color .25s; }
.rez-ikona svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rez-card.rez-doporucena .rez-ikona { color: var(--rez-akcent); }
.rez-card.rez-volba.on .rez-ikona { color: var(--rez-fill-ink); }
.rez-card.rez-volba .rez-ikona { width: 28px; height: 28px; margin-bottom: 10px; }

/* ── rezervace stolu: sloty a hlášky ────────────────────────────────────── */
.rez-sloty { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 8px; }
.rez-slot {
  border: 1px solid var(--rez-line-strong); border-radius: 8px; padding: 9px 4px; text-align: center;
  font: inherit; font-size: 15px; line-height: 1.2; color: var(--rez-ink); background: var(--rez-card); cursor: pointer;
}
.rez-slot small { display: block; font-size: 10px; letter-spacing: .5px; color: var(--rez-muted); margin-top: 3px; min-height: 12px; }
.rez-slot.ok { border-color: rgba(38, 179, 81, .5); }
.rez-slot.tesne { border-color: var(--rez-warn-line); }
.rez-slot.tesne small { color: var(--rez-warn); }
.rez-slot.ne, .rez-slot:disabled { opacity: .35; cursor: not-allowed; }
.rez-slot.ne .cas, .rez-slot:disabled .cas { text-decoration: line-through; }   /* škrtá se jen čas, ne popisek pod ním */
.rez-slot.on { background: var(--rez-fill); color: var(--rez-fill-ink); border-color: var(--rez-fill); }
.rez-slot.on small { color: var(--rez-fill-muted); }
.rez-hlaska { border-radius: 8px; padding: 11px 14px; margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.rez-hlaska-warn { border: 1px solid var(--rez-warn-line); background: var(--rez-warn-bg); color: var(--rez-warn); }
.rez-hlaska-ok { border: 1px solid rgba(38, 179, 81, .45); background: rgba(38, 179, 81, .08); color: var(--rez-ok); }
.rez-hlaska-err { border: 1px solid var(--rez-err-line); background: var(--rez-err-bg); color: var(--rez-err); }
.rez-hlaska .btn.btn-mala { padding: 5px 12px; font-size: 11px; vertical-align: middle; }

/* ── hlavička o polovinu nižší ─────────────────────────────────────────── */
.rez-nav .pt80 { padding-top: 34px !important; padding-bottom: 34px !important; }
.rez-nav .logo { max-height: 64px; }
@media (max-width: 767px) { .rez-nav .pt80 { padding-top: 22px !important; padding-bottom: 18px !important; } .rez-nav .logo { max-height: 50px; } }

/* ── štítky u jídel (vegan, veggie, pálivé, bez lepku) ─────────────────── */
.rez-tagy { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.rez-tag {
  display: inline-block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; line-height: 1;
  padding: 4px 8px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap;
}
.rez-tag-vegan   { background: rgba(72, 170, 96, .18); color: #3e9a58 !important; border-color: rgba(72, 170, 96, .45); }
.rez-tag-veggie  { background: rgba(140, 180, 60, .18); color: #7a9a2c !important; border-color: rgba(140, 180, 60, .45); }
.rez-tag-palive  { background: rgba(220, 90, 50, .16); color: #c8532c !important; border-color: rgba(220, 90, 50, .45); }
.rez-tag-bezlepku{ background: rgba(70, 130, 190, .16); color: #3a76b0 !important; border-color: rgba(70, 130, 190, .45); }
html[data-theme="dark"] .rez-tag-vegan  { color: #7fd693 !important; }
html[data-theme="dark"] .rez-tag-veggie { color: #b9d86a !important; }
html[data-theme="dark"] .rez-tag-palive { color: #f0916f !important; }
html[data-theme="dark"] .rez-tag-bezlepku { color: #8fbfe8 !important; }
.rez-var-hint { display: block; font-size: 12px; color: var(--rez-warn) !important; margin-top: 4px; }
.rez-cat-radky .rez-var-hint { display: inline; margin: 0 0 0 8px; }
.rez-section .rez-item select.bad { border-color: #c0392b !important; }

/* ── rozpočet u položek „dohodou“ ──────────────────────────────────────── */
.rez-rozpocet { display: inline-flex; align-items: center; gap: 6px; }
.rez-rozpocet-lbl { font-size: 12px; color: var(--rez-muted) !important; white-space: nowrap; }
.rez-rozpocet-kc { font-size: 13px; color: var(--rez-muted) !important; }
.rez-field .rez-rozpocet input[type=number], .rez-section .rez-rozpocet input[type=number] { width: 96px !important; text-align: right; margin: 0 !important; }
.rez-cat-radky .rez-rozpocet input[type=number] { width: 88px !important; padding: 4px 6px !important; font-size: 14px !important; }

/* ── souhrn objednávky ─────────────────────────────────────────────────── */
.rez-objednavka {
  background: var(--rez-card); border: 1px solid var(--rez-line-strong); border-radius: 10px;
  color: var(--rez-ink); font-size: 13.5px; box-shadow: 0 10px 30px var(--rez-shadow);
}
.rez-obj-hlava { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.rez-obj-hlava b { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.rez-obj-hlava span { margin-left: auto; color: var(--rez-muted) !important; font-size: 12.5px; white-space: nowrap; }
.rez-obj-sipka { display: none; }
.rez-obj-telo { padding: 0 14px 12px; }
.rez-obj-radek { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rez-line); }
.rez-obj-radek span { flex: 1; min-width: 0; }
.rez-obj-radek small { display: block; font-size: 11.5px; color: var(--rez-muted) !important; }
.rez-obj-radek b { white-space: nowrap; font-weight: 500; }
.rez-obj-celkem { display: flex; justify-content: space-between; padding: 10px 0 0; border-top: 2px solid var(--rez-line-strong); margin-top: 4px; font-size: 15px; }
.rez-obj-celkem b { font-weight: 600; }
.rez-obj-nic { margin: 4px 0 0; font-size: 12.5px; color: var(--rez-muted) !important; }
/* velká obrazovka: seznam a souhrn vedle sebe, souhrn se drží při rolování */
.rez-cat-obal { display: block; }
@media (min-width: 1200px) {
  .rez-cat-obal { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 28px; align-items: start; }
  .rez-cat-obal > .rez-cat { min-width: 0; }
  .rez-objednavka { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; margin-top: 22px; }
  .rez-obj-hlava { cursor: default; flex-wrap: wrap; padding-bottom: 8px; }
  .rez-obj-hlava b { white-space: nowrap; }
  .rez-obj-hlava span { margin-left: 0; flex-basis: 100%; }
  .rez-cat-radky .rez-item-note { display: block; font-size: 12px; }
  .rez-cat-radky .rez-item-note::before { content: ''; }
}
/* menší obrazovka: lišta dole, rozbalí se klepnutím */
@media (max-width: 1199px) {
  .rez-objednavka { position: sticky; bottom: 12px; z-index: 20; margin-top: 16px; }
  .rez-objednavka .rez-obj-telo { display: none; }
  .rez-objednavka.open .rez-obj-telo { display: block; }
  .rez-objednavka.prazdna { display: none; }
  .rez-obj-sipka { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid var(--rez-muted); border-bottom: 1.5px solid var(--rez-muted); transform: rotate(-135deg); margin-left: 4px; }
  .rez-objednavka.open .rez-obj-sipka { transform: rotate(45deg); }
}

/* ── rozcestník: čtyři úzké karty v jedné řadě (varianta A) ───────────── */
#hub-cards { grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1000px; }
#hub-cards .rez-card { padding: 16px 18px 18px; min-height: 0; }
#hub-cards .rez-card-hl { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; width: 100%; }
#hub-cards .rez-card-hl .rez-ikona { width: 22px; height: 22px; margin: 0; flex: none; }
#hub-cards .rez-card-hl .rez-znacka { height: 22px; margin: 0; flex: none; }
#hub-cards .rez-card h3 { font-size: 14.5px; letter-spacing: 1px !important; margin: 0; line-height: 1.3; }
#hub-cards .rez-card .rez-chip { font-size: 10px; letter-spacing: 1.5px; padding: 3px 10px; margin-bottom: 8px; }
#hub-cards .rez-card p { font-size: 12.5px; line-height: 1.45; }   /* popis celý, nic se neusekává */
/* logo podniku (maska z logo-<id>.png) a čtvrtá dlaždice „náš sousední podnik“ — varianta B, 5. 10. 2026 */
.rez-logo { display: block; width: 34px; height: 34px; margin-bottom: 12px; background-color: var(--rez-muted); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background-color .25s; }
#hub-cards .rez-card-hl .rez-logo { width: 26px; height: 26px; margin: 0; flex: none; }
.rez-card.rez-doporucena .rez-logo { background-color: var(--rez-akcent); }
.rez-card.rez-druhy { background: linear-gradient(160deg, var(--rez-warn-bg), transparent 85%), var(--rez-card); border-color: var(--rez-warn-line); }
.rez-card.rez-druhy:hover { border-color: var(--rez-warn); }
.rez-card.rez-druhy .rez-logo { background-color: var(--rez-warn); }
.rez-card.rez-druhy .rez-chip { color: var(--rez-warn); border-color: var(--rez-warn-line); }
#hub-cards .rez-card.rez-druhy .rez-cta { color: var(--rez-warn); font-size: 12.5px; padding-top: 10px; }
@media (max-width: 1000px) { #hub-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #hub-cards { grid-template-columns: 1fr; } }

/* ── nadpisy kategorií cateringu: silná linka + počet (varianta 1) ─────── */
.rez-group-title.rez-group-title-silna {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; letter-spacing: 2.5px; font-weight: 700;
  color: var(--rez-ink) !important; border-bottom: 2px solid var(--rez-ink); padding-bottom: 8px; margin: 28px 0 6px;
}
.rez-group-title.rez-group-title-silna small { font-size: 11px; letter-spacing: 1px; text-transform: none; font-weight: 400; color: var(--rez-muted) !important; white-space: nowrap; }
.rez-cat-radky .rez-group-title.rez-group-title-silna { margin: 26px 0 4px; }

/* ── iOS Safari: datum má vlastní vnitřní šířku a utíká doprava ─────────── */
.rez-field input[type=date] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%;
  -webkit-min-logical-width: calc(100% - 26px);
  text-align: left; min-height: 44px; line-height: 1.3;
}
.rez-field input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.rez-field input[type=date]::-webkit-calendar-picker-indicator { opacity: .7; }

/* ── telefon: kompaktní hlavička (varianta 2) ────────────────────────────
   Jedna lišta 64 px: vlevo zpět, uprostřed logo, vpravo jazyk a režim.
   Řádek s odkazy i černý pás s velkým logem se na telefonu schovají. */
.rez-mobil-lista { display: none; }
@media (max-width: 767px) {
  .rez-nav .nav-utility, .rez-nav .pt80 { display: none !important; }
  .rez-mobil-lista {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 18px; position: relative; z-index: 2;
    font-family: var(--rez-font-body); color: #fff;
  }
  .rez-mobil-lista a { color: #fff; text-decoration: none; font-size: 13px; letter-spacing: 1px; font-weight: normal; }
  .rez-ml-zpet, .rez-ml-prava { flex: 1 1 0; min-width: 0; white-space: nowrap; }
  .rez-ml-prava { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .rez-ml-logo { flex: none; display: flex; align-items: center; }
  .rez-ml-logo img { height: 34px; width: auto; display: block; }
  .rez-mobil-lista .rez-theme { margin-left: 0; width: 30px; height: 30px; }
}
/* telefon: popisky nad jezdcem se překrývaly („SRAZPRONÁJEM“) */
@media (max-width: 480px) {
  .rez-volic-nad { font-size: 9px; letter-spacing: .4px; }
  .rez-volic-nad span:first-child { transform: translateX(-50%); }
  .rez-volic-nad span:last-child { transform: translateX(-100%); }
}

/* ── volné časy: přepočet bez bliknutí ──────────────────────────────────
   Při načítání zůstanou staré časy ztlumené na místě, nové pak najedou
   zespodu s malým zpožděním po řadě. Mřížka si drží výšku, ať neskáče. */
.rez-sloty { transition: opacity .25s; }
.rez-sloty.nacitam { opacity: .35; pointer-events: none; }
#stul-slot-hlaska { transition: opacity .25s; }
#stul-slot-hlaska.nacitam { opacity: .35; }
@keyframes rez-vjezd { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rez-slot.vjezd { animation: rez-vjezd .32s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .rez-slot.vjezd { animation: none; } }
.rez-hint.rez-hint-varovani { color: var(--rez-warn) !important; }
.rez-hint.vjezd { animation: rez-vjezd .25s ease-out both; }