/* ================================================================
   Marsa Reef Taxi — Main Stylesheet
   ================================================================ */

/* ── CSS Custom Properties ──────────────────────────────────────── */
:root {
    /* Brand Colors */
    --primary:        #F59E0B;
    --primary-dark:   #D97706;
    --primary-light:  #FDE68A;
    --primary-pale:   #FFFBEB;

    /* Blues */
    --blue:           #0284C7;
    --blue-bright:    #0EA5E9;
    --blue-pale:      #E0F2FE;

    /* Backgrounds */
    --navy:           #0C1A2E;
    --navy-mid:       #1E3050;
    --navy-light:     #2D4A7A;
    --white:          #FFFFFF;
    --cream:          #FFFBF5;
    --cream-mid:      #FFF3E0;
    --surface:        #F8FAFC;
    --bg-light:       #FFFFFF; /* page background — used by section dividers/waves */

    /* Text */
    --text-dark:      #0F172A;
    --text-mid:       #475569;
    --text-muted:     #94A3B8;
    --text-light:     #CBD5E1;

    /* Borders */
    --border:         rgba(245,158,11,0.18);
    --border-light:   rgba(255,255,255,0.1);
    --border-gray:    #E2E8F0;

    /* Shadows */
    --shadow-sm:      0 2px 12px rgba(15,23,42,0.07);
    --shadow-md:      0 8px 32px rgba(15,23,42,0.11);
    --shadow-lg:      0 20px 60px rgba(15,23,42,0.16);
    --shadow-gold:    0 8px 24px rgba(245,158,11,0.25);

    /* Radius */
    --radius:         16px;
    --radius-sm:      10px;
    --radius-xl:      28px;
    --radius-full:    9999px;

    /* Transitions */
    --transition:     all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container:      1200px;
    --section-py:     clamp(3rem, 7vw, 6rem);
    --gap-sm:         clamp(0.75rem, 2vw, 1rem);
    --gap-md:         clamp(1rem, 2.5vw, 1.75rem);
    --gap-lg:         clamp(1.25rem, 3vw, 2rem);
    --gap-xl:         clamp(1.5rem, 4vw, 3rem);
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* clip (not hidden): removes horizontal overflow from the scrollable
       area entirely, so mobile browsers never zoom out to fit transient
       overflow during font loading (seen on PL/AR first paint). */
    overflow-x: clip;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-mid);
    background: var(--white);
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
}
h1 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
}
h2 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

.eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    display: block;
    margin-bottom: 0.6rem;
}

/* ── Layout Utilities ───────────────────────────────────────────── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 1.5rem);
    width: 100%;
}

.section { padding: var(--section-py) 0; }
.section-alt { background: var(--cream); }
.section-dark { background: var(--navy); }

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}
.section-header p {
    margin-top: 0.75rem;
    font-size: 1.05rem;
    color: var(--text-mid);
}

/* ── Fluid grid helpers (auto-reflow at every breakpoint) ───────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap-md); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
    max-width: 100%;        /* never exceed the container (prevents overflow) */
}
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.875rem; }
.btn-lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--navy);
    font-weight: 700;
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(245,158,11,0.4);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,211,102,0.45);
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    backdrop-filter: blur(4px);
}
.btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.8);
    transform: translateY(-2px);
}

.btn-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue-bright));
    color: #fff;
    box-shadow: 0 6px 20px rgba(14,165,233,0.3);
}
.btn-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(14,165,233,0.45);
}

/* ── Language Dropdown (Navbar) ─────────────────────────────────── */
.nav-lang-wrap { position: relative; }

.nav-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--nav-ctrl-h);
    box-sizing: border-box;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0 0.85rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    white-space: nowrap;
}
.nav-lang-btn:hover,
.nav-lang-btn[aria-expanded="true"] {
    background: rgba(245,158,11,0.14);
    border-color: rgba(245,158,11,0.45);
    color: var(--primary);
}

/* Flag elements — real SVG flags via the flag-icons library (.fi.fi-xx).
   No borders / gradients, so there are no stray edge colours. */
.lang-current-flag,
.lang-flag {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    flex-shrink: 0;
    overflow: hidden;
    vertical-align: middle;
    line-height: 0;
    /* flag-icons paints the SVG as a background — fill the rounded box edge-to-edge */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* flag-icons inserts a sizing   via ::before; we size explicitly, so drop it */
.lang-current-flag::before,
.lang-flag::before { content: none !important; }

.lang-current-code {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.lang-chevron {
    font-size: 0.58rem;
    transition: transform 0.22s ease;
    color: rgba(255,255,255,0.45);
    margin-left: 0.05rem;
}
.nav-lang-btn[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.nav-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    background: #1a2e48;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0.4rem;
    min-width: 175px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    z-index: 600;
    animation: langDropIn 0.18s cubic-bezier(0.4,0,0.2,1);
}
.nav-lang-menu.open { display: block; }
@keyframes langDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Each language row */
.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
}
.lang-btn:hover {
    background: rgba(255,255,255,0.09);
    color: #fff;
}
.lang-btn.active {
    background: rgba(245,158,11,0.16);
    color: var(--primary);
    font-weight: 700;
}

/* .lang-flag and .lang-current-flag CSS defined above (flag-icons SVG flags) */

/* Code + name */
.lang-code {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    min-width: 22px;
    color: inherit;
}
.lang-btn.active .lang-code { color: var(--primary); }

.lang-name {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.5);
    flex: 1;
}
.lang-btn:hover .lang-name  { color: rgba(255,255,255,0.8); }
.lang-btn.active .lang-name { color: rgba(245,158,11,0.8); }

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(12, 26, 46, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.navbar.scrolled {
    background: rgba(12, 26, 46, 0.98);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.6rem, 1.5vw, 1.25rem);
    height: 80px;
}
/* Expose navbar height as a CSS variable for hero padding calc */
:root { --navbar-h: 80px; --nav-ctrl-h: 44px; }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.nav-logo-img {
    height: 64px;
    width: 64px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
}
.nav-logo:hover .nav-logo-img {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 16px rgba(245,158,11,0.6));
}
/* ── Homepage hero logo ──────────────────────────────────────────── */
.hero-logo-img {
    height: 150px;
    width: 150px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 6px 28px rgba(245,158,11,0.45));
    display: block;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease, filter 0.4s ease;
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 6px 28px rgba(245,158,11,0.45)); }
    50%       { filter: drop-shadow(0 6px 36px rgba(245,158,11,0.7)); }
}
/* ── CTA banner logo ─────────────────────────────────────────────── */
.cta-logo-img {
    height: 112px;
    width: 112px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 4px 24px rgba(245,158,11,0.4));
    display: block;
    margin: 0 auto 2rem;
}
/* ── Testimonials section logo ───────────────────────────────────── */
.testimonials-logo-img {
    height: 76px;
    width: 76px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45));
    display: block;
    margin: 0 auto 1rem;
    opacity: 0.92;
}
/* ── Footer logo ─────────────────────────────────────────────────── */
.footer-logo-img {
    height: 96px;
    width: 96px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.footer-logo:hover .footer-logo-img { transform: scale(1.05); }
/* ── Admin sidebar logo ──────────────────────────────────────────── */
.sidebar-brand-img {
    height: 38px;
    width: 38px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}
/* ── Admin login logo ────────────────────────────────────────────── */
.login-logo-img {
    height: 96px;
    width: 96px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.2));
    margin: 0 auto 1.25rem;
    display: block;
}
.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.nav-brand-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.nav-brand-tagline {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.1rem;
    flex: 1;
    justify-content: center;
}
.nav-link {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    position: relative;
    white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
    color: var(--primary);
    background: rgba(245,158,11,0.08);
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

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

/* Nav phone — circular icon-only button */
.nav-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-ctrl-h);
    height: var(--nav-ctrl-h);
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.08);
    transition: var(--transition-fast);
    flex-shrink: 0;
}
.nav-phone:hover {
    background: rgba(245,158,11,0.16);
    border-color: var(--primary);
}
.nav-phone i { color: var(--primary); font-size: 1rem; }
.nav-phone-text { display: none; }

/* Book Now button — hide text on tablet, hide entirely on small mobile */
.nav-book-btn  { white-space: nowrap; height: var(--nav-ctrl-h); padding: 0 1.25rem; }
.nav-book-text { display: inline; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-light);
    border-radius: 2px;
    transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero Section ───────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    /* overflow:hidden is ONLY applied via .hero-inner-clip so decorative
       orbs stay clipped but stacked content never gets cut on mobile */
    overflow: visible;
    background: var(--navy);
}
/* The .hero itself has overflow:visible so stacked content on mobile
   never gets cut. The decorative absolute layers are clipped by the
   section's clip-path so they don't bleed outside the section. */
.hero { clip-path: inset(0); }
.hero-photo {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=80') center / cover no-repeat;
    opacity: 0.18;
    z-index: 0;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 60%, rgba(245,158,11,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(14,165,233,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(245,158,11,0.08) 0%, transparent 45%);
    z-index: 1;
}
.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23FFFBF5' d='M0,64L60,74.7C120,85,240,107,360,112C480,117,600,107,720,90.7C840,75,960,53,1080,48C1200,43,1320,53,1380,58.7L1440,64L1440,120L0,120Z'/%3E%3C/svg%3E") no-repeat bottom center / cover;
    z-index: 1;
    pointer-events: none;
}
.hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Clip layout overflow too (clip-path on .hero only clips paint):
       without this the off-screen orbs extend document scrollWidth,
       causing a slight zoom-out / horizontal wiggle on RTL mobile. */
    overflow: hidden;
}
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: orbFloat 10s ease-in-out infinite;
}
.hero-orb-1 {
    width: 400px; height: 400px;
    background: rgba(245,158,11,0.1);
    top: -10%; left: -5%;
    animation-delay: 0s;
}
.hero-orb-2 {
    width: 300px; height: 300px;
    background: rgba(14,165,233,0.1);
    top: 20%; right: 5%;
    animation-delay: -3s;
}
.hero-orb-3 {
    width: 250px; height: 250px;
    background: rgba(245,158,11,0.07);
    bottom: 15%; left: 40%;
    animation-delay: -6s;
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    33%       { transform: translateY(-20px) scale(1.05); }
    66%       { transform: translateY(10px) scale(0.97); }
}

/* Hero container: ensure it sits on top of decorative layers */
.hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(4rem, 10vw, 7rem);
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

/* Hero 2-column grid — fluid: stacks when form can't fit */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(420px, 100%);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245,158,11,0.12);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}
.hero h1 {
    color: #fff;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}
.hero h1 .highlight {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 2.25rem;
    max-width: 520px;
    line-height: 1.7;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.hero-trust {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.875rem;
}
.trust-item i { color: var(--primary); font-size: 1rem; }
.trust-item strong { color: #fff; margin-right: 0.2rem; }

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.hero-scroll i { animation: bounce 2s ease-in-out infinite; font-size: 1rem; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ── Hero Form Card ─────────────────────────────────────────────── */
.hero-form-wrap { position: relative; z-index: 2; }
.hero-form-card {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.5);
}
.hero-form-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.hero-form-card-header i { color: #25d366; font-size: 1.3rem; }
.hero-form-card-header span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Trip type pills */
.hero-type-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.hero-type-pill {
    padding: 0.45rem 0.5rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    text-align: center;
}
.hero-type-pill:hover,
.hero-type-pill.active {
    border-color: var(--primary);
    background: var(--primary-pale);
    color: var(--navy);
}

/* Hero form inputs */
.hf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.hf-input {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: var(--transition-fast);
}
.hf-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); }
.hf-input::placeholder { color: var(--text-muted); font-size: 0.8rem; }
.hf-input.hf-error { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }

/* Hero form validation error summary */
.hf-form-errors {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.6rem 0.875rem;
    margin-bottom: 0.75rem;
}
.hf-form-errors p { margin: 0; font-size: 0.78rem; font-weight: 600; color: #b91c1c; }
.hf-form-errors ul { margin: 0.25rem 0 0; padding-left: 1.1rem; list-style: disc; }
.hf-form-errors ul li { font-size: 0.77rem; color: #dc2626; line-height: 1.5; }

/* Drop-off select — styled identically to hero text inputs, with a
   clean custom chevron and no native arrow (cross-browser). */
.hf-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.5L10.5 2' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 11px 8px;
    padding-right: 2.25rem;
    text-overflow: ellipsis;
    color: var(--text-dark);
}
/* Placeholder (disabled first option) shows muted */
.hf-select:has(option[value=""]:checked) { color: var(--text-muted); }
.hf-select option { color: var(--text-dark); }
.hf-select option[disabled] { color: var(--text-muted); }
.hf-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
/* IE/Edge legacy: hide native arrow */
.hf-select::-ms-expand { display: none; }

.hf-dropoff-wrap { display: flex; flex-direction: column; min-width: 0; }

/* Drop-off "other" free-text input shown when "Other" is chosen */
.dropoff-other.has-error,
.dropoff-other.hf-error { border-color: #ef4444; }

/* Admin/modal select with the same custom chevron */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.5L10.5 2' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 11px 8px;
    padding-right: 2.25rem;
}
select.form-control::-ms-expand { display: none; }
.hf-pax {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    background: var(--white);
}
.hf-pax-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-gray);
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--text-dark);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-fast);
}
.hf-pax-btn:hover { border-color: var(--primary); color: var(--primary); }
#heroPaxCount { font-weight: 700; font-size: 0.95rem; color: var(--text-dark); min-width: 18px; text-align: center; }
.hf-pax-label { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }

.btn-hero-submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.875rem;
    font-size: 0.95rem;
    padding: 0.875rem;
}
.hf-note {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ── Stats Bar ──────────────────────────────────────────────────── */
.stats-bar {
    background: var(--navy-mid);
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--gap-sm);
    text-align: center;
}
.stat-item { padding: 0.75rem; }
.stat-number {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--primary);
    display: block;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* ── Category Cards (What We Offer, DB-driven) ──────────────────── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--gap-md);
    align-items: stretch;
}
.category-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--blue-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 1;
}
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}
.category-card:hover::before { transform: scaleX(1); }
/* Image variant: stretches to card edges */
.category-card-img {
    position: relative;
    width: calc(100% + 3.5rem);   /* matches 2×1.75rem horizontal padding */
    margin: -2rem -1.75rem 1.25rem; /* matches 2rem top + 1.75rem side padding */
    height: 170px;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}
.category-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.category-card:hover .category-card-img img { transform: scale(1.07); }
.category-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(12,26,46,0.45));
    pointer-events: none;
}
/* Icon variant (no image) */
.category-card-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary-pale), #fff);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    transition: var(--transition);
}
.category-card:hover .category-card-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    transform: scale(1.05) rotate(-4deg);
}
.category-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.category-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    line-height: 1.3;
}
.category-card-body p {
    font-size: 0.875rem;
    color: var(--text-mid);
    line-height: 1.6;
    flex: 1;
}
.category-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gray);
    flex-shrink: 0;
}
.category-card-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.category-card-count i { color: var(--blue-bright); }
.category-card-arrow {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: gap 0.2s ease;
}
.category-card:hover .category-card-arrow { gap: 0.65rem; }

/* ── Services Overview ──────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-lg); }
.service-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-gray);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}
.service-card-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.service-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.06); }
.service-card-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--navy);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.service-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.service-card-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    background: var(--primary-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.service-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.service-card p {
    color: var(--text-mid);
    font-size: 0.85rem;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-gray);
    background: var(--surface);
}
.service-card-footer span {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.service-card-footer a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition-fast);
}
.service-card-footer a:hover { gap: 0.5rem; }

/* ── Feature Cards (Why Choose Us) ─────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap-md); }
.feature-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    padding: 1.75rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--blue-bright));
    opacity: 0;
    transition: var(--transition);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    background: var(--primary-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}
.feature-card:hover .feature-icon { background: var(--primary); }
.feature-card h4 { margin-bottom: 0.5rem; color: var(--text-dark); }
.feature-card p { font-size: 0.9rem; color: var(--text-mid); }

/* ── How It Works ───────────────────────────────────────────────── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--gap-md);
    position: relative;
}
.steps-grid::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5% + 28px);
    right: calc(12.5% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--blue-bright));
    z-index: 0;
}
.step-card {
    text-align: center;
    position: relative;
    z-index: 1;
}
.step-number {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: var(--shadow-gold);
    border: 3px solid var(--white);
    position: relative;
    z-index: 1;
}
.step-card h4 { margin-bottom: 0.5rem; color: var(--text-dark); }
.step-card p { font-size: 0.88rem; color: var(--text-mid); }

/* ── Destination Cards ──────────────────────────────────────────── */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--gap-lg);
    align-items: stretch;
}
.dest-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-gray);
    transition: var(--transition);
    display: flex;
    flex-direction: column;   /* equal-height cards in a row */
}
.dest-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(245,158,11,0.2);
}
.dest-card-img {
    height: 200px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.dest-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.dest-card:hover .dest-card-img img { transform: scale(1.07); }
/* Placeholder when no image */
.dest-card-img-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1e3050, #2d4a7a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 2.5rem;
}
.dest-badge {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.dest-badge.airport   { background: rgba(12,26,46,0.85);  color: #38bdf8; }
.dest-badge.beach     { background: rgba(14,165,233,0.85); color: #fff; }
.dest-badge.daytrip   { background: rgba(245,158,11,0.9);  color: #0c1a2e; }
.dest-badge.intercity { background: rgba(34,197,94,0.85);  color: #0c1a2e; }
.dest-badge.custom    { background: rgba(255,255,255,0.88);color: #0c1a2e; }

.dest-card-body {
    padding: 1.5rem 1.5rem;
    flex: 1;                    /* fills remaining height */
    display: flex;
    flex-direction: column;
}
.dest-card h3 {
    font-size: 0.95rem;
    margin-bottom: 0.45rem;
    color: var(--text-dark);
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.dest-card p {
    font-size: 0.82rem;
    color: var(--text-mid);
    line-height: 1.5;
    flex: 1;                   /* pushes details+actions to bottom */
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Distance / duration meta row */
.dest-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.dest-details span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.dest-details i { color: var(--blue-bright); font-size: 0.72rem; }
/* Button row at bottom of every card */
.dest-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-gray);
    flex-shrink: 0;
}
/* Legacy footer alias (homepage featured section) */
.dest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.375rem;
    border-top: 1px solid var(--border-gray);
    flex-shrink: 0;
}
.dest-distance {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.dest-distance i { color: var(--blue-bright); }

/* ── Filter Buttons ─────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-gray);
    background: var(--white);
    color: var(--text-mid);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}
.filter-btn:hover,
.filter-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--navy);
    font-weight: 700;
}
.dest-card.hidden { display: none; }

/* ── Testimonials ───────────────────────────────────────────────── */
.testimonials { background: var(--navy); }
.testimonials .section-header h2,
.testimonials .eyebrow { color: #fff; }
.testimonials .section-header p { color: rgba(255,255,255,0.6); }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-md); align-items: stretch; }
.testimonial-card {
    background: var(--navy-mid);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: var(--transition);
}
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
}
.testimonial-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1rem;
}
.testimonial-stars i { color: var(--primary); font-size: 0.9rem; }
.testimonial-text {
    color: rgba(255,255,255,0.8);
    font-size: 0.93rem;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1.5rem;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.testimonial-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--navy);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.testimonial-name { font-size: 0.9rem; font-weight: 600; color: #fff; }
.testimonial-origin { font-size: 0.78rem; color: rgba(255,255,255,0.5); }

/* ── CTA Banner ─────────────────────────────────────────────────── */
.cta-banner {
    background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
    padding: 4.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%; left: -20%;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(245,158,11,0.06);
    pointer-events: none;
}
.cta-banner h2 { color: #fff; margin-bottom: 1rem; }
.cta-banner p  { color: rgba(255,255,255,0.7); max-width: 520px; margin: 0 auto 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Booking Form Modal ─────────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12,26,46,0.75);
    backdrop-filter: blur(4px);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--navy);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header h3 { color: #fff; font-size: 1.2rem; }
.modal-header p  { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 0.2rem; }
.modal-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.modal-body { padding: 1.75rem; }
.modal-footer {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--border-gray);
    background: var(--surface);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}
.modal-footer .btn { width: 100%; justify-content: center; }
.modal-footer small { color: var(--text-muted); font-size: 0.78rem; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}
.form-group label .req { color: var(--primary-dark); margin-left: 2px; }
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--white);
    transition: var(--transition-fast);
    outline: none;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 100px; }

.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.form-error { font-size: 0.78rem; color: #ef4444; margin-top: 0.3rem; display: none; }
.form-group.has-error .form-control { border-color: #ef4444; }
.form-group.has-error .form-error { display: block; }

/* Service type selector */
.service-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.service-type-btn {
    padding: 0.875rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    text-align: center;
    transition: var(--transition-fast);
    font-family: inherit;
}
.service-type-btn:hover,
.service-type-btn.selected {
    border-color: var(--primary);
    background: var(--primary-pale);
}
.service-type-btn i { font-size: 1.4rem; display: block; margin-bottom: 0.3rem; color: var(--primary-dark); }
.service-type-btn span { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); }

/* Passenger counter */
.passenger-counter {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.counter-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-gray);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-dark);
}
.counter-btn:hover { border-color: var(--primary); color: var(--primary); }
.counter-value { font-size: 1.1rem; font-weight: 700; min-width: 24px; text-align: center; color: var(--text-dark); }

/* ── Confirmation Screen ─────────────────────────────────────────── */
.confirmation-screen { text-align: center; padding: 2rem 1rem; }
.confirmation-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(37,211,102,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #25d366;
}
.confirmation-screen h3 { margin-bottom: 0.75rem; }
.confirmation-screen p { color: var(--text-mid); margin-bottom: 1.5rem; }

/* ── Page Hero Header ───────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
    padding: 5rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23FFFBF5' d='M0,40L80,45C160,50,320,60,480,62C640,64,800,56,960,50C1120,44,1280,40,1360,40L1440,40L1440,80L0,80Z'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}
.page-hero .eyebrow { margin-bottom: 0.75rem; }
.page-hero h1 { color: #fff; margin-bottom: 1rem; }
.page-hero p  { color: rgba(255,255,255,0.7); max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* ── FAQ Accordion ──────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    margin-bottom: 0.875rem;
    overflow: hidden;
    transition: var(--transition);
}
.faq-item:hover { border-color: var(--border); }
.faq-question {
    width: 100%;
    padding: 1.1rem 1.5rem;
    background: var(--white);
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}
.faq-question:hover { background: var(--surface); }
.faq-question .faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
    color: var(--primary-dark);
}
.faq-item.open .faq-question .faq-icon { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: var(--surface);
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 1rem 1.5rem 1.25rem; color: var(--text-mid); font-size: 0.9rem; line-height: 1.7; }

/* ── Contact Methods Grid ───────────────────────────────────────── */
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap-md); margin-bottom: clamp(2rem, 4vw, 3rem); }
.contact-method {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}
.contact-method:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border); }
.contact-method-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
}
.contact-method-icon.green  { background: rgba(37,211,102,0.1); color: #25d366; }
.contact-method-icon.blue   { background: var(--blue-pale); color: var(--blue); }
.contact-method-icon.orange { background: var(--primary-pale); color: var(--primary-dark); }
.contact-method h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.contact-method p, .contact-method a { font-size: 0.85rem; color: var(--text-mid); }
.contact-method a:hover { color: var(--primary-dark); }

/* ── Coverage Map Card ──────────────────────────────────────────── */
.map-container {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 400px;
    background: var(--navy-mid);
}
.map-container iframe { width: 100%; height: 100%; border: 0; }

/* ── Mobile Nav Drawer ──────────────────────────────────────────── */
/*  Appended to <body> by JS — lives OUTSIDE the navbar's
    backdrop-filter stacking context so z-index works globally. */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 84vw);
    background: var(--navy);
    padding: calc(var(--navbar-h, 72px) + 0.75rem) 1.25rem 3rem;
    flex-direction: column;
    gap: 0;
    z-index: 10000;   /* global stack — no parent stacking context */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -6px 0 48px rgba(0,0,0,0.45);
    list-style: none;
}
.mobile-drawer.open {
    display: flex;
    animation: navSlideIn 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes navSlideIn {
    from { transform: translateX(100%); opacity: 0.7; }
    to   { transform: translateX(0);    opacity: 1;   }
}

/* Nav links inside the drawer */
.mobile-drawer li { list-style: none; }
.mobile-drawer .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.mobile-drawer .nav-link::after { display: none; } /* remove active underline */
.mobile-drawer .nav-link:hover,
.mobile-drawer .nav-link.active {
    background: rgba(245,158,11,0.12);
    color: var(--primary);
}
.mobile-drawer .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* Backdrop — below drawer (z-index 9999), tappable to close */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 38, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    cursor: pointer;
}
.nav-backdrop.open {
    display: block;
    animation: fadeIn 0.22s ease forwards;
}

/* ── Floating WhatsApp ──────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 300;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 6px 24px rgba(37,211,102,0.4);
    font-weight: 700;
    font-size: 0.9rem;
    transition: var(--transition);
    animation: waPulse 3s ease-in-out infinite;
}
.whatsapp-float i { font-size: 1.3rem; }
.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(37,211,102,0.55);
    animation: none;
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
    50%       { box-shadow: 0 6px 40px rgba(37,211,102,0.65); }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
    background: var(--navy);
    color: rgba(255,255,255,0.65);
    padding: 4rem 0 0;
    border-top: 1px solid var(--border-light);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;  /* explicit 4-col — never collapses */
    gap: clamp(2rem, 3vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-decoration: none;
}
.footer-logo-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.footer-logo-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.footer-logo-tagline {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.4);
    margin-top: 1px;
}
.footer-desc { font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.5rem; }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}
.footer-social a:hover { background: var(--primary); color: var(--navy); }
.footer-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.25rem;
}
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.55);
    transition: var(--transition-fast);
}
.footer-links a:hover { color: var(--primary); padding-left: 4px; }
.footer-contact-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
}
.footer-contact-list i {
    color: var(--primary);
    margin-top: 3px;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.footer-contact-list a { color: rgba(255,255,255,0.55); transition: var(--transition-fast); }
.footer-contact-list a:hover { color: var(--primary); }
.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.45); transition: var(--transition-fast); }
.footer-bottom-links a:hover { color: var(--primary); }

/* ── Scroll Reveal Animations ───────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Directional variants */
.reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-zoom {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.reveal-zoom.visible { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Clean cascade from large → small.
   Fluid auto-fit grids handle card reflow automatically;
   these queries only handle major structural layout shifts.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1280px — Narrow laptop: shrink hero form column ────────────── */
@media (max-width: 1280px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) min(400px, 46%); }
}

/* ── 1024px — Tablet landscape / small laptop ───────────────────── */
@media (max-width: 1024px) {
    /* Hero: single-column stacked, natural height */
    .hero {
        min-height: unset;
        align-items: flex-start;
    }
    .hero > .container {
        padding-top: clamp(5rem, 10vw, 7rem);
        padding-bottom: clamp(4rem, 8vw, 6rem);
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vw, 3rem);
    }
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-subtitle { max-width: 600px; }
    .hero-actions  { justify-content: center; }
    .hero-trust    { justify-content: center; }
    .hero-form-wrap {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    /* Footer: 2-column on tablet */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
    .footer-brand  { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: row; }

    /* Misc inner pages */
    .steps-grid::before      { display: none; }
    .about-grid              { grid-template-columns: 1fr; }
    .contact-grid            { grid-template-columns: 1fr; }
    .location-block          { grid-template-columns: 1fr; }
}

/* ── 920px — Tablet portrait: collapse nav to hamburger ─────────── */
@media (max-width: 920px) {
    /* Slightly smaller navbar logo on tablet */
    .nav-logo-img, .nav-logo svg { width: 54px; height: 54px; }

    /* Hide nav links — show hamburger */
    .nav-links  { display: none; }
    .hamburger  { display: flex; }

    /* Slim down navbar elements to prevent overflow */
    .nav-brand-tagline { display: none; }
    .nav-book-text     { display: none; }    /* icon-only Book button */
    .nav-book-btn      { padding: 0 0.9rem; } /* keep unified --nav-ctrl-h height */
    .nav-cta           { gap: 0.5rem; }

    /* Language dropdown: flag+code only (hide name text) */
    .lang-name { display: none; }
    .nav-lang-menu { min-width: 140px; right: 0; left: auto; }
}

/* ── 768px — Large mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-logo-img         { height: 112px; width: 112px; }
    .cta-logo-img          { height: 84px;  width: 84px;  margin-bottom: 1.25rem; }
    .testimonials-logo-img { height: 60px;  width: 60px;  }
    .footer-logo-img       { height: 76px;  width: 76px;  }

    /* Hero: tighter padding on phones */
    .hero > .container {
        padding-top: clamp(4.5rem, 12vw, 6rem);
        padding-bottom: 3rem;
    }
    .hero-badge { font-size: 0.72rem; padding: 0.35rem 0.875rem; }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 340px;
    }
    .hero-actions .btn { justify-content: center; width: 100%; white-space: normal; text-align: center; }
    .hero-trust { gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
    .hero-form-wrap { max-width: 100%; }
    .hero-form-card { padding: 1.375rem; }
    .hero-type-pills { grid-template-columns: repeat(2, 1fr); }
    .hf-row { grid-template-columns: 1fr; }
    .hero-scroll { display: none; }

    /* Modals */
    .modal { max-height: 95dvh; }
    .modal-body { padding: 1.25rem; }
    .service-type-grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-grid       { grid-template-columns: 1fr; gap: 1.75rem; }
    .footer-bottom     { flex-direction: column; text-align: center; gap: 0.5rem; }
    .footer-bottom-links { justify-content: center; }
    .footer-brand      { grid-column: auto; }

    /* Larger tap targets on touch screens (≥44px guideline) */
    .footer-links a        { display: inline-block; padding: 0.55rem 0; }
    .footer-links li       { margin-bottom: 0.1rem; }
    .footer-bottom-links a { display: inline-block; padding: 0.6rem 0.25rem; }
    .footer-social a       { width: 44px; height: 44px; }
    .lang-btn              { padding: 0.8rem 0.875rem; }

    /* Floating WA button */
    .whatsapp-float { bottom: 1rem; right: 1rem; padding: 0.75rem 1.25rem; font-size: 0.85rem; }

    /* Inner pages */
    .about-image img { height: 240px; }
    .hours-grid     { grid-template-columns: 1fr; }
    .hours-card     { flex-direction: column; gap: 0.75rem; }
    .form-row-2     { grid-template-columns: 1fr; }
}

/* ── 640px — Compact mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
    .page-hero { padding: 3.5rem 0 4.5rem; }
    .section-header { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions .btn { justify-content: center; width: 100%; white-space: normal; text-align: center; }
    .filter-bar  {
        gap: 0.4rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.25rem;
        /* Fade trailing edge as a "more chips — swipe" affordance */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
    [dir="rtl"] .filter-bar {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }
    .filter-btn  { padding: 0.65rem 1rem; min-height: 44px; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }

    /* Card grids — single column on small phones */
    .destinations-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
    .category-grid     { grid-template-columns: 1fr; }

    /* Destination card: compact image */
    .dest-card-img     { height: 180px; }
    .dest-card-body    { padding: 1.25rem 1.25rem; }
    .dest-card-footer  { padding: 0.75rem 1.25rem; }
    .dest-card-actions { gap: 0.4rem; }
    .dest-card-actions .btn { flex: 1; justify-content: center; font-size: 0.8rem; padding: 0.5rem 0.75rem; }

    /* Category card: compact image */
    .category-card-img { height: 140px; }
}

/* ── 480px — Small mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
    /* Navbar: hide phone + book buttons; accessible via float WA + hero */
    .nav-phone    { display: none; }
    .nav-book-btn { display: none; }
    .nav-cta      { gap: 0.35rem; }
    .navbar .container { gap: 0.5rem; }

    /* Show only first 2 trust items */
    .trust-item:nth-child(n+3) { display: none; }

    /* Stats bar: always 2 columns */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Modal tweaks */
    .modal { border-radius: var(--radius-sm); }
    .modal-body { padding: 1rem; }
    .service-type-grid { grid-template-columns: 1fr; }

    .contact-method { flex-direction: column; gap: 0.875rem; }

    /* Floating WA — icon only */
    .whatsapp-float-label { display: none; }
    .whatsapp-float { border-radius: 50%; padding: 1rem; }

    /* Hero */
    .hero-form-card { padding: 1.125rem; }
    .hero-badge     { display: none; }

    /* Language dropdown full width on tiny screens */
    .nav-lang-menu { right: -0.5rem; min-width: 160px; }
}

/* ── 375px — Smallest phones ────────────────────────────────────── */
@media (max-width: 375px) {
    .navbar .container { height: 62px; gap: 0.625rem; }
    .nav-logo svg, .nav-logo-img { width: 48px; height: 48px; }
    .hero-logo-img { height: 96px; width: 96px; }
    .nav-brand-name { font-size: 0.875rem; }
    .nav-lang-btn { padding: 0.35rem 0.5rem; }
    .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL STYLES — About, Destinations, Contact pages
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section utilities ───────────────────────────────────────────── */
.section-sm { padding: 2rem 0; }
.section-alt { background: var(--surface); }
.section-dark {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: rgba(255,255,255,0.8);
}
.section-dark .section-header h2,
.section-dark h2 { color: #fff; }
.section-dark .section-header p { color: rgba(255,255,255,0.6); }

.section-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-dark);
    background: var(--primary-pale);
    padding: 0.3rem 0.875rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.75rem;
}
.section-dark .section-tag { background: rgba(245,158,11,0.15); color: var(--primary); }

/* ── Page Hero (inner layout) ────────────────────────────────────── */
.page-hero-content { position: relative; z-index: 2; }
/* Optional Red Sea / Egypt photo behind the navy hero gradient */
.page-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}
/* Photo gallery (About page) */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.photo-gallery img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.photo-gallery img:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
@media (max-width: 768px) {
    .photo-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .photo-gallery img { height: 175px; }
}
@media (max-width: 480px) {
    .photo-gallery { grid-template-columns: 1fr; }
    .photo-gallery img { height: 200px; }
}
/* Coastal photo in the Contact location block */
.location-photo {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.page-hero-wave {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    line-height: 0;
    z-index: 1;
}
.page-hero-wave svg { display: block; width: 100%; }
.hero-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 0.3rem 0.875rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

/* ── CTA Section ─────────────────────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -40%; left: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: rgba(245,158,11,0.06);
    pointer-events: none;
}
.cta-content { position: relative; z-index: 1; }
.cta-content h2 { color: #fff; margin-bottom: 1rem; }
.cta-content p  { color: rgba(255,255,255,0.7); max-width: 520px; margin: 0 auto 2rem; }
.btn-cta {
    background: var(--primary);
    color: var(--navy);
    font-size: 1rem;
    padding: 0.875rem 2.25rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.btn-cta:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-gold); }

/* ── Destination page additions ─────────────────────────────────── */
.badge-airport  { background: var(--navy); color: var(--blue-bright); }
.badge-beach    { background: rgba(14,165,233,0.9); color: #fff; }
.badge-daytrip  { background: rgba(245,158,11,0.9); color: var(--navy); }
.badge-intercity{ background: rgba(99,102,241,0.85); color: #fff; }
.badge-custom   { background: rgba(255,255,255,0.9); color: var(--navy); }

.dest-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dest-details i { color: var(--primary-dark); margin-right: 0.25rem; }
.dest-card-actions {
    display: grid;
    /* minmax(0,…) lets columns shrink below content width so long
       translated button labels (FR/RU/IT) never overflow the card */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.dest-card-actions .btn {
    min-width: 0;
    white-space: normal;      /* allow 2-line labels instead of overflowing */
    line-height: 1.25;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    text-align: center;
}
.btn-dest-outline {
    background: transparent;
    border: 2px solid var(--border-gray);
    color: var(--text-mid);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: var(--transition-fast);
    justify-content: center;
}
.btn-dest-outline:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--primary-pale);
}
.dest-book-btn {
    width: 100%;
    display: block;
    text-align: center;
    background: var(--primary);
    color: var(--navy);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}
.dest-book-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ── About page ──────────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-text { }
.about-text h2 { font-size: 2rem; margin-bottom: 1.25rem; }
.about-text p { color: var(--text-mid); line-height: 1.75; margin-bottom: 1rem; }
.about-image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.about-image img { width: 100%; height: 380px; object-fit: cover; display: block; }
.about-image-badge {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    background: rgba(12,26,46,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: var(--radius);
    padding: 0.875rem 1.25rem;
    color: #fff;
    text-align: center;
}
.about-stat-big { font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
.about-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.2rem; }

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1.5rem;
}
.value-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    transition: var(--transition);
}
.value-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}
.value-icon {
    width: 52px; height: 52px;
    background: rgba(245,158,11,0.15);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 1.25rem;
}
.value-card h3 { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; }
.value-card p  { color: rgba(255,255,255,0.6); font-size: 0.875rem; line-height: 1.65; }

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: 2.5rem;
}
.coverage-col h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}
.coverage-list { list-style: none; }
.coverage-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-mid);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-light);
}
.coverage-list li:last-child { border-bottom: none; }
.coverage-list i { color: var(--primary-dark); font-size: 0.7rem; flex-shrink: 0; }

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1.5rem;
}
.fleet-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: var(--transition);
}
.fleet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.fleet-icon {
    width: 64px; height: 64px;
    background: var(--primary-pale);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    color: var(--primary-dark);
    margin: 0 auto 1.25rem;
}
.fleet-card h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.fleet-card p  { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1rem; }
.fleet-cap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-pale);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

/* ── Contact page ────────────────────────────────────────────────── */
.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
/* Centered contact cards — one accent colour per method (set via --accent) */
.contact-method {
    --accent: var(--primary-dark);
    --accent-soft: var(--primary-pale);
    --accent-rgb: 217,119,6;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    padding: 2.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;                 /* fill the equal-height grid cell */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
    color: inherit;
}
.contact-method:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
}
.contact-method-wa    { --accent: #128c7e; --accent-soft: rgba(37,211,102,0.12); --accent-rgb: 18,140,126; }
.contact-method-phone { --accent: var(--primary-dark); --accent-soft: var(--primary-pale); --accent-rgb: 217,119,6; }
.contact-method-email { --accent: #2563eb; --accent-soft: rgba(37,99,235,0.10);  --accent-rgb: 37,99,235; }

/* Icon disc — 64px circle, centered, tinted with the card accent */
.contact-method-icon {
    width: 64px; height: 64px;
    min-width: 64px;
    margin-bottom: 1.25rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    transition: transform 0.25s ease;
}
.contact-method:hover .contact-method-icon { transform: scale(1.06); }

.contact-method-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
    min-width: 0;
}
.contact-method-body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.contact-method-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.6rem;
    word-break: break-word;
}
.contact-method-body p {
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.65;
    margin-bottom: 0.5rem;
    max-width: 30ch;              /* keeps centered copy tidy, avoids ragged lines */
}
/* Action — a pill CTA pinned to the bottom, fills with the accent on hover */
.contact-method-action {
    margin-top: auto;             /* pin to bottom → all actions align across cards */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;
}
/* breathing room above the action even when the description is long */
.contact-method-body p:last-of-type { margin-bottom: 1.25rem; }
.contact-method:hover .contact-method-action {
    background: var(--accent);
    color: #fff;
}

.hours-card {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    padding: 1.75rem 2rem;
}
.hours-icon {
    width: 56px; height: 56px;
    min-width: 56px;
    background: var(--primary-pale);
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
}

/* Justified body copy for a clean, aligned block look */
.faq-answer p,
.location-block p,
.about-text p { text-align: justify; hyphens: auto; }
.hours-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.875rem; }
.hours-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.5rem;
    font-size: 0.85rem;
}
.hours-grid strong { color: var(--text-dark); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
}
/* Form & FAQ columns stretch to the same height; their cards fill the column */
.contact-grid > .reveal { display: flex; }
.contact-grid > .reveal > .contact-form-card { flex: 1; width: 100%; }
/* FAQ card scrolls internally if it would otherwise outgrow the form card */
.contact-faq-card { display: flex; flex-direction: column; }
.contact-faq-card .faq-list { flex: 1; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--white);
    transition: var(--transition-fast);
    outline: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }
.form-input::placeholder { color: var(--text-muted); }
.form-input.has-error { border-color: #ef4444; }
.form-textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.75rem; text-align: center; }
.btn-full { width: 100%; justify-content: center; display: flex; }

.faq-arrow {
    color: var(--primary-dark);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer p { padding: 1rem 1.5rem 1.25rem; color: var(--text-mid); font-size: 0.9rem; line-height: 1.7; }

.confirmation-box {
    text-align: center;
    padding: 2.5rem 1rem;
}
.confirmation-box .confirmation-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(37,211,102,0.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
    color: #25d366;
}
.confirmation-box h3 { margin-bottom: 0.75rem; }
.confirmation-box p  { color: var(--text-mid); }

.location-block {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
}
/* Map fills its column and matches the height of the info block beside it */
.location-block .location-map-framed { height: 100%; display: flex; }
.location-block .location-map-framed iframe { flex: 1; width: 100%; height: 100%; }
.location-details { margin-top: 1.5rem; }
.location-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-mid);
    margin-bottom: 0.75rem;
}
.location-row i { color: var(--primary-dark); width: 16px; text-align: center; flex-shrink: 0; }

/* ── Destination Detail Page ─────────────────────────────────────── */
.dest-detail-hero {
    position: relative;
    height: 480px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.dest-detail-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 6s ease;
}
.dest-detail-hero:hover .dest-detail-hero-img { transform: scale(1.04); }
.dest-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12,26,46,0.9) 0%, rgba(12,26,46,0.3) 60%, transparent 100%);
}
.dest-detail-hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 0;
}
.dest-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    transition: var(--transition-fast);
}
.dest-back-link:hover { color: var(--primary); }
.dest-detail-hero-content .dest-badge { margin-bottom: 0.875rem; display: inline-block; }
.dest-detail-hero-content h1 { color: #fff; margin-bottom: 0.75rem; }
.dest-detail-tagline {
    color: rgba(255,255,255,0.75);
    font-size: 1.1rem;
    max-width: 600px;
}

/* Key facts bar */
.dest-facts-bar {
    background: var(--navy-mid);
    border-bottom: 1px solid var(--border-light);
    padding: 1.25rem 0;
}
.dest-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.dest-fact {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 1rem;
}
.dest-fact i { font-size: 1.3rem; color: var(--primary); flex-shrink: 0; }
.dest-fact div { display: flex; flex-direction: column; }
.dest-fact-val { font-weight: 700; color: #fff; font-size: 0.95rem; line-height: 1.2; }
.dest-fact-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }

/* Main grid */
.dest-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: flex-start;
}
.dest-detail-main { }
.dest-detail-block {
    margin-bottom: 2.5rem;
}
.dest-detail-block h2 { margin-bottom: 1rem; }
.dest-detail-block h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}
.dest-detail-block h3 i { color: var(--primary); }
.dest-detail-block p { color: var(--text-mid); line-height: 1.8; font-size: 0.97rem; }
.dest-highlight-list,
.dest-included-list { list-style: none; }
.dest-highlight-list li,
.dest-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    color: var(--text-mid);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-gray);
}
.dest-highlight-list li:last-child,
.dest-included-list li:last-child { border-bottom: none; }
.dest-highlight-list li i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.dest-included-list li i { color: #22c55e; margin-top: 2px; flex-shrink: 0; }
.dest-note {
    background: var(--primary-pale);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.dest-note i { color: var(--primary-dark); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.dest-note p { margin: 0; color: var(--text-dark); font-size: 0.88rem; line-height: 1.6; }

/* Booking sidebar */
.dest-booking-sidebar { position: sticky; top: 100px; }
.dest-booking-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.dest-booking-card-header {
    background: var(--navy);
    color: #fff;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.05rem;
}
.dest-booking-card-header i { color: #25d366; font-size: 1.3rem; }
.dest-booking-card-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.875rem 1.5rem 0;
    margin: 0;
}
.dest-booking-card form { padding: 0.875rem 1.5rem 0; }
.dest-booking-card .btn-whatsapp { margin: 0 1.5rem 1.25rem; width: calc(100% - 3rem) !important; }
.dest-booking-trust {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border-gray);
    background: var(--surface);
}
.dest-booking-trust span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.dest-booking-trust i { color: var(--primary); }
.form-group-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.form-group-label i { color: var(--primary); font-size: 0.85rem; }

/* Related destinations */
.dest-related { background: var(--surface); border: 1px solid var(--border-gray); border-radius: var(--radius-xl); padding: 1.5rem; }
.dest-related h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1rem; }
.dest-related-links { display: flex; flex-direction: column; gap: 0.4rem; }
.dest-related-links a { font-size: 0.875rem; color: var(--text-mid); padding: 0.3rem 0; border-bottom: 1px solid var(--border-gray); transition: var(--transition-fast); }
.dest-related-links a:last-child { border-bottom: none; }
.dest-related-links a:hover { color: var(--primary-dark); padding-left: 4px; }

/* ── Inner page responsive (fluid auto-fit handles most; only overrides here) */
@media (max-width: 1024px) {
    .dest-detail-grid { grid-template-columns: 1fr; }
    .dest-booking-sidebar { position: static; }
    .dest-detail-hero { height: 380px; }
    .dest-facts-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 768px) {
    .dest-detail-hero { height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCEMENT STYLES — v2 additions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Testimonial Cards — equal heights, justified text ──────────── */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-text { flex: 1; text-align: justify; hyphens: auto; }
.testimonial-author { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }

/* nav-phone is defined in the main nav section above — no duplicate needed */

/* Language dropdown styles are in the main Language Dropdown section above.
   Note: .lang-flag and .lang-current-flag are flag-icons spans (.fi.fi-xx). */

/* ══════════════════════════════════════════════════════════════════
   CHECKBOX COMPONENT — shared base, two visual themes
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero Form Bags Wrapper ─────────────────────────────────────── */
.hf-bags-wrap {
    padding: 0.875rem 1rem;
    background: rgba(245,158,11,0.06);
    border: 1.5px solid rgba(245,158,11,0.25);
    border-radius: var(--radius-sm);
    margin-bottom: 0.875rem;
}

/* ── Shared checkbox label (hero & modal) ───────────────────────── */
.hf-checkbox-label,
.checkbox-field-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

/* Hide the native checkbox in both contexts */
.hf-checkbox-label  input[type="checkbox"],
.checkbox-field-label input[type="checkbox"] { display: none; }

/* ── Custom checkbox box — light theme (modal on white bg) ──────── */
.checkbox-custom {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid #94a3b8;   /* visible gray on white */
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.checkbox-field-label { font-size: 0.9rem; color: var(--text-dark); font-weight: 500; }

.checkbox-field-label input:checked ~ .checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}
.checkbox-field-label input:checked ~ .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px; left: 6px;
    width: 5px; height: 10px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
/* Hover ring on light background */
.checkbox-field-label:hover .checkbox-custom {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}

/* ── Custom checkbox box — dark theme (hero form on white card) ─── */
.hf-checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #94a3b8;   /* visible gray — form card is white */
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hf-checkbox-label {
    font-size: 0.875rem;
    color: var(--text-dark);     /* dark text — form card is white */
    font-weight: 500;
}

.hf-checkbox-label input:checked ~ .hf-checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}
.hf-checkbox-label input:checked ~ .hf-checkbox-custom::after {
    content: '';
    position: absolute;
    top: 1px; left: 5px;
    width: 5px; height: 9px;
    border: 2px solid var(--navy);
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.hf-checkbox-label:hover .hf-checkbox-custom {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}

/* Bags count field */
.hf-bags-count { margin-top: 0.875rem; }
.hf-bags-count label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-mid);
    margin-bottom: 0.35rem;
    font-weight: 600;
}
.hf-bags-count .hf-input { max-width: 140px; }

/* ── Destination Admin Cards ─────────────────────────────────────── */
.dest-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}
.dest-admin-card {
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.dest-admin-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.dest-admin-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: var(--admin-border);
}
.dest-admin-card-img-placeholder {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #1e293b, #334155);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 2rem;
}
.dest-admin-card-body { padding: 1rem; }
.dest-admin-card-name { font-weight: 600; font-size: 0.95rem; color: var(--admin-text); margin-bottom: 0.3rem; }
.dest-admin-card-cat  { font-size: 0.75rem; color: var(--admin-muted); }
.dest-admin-card-foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--admin-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ── Status Toggle Badge ─────────────────────────────────────────── */
.badge-active   { background: rgba(16,185,129,0.12); color: #10b981; }
.badge-inactive { background: rgba(100,116,139,0.12); color: #64748b; }

/* ── Image Upload Preview ────────────────────────────────────────── */
.img-preview-wrap {
    border: 2px dashed var(--admin-border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    position: relative;
}
.img-preview-wrap:hover { border-color: var(--admin-primary); }
.img-preview-wrap img { max-height: 160px; max-width: 100%; border-radius: 8px; margin: 0 auto; }
.img-preview-hint { font-size: 0.8rem; color: var(--admin-muted); margin-top: 0.5rem; }

/* nav-phone responsive is in the main responsive block above */

/* ═══════════════════════════════════════════════════════════════════
   RTL (Right-to-Left) — active when <html dir="rtl"> (Arabic)
   Uses Cairo font for clean Arabic rendering.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Root: Arabic font + base direction ─────────────────────────── */
[dir="rtl"],
[dir="rtl"] body {
    font-family: 'Cairo', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
    direction: rtl;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5 {
    font-family: 'Cairo', 'Playfair Display', serif;
    letter-spacing: 0;
    line-height: 1.45;
}

/* ── Navbar ──────────────────────────────────────────────────────── */
/* No flex-direction overrides: with <html dir="rtl"> the flex row flows
   right-to-left natively, giving the desired order — logo on the RIGHT,
   then links, then controls (language → phone → WhatsApp) toward the left.
   (row-reverse here would double-flip back to an LTR-looking bar.) */
[dir="rtl"] .nav-lang-menu {
    right: auto;
    left: 0;
}
[dir="rtl"] .lang-btn {
    text-align: right;
}
[dir="rtl"] .nav-brand-text {
    text-align: right;
}
/* Hamburger needs no override: it is last in the DOM, so native RTL flow
   already places it at the far LEFT (mirroring its LTR far-right spot). */

/* ── Hero ────────────────────────────────────────────────────────── */
[dir="rtl"] .hero-content {
    text-align: right;
    align-items: flex-end;
}
[dir="rtl"] .hero-badge {
    flex-direction: row-reverse;
}
[dir="rtl"] .hero-actions {
    justify-content: flex-end;
    flex-direction: row-reverse;
}
[dir="rtl"] .hero-trust {
    justify-content: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
[dir="rtl"] .trust-item {
    flex-direction: row-reverse;
}
/* Booking form pills */
[dir="rtl"] .hero-type-pills {
    direction: rtl;
}
[dir="rtl"] .hf-row {
    direction: rtl;
}
[dir="rtl"] .hf-input,
[dir="rtl"] .hf-select {
    text-align: right;
    direction: rtl;
}

/* ── Stats bar ───────────────────────────────────────────────────── */
[dir="rtl"] .stats-grid {
    direction: rtl;
}

/* ── Section headers ─────────────────────────────────────────────── */
[dir="rtl"] .section-header {
    text-align: right;
}
[dir="rtl"] .eyebrow::before {
    right: 0;
    left: auto;
    transform-origin: right;
}

/* ── Category cards ──────────────────────────────────────────────── */
[dir="rtl"] .category-card {
    text-align: right;
}
[dir="rtl"] .category-card-footer {
    flex-direction: row-reverse;
}
[dir="rtl"] .category-card-arrow {
    flex-direction: row-reverse;
}

/* ── Destination cards ───────────────────────────────────────────── */
[dir="rtl"] .dest-card {
    text-align: right;
}
[dir="rtl"] .dest-card-actions,
[dir="rtl"] .dest-card-footer {
    flex-direction: row-reverse;
}
[dir="rtl"] .dest-details {
    flex-direction: row-reverse;
}
[dir="rtl"] .dest-badge {
    left: auto;
    right: 0.875rem;
}

/* ── Feature cards (Why Choose Us) ──────────────────────────────── */
[dir="rtl"] .feature-card {
    text-align: right;
}

/* ── Steps (How It Works) ────────────────────────────────────────── */
[dir="rtl"] .steps-grid {
    direction: rtl;
}
[dir="rtl"] .step-card {
    text-align: right;
}
[dir="rtl"] .steps-grid::before {
    /* Reverse the connector line direction */
    transform: scaleX(-1);
}

/* ── Testimonials ────────────────────────────────────────────────── */
[dir="rtl"] .testimonial-card {
    text-align: right;
}
[dir="rtl"] .testimonial-author {
    flex-direction: row-reverse;
}
[dir="rtl"] .testimonial-stars {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── Buttons with icons ──────────────────────────────────────────── */
[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

/* ── Filter bar ──────────────────────────────────────────────────── */
[dir="rtl"] .filter-bar {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* ── Modal ───────────────────────────────────────────────────────── */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .modal-body {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .form-group label {
    text-align: right;
    display: block;
}
[dir="rtl"] .form-control,
[dir="rtl"] textarea.form-control {
    text-align: right;
    direction: rtl;
}
[dir="rtl"] select.form-control {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .form-row {
    direction: rtl;
}
/* Input icon positions (mirror) */
[dir="rtl"] .input-icon-wrap > i:first-child {
    left: auto;
    right: 0.875rem;
}
[dir="rtl"] .input-icon-wrap .form-control {
    padding-left: 0.875rem;
    padding-right: 2.5rem;
}
[dir="rtl"] .toggle-password {
    right: auto;
    left: 0.875rem;
}
[dir="rtl"] .service-type-grid {
    direction: rtl;
}
[dir="rtl"] .passenger-counter {
    flex-direction: row-reverse;
}
[dir="rtl"] .checkbox-field-label {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
[dir="rtl"] .confirmation-screen {
    direction: rtl;
}

/* ── CTA banner ──────────────────────────────────────────────────── */
[dir="rtl"] .cta-actions {
    flex-direction: row-reverse;
    justify-content: center;
}

/* ── Page hero (inner pages) ─────────────────────────────────────── */
[dir="rtl"] .page-hero-content {
    text-align: right;
}

/* ── Footer ──────────────────────────────────────────────────────── */
[dir="rtl"] .footer-grid {
    direction: rtl;
}
[dir="rtl"] .footer-col {
    text-align: right;
}
[dir="rtl"] .footer-logo {
    flex-direction: row-reverse;
}
[dir="rtl"] .footer-logo-brand {
    text-align: right;
}
[dir="rtl"] .footer-links a {
    text-align: right;
    display: block;
}
[dir="rtl"] .footer-contact-list li {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}
[dir="rtl"] .footer-bottom-links {
    flex-direction: row-reverse;
}

/* ── Destination detail page ─────────────────────────────────────── */
[dir="rtl"] .dest-detail-grid {
    direction: rtl;
}
[dir="rtl"] .dest-highlight-list li,
[dir="rtl"] .dest-included-list li {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .dest-detail-block {
    text-align: right;
}
[dir="rtl"] .dest-booking-card-header {
    flex-direction: row-reverse;
}

/* ── Hero form card ──────────────────────────────────────────────── */
[dir="rtl"] .hero-form-card-header {
    flex-direction: row-reverse;
}
[dir="rtl"] .hero-form-card {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .hf-bags-wrap {
    direction: rtl;
}
[dir="rtl"] .hf-checkbox-label {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── About & Contact pages ───────────────────────────────────────── */
[dir="rtl"] .about-grid,
[dir="rtl"] .contact-grid {
    direction: rtl;
}
[dir="rtl"] .values-grid,
[dir="rtl"] .features-grid {
    direction: rtl;
}
[dir="rtl"] .feature-icon,
[dir="rtl"] .feature-card h4,
[dir="rtl"] .feature-card p {
    text-align: right;
}
[dir="rtl"] .contact-method {
    text-align: center;
}
[dir="rtl"] .faq-question {
    text-align: right;
    flex-direction: row-reverse;
}
[dir="rtl"] .faq-answer {
    text-align: right;
}

/* ── Floating WhatsApp button ─────────────────────────────────────── */
[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 1.5rem;
    flex-direction: row-reverse;
}

/* ── Admin login page (RTL) ─────────────────────────────────────── */
[dir="rtl"] .login-card {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .login-header {
    text-align: center; /* keep logo centered */
}
[dir="rtl"] .login-form {
    direction: rtl;
}
[dir="rtl"] .login-form label {
    text-align: right;
}

/* ── RTL responsive tweaks ───────────────────────────────────────── */
@media (max-width: 920px) {
    [dir="rtl"] .nav-links {
        /* Mobile overlay: text right, scroll from right */
        padding-right: 1.5rem;
        padding-left: 1rem;
    }
}
@media (max-width: 640px) {
    [dir="rtl"] .dest-card-actions,
    [dir="rtl"] .dest-card-footer {
        flex-direction: row-reverse;
    }
    [dir="rtl"] .hero-actions {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ================================================================
   About & Contact redesign (v2, June 2026)
   ================================================================ */

/* ── About: editorial story ─────────────────────────────────────── */
.about-grid-v2 { grid-template-columns: 1.05fr 1fr; align-items: start; }
.about-lead {
    font-size: 1.08rem;
    color: var(--text-dark) !important;
    font-weight: 500;
}
.about-lead::first-letter {
    font-family: 'Playfair Display', serif;
    font-size: 3.4em;
    font-weight: 800;
    float: left;
    line-height: 0.82;
    padding: 0.06em 0.12em 0 0;
    color: var(--primary-dark);
}
.about-quote {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--primary-pale);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    position: relative;
}
.about-quote i {
    color: var(--primary);
    opacity: 0.4;
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
    display: block;
}
.about-quote p {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

/* Image composition: main + offset accent + floating chip */
.about-visual { position: relative; padding-bottom: 4.5rem; }
.about-visual .about-image-main { position: relative; z-index: 1; }
.about-image-accent {
    position: absolute;
    z-index: 2;
    right: -0.75rem;
    bottom: 1.25rem;
    width: clamp(120px, 38%, 190px);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--white);
    transform: rotate(2.5deg);
    transition: var(--transition);
}
.about-visual:hover .about-image-accent { transform: rotate(0deg) translateY(-4px); }
.about-image-accent img { width: 100%; height: 140px; object-fit: cover; display: block; }
.about-visual-chip {
    position: absolute;
    z-index: 2;
    left: 1rem;
    bottom: 2.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(245,158,11,0.35);
}
.about-visual-chip i { color: var(--primary); }

/* ── About: journey timeline ────────────────────────────────────── */
.journey-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    position: relative;
    margin-top: 2.5rem;
}
.journey-track::before {
    /* dashed route line through the dots */
    content: '';
    position: absolute;
    top: 26px;
    left: 9%;
    right: 9%;
    border-top: 2px dashed rgba(217,119,6,0.45);
    z-index: 0;
}
.journey-stop { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
.journey-dot {
    width: 54px; height: 54px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-gold), 0 0 0 6px var(--bg-light);
}
.journey-stop h4 { font-size: 1.02rem; margin-bottom: 0.45rem; color: var(--text-dark); }
.journey-stop p  { font-size: 0.875rem; color: var(--text-mid); line-height: 1.65; max-width: 300px; margin: 0 auto; }
.section-alt .journey-dot { box-shadow: var(--shadow-gold), 0 0 0 6px var(--surface); }

/* ── About: stats band reuse ────────────────────────────────────── */
.about-stats {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(245,158,11,0.12), transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(14,165,233,0.10), transparent 50%),
        var(--navy);
}

/* ── About: values v2 ───────────────────────────────────────────── */
.values-grid-v2 .value-card { position: relative; overflow: hidden; }
.values-grid-v2 .value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--blue-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.values-grid-v2 .value-card:hover::before { transform: scaleX(1); }
.value-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.value-card-top .value-icon { margin-bottom: 0; }
.value-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255,255,255,0.12);
    transition: var(--transition);
}
.values-grid-v2 .value-card:hover .value-num { color: rgba(245,158,11,0.45); }

/* ── About: route board (coverage) ──────────────────────────────── */
.route-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: 2.5rem;
}
.route-col {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-xl);
    padding: 1.5rem 1.5rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.route-col:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.route-col-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    padding-bottom: 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
}
.route-col-title i { color: var(--primary-dark); }
.route-list { list-style: none; }
.route-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    font-size: 0.875rem;
    color: var(--text-mid);
    border-bottom: 1px solid #F1F5F9;
}
.route-list li:last-child { border-bottom: none; }
.route-name {
    font-weight: 500;
    color: var(--text-dark);
    flex: 0 1 auto;          /* shrink + wrap long names instead of overflowing */
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.route-name em { font-style: normal; font-size: 0.78rem; color: var(--primary-dark); font-weight: 600; }
.route-leader {
    flex: 1 1 auto;
    align-self: flex-end;
    border-bottom: 2px dotted #CBD5E1;
    margin-bottom: 0.35rem;
    min-width: 12px;
}
.route-time {
    flex: 0 0 auto;          /* never shrink — the time pill stays fully visible */
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--navy);
    background: var(--blue-pale);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.route-base .route-time { background: var(--primary-pale); color: var(--primary-dark); }
.route-base .route-name { color: var(--primary-dark); }

/* ── About: fleet v2 ────────────────────────────────────────────── */
.fleet-grid-v2 .fleet-card { position: relative; }
.fleet-card-featured {
    border-color: rgba(245,158,11,0.55) !important;
    box-shadow: var(--shadow-gold);
}
.fleet-flag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--navy);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.28rem 0.85rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ── About: mosaic gallery ──────────────────────────────────────── */
.photo-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 170px;
    gap: 0.875rem;
}
.photo-mosaic .mosaic-item { position: relative; border-radius: var(--radius); overflow: hidden; margin: 0; }
.photo-mosaic .mosaic-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.photo-mosaic .mosaic-item:nth-child(4) { grid-column: span 2; }
.photo-mosaic img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}
.photo-mosaic .mosaic-item:hover img { transform: scale(1.06); }
.photo-mosaic figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.6rem 0.9rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(12,26,46,0.78), transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: var(--transition);
}
.photo-mosaic .mosaic-item:hover figcaption { opacity: 1; transform: translateY(0); }

/* ── Contact: hero quick chips ──────────────────────────────────── */
.contact-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: var(--transition-fast);
}
.hero-chip:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.hero-chip i { color: var(--primary); }
.hero-chip-wa { background: linear-gradient(135deg, #128c7e, #25d366); border-color: transparent; }
.hero-chip-wa i { color: #fff; }
.hero-chip-wa:hover { background: linear-gradient(135deg, #0e7569, #1fc157); }

/* ── Contact: method cards v2 ───────────────────────────────────── */
.contact-methods-v2 .contact-method { position: relative; }
.method-response {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-pale);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.contact-method-featured .method-response {
    color: #0e7569;
    background: rgba(37,211,102,0.12);
    border-color: rgba(37,211,102,0.35);
}
.contact-method-featured {
    border: 2px solid rgba(37,211,102,0.45) !important;
    box-shadow: 0 12px 40px rgba(37,211,102,0.18);
}

/* ── Contact: trust strip ───────────────────────────────────────── */
.contact-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2.5vw, 2.25rem);
    justify-content: center;
    margin-top: 1.75rem;
    padding: 1rem 1.5rem;
    background: var(--primary-pale);
    border: 1px dashed rgba(217,119,6,0.4);
    border-radius: var(--radius-xl);
}
.trust-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-dark);
}
.trust-fact i { color: var(--primary-dark); }

/* ── Contact: elevated form card ────────────────────────────────── */
.contact-form-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    box-shadow: var(--shadow-md);
}

/* ── Contact: framed map + overlay card ─────────────────────────── */
.location-map-framed {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-lg);
}
.location-map-framed iframe { display: block; }
.map-overlay-card {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
    padding: 0.75rem 1.1rem;
    box-shadow: var(--shadow-md);
    max-width: calc(100% - 2rem);
}
.map-overlay-card i { color: var(--primary-dark); font-size: 1.25rem; }
.map-overlay-card strong { display: block; font-size: 0.875rem; color: var(--text-dark); }
.map-overlay-card span { font-size: 0.74rem; color: var(--text-mid); }

/* ── v2 responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .about-grid-v2 { grid-template-columns: 1fr; }
    .about-visual { max-width: 560px; margin: 0 auto; }
    .journey-track { grid-template-columns: 1fr; gap: 2rem; max-width: 420px; margin-inline: auto; }
    .journey-track::before {
        top: 8%; bottom: 8%;
        left: 26px; right: auto;
        border-top: none;
        border-left: 2px dashed rgba(217,119,6,0.45);
    }
    .journey-stop { text-align: left; padding-left: 4.5rem; }
    .journey-dot { position: absolute; left: 0; margin: 0; }
    .journey-stop p { margin: 0; }
    .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .photo-mosaic .mosaic-item:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 560px) {
    .about-image-accent { right: 0.25rem; }
    .photo-mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .photo-mosaic .mosaic-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .contact-trust-strip { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ── v2 RTL mirrors ─────────────────────────────────────────────── */
[dir="rtl"] .about-lead::first-letter { float: right; padding: 0.06em 0 0 0.12em; }
[dir="rtl"] .about-quote {
    border-left: none;
    border-right: 4px solid var(--primary);
    border-radius: var(--radius) 0 0 var(--radius);
    text-align: right;
}
[dir="rtl"] .about-image-accent { right: auto; left: -0.75rem; transform: rotate(-2.5deg); }
[dir="rtl"] .about-visual-chip { left: auto; right: 1rem; }
[dir="rtl"] .value-card-top { flex-direction: row-reverse; }
[dir="rtl"] .route-col-title { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .route-list li { flex-direction: row-reverse; }
[dir="rtl"] .method-response { right: auto; left: 1rem; }
[dir="rtl"] .map-overlay-card { left: auto; right: 1rem; flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .contact-hero-chips { justify-content: flex-end; }
[dir="rtl"] .journey-stop { text-align: right; }
@media (max-width: 900px) {
    [dir="rtl"] .journey-track::before { left: auto; right: 26px; }
    [dir="rtl"] .journey-stop { padding-left: 0.5rem; padding-right: 4.5rem; }
    [dir="rtl"] .journey-dot { left: auto; right: 0; }
}

/* ================================================================
   v2 mobile / tablet polish (June 2026)
   Placed at end of file so these win over the base 2-col rules
   that are declared after the legacy media queries.
   ================================================================ */

/* ── Tablet & below: stack the 2-col layouts ────────────────────── */
@media (max-width: 900px) {
    .contact-grid   { grid-template-columns: 1fr; gap: 2.75rem; }
    .location-block { grid-template-columns: 1fr; gap: 1.75rem; }
    /* Justified text creates ugly rivers in narrow columns */
    .location-block p, .about-text p { text-align: left; hyphens: none; }
    [dir="rtl"] .location-block p, [dir="rtl"] .about-text p { text-align: right; }
    .location-map-framed iframe { height: 300px; width: 100%; }
    .location-photo { width: 100%; }
}

/* ── iPad band: featured WhatsApp card spans the full first row ─── */
@media (min-width: 641px) and (max-width: 1024px) {
    .contact-methods-v2 { grid-template-columns: 1fr 1fr; }
    .contact-methods-v2 .contact-method-featured { grid-column: 1 / -1; }
}

/* ── Phones ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    /* Form fields: one per row so placeholders are never truncated */
    .form-row-2 { grid-template-columns: 1fr; gap: 0; }

    /* About story composition: drop the rotated accent photo,
       center the floating chip under a slightly shorter image */
    .about-image-accent { display: none; }
    .about-visual { padding-bottom: 3.4rem; }
    .about-image img { height: 300px; }
    .about-visual-chip {
        left: 50%;
        right: auto;
        bottom: 0.8rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }
    [dir="rtl"] .about-visual-chip { left: 50%; right: auto; transform: translateX(-50%); }

    /* Map overlay card: full-width strip at the bottom of the map */
    .map-overlay-card { left: 0.6rem; right: 0.6rem; max-width: none; }
    [dir="rtl"] .map-overlay-card { left: 0.6rem; right: 0.6rem; }

    /* Quote: slightly tighter on phones */
    .about-quote { padding: 1rem 1.1rem; }
    .about-quote p { font-size: 1.05rem; }
}

/* ================================================================
   Language-Specific Responsive Design (FR, IT, RU)
   These languages have longer text, requiring tighter layouts
   ================================================================ */

/* French (FR) - typically +15% longer than English */
html[lang="fr"] .dest-card p,
html[lang="fr"] .service-card p,
html[lang="fr"] .feature-card p,
html[lang="fr"] .category-card-body p {
    font-size: 0.8rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
}

html[lang="fr"] .dest-card h3,
html[lang="fr"] .service-card h3,
html[lang="fr"] .feature-card h3 {
    font-size: 0.9rem;
    line-height: 1.25;
}

/* Italian (IT) - typically +10% longer than English */
html[lang="it"] .dest-card p,
html[lang="it"] .service-card p,
html[lang="it"] .feature-card p,
html[lang="it"] .category-card-body p {
    font-size: 0.81rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
}

html[lang="it"] .dest-card h3,
html[lang="it"] .service-card h3,
html[lang="it"] .feature-card h3 {
    font-size: 0.92rem;
    line-height: 1.25;
}

/* Russian (RU) - typically +20% longer than English, uses Cyrillic */
html[lang="ru"] .dest-card p,
html[lang="ru"] .service-card p,
html[lang="ru"] .feature-card p,
html[lang="ru"] .category-card-body p {
    font-size: 0.78rem;
    line-height: 1.4;
    word-spacing: -0.05em;
    -webkit-line-clamp: 4;
}

html[lang="ru"] .dest-card h3,
html[lang="ru"] .service-card h3,
html[lang="ru"] .feature-card h3 {
    font-size: 0.88rem;
    line-height: 1.2;
    word-spacing: -0.05em;
}

/* Adjust button text for longer languages */
html[lang="fr"] .btn,
html[lang="it"] .btn,
html[lang="ru"] .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
}

/* Form labels for longer text */
html[lang="fr"] label,
html[lang="it"] label,
html[lang="ru"] label {
    font-size: 0.9rem;
}

/* Hero section adjustments */
html[lang="fr"] .hero-subtitle,
html[lang="it"] .hero-subtitle,
html[lang="ru"] .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
}

/* Featured card titles */
html[lang="fr"] .featured-card h3,
html[lang="it"] .featured-card h3,
html[lang="ru"] .featured-card h3 {
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Why choose us sections */
html[lang="fr"] .why-item h3,
html[lang="it"] .why-item h3,
html[lang="ru"] .why-item h3 {
    font-size: 1rem;
}

html[lang="fr"] .why-item p,
html[lang="it"] .why-item p,
html[lang="ru"] .why-item p {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Ensure proper text wrapping for all languages */
html[lang="fr"] *,
html[lang="it"] *,
html[lang="ru"] * {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile adjustments for long languages */
@media (max-width: 640px) {
    html[lang="fr"] .dest-card p,
    html[lang="it"] .dest-card p,
    html[lang="ru"] .dest-card p {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    html[lang="fr"] .hero-subtitle,
    html[lang="it"] .hero-subtitle,
    html[lang="ru"] .hero-subtitle {
        font-size: 0.9rem;
    }

    html[lang="fr"] .destinations-grid,
    html[lang="it"] .destinations-grid,
    html[lang="ru"] .destinations-grid {
        grid-template-columns: 1fr;
    }
}
}