.calculation-widget.widget-sticky-on {
    position: sticky;
    top: 100px;
    z-index: 1000;
}

/* assets/styles/components/_calculation_box_v2.css */

:root {
    --hover-border-color: 238 75% 55%;
    --shadow-widget: 0 8px 30px hsl(220 20% 10% / .12);
    --background: 0 0% 100%;
    --foreground: 220 20% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 20% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 10%;
    --primary: 238 75% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 238 75% 48%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 220 20% 25%;
    --muted: 220 14% 96%;
    --muted-foreground: 220 10% 45%;
    --accent: 350 85% 60%;
    --accent-foreground: 0 0% 100%;
    --accent-soft: 350 85% 96%;
    --success: 152 70% 45%;
    --success-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 15% 90%;
    --input: 220 15% 90%;
    --ring: 238 75% 55%;
    --radius: .75rem;
    --price: 238 75% 55%;
    --price-old: 220 10% 55%;
    --badge-deal: 350 85% 55%;
    --badge-deal-bg: 350 85% 95%;
    --badge-feature: 220 14% 96%;
    --badge-feature-text: 220 20% 35%;
    --shadow-sm: 0 1px 2px 0 hsl(220 20% 10% / .05);
    --shadow-md: 0 4px 6px -1px hsl(220 20% 10% / .1), 0 2px 4px -2px hsl(220 20% 10% / .1);
    --shadow-lg: 0 10px 15px -3px hsl(220 20% 10% / .1), 0 4px 6px -4px hsl(220 20% 10% / .1);
    --shadow-xl: 0 20px 25px -5px hsl(220 20% 10% / .1), 0 8px 10px -6px hsl(220 20% 10% / .1);
    --gradient-hero: linear-gradient(135deg, hsl(238 75% 55%) 0%, hsl(280 70% 55%) 100%);
    --gradient-deal: linear-gradient(135deg, hsl(350 85% 55%) 0%, hsl(20 90% 55%) 100%);
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}

.calc2,
.calc2 .card,
.calc2 .card-body,
.calc2-form {
    overflow: visible !important;
}

.calc2 .price-header {
    height: 128px!important;
    max-height: 128px!important;
}

/* 2) Dropdown musí byť nad ostatným obsahom */
.calc2 .dropdown-menu.popup_wrapper {
    z-index: 2000; /* viac než modaly/offcanvas podľa potreby */
}

.calc2,
.ts-searchbar,
.ts-searchbar *,
.calc2 * {
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

.form-select span {
    font-size: .875rem;
}

.calc2 {
    border-radius: 12px;
    border: 1px solid hsl(var(--border));
    overflow: hidden;
    background: var(--bs-body-bg);
}

.calc2 .badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    font-weight: 600;
    /*background: rgba(var(--bs-danger-rgb), .78) !important;*/
    text-transform: uppercase;
}

.calc2-price {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.calc2-subtitle {
    margin-top: .25rem;
    color: var(--bs-body-color);
    opacity: .8;
    font-size: .875rem;
}

.calc2-from {
    margin-top: .35rem;
    color: var(--bs-body-color);
    opacity: .75;
    font-size: .95rem;
}

.calc2-form {
    display: grid;
    gap: .75rem;
}

.calc2-field:hover {
    background-color: hsl(var(--secondary));
}

.calc2-field {
    display: grid;
    grid-template-columns: 22px 1fr 26px;
    align-items: center;
    gap: .75rem;
    padding: .9rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-secondary-rgb), .04);
}

.calc2-icon {
    width: 1.2rem;
    height: 1.2rem;
    /*border-radius: 12px;*/
    display: grid;
    place-items: center;
    /*background: rgba(var(--bs-secondary-rgb), .08);*/
    color: var(--bs-body-color);
    opacity: .55;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.calc2-label {
    font-size: .75rem;
    color: var(--bs-body-color);
    opacity: .65;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 400;
}

.calc2-control {
    position: relative;
}

.calc2-select {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
    appearance: none;
    font-size: .875rem;
    cursor: pointer;
}

.calc2-chevron {
    display: grid;
    place-items: center;
    opacity: .6;
}

.calc2-cta {
    /*border-radius: 1px;*/
    padding: .95rem 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    background: #3b3ff5;
    border: 0;
    color: #fff;
}

.calc2-cta:hover {
    filter: brightness(0.98);
}

.calc2-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 400;
    margin-top: -12px;
}

.calc2-help a {
    text-decoration: none;
    font-weight: 800;
}

/* --- Breakdown --- */

.calc2-breakdown-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.calc2-breakdown-chevron {
    opacity: .7;
}

.calc2-breakdown-toggle[aria-expanded="false"] .calc2-breakdown-chevron i {
    transform: rotate(180deg);
    display: inline-block;
    transition: transform .15s ease;
}

.calc2-rows {
    display: grid;
    gap: .55rem;
}

.calc2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
}

.calc2-row-name {
    color: var(--bs-body-color);
    opacity: .75;
}

.calc2-row-val {
    font-weight: 800;
}

.calc2-row--discount .calc2-row-name {
    color: var(--bs-success);
    opacity: 1;
}

.calc2-row--discount .calc2-row-val {
    color: var(--bs-success);
}

.calc2-total {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calc2-total-name {
    font-weight: 900;
    font-size: 1.05rem;
}

.calc2-total-val {
    font-weight: 900;
    font-size: 1.35rem;
}

/* --- Travelers include normalization (aby zapadol do field cardu) --- */
/* tvoj _travelers_box má button + vo vnútri div .form-control.form-select – ten štýlujem tak, aby vyzeral ako "value" */
.calc2-travelers-wrap .btn.btn-link {
    /*width: 100%;*/
    /*padding: 0;*/
    /*margin: 0;*/
}

.calc2-travelers-wrap label.form-label {
    display: none; /* label riešime v calc2-label */
}

.calc2-travelers-wrap .form-control.form-select {
    border: 0;
    padding: 0;
    background: transparent;
    font-weight: 800;
    line-height: 1.2;
    /* odstráni background-arrow z bootstrap form-select (aj keď je to div) */
    background-image: none !important;
}

/* zabrániť, aby dropdown menil layout field-u */
.calc2-field--travelers .dropdown {
    width: 100%;
}

/* --- Foot --- */
.calc2-watching {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(var(--bs-danger-rgb), .05);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.calc2-watching i {
    color: var(--bs-danger);
}

.calc2-trust {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.calc2-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    opacity: .75;
    font-size: 0.8rem;
}

.calc2-trust-item i {
    opacity: .9;
}

#calc2Breakdown .calc2-row-name {
    font-weight: 500;
}

#calc2Breakdown * {
    font-size: 0.875rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-muted-foreground {
    color: #676f7e;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.shadow-widget {
    box-shadow: var(--shadow-widget);
}

.shadow-widget {
    --tw-shadow: 0 8px 30px hsl(220 20% 10% / .12);
    --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


.gallery-card-radius {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
.card-radius-top-right {
    border-bottom-right-radius: 0!important;
    border-bottom-left-radius: 0!important;
    border-top-left-radius: 0!important;
}

.card-radius-bottom-right {
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 0!important;
    border-top-left-radius: 0!important;
}

.card-no-radius {
    border-radius: 0!important;
}
.sticky-widget {
    position: sticky;
    top: 100px;
    z-index: 100;
}
.tripadvisor-rating {
    padding: 5px;
}
address .nav-item + .nav-item:before {
    padding-left: 0!important;
    padding-right: 0.5rem!important;
}

.placeholder.rounded {
    border-radius: 6px!important;
}

.popup-footer .btn, .dropdown-travelers, .dropdown-travelers select, .dropdown-travelers .btn {
    font-size: 0.875rem;
}
.white-space-normal {
    white-space: normal;
}


/* body padding keď je sticky bar viditeľný */
.has-calc-mobile-bar {
    /*padding-bottom: 92px; !* nech neprekryje footer CTA *! */
}

.calc-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; /* nad footerom, pod offcanvasom */
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(0,0,0,.08);
    /*box-shadow: 0 -8px 24px rgba(0,0,0,.08);*/
    box-shadow: 0 -8px 44px rgba(0,0,0,.2);
}

.calc-mobile-bar__handle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0px;
}

.calc-mobile-bar__handle-line {
    display: inline-block;
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
}

.calc-mobile-bar__content {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0px 16px 10px;
    height: 61px!important;
}

.calc-mobile-bar__price { flex: 1; min-width: 0; }

.calc-mobile-sheet {
    height: 85vh;          /* bottom sheet feeling */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.calc-mobile-sheet .offcanvas-header {
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.calc-mobile-sheet__grab {
    width: 52px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    margin: 0 auto 8px;
}


.offcanvas-backdrop {
    opacity: 0.8!important;
}

.offcanvas-mobile {
    z-index: 3000;
    top: 4.5rem;
    border-radius: .8rem;
}


/* ═════════════════════════════════════════════════════════════════════════
   Panely polí kalkulačky

   Spoločný vzhľad a polohovanie sú v `sheet-popover.css`; tu je len šírka
   a zoznam izieb.
   ═════════════════════════════════════════════════════════════════════════ */
.calc-popover {
    /* Poppins ako karty termínov — je to tá istá obrazovka. */
    font-family: Poppins, sans-serif;
    width: 360px;
}

/* Kalendár kreslí na širokom displeji dva mesiace vedľa seba a musí sa doňho
   zmestiť celý — vodorovný posuvník v kalendári je horší než užší panel.

   Flatpickr si šírku určuje sám a nemení ju podľa priestoru: namerané
   **618 px** pri `showMonths: 2`. K tomu vodorovné odsadenie tela z oboch
   strán. Keď panel meral 640 px, obsahová šírka tela vyšla na 608 a kalendár
   dostal vlastný vodorovný posuvník. */
@media (min-width: 768px) {
    .calc-popover--calendar {
        width: calc(618px + 2 * var(--sp-pad));
    }
}

/* Názvy izieb sú dodávateľské a dlhé („Dvojlôžková izba s prístelkou a bočným
   výhľadom na more"). Vedľa nich stojí ešte cena, takže panel potrebuje viac
   miesta než ostatné dve polia. */
.calc-popover--rooms {
    width: 440px;
}

/* Na celej obrazovke šírku riadi displej, nie obsah. */
.calc-popover.is-sheet,
.calc-popover--calendar.is-sheet,
.calc-popover--rooms.is-sheet {
    width: auto;
}

/* ── Riadok izby ─────────────────────────────────────────────────────────── */
/*
   Celý riadok je klikateľný (`<label>` okolo prepínača), nie len samotné
   koliesko. Cena stojí vpravo na pevnom stĺpci, takže sa dá porovnávať
   zvisle — s cenou zamiešanou do textu sa rozdiely medzi izbami hľadali ťažko.
*/
.calc-room {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;

    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.calc-room:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    background: rgba(var(--bs-primary-rgb), .04);
}

/* Vybraná izba: brandová hrana zdvojená vnútorným prstencom a tónovaný
   podklad — rovnaký jazyk ako vybraná karta termínu. */
.calc-room.is-selected {
    border-color: rgb(var(--bs-primary-rgb));
    box-shadow: inset 0 0 0 1px rgb(var(--bs-primary-rgb));
    background: rgba(var(--bs-primary-rgb), .07);
}

/* Izba, ktorú dodávateľ na tento termín nemá. Kurzor aj kontrast to musia
   povedať skôr, než na ňu človek klikne. */
.calc-room.is-unavailable {
    cursor: not-allowed;
    background: #f5f5f6;
    border-color: var(--bs-border-color);
}

.calc-room.is-unavailable:hover {
    border-color: var(--bs-border-color);
    background: #f5f5f6;
}

.calc-room__radio {
    margin: 2px 0 0;
    flex-shrink: 0;
}

.calc-room__text {
    min-width: 0;
}

.calc-room__name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #353844;
}

/* Odkaz, nie druhé tlačidlo — hlavná akcia riadku je jeho výber. */
.calc-room__details {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;

    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgb(var(--bs-primary-rgb));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.calc-room__details svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.calc-room__price {
    text-align: right;
    white-space: nowrap;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #353844;
    /* Ceny pod sebou opticky sadnú na rovnakú šírku číslic. */
    font-variant-numeric: tabular-nums;
}

.calc-room__included {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    /* #157347 na bielej = 4,6 : 1; bootstrapovská `--bs-success` je 2,8 : 1. */
    color: #157347;
}

.calc-room.is-unavailable .calc-room__price {
    font-weight: 500;
    color: #5f6775;
}

.calc-room__empty {
    padding: 8px 2px;
    font-size: .9375rem;
    line-height: 1.5;
    color: #5f6775;
}