/* ═════════════════════════════════════════════════════════════════════════
   Výber z poľa — jeden vzor pre celý detail zájazdu

   Široký displej: panel ukotvený k poľu, **zarovnaný jeho pravou hranou**,
   teda otvárajúci sa doľava. Kalkulačka stojí pri pravom okraji obsahu, takže
   panel zarovnaný doľava by mieril von z obrazovky a musel by sa lámať alebo
   posúvať. Zarovnanie doprava je jediná poloha, ktorá drží pre všetky tri
   polia rovnako.

   Úzky displej: panel cez celú obrazovku, bez zaoblených rohov. Spodný panel
   s rohmi má zmysel pri krátkom zozname; kalendár na dva mesiace ani šesť
   izieb s cenami sa doň nezmestia bez toho, aby väčšinu obsahu schoval pod
   záhyb.

   **Na širokom displeji panel neroluje.** Výšku si berie podľa obsahu; strop
   je až samotná obrazovka a je to poistka pre veľmi nízke okná, nie bežný
   stav. Vnorený rolovací rám vnútri plávajúceho panela je presne to, čo robí
   z výberu hádanku — dva posuvníky nad sebou a obsah odrezaný uprostred.

   Polohu počíta `js/sheet-popover.js`, nie Popper: panel musí zostať mimo
   toku, aby ho neorezal vodorovný scroller chipov ani `overflow` offcanvasu.
   Spúšťač preto nesie `data-bs-display="static"`.

   Na širokom displeji **nie je** tmavý prekryv. Cena vedľa polí sa mení podľa
   toho, čo človek práve vyberá — zatemniť ju by znamenalo schovať presne ten
   údaj, kvôli ktorému vyberá.
   ═════════════════════════════════════════════════════════════════════════ */
.sheet-popover {
    /* Jediné vodorovné odsadenie v paneli. Hlavička, telo aj pätička ho
       používajú, takže ich obsah stojí na jednej zvislej linke. */
    --sp-pad: 16px;

    position: fixed;
    margin: 0;
    z-index: 1055;

    flex-direction: column;

    /* Poistka pre nízke okno, nie bežný stav: pri obvyklej výške obrazovky sa
       panel zmestí celý a posuvník sa nikdy nevykreslí. */
    max-height: calc(100vh - 24px);

    min-width: 260px;

    /* Panel sám nemá výplň — má ju každá zóna zvlášť. Predtým mal `padding: 8px`
       a pätička si ho rušila záporným okrajom (`margin: -8px`), aby siahala od
       hrany po hranu. Lenže šablóny nesú na paneli bootstrapovské `p-0`
       s `!important`, takže výplň nebola nikdy 8 px — a záporný okraj potom
       pätičku **vytiahol 8 px za panel** na každú stranu. Namerané: panel
       650–1290, pätička 642–1298.

       `overflow: hidden` je k tomu párový: bez neho by hlavička a pätička
       s vlastným pozadím prekryli zaoblené rohy panela. */
    padding: 0;
    overflow: hidden;

    border: 0;
    border-radius: 14px;
    box-shadow: 0 1rem 2.5rem rgba(11, 10, 18, .18);
}

/* Trojnásobný selektor je tu nutnosť, nie ozdoba: bootstrapovské
   `.dropdown-menu.show { display: block }` má rovnakú špecificitu ako
   `.sheet-popover.show` a v projekte sa Bootstrap načítava dvakrát, takže
   o poradí kaskády sa nedá nič predpokladať. Bez `display: flex` neplatí ani
   `flex: 1 1 auto` na tele — pätička potom nesedela na spodku obrazovky, ale
   hneď pod zoznamom. */
.dropdown-menu.sheet-popover.show {
    display: flex;
}

/* Roluje **obsah**, nie celý panel — pätička s potvrdením tak zostáva na
   mieste a nikdy neodpláva pod okraj. */
.sheet-popover__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-pad);
}

/* ── Celá obrazovka (< 576 px) ───────────────────────────────────────────── */
/* Polohu a rozmer nastavuje modul inline — Bootstrap kreslí
   `.dropdown-menu[data-bs-popper]` s `top: 100%` a v CSS by sme ten súboj
   špecificity prehrali. Tu ostáva len vzhľad. */
.sheet-popover.is-sheet {
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;

    border-radius: 0;
    box-shadow: none;
}

.sheet-popover.is-sheet .sheet-popover__body {
    flex: 1 1 auto;
}

.sheet-popover__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1054;
    background: rgba(0, 0, 0, .35);
}

/* ── Hlavička (len na celej obrazovke) ───────────────────────────────────── */
/* Panel cez celú obrazovku prekryje všetko vrátane hlavičky stránky, takže
   musí sám povedať, čo je zač a ako sa zavrie. V popovere na širokom displeji
   je to zbytočné — tam je vidieť pole, z ktorého vyšiel. */
.sheet-popover__header {
    display: none;
}

.sheet-popover.is-sheet .sheet-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;

    /* Sprava menej: zatváracie tlačidlo je kruh so 44 px dotykovým cieľom
       a jeho optický okraj je bližšie než jeho rám. */
    padding: 12px 10px 12px var(--sp-pad);
    border-bottom: 1px solid var(--bs-border-color);
}

.sheet-popover__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #353844;
}

.sheet-popover__close {
    flex: 0 0 auto;
    /* 44 × 44 dotykový cieľ. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 10, 18, .06);
    color: #353844;

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

.sheet-popover__close svg {
    width: 18px;
    height: 18px;
}

/* ── Pätička s potvrdením ────────────────────────────────────────────────── */
.sheet-popover__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 0;
    padding: 12px var(--sp-pad);
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

/* Keď je v pätičke len potvrdenie, patrí doprava — vľavo by pôsobilo ako
   zrušenie. */
.sheet-popover__footer--single {
    justify-content: flex-end;
}

.sheet-popover.is-sheet .sheet-popover__footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sheet-popover__footer-note {
    min-width: 0;
    font-size: .875rem;
    line-height: 1.35;
    /* `--bs-secondary-color` je v tejto téme #c5c5c7, teda 1,7 : 1. */
    color: #5f6775;
}