/* =============================================================================
   Padel Strahov — vizuální vrstva microsite
   -----------------------------------------------------------------------------
   Zdroj návrhu: docs/requirements/.done/2026-07-29__padel/09-specifikacia-vizual.md
                 docs/requirements/.done/2026-07-29__padel/padel-sparta-styl.html (schválený prototyp)
                 docs/requirements/.done/2026-07-29__padel/priloha-screenshoty/*.png

   Předchozí verze byla přebarvený motiv rezervace.horasportu.cz (vínová + zlatá)
   s dark-mode vrstvou nalepenou na konci souboru; tohle je psané přímo proti
   tokenům ze schváleného prototypu (černá + sparťanská červená).

   ROZSAH: pouze vzhled. Šablona `templates/microsite/reservation/*` je SDÍLENÁ
   napříč všemi microsity, takže se do ní nesahá — rezervační kalendář se tvaruje
   výhradně odsud. Tento soubor se načítá jen pro tuto microsite (klíč `css.stylesheet`).

   POZOR — z dodaných MVP dokumentů se přebírá VÝHRADNĚ vizuál. Chování systému
   se jimi neřídí: blokace i jakýkoliv nezrušený požadavek termín aktivně blokují,
   bez ohledu na to, co k tomu říká vizuální specifikace. Barevné odlišení
   nepotvrzené žádosti od potvrzené rezervace je proto jen informace navíc,
   ne signál o dostupnosti.
   ========================================================================== */

:root {
    /* Barevné tokeny — spec §2 */
    --bg: #0A0A0B;
    --surface: #141417;
    --surface2: #1C1C21;
    --edge: #292930;
    --white: #F3F3F4;
    --muted: #93939A;
    --red: #E01B2E;
    --red-hi: #F5334A;
    --gold: #E9B23C;
    --ok: #2FA36B;

    /* Pohyb — spec §5 */
    --t: 200ms cubic-bezier(.2, .7, .3, 1);

    /* Přemapování Bootstrapu, ať komponenty, které nestylujeme ručně,
       nevypadnou ze škály (modaly, alerty, formuláře). */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--white);
    --bs-border-color: var(--edge);
    --bs-primary: var(--red);
    /* POZOR: barevné utility (`.bg-primary`, `.text-primary`, `.border-primary`)
       ani focus ring NEČTOU `--bs-primary` výše, ale RGB variantu. Bez tohohle
       řádku zůstala hlavička akvizičního modalu (`.modal-header.bg-primary`)
       výchozí bootstrapovou modrou uprostřed jinak červenočerného webu.
       Hodnota = --red (#E01B2E) rozepsaná do složek; CSS neumí hex → rgb
       konverzi, takže se to musí držet v synchronu ručně. */
    --bs-primary-rgb: 224, 27, 46;
    --bs-link-color: var(--white);
    --bs-link-hover-color: var(--red-hi);
}

/* -----------------------------------------------------------------------------
   Základ
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--white);
    font-family: "Barlow", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* Spec §5: žádný horizontální scroll na mobilu. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5,
.display-font {
    font-family: "Anton", "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .96;
    font-weight: 400;
}

a { color: var(--white); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--red-hi); }

hr { border-color: var(--edge); opacity: 1; }

/* Spec §5: focus-visible = 2px červený outline s offsetem. */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Spec §5: prefers-reduced-motion vypíná VŠECHNY animace. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------------------------
   Horní lišta s účtem
   -------------------------------------------------------------------------- */

.nav-login {
    background: #000 !important;
    border-bottom: 1px solid var(--edge);
    padding: .5rem 0 !important;
    font-size: 12px;
}

.nav-login .btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .35rem .8rem;
}

.nav-login .btn-outline-light {
    border-color: var(--edge);
    color: var(--white);
}

.nav-login .btn-outline-light:hover {
    background: var(--surface2);
    border-color: #3B3B44;
    color: var(--white);
}

.nav-login .btn-outline-success {
    border-color: var(--red);
    color: var(--white);
}

.nav-login .btn-outline-success:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.nav-login .btn-outline-danger { border-color: var(--edge); color: var(--muted); }

.nav-login .btn-outline-danger:hover {
    background: var(--surface2);
    color: var(--white);
    border-color: #3B3B44;
}

/* Šablona dává textu „nepřihlášen" třídu text-dark — na černém podkladu nečitelné. */
.nav-login .not-logged,
.nav-login .text-dark { color: var(--muted) !important; }

/* -----------------------------------------------------------------------------
   Hlavička
   -------------------------------------------------------------------------- */

header {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--edge);
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Hlavička, hero i obsah stránky mají mít shodnou levou hranu.
   Všechny tři jsou (nebo obsahují) `.container`, takže se horizontální padding
   ZÁMĚRNĚ nepřepisuje — bere se z Bootstrapu a zarovnání je tím pádem dané
   strukturou, ne ručně sladěnými čísly (dřív tu bylo 16 px proti 12 px
   u hero/obsahu, což logo a nadpis posouvalo doprava). Přepisuje se jen
   vertikální padding a max-width, který musí být u všech tří stejný. */
header .main-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 1180px;
}

/* Oficiální krest AC Sparta (SVG 72×72) — spec §6: 32 px v hlavičkách.
   Žádné zaoblení ani rámeček, jde o znak na průhledném podkladu. */
.main-bar-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.brand-nav a {
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white);
}

.brand-nav a:hover { color: var(--red-hi); }

.header-actions { margin-left: auto; }

/* CTA pilulka — spec §4. Šipka se při hoveru posune o 4 px doprava. */
.cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t);
}

.cta-pill:hover { background: var(--red-hi); color: #fff; }
.cta-pill svg { width: 12px; height: 12px; transition: transform var(--t); }
.cta-pill:hover svg { transform: translateX(4px); }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    border-bottom: 1px solid var(--edge);
    padding: 22px 0 20px;
    /* Spec §3: jemný červený radiální gradient z levého horního rohu. */
    background: radial-gradient(120% 90% at 0% 0%, rgba(224, 27, 46, .20), transparent 60%);
}

.hero .container { max-width: 1180px; }

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

.hero__eyebrow .dot { color: #4A4A52; }
.hero__eyebrow .m { color: var(--muted); }

.hero__title {
    font-family: "Anton", sans-serif;
    font-size: clamp(30px, 8vw, 44px);
    line-height: .92;
    text-transform: uppercase;
    margin: 10px 0 0;
}

.hero__lead {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

/* -----------------------------------------------------------------------------
   Obsah, karty, panely
   -------------------------------------------------------------------------- */

main.container { max-width: 1180px; }

/* Sdílená šablona zóny zabaluje kalendář do DALŠÍHO `.container`
   (`container overflow-hidden booking-calendar-container p-0 …`) vnořeného
   uvnitř `main.container`. Vnořený kontejner si nese vlastní bootstrapovou
   max-width (540/720/960/1140/1320) a znovu se v rodiči centruje, takže jeho
   levá hrana utíkala od hlavičky a hero — a to různě podle breakpointu:
   0 px při 1440, 8 px při 1280, ale až 58 px při 1100 px šířky.
   Ručním doladěním paddingu se to pokrýt nedá. Vnořenému kontejneru proto
   bereme vlastní strop šířky a necháme ho vyplnit obsah `main.container`;
   tím mají hlavička, hero i kalendář shodnou levou hranu na všech šířkách. */
.booking-calendar-container { max-width: 100%; }

.card,
.bg-white {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
    color: var(--white);
}

.card-header, .card-footer {
    background: transparent !important;
    border-color: var(--edge) !important;
    color: var(--white);
}

.text-muted, .form-text { color: var(--muted) !important; }
.text-dark { color: var(--white) !important; }
.border-bottom, .border-top, .border { border-color: var(--edge) !important; }

.badge { border-radius: 999px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Drobečková navigace se skrývá JEN na stránce zóny — tam ji nese hero.
   Na seznamu zón je to ale jediná cesta zpět na objekty, takže tam zůstává
   (dřív tu bylo globální `.breadcrumb { display: none }`, což tu navigaci
   uživateli sebralo). Skrytí obstará pravidlo pro `.row-header` níže. */
.breadcrumb {
    padding: 0;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.breadcrumb-item + .breadcrumb-item::before { color: #4A4A52; }
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item a:hover { color: var(--white); }
.breadcrumb-item.active { color: var(--white); }

/* Hlavička stránky zóny ze sdílené šablony `microsite/reservation/zone-detail.html.twig`.
   Šablona je společná všem micrositům, takže se do ní nesahá a skrývá se odsud:
     - `main.container > h1` = nadpis „Rezervační kalendář",
     - `.row-header`         = blok s drobečkovou navigací, názvem zóny a „Objekt: …".
   Tyhle informace nese v tomto návrhu hero (název zóny je v eyebrow na prvním místě),
   takže by se jen zdvojovaly.
   POZOR: v `.row-header` je i popis zóny (`zonaPopis`) — kdyby ho zóna měla vyplněný,
   skryje se s ním. Až bude potřeba, vytáhnout ho zvlášť do hero bloku. */
main.container > h1,
.booking-calendar-container .row-header { display: none; }

/* -----------------------------------------------------------------------------
   Podnavigace objektů
   -------------------------------------------------------------------------- */

.reservation-subnav {
    background: var(--bg);
    border-bottom: 1px solid var(--edge);
}

.reservation-subnav ul {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1180px;
}

.reservation-subnav ul::-webkit-scrollbar { display: none; }

.reservation-subnav li a {
    display: block;
    padding: 8px 14px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--t), border-color var(--t), color var(--t);
}

.reservation-subnav li a:hover { border-color: #43434D; color: var(--white); }

.reservation-subnav li.current-item a {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* =============================================================================
   SEZNAM OBJEKTŮ (/site/reservation) A SEZNAM ZÓN (/site/reservation/{uri})
   -----------------------------------------------------------------------------
   Šablony `microsite/reservation/list.html.twig`, `_object-cards.html.twig`
   a `object-zones.html.twig` jsou SDÍLENÉ — tvarujeme je jen odsud.
   Karty používají stejný jazyk jako dlaždice kalendáře: povrch + edge border,
   zaoblení 16 px, hover = červený rámeček a zdvih o 2 px.
   ========================================================================== */

.zona-card,
.zona-card.card {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
    overflow: hidden;
    /* Tmavý motiv staví na rámečcích, ne na stínech — `.shadow` ze šablony rušíme. */
    box-shadow: none !important;
}

.hover-card { transition: transform var(--t), border-color var(--t); }

.hover-card:hover {
    transform: translateY(-2px);
    border-color: var(--red) !important;
    box-shadow: none !important;
}

.zona-card .card-header,
.zona-card .card-body,
.zona-card .card-footer {
    background: transparent !important;
    border: 0 !important;
}

/* Obrázková hlavička karty objektu — místo prázdné plochy sparťanský gradient
   ve stejném duchu jako hero. */
.zona-card .card-img-top {
    position: relative;
    background: radial-gradient(120% 120% at 0% 0%, rgba(224, 27, 46, .28), var(--surface2) 65%);
    border-bottom: 1px solid var(--edge);
}

.zona-card .card-img-top .fas { color: rgba(243, 243, 244, .45); }

/* Náhled objektu (hlavička seznamu zón i karta v seznamu objektů).
   Bez rozměru se `<img>` kreslil v původní velikosti — zdroj je varianta
   „zvetsena", takže obrázek zabral půl stránky. Držíme ho malý a v pevném poměru. */
.object-thumbnail {
    position: relative;      /* kotva pro .object-thumbnail-overlay níže */
    overflow: hidden;
    flex-shrink: 0;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--edge);
    border-radius: 16px;
    background: var(--surface2);
}

.object-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .object-thumbnail { width: 160px; }
}

/* POZOR na kotvu: overlay je `position: absolute`, takže bez pozicovaného rodiče
   se roztáhne přes celý viewport a ztmaví stránku. Rodiče mají `position: relative`
   obě varianty — `.object-thumbnail` výše i `.card-img-top` v kartě objektu. */
.object-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 11, .55));
    pointer-events: none;
}

/* Prázdná hlavička karty zóny (šablona ji používá jen jako odsazení) — dáme jí
   tenký červený proužek, ať karta nezačíná nicotou. */
.zona-card:not(.object) .card-header {
    padding-top: 0 !important;
    height: 4px;
    background: linear-gradient(90deg, var(--red), transparent 70%) !important;
}

.zona-card .card-title,
.zona-card h3 {
    font-family: "Anton", sans-serif;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

.zona-card .card-text {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}

.zona-card .card-text .fas,
.zona-card .card-body .fas { color: var(--red); }

/* CTA v patičce karty je `.btn.text-white` bez varianty — bez motivu je to
   neviditelný text. Děláme z něj červenou pilulku jako ostatní CTA. */
.zona-card .card-footer .btn {
    background: var(--red);
    border-color: var(--red);
    color: #fff !important;
    padding: 10px 16px;
}

.zona-card .card-footer .btn:hover { background: var(--red-hi); border-color: var(--red-hi); }

/* Šablona dává ikonu za text s `me-2`, což ji odsadí špatným směrem. */
.zona-card .card-footer .btn .fas { margin-right: 0 !important; margin-left: .5rem; }

/* Nadpis a adresa nad seznamem zón. */
main.container > .container h1,
main.container > .row h1 {
    font-family: "Anton", sans-serif;
    font-size: clamp(22px, 4vw, 30px);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* -----------------------------------------------------------------------------
   Tlačítka
   -------------------------------------------------------------------------- */

.btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11.5px;
    transition: background var(--t), border-color var(--t), transform var(--t);
}

.btn:active { transform: scale(.985); }

/* ⚠️ Bootstrap 5.3 řídí stavy tlačítka VLASTNÍMI proměnnými a stavová pravidla
   mají vyšší specificitu než tenhle selektor: `.btn.active` (0,2,0) porazí
   `.btn-primary` (0,1,0). Přenastavení samotného `background` proto stav
   „aktivní / stisknuto" NEPŘEBIJE — tlačítko v něm svítilo výchozí bootstrapovou
   modrou `#0a58ca` uprostřed jinak červenočerného webu. Projevilo se to na
   přepínačích délky rezervace, kde je vybraná varianta trvale `.active`, ale
   týkalo se to každého `.btn-primary` ve stisknutém stavu.

   Proměnné se proto přemapovávají rovnou; `background`/`border-color` níže
   zůstávají jako pojistka pro klidový stav. */
.btn-primary, .btn-success, .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-hi);
    --bs-btn-hover-border-color: var(--red-hi);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-hi);
    --bs-btn-active-border-color: var(--red-hi);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--red);
    --bs-btn-disabled-border-color: var(--red);
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-primary:hover, .btn-success:hover, .btn-danger:hover {
    background: var(--red-hi);
    border-color: var(--red-hi);
    color: #fff;
}

.btn-secondary, .btn-outline-secondary, .btn-light {
    background: var(--surface2);
    border-color: var(--edge);
    color: var(--white);
}

.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover {
    background: #26262C;
    border-color: #3B3B44;
    color: var(--white);
}

/* Nevybraná varianta — tlumená dlaždice, stejný jazyk jako `.day-term-item`.
   Stavové proměnné se přemapovávají ze stejného důvodu jako u `.btn-primary` výše. */
.btn-outline-primary {
    --bs-btn-color: var(--white);
    --bs-btn-border-color: var(--edge);
    --bs-btn-bg: var(--surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red);
    --bs-btn-hover-border-color: var(--red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red);
    --bs-btn-active-border-color: var(--red);
    border-color: var(--edge);
    background: var(--surface);
    color: var(--white);
}

.btn-outline-primary:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* Přepínače délky rezervace v akvizičním modálu (režim `duration-minutes` /
   `duration-hours`). Barvy si berou z `.btn-primary` / `.btn-outline-primary`
   výše — tady jen tvar a chování, ať drží stejný jazyk jako dlaždice termínů. */
.duration-choice {
    min-width: 76px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: .04em;
    transition: transform var(--t), background var(--t), border-color var(--t);
}

.duration-choice:hover { transform: translateY(-2px); }
.duration-choice:active { transform: scale(.97); }

/* Spec §5: dotykové cíle min. 44 px. */
.btn, .cta-pill, .day-term-item { min-height: 44px; }
.btn-sm { min-height: 34px; }

/* -----------------------------------------------------------------------------
   Formuláře
   -------------------------------------------------------------------------- */

/* ⚠️ `font-size` nesmí klesnout pod 16 px. Mobile Safari přiblíží vizuální
   viewport pokaždé, když se zaměří textové pole s menším písmem — layout se
   nepřepočítá, jen se zvětší měřítko, takže obsah akvizičního modálu přeteče
   vpravo. Zoom se po opuštění pole nevrací a měřítko si záložka drží i přes
   navigaci; meta viewport s tím nic nezmůže (Safari od iOS 10 `user-scalable`
   i `maximum-scale` ignoruje). Nejvíc to bije při vyplnění správcem hesel,
   který pole zafokusuje sám. Původních 15 px na to stačilo. */
.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 12px;
    color: var(--white);
    padding: 12px 13px;
    font-size: 16px;
    transition: border-color var(--t);
}

.form-control:focus, .form-select:focus {
    background: var(--surface);
    border-color: var(--red);
    color: var(--white);
    box-shadow: none;
}

.form-control::placeholder { color: #63636B; }

/* Neaktivní prvky formuláře.
   Bootstrap dává `:disabled` / `[readonly]` světlé pozadí (`--bs-secondary-bg`)
   a je specifičtější než `.form-control` výše — na tmavém motivu tak vznikal
   bílý text na bílém podkladu (typicky „Datum a čas začátku rezervace", které
   je disabled a plní ho datepicker). Držíme je proto v tmavé škále: mírně
   ztmavený povrch + tlumený text, aby bylo poznat, že se needitují, ale daly
   se přečíst. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly],
textarea:disabled,
textarea[readonly] {
    background-color: #101014;
    border-color: var(--edge);
    color: var(--white);
    opacity: 1;
    -webkit-text-fill-color: var(--white); /* Safari/iOS jinak disabled text zesvětlí */
}

/* Input group kolem datepickeru (celý blok působí jako jedno pole). */
.input-group:has(.form-control:disabled),
.input-group:has(.form-control[readonly]) { background: transparent; }

/* Nedostupné položky v selectech — např. varianta, která v daném čase neprojde. */
option:disabled,
.form-select option:disabled,
.reservation-variant-unavailable {
    color: #5C5C64;
    background: var(--surface);
}

.form-check-input:disabled { background-color: #101014; border-color: var(--edge); opacity: .55; }
.form-check-input:disabled ~ .form-check-label,
.form-check-input:disabled + label { color: #5C5C64; opacity: 1; }

/* Neaktivní tlačítka — Bootstrap jim jen sníží opacity, což na tmavém podkladu
   splývá; radši explicitní tlumený povrch. */
.btn:disabled,
.btn.disabled {
    background: var(--surface2);
    border-color: var(--edge);
    color: #5C5C64;
    opacity: 1;
}

.form-select {
    /* Bílá šipka místo výchozí tmavé (na tmavém podkladu neviditelná). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F3F3F4' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 14px;
}

.form-select option { background: var(--surface); color: var(--white); }

.form-label, label {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.form-check-input {
    background-color: var(--surface2);
    border-color: var(--edge);
}

.form-check-input:checked {
    background-color: var(--red);
    border-color: var(--red);
}

.input-group-text {
    background: var(--surface2);
    border-color: var(--edge);
    color: var(--muted);
}

/* -----------------------------------------------------------------------------
   Modal se shrnutím vložené rezervace
   -----------------------------------------------------------------------------
   Podtitulek („Jakmile dojde ke změně stavu rezervace… budeme Vás informovat
   e-mailem.") má v šabloně bootstrapovou třídu `.text-black`, která nastavuje
   černou s `!important` — na tmavém modalu tedy černá na tmavém, tj. neviditelná.
   Přebít to jde jen vyšší specificitou se stejnou váhou: `#summarySubtitle`
   (1,0,0) poráží `.text-black` (0,1,0), obojí s `!important`.
   Je to zároveň jediná informace o tom, co se stane dál, takže ji zvýrazňujeme.
   -------------------------------------------------------------------------- */

#summarySubtitle {
    /* Zelená stejně jako nadpis modalu (`text-success` → --bs-success), ať drží
       hlavička jednu barvu. Musí zůstat `!important` + vyšší specificita kvůli
       bootstrapové `.text-black !important` ze šablony. */
    color: var(--ok) !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    margin-top: 6px;
}

/* Odkaz na detail rezervace.
   Šablona ho vykresluje jen jako kód rezervace v závorce — `(#2026118294)`
   drobným písmem, takže si ho uživatel po odeslání sotva všimne, přestože je to
   jediná cesta do detailu. Necháváme text (mění ho JS a je jazykově neutrální),
   ale děláme z něj zřetelné tlačítko s ikonou „otevře se v novém okně". */
#summaryReservationsList > div {
    font-size: 15px;
    color: var(--white);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Závorky kolem odkazu jsou samostatné <span>y — u tlačítka nedávají smysl. */
#summaryReservationsList > div > span:not(:has(a)) { display: none; }
#summaryReservationsList > div > span > a { margin: 0; }

#summaryReservationsList a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t), transform var(--t);
}

#summaryReservationsList a::before {
    content: "\f35d";                     /* external-link-alt */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
}

#summaryReservationsList a:hover { background: var(--red-hi); transform: translateY(-1px); }

/* Zelený akcent hlavičky modalu bere `var(--bs-success)` (i v inline stylu
   šablony) — přemapujeme ho na naši zelenou, ať nevypadá jako cizí prvek. */
:root { --bs-success: #2FA36B; --bs-success-rgb: 47, 163, 107; }

/* -----------------------------------------------------------------------------
   Souhlasy a informace v akvizičním modalu
   -----------------------------------------------------------------------------
   Sdílená šablona zóny nese pro tento blok VLASTNÍ inline `<style>` ve světlém
   modrobílém motivu (`background: #f8fbff`, modré rámečky, tmavý text). Ten se
   v hlavičce načítá AŽ ZA `padel.css`, takže při shodné specificitě vyhrává —
   proto tu všechna pravidla mají navíc `body`, aby byla specifičtější (1,1,1)
   než původní `#reservationInformationList .trida` (1,1,0).

   Bez toho svítil uprostřed tmavého modalu bílý blok a název přiloženého souboru
   byl bílý text na bílém podkladu, tedy nečitelný.
   -------------------------------------------------------------------------- */

body #reservationInformationList .reservation-info-item {
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-left: 4px solid var(--red);
    border-radius: 12px;
}

body #reservationInformationList .reservation-info-title { color: var(--white); }

body #reservationInformationList .reservation-info-description {
    color: var(--muted);
    /* Vlastní scrollbar, ať se v tmavém bloku neobjeví světlý systémový. */
    scrollbar-width: thin;
    scrollbar-color: var(--edge) transparent;
}

/* Odkaz na dokument — hlavní důvod hlášení: bílý text na bílém podkladu. */
body #reservationInformationList .reservation-info-link a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body #reservationInformationList .reservation-info-link a:hover { color: var(--red-hi); }

/* Odznak typu souboru (PDF, DOCX…) — `text-bg-secondary` je světlý. */
body #reservationInformationList .reservation-info-filetype {
    background: var(--surface) !important;
    border: 1px solid var(--edge);
    color: var(--muted) !important;
}

/* Odznak „povinné". */
body #reservationInformationList .reservation-info-required {
    background: var(--red) !important;
    color: #fff !important;
}

body #reservationInformationList .reservation-info-checkbox {
    border: 1px solid var(--edge);
    background-color: var(--surface);
    accent-color: var(--red);
}

body #reservationInformationList .reservation-info-checkbox:checked {
    background-color: var(--red);
    border-color: var(--red);
}

/* -----------------------------------------------------------------------------
   Modal = bottom sheet (spec §4)
   -------------------------------------------------------------------------- */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 24px;
    color: var(--white);
}

.modal-header, .modal-footer { border-color: var(--edge); }

.modal-title {
    font-family: "Anton", sans-serif;
    font-size: 22px;
    text-transform: uppercase;
}

/* Hlavička akvizičního modalu.
   `.bg-primary` je bootstrapová utilita, tedy `!important` — plochou barvu z ní
   nepřebijeme bez `!important`, a nemá to smysl: díky přemapování
   `--bs-primary-rgb` (viz :root) už je červená sama o sobě. Přidáváme jen spád
   do tmavé, aby hlavička držela stejný jazyk jako hero sekce webu, a proto
   `background-image` — to `.bg-primary` nenastavuje, takže se nic nepřebíjí. */
#reservation-modal-header {
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
}

#reservation-modal-header .modal-title { color: #fff; }

.modal-backdrop.show { opacity: .66; }

.btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .7;
}

.btn-close:hover { opacity: 1; }

@media (max-width: 575.98px) {
    /* Na mobilu ať se modal chová jako sheet vytažený zespodu (spec §4).
       -------------------------------------------------------------------------
       PROČ NE `position: absolute; bottom: 0` (původní řešení):
       `.modal` je `position: fixed` s vlastním scrollem, takže absolutně
       pozicovaný dialog se kotví ke spodní hraně VIEWPORTU, ne ke scrollovanému
       obsahu. Jakmile je dialog vyšší než viditelná plocha, jeho horní část
       vyleze nad okraj a **nedá se k ní doscrollovat** — scroll `.modalu` jde
       jen dolů. Projevilo se to dvakrát:
         • akviziční dialog nešlo na iOS posunout na klientskou poznámku,
         • v potvrzovacím dialogu nebyla vidět hláška o úspěšném vložení,
           protože sedí v hlavičce, tedy úplně nahoře.
       Na iOS je to znát víc než na Androidu: `100%` i `100vh` se počítají
       k velikosti okna VČETNĚ schované adresní lišty, takže dialog přeteče
       viditelnou plochu i tehdy, když se do „100 %" formálně vejde.

       Řešeno flexboxem: dialog má minimální výšku viewportu a obsah se zarovná
       ke spodní hraně. Sheet vypadá stejně, ale přetečení řeší běžný scroll. */
    .modal-dialog,
    .modal-dialog-centered {
        margin: 0;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: flex-end;
    }

    /* Výšku drží obsah, ne procento z `.modalu`. */
    .modal-dialog-scrollable { height: auto; }

    .modal-content {
        width: 100%;
        border-radius: 24px 24px 0 0;
        /* `dvh` respektuje adresní lištu iOS; `vh` je fallback pro starší Safari. */
        max-height: 100vh;
        max-height: 100dvh;
    }

    /* Tělo musí scrollovat i u dialogů BEZ `.modal-dialog-scrollable` —
       potvrzovací dialog je `.modal-dialog-centered`, takže vlastní scroll
       od Bootstrapu nedostane a na jeho konec by se nešlo dostat vůbec.
       `min-height: 0` je nutné, aby se flex položka vůbec směla zmenšit
       pod výšku svého obsahu. */
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
}

/* -----------------------------------------------------------------------------
   Alerty a toastr
   -------------------------------------------------------------------------- */

.alert {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 12px;
    color: var(--white);
}

.alert-success { border-color: rgba(47, 163, 107, .5); }
.alert-warning { border-color: rgba(233, 178, 60, .5); }
.alert-danger { border-color: rgba(224, 27, 46, .5); }
/* Používá ho blok souhlasů v akvizičním modalu — bez pravidla světle modrý. */
.alert-info { border-color: rgba(224, 27, 46, .35); }

/* Toasty.
   POZOR: šablona zóny konfiguruje `positionClass: "toast-center-center"`, což
   NENÍ standardní třída toastru — knihovna ji nezná a každá microsite si ji
   musí nadefinovat sama (horasportu ji má ve svém rezervace.css). Bez těchto
   pravidel nemá kontejner žádné pozicování, takže se hlášky nikde neukázaly:
   uživatel klikl na termín, který nejde rezervovat, a nedostal žádné vysvětlení.

   Spec §4: toast bílý, tmavý text. */
#toast-container.toast-center-center {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: min(520px, calc(100vw - 28px));
    z-index: 999999;
}

#toast-container > div,
#toast-container.toast-center-center > .toast {
    position: relative;
    display: block;
    width: auto;
    background-color: var(--white) !important;
    background-image: none !important;
    color: #0A0A0B;
    border: 0;
    border-left: 4px solid var(--red);
    border-radius: 12px;
    padding: 16px 20px !important;
    margin-bottom: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    opacity: 1;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
}

#toast-container > div .toast-title,
#toast-container > div .toast-message { color: #0A0A0B; }

/* Barevný proužek nese význam stavu — jediné odlišení, jinak zůstává bílý toast. */
#toast-container > .toast-success { border-left-color: var(--ok); }
#toast-container > .toast-warning { border-left-color: var(--gold); }
#toast-container > .toast-error { border-left-color: var(--red); }
#toast-container > .toast-info { border-left-color: #4A4A52; }

#toast-container > div:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }

.toast-close-button { color: #0A0A0B; opacity: .45; text-shadow: none; }
.toast-close-button:hover { color: #0A0A0B; opacity: .9; }

.toast-progress { background: var(--red); opacity: .5; }

/* =============================================================================
   REZERVAČNÍ KALENDÁŘ
   Sdílená šablona `templates/microsite/reservation/zone-detail.html.twig`
   se nemění — vše níže je čistě vzhled nad její stávající strukturou.
   ========================================================================== */

#booking-calendar {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
}

/* --- toolbar --- */

#booking-calendar .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

#booking-calendar .fc .fc-toolbar-title {
    font-family: "Anton", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#booking-calendar .fc .fc-button {
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-radius: 999px;
    color: var(--white);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 13px;
    box-shadow: none;
    transition: background var(--t), border-color var(--t);
}

#booking-calendar .fc .fc-button:hover { background: #26262C; border-color: #3B3B44; }

#booking-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#booking-calendar .fc .fc-button-primary:not(:disabled):active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

#booking-calendar .fc .fc-button:disabled { opacity: .35; }
#booking-calendar .fc .fc-button-group { gap: 6px; }

/* --- mřížka --- */

/* Mřížka je stavěná jako sada samostatných dlaždic (stejný jazyk jako mini kalendář
   v uživatelské sekci), ne jako tabulka s linkami. Linky tabulky proto zprůhledníme
   a vzhled nese až `.fc-daygrid-day-frame` / `.fc-timegrid-slot`. */
#booking-calendar .fc {
    --fc-border-color: transparent;
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: transparent;
    --fc-today-bg-color: transparent;
}

#booking-calendar .fc-theme-standard td,
#booking-calendar .fc-theme-standard th {
    border-color: transparent;
}

#booking-calendar .fc-theme-standard .fc-scrollgrid {
    border-color: transparent;
}

/* --- měsíční pohled ---
   Vzhled dlaždic NENÍ definován tady: měsíční mřížka akvizičního kalendáře a mini
   kalendář v uživatelské sekci sdílejí jednu sadu pravidel v sekci
   „SPOLEČNÝ VZHLED MĚSÍČNÍ MŘÍŽKY" níže, aby nemohly vizuálně rozejít.
   Tady zůstává jen to, co je specifické pro FullCalendar. */

/* Mezeru mezi dlaždicemi dělá padding BUŇKY, ne margin rámečku: FullCalendar dává
   rámečku `height: 100%` a při `expandRows` by margin přetekl a rozbil výšku řádku. */
#booking-calendar .fc-daygrid-day { padding: 3px; }

#booking-calendar .fc-daygrid-day-top { flex-direction: row; }
#booking-calendar .fc-daygrid-day-top a { text-decoration: none; }

/* --- týdenní / denní pohled: stejný jazyk, jen na časové ose --- */

#booking-calendar .fc-timegrid-slot {
    border-bottom: 1px solid rgba(41, 41, 48, .55);
}

#booking-calendar .fc-timegrid-slot-minor { border-bottom-style: dotted; }

#booking-calendar .fc-timegrid-col-frame { background: transparent; }

#booking-calendar .fc-timegrid-col.fc-day-today { background: rgba(224, 27, 46, .06); }

/* Sloty v týdenním pohledu jsou background eventy (.allowed-slot / .forbidden-slot);
   drží stejné zaoblení a odsazení jako dlaždice v měsíčním pohledu. */
#booking-calendar .fc-timegrid-bg-harness .fc-bg-event {
    margin: 2px 3px;
    border-radius: 8px;
    opacity: 1;
}

#booking-calendar .fc .fc-col-header-cell-cushion {
    color: var(--muted);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 4px;
}

#booking-calendar .fc .fc-daygrid-day-number {
    color: var(--white);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
}

#booking-calendar .fc .fc-timegrid-slot-label-cushion {
    color: #6C6C75;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
    font-size: 12px;
}

/* Dnešek se zvýrazňuje rámečkem dlaždice (viz .fc-daygrid-day-frame výše),
   ne podbarvením celé buňky — to by prosvítalo v mezerách mezi dlaždicemi. */
#booking-calendar .fc .fc-day-other .fc-daygrid-day-number { color: #4E4E56; }

/* Minulé hodiny — spec §2: opacity .35. */
#booking-calendar .fc .fc-day-past { opacity: .35; }

/* --- stavy slotů (spec §2 — sémantika, ne dekorace) --- */

#booking-calendar .fc-event {
    border-radius: 8px;
    border-width: 1px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Volno: povrch s edge borderem, hover = červený border a zdvih o 2 px. */
#booking-calendar .allowed-slot {
    background: var(--surface2) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 8px;
    opacity: 1 !important;
    cursor: pointer;
    transition: border-color var(--t), transform var(--t), background var(--t);
}

#booking-calendar .allowed-slot:hover {
    border-color: var(--red) !important;
    transform: translateY(-2px);
}

/* Zavřeno / mimo provozní dobu. */
#booking-calendar .forbidden-slot {
    background: #131316 !important;
    border: 1px solid #212127 !important;
    opacity: 1 !important;
}

/* Potvrzená rezervace. */
#booking-calendar .fc-event.confirmed {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
}

/* Nepotvrzená žádost — odlišená jen VIZUÁLNĚ (zlatý obrys), aby bylo poznat,
   že rezervace ještě není potvrzená. Na dostupnost termínu to nemá vliv:
   blokace i jakýkoliv nezrušený požadavek termín stejně aktivně blokují. */
#booking-calendar .fc-event.pending {
    background: rgba(233, 178, 60, .12) !important;
    border-color: rgba(233, 178, 60, .55) !important;
    color: var(--gold) !important;
}

/* Blokace klubu. */
#booking-calendar .fc-event.blocked,
#booking-calendar .fc-event.system-block,
#booking-calendar .fc-event.system-reservation {
    background: #131316 !important;
    border-color: #212127 !important;
    color: #5C5C64 !important;
}

/* Volný slot nabízený kombinací variant. */
#booking-calendar .fc-event.free-slot {
    background: var(--surface2) !important;
    border: 1px dashed var(--edge) !important;
    color: var(--muted) !important;
}

/* Vlastní rezervace přihlášeného uživatele. */
#booking-calendar .fc-event.own-reservation {
    box-shadow: inset 0 0 0 2px rgba(243, 243, 244, .55);
}

/* Výběr tažením (jen pokud to zóna povolí — je_vyber_tazenim). */
#booking-calendar .fc-highlight {
    background: rgba(224, 27, 46, .28);
    border-radius: 8px;
}

/* --- režim seznamu termínů (je_sloty_jako_seznam) --- */

#booking-calendar.calendar-list-mode .fc-daygrid-day-frame {
    min-height: 5.5rem;
    transition: background var(--t);
}

#booking-calendar.calendar-list-mode .fc-daygrid-day:hover .fc-daygrid-day-frame {
    /* Základ dlaždice je už surface2, hover proto musí být světlejší. */
    background: #26262C;
    border-color: var(--red);
    cursor: pointer;
}

#booking-calendar.calendar-list-mode .fc-daygrid-day-number {
    cursor: pointer;
    font-size: 18px;
}

@media (max-width: 575.98px) {
    #booking-calendar.calendar-list-mode .fc-daygrid-day-frame { min-height: 3.5rem; }
}

/* Panel s termíny dne — obdoba „mřížky hodin" z návrhu (spec §4, mřížka A):
   dlaždice s časem v condensed řezu, hover = červený border a zdvih. */
#day-terms-panel {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
    animation: padel-rise 260ms cubic-bezier(.2, .7, .3, 1);
}

#day-terms-title {
    font-family: "Anton", sans-serif;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}

#day-terms-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
}

/* Dlaždice termínu = `.chip` z prototypu: čas condensed 19 px, pod ním stavový
   label 9.5 px prostrkanými kapitálkami. */
.day-term-item {
    display: block;
    border: 1px solid var(--edge);
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 6px 10px;
    color: var(--white);
    text-align: center;
    cursor: pointer;
    transition: transform var(--t), background var(--t), border-color var(--t);
}

.day-term-item__time {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .02em;
}

.day-term-item__state {
    display: block;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

/* Veřejné označení rezervace místo stavu „Obsazeno“ — vlastní název je delší než
   jednoslovný stav, takže se u něj ruší verzálky i prostrkání a nechává se zalomit. */
.day-term-item__state--label {
    letter-spacing: .01em;
    text-transform: none;
    overflow-wrap: anywhere;
}

/* Volno — hover: červený border a zdvih o 2 px (spec §4). */
.day-term-item--free:hover {
    border-color: var(--red);
    background: var(--surface);
    color: var(--white);
    transform: translateY(-2px);
}

.day-term-item--free:active { transform: scale(.97); }

/* Obsazeno — plná červená a bílý text, přesně dle `.chip.taken` z prototypu.
   Výpis termínů má ZÁMĚRNĚ jen dva stavy: blokace i jakýkoliv nezrušený požadavek
   termín aktivně blokují, takže se nerozlišuje, čím je obsazený.

   POZOR na specificitu: obsazená dlaždice je `<button disabled>`, takže na ni sedí
   i obecné `.btn:disabled` (0,2,0) z formulářové sekce výše. To by ji přebarvilo
   na tlumenou šeď. Selektor proto MUSÍ mít stejnou specificitu — odtud varianta
   s `:disabled`. Nesnižovat zpět na samotné `.day-term-item--taken`. */
.day-term-item--taken,
.day-term-item--taken:disabled {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    opacity: 1;
}

.day-term-item--taken .day-term-item__state,
.day-term-item--taken:disabled .day-term-item__state { color: #FFC9CF; }

/* Obsazený termín není tlačítko (kurzor a hover), barvy si drží pravidlo výše. */
.day-term-item:disabled {
    cursor: default;
    transform: none;
}

@keyframes padel-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* --- tabulky (ceník, přehledy) --- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--white);
    --bs-table-border-color: var(--edge);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--white);
    --bs-table-hover-bg: var(--surface2);
    --bs-table-hover-color: var(--white);
}

/* Tempus Dominus (výběr začátku) do tmavé škály. */
.tempus-dominus-widget {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 16px;
    color: var(--white);
}

.tempus-dominus-widget [data-action]:hover { background: var(--surface2); }

.tempus-dominus-widget .date-container-days .day.active,
.tempus-dominus-widget .active { background: var(--red) !important; color: #fff; }

/* Cookie lišta. */
#cookie-consent, .cookie-consent {
    background: var(--surface);
    border-top: 1px solid var(--edge);
    color: var(--white);
}

/* =============================================================================
   UŽIVATELSKÁ SEKCE  (/site/account, /site/reservations, /site/orders)
   -----------------------------------------------------------------------------
   Šablony `microsite/account_dashboard.html.twig`, `reservation_dashboard.html.twig`
   a `order_dashboard.html.twig` jsou SDÍLENÉ — nesahá se do nich.

   Mini kalendář (`.miniCalendar*`) nemá žádné výchozí styly ve sdíleném CSS: každá
   microsite si ho stylovala ve vlastním souboru (`rezervace.css` u horasportu).
   Pro padel proto chyběl úplně a stránka „Moje rezervace" se rozpadala.
   ========================================================================== */

.account-pages { padding-top: 0; }

.account-pages h1 {
    font-family: "Anton", sans-serif;
    font-size: clamp(22px, 5vw, 30px);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Boční menu uživatelské sekce.
   Šablona `microsite/user_menu.html.twig` generuje prostý `<nav><ul><li><a>` bez
   bootstrapových tříd (žádné `.nav-link` ani `.list-group-item`), takže se na něj
   musí cílit strukturou — jinak zůstane jako holé odkazy s ikonami. */
.account-pages .col-menu { flex-shrink: 0; width: auto; }

.account-pages .col-menu nav {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 16px;
    overflow: hidden;
    min-width: 236px;
}

.account-pages .col-menu nav ul { margin: 0; padding: 6px; }

.account-pages .col-menu nav li + li { margin-top: 2px; }

.account-pages .col-menu nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t), color var(--t);
}

.account-pages .col-menu nav li i {
    width: 18px;
    text-align: center;
    font-size: 13px;
    color: #4A4A52;
    transition: color var(--t);
}

.account-pages .col-menu nav li a:hover { background: var(--surface2); color: var(--white); }
.account-pages .col-menu nav li a:hover i { color: var(--red); }

/* Aktivní položka — třídu nese `<li>`, ne odkaz. */
.account-pages .col-menu nav li.active a { background: var(--red); color: #fff; }
.account-pages .col-menu nav li.active i { color: #fff; }

/* Hamburger ze šablony nemá žádnou obsluhu (menu se nikde nesbaluje), takže by
   to bylo nefunkční tlačítko — schováváme ho. Menu se na mobilu stejně přeskládá
   nad obsah díky `flex-column` v šabloně. */
.account-pages .col-menu .hamburger { display: none; }

/* Rozcestníkové karty na /site/account */
.user-sections .card {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
    box-shadow: none !important;
    transition: border-color var(--t), transform var(--t);
}

.user-sections a:hover .card {
    border-color: var(--red) !important;
    transform: translateY(-2px);
}

.user-sections .card-title {
    font-family: "Anton", sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.user-sections .card i { color: var(--red); }

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

.miniCalendar-wrapper {
    overflow: auto;
    max-width: 100%;
    margin-bottom: 30px;
    padding-top: 18px;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 16px;
    box-shadow: none !important;
}

.miniCalendar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pojistka: i kdyby se obsah nevešel mimo očekávaný breakpoint (delší název
       měsíce, jiné jazykové mutace tlačítek), zalomí se místo přetečení. */
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 0 18px;
    width: 100%;
    margin-bottom: 10px;
}

.miniCalendar__title {
    font-family: "Anton", sans-serif;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.miniCalendar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 8px 12px;
    line-height: 1;
    font-size: 18px;
    color: var(--white);
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}

.miniCalendar__btn:hover { background: #26262C; border-color: #3B3B44; }

.miniCalendar__dow,
.miniCalendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 18px;
}

.miniCalendar__dow > div {
    padding: 4px 2px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

/* ============================================================================
   SPOLEČNÝ VZHLED MĚSÍČNÍ MŘÍŽKY
   ----------------------------------------------------------------------------
   Jeden zdroj pravdy pro DVĚ různé implementace, které mají vypadat identicky:

     .miniCalendar__*                       — vlastní JS renderer v uživatelské
                                              sekci (reservation_dashboard.html.twig)
     #booking-calendar .fc-daygrid-*        — měsíční pohled FullCalendaru
                                              v akvizičním kalendáři

   Jsou to opravdu dvě různé komponenty (mini kalendář je ~200 řádků vanilla JS,
   akviziční je FullCalendar kvůli časové ose, výběru slotů a tažení). Sjednotit
   je do jedné komponenty by znamenalo funkční zásah do SDÍLENÝCH šablon.
   Vizuálně se ale rozejít nesmí, proto se každé pravidlo píše pro oba selektory
   najednou — když se změní vzhled, změní se na obou místech.
   ========================================================================= */

/* Dlaždice dne */
.miniCalendar__day,
#booking-calendar .fc-daygrid-day-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 62px;
    padding: 6px;
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-radius: 8px;
    transition: background var(--t), border-color var(--t);
}

/* Dny mimo zobrazený měsíc */
.miniCalendar__day.is-out,
#booking-calendar .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
    background: #131316;
    border-color: #212127;
}

.miniCalendar__day.is-out .miniCalendar__num,
#booking-calendar .fc-day-other .fc-daygrid-day-number { color: #4E4E56; }

/* Dnešek — rámečkem, ne podbarvením buňky (to by prosvítalo v mezerách). */
#booking-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame,
.miniCalendar__day.is-today { border-color: var(--red); }

/* Dlaždice dne je v režimu seznamu <button> — srovnat s <div> variantou v profilu. */
button.miniCalendar__day {
    text-align: left;
    font: inherit;
    cursor: pointer;
    width: 100%;
}

/* Akviziční kalendář má k dispozici celou šířku obsahu (1180 px), takže by se
   mřížka roztáhla do širokých obdélníků. Omezíme ji a držíme buňky čtvercové.
   Týká se JEN kalendáře na stránce zóny — mini kalendář v profilu sedí v užším
   sloupci a je v pořádku, proto je pravidlo scoped na #booking-calendar.
   Stejná šířka platí i pro panel s termíny pod ním, aby na sebe navazovaly. */
#booking-calendar .miniCalendar-wrapper,
#day-terms-panel {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

/* Vybraný den — plná červená, aby bylo na první pohled jasné, ke kterému dni
   patří vypsané termíny pod kalendářem. Musí přebít i `is-today` (rámeček)
   a `:hover`, proto stojí až za nimi a má shodnou nebo vyšší specificitu. */
.miniCalendar__day.is-selected,
button.miniCalendar__day.is-selected:hover:not(:disabled) {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.miniCalendar__day.is-selected .miniCalendar__num { color: #fff; }

#booking-calendar .miniCalendar__day {
    aspect-ratio: 1 / 1;
    /* min-height z obecného pravidla by čtverec na úzkém displeji přebilo. */
    min-height: 0;
}

button.miniCalendar__day:hover:not(:disabled) {
    background: #26262C;
    border-color: var(--red);
}

.miniCalendar__day.is-past,
button.miniCalendar__day:disabled {
    opacity: .35;
    cursor: default;
    background: var(--surface2);
    border-color: var(--edge);
}

.miniCalendar__day.is-past.is-out,
button.miniCalendar__day.is-out:disabled { background: #131316; border-color: #212127; }

/* Přepínač pohledu / „Dnes" v hlavičce mřížky. */
.miniCalendar__actions { display: flex; align-items: center; gap: 6px; }

.miniCalendar__btn--text {
    min-width: 0;
    padding: 7px 13px;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.miniCalendar__btn--text.is-active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* Hlavička kalendáře na úzkých displejích do dvou řádků.
   V jedné řádce je ‹ + název měsíce + Dnes/Měsíc/Týden + ›, dohromady ~415 px.
   Mřížka je zastropovaná na 450 px, ale pod ~475 px šířky okna je užší (drží se
   šířky obsahu), takže se obsah přestane vejít a přetekl by. Rozpad řešíme
   `order`em, ne jen `flex-wrap` — samotné zalomení by odsunulo na druhý řádek
   přepínače VČETNĚ šipky „další", což vypadá rozbitě.

   Řádek 1: ‹  název měsíce  ›
   Řádek 2: Dnes | Měsíc | Týden

   Scoped na #booking-calendar: mini kalendář v profilu má jen šipky a název,
   žádné přepínače, takže se ho to netýká. */
@media (max-width: 575.98px) {
    #booking-calendar .miniCalendar__top [data-nav="prev"] { order: 1; }
    #booking-calendar .miniCalendar__title {
        order: 2;
        flex: 1 1 auto;
        /* Bez min-width: 0 by dlouhý název měsíce odmítl zúžit a tlačil by
           šířku řádku, takže by se rozpad na dva řádky vůbec nepomohl. */
        min-width: 0;
        text-align: center;
    }
    #booking-calendar .miniCalendar__top [data-nav="next"] { order: 3; }

    #booking-calendar .miniCalendar__actions {
        order: 4;
        flex: 0 0 100%;
        justify-content: center;
    }

    /* Na nejužších displejích ještě odlehčit přepínače, ať se vejdou vedle sebe. */
    #booking-calendar .miniCalendar__btn--text {
        padding: 7px 10px;
        letter-spacing: .08em;
    }
}

/* Číslo dne */
.miniCalendar__num,
#booking-calendar .fc-daygrid-day-number {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    color: var(--white);
    padding: 0;
}

/* Kontejner událostí uvnitř dne */
.miniCalendar__events,
#booking-calendar .fc-daygrid-day-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    min-height: 0;
}

/* Událost jako pilulka */
.event,
#booking-calendar .fc-daygrid-event {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 999px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    box-shadow: none !important;
}

.miniCalendar__footer {
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--surface2);
    border-top: 1px solid var(--edge);
    border-radius: 0 0 16px 16px;
    color: var(--muted);
    font-size: 12px;
}

.miniCalendar__footer > small {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px !important;
}

.miniCalendar__footer .fa-filter { color: var(--red); }

/* -----------------------------------------------------------------------------
   Select2 (filtry nad výpisem rezervací, výběr vybavení v akvizici)
   -----------------------------------------------------------------------------
   Knihovna se načítá s výchozím světlým tématem a `padel.css` ji dosud neřešil —
   filtry pod kalendářem proto svítily šedě na bílém uprostřed tmavé stránky.
   Select2 si generuje vlastní DOM mimo původní `<select>`, takže nestačí stylovat
   `.form-select`; je nutné cílit na jeho třídy. Dropdown se navíc připojuje na
   konec `<body>`, proto nejde scoupnout pod rodičovský kontejner.
   -------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 999px;
    height: auto;
    min-height: 38px;
    padding: 4px 6px;
    transition: border-color var(--t);
}

.select2-container--default .select2-selection--single:hover { border-color: #3B3B44 !important; }

.select2-container--open .select2-selection--single { border-color: var(--red) !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--white);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 28px;
    padding-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 6px;
}

/* Výchozí šipka je tmavý CSS trojúhelník — na tmavém podkladu neviditelná. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--white) transparent;
}

/* Rozbalený seznam (připojuje se na <body>). */
.select2-container--default .select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

.select2-container--default .select2-results__option {
    background: transparent;
    color: var(--white);
    font-size: 13px;
    padding: 9px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--surface2) !important;
    color: var(--white);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: var(--red) !important;
    color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-radius: 8px;
    color: var(--white);
    font-size: 16px; /* stejný důvod jako u `.form-control` — iOS focus zoom */
}

.select2-container--default .select2-results__message { color: var(--muted); }

.miniCalendar.is-loading .miniCalendar__top,
.miniCalendar.is-loading .miniCalendar__dow,
.miniCalendar.is-loading .miniCalendar__grid { opacity: .6; pointer-events: none; }

/* Stavy událostí. Barvy nesou význam, proto se drží stejné škály jako akviziční
   kalendář: potvrzeno červená, čekající zlatá, blokace tmavá; zbytek neutrální.
   Tvar pilulky je ve sdílené sekci výše. */

/* Detail události se ukazuje až na hover — v buňce je na text místo jen na pár znaků. */
.event__meta {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 9;
    padding: 8px 10px;
    background: var(--surface2);
    border: 1px solid var(--edge);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    white-space: nowrap;
    color: var(--white);
}

.event:hover .event__meta { display: block; }

/* U posledních dvou sloupců by tooltip vylezl z mřížky — překlopíme ho doleva. */
.miniCalendar__grid > .miniCalendar__day:nth-child(7n + 7) .event__meta,
.miniCalendar__grid > .miniCalendar__day:nth-child(7n + 6) .event__meta {
    left: unset;
    right: 100%;
}

.event__time { font-weight: 700; }
.event__object, .event__zone { color: var(--muted); font-family: "Barlow", sans-serif; font-size: 11px; }
.event__title { display: block; max-width: 170px; width: max-content; white-space: normal; }

.miniCalendar .event.confirmed { background-color: var(--ok); color: #fff; }
.miniCalendar .event.pending { background-color: rgba(233, 178, 60, .18); color: var(--gold); border: 1px solid rgba(233, 178, 60, .5); }
.miniCalendar .event.blocked,
.miniCalendar .event.system-block,
.miniCalendar .event.system-reservation { background-color: #131316; color: #5C5C64; }
.miniCalendar .event.rejected { background-color: var(--surface2); color: var(--muted); text-decoration: line-through; }
.miniCalendar .event.unpaid,
.miniCalendar .event.not-excused,
.miniCalendar .event.excused { background-color: var(--surface2); color: var(--white); border: 1px solid var(--edge); }

/* -----------------------------------------------------------------------------
   Karta rezervace + STAVY
   -----------------------------------------------------------------------------
   Používá se ve VÝPISU rezervací v profilu i na DETAILU rezervace — obě šablony
   dávají kartě třídu stavu (`confirmed`, `pending`, …), takže se stav komunikuje
   z jednoho místa a obě stránky vypadají stejně.

   Stav nese barevný pruh vlevo + obarvený badge. Škála se drží akvizičního
   kalendáře, aby stejný stav znamenal stejnou barvu napříč celou microsite:
     potvrzeno  červená    (hlavní akcent značky)
     čeká       zlatá
     neuhrazeno zlatá (varovná, ale méně výrazná než zamítnuto)
     zamítnuto  tlumená šedá + přeškrtnutí
     blokace    tmavá
   -------------------------------------------------------------------------- */

.reservation-card {
    position: relative;
    background: var(--surface) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 16px;
    box-shadow: none !important;
    overflow: hidden;
}

.reservation-card .card-body > .row:not(:last-child) {
    border-bottom: 1px solid var(--edge);
    padding-bottom: 20px !important;
}

/* Barevný pruh stavu na levé hraně karty. */
.reservation-card.search-item::before,
.search-item.reservation-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--edge);
}

/* Potvrzená rezervace je pro zákazníka dobrá zpráva — proto zelená, ne červená.
   Červená zůstává v AKVIZIČNÍM kalendáři, kde znamená „obsazeno", tedy opačný
   význam pro toho, kdo teprve vybírá termín. */
.search-item.confirmed::before { background: var(--ok); }
.search-item.pending::before { background: var(--gold); }
.search-item.unpaid::before { background: var(--gold); }
.search-item.rejected::before { background: #4E4E56; }
.search-item.blocked::before,
.search-item.system-block::before,
.search-item.system-reservation::before { background: #2E2E36; }
.search-item.excused::before { background: var(--ok); }
.search-item.not-excused::before { background: #6C6C75; }

/* Badge se stavem — šablona mu nedává žádnou barevnou třídu, takže bez tohohle
   splývá s pozadím a stav není vidět vůbec. */
.reservation-card .badge,
.search-item .badge {
    background: var(--surface2);
    border: 1px solid var(--edge);
    color: var(--white);
    padding: .45em .9em;
    font-size: 10px;
    letter-spacing: .12em;
}

.search-item.confirmed .badge { background: var(--ok); border-color: var(--ok); color: #fff; }
.search-item.pending .badge,
.search-item.unpaid .badge {
    background: rgba(233, 178, 60, .14);
    border-color: rgba(233, 178, 60, .55);
    color: var(--gold);
}
.search-item.rejected .badge { background: var(--surface2); border-color: var(--edge); color: var(--muted); text-decoration: line-through; }
.search-item.excused .badge { background: rgba(47, 163, 107, .14); border-color: rgba(47, 163, 107, .5); color: var(--ok); }
.search-item.not-excused .badge { background: var(--surface2); border-color: #3B3B44; color: var(--muted); }
.search-item.blocked .badge,
.search-item.system-block .badge,
.search-item.system-reservation .badge { background: #131316; border-color: #212127; color: #5C5C64; }

/* Hlavička karty se stavem.
   Šablona ji obaluje třídou `.position-md-absolute`, což je utilita definovaná
   jen v CSS ostatních microsit — tady neexistovala, blok se proto vykreslil
   staticky a nalepil se přímo na první řádek s datem. Místo dotahování absolutního
   pozicování z něj děláme řádný hlavičkový řádek: odsazený, s mezerou mezi
   stavem a úhradou. Je to robustnější (nepřekrývá obsah při delších textech). */
.reservation-card .position-md-absolute {
    position: static !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--edge);
}

.reservation-card .position-md-absolute .badge,
.reservation-card .position-md-absolute .payment-status-top { margin-bottom: 0 !important; }

.reservation-card .card-body { padding: 20px 22px; }

/* Řádky s údaji potřebují vzduch — šablona spoléhá na `mb-4`, což se s odsazením
   ikon slévalo. */
.reservation-detail .card-body > .row { margin-bottom: 0 !important; padding: 16px 0; }
.reservation-detail .card-body > .row:first-of-type { padding-top: 0; }
.reservation-detail .card-body > .row:last-child { padding-bottom: 0; }

/* Stav úhrady vedle badge. */
.payment-status-top {
    letter-spacing: .12em;
    font-size: 10px;
}

.payment-status-top.text-danger { color: var(--gold) !important; }
.payment-status-top.text-success { color: var(--ok) !important; }

/* -----------------------------------------------------------------------------
   Detail rezervace
   -------------------------------------------------------------------------- */

.reservation-detail h1 {
    font-family: "Anton", sans-serif;
    font-size: clamp(20px, 4vw, 28px);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.reservation-detail h1 .text-muted { font-size: .6em; letter-spacing: .06em; }

/* Popisky údajů (Datum a čas rezervace, …) jako prostrkané kapitálky, hodnota bílá —
   jinak splývaly do jedné šedé kaše. */
.reservation-detail .text-muted.lh-1 {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

.reservation-detail .fw-semibold { color: var(--white); font-size: 15px; }
.reservation-detail .card-body > .row .fa-solid,
.reservation-detail .card-body > .row .fa-regular { color: var(--red); }

/* Ikony UVNITŘ tlačítek si barvu musí brát z tlačítka.
 *
 * Pravidlo výše cílí na .fa-solid kdekoliv v řádku, takže chytalo i ikony v tlačítkách:
 * lupa u podřízené rezervace vycházela červená na červeném .btn-primary, a koš v
 * .btn-outline-danger by zčervenal na červené ploše po najetí myší (Bootstrap tam
 * pozadí vyplňuje). Že .btn-primary nastavuje color:#fff nestačí — přímé pravidlo na
 * <i> přebije zděděnou barvu bez ohledu na specificitu, proto je nutné dědičnost
 * vrátit explicitně. */
.reservation-detail .card-body > .row .btn .fa-solid,
.reservation-detail .card-body > .row .btn .fa-regular { color: inherit; }

/* Vnořené karty závislých rezervací — šablona jim dává inline světlý border. */
.reservation-detail .search-item.border {
    background: var(--surface2);
    border-color: var(--edge) !important;
    border-radius: 12px;
    box-shadow: none !important;
}

.reservation-detail table .badge.bg-danger { background: var(--red) !important; }
.reservation-detail table .badge.bg-success { background: var(--ok) !important; }

/* Sidebar s iCal odkazy */
.sidebar-scroll .btn { line-height: 1.2; }

/* -----------------------------------------------------------------------------
   Mobil — spec §1: hráčská část je mobile-first
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    header .main-bar { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    .main-bar-logo img { height: 28px; }
    .brand-nav { display: none; }
    .cta-pill { padding: 10px 14px; font-size: 10px; }
    .hero { padding: 16px 0 14px; }
    /* Horizontální padding se nepřepisuje ani na mobilu — jinak by se hero
       (čistý .container) rozešlo s hlavičkou a obsahem. */
}

/* --- stav dne v dlaždicích mřížky (režim seznamu; `is-state-*` doplňuje JS) + legenda ---
   Sdílená šablona přidává třídy i popisek stavu do každé dlaždice a legendu pod
   kalendář (2026-08-26). Bez těchto pravidel by popisek zůstal jako holý text. */
.miniCalendar__state {
    margin-top: auto;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

#booking-calendar .miniCalendar__day.is-state-closed { background: #131316; border-color: #212127; }
#booking-calendar .miniCalendar__day.is-state-closed .miniCalendar__num { color: #4E4E56; }

#booking-calendar .miniCalendar__day.is-state-free .miniCalendar__state { color: var(--ok); }
#booking-calendar .miniCalendar__day.is-state-partial { box-shadow: inset 4px 0 0 var(--red); }
#booking-calendar .miniCalendar__day.is-state-partial .miniCalendar__state { color: var(--red-hi); }
#booking-calendar .miniCalendar__day.is-state-full { background: var(--red); border-color: var(--red); }
#booking-calendar .miniCalendar__day.is-state-full .miniCalendar__num,
#booking-calendar .miniCalendar__day.is-state-full .miniCalendar__state { color: #fff; }

#booking-calendar .miniCalendar__day.is-selected .miniCalendar__state { color: #FFC9CF; }
#booking-calendar .miniCalendar__day.is-selected.is-state-partial { box-shadow: none; }

.calendar-day-state-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    max-width: 640px;
    margin: 10px auto 0;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-day-state-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.calendar-day-state-legend__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--surface2);
    border: 1px solid var(--edge);
}

.calendar-day-state-legend__swatch.fc-day-state--free { border-color: var(--ok); }
.calendar-day-state-legend__swatch.fc-day-state--partial { box-shadow: inset 3px 0 0 var(--red); }
.calendar-day-state-legend__swatch.fc-day-state--full { background: var(--red); border-color: var(--red); }
.calendar-day-state-legend__swatch.fc-day-state--closed { background: #131316; border-color: #212127; }
.calendar-day-state-legend__swatch.fc-day-state--past { opacity: .35; }

@media (max-width: 575.98px) {
    .miniCalendar__state { display: none; }
}

/* Volný termín bez nároku aktuálního uživatele (bez přihlášení / jiná role):
   tlumená čárkovaná dlaždice, neklikací. `:disabled` kvůli specificitě. */
.day-term-item--restricted,
.day-term-item--restricted:disabled {
    background: var(--surface);
    border: 1px dashed #3B3B44;
    color: var(--muted);
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}

.day-term-item--restricted .day-term-item__state { color: #6B6B74; }

#day-terms-hint {
    color: var(--muted);
    font-family: "Barlow", sans-serif;
    font-size: 12px;
}

/* --- minulost a zavřeno na tmavém pozadí (2026-08-26) ---
   Původní `is-past` (opacity .35 nad surface2) a `is-state-closed` (#131316) splývaly
   s pozadím panelu. Minulost = „prázdná" dlaždice s tečkovaným rámečkem, zavřeno =
   jemné šrafování; oba stavy zůstávají tlumené, ale jsou od sebe i od volna k rozeznání. */
#booking-calendar .miniCalendar__day.is-past,
#booking-calendar button.miniCalendar__day:disabled {
    opacity: 1;
    background: transparent;
    border: 1px dotted #34343C;
    cursor: default;
}

#booking-calendar .miniCalendar__day.is-past .miniCalendar__num,
#booking-calendar button.miniCalendar__day:disabled .miniCalendar__num { color: #55555E; }

#booking-calendar .miniCalendar__day.is-past.is-out .miniCalendar__num { color: #3E3E46; }

#booking-calendar .miniCalendar__day.is-state-closed {
    background: repeating-linear-gradient(135deg, #17171B 0 6px, #1F1F25 6px 12px);
    border-color: #2E2E36;
}

#booking-calendar .miniCalendar__day.is-state-closed .miniCalendar__num,
#booking-calendar .miniCalendar__day.is-state-closed .miniCalendar__state { color: #7A7A84; }

/* Legenda — stejné vzorky jako dlaždice. */
.calendar-day-state-legend__swatch.fc-day-state--closed {
    background: repeating-linear-gradient(135deg, #17171B 0 3px, #26262D 3px 6px);
    border-color: #2E2E36;
}

.calendar-day-state-legend__swatch.fc-day-state--past {
    opacity: 1;
    background: transparent;
    border: 1px dotted #55555E;
}