/* ============================================================
   GOES BALI TRAVEL — Global Stylesheet v1.0
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap");

:root {
    --primary: #79b266;
    --primary-dark: #5d9450;
    --primary-light: #a3cc92;
    --secondary: #fbb040;
    --secondary-dark: #e09530;
    --dark: #1a1f16;
    --gray: #6b7563;
    --light: #f5f7f3;
    --white: #ffffff;
    --shadow: 0 4px 24px rgba(26, 31, 22, 0.1);
    --shadow-lg: 0 12px 48px rgba(26, 31, 22, 0.16);
    --r: 12px;
    --r-lg: 20px;
    --r-xl: 24px;
    --t: 0.25s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "DM Sans", sans-serif;
    background: var(--white);
    color: var(--dark);
    overflow-x: hidden;
    line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: "Cormorant Garamond", serif;
    line-height: 1.15;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    max-width: 100%;
    display: block;
}
ul,
ol {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.section-pad {
    padding: 80px 0;
}
.text-center {
    text-align: center;
}
.text-center .section-sub {
    margin: 0 auto;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(122, 180, 103, 0.1);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.section-title {
    font-size: clamp(1.9rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
}
.section-title span,
.section-title em {
    color: var(--primary);
}
.section-title em {
    font-style: italic;
}
.section-sub {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.7;
    max-width: 520px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--r);
    border: none;
    font-family: "DM Sans", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t);
}
.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(122, 180, 103, 0.35);
}
.btn-secondary {
    background: var(--secondary);
    color: var(--dark);
}
.btn-secondary:hover {
    background: var(--secondary-dark);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-outline:hover {
    background: var(--primary);
    color: white;
}
.btn-white {
    background: white;
    color: var(--primary);
}
.btn-white:hover {
    background: var(--light);
}
.btn-outline-white {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.45);
}
.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}
.btn-sm {
    padding: 9px 18px;
    font-size: 0.85rem;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(122, 180, 103, 0.12);
    transition: box-shadow 0.3s;
}
.navbar.scrolled {
    box-shadow: var(--shadow);
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
.nav-logo {
    display: flex;
    align-items: center;
}
/* One logo at every width — the icon-only variant made the brand read differently
   on a phone than on a desktop. It scales down instead of being swapped out. */
.nav-logo-full {
    height: 80px;
    max-height: 100%;
    width: auto;
    display: block;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-links a {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray);
    transition: all var(--t);
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
    background: rgba(122, 180, 103, 0.08);
}
.nav-cta {
    background: var(--primary) !important;
    color: white !important;
    border-radius: 10px !important;
}
.nav-cta:hover {
    background: var(--primary-dark) !important;
}
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}
.nav-hamburger span {
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    display: block;
    transition: 0.3s;
}
.nav-mobile {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    padding: 12px 24px 20px;
    box-shadow: var(--shadow);
    z-index: 999;
    flex-direction: column;
    gap: 4px;
}
.nav-mobile.open {
    display: flex;
}
.nav-mobile a {
    padding: 11px 14px;
    border-radius: 8px;
    font-weight: 500;
    color: var(--gray);
    transition: 0.2s;
}
.nav-mobile a:hover,
.nav-mobile a.active {
    background: var(--light);
    color: var(--primary);
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Preference switcher (language + currency) */
.pref-switcher {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--light);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 0.75rem;
}
.pref-lang {
    color: var(--gray);
    font-weight: 600;
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 10px;
    transition: color 0.15s;
}
.pref-lang:hover {
    color: var(--primary);
}
.pref-lang.pref-active {
    color: var(--primary);
}
.pref-sep {
    color: var(--gray);
    font-size: 0.7rem;
}
.pref-curr {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s;
}
.pref-curr:hover {
    color: var(--primary);
}
.pref-curr-option {
    display: block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--dark);
    text-decoration: none;
}
.pref-curr-option:hover {
    background: var(--light);
}
.pref-curr-option.pref-active {
    font-weight: 700;
    color: var(--primary);
}

/* PAGE HERO */
.page-hero {
    padding: 140px 0 80px;
    background: linear-gradient(135deg, #1a1f16 0%, #2c3d22 100%);
    position: relative;
    overflow: hidden;
}
/* Visuals live in the BRAND ORNAMENTS block at the end of this file. */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
}
.page-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.page-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    color: white;
    margin-bottom: 16px;
}
.page-hero h1 em {
    color: var(--secondary);
    font-style: italic;
}
.page-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
    margin: 0 auto;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.breadcrumb a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}
.breadcrumb a:hover {
    color: white;
}
.breadcrumb .sep {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}
.breadcrumb .current {
    font-size: 0.8rem;
    color: var(--secondary);
}
/* The base colours above are tuned for the dark .page-hero. On a white background the
   links were white-on-white and effectively invisible — the package detail page showed
   two bare separators where Home and Paket Travel should have been. */
.breadcrumb-on-light a {
    color: var(--gray);
}
.breadcrumb-on-light a:hover {
    color: var(--primary);
}
.breadcrumb-on-light .sep {
    color: var(--gray);
}
.breadcrumb-on-light .current {
    color: var(--dark);
}

/* PACKAGE CARD */
.pkg-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}
.pkg-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.pkg-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}
.pkg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.pkg-card:hover .pkg-img img {
    transform: scale(1.07);
}
.pkg-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--secondary);
    color: var(--dark);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}
.pkg-body {
    padding: 22px;
}
.pkg-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.pkg-loc,
.pkg-dur {
    font-size: 0.78rem;
    color: var(--gray);
}
.pkg-dur {
    margin-left: auto;
}
.pkg-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
}
.pkg-card h3 a {
    color: inherit;
    transition: color 0.2s;
}
.pkg-card h3 a:hover {
    color: var(--primary);
}
.pkg-desc {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 16px;
}
.pkg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--light);
    padding-top: 14px;
}
.pkg-price .from {
    font-size: 0.7rem;
    color: var(--gray);
}
.pkg-price .amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--primary);
}
.pkg-price .per {
    font-size: 0.7rem;
    color: var(--gray);
}
.pkg-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}
.pkg-rating .star {
    color: var(--secondary);
}

/* PAGINATION */
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1.5px solid var(--light);
    background: white;
    color: var(--dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        border-color 0.2s,
        background 0.2s,
        color 0.2s;
    line-height: 1;
}
.pg-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}
.pg-current {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(122, 180, 103, 0.35);
}
.pg-current:hover {
    background: var(--primary);
    color: white;
}
.pg-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.pg-dots {
    border-color: transparent;
    background: transparent;
    color: var(--gray);
    cursor: default;
}

/* CATEGORY FILTER ROW + CHIPS */
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 15px;
    border-radius: 20px;
    border: 1.5px solid var(--light);
    background: white;
    color: var(--gray);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
    line-height: 1;
}
.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}
.filter-btn.active {
    background: var(--btn-active-color, var(--primary));
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 10px rgba(122, 180, 103, 0.3);
}
.filter-btn .cat-icon {
    font-size: 0.88em;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.05em;
}

/* FORM */
.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--light);
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.9rem;
    color: var(--dark);
    background: var(--light);
    transition:
        border 0.2s,
        background 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* CTA */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        var(--primary-dark) 100%
    );
    position: relative;
    overflow: hidden;
}
/* Visuals live in the BRAND ORNAMENTS block at the end of this file. */
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
}
.cta-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}
.cta-inner h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    color: white;
    margin-bottom: 16px;
}
.cta-inner p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* FOOTER */
footer {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.65);
}
.footer-main {
    padding: 64px 0 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}
.footer-brand .nav-logo-text {
    color: white;
}
.footer-desc {
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 5px 0 24px;
}
.footer-socials {
    display: flex;
    gap: 10px;
}
.footer-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}
.footer-social-btn:hover {
    background: var(--primary);
}
.footer-col h4 {
    font-family: "DM Sans", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-col ul li a {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s;
}
.footer-col ul li a:hover {
    color: var(--primary-light);
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
}
.footer-bottom a {
    color: var(--primary-light);
}

/* WA FLOAT */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
}
.wa-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s;
}
.wa-btn:hover {
    transform: scale(1.1);
}
.wa-btn svg {
    width: 28px;
    height: 28px;
    fill: white;
}

/* ANIMATIONS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.anim {
    opacity: 0;
}
.anim.visible {
    animation: fadeUp 0.65s ease both;
}
.anim-d1 {
    animation-delay: 0.1s;
}
.anim-d2 {
    animation-delay: 0.2s;
}
.anim-d3 {
    animation-delay: 0.3s;
}
.anim-d4 {
    animation-delay: 0.4s;
}

/* RESPONSIVE LAYOUT UTILITIES */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.search-card {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}
.split-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
}
.booking-aside {
    position: sticky;
    top: 90px;
    height: fit-content;
}
.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .split-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
    .booking-aside {
        position: static;
        top: auto;
    }
}
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .nav-hamburger {
        display: flex;
    }
    .nav-username {
        display: none;
    }
    .nav-logo-full {
        height: 90px;
    }
    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .cta-btns {
        flex-direction: column;
        align-items: center;
    }
    .grid-2,
    .grid-3,
    .grid-4,
    .search-card,
    .login-split {
        grid-template-columns: minmax(0, 1fr);
    }
    .login-split {
        min-height: auto;
    }
    .section-pad {
        padding: 56px 0;
    }
    .filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
        margin-bottom: 24px;
    }
    .filter-row::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND ORNAMENTS
   Supporting graphics from the brandbook. All decorative: they sit
   in ::before/::after so nothing here reaches the accessibility
   tree, and each one is anchored to bleed off an edge rather than
   float loose in the middle.
   Rule of thumb: one ornament per section, and only the divider
   is allowed to be legible — the rest stay texture.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section divider ──────────────────────────────────────────
   The Balinese curl is the strongest mark in the set, so it gets
   the one place where it reads clearly: a rule between sections. */
.brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 0;
}
.brand-divider::before,
.brand-divider::after {
    content: "";
    height: 1px;
    width: min(140px, 18vw);
    background: linear-gradient(90deg, transparent, rgba(121, 178, 102, 0.45));
}
.brand-divider::after {
    background: linear-gradient(270deg, transparent, rgba(121, 178, 102, 0.45));
}
.brand-divider img {
    /* Below roughly 50px the carved detail collapses into a blob, so this is the
       floor rather than a preference. */
    height: 58px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}
.brand-divider--light::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35));
}
.brand-divider--light::after {
    background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.35));
}

/* ── Inner page hero ──────────────────────────────────────────
   Replaces a generic Unsplash stock photo that used to load from
   an external CDN on every inner page: brand-owned, self-hosted,
   and one less third party in the critical path. */
.page-hero::before {
    background: url("../image/brand/ornament-6.webp") no-repeat;
    background-position: right -80px top -120px;
    background-size: 620px auto;
    opacity: 0.16;
}

/* ── Home hero ────────────────────────────────────────────────
   Anchored bottom-right, behind the content column, so it fills
   the empty corner without crowding the headline. */
.hero-ornament {
    position: absolute;
    right: -140px;
    bottom: -180px;
    width: 720px;
    max-width: 85vw;
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ── CTA band ─────────────────────────────────────────────────
   Was a hand-rolled radial-gradient dot grid; this is the real
   halftone from the brandbook, which fades the same direction. */
.cta-section::before {
    background-image: url("../image/brand/ornament-5.webp");
    background-repeat: no-repeat;
    /* Anchored off the right edge and rotated out of square: centred, the grid reads
       as a rigid block sitting behind the copy instead of as texture. */
    background-position: right -120px bottom -140px;
    background-size: 620px auto;
    opacity: 0.09;
}

/* ── Footer ───────────────────────────────────────────────────
   Quietest placement in the set: a single arc cropped by the
   left edge, low enough to read as paper texture. */
footer {
    position: relative;
    overflow: hidden;
}
.footer-main {
    position: relative;
    z-index: 1;
}
footer::before {
    content: "";
    position: absolute;
    left: -170px;
    bottom: -150px;
    width: 520px;
    height: 520px;
    background: url("../image/brand/ornament-2.webp") no-repeat center/contain;
    opacity: 0.06;
    pointer-events: none;
}

@media (max-width: 760px) {
    /* Ornaments are the first thing to go when space is tight. */
    .page-hero::before {
        background-size: 380px auto;
        background-position: right -110px top -70px;
    }
    .cta-section::before {
        background-size: 480px auto;
    }
    .hero-ornament {
        width: 460px;
        right: -170px;
        bottom: -140px;
        opacity: 0.07;
    }
    footer::before {
        width: 320px;
        height: 320px;
        left: -120px;
    }
    .brand-divider img {
        height: 32px;
    }
    .brand-divider::before,
    .brand-divider::after {
        width: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV & FOOTER
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer ───────────────────────────────────────────────────
   display cannot be transitioned, so toggling none/flex made the
   menu snap open with no motion at all. Kept in flow and driven by
   opacity/transform instead; visibility (which does animate as a
   stepped property) keeps it out of the tab order and the
   accessibility tree while closed. */
.nav-mobile {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.nav-mobile.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}
/* The drawer belongs to mobile only; below this it is never opened. */
@media (min-width: 769px) {
    .nav-mobile {
        display: none;
    }
}

/* ── Hamburger → close ────────────────────────────────────────
   The bars fold into a cross so the control shows its own state. */
.nav-hamburger span {
    transform-origin: center;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}
.nav-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}
.nav-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Preferences inside the drawer ────────────────────────────
   Pills rather than a dropdown: a dropdown inside a drawer needs
   two taps and can open past the viewport edge. */
.nav-mobile-prefs {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--light);
}
.nav-mobile-pref-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
}
.nav-mobile-pref-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pref-pill {
    /* 40px tall keeps every option inside a comfortable tap target. */
    min-width: 52px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--light);
    color: var(--gray);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}
.pref-pill:hover {
    color: var(--primary);
}
.pref-pill.pref-active {
    background: var(--primary);
    color: #fff;
}

@media (max-width: 768px) {
    /* Out of the top bar: with the language links and currency
       dropdown in there, the row overflowed and the hamburger was
       pushed off screen entirely. */
    .nav-actions > .pref-switcher {
        display: none;
    }
    .nav-mobile-prefs {
        display: flex;
    }
    .nav-actions {
        gap: 4px;
    }

    /* ── Footer ───────────────────────────────────────────────
       One column left three short link lists stacked down a very
       tall, sparse page. Two columns halves the height and gives
       the block a shape. */
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    /* Three link groups into two columns leaves the third stranded beside an
       empty cell. The last one spans instead and splits its own list in two,
       which closes the gap and keeps the block rectangular. */
    .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .footer-col:last-child ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
    }
    .footer-desc {
        margin-bottom: 20px;
    }
    .footer-col h4 {
        margin-bottom: 14px;
    }
    .footer-col ul {
        gap: 12px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* Very narrow phones: two columns of links start to wrap awkwardly. */
@media (max-width: 380px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-mobile,
    .nav-mobile.open,
    .nav-hamburger span {
        transition-duration: 0.01ms;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PACKAGE DETAIL — MOBILE BOOKING BAR
   ═══════════════════════════════════════════════════════════════ */

/* Desktop keeps the sticky sidebar; the bar is mobile-only. */
.pkg-bookbar {
    display: none;
}

@media (max-width: 900px) {
    .pkg-bookbar {
        display: flex;
        align-items: center;
        gap: 14px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--light);
        box-shadow: 0 -6px 24px rgba(26, 31, 22, 0.1);
        transform: translateY(110%);
        transition: transform 0.28s ease;
    }
    /* Shown only once the reader is past the top of the page and the real
       booking card is not yet in view — see main.js. */
    .pkg-bookbar.is-visible {
        transform: translateY(0);
    }
    .pkg-bookbar-price {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
    }
    .pkg-bookbar-label {
        font-size: 0.68rem;
        color: var(--gray);
    }
    .pkg-bookbar-price strong {
        font-size: 1rem;
        color: var(--primary-dark);
        white-space: nowrap;
    }
    .pkg-bookbar-cta {
        margin-left: auto;
        flex-shrink: 0;
        padding: 11px 20px;
        justify-content: center;
    }

    /* The float sat over page content — in the vehicle list it covered a price
       outright. Lifted clear of the bar, and smaller so it takes less of a
       narrow screen. */
    .wa-float {
        right: 16px;
        bottom: 88px;
    }
    .wa-btn {
        width: 48px;
        height: 48px;
    }
    /* Room for the bar so it never rests on top of the last element. */
    body.has-bookbar footer {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pkg-bookbar {
        transition-duration: 0.01ms;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PACKAGE DETAIL — TYPOGRAPHY
   Headings were hard-coded in inline styles, so they stayed at their
   desktop size on a phone. The h1 at 2.2rem left "Tour" stranded on a
   line of its own at 430px. Fluid sizes let them settle without a
   breakpoint, and balance keeps the wrap from orphaning a short word.
   ═══════════════════════════════════════════════════════════════ */
.pkg-title {
    font-size: clamp(1.65rem, 6.4vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: 16px;
    text-wrap: balance;
}
.pkg-h2 {
    font-size: clamp(1.15rem, 3.6vw, 1.3rem);
    margin-bottom: 16px;
}
.pkg-h2--wide {
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    /* The hero is a fixed 420px tall at every width, which on a phone is
       more than half the viewport before a single word of copy. */
    .pkg-hero-img {
        height: 260px !important;
    }
    /* Comfortable reading measure for the description and list items. */
    .split-sidebar article p {
        line-height: 1.7;
    }
}