/* ===== Home hero redesign (hero-v2) =====
   Full-bleed looped background video (falls back to a dark solid color
   until one is set) with centered white text, and a plain booking bar in
   its own section right below — replaces the old .hero-three, which also
   used GSAP SplitText and visually reversed Latin characters under
   dir="rtl" (an untranslated English heading rendered as mirrored
   gibberish); this version writes real bilingual copy instead. */

.hero-v2 {
    position: relative;
    background-color: #14161a;
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 20px;
    border-radius: 24px;
}
.hero-v2__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-v2__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .78));
    z-index: 1;
}
.hero-v2 > .container {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 100px;
}

.hero-v2__content {
    max-width: 780px;
}

.hero-v2__eyebrow {
    display: inline-block;
    background-color: rgba(var(--travhub-base-rgb), .25);
    color: var(--travhub-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 22px;
}

.hero-v2__title {
    font-size: 68px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--travhub-white);
    margin-bottom: 24px;
}

.hero-v2__text {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 480px;
    margin: 0 0 36px;
}

.hero-v2__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 60px;
}

.hero-v2__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-white);
    text-decoration: none;
    transition: color 250ms ease;
}
.hero-v2__link i {
    font-size: 13px;
    color: var(--travhub-white);
    transition: transform 250ms ease;
}
.hero-v2__link:hover { opacity: .8; }
.hero-v2__link:hover i { transform: translateX(4px); }
[dir="rtl"] .hero-v2__link:hover i { transform: translateX(-4px); }

.hero-v2__stats {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 34px;
}
.hero-v2__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-inline-start: 22px;
    border-inline-start: 2px solid rgba(255, 255, 255, .2);
}
.hero-v2__stat:first-child {
    padding-inline-start: 0;
    border-inline-start: none;
}
.hero-v2__stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--travhub-white);
    line-height: 1;
}
.hero-v2__stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

/* ---- Floating quick-search card, hero's opposite corner (Kora-style) ---- */
.hero-v2__card {
    position: absolute;
    bottom: 40px;
    inset-inline-end: 40px;
    z-index: 3;
    width: 280px;
    background-color: rgba(255, 255, 255, .97);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    padding: 22px;
}
.hero-v2__card__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--travhub-black);
    margin-bottom: 14px;
}
.hero-v2__card__field {
    margin-bottom: 12px;
}
.hero-v2__card__field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--travhub-text);
    margin-bottom: 4px;
}
.hero-v2__card__field select,
.hero-v2__card__field input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--travhub-black);
    background-color: transparent;
}
.hero-v2__card__field select:focus,
.hero-v2__card__field input:focus {
    outline: none;
    border-color: var(--travhub-base);
}
.hero-v2__card__row {
    display: flex;
    gap: 10px;
}
.hero-v2__card__row .hero-v2__card__field {
    flex: 1;
    min-width: 0;
}
.hero-v2__card__btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

@media (max-width: 991px) {
    .hero-v2 {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        padding-bottom: 40px;
    }
    .hero-v2__card {
        position: static;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .hero-v2 { min-height: calc(100vh - 16px); margin: 8px; border-radius: 18px; }
    .hero-v2 > .container { padding-top: 120px; padding-bottom: 40px; }
    .hero-v2__title { font-size: 32px; }
    .hero-v2__text { font-size: 15px; }
    .hero-v2__actions { margin-bottom: 34px; }
    .hero-v2__stats { gap: 22px; margin-bottom: 30px; }
}

/* ===== Floating pill header, home page hero only =====
   The real header stays a normal solid bar on every other page
   (see .main-header--three:not(.sticky-header--cloned) in
   header-custom.css). On the home page only, parts/header.php also adds
   .main-header--floating; the header is split into THREE separate rounded
   pills (logo alone, nav alone, utility buttons alone) with the hero image
   visible in the gaps between them, rather than one bar spanning the full
   width. .main-header__group wraps each piece for this purpose — it's
   `display:contents` everywhere by default (invisible to layout, so every
   other page/state is unaffected) and only becomes a real flex/pill box
   here. The scroll-cloned copy (.sticky-header--cloned) is excluded so the
   header still becomes a normal solid bar once the user scrolls past the
   hero, matching the pattern already used for the non-floating case. */
.main-header__group {
    display: contents;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) {
    position: absolute;
    top: 44px;
    left: 20px;
    right: 20px;
    width: auto;
    z-index: 20;
    margin: 0;
    background: none;
    box-shadow: none;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__inner {
    justify-content: space-between;
    padding: 0;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__group--logo,
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__group--nav,
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__right {
    display: flex;
    align-items: center;
    height: 64px;
    background-color: rgba(255, 255, 255, .97);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__group--logo {
    padding-inline: 14px;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__group--nav {
    padding-inline: 28px;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__right {
    padding-inline: 22px;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-menu .main-menu__list > li {
    padding-top: 14px;
    padding-bottom: 14px;
}
/* The logo image otherwise renders at a fixed 72px tall (matching the
   admin header's tile size) with zero padding on this variant — taller
   than the 64px pill itself, so it visually broke out of the rounded
   shape. Shrink it and give it real breathing room instead. */
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__logo {
    padding-block: 8px;
    padding-inline: 0;
    justify-content: center;
}
.main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__logo .brand-mark__img {
    height: 48px;
    max-width: 150px;
    /* The uploaded logo file is a solid white square (not a transparent
       PNG), so it otherwise shows as a visible white chip on top of the
       pill's own near-white background. Multiply blend makes white pixels
       disappear into whatever's behind them while keeping the dark
       linework, without needing a re-exported transparent logo. */
    mix-blend-mode: multiply;
}
/* The nav links themselves collapse into the hamburger menu below 1200px
   (see .main-menu .main-menu__list in travhub.css) — without this, its
   pill wrapper kept rendering as an empty floating oval with nothing in it. */
@media (max-width: 1199px) {
    .main-header--three.main-header--floating:not(.sticky-header--cloned) .main-header__group--nav {
        display: none;
    }
}
@media (max-width: 991px) {
    .main-header--three.main-header--floating:not(.sticky-header--cloned) {
        top: 28px;
        left: 20px;
        right: 20px;
    }
}