/* ==========================================================================
   Orvix Travel Key — project overrides
   Loaded after main.css so these rules win without touching the vendor file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — transparent over the hero photo, so the nav goes white.
   Once .fixed-header lands (light background) it reverts to the navy default.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Preloader wordmark — "Orvix Travel Key" instead of the template's "Travelor".
   main.css only staggers :nth-child(2)–(8); the longer name needs 9–16, and a
   smaller face so 16 glyphs fit on narrow screens.
   -------------------------------------------------------------------------- */
.loading-screen .animation-preloader .txt-loading {
    font-size: clamp(1.5rem, 6vw, 3.4rem);
    white-space: nowrap;
}

/* Word gap between Orvix / Travel / Key */
.loading-screen .animation-preloader .txt-loading .letters-loading--space {
    width: 0.34em;
    display: inline-block;
}

.loading-screen .animation-preloader .txt-loading .letters-loading--space:before {
    content: none;
    animation: none;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(9):before  { animation-delay: 1.6s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(10):before { animation-delay: 1.8s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(11):before { animation-delay: 2.0s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(12):before { animation-delay: 2.2s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(13):before { animation-delay: 2.4s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(14):before { animation-delay: 2.6s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(15):before { animation-delay: 2.8s; }
.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(16):before { animation-delay: 3.0s; }

/* --------------------------------------------------------------------------
   Header states
   Transparent over a dark hero  -> reversed logo, white nav, white CTA.
   .fixed-header (light bar)     -> brand-colour logo, navy nav, navy CTA.
   -------------------------------------------------------------------------- */
.header .logo .link {
    display: inline-flex;
    align-items: center;
}

.header .logo .brand-logo {
    height: 52px;
    width: auto;
}

/* Brand-colour mark is the default on every top-level page, including over
   the hero. A soft dark shadow gives the navy wordmark edge definition
   against the photography. */
.header .logo .brand-logo--light {
    display: none;
}

.header .logo .brand-logo--dark {
    display: block;
}

/* Sticky bar is light — the mark stands on its own */
.header.fixed-header .logo .brand-logo--dark {
    filter: none;
}

/* Privacy / Terms: solid navy hero, so the reversed mark is used until the
   sticky bar appears and the background turns light. */
.header--navy-hero .logo .brand-logo--light {
    display: block;
}

.header--navy-hero .logo .brand-logo--dark {
    display: none;
}

.header--navy-hero.fixed-header .logo .brand-logo--light {
    display: none;
}

.header--navy-hero.fixed-header .logo .brand-logo--dark {
    display: block;
}

/* ----- nav ----- */
.header.header-two .header-menu .nav-menu > .nav-menu__item > .nav-menu__link {
    color: var(--main-600);
    text-shadow: none;
    font-weight: 500;
}

.header.header-two .header-menu .nav-menu > .nav-menu__item > .nav-menu__link:hover,
.header.header-two .header-menu .nav-menu > .nav-menu__item.activePage > .nav-menu__link {
    color: hsl(var(--main-two-h), var(--main-two-s), 42%);
}

.header.header-two.fixed-header .header-menu .nav-menu > .nav-menu__item > .nav-menu__link {
    color: var(--main-600);
    text-shadow: none;
}

.header.header-two.fixed-header .header-menu .nav-menu > .nav-menu__item > .nav-menu__link:hover,
.header.header-two.fixed-header .header-menu .nav-menu > .nav-menu__item.activePage > .nav-menu__link {
    color: hsl(var(--main-two-h), var(--main-two-s), 42%);
}

/* ----- hamburger ----- */
.header.header-two .toggle-mobileMenu {
    color: var(--main-600);
}

.header.header-two.fixed-header .toggle-mobileMenu {
    color: var(--main-600);
}

/* ----- "Plan your journey" ----- */
.header.header-two .header-button .primary-btn {
    box-shadow: 0 6px 20px rgba(0, 18, 36, 0.22);
}

.header.header-two .header-button .primary-btn:hover {
    background-color: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l)) !important;
    color: var(--main-600) !important;
}

/* ----- hairline ----- */
.header.header-two {
    border-bottom: 1px solid rgba(0, 35, 66, 0.10);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.header.header-two.fixed-header {
    border-bottom-color: rgba(0, 35, 66, 0.10);
}

/* --------------------------------------------------------------------------
   Inner-page breadcrumb hero (about, contact, …)
   The stock template used a pale photo with dark type; the new photography is
   bright and high-contrast, so the title and the white nav both need a scrim.
   -------------------------------------------------------------------------- */
.breadcrumb-area {
    position: relative;
    z-index: 1;
    padding: clamp(180px, 22vh, 250px) 0 clamp(110px, 16vh, 180px);
}

.breadcrumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* Header zone: a short light band in PIXELS, not a share of the hero.
           170px covers the bar and fades out before any headline, so warm
           photography no longer gets washed out down the whole upper third. */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0px,
            rgba(255, 255, 255, 0.84) 30px,
            rgba(255, 255, 255, 0.74) 55px,
            rgba(255, 255, 255, 0.58) 80px,
            rgba(255, 255, 255, 0.40) 105px,
            rgba(255, 255, 255, 0.24) 128px,
            rgba(255, 255, 255, 0.11) 148px,
            rgba(255, 255, 255, 0.04) 162px,
            rgba(255, 255, 255, 0) 178px),
        linear-gradient(180deg,
            rgba(0, 18, 36, 0) 150px,
            rgba(0, 18, 36, 0.22) 240px,
            rgba(0, 18, 36, 0.42) 55%,
            rgba(0, 18, 36, 0.56) 100%);
}

.breadcrumb-title {
    color: #fff;
    /* the template hard-codes 200px + nowrap, which runs off-screen */
    font-size: clamp(38px, 6.6vw, 104px);
    line-height: 1.02;
    white-space: normal;
    text-shadow: 0 6px 30px rgba(0, 18, 36, 0.5);
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Footer trust strips — "We Accept" + accreditations
   Dark panels in the reference style. Tiles fall back to a labelled
   placeholder until the approved logo file is dropped into
   assets/images/trust/ (see application/config/trustmarks.php).
   -------------------------------------------------------------------------- */
.trust-strips {
    display: grid;
    /* "We Accept" only needs to fit its strip; accreditations take the rest */
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

@media screen and (max-width: 1199px) {
    .trust-strips {
        grid-template-columns: minmax(0, 1fr);
    }
}

.trust-strip {
    background: hsl(var(--main-h), var(--main-s), 11%);
    border-radius: 14px;
    padding: 18px 22px 20px;
}

.trust-strip__label {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
}

.trust-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Accreditations run as a single row, scrolling rather than wrapping if tight */
.trust-strip--marks .trust-strip__list {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.trust-strip--marks .trust-strip__list::-webkit-scrollbar {
    display: none;
}

.trust-strip--marks .trust-badge {
    flex: 0 0 auto;
}

.trust-strip--marks {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1439px) {
    .trust-strip--marks .trust-strip__list { --badge-scale: 0.86; gap: 11px; }
}

@media screen and (max-width: 1199px) {
    .trust-strip--marks .trust-strip__list { --badge-scale: 1; gap: 14px; }
}

/* --- accreditation badges: artwork sits flush on the panel --- */
.trust-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trust-badge img {
    width: auto;
    display: block;
    /* per-logo height from the view, scaled down on narrower viewports so the
       row keeps to a single line instead of scrolling */
    height: calc(var(--badge-h, 48px) * var(--badge-scale, 1));
}

/* Single supplied strip holds every payment mark */
.trust-strip__payments {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 46px;
}

.trust-badge__name {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.trust-badge__ref {
    color: hsl(var(--main-two-h), var(--main-two-s), 62%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Awaiting approved artwork — only these keep an outline, so it reads as a
   reserved slot rather than a broken image. */
.trust-tile--pending,
.trust-badge--pending {
    min-height: 40px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.trust-badge--pending {
    min-height: 62px;
    min-width: 96px;
}

.trust-tile--pending .trust-tile__name,
.trust-badge--pending .trust-badge__name {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Testimonials — destination + agent replace the old company logo
   -------------------------------------------------------------------------- */
.testimonial-stars {
    display: flex;
    gap: 3px;
    color: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    font-size: 16px;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
}

.testimonial-meta i {
    color: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    font-size: 16px;
}

/* Quotes vary in length; keep every card the same height */
.testimonial-two-paragraph {
    min-height: 132px;
}

@media screen and (max-width: 767px) {
    .testimonial-two-paragraph {
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
   Tour packages grid
   -------------------------------------------------------------------------- */
.package-card {
    box-shadow: 0 10px 30px rgba(0, 20, 40, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 20, 40, 0.13);
}

.package-card__thumb {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.package-card__thumb img {
    aspect-ratio: 7 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.package-card:hover .package-card__thumb img {
    transform: scale(1.06);
}

/* Corner ribbon — Featured / Popular / Holiday */
.package-card__badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--heading-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 20, 40, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.package-card__badge--featured {
    background: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    color: var(--main-600);
}

.package-card__badge--popular {
    background: #20b8d4;
    color: #04222b;
}

.package-card__rating {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--main-600);
    font-size: 12px;
    font-weight: 700;
}

.package-card__rating i {
    color: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
}

.package-card__title {
    line-height: 1.2;
}

.package-card__includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.package-card__includes li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-600);
}

.package-card__includes i {
    color: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    font-size: 15px;
}

.package-grid__note {
    color: var(--neutral-600);
    font-size: 15px;
}

.package-grid__note a {
    color: var(--main-600);
    font-weight: 600;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero / banner — full-viewport treatment
   -------------------------------------------------------------------------- */
.banner-two-area {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block-start: clamp(120px, 15vh, 185px);
    padding-block-end: clamp(150px, 21vh, 240px);
    position: relative;
}

.banner-two-area .container {
    width: 100%;
}

/* Background photo fills the whole hero instead of a fixed 910px strip */
.banner-two-bg {
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Video variant: poster paints instantly, the clip covers the hero like a bg */
.banner-two-bg--video {
    overflow: hidden;
    background-image: url("../images/banner/banner-video-poster.jpg");
}

.banner-two-bg--video .banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Respect a reduced-motion preference: hold on the poster instead of looping */
@media (prefers-reduced-motion: reduce) {
    .banner-two-bg--video .banner-video {
        display: none;
    }
}

/* Scrim: darkens the photo so white type stays readable at any crop */
.banner-two-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Header zone: a short light band in PIXELS, not a share of the hero.
           170px covers the bar and fades out before any headline, so warm
           photography no longer gets washed out down the whole upper third. */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0px,
            rgba(255, 255, 255, 0.84) 30px,
            rgba(255, 255, 255, 0.74) 55px,
            rgba(255, 255, 255, 0.58) 80px,
            rgba(255, 255, 255, 0.40) 105px,
            rgba(255, 255, 255, 0.24) 128px,
            rgba(255, 255, 255, 0.11) 148px,
            rgba(255, 255, 255, 0.04) 162px,
            rgba(255, 255, 255, 0) 178px),
        /* Dark scrim begins below the band so the white headline keeps contrast */
        linear-gradient(180deg,
            rgba(0, 20, 40, 0) 150px,
            rgba(0, 20, 40, 0.18) 230px,
            rgba(0, 20, 40, 0.30) 45%,
            rgba(0, 20, 40, 0.46) 72%,
            rgba(0, 20, 40, 0.60) 100%),
        radial-gradient(80% 70% at 50% 62%, rgba(0, 0, 0, 0) 0%, rgba(0, 20, 40, 0.30) 100%);
}

/* ----- Hero content ----- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    margin-block-end: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-badge i {
    color: hsl(var(--main-two-h), var(--main-two-s), 62%);
    font-size: 16px;
}

.banner-two-area .banner-two-title {
    color: #fff;
    font-size: clamp(44px, min(8.5vw, 12.5vh), 132px);
    line-height: 0.92;
    margin-block-end: 22px;
    text-shadow: 0 6px 34px rgba(0, 18, 36, 0.45);
}

/* Drop the old white slab behind the italic word — gold script reads better on photo */
.banner-two-area .banner-two-title span {
    font-size: clamp(38px, min(7.4vw, 11vh), 116px);
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    line-height: 0.92;
    color: hsl(var(--main-two-h), var(--main-two-s), 62%);
}

.hero-lead {
    max-width: 610px;
    margin-inline: auto;
    margin-block-end: 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.6;
    text-shadow: 0 2px 16px rgba(0, 18, 36, 0.5);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-block-end: 34px;
}

/* Ghost/secondary CTA next to the gold primary button */
.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 19px 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hero-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: hsl(var(--main-h), var(--main-s), var(--main-l));
}

/* ----- Trust strip (ATOL / ABTA / IATA) ----- */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-trust li i {
    color: hsl(var(--main-two-h), var(--main-two-s), 62%);
    font-size: 17px;
}

/* Hairline separators between trust items */
.hero-trust li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 14px;
    margin-inline-start: 30px;
    background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   Search widget — anchored to the hero, straddling its bottom edge 50/50
   -------------------------------------------------------------------------- */
.banner-two-area .checkout-two-area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
    margin-top: 0;
    z-index: 5;
}

.banner-two-area .checkout-two-area .checkout-area {
    margin-top: 0;
}

.banner-two-area .checkout-bg {
    box-shadow: 0 24px 60px rgba(0, 20, 40, 0.18);
}

/* The half that hangs below the hero needs clearance from the next section */
.banner-two-area + .advance-area {
    padding-block-start: clamp(120px, 14vh, 180px);
}

/* The "Orvix Travel Key" band used to sit between the advance strip and the
   destinations block; with it gone the two 140px paddings stacked into a
   large empty gap, so drop the leading one. */
#destinations {
    padding-block-start: 0;
}

/* ----- Responsive ----- */

/* Short/laptop viewports: tighten so the hero still resolves within one screen */
@media screen and (max-height: 820px) and (min-width: 992px) {
    .banner-two-area {
        padding-block-start: 108px;
        padding-block-end: 124px;
    }

    .hero-badge {
        margin-block-end: 16px;
        padding: 7px 17px;
        font-size: 12px;
    }

    .banner-two-area .banner-two-title {
        margin-block-end: 16px;
    }

    .hero-lead {
        margin-block-end: 24px;
        font-size: 16px;
    }

    .hero-actions {
        margin-block-end: 26px;
    }

    .hero-actions .primary-btn,
    .hero-btn-ghost {
        padding-block: 15px;
    }
}

@media screen and (max-width: 991px) {
    .banner-two-area {
        padding-block-start: 150px;
        padding-block-end: 180px;
    }

    .hero-lead {
        font-size: 16px;
    }
}

@media screen and (max-width: 575px) {
    .banner-two-area {
        padding-block-start: 130px;
        padding-block-end: 150px;
    }

    .hero-badge {
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 8px 16px;
    }

    .hero-actions .primary-btn,
    .hero-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        gap: 10px 18px;
    }

    .hero-trust li:not(:last-child)::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Package filters (tour page)
   -------------------------------------------------------------------------- */
.pkg-filters {
    background: #fff;
    border-radius: 16px;
    padding: 28px 26px 30px;
    box-shadow: 0 10px 30px rgba(0, 20, 40, 0.06);
    position: sticky;
    top: 110px;
}

@media screen and (max-width: 991px) {
    .pkg-filters {
        position: static;
        margin-block-end: 44px;
    }
}

.pkg-filters__head {
    padding-block-end: 16px;
    border-bottom: 1px solid var(--neutral-200);
}

.pkg-filters__clear {
    color: var(--neutral-500);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.pkg-filters__clear:hover {
    color: var(--main-600);
}

.pkg-filters__group {
    margin-block-start: 26px;
}

.pkg-filters__label {
    display: block;
    font-family: var(--heading-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 10px;
}

/* Native select + our own chevron (main.js's niceSelect is removed from
   these in custom-site.js, so this styles the real control). */
/* If niceSelect ever re-wraps these, hide its div so we never show two
   controls stacked on top of each other. */
.pkg-filters div.nice-select {
    display: none !important;
}

select.pkg-filters__select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23002342' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--main-600);
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 46px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.pkg-filters__select:hover {
    border-color: var(--neutral-300);
}

select.pkg-filters__select:focus-visible {
    outline: none;
    border-color: hsl(var(--main-h), var(--main-s), 30%);
    box-shadow: 0 0 0 3px hsla(var(--main-h), var(--main-s), 30%, 0.15);
}

.pkg-facets {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 292px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
}

.pkg-facets::-webkit-scrollbar {
    width: 5px;
}

.pkg-facets::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 3px;
}

.pkg-facets a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--neutral-700);
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pkg-facets a:hover {
    background: var(--neutral-100);
    color: var(--main-600);
}

.pkg-facets a.is-active {
    background: hsl(var(--main-h), var(--main-s), var(--main-l));
    color: #fff;
    font-weight: 600;
}

.pkg-facets span {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--neutral-100);
    color: var(--neutral-600);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.pkg-facets a.is-active span {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.pkg-filters button[type="submit"] {
    margin-block-start: 28px;
}

.pkg-results__count { color: var(--neutral-600); font-size: 15px; }
.pkg-results__count strong { color: var(--main-600); }

.pkg-empty i { font-size: 54px; color: var(--neutral-400); display: block; margin-block-end: 14px; }
.pkg-empty p { color: var(--neutral-600); }

/* --------------------------------------------------------------------------
   Destination cards
   -------------------------------------------------------------------------- */
.dest-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 20, 40, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dest-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 20, 40, 0.14); }

.dest-card__media { display: block; overflow: hidden; }

.dest-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dest-card:hover .dest-card__media img { transform: scale(1.07); }

.dest-card__body { display: block; padding: 18px 20px 22px; text-align: center; }

.dest-card__name {
    display: block;
    font-family: var(--heading-font);
    font-size: 22px;
    color: var(--main-600);
    margin-block-end: 4px;
}

.dest-card__meta { display: block; color: var(--neutral-600); font-size: 14px; }

.breadcrumb-crumbs { color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.breadcrumb-crumbs a { color: #fff; text-decoration: underline; }
.breadcrumb-crumbs span { margin: 0 8px; opacity: 0.6; }

/* --------------------------------------------------------------------------
   Package card footer — price + Enquire CTA
   The template's plain text link gave no affordance and sat misaligned
   against the two-line price block.
   -------------------------------------------------------------------------- */
.package-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.package-card__foot .service-two-price {
    line-height: 1.15;
}

.package-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 999px;
    background: hsl(var(--main-h), var(--main-s), var(--main-l));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.package-card__cta i {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.package-card__cta:hover {
    background: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    color: hsl(var(--main-h), var(--main-s), var(--main-l));
    box-shadow: 0 8px 20px hsla(var(--main-two-h), var(--main-two-s), var(--main-two-l), 0.35);
    transform: translateY(-2px);
}

.package-card__cta:hover i {
    transform: translate(2px, -2px);
}

.package-card__cta:focus-visible {
    outline: 2px solid hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    outline-offset: 3px;
}

/* Narrow cards: let the button take the full width rather than crowd the price */
@media screen and (max-width: 400px) {
    .package-card__foot {
        align-items: stretch;
    }

    .package-card__cta {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Compact package card
   The stock proportions (7:5 image, 32px title, roomy padding) made each card
   ~640px tall. Tightening every band brings three across without scrolling,
   and a fixed title box keeps one-line and two-line names aligned.
   -------------------------------------------------------------------------- */
.package-card {
    padding: 12px !important;
}

.package-card__thumb {
    margin-block-end: 14px !important;
}

.package-card__thumb img {
    aspect-ratio: 16 / 10;
}

.package-card__badge {
    top: 10px;
    inset-inline-start: 10px;
    padding: 5px 11px;
    font-size: 10px;
}

.package-card__rating {
    top: 10px;
    inset-inline-end: 10px;
    padding: 5px 10px;
    font-size: 11px;
}

.package-card__body {
    padding-inline: 6px !important;
}

.package-card .service-two-location {
    font-size: 13px;
    margin-block-end: 2px;
}

.package-card__title {
    font-size: 21px !important;
    line-height: 1.24;
    margin-block-end: 10px !important;
    /* two lines' worth, so cards in a row line up whatever the name length */
    min-height: calc(21px * 1.24 * 2);
    display: flex;
    align-items: flex-start;
}

.package-card__includes {
    gap: 5px 12px;
    margin-block-end: 12px;
}

.package-card__includes li {
    font-size: 12px;
}

.package-card__includes i {
    font-size: 13px;
}

.package-card .service-two-wrap {
    padding: 12px 14px !important;
}

.package-card .service-two-star {
    padding-block-end: 10px !important;
    margin-block-end: 10px !important;
    gap: 12px !important;
    font-size: 13px;
}

.package-card .service-two-price h6 {
    font-size: 21px;
    margin-block-end: 0;
}

.package-card .service-two-price p {
    font-size: 12px;
    margin-block-end: 0;
}

.package-card__cta {
    padding: 10px 18px;
    font-size: 12px;
}

@media screen and (max-width: 575px) {
    .package-card__title {
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
   Privacy / Terms heroes are a solid navy panel, so the brand-colour logo
   (navy wordmark) disappears into it and only the gold elements survive.
   Give them the same light band the photo heroes get, so one logo and one
   nav colour work across every page.
   -------------------------------------------------------------------------- */


/* Privacy / Terms keep a dark bar, so their nav stays reversed */
.header--navy-hero .header-menu .nav-menu > .nav-menu__item > .nav-menu__link,
.header--navy-hero .toggle-mobileMenu {
    color: #fff;
}

.header--navy-hero.fixed-header .header-menu .nav-menu > .nav-menu__item > .nav-menu__link,
.header--navy-hero.fixed-header .toggle-mobileMenu {
    color: var(--main-600);
}

.header--navy-hero {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}