/*
Theme Name: Bali Spartan Tour
Theme URI: https://balispartantour.com
Author: Bali Spartan Tour
Description: Custom lightweight theme for Bali Spartan Tour. No page builder — built for speed, SEO, GEO/AEO/AIO and WhatsApp lead generation. Heart-opening, loving travel positioning.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: balispartantour
*/

/* ==========================================================================
   0. Variables
   ========================================================================== */
:root {
    --primary: #1E3E2E;
    --primary-dark: #12271C;
    --primary-light: #EEF4F0;
    --accent: #D4AF37;
    --accent-dark: #9A7B1C;
    --accent-contrast: #F5D77F;
    --accent-hover: #C59F27;
    --accent-soft: #FDF9EC;
    --bg-sand: #F8F5F0;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-main: #1A2820;
    --text-muted: #485A50;
    --text-light: #F8F5F0;
    --border-color: #DDE5E0;
    --shadow-sm: 0 4px 12px rgba(18, 39, 28, 0.04), 0 1px 3px rgba(18, 39, 28, 0.02);
    --shadow-md: 0 10px 25px -5px rgba(18, 39, 28, 0.08), 0 8px 10px -6px rgba(18, 39, 28, 0.04);
    --shadow-lg: 0 20px 35px -10px rgba(18, 39, 28, 0.12), 0 10px 15px -5px rgba(18, 39, 28, 0.06);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-full: 9999px;
    --transition-fast: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    --font-heading: 'Fraunces', serif;
    --font-body: 'Karla', sans-serif;
}

/* ==========================================================================
   1. Reset & Global
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-sand);
    color: var(--text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul { list-style: none; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    font-weight: 700;
    line-height: 1.25;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.25rem; }

p {
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.68;
    margin-bottom: 1rem;
}

p.lead {
    font-size: 1.2rem;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.65;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 0;
    background: var(--primary-dark);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 10000;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    top: 0;
    width: auto;
    height: auto;
    clip: auto;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Panel padding for cards sitting inside a .container. Their padding stacks
   on top of the container gutter, which on a 360px screen left barely half
   the width for text — so it has to shrink on small screens. These exist as
   classes because an inline `padding` can't be overridden by a media query. */
.panel-pad { padding: 2.5rem; }
.panel-pad-sm { padding: 2rem; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.9rem;
    min-height: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(30, 62, 46, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), #0B1912);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(18, 39, 28, 0.35);
}

.btn-accent {
    background: linear-gradient(135deg, #E5C258, var(--accent));
    color: #12271C;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.32);
    font-weight: 700;
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.42);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}

.btn-outline:hover {
    background-color: var(--primary);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #1EBE5A);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32);
    font-weight: 700;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #1EBE5A, #169E4A);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.42);
}

.btn-sm {
    padding: 0.65rem 1.4rem;
    min-height: 44px;
    font-size: 0.92rem;
}

/* ==========================================================================
   3. Header / Navigation
   ========================================================================== */
.top-bar {
    background-color: var(--primary-dark);
    color: var(--text-light);
    font-size: 0.88rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-info {
    display: flex;
    gap: 1.5rem;
}

.top-bar-info span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    opacity: 0.92;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 30px rgba(18, 39, 28, 0.08);
    border-bottom-color: transparent;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 84px;
    padding: 0.75rem 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.custom-logo-link .custom-logo {
    height: 52px;
    width: auto;
    max-width: none;
}

.brand-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: var(--shadow-sm);
}

.brand-icon img { width: 28px; height: 28px; }

.brand-text .site-title {
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-weight: 700;
}

.brand-text .site-tagline {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: nowrap;
}

/* NOTE: wp_nav_menu renders this list as id="primary-menu" class="nav-menu",
   so these must key off .nav-menu — an earlier ".primary-menu" class
   selector never matched the ID and left every nav link unstyled. */
.nav-link, .nav-menu a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-main);
    position: relative;
    padding: 0.5rem 0;
    white-space: nowrap;
}

.nav-link:hover, .nav-link.active, .nav-menu a:hover, .nav-menu .current-menu-item > a {
    color: var(--primary);
}

.nav-link.active::after, .nav-menu > .current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-dark);
    border-radius: var(--radius-full);
}

/* Dropdown: "Tours" / "Blog" parent items with a sub-menu.
   Desktop: hover-revealed flyout. Mobile: always-expanded, indented inline
   list under the parent (simpler and more reliable on touch than a second
   tap-to-expand layer inside the existing mobile accordion). */
.nav-menu .menu-item-has-children > a {
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-menu .menu-item-has-children > a::after {
    content: ''; width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-top: -3px; opacity: 0.6;
}
.nav-menu .sub-menu {
    display: none;
    list-style: none;
}

@media (min-width: 1361px) {
    .nav-menu .menu-item-has-children { position: relative; }
    .nav-menu .menu-item-has-children:hover > .sub-menu,
    .nav-menu .menu-item-has-children:focus-within > .sub-menu {
        display: block;
        position: absolute; top: 100%; left: 0;
        min-width: 240px; margin-top: 0; padding: 0.75rem 0.6rem 0.6rem;
        background: var(--bg-surface); border: 1px solid var(--border-color);
        border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
        z-index: 500;
    }
    .nav-menu .sub-menu li { margin: 0; }
    .nav-menu .sub-menu a {
        display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
        font-size: 0.88rem; white-space: nowrap;
    }
    .nav-menu .sub-menu a:hover { background: var(--primary-light); color: var(--primary); }
}

@media (max-width: 1360px) {
    /* Mobile: sub-menus stay collapsed until their caret button is tapped
       (see .submenu-toggle in main.js), so the menu opens as a short,
       scannable list instead of one long wall of links. */
    .nav-menu .sub-menu {
        display: none;
        margin: 0 0 0.75rem;
        padding: 0.25rem 0 0.5rem;
        background-color: var(--bg-sand);
        border-radius: var(--radius-sm);
    }
    .nav-menu .menu-item-has-children.submenu-open > .sub-menu { display: block; }
    .nav-menu .sub-menu li { margin: 0; }
    .nav-menu .sub-menu li + li { border-top: 1px solid rgba(0, 0, 0, 0.05); }
    .nav-menu .sub-menu a {
        display: block;
        padding: 0.7rem 0 0.7rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-muted);
        white-space: normal;
    }
    .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu .current-menu-item > a { color: var(--primary); }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.7rem;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 0.5rem;
}

/* Injected by main.js next to each parent link. Hidden on desktop, where
   sub-menus open on hover instead. */
.submenu-toggle { display: none; }

/* Breadcrumbs */
.breadcrumbs {
    position: relative;
    z-index: 1;
    padding: 0.9rem 0;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}
.breadcrumbs ol {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.4rem; list-style: none; font-size: 0.9rem; color: var(--text-muted); line-height: 1.4;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--border-color); }
.breadcrumbs a { color: var(--text-muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs [aria-current="page"] { color: var(--primary-dark); font-weight: 700; }

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero {
    position: relative;
    padding: 5rem 0 6rem;
    background: linear-gradient(135deg, rgba(18, 39, 28, 0.94), rgba(12, 25, 18, 0.88)), var(--hero-fallback-bg, linear-gradient(135deg, #12271C, #1E3E2E));
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(18, 39, 28, 0.3), transparent);
    pointer-events: none;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem;
}

.hero-content { max-width: 680px; flex-shrink: 0; }

/* Floating credibility card */
.hero-trust-card {
    flex-shrink: 0;
    width: 270px;
    padding: 2.25rem 1.85rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    color: #FFFFFF;
    transition: var(--transition-fast);
}

.hero-trust-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(245, 215, 127, 0.5);
}

.hero-trust-card i { font-size: 2.2rem; color: var(--accent-contrast); margin-bottom: 0.75rem; display: inline-block; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.4)); }
.hero-trust-card-stat { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; line-height: 1; color: #FFFFFF; letter-spacing: -0.02em; }
.hero-trust-card-label { font-size: 0.88rem; color: rgba(255, 255, 255, 0.9); margin-top: 0.5rem; line-height: 1.45; font-weight: 500; }
.hero-trust-card-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); margin: 1.25rem 0; }
.hero-trust-card-sub { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--accent-contrast); letter-spacing: 0.02em; }

@media (max-width: 1100px) {
    .hero-content { max-width: 100%; flex-shrink: 1; }
    .hero-trust-card { display: none; }
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.35rem;
    background-color: rgba(245, 215, 127, 0.16);
    border: 1px solid var(--accent-contrast);
    color: var(--accent-contrast);
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 1.35rem;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

.hero h1 { color: #FFFFFF; margin-bottom: 1.35rem; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.hero p { color: rgba(255, 255, 255, 0.93); font-size: 1.2rem; line-height: 1.7; margin-bottom: 2.2rem; }
.hero-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.hero-trust-cue {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1.5rem 0 0; font-size: 0.92rem; font-weight: 600;
    color: var(--accent-contrast);
}
.hero-meta { display: flex; gap: 1.5rem; color: #FFFFFF; font-size: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.hero-meta span { display: flex; align-items: center; gap: 0.4rem; }

/* ==========================================================================
   5. Trust Bar
   ========================================================================== */
.trust-bar { margin-top: -2.75rem; position: relative; z-index: 10; }

.trust-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 2rem 2.2rem;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    border: 1px solid var(--border-color);
}

.trust-item { display: flex; align-items: flex-start; gap: 1.1rem; transition: var(--transition-fast); }
.trust-item:hover { transform: translateY(-2px); }

.trust-icon {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, var(--primary-light), #E2ECE5);
    color: var(--primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.trust-text h4 { font-size: 1.08rem; color: var(--primary-dark); margin-bottom: 0.25rem; font-weight: 700; }
.trust-text p { font-size: 0.92rem; margin: 0; line-height: 1.5; color: var(--text-muted); }

/* ==========================================================================
   6. Sections
   ========================================================================== */
.section { padding: 5rem 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }

.section-subtitle, .section-subtitle-dark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    display: block;
}
.section-subtitle { color: var(--accent-dark); }
.section-subtitle-dark { color: var(--accent-contrast); }
.section-title { margin-bottom: 0.75rem; }

/* Photo placeholder (kept until real photography lands in Media Library) */
.photo-placeholder {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    border: 2px dashed #94A3B8;
    color: #1E293B;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.98rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 240px;
    width: 100%;
}
.photo-placeholder i { font-size: 2.4rem; color: #475569; }
.photo-placeholder span {
    background-color: #FFFFFF; color: #0F172A;
    padding: 0.35rem 0.85rem; border-radius: var(--radius-full);
    font-size: 0.85rem; border: 1px solid #CBD5E1; font-weight: 700;
}

.section-photo {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Vehicle fleet cards (template-car-charter.php, driven by inc/fleet.php)
   ========================================================================== */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.fleet-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition-fast);
}
.fleet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fleet-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fleet-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; }
.fleet-card-name { font-size: 1.35rem; color: var(--primary-dark); margin-bottom: 0.35rem; }
.fleet-card-best { font-size: 0.95rem; color: var(--accent-dark); font-weight: 700; margin-bottom: 1rem; }

.fleet-card-specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; }
.fleet-card-specs li {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.95rem; color: var(--text-muted);
}
.fleet-card-specs i { color: var(--primary); font-size: 1.05rem; }

.fleet-card-prices { margin-bottom: 1.5rem; }
.fleet-price {
    text-align: center;
    background: var(--bg-sand);
    border-radius: var(--radius-md);
    padding: 1rem 0.6rem;
}
.fleet-price--featured { background: var(--primary-light); border: 1.5px solid var(--primary); }
.fleet-price-label {
    font-size: 0.78rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; margin-bottom: 0.35rem; line-height: 1.3;
}
.fleet-price--featured .fleet-price-label { color: var(--primary-dark); }
.fleet-price-main { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.fleet-price-sub { font-size: 0.8rem; color: var(--text-muted); }

/* Single headline day rate (reference layout) — one big scannable number. */
.fleet-day-rate {
    background: var(--primary-light);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.fleet-day-rate-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.fleet-day-rate-note {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.fleet-price-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 720px;
    margin: 0 auto 2rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-main);
    text-align: center;
}
.fleet-price-disclaimer i { color: var(--accent-dark); font-size: 1.1rem; flex-shrink: 0; }

.fleet-card-noprice {
    background: var(--bg-sand); border-radius: var(--radius-md);
    padding: 0.9rem; text-align: center; font-size: 0.95rem; margin-bottom: 1.5rem;
}
/* Pin the CTA to the bottom so buttons line up across cards of differing height. */
.fleet-card .btn { margin-top: auto; }

/* ==========================================================================
   Airport transfer destination zones (inc/transfer-zones.php)
   ========================================================================== */
.zone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.zone-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.zone-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    background: var(--primary-light);
    border-bottom: 1px solid var(--border-color);
}
.zone-card-title { font-size: 1.1rem; color: var(--primary-dark); margin: 0; }
.zone-card-count { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }

.zone-dest-list { margin: 0; padding: 0; list-style: none; }
.zone-dest {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.4rem;
    border-bottom: 1px solid var(--border-color);
}
.zone-dest:last-child { border-bottom: none; }
.zone-dest-name { font-weight: 600; color: var(--text-main); }
.zone-dest-price {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.zone-dest-btn { min-height: 38px; padding: 0.4rem 1rem; font-size: 0.85rem; }

.zone-fallback {
    background-color: var(--bg-surface);
    border: 1px dashed var(--accent);
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.zone-fallback h3 { color: var(--primary-dark); margin-bottom: 0.6rem; }

@media (max-width: 860px) {
    .zone-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    /* Name on its own line, price + button beneath — three columns get
       far too cramped once the destination name wraps. */
    .zone-dest { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
    .zone-dest-name { grid-column: 1 / -1; }
}

.fleet-included {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.fleet-included .feature-list { display: inline-block; text-align: left; }

@media (max-width: 1000px) {
    .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 680px) {
    .fleet-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Landing pages (template-landing.php)
   Stripped-back chrome: no nav, one conversion goal, everything else removed.
   ========================================================================== */
.landing-header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
}
.landing-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.landing-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
}
.landing-header-phone i { color: var(--accent-dark); font-size: 1.15rem; }
.landing-header-phone:hover { color: var(--primary); }

/* Centred hero: a landing page has one message and one action, so the eye
   should land on a single axis rather than tracking left-to-right. */
.landing-hero { text-align: center; }
.landing-hero .landing-hero-content {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.landing-hero .hero-actions { justify-content: center; }
.landing-price-note {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--accent-contrast);
    color: var(--accent-contrast);
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}

/* "What's Included" with no supporting photo: one centred column, and the
   checklist split into two so the freed width is used instead of leaving a
   tall ragged single list. */
/* Chained selector on purpose: .gateway-banner is defined further down this
   file with the same specificity, so a lone .landing-included-solo lost the
   grid-template-columns battle on source order and the banner stayed two
   columns — squeezing all of this into its left half. */
.gateway-banner.landing-included-solo {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
.landing-included-solo .feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2.5rem;
    text-align: left;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.landing-included-solo .feature-list li { margin-bottom: 0; }

.landing-usp-bar { margin-top: -2rem; position: relative; z-index: 5; }
.landing-usp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}
.landing-usp { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 600; color: var(--primary-dark); }
.landing-usp i { color: var(--accent-dark); font-size: 1.2rem; flex-shrink: 0; }

.landing-form-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: 720px;
    margin: 0 auto;
}

.landing-footer {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 2.5rem 0;
    text-align: center;
}
.landing-footer p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0.6rem; }
.landing-footer-brand { font-family: var(--font-heading); font-weight: 700; color: #FFFFFF !important; }
.landing-footer-contact { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; font-size: 0.95rem; }
.landing-footer-contact i { color: var(--accent-contrast); }
.landing-footer-links a { color: var(--accent-contrast); font-weight: 600; }
.landing-footer-links a:hover { text-decoration: underline; }
.landing-footer-copy { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0; }

@media (max-width: 780px) {
    /* Two columns of checklist text get too narrow to read before the
       general mobile breakpoint, so collapse this one earlier. */
    .landing-included-solo .feature-list { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}

@media (max-width: 600px) {
    .landing-header-phone span { display: none; }
    .landing-usp-bar { margin-top: -1rem; }
    .landing-usp-grid { padding: 1.25rem; }
    .landing-footer-contact { flex-direction: column; gap: 0.5rem; }
}

/* Guest reviews: honest "go read the real listings" state, shown until a
   live TripAdvisor/Google widget is wired up (see reviews-cta.php). */
.reviews-cta {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.reviews-cta-icon { font-size: 2.2rem; color: var(--accent); display: block; margin-bottom: 0.75rem; }
.reviews-cta-text { font-size: 1.08rem; margin-bottom: 1.75rem; }
.reviews-cta-actions {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}

/* FAQ page: grouped accordions (template-faq.php) */
.faq-group { margin-bottom: 3rem; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Gateway Banner */
.gateway-banner {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    display: grid;
    /* minmax(0, …) not plain 1fr: a grid track's automatic minimum is its
       content's min-content size, and for the <img> child that resolves to
       the photo's intrinsic pixel width — which forced the whole banner
       wider than the phone viewport and clipped the text off-screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.gateway-banner > * { min-width: 0; }
.gateway-banner h2 { color: #FFFFFF; margin-bottom: 1rem; }
.gateway-banner p { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; margin-bottom: 1.5rem; }

.feature-list { margin-bottom: 2rem; }
.feature-list li {
    display: flex; align-items: center; gap: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}
.feature-list i { color: var(--accent-contrast); font-size: 1.2rem; }

/* On light backgrounds (single-tour "Included" list) */
.feature-list.on-light li { color: var(--text-main); }
.feature-list.on-light i { color: var(--accent); }

/* ==========================================================================
   7. Tour Cards
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

/* Fixed 3-column feature grid (Airport Transfer / Car Charter "what's included"
   lists) — an even number of cards that divides cleanly by 3, so this stays
   an explicit 3-up grid rather than auto-fill, which left a ragged trailing
   row on wide screens when the item count didn't fill the last row. */
.features-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .features-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .features-grid-3 { grid-template-columns: 1fr; }
}

.tour-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
}
.tour-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(30, 62, 46, 0.25);
}

.card-img-wrap { position: relative; min-height: 230px; overflow: hidden; }
.card-img-wrap img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-card:hover .card-img-wrap img {
    transform: scale(1.07);
}

.card-badge {
    position: absolute; top: 1rem; left: 1rem;
    background: rgba(18, 39, 28, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 215, 127, 0.35);
    color: var(--accent-contrast);
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: 0.84rem; font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; }
.card-title { font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--primary-dark); font-weight: 700; line-height: 1.3; }
.card-title a:hover { color: var(--primary); }
.card-desc { font-size: 1.02rem; line-height: 1.65; flex-grow: 1; margin-bottom: 1.35rem; color: var(--text-muted); }

.card-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 1.1rem; border-top: 1px solid var(--border-color); margin-top: auto;
}
.card-price { display: flex; flex-direction: column; }
.price-main { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); }
.price-sub { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

.tour-rating { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.65rem; }
.tour-rating-stars { color: #F59E0B; letter-spacing: 1.5px; font-size: 0.95rem; }
.tour-rating-score { font-weight: 700; color: var(--primary-dark); }

/* ==========================================================================
   8. Founder / Team
   ========================================================================== */
.founder-card {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 2.5rem;
}
/* Same guard as .gateway-banner: without min-width: 0 the founder photo's
   intrinsic width becomes the track's automatic minimum and pushes the card
   past the viewport on phones. */
.founder-card > * { min-width: 0; }
.founder-card .photo-placeholder, .founder-card img { border-radius: var(--radius-md); }
.founder-badge {
    display: inline-block; background-color: var(--primary-light); color: var(--primary-dark);
    font-size: 0.9rem; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: var(--radius-full);
    margin-bottom: 0.75rem;
}
.founder-name { font-size: 1.8rem; color: var(--primary-dark); margin-bottom: 0.25rem; }
.founder-title { font-size: 1rem; color: var(--accent-dark); font-weight: 700; margin-bottom: 1rem; }
.founder-quote {
    background-color: var(--bg-sand); border-left: 4px solid var(--accent);
    padding: 1.2rem 1.5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic; font-size: 1.05rem; color: var(--text-main); margin-top: 1.25rem;
}

/* Tour detail page: content + sticky booking box */
.tour-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
.tour-detail-booking-box { position: sticky; top: 100px; }

/* Contact page: form + info panel */
.contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

/* Car Charter landing page: 2-up price cards inside the pricing card */
.car-charter-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.team-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.team-card { background-color: var(--bg-surface); border-radius: var(--radius-md); padding: 1.8rem; border: 1px solid var(--border-color); }
.team-card h4 { color: var(--primary-dark); margin-bottom: 0.5rem; }

/* ==========================================================================
   9. Reviews
   ========================================================================== */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.review-card {
    background-color: var(--bg-surface); border-radius: var(--radius-md); padding: 2rem;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; justify-content: space-between;
}
.review-source-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background-color: #00AA6C; color: #FFFFFF; font-size: 0.88rem; font-weight: 700;
    padding: 0.35rem 0.85rem; border-radius: var(--radius-full); margin-bottom: 1rem;
}
.review-stars { color: #F59E0B; margin-bottom: 0.75rem; }

/* ==========================================================================
   10. FAQ Accordion
   ========================================================================== */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { background-color: var(--bg-surface); border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-bottom: 1rem; overflow: hidden; }
.faq-question {
    width: 100%; padding: 1.35rem 1.6rem; background: none; border: none; text-align: left;
    font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--primary-dark);
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-answer { padding: 0 1.6rem 1.35rem; display: none; font-size: 1.05rem; color: var(--text-muted); }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-question i { transform: rotate(180deg); }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer { background-color: var(--primary-dark); color: var(--text-light); padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; margin-bottom: 3.5rem; }
.footer-grid-5 { grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-col p { color: rgba(244, 240, 234, 0.82); font-size: 1rem; margin-top: 1rem; }
.footer-col h4 { color: #FFFFFF; margin-bottom: 1.25rem; font-size: 1.2rem; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: rgba(244, 240, 234, 0.82); font-size: 0.98rem; }
.footer-links a:hover { color: var(--accent-contrast); }
.footer-bottom {
    padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.9rem; color: rgba(244, 240, 234, 0.7);
}

/* ==========================================================================
   12. Floating WhatsApp
   ========================================================================== */
@keyframes bst-wa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.floating-wa {
    position: fixed; bottom: 2.2rem; right: 2.2rem; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #1EBE5A); color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    transition: var(--transition-fast);
    animation: bst-wa-pulse 2.8s infinite;
}
.floating-wa:hover { transform: scale(1.1) translateY(-2px); background: linear-gradient(135deg, #1EBE5A, #169E4A); }
.floating-wa i { font-size: 1.8rem; }

/* ==========================================================================
   13. Forms
   ========================================================================== */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-field label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--primary-dark); }
.form-field select, .form-field input, .form-field textarea {
    width: 100%; padding: 0.9rem 1rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color); font-family: var(--font-body); font-size: 0.98rem;
    background-color: #FFFFFF; color: var(--text-main);
    transition: var(--transition-fast);
}
.form-field select:focus, .form-field input:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3.5px rgba(30, 62, 46, 0.12);
}
.form-field.on-dark select, .form-field.on-dark input, .form-field.on-dark textarea { border: none; }

/* Blog */
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content p { font-size: 1.08rem; }
.entry-content img { border-radius: var(--radius-md); margin: 1.5rem 0; }
.entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.entry-content th, .entry-content td {
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}
.entry-content th {
    background-color: var(--bg-sand);
    color: var(--primary-dark);
    font-weight: 700;
}
.page-content h1 { text-align: center; margin-bottom: 2rem; }
.page-thumbnail { max-width: 900px; margin: 0 auto 2.5rem; border-radius: var(--radius-lg); overflow: hidden; }
.page-thumbnail img { width: 100%; height: auto; }

/* ==========================================================================
   14. Blog Archive / Single + Sidebar
   ========================================================================== */
.btn-block { width: 100%; }

/* Two-column shell: main content + 320px sidebar, both on the archive and
   single post templates. Collapses to a single column on tablet. */
.blog-archive-body, .blog-single-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}
.blog-single-body { padding: 1.5rem 1.5rem 4rem; }
.blog-single-content { max-width: 720px; }
.blog-single-content .entry-content { max-width: none; margin: 0; }
.blog-single-content h1 {
    text-align: left;
    font-size: clamp(1.7rem, 2.2vw + 1.2rem, 2.4rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.blog-single-content .post-meta { margin-bottom: 1.5rem; }
@media (max-width: 980px) {
    .blog-archive-body, .blog-single-body { grid-template-columns: 1fr; }
    .blog-single-content { max-width: none; }
}

/* Blog post cards — a 2-up grid, distinct from the wider .cards-grid used
   for tours, since this now shares horizontal space with the sidebar. */
.blog-grid { display: grid; gap: 1.75rem; }
.blog-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .blog-grid-2col { grid-template-columns: 1fr; } }

.blog-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card-thumb { display: block; position: relative; }
.blog-card-thumb img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.blog-card-thumb-placeholder {
    aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: #475569; font-size: 2rem;
}
.blog-card-body { padding: 1.4rem; }
.blog-card-title { font-size: 1.15rem; margin: 0.3rem 0 0.6rem; }
.blog-card-title a { color: var(--primary-dark); }
.blog-card-title a:hover { color: var(--primary); }
.blog-card-body p:not(.post-meta) { font-size: 0.96rem; color: var(--text-muted); margin: 0; }

.post-meta { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.post-thumbnail { border-radius: var(--radius-md); overflow: hidden; margin: 1rem 0 1.5rem; box-shadow: var(--shadow-md); }
.post-thumbnail img { display: block; width: 100%; height: auto; }

/* Bottom-of-post conversion banner */
.post-cta { background: var(--primary-dark); padding: 3.5rem 0; text-align: center; margin-top: 1rem; }
.post-cta h2 { margin: 0.5rem 0 0.75rem; }
.post-cta > .container > p { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 480px; margin: 0 auto 1.75rem; }
.post-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.sidebar-widget h3 { font-size: 1.15rem; margin-bottom: 1rem; }

.sidebar-cta { background: var(--primary); border-color: var(--primary); text-align: center; }
.sidebar-cta i { font-size: 1.8rem; color: var(--accent-contrast); margin-bottom: 0.5rem; display: inline-block; }
.sidebar-cta h3 { color: #FFFFFF; }
.sidebar-cta p { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-bottom: 1.25rem; }

.sidebar-search { display: flex; gap: 0.5rem; }
.sidebar-search input {
    flex: 1; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); font-family: var(--font-body); font-size: 0.92rem;
    background: var(--bg-sand); color: var(--text-main);
}
.sidebar-search button {
    width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: var(--radius-sm);
    background: var(--primary); color: #FFFFFF; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition-fast);
}
.sidebar-search button:hover { background: var(--primary-dark); }

.sidebar-tour-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sidebar-tour-item { display: flex; align-items: center; gap: 0.75rem; }
.sidebar-tour-thumb { width: 58px; height: 58px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.sidebar-tour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-tour-thumb-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: #64748B; font-size: 1.2rem;
}
.sidebar-tour-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sidebar-tour-title { font-size: 0.88rem; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.sidebar-tour-item:hover .sidebar-tour-title { color: var(--primary); }
.sidebar-tour-price { font-size: 0.82rem; color: var(--accent-dark); font-weight: 700; display: flex; flex-direction: column; gap: 0.1rem; }
.sidebar-tour-price .price-main { font-size: 0.84rem; color: var(--primary-dark); font-weight: 700; }
.sidebar-tour-price .price-sub { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; }

.sidebar-dest-list { list-style: none; margin: 0; padding: 0; }
.sidebar-dest-list li { border-bottom: 1px solid var(--border-color); }
.sidebar-dest-list li:last-child { border-bottom: none; }
.sidebar-dest-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.7rem 0.1rem; font-size: 0.92rem; font-weight: 600; color: var(--text-main);
}
.sidebar-dest-list a:hover { color: var(--primary); }
.sidebar-dest-list a span {
    font-size: 0.76rem; color: var(--text-muted); background: var(--bg-sand);
    border-radius: var(--radius-full); padding: 0.15rem 0.55rem;
}

/* Table of contents (blog posts only) */
.toc-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 0 0 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.toc-box summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 1rem 1.25rem; cursor: pointer; list-style: none; user-select: none;
}
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::marker { content: ''; }
.toc-box-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-heading); font-weight: 700; color: var(--primary-dark); font-size: 1.05rem;
}
.toc-box-title i { font-size: 1.2rem; color: var(--accent-dark); flex-shrink: 0; }
.toc-box-toggle { display: flex; color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; }
.toc-box-toggle i { font-size: 1.2rem; }
.toc-box[open] .toc-box-toggle { transform: rotate(180deg); }
.toc-list {
    list-style: none; counter-reset: toc-counter; margin: 0; padding: 0.75rem 1.25rem 1.1rem;
    border-top: 1px solid var(--border-color);
}
.toc-item { margin: 0; }
.toc-item-h2 { counter-increment: toc-counter; }
.toc-item-h2 > a {
    display: block; padding: 0.45rem 0; font-weight: 600; color: var(--text-main);
}
.toc-item-h2 > a::before {
    content: counter(toc-counter) '.'; color: var(--accent-dark); font-weight: 700;
    display: inline-block; min-width: 22px;
}
.toc-item-h3 > a {
    display: block; padding: 0.3rem 0 0.3rem 34px; font-size: 0.92rem; color: var(--text-muted);
}
.toc-list a:hover { color: var(--primary); text-decoration: underline; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
/* Nav switches to the hamburger menu earlier than the general content
   breakpoint — 7 menu items + logo/tagline + WhatsApp button need more
   room than they'll ever get squeezed into on a typical laptop viewport. */
@media (max-width: 1360px) {
    .primary-navigation { display: none; }
    /* Keep the hamburger as the last item in the bar so it always sits at
       the far right, with the WhatsApp button (when shown) grouped beside
       it rather than stranded in the middle by space-between. */
    .mobile-toggle { display: block; order: 3; }
    .nav-actions { margin-left: auto; }

    /* Only the <nav> wrapper becomes the dropdown panel. The <ul> inside it
       must stay in normal flow — absolutely positioning BOTH (as this
       previously did) stacked one inside the other and pushed the whole
       menu down, leaving a large blank gap at the top of the panel. */
    .mobile-menu-active .primary-navigation {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        box-shadow: var(--shadow-lg);
        border-top: 1px solid var(--border-color);
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0 1rem;
    }

    /* Match .container so links line up with the logo above them. */
    .mobile-menu-active .nav-menu {
        display: block;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        gap: 0;
    }

    /* The link and its caret button sit side by side; the sub-menu wraps
       onto its own full-width line beneath them. */
    .mobile-menu-active .nav-menu > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
    }
    .mobile-menu-active .nav-menu > li:last-child { border-bottom: none; }

    /* Full-width rows with a comfortable 48px+ touch target. */
    .mobile-menu-active .nav-menu > li > a {
        flex: 1 1 auto;
        padding: 0.95rem 0;
        font-size: 1.02rem;
        color: var(--primary-dark);
        white-space: normal;
    }

    .mobile-menu-active .nav-menu > li > .sub-menu { flex: 0 0 100%; }

    /* All pseudo-element carets are off on mobile — the real button below
       carries the icon so it can be tapped and announced to screen readers. */
    .mobile-menu-active .nav-menu a::after { display: none; }

    .mobile-menu-active .nav-menu > li.current-menu-item > a,
    .mobile-menu-active .nav-menu > li.current-menu-parent > a { color: var(--primary); }

    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        min-height: 44px;
        margin-left: 0.5rem;
        padding: 0;
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--primary-dark);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    .submenu-toggle:hover { background-color: var(--bg-sand); }
    .submenu-toggle i { transition: transform 0.2s ease; }
    .submenu-open > .submenu-toggle i { transform: rotate(180deg); }
}

@media (max-width: 992px) {
    .gateway-banner { grid-template-columns: 1fr; padding: 2.5rem; }
    .founder-card { grid-template-columns: 1fr; padding: 2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .tour-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
    .tour-detail-booking-box { position: static; }
    .contact-page-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
    /* Tighten the page gutter so nested panels stop eating the line length:
       a 24px container + 40px card padding left only ~230px of the 360px
       screen for text. */
    .container { padding: 0 0.8rem; }
    .panel-pad, .panel-pad-sm { padding: 1.25rem; }
    /* 3.5rem/2.5rem of banner padding is a desktop figure — on a 360px
       screen it ate most of the line length once the container gutter was
       added on top. */
    .gateway-banner { padding: 1.5rem; gap: 1.5rem; }
    /* 5rem top and bottom leaves a very large empty band between sections
       on a phone; 3rem keeps the rhythm without the dead space. */
    .section { padding: 3rem 0; }
    .section-header { margin-bottom: 2rem; }

    /* Cards bring their own padding, but bare copy sitting directly on the
       page would otherwise sit on the tightened gutter alone — hand a little
       breathing room back to the long-form reading contexts. */
    .hero-content,
    .section-header,
    .blog-single-content,
    .blog-archive-main { padding-left: 0.5rem; padding-right: 0.5rem; }

    /* Phone/email drop out; the founder credibility line is all that's left,
       so centre it and ease the size back so it reads as one tidy strip
       instead of a ragged two-line block. */
    .top-bar { font-size: 0.8rem; }
    .top-bar-info { display: none; }
    .top-bar-inner { justify-content: center; }
    .top-bar-tag { text-align: center; }
    .top-bar-tag span { display: inline; }
    .trust-card { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .floating-wa { width: 52px; height: 52px; bottom: 1.25rem; right: 1.25rem; }
    .founder-card { grid-template-columns: 1fr; padding: 1rem; }
    .car-charter-price-grid { grid-template-columns: 1fr; }
    /* The header's "Chat on WhatsApp" button has flex-shrink: 0 and
       nowrap text, so on narrow phones it (and the logo beside it) push
       past the screen edge instead of shrinking. The floating WhatsApp
       button already covers this action on every page, so hide the
       header copy here rather than fight the overflow. */
    .nav-actions { display: none; }
}

/* ==========================================================================
   15. Enhanced UI/UX Components
   ========================================================================== */

/* Live status badge */
.live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem;
    background: rgba(30, 62, 46, 0.55);
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: var(--radius-full);
    font-size: 0.84rem;
    font-weight: 600;
    color: #A7F3D0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-shadow: 0 0 8px #10B981;
}
.live-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 0.6);
    animation: live-pulse 2s infinite ease-out;
}
@keyframes live-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Experience filter tabs */
.filter-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 2.75rem;
}
.filter-btn {
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1.5px solid var(--border-color);
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.filter-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.filter-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(30, 62, 46, 0.28);
}
.filter-btn i { font-size: 1rem; }
.filter-btn.active i { color: var(--accent-contrast); }

/* Animated card filtering */
.tour-card {
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.28s ease;
}
.tour-card.is-hidden {
    display: none !important;
}

/* Itinerary Timeline */
.itinerary-timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 2rem;
}
.itinerary-timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 9px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--primary), rgba(30, 62, 46, 0.25));
    border-radius: 2px;
}
.timeline-step {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-step:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 4px;
    width: 20px;
    height: 20px;
    background: var(--bg-surface);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--bg-sand);
    z-index: 2;
}
.timeline-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
}
.timeline-content {
    background: var(--bg-surface);
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}
.timeline-content:hover {
    border-color: rgba(30, 62, 46, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}
.timeline-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.timeline-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Mobile Sticky Booking Bar */
.mobile-sticky-booking {
    display: none;
}
@media (max-width: 992px) {
    .mobile-sticky-booking {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border-color);
        padding: 0.75rem 1.25rem;
        z-index: 998;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        box-shadow: 0 -8px 24px rgba(18, 39, 28, 0.12);
        transform: translateY(120%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-sticky-booking.is-visible {
        transform: translateY(0);
    }
    .mobile-sticky-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .mobile-sticky-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        color: var(--text-muted);
    }
    .mobile-sticky-price {
        font-family: var(--font-heading);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--primary-dark);
        line-height: 1.2;
    }
    .mobile-sticky-btn {
        flex-shrink: 0;
        padding: 0.65rem 1.25rem !important;
        font-size: 0.9rem !important;
        min-height: 42px !important;
    }
}

/* Verified Review Cards */
.reviews-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.review-card-mini {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-fast);
    text-align: left;
}
.review-card-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 62, 46, 0.25);
}
.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.review-stars-gold {
    color: #F59E0B;
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.traveler-country-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-sand);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}
.review-quote-text {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-main);
    font-style: italic;
    margin-bottom: 1.2rem;
    flex-grow: 1;
}
.review-author-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.review-author-name {
    font-weight: 700;
    color: var(--primary-dark);
}
.review-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #059669;
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: auto;
}

/* Currency Compliance Note */
.currency-compliance-box {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-sand);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    text-align: left;
}
.currency-compliance-box i {
    color: var(--primary);
    margin-right: 0.35rem;
}
.footer-compliance-text {
    font-size: 0.8rem;
    color: rgba(244, 240, 234, 0.65);
    line-height: 1.5;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   20. Enhanced UI/UX Components: Currency, Planner Wizard, Badges & Inclusions
   ========================================================================== */

/* Top Bar Currency Selector */
.top-bar-currency {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}
.currency-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}
.bst-currency-picker {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}
.bst-currency-picker:hover, .bst-currency-picker:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--accent);
}
.bst-currency-picker option {
    background-color: var(--primary-dark);
    color: #FFFFFF;
}
.nav-currency-mobile-wrap {
    display: none;
}

/* Tour Card Enhancements */
.card-pacing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--primary-light);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.65rem;
    border: 1px solid rgba(30, 62, 46, 0.1);
}
.card-duration-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(18, 39, 28, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 2;
}

/* Inclusions & Exclusions Checklist */
.tour-inclusions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.check-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.94rem;
    line-height: 1.45;
}
.check-included li {
    color: var(--text-main);
}
.check-included li i {
    color: #16A34A;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.check-excluded li {
    color: var(--text-muted);
}
.check-excluded li i {
    color: #9CA3AF;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* What to Bring & Etiquette Guide */
.etiquette-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
.etiquette-item {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.etiquette-item strong {
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.35rem;
}
.etiquette-item strong i {
    color: var(--accent-dark);
}

/* Interactive Trip Planner Wizard */
.bst-planner-wizard {
    width: 100%;
}
.wizard-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}
.wizard-step-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-fast);
}
.wizard-step-node.active, .wizard-step-node.completed {
    opacity: 1;
}
.wizard-step-node .step-num {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: var(--transition-fast);
}
.wizard-step-node.active .step-num {
    background: var(--accent);
    color: #12271C;
    border-color: var(--accent-contrast);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
.wizard-step-node.completed .step-num {
    background: #16A34A;
    color: #FFFFFF;
    border-color: #16A34A;
}
.wizard-step-node .step-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #FFFFFF;
}
.wizard-step-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 0.75rem;
}
.wizard-step-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}
.wizard-step-panel.active {
    display: block;
}
.wizard-heading {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}
.wizard-subheading {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.vibe-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.vibe-card {
    position: relative;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
}
.vibe-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-contrast);
    transform: translateY(-2px);
}
.vibe-card.active {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.vibe-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.vibe-icon {
    font-size: 1.6rem;
    color: var(--accent-contrast);
    margin-bottom: 0.5rem;
}
.vibe-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.35rem;
}
.vibe-desc {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}
.wizard-nav-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .vibe-choice-grid { grid-template-columns: 1fr; }
    .tour-inclusions-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .wizard-step-node .step-label { display: none; }
    .nav-currency-mobile-wrap { display: block; margin-right: 0.5rem; }
    .nav-currency-mobile-wrap select {
        padding: 0.35rem 0.5rem;
        background: var(--bg-sand);
        border: 1px solid var(--border-color);
        color: var(--primary-dark);
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        font-weight: 700;
    }
}