/* Wrapper */
.date-picker {}

.date-picker__info {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    color: hsl(var(--primary));
}

/* ═════════════════════════════════════════════════════════════════════════
   Lišta kariet termínov

   Farby a veľkosti sú tokeny komponentu, nie hodnoty roztrúsené po pravidlách.
   Dôvod je jeden konkrétny: bootstrapovské `--bs-secondary-color` je v tejto
   téme `#c5c5c7`, čo je na bielej **1,7 : 1**. Dátumy, počet nocí aj popisky
   cien na ňom boli nečitateľné pre každého, kto nemá bezchybný zrak.
   Sekundárny text preto beží na `#5f6775` (5,4 : 1). Je to o odtieň tmavší
   variant `.text-muted-foreground` z kalkulačky (`#676f7e`), aby prešiel aj
   na tónovanom podklade zhrnutia v modale, nielen na bielej.
   ═════════════════════════════════════════════════════════════════════════ */
.date-picker {
    /* Text */
    --dp-ink: #353844;
    /* 11,6 : 1 — dátum, cena za skupinu, izba   */
    --dp-ink-muted: #5f6775;
    /*  5,4 : 1 — noci, „za dosp. osobu", ikony  */
    --dp-brand: rgb(var(--bs-primary-rgb));
    --dp-brand-strong: #3f34ad;
    /*  8,9 : 1 — hover odkazu                   */

    /* Plochy a hrany */
    --dp-line: #8f95a5;
    /*  3,2 : 1 — hranica interaktívnej karty    */
    --dp-line-soft: #dfdfe3;
    /* deliace čiary vnútri karty, nie hranica   */
    --dp-surface: var(--bs-body-bg);
    --dp-surface-selected: rgba(var(--bs-primary-rgb), .07);
    /* Hover podklad — presne hodnota, ktorú karta mala pred faceliftom.
       O tri stotiny priehľadnejší než podklad vybranej karty, takže sa oba
       stavy dajú rozoznať od seba, nielen od pokojného stavu. */
    --dp-surface-hover: rgba(var(--bs-primary-rgb), .04);
    --dp-surface-skeleton: #e9eaee;

    /* Typografia — žiadna hodnota pod 14 px */
    --dp-fs-date: 1.0625rem;
    /* 17 px */
    --dp-lh-date: 1.25;
    --dp-fs-price: 1.75rem;
    /* 28 px */
    --dp-fs-body: 1rem;
    /* 16 px */
    --dp-fs-attr: .9375rem;
    /* 15 px — vlastnosti, dĺžka, kontext ceny */

    /* Zvislý rytmus. Pomenovaný preto, aby sa odstup dal zmeniť na jednom
       mieste a nerozišiel sa medzi zónami.

       Odstupy sú dvojrýchlostné a je to zámer: **vnútri** bloku tesné
       (dátum → počet nocí 6, cena → „za dospelú osobu" 4), **medzi** blokmi
       veľké (20–24). Karta sa tak číta ako štyri celky — termín, cena,
       vlastnosti, akcia — a nie ako desať riadkov pod sebou.

       Horná výplň je menšia než zvyšok: odznak zľavy visí nad hranou karty
       a značka výberu nie je text, takže nad dátumom nemá čo držať 20 px. */
    --dp-pad: 20px;
    --dp-pad-top: 16px;
    --dp-gap-status-date: 4px;
    --dp-gap-date-duration: 6px;
    --dp-gap-duration-price: 20px;
    --dp-gap-price-context: 4px;
    --dp-gap-context-total: 6px;
    --dp-gap-total-divider: 22px;
    --dp-gap-divider-attrs: 18px;
    --dp-gap-attrs: 11px;
    --dp-gap-attrs-detail: 24px;

    --dp-radius: 16px;

    /* Portrétový pomer karty. Token preto, že tú istú hodnotu potrebuje aj
       stopa scrolleru — prázdny a chybový stav sa o ňu opierajú, aby sa
       lišta nezložila na výšku jedného odseku. */
    --dp-card-min-h: 360px;
}

/* ── Stopa ──────────────────────────────────────────────────────────────── */
/*
   Šírku karty počíta CSS zo skutočnej šírky obsahového stĺpca, nie JavaScript
   z rozmerov okna. Keď sa zmení mriežka stránky alebo sa vedľa objaví
   kalkulačka, karty sa prispôsobia samy.

       šírka karty = (šírka stopy − presah − medzery) / (celé karty + ukážka)

   `--dp-peek` je podiel *šírky karty*, nie stopy: 0.15 na mobile, 0.35 na
   desktope. `--dp-bleed` je presah stopy popod kalkulačku — štvrtá karta
   nekončí na hrane stĺpca, ale pokračuje pod widget a stratí sa v prechode.
*/
.date-picker__track {
    position: relative;
}

.date-picker__scroller {
    --dp-gap: 14px;
    --dp-visible: 1;
    --dp-peek: .15;
    --dp-bleed: 0px;

    display: flex;
    align-items: stretch;
    gap: var(--dp-gap);

    overflow-x: auto;
    overflow-y: visible;

    /* Priestor pre tieň, focus ring a odznak zľavy, ktorý visí nad hornou
       hranou karty; záporný margin ho vracia mriežke, takže lišta nikdy
       nerozšíri stránku do strany.

       Zvislý scroll je tu `auto` (vodorovné `overflow-x: auto` ho podľa
       špecifikácie vynúti aj na druhej osi), takže všetko nad kartou musí
       zostať vnútri tejto výplne — inak sa odznak oreže. */
    padding: 16px 4px 14px;
    margin: -6px -4px 0;
    padding-right: calc(4px + var(--dp-bleed));
    margin-right: calc(-4px - var(--dp-bleed));

    /* Stopa zostáva rovnaká, aj keď v nej nie sú karty. Bez toho sa stránka
       pri prázdnom filtri alebo pri chybe zložila o výšku celého karuselu
       a obsah pod ním vyskočil nahor. Načítaný stav aj kostra sú vyššie,
       takže na ne toto pravidlo nemá vplyv. */
    min-height: calc(var(--dp-card-min-h) + 30px);

    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.date-picker__scroller::-webkit-scrollbar {
    height: 0;
}

/* Zámerné orezanie, nie omylom odseknutá karta. Krátky prechod na pravej
   hrane stopy; controller ho zhasne, keď už niet čo dotiahnuť — inak by
   sľuboval ďalšie termíny, ktoré neexistujú.

   Od `xl` prechod nie je: tam karta nekončí na hrane stĺpca, ale pokračuje
   popod kalkulačku a hranicou je jej nepriehľadný okraj. Prechod by v tom
   prípade stmieval kartu skôr, než na widget vôbec dôjde. */
.date-picker__track::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bs-body-bg) 78%);
}

.date-picker__track.is-at-end::after {
    opacity: 0;
}

@media (min-width: 768px) {
    .date-picker__scroller {
        --dp-visible: 3;
        /* Zo štvrtej karty vidno tretinu — čitateľný náznak, nie odseknutý
           prvok. Menej pôsobí ako chyba vykreslenia. */
        --dp-peek: .35;
    }
}

/* Od `xl` stojí kalkulačka vedľa obsahu (`col-xl-8` + `col-xl-4`). Až tam má
   zmysel nechať štvrtú kartu pokračovať popod ňu. Hodnota je menšia než
   medzera mriežky plus šírka widgetu, takže stránka nepretečie do strany. */
@media (min-width: 1200px) {
    .date-picker__scroller {
        --dp-bleed: 104px;
    }

    .date-picker__track::after {
        display: none;
    }

    /* Kalkulačka musí byť **nad** presahujúcou kartou, nie pod ňou.
       Prekrytie karty (`.date-picker__card-action`) je polohované s `z-index: 1`,
       takže by bez tohto pravidla vyhralo nad `sticky` widgetom — štvrtá karta
       by cez neho nielen presvitala, ale zachytávala by aj kliky určené
       kalkulačke. Overené `elementFromPoint` nad plochou widgetu. */
    .calculation-widget {
        position: relative;
        z-index: 5;
    }
}

/* ── Karta ──────────────────────────────────────────────────────────────── */
/*
   Zóny sú pevné v poradí aj v minimálnej výške, takže dátum, dĺžka a cena
   sedia na tej istej účiare vo všetkých kartách — aj keď má jedna trojriadkový
   názov izby a druhá žiadny. Premenlivý obsah je až pod cenou a rozdiel
   pohltí pružná zóna nad odkazom.
*/
.date-picker__card {
    /* Poppins — načítaný v `base.html.twig` spolu s ostatnými fontami
       projektu. Žiadny nový font sa nepridáva. */
    font-family: Poppins, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;

    flex: 0 0 calc((100% - var(--dp-gap) * var(--dp-visible)) / (var(--dp-visible) + var(--dp-peek)));
    min-width: 0;
    /* `min-height`, nie `height`: dlhší text kartu natiahne, neoreže. */
    min-height: var(--dp-card-min-h);

    text-align: left;
    color: var(--dp-ink);
    border-radius: var(--dp-radius);
    border: 1px solid var(--dp-line);
    background: var(--dp-surface);

    padding: var(--dp-pad-top) var(--dp-pad) var(--dp-pad);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .date-picker__card {
        max-width: 340px;
    }
}

/* Prekrytie celej karty. Nesie hlavnú akciu (výber termínu) a drží focus ring,
   takže vizuálne „svieti" celá karta, hoci fokus má tlačidlo.
   `inset: -1px` prekryje aj rámik, aby ring nebol o pixel vnútri. */
.date-picker__card-action {
    position: absolute;
    inset: -1px;
    z-index: 1;

    width: auto;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.date-picker__card-action:focus-visible {
    outline: 3px solid var(--dp-brand);
    outline-offset: 2px;
}

.date-picker__card-body {
    position: relative;
    /* Text nesmie zachytávať klik — ten patrí prekrytiu pod ním. */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Stavy ──────────────────────────────────────────────────────────────── */
/*
   Hover a vybraná karta sa musia dať rozoznať od seba, nie len od pokojného
   stavu. Tónujú podklad obe, ale inak silno (`.04` proti `.07`) a výber pridá
   tri veci, ktoré hover nemá: plnú brandovú hranu, vnútorný prstenec
   a značku. Rozdiel tak drží aj na monochromatickom displeji.
*/
/* Hover: hrana, tieň a jemný podklad. Podklad je o tri stotiny priehľadnejší
   než na vybranej karte, takže hover ostáva náznakom a výber odpoveďou —
   výber navyše drží plnú brandovú hranu, vnútorný prstenec a značku. */
.date-picker__card.is-available:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 .5rem 1.25rem rgba(11, 10, 18, .12);
    background: var(--dp-surface-hover);
}

/* Výber: plná brandová hrana zdvojená vnútorným prstencom, tónovaný podklad
   a značka. Tri rozdiely naraz, takže sa výber nedá zameniť s prejdením
   myšou ani na monochromatickom displeji. */

.date-picker__card.is-selected {
    border-color: var(--dp-brand);
    box-shadow: inset 0 0 0 1px var(--dp-brand), 0 .35rem 1rem rgba(11, 10, 18, .10);
    background: var(--dp-surface-selected);
}

.date-picker__card.is-disabled {
    border-color: var(--dp-line-soft);
    background: #f5f5f6;
    color: var(--dp-ink-muted);
    cursor: not-allowed;
}

.date-picker__card.is-disabled .date-picker__card-action {
    pointer-events: none;
}

/* Dopĺňanie ďalších termínov. Karty zostanú čitateľné, len stlmené —
   zmiznúť by znamenalo stratiť kontext, v ktorom človek práve vyberá. */
.date-picker__scroller[aria-busy="true"] {
    cursor: progress;
}

/* Kostru prvého načítania to chytiť nesmie: tam sa nič nestlmuje, tam sa
   čaká. Stlmená kostra by bola dvojitý signál o tom istom. */
.date-picker__scroller[aria-busy="true"] .date-picker__card:not(.date-picker__card--skeleton) {
    opacity: .6;
    pointer-events: none;
}

/* ── 1. zóna: stav ──────────────────────────────────────────────────────── */
/* Riadok drží značku vybraného termínu. Existuje aj na nevybranej karte —
   bez neho by sa vybraná a nevybraná karta rozišli o jej výšku a dátumy by
   neboli na jednej účiare. */
.date-picker__status {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Presne výška značky výberu. Riadok neobsahuje text, takže je to jediné,
       čo tu treba rezervovať — dátum vďaka tomu začína 40 px od hornej hrany
       karty namiesto 60 px. */
    min-height: 20px;
    margin-bottom: var(--dp-gap-status-date);
}

/* Odznak zľavy visí nad ľavým horným rohom a prekrýva hranu karty — tam ho
   oko nájde skôr než v toku a nezaberá výšku, ktorú by si museli rezervovať
   aj karty bez zľavy. Miesto nad kartou drží výplň scrolleru (`padding-top`),
   inak by ho zvislé orezanie vodorovného scrollu odseklo. */
.date-picker__badges {
    position: absolute;
    top: -10px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 6px;
    min-width: 0;
    pointer-events: none;
}

/* Jediná hodnota pod 14 px v celom komponente. Odznak nie je čítaný text, ale
   značka s jedným číslom mimo toku karty; biela na `--bs-danger` je 4,55 : 1,
   teda nad hranicou aj pri tejto veľkosti. Väčší odznak by nad hranou karty
   zasahoval do dátumu pod ňou. */
.date-picker__badge {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    /* Dvojriadkový odznak by prekryl dátum pod sebou. */
    white-space: nowrap;
}

.date-picker__badge--discount {
    /* #d6293e na bielej = 4,9 : 1; biely text na ňom 4,3 : 1 pri 14 px/700,
       čo je veľký text podľa WCAG. */
    background: var(--bs-danger);
    color: #fff;
}

.date-picker__selected {
    margin-left: auto;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--dp-brand);
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
}

.date-picker__card.is-selected .date-picker__selected {
    opacity: 1;
    visibility: visible;
}

.date-picker__check {
    width: 12px;
    height: 12px;
}

/* ── 2. zóna: termín ────────────────────────────────────────────────────── */
/* Dátum sa neoreže nikdy — je to prvý údaj, podľa ktorého sa vyberá.
   Zóna drží dva riadky: rozsah cez Nový rok („28. 12. 2026 – 4. 1. 2027")
   sa na šírku karty nezmestí a zalomí sa. Keby si miesto rezervovali len tie
   karty, ktoré ho potrebujú, rozišli by sa so susednou kartou práve na
   prelome roka — teda tam, kde ich je vedľa seba najviac. */
.date-picker__dates {
    /* Rezervu dopočíta controller z najvyššieho skutočného dátumu v okne
       (`--dp-dates-min`), takže je presne taká, akú okno potrebuje — a nulová
       tam, kde sa všetky dátumy zmestia na riadok. Predvolená hodnota drží
       zarovnanie aj bez JS. */
    min-height: var(--dp-dates-min, calc(2 * var(--dp-fs-date) * var(--dp-lh-date)));
    margin-bottom: var(--dp-gap-date-duration);
}

.date-picker__date {
    font-size: var(--dp-fs-date);
    font-weight: 700;
    line-height: var(--dp-lh-date);
    letter-spacing: -.2px;
    color: var(--dp-ink);
    /* Číslice na rovnakej šírke — dátumy pod sebou tak opticky sedia. */
    font-variant-numeric: tabular-nums;
}

/* ── 3. zóna: dĺžka ─────────────────────────────────────────────────────── */
.date-picker__nights {
    font-size: var(--dp-fs-attr);
    font-weight: 500;
    line-height: 1.35;
    color: var(--dp-ink-muted);
    min-height: 1.27rem;
}

/* ── 4. zóna: cena ──────────────────────────────────────────────────────── */
.date-picker__price-block {
    margin-top: var(--dp-gap-duration-price);
}

/* Aktuálna a pôvodná cena tvoria jednu skupinu — preškrtnutá stojí vedľa,
   nie pod. `baseline` ich zarovná na účiaru napriek rozdielu 13 px. */
.date-picker__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;

    font-size: var(--dp-fs-price);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.3px;
    color: var(--dp-brand);
    font-variant-numeric: tabular-nums;
}

.date-picker__price-original {
    font-size: var(--dp-fs-attr);
    font-weight: 500;
    letter-spacing: 0;
    /* Vlastný `line-height`: bez neho by zdedil 1.1 z cenového riadku. */
    line-height: 1.35;
    color: var(--dp-ink-muted);
    /* Preškrtnutie musí byť vidieť — predvolená hrúbka pri 15 px zaniká. */
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.date-picker__price-original:empty {
    display: none;
}

.date-picker__price-unit {
    margin-top: var(--dp-gap-price-context);
    font-size: var(--dp-fs-attr);
    line-height: 1.35;
    color: var(--dp-ink-muted);
}

/* Riadok patrí k cene, nie vedľa nej: rovnaká veľkosť aj farba ako
   „za dospelú osobu". Tučná je iba samotná suma — celý riadok tučný súťažil
   s cenou nad sebou a karta mala dve rovnako hlasné čísla. */
.date-picker__price-group {
    margin-top: var(--dp-gap-context-total);
    font-size: var(--dp-fs-attr);
    font-weight: 400;
    line-height: 1.35;
    color: var(--dp-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* Suma zostáva rozhodovacím údajom: tučná a v plnej sýtosti textu. */
.date-picker__price-group-value {
    font-weight: 700;
    color: var(--dp-ink);
}

/* ── 5. zóna: vlastnosti (pružná) ───────────────────────────────────────── */
/* Deliaca čiara oddeľuje cenu od vlastností termínu. Je to vnútorná čiara,
   nie hranica karty — tú sa nedotýkame. */
.date-picker__meta-list {
    margin-top: var(--dp-gap-total-divider);
    padding-top: var(--dp-gap-divider-attrs);
    border-top: 1px solid var(--dp-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--dp-gap-attrs);
    /* Rozdiel v dĺžke názvov pohltí táto zóna, nie zóny nad ňou. */
    flex: 1 1 auto;
}

.date-picker__meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--dp-fs-attr);
    line-height: 1.35;
    color: var(--dp-ink);
    min-width: 0;
}

/* Ikona nesie význam (letisko / strava / izba / doprava), takže nesmie
   vyzerať vypnuto. Brandová fialová je na bielej 6,66 : 1, teda dvojnásobne
   nad hranicou 3 : 1 pre grafické prvky, a zároveň drží ikonový stĺpec
   opticky pohromade. `flex-shrink: 0` ju udrží v rovnakej veľkosti aj vedľa
   dvojriadkového názvu izby. */
.date-picker__meta-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    /* Zarovnanie na prvý riadok textu, nie na stred dvojriadkového názvu. */
    margin-top: 2px;
    color: var(--dp-brand);
}

/* Orezáva sa len druhoradý popis — nikdy cena, dátum ani dĺžka pobytu. */
.date-picker__clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

/* ── 6. zóna: sekundárna akcia ──────────────────────────────────────────── */
/*
   Textový odkaz, ktorý ním aj zostane. Predtým mu hover dokresľoval vyplnenú
   pilulku, takže sa v pokoji tváril ako odkaz a pod myšou ako tlačidlo —
   a súťažil s hlavnou akciou karty.

   Dotykový cieľ má 44 px cez pseudoprvok, nie cez výplň: podčiarknutie tak
   ostane pri texte a odkaz nezhrubne na tlačidlo.
*/
.date-picker__detail {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-top: var(--dp-gap-attrs-detail);

    display: inline-flex;
    align-items: center;
    /* Šípka patrí k textu, nie vedľa neho. */
    gap: 6px;

    padding: 0;
    border: 0;
    background: transparent;

    font-family: inherit;
    font-size: var(--dp-fs-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dp-brand);

    cursor: pointer;
    transition: color .15s ease;
}

/* Podčiarknutie nesie samotný text, nie celé tlačidlo — inak by prechádzalo
   aj popod šípku a odkaz by pôsobil ako rám. */
.date-picker__detail-label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-thickness .15s ease;
}

/* Naznačuje, že sa niečo otvorí. Zostáva to odkaz — žiadna výplň, žiadna
   pilulka, žiadne druhé CTA.

   12 px je zhruba polovica pôvodných 17 px: šípka veľkosti textu čítala ako
   samostatný ovládač a preťahovala pozornosť z hlavnej akcie karty. Takto je
   to interpunkčné znamienko za popiskom. */
.date-picker__detail-arrow {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    transition: transform .15s ease;
}

.date-picker__detail::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.date-picker__detail:hover {
    color: var(--dp-brand-strong);
}

.date-picker__detail:hover .date-picker__detail-label {
    text-decoration-thickness: 2px;
}

/* Posun o dva pixely, nič viac. Interakcia sa nemení, len sa potvrdí smer. */
.date-picker__detail:hover .date-picker__detail-arrow {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .date-picker__detail-arrow {
        transition: none;
    }

    .date-picker__detail:hover .date-picker__detail-arrow {
        transform: none;
    }
}

.date-picker__detail:focus-visible {
    outline: 3px solid var(--dp-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Prvé načítanie: kostra ─────────────────────────────────────────────── */
/*
   Kostra nie je ozdoba, je to rezervácia miesta. Preto nemá vlastné rozmery
   karty ani vlastný rytmus — beží v tých istých zónach a tých istých tokenoch
   ako načítaná karta. Keď sa zmení `--dp-fs-price` alebo `--dp-gap-attrs`,
   posunie sa oboje naraz a stopa zostane rovnaká.

   Čo kostra **nekreslí**: odznak zľavy a značku výberu. Oboje je údaj o
   konkrétnom termíne — obrys zľavy na každej karte by sľuboval zľavu, ktorú
   dáta nemusia mať. Odznak navyše visí mimo toku, takže na výšku nemá vplyv.
*/
.date-picker__card--skeleton {
    /* Dátum na jeden riadok. Rezervu na dva drží `.date-picker__dates` len
       dovtedy, kým ju controller neprepočíta z reálnych dátumov v okne
       (`--dp-dates-min`); kostra by inak bola o riadok vyššia než to, čo ju
       nahradí. Nula, nie dopočítaná výška: zónu má nastaviť ten istý riadkový
       mechanizmus ako pri načítanom dátume — viď `--skeleton--date`. */
    --dp-dates-min: 0px;

    /* Kostra nie je interaktívna: bez hranice ponuky, bez kurzora, bez hover
       stavu. Hranica je svetlá deliaca čiara, nie hranica interaktívnej karty. */
    border-color: var(--dp-line-soft);
    cursor: default;
    pointer-events: none;
}

.date-picker__skeleton {
    display: block;
    border-radius: 6px;
    background: var(--dp-surface-skeleton);
}

/*
   Pulz beží až vtedy, keď je na stránke JavaScript, ktorý kostru naozaj
   vystrieda — triedu pridáva terms-loader v `connect()`. Bez JS zostane
   statický obrys namiesto donekonečna pulzujúceho sľubu termínov, ktoré
   neprídu.

   **Toto nesmie riešiť `<noscript>` so `<style>` vnútri.** Prehliadač obsah
   `<noscript>` ignoruje len pri parsovaní zo siete; Turbo si stránku skladá
   cez `DOMParser`, kde je skriptovanie vypnuté a `<style>` sa z neho stane
   skutočný, účinkujúci uzol. Po každej Turbo navigácii tak celý karusel aj
   lišta filtrov zmizli a vrátili sa až po tvrdom obnovení stránky.

   Prekresľuje sa len `opacity`, teda vec kompozitora — na mobile to nestojí
   layout ani paint.
*/
.date-picker.is-js .date-picker__skeleton {
    animation: date-picker-skeleton 1.4s ease-in-out infinite;
}

/* Výšky nasledujúcich obdĺžnikov sú odvodené z tokenov typografie, nie
   odhadnuté v pixeloch. Každá sedí na riadok textu, ktorý ju nahradí. */

/* Jediná časť kostry, ktorá nie je blok. Zóna s dátumom nemá vlastný
   `line-height`, takže jej výšku pri jednom riadku určuje riadková opora
   bloku (24 px), nie riadkovanie dátumu (21,25 px). Blokový obdĺžnik by túto
   oporu vynechal a kostra by bola o necelé tri pixely nižšia než karta, ktorá
   ju vystrieda. `inline-block` ju do riadku vráti, `vertical-align: top`
   zabráni tomu, aby ju účiara naopak pretiahla. */
.date-picker__skeleton--date {
    display: inline-block;
    vertical-align: top;
    width: 78%;
    height: calc(var(--dp-fs-date) * var(--dp-lh-date));
}

.date-picker__skeleton--nights {
    width: 42%;
    height: calc(var(--dp-fs-attr) * 1.35);
}

.date-picker__skeleton--price {
    width: 58%;
    height: calc(var(--dp-fs-price) * 1.1);
}

.date-picker__skeleton--unit {
    width: 52%;
    height: calc(var(--dp-fs-attr) * 1.35);
}

.date-picker__skeleton--group {
    width: 68%;
    height: calc(var(--dp-fs-attr) * 1.35);
}

/* Rovnaká stopa ako `.date-picker__meta-icon`, vrátane odsadenia na prvý
   riadok textu — inak by sa riadky vlastností posunuli o dva pixely. */
.date-picker__skeleton--icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 5px;
}

.date-picker__skeleton--attr {
    height: calc(var(--dp-fs-attr) * 1.35);
}

.date-picker__skeleton--detail {
    width: 116px;
    height: calc(var(--dp-fs-body) * 1.4);
}

@keyframes date-picker-skeleton {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .date-picker.is-js .date-picker__skeleton {
        animation: none;
    }
}

/* ── Prázdny a chybový stav zoznamu ─────────────────────────────────────── */
/* Výšku drží stopa scrolleru, nie hláška. `align-self: center` je tu preto
   podstatné: bez neho by ju `align-items: stretch` roztiahol na celú stopu
   a z chybovej hlášky by bola 360 px vysoká červená plocha. */
.date-picker__notice,
.date-picker__scroller>.alert {
    flex: 1 1 100%;
    align-self: center;
    margin: 0;
    text-align: center;
    font-size: var(--dp-fs-body);
    line-height: 1.5;
    color: var(--dp-ink);
    padding: 1.5rem;
}

/* Price under day number */
.flatpickr-day.has-price {
    position: relative;
    font-weight: 600;
}

.flatpickr-day .fp-day-price {
    font-size: 0.65rem;
    line-height: 1;
    margin-top: -5px;
    opacity: 0.8;
    white-space: nowrap;
    font-weight: 400;
}

/* Make days taller to fit the price */
.flatpickr-day {
    height: 46px;
    line-height: 28px;
    padding-top: 1px;
    border-radius: .5rem !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   Lišta nad kartami termínov: filtre vľavo, šípky vpravo, jeden riadok.
   Na mobile sa chipy scrollujú vodorovne a šípky sa skryjú — tam je
   prirodzeným gestom potiahnutie kariet prstom.
   ───────────────────────────────────────────────────────────────────────── */
.date-picker__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* Šípky patria ku karuselu, nie k nadpisu sekcie. Tesnejší odstup zdola
       ich vizuálne priväzuje k lište kariet. */
    margin-bottom: 6px !important;
}

.date-picker__filters {
    min-width: 0;
    flex: 1 1 auto;
}

.date-picker__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    /* Aby tieň a focus ring chipu neboli orezané scrollovacím rámom. */
    padding: 4px;
    margin: -4px;
    scrollbar-width: none;
}

.date-picker__chips::-webkit-scrollbar {
    height: 0;
}

/* `margin-left: auto` namiesto `justify-content: space-between`: keď zájazd
   nemá čo filtrovať, blok s chipmi je skrytý a šípky musia ostať vpravo. */
.date-picker__nav-group {
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.date-picker__nav {
    /* 36 × 36. Šípky sú `d-none d-md-flex`, teda výhradne desktopový ovládač
       pre presné ukazovadlo — dotykové minimum 44 px sa na ne nevzťahuje
       a proti kartám pod nimi pôsobili priveľko. Stále nad minimom 24 × 24
       podľa WCAG 2.2 pre myš. Na mobile sa listuje prstom. */
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `rgb(var(--bs-primary-rgb))`, nie `hsl(var(--primary))` ani
       `var(--bs-primary)`: projekt má tri rôzne „primary" (#560ce3,
       81 67 217, 54 60 226). Lišta drží ten, z ktorého je aj podklad
       vybranej karty, inak by šípky svietili iným odtieňom než chipy. */
    color: rgb(var(--bs-primary-rgb));
    background: rgba(var(--bs-primary-rgb), .06);
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.date-picker__nav:hover:not(:disabled) {
    background: rgba(var(--bs-primary-rgb), .14);
}

/* Vypnutá šípka musí zostať čitateľná ako vypnutá, nie zmiznúť. `.35` bolo
   pod hranicou viditeľnosti pri jasnom displeji. */
.date-picker__nav:disabled {
    opacity: .45;
    cursor: default;
}

.date-picker__nav:focus-visible {
    outline: 3px solid rgb(var(--bs-primary-rgb));
    outline-offset: 2px;
}

.date-picker__icon {
    width: 16px;
    height: 16px;
}

/* ── Filtrovacie chipy ───────────────────────────────────────────────────── */
.term-filter__chip {
    /* Rovnaký font ako karty pod lištou — je to jeden komponent. */
    font-family: Poppins, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;

    border: 0;
    border-radius: 999px;
    /* 10px zvisle drzi chip na 36px, teda na rovnakej vyske ako sipky vedla. */
    padding: 10px 14px;

    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;

    color: #353844;
    max-width: 15rem;
    background: rgba(var(--bs-primary-rgb), .06);
    transition: background-color .15s ease, color .15s ease;
}

.term-filter__chip:hover {
    background: rgba(var(--bs-primary-rgb), .12);
}

/* Kostra chipu. Musí stáť **za** `.term-filter__chip`, inak jej podklad
   prehrá súboj rovnakej špecificity a chip zostane brandovo tónovaný —
   teda vyzerá ako hotový filter, ktorý sa nedá kliknúť.

   Prázdny `inline-flex` má nulovú výšku obsahu, takže by mal len výplň;
   výška sa preto dopočíta z rovnakých hodnôt ako u načítaného chipu
   (2 × 10 px výplň + riadok 14 px × 1.4) a lišta nad kartami nezmení výšku,
   keď fasety dôjdu. */
.term-filter__chip--skeleton {
    height: calc(2 * 10px + .875rem * 1.4);
    background: var(--dp-surface-skeleton);
    pointer-events: none;
}

.date-picker.is-js .term-filter__chip--skeleton {
    animation: date-picker-skeleton 1.4s ease-in-out infinite;
}

/* Musí nasledovať až za pravidlom vyššie — inak by ho jeho `animation`
   prebilo a nastavenie „obmedziť pohyb" by na chipe neplatilo. */
@media (prefers-reduced-motion: reduce) {
    .date-picker.is-js .term-filter__chip--skeleton {
        animation: none;
    }
}

.term-filter__chip[aria-expanded="true"],
.term-filter__chip.is-active {
    color: rgb(var(--bs-primary-rgb));
    background: rgba(var(--bs-primary-rgb), .16);
}

/* Názov izby vie byť dlhší než pol lišty. Chip ho oreže, celý je v `title`. */
.term-filter__chip-label {
    /* Bez `min-width: 0` sa flex polozka neda zmensit pod svoj obsah
       a ellipsis by sa nikdy neuplatnil. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.term-filter__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .65;
    transition: transform .15s ease;
}

.term-filter__chip[aria-expanded="true"] .term-filter__chevron {
    transform: rotate(180deg);
}

/* ── Ponuka hodnôt ───────────────────────────────────────────────────────── */
/* Vzhľad aj polohovanie panela sú v `sheet-popover.css` — rovnaké pre filtre
   nad karuselom aj pre polia kalkulačky. Tu zostáva len to, čo je vlastné
   tomuto zoznamu. */
.term-filter__menu {
    /* Názvy izieb sú dlhé; užší panel by ich lámal na tri riadky. */
    min-width: 280px;
}

/* Na celej obrazovke má zoznam vyššie riadky — je to dotykový cieľ. */
.sheet-popover.is-sheet .term-filter__option {
    padding: 13px 10px;
    font-size: 15px;
}

.term-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 44 px dotykový cieľ aj v popovere na desktope. */
    min-height: 44px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.4;
    color: #353844;
    transition: background-color .12s ease;
}

.term-filter__option:hover {
    background: rgba(var(--bs-primary-rgb), .06);
}

.term-filter__option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.term-filter__option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.term-filter__option-count {
    margin-left: auto;
    font-size: .875rem;
    /* `--bs-secondary-color` je v tejto téme #c5c5c7, teda 1,7 : 1. */
    color: #5f6775;
    font-variant-numeric: tabular-nums;
}

/* ── Zrušenie filtra ─────────────────────────────────────────────────────── */
.term-filter__reset {
    font-family: Poppins, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;

    border: 0;
    background: transparent;
    padding: 8px 6px;

    font-size: .875rem;
    font-weight: 600;
    color: #5f6775;
    transition: color .15s ease;
}

.term-filter__reset:hover {
    color: rgb(var(--bs-primary-rgb));
}

.term-filter__reset:focus-visible,
.term-filter__chip:focus-visible {
    outline: 3px solid rgb(var(--bs-primary-rgb));
    outline-offset: 2px;
}

.term-filter__reset-icon {
    width: 13px;
    height: 13px;
}

/* Zájazd, ktorý dodávateľ prestal ponúkať. */
.no-terms {
    background: rgba(var(--bs-primary-rgb), .05);
    border: 1px dashed var(--bs-border-color);
}

.no-terms__icon {
    color: rgb(var(--bs-primary-rgb));
    opacity: .8;
}