/* ════════════════════════════════════════════════════════════
   05-reservation.css

   Funkcni zaklad rezervacnich stranek: layout, samoobsluha (/rezervace/sprava),
   duvod zruseni, hodnoceni po hre, .card, kalendar, sloty, formulare, zpravy.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FUNKČNÍ STRÁNKY — rezervace, statistiky, akce, admin.
   Token-driven, jen klidná prezentace bez neonu.
   ════════════════════════════════════════════════════════════ */

/* ── LAYOUT (reservation page) ───────────────────── */
.layout { display: flex; gap: 20px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; }
.main { flex: 2; min-width: 320px; }
.side { flex: 1; min-width: 220px; align-self: flex-start; }
.page { padding: 7rem var(--pad) 3rem; }
.page > h1 { margin-bottom: 2rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page.section-flush { padding-top: clamp(6rem, 12vh, 8rem); }

/* ── Samoobsluha rezervace ── */
.btn-danger { background: var(--danger); color: #fff; border: 1px solid transparent; }
.btn-danger:hover { opacity: .9; }
#manage-list { max-width: 560px; margin-top: 1.5rem; }
.res-manage { margin-bottom: 1rem; }
.rm-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .25rem; }
.rm-status { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.res-manage.status-zrusena { opacity: .55; }
.rm-actions { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.rm-edit { margin-top: 1rem; display: grid; gap: .7rem; }
.rm-edit.hidden { display: none; }

/* Duvod zruseni: mikro-dotaz, ktery JS vlozi ZA zrusenou kartu (viz manage.js -
   uvnitr karty by ho stahla opacity u .status-zrusena). Chip = jeden klik. */
.rm-fb {
  position: relative; margin: -.4rem 0 1.4rem; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.rm-fb-close {
  position: absolute; top: 6px; right: 8px; background: none; border: 0;
  color: var(--muted); font-size: .9rem; line-height: 1; cursor: pointer; padding: 4px;
}
.rm-fb-close:hover { color: var(--text); }
.rm-fb-q { margin: 0 1.6rem .7rem 0; font-size: .92rem; }
.rm-fb-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rm-fb-chips.rm-fb-done { display: none; }
.rm-fb-chip {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font-size: .84rem; cursor: pointer;
  transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.rm-fb-chip:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent); }
.rm-fb-chip:disabled { cursor: default; }
.rm-fb-chip.is-picked { border-color: var(--accent-border); color: var(--accent); }
.rm-fb-note { margin-top: .8rem; display: grid; gap: .5rem; justify-items: start; }
.rm-fb-note.hidden { display: none; }
.rm-fb-label { font-size: .82rem; color: var(--muted); }
.rm-fb-text { width: 100%; resize: vertical; }
.rm-fb-msg:empty { display: none; }

/* Hodnoceni po hre (den-po email -> /zpetna-vazba/<token>): 5 hvezdicek + koment. */
.rf-stars { display: flex; gap: .3rem; margin-bottom: 1rem; }
.rf-star {
  background: none; border: 0; padding: 2px; font-size: 2rem; line-height: 1;
  color: var(--line); cursor: pointer;
  transition: color var(--d-hover) var(--ease-out);
}
.rf-star:hover, .rf-star.is-picked { color: var(--accent); }
.rf-note-label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.rf-note { width: 100%; resize: vertical; margin-bottom: 1rem; }
.rf-done { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: 0; }

/* ── CARD ────────────────────────────────────────── */
/* Kolo 5 (13. 9.): karta bez vlastni plochy. Ramecek nese `.neon-frame--open`
   ze sablony, ktery si prerusení vyrezava maskou — pod pruhlednou kartou tedy
   nevznikaji „gumy" v barve pozadi (viz past popsana v docs/claude/design.md). */
.card {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px;
}
/* POZOR NA POŘADÍ. `.card` stojí v souboru AŽ ZA `.neon-frame` a nastavuje
   `border` ZKRATKOU, takže rámečku přebije tloušťku i barvu — a to tiše:
   `::after` s přerušeními se dál kreslí, jen nemá co přerušovat, takže karta
   vypadá jako obyčejná. Specificita je u obou stejná (jedna třída), rozhoduje
   pořadí, a `@media` ani nic dalšího na tom nic nezmění.
   Tyhle tři řádky proto musí zůstat ZA `.card`. */
.card.neon-frame { border: var(--frame-w) solid var(--accent); }
/* Otevrena varianta kresli ramecek v `::before`, takze prvek sam ZADNY border
   mit nesmi — jinak by pod nim zustala 1px linka z `.card`. */
.card.neon-frame--open { border: 0; }

/* ── CALENDAR ────────────────────────────────────── */
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-header button { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
.cal-header button:hover { border-color: var(--accent-border); color: var(--accent); }
.cal-header button:disabled { opacity: .35; cursor: not-allowed; }
.cal-header button:disabled:hover { border-color: var(--line); color: var(--text); }
#cal-title { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day-name { text-align: center; font-size: .75rem; color: var(--muted); }
.cal-day { text-align: center; padding: 10px 0; border-radius: var(--radius); background: var(--surface-2); cursor: pointer; border: 1px solid var(--line); color: var(--text); transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), background var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
.cal-day:hover:not(.disabled):not(.empty) { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.cal-day.empty { background: transparent; cursor: default; border-color: transparent; }
.cal-day.disabled { opacity: .3; cursor: not-allowed; }
.cal-day.closed { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.cal-day.full { opacity: .45; cursor: not-allowed; border-style: dashed; }
.cal-day.selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* ── TIMES / SLOTS ───────────────────────────────── */
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.slot { padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); cursor: pointer; background: var(--surface-2); color: var(--text); transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), background var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
.slot small { display: block; font-size: .7rem; color: var(--muted); }
.slot:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.slot.selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.slot.selected small { color: var(--accent-ink); opacity: .8; }
.slot:hover:not(:disabled) small { color: var(--accent); }
.slot:disabled { opacity: .35; cursor: not-allowed; }

/* ── FORMS ───────────────────────────────────────── */
form label { display: block; margin-bottom: 12px; font-size: .9rem; }
/* Input font-size musi byt >=16px (viz nize) - pod 16px iOS Safari pri
   focusu priblizi stranku a pri blurru zase oddali, coz vypada jako
   "kaz se" pri odeslani formulare (blur nastane presne pri kliku na Potvrdit). */
form input, form textarea, form select {
  width: 100%; margin-top: 4px; padding: 9px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 16px;
}
form input:focus, form textarea:focus, form select:focus,
.lf-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.btn-finish {
  width: 100%; padding: 14px; font-size: 1rem; font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius-lg); cursor: pointer;
  font-family: var(--font); letter-spacing: 0;
  transition: opacity var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out);
}
.btn-finish:hover { opacity: .9; }

/* ── MESSAGES ────────────────────────────────────── */
.msg { margin-top: 10px; font-weight: 600; min-height: 1.2em; }
.msg.error { color: var(--error); }
.msg.success { color: var(--accent); }

/* ── RESERVATION TYPES ───────────────────────────── */
.types { display: flex; flex-direction: column; gap: 8px; }
.type-option { background: var(--surface-2); padding: 10px; border-radius: var(--radius); cursor: pointer; display: block; border: 1px solid var(--line); transition: border-color var(--d-hover) var(--ease-out), background var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
.type-option:hover { border-color: var(--accent-border); }
.type-option:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }