:root {
    --brand: #27A9DF;
    --brand-light: #6FCBEC;
    --brand-dark: #1A85B3;
    --brand-deep: #0F5C7E;
}

/* ===== Hero =====
           No overflow:hidden on the hero itself so dropdowns can escape when they need to
           flip above/outside. The slideshow is already clipped by .hero__bg below. */
.hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    isolation: isolate;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 1.2s ease;
    animation: heroZoom 28s ease-in-out infinite;
    will-change: transform, opacity;
}

    .hero__slide.is-active {
        opacity: 1;
    }

@keyframes heroZoom {
    0% {
        transform: scale(1.12) translate(0, 0);
    }

    50% {
        transform: scale(1.25) translate(-2%, -1.2%);
    }

    100% {
        transform: scale(1.12) translate(0, 0);
    }
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    radial-gradient(900px 500px at 85% 10%, rgba(39, 169, 223, .28), transparent 60% 60% ), radial-gradient(700px 400px at 10% 90%, rgba(15, 92, 126, .25), transparent 60%), linear-gradient(180deg, rgb(5 12 28 / 0%) 0%, rgba(5, 12, 28, .3) 40%, rgb(5 12 28 / 54%) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0 60px;
}

    .hero__inner > .container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1200px;
        width: 100%;
    }

/* ===== Headline centered ===== */
.hero-headline {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 2.25rem;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

    .hero__eyebrow .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-light);
        box-shadow: 0 0 10px var(--brand);
    }

.hero__title {
    font-weight: 800;
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

    .hero__title em {
        font-style: normal;
        background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-dark));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero__lead {
    font-size: clamp(1rem, .4vw + .9rem, 1.15rem);
    opacity: .92;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* ===== Segmented pill tabs (transparent, centered, separated) ===== */
.seg-wrap {
    display: flex;
    justify-content: center;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    padding: 0 30px;
}

.seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 1;
}

.seg__indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 22px -4px rgba(0, 0, 0, .25);
    transition: transform .35s cubic-bezier(.65,.05,.36,1), width .35s cubic-bezier(.65,.05,.36,1);
    z-index: 0;
}

.seg__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .95rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    transition: color .25s ease;
}

    .seg__btn .material-icons-outlined {
        font-size: 20px;
    }

    .seg__btn:hover {
        color: #fff;
    }

    .seg__btn.is-active {
        color: #0d1027;
        text-shadow: none;
    }

        .seg__btn.is-active [data-lucide],
        .seg__btn.is-active svg {
            color: var(--brand);
            stroke: var(--brand);
        }

/* ===== Search wrap (card is now the .card-principal; outer wrap is transparent) ===== */
.search-wrap {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.search-card {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

.search-card__body {
    position: relative;
    z-index: 1;
}

/* Force centering inside every partial's container/row */
.hero .tab-content .container,
.hero .tab-content .container-fluid,
.hero .tab-content .container-lg,
.hero .tab-content .container-sm,
.hero .tab-content .container-md {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    float: none !important;
}

.hero .tab-content .row {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero .tab-content .col-md-12,
.hero .tab-content [class*="col-"] {
    float: none !important;
}

/* =========================================================
           RESKIN of partial inputs (scoped to .hero)
           Keeps all IDs/names, just changes appearance
           ========================================================= */

/* Top strip OUTSIDE the card: transparent bg, white text, header-style active */
.hero .myItems {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 1rem;
}

.hero .myItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
}

    .hero .myItem .form-check-inline {
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero .myItem .form-check-label {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .55rem 1.1rem !important;
        border-radius: 999px;
        cursor: pointer;
        color: rgba(255,255,255,.85) !important;
        font-weight: 600;
        font-size: .88rem;
        background: transparent;
        border: 1px solid transparent;
        text-shadow: 0 1px 8px rgba(0,0,0,.35);
        transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    }

        .hero .myItem .form-check-label:hover {
            color: #fff !important;
            background: rgba(255,255,255,.08);
        }

    .hero .myItem .form-check-input:checked + .form-check-label {
        background: #fff !important;
        color: #0d1027 !important;
        border-color: transparent;
        box-shadow: 0 8px 22px -4px rgba(0, 0, 0, .25);
        text-shadow: none;
    }

    .hero .myItem .btnClass,
    .hero .myItem .optionsSearchFlighs {
        background: transparent !important;
        color: rgba(255,255,255,.85) !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        padding: .55rem 1.1rem !important;
        border-radius: 999px !important;
        font-weight: 600;
        font-size: .88rem;
        text-shadow: 0 1px 8px rgba(0,0,0,.35);
        transition: background .2s ease, color .2s ease;
    }

        .hero .myItem .btnClass:hover,
        .hero .myItem .optionsSearchFlighs:hover,
        .hero .myItem .btnClass[aria-expanded="true"],
        .hero .myItem .optionsSearchFlighs[aria-expanded="true"] {
            background: #fff !important;
            color: #0d1027 !important;
            border-color: #fff !important;
            text-shadow: none;
            box-shadow: 0 8px 22px -4px rgba(0, 0, 0, .25);
        }

/* Main input card (now the real white card, with border-gradient + shadow) */
.hero .card-principal {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .98);
    padding: 10px;
    gap: 8px;
    /* margin: 0 auto !important; */
    width: 100%;
    max-width: 960px;
    box-shadow: 0 30px 80px -20px rgba(5, 12, 28, .55), 0 8px 24px -8px rgba(5, 12, 28, .25);
    text-align: left;
}

    .hero .card-principal::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(111,203,236,.6), rgba(39,169,223,.45) 45%, rgba(15,92,126,.4));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .hero .card-principal .separator {
        display: none !important;
    }

    .hero .card-principal .card-item {
        flex: 1 1 200px;
        min-width: 180px;
        background: #fff;
        border: 0 !important;
        padding: 14px 18px !important;
        position: relative;
        transition: background .2s ease;
        cursor: text;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .hero .card-principal .card-item:hover {
            background: #f6f9fc;
        }

        .hero .card-principal .card-item:focus-within {
            background: #f1f7fb;
        }

        /* Labels: display block + icon as background-image so text-overflow: ellipsis
           works reliably (it doesn't cooperate with flex + ::before icon on same element) */
        .hero .card-principal .card-item > label,
        .hero .card-principal .card-item label.fw-800 {
            display: block !important;
            font-weight: 700 !important;
            font-size: .68rem !important;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #5b6b82 !important;
            margin: 0 0 4px 0 !important;
            padding: 0 0 0 22px !important;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
            background-repeat: no-repeat;
            background-position: 0 50%;
            background-size: 16px 16px;
        }
            /* Remove any leftover ::before icon from earlier rule so we don't double-draw */
            .hero .card-principal .card-item label.fw-800::before {
                content: none !important;
            }
            /* Reset inline margin-top that some partials apply to the label */
            .hero .card-principal .card-item label.fw-800[style*="margin-top"] {
                margin-top: 0 !important;
            }

        /* Default label icon (fallback): map-pin */
        .hero .card-principal .card-item label.fw-800 {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327A9DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
        }

/* Flight: Origin → plane-takeoff */
.hero #FormSearchFlights .card-item:has(input[name$=".Origin"]) label.fw-800,
.hero #FormSearchFlights .card-item:has(input[id^="OriginName"]) label.fw-800 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327A9DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 22h20'/><path d='M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z'/></svg>");
}

/* Flight: Destination → plane-landing */
.hero #FormSearchFlights .card-item:has(input[name$=".Destination"]) label.fw-800,
.hero #FormSearchFlights .card-item:has(input[id^="DestinationName"]) label.fw-800 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327A9DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 22h20'/><path d='M3.77 10.77 2 9l2-4.5 1.1.55c.55.28.9.83.9 1.45s.35 1.17.9 1.45L8 9l3-6 1.05.52a2 2 0 0 1 1.09 1.52l.72 5.4a2 2 0 0 0 1.09 1.52l4.4 2.2c.42.22.78.55 1.01.96l.6 1.03a1.4 1.4 0 0 1-1.42 2.08l-18.05-3c-.37-.08-.74-.24-1.02-.52Z'/></svg>");
}

/* Dates (any form) → calendar */
.hero .card-principal .card-item:has(input[id^="datepicker"]) label.fw-800,
.hero .card-principal .card-item:has(input[name="FlightDate"]) label.fw-800,
.hero .card-principal .card-item:has(input[name^="FlightDate"]) label.fw-800,
.hero .card-principal .card-item:has(input.date-range) label.fw-800,
.hero .card-principal .card-item:has(input.datepicker) label.fw-800 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327A9DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>");
}

/* Hotel guests / Package travelers → users */
.hero #RoomsList.card-item label.fw-800,
.hero #card-item-package-3.card-item label.fw-800,
.hero .card-principal .card-item:has(#RoomNumber) label.fw-800 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327A9DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.hero .card-principal .card-item .input-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
    min-height: 24px;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

.hero .card-principal .card-item .form-control,
.hero .card-principal .card-item .inputSearch {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 24px !important;
    line-height: 24px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0d1027 !important;
    box-shadow: none !important;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    .hero .card-principal .card-item .form-control::placeholder {
        color: #9aa4b7;
        font-weight: 500;
    }

/* Chevron wrapper (input-group-prepend) — always flex, vertically centered, at end */
.hero .card-principal .card-item .input-group-prepend {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
    margin-left: .5rem;
    height: 24px;
}

.hero .card-principal .card-item .input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    height: 24px;
    line-height: 1;
}
    /* Chevron icon — uniform size/color across all cards (flights, packages, hotels) */
    .hero .card-principal .card-item .fa-chevron-down,
    .hero .card-principal .card-item .input-group-text .fa-chevron-down {
        color: #9aa4b7 !important;
        font-size: .75rem !important;
        line-height: 1 !important;
        width: 14px;
        height: 14px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

/* Rooms/Passengers cards (Hotels/Packages):
           outer wrapper = flex row, label+dropdown on the left, search button on the right */
.hero .card-principal .card-item > .w-100.d-block.d-sm-flex,
.hero #RoomsList > .w-100,
.hero #card-item-package-3 > .w-100 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

    /* Left column (label + dropdown) — take remaining space, stack vertically.
           IMPORTANT: do NOT use !important on `display` so that:
             - `.d-none` (Bootstrap's display:none !important) can hide wrappers
             - inline `style="display: none"` (used by #FlightDateOne / #FlightDateRoundTrip
               in the flight partial for one-way vs round-trip toggling) is respected. */
    .hero .card-principal .card-item > .w-100 > .w-100.pe-3,
    .hero .card-principal .card-item > .w-100 > .w-100:not(.d-sm-block),
    .hero #RoomsList > .w-100 > .w-100,
    .hero #card-item-package-3 > .w-100 > .w-100 {
        display: flex;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

/* Right side (search button container) — don't shrink */
.hero .card-principal .card-item > .w-100 > .text-end,
.hero .card-principal .card-item > .w-100 > .d-none.d-sm-block.text-end {
    display: flex !important;
    align-items: center;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rooms/Passengers card: same flex size as the others (lugar, fecha, huéspedes all equal).
           The internal search button will fit because the left column is allowed to shrink.
           Extra left padding so the label/dropdown content is not flush with the card edge. */
.hero #RoomsList.card-item,
.hero #card-item-package-3.card-item {
    flex: 1 1 200px !important;
    min-width: 180px !important;
    padding-left: 28px !important;
    cursor: pointer !important;
}

/* Card items that open pickers (dates, guests) should show a pointer, not the I-beam */
.hero .card-principal .card-item:has(input[id^="datepicker"]),
.hero .card-principal .card-item:has(input.date-range),
.hero .card-principal .card-item:has(input.datepicker) {
    cursor: pointer !important;
}

/* Dropdown-toggle buttons inside card-item (Rooms/Passengers): align like an input */
.hero .card-principal .card-item .btn-group {
    width: 100%;
}

    .hero .card-principal .card-item .btn-group > .dropdown-toggle,
    .hero .card-principal .card-item .btn-passanger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        height: 24px;
        background: transparent !important;
        border: 0 !important;
        color: #0d1027 !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        box-shadow: none !important;
        text-align: left;
        cursor: pointer !important;
    }

        .hero .card-principal .card-item .btn-group > .dropdown-toggle::after {
            display: none;
        }

        .hero .card-principal .card-item .btn-passanger .fa-chevron-down {
            margin: 0 0 0 .5rem !important;
        }
/* Override inline margin-top on chevrons */
.hero .card-principal .card-item .fa-chevron-down[style*="margin-top"] {
    margin-top: 0 !important;
}

/* ============================
           Dropdown menus (Rooms / Passengers / Class)
           Consistent look matching the design
           ============================ */
.hero .dropdown-menu.roomHotel,
.hero .dropdown-menu.roomPackage,
.hero .dropdown-menu-paxIndex,
.hero .dropdown-menu-class,
.hero .dropdown-menu-b,
body > .dropdown-menu.roomHotel,
body > .dropdown-menu.roomPackage,
body > .dropdown-menu-paxIndex,
body > .dropdown-menu-class {
    min-width: 320px;
    max-width: calc(100vw - 24px);
    padding: 16px !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 20px 50px -12px rgba(5, 12, 28, .35), 0 4px 12px -4px rgba(5, 12, 28, .15) !important;
    margin-top: 8px !important;
    z-index: 99999 !important;
}
/* Any dropdown-menu triggered from within the hero search should render above everything,
           including the seg tabs. Bootstrap sometimes moves menus to body via Popper. */
.dropdown-menu.show {
    z-index: 99999 !important;
}

/* Rooms/Passengers content rows — do NOT force display (partial uses inline display:none
           to hide rooms 2-4; forcing !important would break that). */
.hero .content-hab-control {
    flex-direction: column;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(7, 18, 39, .06);
}

    .hero .content-hab-control:last-of-type {
        border-bottom: 0;
    }

.hero .content-hab-control-count {
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: #0d1027 !important;
    margin-bottom: 10px !important;
}

.hero .content-hab-control-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    gap: 12px;
}

.hero .content-hab-control-item-name {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    color: #0d1027;
    font-size: .9rem;
}

.hero .content-hab-control-item-name-sub {
    font-weight: 400 !important;
    font-size: .75rem !important;
    color: #8b94a6 !important;
}

.hero .content-hab-control-item-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero .content-hab-control-item-bt {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .hero .content-hab-control-item-bt svg {
        width: 28px;
        height: 28px;
    }

    .hero .content-hab-control-item-bt[control="more"] svg path {
        fill: var(--brand) !important;
    }

    .hero .content-hab-control-item-bt:disabled,
    .hero .content-hab-control-item-bt[disabled] {
        opacity: .4;
        cursor: not-allowed;
    }

.hero .content-hab-control-item-count {
    width: 28px;
    text-align: center;
    border: 0;
    background: transparent;
    font-weight: 700;
    font-size: 1rem;
    color: #0d1027;
    pointer-events: none;
}

.hero .content-hab-control-item-childs,
.hero .content-hab-control-item-infants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hero .content-hab-control-item-child-select,
.hero .content-hab-control-item-infant-select {
    flex: 1 1 calc(50% - 4px);
    padding: 6px 10px;
    border: 1px solid rgba(7, 18, 39, .1);
    border-radius: 10px;
    font-size: .85rem;
    background: #fff;
    color: #0d1027;
}

/* "Agregar otra habitación" row */
.hero .content-hab-add {
    display: block !important;
    padding: 12px 4px 4px !important;
    text-align: center;
}

    .hero .content-hab-add #hab-control-add {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .45rem .9rem;
        color: var(--brand) !important;
        font-weight: 700;
        font-size: .85rem;
        cursor: pointer;
        border-radius: 999px;
        background: rgba(39, 169, 223, .08);
        transition: background .2s ease;
    }

        .hero .content-hab-add #hab-control-add:hover {
            background: rgba(39, 169, 223, .15);
        }

.hero .content-hab-control-item-botton {
    display: block !important;
    margin-top: 10px !important;
    text-align: right;
}

.hero .hab-control-less {
    color: #dc3545;
    font-size: .8rem;
    cursor: pointer;
    font-weight: 600;
}

/* Flight class / passenger dropdowns from top strip */
.hero .dropdown-menu-class .dropdown-item,
.hero .dropdown-menu-paxIndex .dropdown-item {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    color: #0d1027 !important;
}

    .hero .dropdown-menu-class .dropdown-item:hover,
    .hero .dropdown-menu-paxIndex .dropdown-item:hover {
        background: rgba(39, 169, 223, .08) !important;
        color: var(--brand) !important;
    }

.hero .dropdown-menu-paxIndex .showLoadPasserger {
    font-weight: 600;
    color: #0d1027;
}

    .hero .dropdown-menu-paxIndex .showLoadPasserger small {
        color: #8b94a6;
    }

.hero .dropdown-menu-paxIndex .loadPassenger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero .dropdown-menu-paxIndex .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(39, 169, 223, .1) !important;
    color: var(--brand) !important;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .hero .dropdown-menu-paxIndex .btn-icon .material-icons-outlined {
        font-size: 18px;
    }

.hero .dropdown-menu-paxIndex .numberType {
    font-weight: 700;
    font-size: 1rem;
    color: #0d1027;
    font-style: normal;
    min-width: 18px;
    text-align: center;
}

/* Search button: plain circular gradient button, consistent size across tabs */
.hero .btn-search,
.hero .tab-content button[type="submit"].btn-primary {
    position: relative;
    height: 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -8px rgba(39, 169, 223, .55) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .hero .btn-search .material-icons-outlined,
    .hero .tab-content button[type="submit"].btn-primary .material-icons-outlined {
        font-size: 22px !important;
    }

    .hero .btn-search svg,
    .hero .tab-content button[type="submit"].btn-primary svg {
        width: 22px;
        height: 22px;
    }

/* Desktop: place the search button as a floating end cell */
@media (min-width: 576px) {
    .hero .card-principal .card-item:last-of-type {
        flex: 0 0 auto;
        min-width: unset;
        background: transparent;
        box-shadow: none;
        padding: 0 !important;
    }

        .hero .card-principal .card-item:last-of-type:hover {
            box-shadow: none;
        }
}

/* Multicity variant: reuse same clean look */
.hero .multiple .card-principal {
    border-radius: 18px;
    position: relative;
}

/* Multicity remove button: circular chip in the top-right corner of each card */
.hero .multipleDestination .remove-flights {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(220, 53, 69, .1) !important;
    color: #dc3545 !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s ease, transform .15s ease;
}

    .hero .multipleDestination .remove-flights:hover {
        background: rgba(220, 53, 69, .18) !important;
        transform: scale(1.05);
    }

    .hero .multipleDestination .remove-flights .fa-remove {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
    }
/* Give the card a bit of top padding so the title doesn't collide with the X */
.hero .multipleDestination {
    padding-top: 14px !important;
}

.hero .multiple .btnAddFlight {
    background: transparent;
    border: 1px dashed rgba(7,18,39,.2);
    color: #344057;
    padding: .55rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    cursor: pointer;
    transition: all .2s ease;
}

    .hero .multiple .btnAddFlight:hover {
        background: #f6f7fb;
        border-color: rgba(39,169,223,.5);
        color: var(--brand);
    }

    .hero .multiple .btnAddFlight svg path {
        fill: currentColor;
    }

.hero .btnSearchMultiple {
    margin-left: auto;
}

    /* Only the multicity search button shows the "Buscar" label.
           Selectors below are made more specific than the generic
           `.hero .tab-content button[type="submit"].btn-primary` rule so they win. */
    .hero .tab-content .btnSearchMultiple button[type="submit"].btn-search,
    .hero .tab-content .btnSearchMultiple button[type="submit"].btn-primary,
    .hero .btnSearchMultiple button[type="submit"].btn-primary.btn-search {
        width: auto !important;
        min-width: 160px !important;
        padding: 0 26px !important;
        border-radius: 999px !important;
        gap: .5rem;
    }

        .hero .tab-content .btnSearchMultiple button[type="submit"].btn-search::after,
        .hero .tab-content .btnSearchMultiple button[type="submit"].btn-primary::after {
            content: "Buscar";
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: .02em;
        }

/* Package / Hotel partials share the same card-principal class,
           so the reskin applies automatically. */

/* ===== Progress/dots ===== */
.hero__progress {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
    z-index: 3;
}

.hero__progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-light), var(--brand-dark));
}

.hero__dots {
    position: absolute;
    right: 28px;
    bottom: 22px;
    display: flex;
    gap: .5rem;
    z-index: 3;
}

    .hero__dots button {
        width: 24px;
        height: 3px;
        border-radius: 2px;
        border: 0;
        background: rgba(255,255,255,.35);
        cursor: pointer;
        padding: 0;
        transition: background .25s ease, width .25s ease;
    }

        .hero__dots button.is-active {
            background: #fff;
            width: 40px;
        }

/* ===== Responsive (mobile) ===== */
@media (max-width: 575.98px) {
    .multipleDestination {
        margin: 0 0 10px 0 !important;
    }

    .content-footer-top-left {
        width: 100%;
    }

    .container-offer-content-img {
        height: auto;
        width: 100%;
        margin-bottom: 16px;
    }

    .container-offer-content {
        display: block !important;
    }


    .hero {
        min-height: 120px;
    }

    .seg {
        width: 100%;
        justify-content: space-between;
        border-radius: 20px;
    }

    .seg__btn {
        padding: .55rem .6rem;
        font-size: .82rem;
        flex: 1;
        justify-content: center;
    }

        .seg__btn .tabTitle {
            display: none;
        }

    .search-card {
        /* padding: 32px 14px 18px;*/
        border-radius: 22px;
    }

    .hero__inner {
        display: block;
        padding: 16px 0 60px 0;
    }
    /* Stack card-items vertically with small gap + subtle divider between them */
    .hero .card-principal {
        flex-direction: column;
        gap: 6px !important;
        padding: 8px !important;
    }

        .hero .card-principal .card-item {
            min-width: 100%;
            padding: 12px 16px !important;
            position: relative;
            margin: 10px 0px;
        }
            /* Thin divider line under every card-item except the last */
            .hero .card-principal .card-item:not(:last-of-type)::after {
                content: "";
                position: absolute;
                left: 16px;
                right: 16px;
                bottom: -4px;
                height: 1px;
                background: rgba(255, 255, 255, .28);
                pointer-events: none;
            }

    .hero #RoomsList.card-item,
    .hero #card-item-package-3.card-item {
        padding-left: 16px !important;
    }

    .hero__dots {
        right: 16px;
        bottom: 14px;
    }
    /* Flights top strip: 2 rows, centered.
               Row 1 → 3 radios (Ida y vuelta / Sola ida / Múltiples destinos)
               Row 2 → class + passenger dropdowns.
               Uses flex-wrap with explicit flex-basis so rows are deterministic. */
    .hero .myItems {
        justify-content: center !important;
        overflow: visible !important;
        padding: 0 4px 6px;
        width: 100%;
        margin: 0 auto 1rem !important;
    }

    .hero .myItem {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        column-gap: 4px !important;
        row-gap: 6px !important;
        max-width: 100%;
        min-width: 0 !important;
    }
        /* Row 1: radios each take ~1/3 minus gap */
        .hero .myItem > .form-check-inline:nth-child(1),
        .hero .myItem > .form-check-inline:nth-child(2),
        .hero .myItem > .form-check-inline:nth-child(3) {
            flex: 1 1 calc(33.333% - 4px) !important;
            max-width: calc(33.333% - 4px) !important;
            min-width: 0 !important;
        }
        /* Row 2: class + passenger each take ~1/2 minus gap */
        .hero .myItem > .form-check-inline:nth-child(4),
        .hero .myItem > .form-check-inline:nth-child(5) {
            flex: 1 1 calc(50% - 4px) !important;
            max-width: calc(50% - 4px) !important;
            min-width: 0 !important;
        }

        .hero .myItem > .form-check-inline {
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden;
            display: flex !important;
            align-items: stretch;
        }

        .hero .myItem .form-check-label,
        .hero .myItem .btnClass,
        .hero .myItem .optionsSearchFlighs {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
            /* white-space: nowrap !important; */
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            padding: .5rem .3rem !important;
            font-size: .75rem !important;
            min-width: 0 !important;
        }

        .hero .myItem .btn-group {
            width: 100%;
        }
    /* Stack the inner wrapper (date + search button) vertically so the
               button lands on its own row below the inputs */
    .hero .card-principal .card-item > .w-100.d-block.d-sm-flex,
    .hero #RoomsList > .w-100,
    .hero #card-item-package-3 > .w-100 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    /* Flights partial hides the search-button container with `d-none d-sm-block`
               on mobile. Force it visible so the button actually shows. */
    .hero .card-principal .card-item > .w-100 > .d-none.d-sm-block.text-end {
        display: flex !important;
        width: 100%;
        justify-content: stretch;
        text-align: left !important;
    }

    .hero .card-principal .card-item > .w-100 > .text-end,
    .hero .card-principal .card-item > .w-100 > .d-none.d-sm-block.text-end {
        flex-shrink: 0 !important;
        width: 100% !important;
    }
    /* Search button: full-width pill on mobile with "Buscar" label */
    .hero .btn-search,
    .hero .tab-content button[type="submit"].btn-primary {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 22px !important;
        border-radius: 16px !important;
        height: 52px !important;
        gap: .5rem;
        z-index: 10;
    }

        .hero .btn-search::after,
        .hero .tab-content button[type="submit"].btn-primary::after {
            content: "Buscar";
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: .02em;
        }
    /* Mobile: unify the text that appears BELOW each label
               (inputs, placeholders, dropdown display text) — same color, size, weight */
    .hero .card-principal .card-item .form-control,
    .hero .card-principal .card-item .inputSearch,
    .hero .card-principal .card-item .btn-group > .dropdown-toggle,
    .hero .card-principal .card-item .btn-passanger,
    .hero .card-principal .card-item #showPax,
    .hero .card-principal .card-item .btn-passanger span,
    .hero .card-principal .card-item .btn-passanger .fs-16px {
        font-size: .95rem !important;
        font-weight: 500 !important;
        color: #5b6b82 !important;
    }

        .hero .card-principal .card-item .form-control::placeholder {
            font-size: .95rem !important;
            font-weight: 500 !important;
            color: #5b6b82 !important;
            opacity: 1;
        }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide {
        animation: none;
        transform: none;
    }

    .seg__indicator {
        transition: none;
    }
}

/* ===== Lucide icons sizing ===== */
.hero [data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.hero .seg__btn [data-lucide] {
    width: 20px;
    height: 20px;
}

.hero .search-card__badge [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--brand-light);
}

/* ===== FontAwesome → Lucide replacement (via CSS mask) ===== */
.hero .fa-chevron-down,
.hero .fa-sort-down,
.hero .faIcon {
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
    vertical-align: middle;
    color: #9aa4b7;
}

    .hero .fa-chevron-down::before,
    .hero .fa-sort-down::before,
    .hero .faIcon::before {
        content: none !important;
    }

.hero .myItem .btnClass .faIcon,
.hero .myItem .optionsSearchFlighs .faIcon {
    color: currentColor;
    margin-left: .2rem;
}

.hero .fa-remove {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 2re4 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") no-repeat center / contain;
}

    .hero .fa-remove::before {
        content: none !important;
    }