/* ====== Chalet Val d'Or – vlastné štýly ====== */

/* Rozbaľovací kalendár (HotelDatepicker) musí byť NAD mapou (Google Maps iframe)
   aj nad ostatným obsahom pod ním */
.datepicker { z-index: 1000; }
/* Celú kontaktnú sekciu zdvihni nad mapu. Animácia data-cues na riadku aplikuje
   transform/opacity, čím vytvára vlastný stacking context a "uväzní" z-index
   kalendára dovnútra – preto musí byť nad mapou aj samotná sekcia #contact. */
#contact { position: relative; z-index: 1; }
/* Mapový iframe drž v nižšej rovine, nech neprekrýva kalendár */
#map { position: relative; z-index: 0; }

/* Cena za noc v kalendári dostupnosti (flatpickr, Booking-style) */
.flatpickr-day.has-price {
    position: relative;
    height: 48px;
    line-height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
}
.flatpickr-day .fp-price {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #198754;
}
.flatpickr-day.flatpickr-disabled .fp-price { display: none; }
.flatpickr-day.selected .fp-price,
.flatpickr-day.startRange .fp-price,
.flatpickr-day.endRange .fp-price { color: #fff; }

/* Cena za noc v hero kalendári (hotel-datepicker, Booking-style) */
/* Pevné rozloženie stĺpcov – cena v bunke už nerozšíri tabuľku */
.datepicker__month { table-layout: fixed; }
.datepicker__month-day {
    padding: 6px 2px;
    vertical-align: top;
}
.datepicker__month-day--with-extra { line-height: 1.05; }
.datepicker .dp-price {
    display: block;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #198754;
    margin-top: 2px;
    white-space: nowrap;
}
.datepicker__month-day--disabled .dp-price,
.datepicker__month-day--invalid .dp-price,
.datepicker__month-day--out-of-range .dp-price { display: none; }
.datepicker__month-day--selected .dp-price,
.datepicker__month-day--first-day-selected .dp-price,
.datepicker__month-day--last-day-selected .dp-price { color: #fff; }

/* Pozor: dátumové <input> na kontaktoch majú tiež class .datepicker (flatpickr).
   Šírku nastavujeme len kontajneru hotel-datepickera (div), nie inputom. */
#reservationForm input.datepicker,
#availabilityForm input.datepicker { width: 100%; }

/* Širší kalendár, aby sa oba mesiace s cenami pohodlne zmestili vedľa seba */
@media (min-width: 768px) {
    div.datepicker { width: 680px; }
    .datepicker__month { width: 312px; }
}

/* Všetky polia rezervačného formulára (hero modal) zarovnané doprava */
#availabilityForm .form-control {
    text-align: right;
}

/* Počet osôb / detí (formulár Kontakt) zarovnané doprava */
#form_adults,
#form_children {
    text-align: right;
}

/* Odkazy z menu na sekcie (#chalet, #sluzby, #okolie, #lokalita, #galeria...)
   sa zarovnajú presne pod fixný header (výška sticky lišty = 100 px) */
html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

/* Logo v hlavičke – obrázok s priehľadným pozadím */
#header .navbar-brand .brand-logo {
    height: 120px;
    width: auto;
    max-width: 420px;
    display: block;
    transition: height .35s ease-in-out;
}

/* Prepínanie svetlej/tmavej verzie loga podľa pozadia headera */
#header .navbar-brand .brand-logo-dark { display: none; }
#header .header-navbar.header-navbar-sticky .navbar-brand .brand-logo-light { display: none; }
#header .header-navbar.header-navbar-sticky .navbar-brand .brand-logo-dark { display: block; }

/* Po odscrollovaní (sticky) – logo má rovnakú výšku ako lišta headera */
#header .header-navbar.header-navbar-sticky,
#header .header-navbar.header-navbar-sticky .navbar-brand {
    height: 100px;
}
#header .header-navbar.header-navbar-sticky .navbar-brand .brand-logo {
    height: 100px;
}