/* ---------------------------------------------------------------------------
   Country tabs for the "Popular Trips" package grids
   --------------------------------------------------------------------------- */

.country-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    margin: 0 auto 44px;
    padding: 0 16px;
    max-width: 1100px;
}

.country-tab {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(40, 19, 33, 0.22);
    border-radius: 999px;
    padding: 13px 26px;
    cursor: pointer;
    font-family: europa, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3a2732;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(40, 19, 33, 0.05);
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.country-tab:hover,
.country-tab:focus-visible {
    border-color: #281321;
    color: #281321;
    box-shadow: 0 4px 12px rgba(40, 19, 33, 0.12);
    transform: translateY(-1px);
}

.country-tab:focus-visible {
    outline: 2px solid #281321;
    outline-offset: 2px;
}

.country-tab.is-active {
    background: #281321;
    border-color: #281321;
    color: #fff;
    box-shadow: 0 6px 16px rgba(40, 19, 33, 0.22);
}

/* The count sits in its own chip so it reads as a number, not part of the name */
.country-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin: 0;
    border-radius: 999px;
    background: rgba(40, 19, 33, 0.08);
    color: #3a2732;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color .22s ease, color .22s ease;
}

.country-tab.is-active .country-tab__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Cards hidden by the active tab */
.listing-card.is-filtered-out {
    display: none !important;
}

.country-tabs-empty {
    display: none;
    text-align: center;
    padding: 30px 16px 10px;
    color: #6b5a64;
    font-family: europa, sans-serif;
}

.country-tabs-empty.is-visible {
    display: block;
}

@media (max-width: 768px) {
    .country-tabs {
        gap: 8px;
        margin-bottom: 26px;
        /* one scrollable row rather than a stack of wrapped pills */
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .country-tabs::-webkit-scrollbar {
        display: none;
    }

    .country-tab {
        flex: 0 0 auto;
        padding: 11px 18px;
        font-size: 12px;
        letter-spacing: 1px;
        gap: 8px;
    }

    .country-tab__count {
        min-width: 19px;
        height: 19px;
        font-size: 10px;
    }
}

/* "View all packages" button under the home page grid */
.packages-view-all {
    display: flex;
    justify-content: center;
    padding: 46px 16px 10px;
}

.packages-view-all__link {
    display: inline-block;
    padding: 15px 42px;
    border: 1px solid #281321;
    border-radius: 999px;
    font-family: europa, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    color: #281321;
    transition: background-color .25s ease, color .25s ease;
}

.packages-view-all__link:hover,
.packages-view-all__link:focus-visible {
    background: #281321;
    color: #fff;
    text-decoration: none;
}

/* Archive page: the grid is the whole page, so give it room to breathe */
.packages-archive {
    padding-top: 60px;
    padding-bottom: 40px;
}

.packages-archive .no-packages {
    list-style: none;
    text-align: center;
    padding: 40px 16px;
    color: #6b5a64;
    font-family: europa, sans-serif;
}

@media (max-width: 768px) {
    .packages-view-all {
        padding-top: 32px;
    }

    .packages-view-all__link {
        padding: 13px 30px;
        font-size: 12px;
    }

    .packages-archive {
        padding-top: 36px;
    }
}

/* ---------------------------------------------------------------------------
   Packages archive hero
   --------------------------------------------------------------------------- */

.packages-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    padding: 90px 20px;
    overflow: hidden;
    text-align: center;
}

.packages-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.packages-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(40, 19, 33, 0.35) 0%, rgba(40, 19, 33, 0.62) 100%);
}

.packages-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    width: 100%;
    color: #fff;
}

.packages-hero__eyebrow {
    margin: 0 0 14px;
    font-family: europa, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.packages-hero__title {
    margin: 0;
    color: #fff;
    font-size: 52px;
    line-height: 1.15;
}

.packages-hero__text {
    margin: 18px auto 0;
    max-width: 620px;
    font-family: europa, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 768px) {
    .packages-hero {
        min-height: 320px;
        padding: 64px 16px;
    }

    .packages-hero__title {
        font-size: 30px;
    }

    .packages-hero__text {
        font-size: 15px;
        margin-top: 12px;
    }

    .packages-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }
}

/* ---------------------------------------------------------------------------
   Archive CTA
   These rules live in g2.css, which header.php does not load, so the archive
   carries its own copy rather than pulling in that whole stylesheet.
   --------------------------------------------------------------------------- */

.packages-archive-cta {
    padding: 40px 20px 70px;
    background-color: #fbfbfb;
}

.packages-archive-cta .cta-premium-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 46px 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
}

.packages-archive-cta .cta-premium-card h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1B1B1B;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.packages-archive-cta .cta-premium-card p {
    font-size: 18px;
    color: #666;
    margin: 0 auto 36px;
    line-height: 1.6;
    max-width: 500px;
    font-family: europa, sans-serif;
}

.packages-archive-cta .btn-premium-action {
    display: inline-block;
    background: #501131;
    color: #fff;
    padding: 20px 50px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none !important;
}

.packages-archive-cta .btn-premium-action:hover {
    background: #3d0d26;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(80, 17, 49, 0.25);
    color: #fff;
}

@media (max-width: 768px) {
    .packages-archive-cta .cta-premium-card {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .packages-archive-cta .cta-premium-card h2 {
        font-size: 21px;
    }

    .packages-archive-cta .cta-premium-card p {
        font-size: 15px;
        margin-bottom: 26px;
    }

    .packages-archive-cta .btn-premium-action {
        padding: 16px 32px;
        font-size: 13px;
    }
}

/* ---------------------------------------------------------------------------
   Package card: feature list
   eve.css (loaded by header-two.php, so on single package pages) styles .caret
   as a Bootstrap dropdown triangle - display:inline-block with width:0, height:0
   and a 4px border. Applied to the <li> holding a package's features that
   collapses the item to nothing, so the text spills out and overlaps the card
   title. Reset it inside the card; the "›" separator from g.css still applies.
   --------------------------------------------------------------------------- */

.listing-card .l-pack .caret {
    width: auto;
    height: auto;
    margin-left: 0;
    vertical-align: baseline;
    border: 0;
}

/* Card text sits on a photo, so it is always white. Stated explicitly because
   the heading colours in eve.css / g.css differ between the two headers, and
   the inherited .text-white on the wrapper loses to a rule that names h4. */
.listing-card .split,
.listing-card .split h4,
.listing-card .split h5,
.listing-card .split .caret,
.listing-card .price-section,
.listing-card .price-section p,
.listing-card .price-section h3 {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Footer clearance for the floating WhatsApp button
   The button is position:fixed at bottom:2rem/left:1rem with z-index 9999, so
   on a phone it sits on top of the last footer row ("Our Partners", the
   copyright and "Privacy").

   The spacing goes on .footer_last-block, inside the footer, rather than on
   .section_footer: that section carries no background of its own, so padding
   there shows the page background as a pale band under the dark footer.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .footer_last-block {
        padding-bottom: 120px;
    }

    /* Keep the bottom row above the button if they ever meet */
    .footer_navlinks-grid._2-0 {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    .footer_last-block {
        padding-bottom: 110px;
    }
}

/* ---------------------------------------------------------------------------
   Header language switcher
   A native <select>, so the list is drawn by the browser and can never be
   clipped by the header or open off the top of the screen the way the
   plugin's own widget did.
   --------------------------------------------------------------------------- */

.grand-lang-switcher {
    display: inline-flex;
    align-items: center;
    margin-left: 26px;
    position: relative;
    /* above the nav list, which is absolutely positioned and runs across */
    z-index: 6;
}

/* Pin the switcher near the window's right edge.
   .menu-desktop__bar is centred at 83.33% wide, capped at 75rem, and the nav
   list inside it is absolutely positioned and overruns that edge. Sitting at
   the bar's edge therefore lands on "About us". These offsets pull the
   switcher out into the page margin instead, so it always clears the links:

     below 1440px  the bar is 83.33vw, so the margin each side is 8.335vw
     from 1440px   the bar is a fixed 75rem, so the margin is (100vw - 75rem)/2
*/
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .grand-lang-switcher--desktop {
        margin-right: calc(12px - 8.335vw);
    }
}

@media (min-width: 1440px) {
    .grand-lang-switcher--desktop {
        margin-right: calc(18px - (100vw - 75rem) / 2);
    }
}

.grand-lang-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    /* chevron, in the brand gold */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C9A96E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border: 1px solid rgba(201, 169, 110, 0.55);
    border-radius: 999px;
    color: #C9A96E;
    cursor: pointer;
    font-family: europa, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
    padding: 8px 24px 8px 11px;
    /* compact, so it clears the last nav item */
    max-width: 112px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grand-lang-select:hover,
.grand-lang-select:focus {
    border-color: #C9A96E;
    background-color: rgba(201, 169, 110, 0.14);
    color: #e3c88f;
    outline: none;
}

/* The list itself is the browser's, so it needs readable colours of its own */
.grand-lang-select option {
    background: #24101e;
    color: #f3ede3;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}

/* The plugin widget still has to be in the DOM to load the translate script,
   but it must not be seen. Kept clipped rather than display:none so it still
   initialises. */
.grand-lang-engine {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Google's injected banner shifts the whole page down; suppress it */
body > .skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

@media (max-width: 1023px) {
    .grand-lang-switcher {
        margin-left: 10px;
    }

    .grand-lang-select {
        font-size: 10px;
        padding: 8px 22px 8px 10px;
        max-width: 96px;
    }
}