/*
 * Travel Agency: Tourister
 * Main CSS Styles
 */

:root {
    /* Color Palette */
    --primary: #0a4d68;        /* Deep Blue */
    --primary-light: #088395;
    --secondary: #ff7f50;      /* Coral Accent */
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --border-color: #eeeeee;
    --success: #28a745;
    --danger: #dc3545;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    /* Spacing & Borders */
    --container-width: 1200px;
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;

    /* Standard image ratio for all content cards (tour / blog / news) and
       gallery thumbnails. Change here to reshape every card at once. */
    --card-ratio: 3 / 2;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
    /* overflow-x: hidden breaks position:sticky for every descendant, so we
       use overflow-x: clip instead — same visual effect (no horizontal scroll)
       without the scroll-container side-effect. */
    overflow-x: clip;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

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

ul {
    list-style: none;
}

/* `height: auto` is REQUIRED, not cosmetic. ImageOptimizer::picture() now emits
   intrinsic width/height on every <img> so the browser can reserve the right box
   before the file arrives (the fix for layout shift on mobile, where 23 of 39
   images on a tour page used to have no dimensions). With max-width capping the
   width but the height attribute still honoured, images would render squashed
   without this. Rules that deliberately set a fixed height — .tour-image img,
   .blog-image img, .hero-slide__img, .vehicle-img — are more specific and win. */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Layout Sections */
section {
    padding: 4rem 0;
}

/* Header & Navigation */
.header {
    background-color: var(--bg-white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.logo--image {
    padding: 0;
}
.logo--image img {
    display: block;
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
}

/* Top-level list */
.nav-links > ul {
    display: flex;
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links a,
.nav-links .menu-parent > a {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links .menu-parent > a:hover {
    color: var(--primary);
}

/* 1st-level dropdown — opens below the nav item (mirrors sandbox's ul ul) */
.nav-links .has-dropdown .dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 180px;
    width: max-content;
    padding: 0.5rem 0;
    z-index: 200;
    list-style: none;
    border: 1px solid var(--border-color);
}

/* Invisible hover bridge: spans the 0.5rem gap between the parent item and the
   dropdown so the cursor never leaves the :hover region while travelling down.
   Without this the submenu closes before it can be clicked. */
.nav-links .has-dropdown .dropdown::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
}

/* 2nd-level flyout — opens to the right (mirrors sandbox's ul ul ul) */
.nav-links .dropdown .has-dropdown .dropdown {
    top: -0.5rem;
    left: 100%;
    margin-top: 0;
}
/* For the right-side flyout the bridge sits on the left edge instead. */
.nav-links .dropdown .has-dropdown .dropdown::before {
    top: 0;
    left: -0.6rem;
    right: auto;
    width: 0.6rem;
    height: 100%;
}

/* Items inside any dropdown */
.nav-links .has-dropdown .dropdown > li {
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}
.nav-links .has-dropdown .dropdown > li:last-child { border-bottom: none; }

.nav-links .has-dropdown .dropdown li a {
    display: block;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-links .has-dropdown .dropdown li a:hover {
    background: var(--bg-light);
    color: var(--primary);
}

/* Nested parent item: show a right-arrow caret */
.nav-links .dropdown .has-dropdown > .menu-parent::after {
    content: '›';
    margin-left: auto;
    padding-left: 0.5rem;
    opacity: 0.6;
    font-size: 1rem;
}

/* Open dropdown on hover (desktop) */
.nav-links .has-dropdown:hover > .dropdown {
    display: block;
}

/* Open on checkbox toggle (mobile) */
.nav-links .submenu-toggle:checked ~ .dropdown {
    display: block;
}

/* Label wrapping the parent link (makes whole row clickable on mobile) */
.nav-links .menu-parent {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.25rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-main);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--bg-white);
}

.btn-primary:hover {
    background-color: var(--primary-light);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--bg-white);
}

/* Hero Section */
.hero {
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bg-white);
}

/* Slide headings: only the first slide gets the page's single <h1>; later
   slides render <h2> (see home/index.php). They must look identical, so both
   selectors carry the hero sizing at every breakpoint below. */
.hero-content h1,
.hero-content h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ── Hero Slider (admin-managed, see Admin → Hero Slider) ──────────────── */
.hero-slider { position: relative; height: 80vh; overflow: hidden; background: #0b1f33; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .8s ease;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--bg-white, #fff);
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3)); }
.hero-slide .hero-content { position: relative; z-index: 2; }
.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.35); color: #fff; font-size: 1.8rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hero-nav:hover { background: rgba(0,0,0,.6); }
.hero-nav--prev { left: 16px; }
.hero-nav--next { right: 16px; }
.hero-dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3; display: flex; gap: 8px; justify-content: center; }
.hero-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-dot.is-active { background: #fff; }
@media (max-width: 768px) { .hero-slider { height: 60vh; min-height: 420px; } }
@media (max-width: 480px) { .hero-slider { height: 70vh; min-height: 380px; } .hero-nav { width: 36px; height: 36px; font-size: 1.4rem; } }

/* Service Grid Expansion */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); /* Smaller cards for more services */
    gap: 1.5rem;
}

.service-card i {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    display: block;
}

/* Row Headers */
.row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.row-header h2 {
    margin-bottom: 0;
}

.view-all {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Home Blog Row */
.home-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--bg-light);
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    background: var(--bg-white);
}

.service-card h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

/* Tour Cards */
.tour-grid {
    display: grid;
    /* min(350px, 100%) lets the track shrink below 350px when the viewport
       is narrower (e.g. 320px phones) instead of blowing out the layout. */
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 2rem;
}

/* Archive page uses denser cards (300px min) — same shrink trick. */
.tour-grid--archive {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Tours listing: clean, fixed 3-per-row grid (replaces the filter sidebar
   layout). Falls back to 2 columns on tablets and 1 on phones. */
.tour-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tour-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tour-grid--3 { grid-template-columns: 1fr; } }

.tour-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    /* Column layout so .tour-footer's margin-top:auto has something to push
       against — otherwise prices sit at different heights across a row
       whenever titles wrap to a different number of lines. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tour-card:hover {
    transform: translateY(-5px);
}

/* Whole-card link variant — used on the homepage so clicking anywhere on
   the card navigates, not just the small button. */
.tour-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.tour-card--link h3 { color: var(--text-dark); }
.tour-card--link:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.tour-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
    font-size: 1rem;
}

/* <picture> wrappers (from ImageOptimizer::picture) must be transparent so that
   existing ".x img { height:100% }" cover rules keep resolving against the real
   container instead of the inline wrapper. */
picture { display: contents; }

.tour-image {
    aspect-ratio: var(--card-ratio);
    position: relative;
    /* Both properties are load-bearing now that .tour-card is a flex column.
       `flex: none` stops the box being shrunk when the grid stretches cards to a
       common row height. `overflow: hidden` clips the cover-cropped image. */
    flex: none;
    overflow: hidden;
}

/* Absolutely positioned so the image contributes NOTHING to its parent's height
   — the box is sized purely by aspect-ratio. In normal flow a flex item's
   `flex-basis: auto` resolves against content, so a portrait-ish photo pushed
   .tour-image past 3:2 and every card in a row ended up a different height
   (measured 241 / 271 / 289px). Height must not depend on the photo. */
.tour-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--secondary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tour-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tour-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

/* Tour card fact list — the comparison row that replaced the excerpt.
   Wraps rather than truncates: a fact cut in half is worse than a second line. */
.tour-facts {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-light);
}
.tour-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.4;
}
.tour-facts svg {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0.75;
}
/* Pickup is a selling point, not just an attribute — the one fact here worth
   colouring. Green reads as "included" without needing a label. */
.tour-facts li.is-perk { color: #15803d; font-weight: 600; }
.tour-facts li.is-perk svg { opacity: 1; }

/* Pushed to the bottom so cards in a row line their prices up regardless of
   how many lines the title takes. */
.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.tour-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

/* Rating Stars — legacy (show page header) */
.rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.stars { color: #ffc107; font-size: 0.9rem; }
.rating-count { font-size: 0.8rem; color: var(--text-light); }

/* Tour card star rating — fractional fill via clip */
.tour-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 10px;
    font-size: 13px;
}
.tour-stars {
    position: relative;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
}
.tour-stars__track {
    display: block;
    color: #e2e8f0; /* empty star colour */
}
.tour-stars__fill {
    position: absolute;
    left: 0; top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f59e0b; /* filled star colour (amber-400) */
}
.tour-rating-value {
    font-weight: 700;
    color: var(--text);
}
.tour-rating-count {
    color: var(--text-light);
    font-size: 12px;
}

/* SEO Utilities */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Archive / Tours Page */
.archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.filter-sidebar {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    height: sticky;
    top: 100px;
}

/* Tablet & phone — sidebar stacks above the tour grid so the grid gets the
   full container width. Without this the 280px sidebar would crush the tour
   grid (which needs ~300px per card) at 320–375px viewports. */
@media (max-width: 992px) {
    .archive-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
@media (max-width: 480px) {
    .filter-sidebar { padding: 1.25rem; }
}

.filter-group {
    margin-bottom: 2rem;
}

.filter-group h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-option input {
    cursor: pointer;
}

/* Page Header */
.page-header {
    background: var(--primary);
    color: var(--bg-white);
    padding: 4rem 0;
    text-align: center;
}

.page-header h1 {
    margin-bottom: 0;
}

.traveler-rating-badge { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.75rem; padding:.35rem .9rem; border-radius:999px; background:rgba(255,255,255,.15); font-size:.85rem; }
.traveler-rating-badge__stars { font-weight:700; color:#fbbf24; }
.traveler-rating-badge__label { opacity:.9; }

/* Headline "from" price in the tour hero (dark, centered header). */
.tour-hero-price { display:inline-flex; align-items:baseline; gap:.45rem; margin-top:1.35rem; padding:.45rem 1.1rem; background:rgba(255,255,255,.14); border-radius:999px; color:#fff; }
.tour-hero-price__label { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.tour-hero-price__amount { font-size:1.7rem; font-weight:800; line-height:1; }
.tour-hero-price__unit { font-size:.85rem; opacity:.85; }
/* Hero fact bar — duration / capacity / languages, above the price badge. */
.tour-hero-facts { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap;
    justify-content:center; gap:.4rem 1.4rem; color:rgba(255,255,255,.92); font-size:.92rem; }
.tour-hero-facts li { display:inline-flex; align-items:center; gap:.4rem; line-height:1.4; }
.tour-hero-facts svg { width:16px; height:16px; flex:none; opacity:.8; }
/* Former price. Rendered only when an admin has set one above the live price —
   see the guard in tours/show.php. Never generated automatically. */
.tour-hero-price__was { font-size:1.05rem; font-weight:600; opacity:.7; text-decoration:line-through; }
.tour-hero-price__save { font-size:.78rem; font-weight:700; letter-spacing:.02em; background:#c2410c; color:#fff; padding:.15rem .45rem; border-radius:5px; align-self:center; }
/* Card variant */
.tour-price__was { font-size:.9rem; font-weight:600; color:var(--text-light,#94a3b8); text-decoration:line-through; margin-right:.35rem; }

/* Homepage — small neat bar above the hero slider (light background, so the
   badge needs a light-context variant instead of the dark-header one above). */
.home-rating-bar { padding:.6rem 0; text-align:center; background:var(--bg-light); border-bottom:1px solid var(--border-color); }
.home-rating-bar .traveler-rating-badge { background:var(--bg-white); border:1px solid var(--border-color); margin-bottom:0; }
.home-rating-bar .traveler-rating-badge__stars { color:#d97706; }
.home-rating-bar .traveler-rating-badge__label { color:var(--text-light); opacity:1; }

/* Transfers Page */
.booking-widget {
    background: var(--bg-white);
    padding: 3rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    max-width: 800px;
    margin: -50px auto 4rem;
    position: relative;
    z-index: 10;
}

.booking-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--bg-light);
}

.booking-tab {
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.booking-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.booking-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-family: var(--font-main);
    font-size: 0.95rem;
    background: var(--bg-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45,156,219,.12);
}
.form-group { margin-bottom: 1rem; }

.vehicle-options {
    margin-top: 3rem;
}

.vehicle-card {
    display: flex;
    gap: 2rem;
    background: var(--bg-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    align-items: center;
}

.vehicle-img {
    width: 200px;
    height: 120px;
    object-fit: contain;
}

.vehicle-info {
    flex: 1;
}

/* Blog Page */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2.5rem;
}

.blog-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-image {
    aspect-ratio: var(--card-ratio);
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: 1.5rem;
}

.blog-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
}

.blog-content h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Sidebar Widgets */
.sidebar-widget {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

.sidebar-widget h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: var(--bg-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}

/* Single Post */
.post-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.75;
}

.post-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.post-content a:hover {
    color: var(--secondary);
    text-decoration: none;
}

.post-content p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    list-style-position: outside;
}

.post-content ul { list-style-type: disc; }
.post-content ol { list-style-type: decimal; }

.post-content blockquote {
    border-left: 4px solid var(--primary, #2563eb);
    padding-left: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    color: var(--text-light, #6b7280);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius, 6px);
}

/* In-body figures (contextual section images + caption) */
.post-content .post-figure {
    margin: 1.8rem 0;
    text-align: center;
}
.post-content .post-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--radius, 8px);
}
.post-content .post-figure figcaption {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--muted, #6b7280);
    line-height: 1.4;
    font-style: italic;
}
/* Subtle "placeholder" tag — remove this rule once real photos are in. */
.post-content .post-figure--placeholder {
    position: relative;
}
.post-content .post-figure--placeholder figcaption::before {
    content: "placeholder";
    display: inline-block;
    margin-right: .5rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 2rem 0;
}

/* Tables inside post content */
.post-content .table-responsive {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.post-content .table-responsive table { margin: 0; }

.post-content table th,
.post-content table td {
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 10px 14px;
    text-align: left;
}

.post-content table th {
    background: var(--bg-light, #f9fafb);
    font-weight: 600;
}

.post-content table tbody tr:nth-child(even) { background: #fafafa; }
.post-content table tbody tr:hover { background: #f0f7ff; }

/* In-content accordion (native <details>). Authored straight into post/tour
   body HTML as <details class="story-acc">. Content stays in the DOM when
   collapsed, so it is fully crawlable — the collapse is presentation only. */
.post-content .story-acc {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 8px);
    background: var(--bg-white, #fff);
    margin: 0 0 .6rem;
    overflow: hidden;
}

.post-content .story-acc > summary {
    cursor: pointer;
    padding: .9rem 2.6rem .9rem 1.15rem;
    font-weight: 600;
    list-style: none;
    position: relative;
}

.post-content .story-acc > summary::-webkit-details-marker { display: none; }

.post-content .story-acc > summary::after {
    content: '+';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--primary, #0ea5e9);
}

.post-content .story-acc[open] > summary::after { content: '\2212'; }
.post-content .story-acc[open] > summary { border-bottom: 1px solid var(--border-color, #e5e7eb); }

.post-content .story-acc > summary:hover { background: var(--bg-light, #f9fafb); }

.post-content .story-acc > *:not(summary) {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.post-content .story-acc > p { margin: .9rem 0; }
.post-content .story-acc > ul,
.post-content .story-acc > ol { margin: .9rem 0; padding-left: 2.6rem; }

/* Clearfix for floated images */
.post-content::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Block Editor Layouts (mirrors sandbox style.css — keep in sync)
   ========================================================================== */

.block-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 1rem 0;
    width: 100%;
}

.block-col {
    position: relative;
    min-width: 0; /* prevent flex overflow */
}

@media (max-width: 768px) {
    .block-row { flex-direction: column; }
    .block-col { width: 100% !important; flex: 1 1 100% !important; }
}

/* Resizable images (alignment floats) */
.resizable-wrapper {
    display: block;
    position: relative;
    max-width: 100%;
    margin: 1rem 0;
}

.resizable-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    margin: 0;
}

.resizable-wrapper.align-left  { float: left;  margin-right: 15px; margin-bottom: 10px; }
.resizable-wrapper.align-center { display: block; margin: 10px auto; text-align: center; }
.resizable-wrapper.align-right { float: right; margin-left: 15px;  margin-bottom: 10px; }

/* Embed blocks (video, iframe — 16:9) */
.embed-block { margin: 1.5rem 0; }

.embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.embed-responsive iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.embed-block[data-provider="Twitter"] .embed-responsive {
    padding-bottom: 0;
    height: auto;
    background: transparent;
}

/* ==========================================================================
   End Block Editor Layouts
   ========================================================================== */

.post-header {
    text-align: center;
    margin-bottom: 3rem;
}

.post-featured-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

/* Tour Detail Page */
.tour-info {
    min-width: 0;
    grid-area: info;
}
.tour-extra { min-width: 0; grid-area: extra; }
.tour-detail-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-areas:
        "info  sidebar"
        "extra sidebar";
    column-gap: 3rem;
    row-gap: 0;
    align-items: start;
}

.itinerary-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
}

.itinerary-header {
    background: var(--bg-light);
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.itinerary-toggle {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.itinerary-toggle::before { content: '+'; }
.itinerary-item.open .itinerary-toggle::before { content: '−'; }

.itinerary-item.open .itinerary-header {
    border-bottom: 1px solid var(--border-color);
}

.itinerary-content {
    padding: 1.5rem;
    display: none;
}
.itinerary-item.open .itinerary-content { display: block; }

/* Aside stretches by default (grid `align-items: stretch`); we want that
   because position:sticky on a child can only stick for as long as its
   containing block is in view. The long left column (gallery/overview/
   itinerary) gives the sticky booking form plenty of track to scroll
   against. */
.tour-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    grid-area: sidebar;
}

.tour-related {
    background: var(--bg-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.booking-sidebar {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Sticky opts-in via body.sticky-sidebar (Tour Settings toggle) and only on
   desktop — on tablet/phone the aside stacks under the info column, where
   sticky would just block content. */
@media (min-width: 1025px) {
    /* position:sticky can only travel inside its own containing block — here the
       <aside>. .tour-detail-grid sets `align-items: start`, which shrinks every
       grid item to its content height, so the aside was only ~856px tall on an
       ~8,000px page. The card therefore stuck for ~330px and then scrolled away
       with its parent, which reads as "sticky is broken".
       Stretching just this item back to the row height gives the card the full
       page to travel along. The aside is a column flex container and its children
       keep their natural heights, so nothing else moves. */
    .tour-detail-grid > .tour-sidebar { align-self: stretch; }

    /* The offset is tightened toward the header by tour-page.js on viewports
       too short to show the whole card at 100px. The fallback keeps the
       original behaviour when that script has not run. */
    body.sticky-sidebar .booking-sidebar {
        position: sticky;
        top: var(--bk-sticky-top, 100px);
    }
}

/* Very short viewports. This note used to say the browser "simply will not
   engage sticky" when the card cannot fit. That is WRONG, and it hid a real
   bug for three weeks: `top: 100px` makes sticky engage as soon as the card's
   top passes the offset, whether or not the rest of it fits, and the card then
   holds with its foot below the fold until the aside's containing block ends
   near the footer. Measured 2026-08-25: a 743px card on a 719px viewport pinned
   at top=100 and clipped 123px — the checkout and WhatsApp buttons among it.
   The card must keep following the scroll regardless — that is the whole point
   of the setting — so the fix is NOT to unstick it (tried 2026-08-25, it took
   the following behaviour away on ordinary laptop screens and was reverted the
   same day). tour-page.js instead tightens the sticky offset toward the header
   on short viewports, which narrows the clipped strip. Card height is the only
   real lever on what is left, which is why this card is kept lean.

   Two other workarounds were tried earlier and both were worse than the problem:
   capping the height hid the checkout button behind an inner scrollbar, and
   bottom-anchoring never engaged at all. Do not reintroduce either. */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-item {
    aspect-ratio: var(--card-ratio);
    border-radius: var(--radius);
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 992px) {
    /* Single column: booking form sits ABOVE faq/reviews (conversion best
       practice) — info, then the sidebar/booking, then the extra block. */
    .tour-detail-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "sidebar"
            "extra";
        row-gap: 2.5rem;
    }
    .tour-extra { margin-top: 0; }

    /* Inside the stacked sidebar, the booking form must come BEFORE "You might
       also like". On desktop the related-tours card sits on top with the sticky
       booking form beside the content, which is fine — but once stacked, that
       order pushes the conversion point below a list of links pointing AWAY
       from this tour. .tour-sidebar is already a flex column, so this is a
       visual reorder only: DOM order is unchanged, so desktop layout, reading
       order for crawlers and tab order are all untouched. */
    .tour-sidebar .booking-sidebar { order: 1; }
    .tour-sidebar .tour-related    { order: 2; }
}

/* Footer */
.footer {
    background-color: var(--primary);
    color: var(--bg-white);
    padding: 4rem 0 2rem;
    margin-top: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-heading {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Responsive */
/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 1.5rem;
}

.lang-switcher a {
    color: var(--text-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.lang-switcher a.active {
    color: var(--primary);
    background: var(--bg-light);
}

/* Standard Blog Layout */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    margin-top: 2rem;
}

.blog-main {
    /* Wide area for cards */
}

.blog-sidebar {
    /* Narrow area for widgets */
}

.blog-main .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile nav ──────────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: var(--transition);
}

@media (max-width: 768px) {
    .header .nav-toggle { display: flex !important; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: var(--shadow);
        z-index: 999;
    }
    .nav-links.open { display: block; }

    /* Stack menu items vertically on mobile */
    .nav-links > ul {
        flex-direction: column;
        gap: 0;
        padding: 0.75rem 0;
    }
    .nav-links li {
        width: 100%;
    }
    .nav-links a,
    .nav-links .menu-parent {
        display: block;
        padding: 0.65rem 1.5rem;
    }
    /* Show submenus inline on mobile. Full width (no narrowing box / margin) so
       every row and its bottom border spans the whole nav — nesting is shown by
       a subtle background tint and progressive left padding instead. */
    .nav-links .has-dropdown .dropdown {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 0;
        width: 100%;
        margin-left: 0;
        padding: 0;
        background: var(--bg-light);
        display: none; /* still toggled by checkbox */
    }
    .nav-links .dropdown .dropdown { background: #eef2f6; } /* deeper level, deeper tint */
    .nav-links .has-dropdown:hover .dropdown {
        display: none; /* disable hover on mobile */
    }
    .nav-links .submenu-toggle:checked ~ .dropdown {
        display: block;
    }
    /* Progressive indent via padding (keeps rows full-width). Direct children
       only, so the label's inner <a> isn't double-padded. !important is needed
       to beat leftover legacy nav rules in style.css (header nav ul ul li>a {
       padding-left:3rem !important }) that only match leaf <a>s, not .menu-parent
       rows — which otherwise misaligned parent items (Destinations) vs leaves
       (Multi-day Tours) at the same level. */
    .nav-links .dropdown > li > a,
    .nav-links .dropdown > li > .menu-parent { padding-left: 2.75rem !important; }
    .nav-links .dropdown .dropdown > li > a,
    .nav-links .dropdown .dropdown > li > .menu-parent { padding-left: 4rem !important; }

    /* Parent row toggles the submenu on mobile (no hover): the wrapped link must
       not capture the tap, or it navigates to the parent instead of expanding. */
    .nav-links .has-dropdown > .menu-parent a {
        pointer-events: none;
    }
    /* Single indent — the row padding lives on .menu-parent, so the inner link
       must not add its own (that was pushing "Tours" further right). */
    .nav-links .menu-parent > a {
        padding: 0;
        display: inline;
    }
    /* …but the rule above (0,2,1) loses to the desktop rule
       `.nav-links .has-dropdown .dropdown li a` (0,3,2) for NESTED parents, so
       "Destinations"/"Activities" kept an extra 1.1rem on their inner link and
       sat ~18px right of their own siblings ("Day Tours"), while their children
       landed only ~2px further still — making parent and child look like the
       same level. This selector (0,4,2) outranks it and restores one clean step
       per level. */
    .nav-links .has-dropdown .dropdown li > .menu-parent > a {
        padding: 0;
        display: inline;
    }
    /* Same specificity story for the affordance: the desktop flyout rule
       `.nav-links .dropdown .has-dropdown > .menu-parent::after` (content:'›')
       beat the mobile caret below, so nested parents showed a right-pointing
       chevron instead of the expand/collapse triangle. Equal specificity here,
       declared later, so the mobile glyph wins. */
    .nav-links .dropdown .has-dropdown > .menu-parent::after {
        content: '▾';
    }
    /* Expand/collapse affordance on the top-level parent row. */
    .nav-links .has-dropdown > .menu-parent {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-links .has-dropdown > .menu-parent::after {
        content: '▾';
        opacity: 0.6;
        transition: transform 0.2s ease;
    }
    .nav-links .has-dropdown > .submenu-toggle:checked ~ .menu-parent::after {
        transform: rotate(180deg);
    }

    .header-actions {
        display: none;
    }

    /* Guarantee header items fit on smallest devices */
    .container { padding: 0 0.75rem; }
    .nav { gap: 0.5rem; }
    .logo {
        font-size: 1.15rem;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header .nav-toggle {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

@media (max-width: 360px) {
    .container { padding: 0 0.5rem; }
    .logo { font-size: 1rem; }
}

/* ── Flash alert messages ────────────────────────────────────────── */
.alert {
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ── Booking inquiry: promo + referrer row ──────────────────────── */
.bk-codes {
    margin-top: 1rem;
    border-top: 1px dashed var(--border-color);
    padding-top: 0.9rem;
}
.bk-codes__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.bk-codes__field { flex: 1 1 140px; min-width: 0; }
.bk-codes__apply { flex: 0 0 auto; }
.bk-codes__field label,
.bk-codes__apply label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.bk-codes__opt {
    font-weight: 400;
    color: var(--text-light);
    font-size: 0.8rem;
}
.bk-codes__field input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-transform: uppercase;
    font-family: monospace;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    line-height: 1.2;
    box-sizing: border-box;
}
.bk-codes__apply .btn {
    padding: 0.55rem 1rem;
    white-space: nowrap;
}
.bk-codes__feedback {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: none;
}

/* ── Session messages (CSS-only dismissible) ─────────────────────── */
.alert-wrap { margin-bottom: 1rem; }
.alert-toggle { position: absolute; opacity: 0; pointer-events: none; }
.msg {
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
}
.msg-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-close {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
    opacity: 0.55;
    user-select: none;
}
.alert-close:hover { opacity: 1; }
.alert-toggle:checked + .msg { display: none; }

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
}
.pagination a:hover { background: var(--primary); color: white; }
.pagination .current-page { background: var(--primary); color: white; border-color: var(--primary); }

/* ── Language dropdown switcher ──────────────────────────────────── */
.lang-dropdown {
    position: relative;
}
.lang-current {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    user-select: none;
    color: var(--text-dark);
}
.lang-current:hover { background: var(--bg-light); }
.caret { font-size: 0.7rem; opacity: 0.6; }
.lang-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 130px;
    padding: 0.4rem 0;
    z-index: 300;
    list-style: none;
    margin: 0;
}
.lang-dropdown-list li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
}
.lang-dropdown-list li a:hover {
    background: var(--bg-light);
    color: var(--primary);
}
/* Open on checkbox toggle */
#lang-toggle:checked ~ .lang-dropdown-list { display: block; }
.lang-dropdown:focus-within .lang-dropdown-list { display: block; }

/* ── Currency switcher ───────────────────────────────────────────── */
.curr-dropdown { position: relative; }
.curr-current {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    user-select: none;
    color: var(--text-dark);
}
.curr-current:hover { background: var(--bg-light); }
.curr-symbol { font-size: 1rem; }
.curr-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 170px;
    padding: 0.4rem 0;
    z-index: 300;
    list-style: none;
    margin: 0;
}
.curr-dropdown-list li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
}
.curr-dropdown-list li a:hover { background: var(--bg-light); color: var(--primary); }
.curr-dropdown-list li a.active { color: var(--primary); }
.curr-opt-symbol { width: 16px; text-align: center; font-size: 1rem; }
.curr-opt-name { font-weight: 400; color: var(--text-light); font-size: 0.8rem; margin-left: auto; }
#curr-toggle:checked ~ .curr-dropdown-list { display: block; }
.curr-dropdown:focus-within .curr-dropdown-list { display: block; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ── Floating buttons (scroll-to-top + admin edit) ───────────────── */
.floating-buttons {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
#scrollToTopBtn {
    display: none;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: opacity .3s, transform .2s;
    align-items: center;
    justify-content: center;
}
#scrollToTopBtn:hover { transform: translateY(-2px); opacity: .9; }
.fab {
    display: flex;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: transform .2s;
    text-decoration: none;
}
.fab:hover { transform: translateY(-2px); }
.fab-edit {
    background: #f59e0b;
    color: #fff;
}
.fab-whatsapp { background: #25D366; color: #fff; }
.fab-telegram { background: #229ED9; color: #fff; }

/* ── Auth pages (login / signup / password) ──────────────────────── */
.login-wrapper {
    max-width: 420px;
    margin: 4rem auto;
    padding: 0 1rem;
}
.sidebar-box {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.login-header {
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: 1.5rem;
}
.login-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
.login-link {
    color: var(--primary);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}
.login-link:hover { color: var(--primary-light); text-decoration: underline; }
.btn-block {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: 0.85rem;
    font-size: 1rem;
}

/* Password field with show/hide toggle */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}
.password-field input {
    flex: 1;
    padding-right: 2.75rem !important;
}
.password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.15s;
}
.password-toggle:hover { color: var(--primary); }

/* ── Booking widget ────────────────────────────────────────────────────── */
.bk-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}
.bk-type-tab {
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bk-type-tab:not(:last-child) { border-right: 1px solid var(--border-color); }
.bk-type-tab.active {
    background: var(--primary);
    color: #fff;
}

/* Per-tab live price (tour page only — the checkout tabs have no price span,
   so these rules are inert there). The amount is the thing being compared, so
   it outsizes the Group/Private label rather than sitting under it as a hint. */
.bk-type-tab:has(.bk-type-tab__price) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.4rem;
    line-height: 1.2;
}
.bk-type-tab__label {
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.75;
}
.bk-type-tab__price {
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.bk-type-tab__price:empty { display: none; }

@media (max-width: 380px) {
    .bk-type-tab__price { font-size: 1.15rem; }
}
.bk-pane { display: none; }
.bk-pane.active { display: block; }

.bk-pax-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 4px;
}
.bk-pax-btn {
    width: 40px;
    flex-shrink: 0;
    background: var(--bg-light);
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.55rem 0;
    color: var(--text);
    transition: background 0.15s;
}
.bk-pax-btn:hover:not(:disabled) { background: var(--border-color); }
.bk-pax-btn:disabled { opacity: .4; cursor: default; }
.bk-pax-stepper input[type="number"] {
    flex: 1;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.55rem 0;
    background: #fff;
    -moz-appearance: textfield;
}
.bk-pax-stepper input[type="number"]::-webkit-outer-spin-button,
.bk-pax-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

.bk-price-summary {
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}
.bk-price-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.bk-price-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.4rem;
    color: var(--text);
}
.bk-price-total strong { font-weight: 800; }
.bk-price-sep { color: var(--text-light); }
.bk-pax-hint {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 4px;
}
.bk-no-price {
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 0.5rem;
    text-align: center;
}

/* ── Grid items must be allowed to shrink ────────────────────────────────
   A grid (and flex) item's automatic minimum size is min-content, NOT zero. On
   the transfer page the vehicle photo carries width="1200", so on a COLD load —
   before the browser has the rendered size and while `max-width:100%` has
   nothing to clamp against — the 1fr column resolved to ~1258px instead of
   772px. That pushed the booking card off the right edge of the page and let
   the content span the full width. It looked intermittent because a warm cache
   sizes the image immediately and hides it.

   `min-width: 0` opts these items out of that automatic minimum so the declared
   track sizes always win, regardless of how or when images load. */
.tr-layout > .tr-main,
.tr-layout > .tr-summary,
.tour-detail-grid > * {
    min-width: 0;
}
/* Belt and braces: no media in these columns may exceed its track. */
.tr-main img,
.tour-detail-grid img {
    max-width: 100%;
    height: auto;
}

/* ── Booking card: conversion polish ─────────────────────────────────────
   The card previously used --primary for BOTH the active Group/Private tile
   and the checkout button, so the single most actionable element on the page
   carried no more visual weight than a segmented control. The CTA now uses the
   coral accent family instead of the teal, in a shade dark enough for white
   text to clear WCAG AA (#c2410c on #fff ≈ 5.2:1; the raw --secondary coral
   #ff7f50 is only ≈2.6:1 and would fail). */
:root {
    --cta: #c2410c;
    --cta-hover: #9a3412;
}

/* Class-based, not scoped to .booking-sidebar, so the tour card and the
   transfer summary card share one CTA treatment. */
.btn-primary.bk-cta {
    background-color: var(--cta);
    border-color: var(--cta);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(194, 65, 12, .25);
}
.btn-primary.bk-cta:hover,
.btn-primary.bk-cta:focus-visible {
    background-color: var(--cta-hover);
    border-color: var(--cta-hover);
}

/* Social proof, directly under "Book This Tour". Rendered only when the tour
   has real first-party reviews — see the guard in tours/show.php. */
.bk-proof {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    font-size: .88rem; margin-bottom: .7rem; color: var(--text-dark);
}
.bk-proof__stars { color: #f59e0b; font-size: 1rem; line-height: 1; }
.bk-proof__sep   { color: var(--text-light); margin-left: -.15rem; }
.bk-proof__count { color: var(--text-light); text-decoration: underline; text-underline-offset: 2px; }
.bk-proof__count:hover { color: var(--primary); }
.bk-proof__badge {
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
    border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
}

/* Grand total. The dashed rule already separates it from the controls above, so
   it does not also need a full 1rem of air on top of that. */
.bk-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--border-color);
}
.bk-total__label { font-weight: 600; color: var(--text-dark); }
.bk-total__value { text-align: right; }
.bk-total__value #bk-total-amount,
.bk-total__value #sum-total { font-size: 1.45rem; font-weight: 800; color: var(--primary); display: block; line-height: 1.15; }
.bk-total__value small { color: var(--text-light); font-size: .78rem; display: block; }
/* The transfer card already had its own amount row; inherit the shared look
   without its original flex/border rules fighting this one. */
.bk-total--tr { border-top: 1px dashed var(--border-color); }

/* Date field: the browser's own "mm/dd/yyyy" cannot be replaced by a
   placeholder attribute, so it is hidden until the field is focused or filled
   and a real label is shown over it. */
/* ── Date / time picker ───────────────────────────────────────────────────
   A trigger that expands a panel, with the real value in a hidden input.
   Collapsed by default so a booking card stays short.

   Moved here from tours/show.php: the tour booking card and the transfer
   planner now render the same control, so a visitor never meets two different
   date fields on the same site. Tour pages additionally colour the days by
   availability (tour-page.js); transfers have no availability model, so every
   future day is simply open. */
.bk-date-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .62rem .75rem; border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px; background: var(--input-bg, #f8fafc); color: var(--text-light, #64748b);
    font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.bk-date-toggle:hover { background: #fff; border-color: #d6dade; }
.bk-date-toggle[aria-expanded="true"] { border-color: #c2410c; background: #fff; }
.bk-date-toggle.has-value { color: inherit; font-weight: 600; }
.bk-date-toggle svg { flex: none; opacity: .65; }

.bk-cal { margin-top: .5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: .6rem .65rem .7rem; background: var(--card-bg, #fff); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.bk-cal-title { font-weight: 600; font-size: .95rem; }
.bk-cal-nav { background: transparent; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; width: 28px; height: 28px; line-height: 1; cursor: pointer; color: inherit; font-size: 1rem; }
.bk-cal-nav:hover:not(:disabled) { background: rgba(0,0,0,.05); }
.bk-cal-nav:disabled { opacity: .35; cursor: default; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-cal-dow { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-light, #64748b); padding: .2rem 0 .3rem; }
.bk-cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px; font-size: .85rem; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.bk-cal-day.is-open { background: rgba(21,128,61,.09); color: #15803d; font-weight: 600; }
.bk-cal-day.is-open:hover { background: rgba(21,128,61,.2); }
.bk-cal-day.is-closed { color: var(--text-light, #94a3b8); opacity: .45; cursor: default; text-decoration: line-through; }
.bk-cal-day.is-empty { cursor: default; }
.bk-cal-day.is-selected { outline: 2px solid #c2410c; outline-offset: -2px; }
/* Plain selectable day — used where there is no availability data to colour by,
   so the grid does not imply a green "confirmed open" it cannot vouch for. */
.bk-cal-day.is-free { color: inherit; }
.bk-cal-day.is-free:hover { background: rgba(0,0,0,.05); }
/* Hover detail. Positioned by the day cell, not the grid, so it tracks the
   hovered date without any JS layout maths. */
.bk-cal-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #fff; font-size: .72rem; font-weight: 500; line-height: 1.35;
    padding: .35rem .5rem; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.18); }
/* Only on hover/focus — without this every day in the month renders its own
   tooltip at once and the grid disappears behind them. */
.bk-cal-day:hover .bk-cal-tip,
.bk-cal-day:focus-visible .bk-cal-tip { display: block; }
.bk-cal-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1e293b; }
.bk-cal-legend { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .55rem; font-size: .72rem; color: var(--text-light, #64748b); }
.bk-cal-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.bk-cal-legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
@media (prefers-color-scheme: dark) { .bk-cal { background: rgba(255,255,255,.03); } }
.bk-date-status.is-warn     { color: #b45309; }
.bk-date-status.is-ok       { color: #15803d; }
.bk-date-status.is-loading  { color: var(--text-light); }
.bk-suggest { margin-top: 0.35rem; }
.bk-suggest-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 0 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.78rem;
    background: var(--bg-white);
    cursor: pointer;
    line-height: 1.4;
}
.bk-suggest-chip:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

/* Time panel — the same shell as .bk-cal so a pickup time reads as a sibling of
   the date, not a leftover native field. Scrolls rather than growing tall. */
.bk-timegrid { margin-top: .5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px;
    padding: .55rem .6rem; background: var(--card-bg, #fff);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
    max-height: 214px; overflow-y: auto; }
/* An author `display` beats the UA's `[hidden] { display: none }`, so without
   this the time panel stays on screen after close() sets the attribute — the
   calendar closed correctly only because .bk-cal never sets display. */
.bk-timegrid[hidden] { display: none; }
.bk-time-slot { border: 1px solid transparent; border-radius: 6px; padding: .42rem .2rem;
    font-size: .85rem; font-variant-numeric: tabular-nums; background: transparent; color: inherit;
    cursor: pointer; text-align: center; font-family: inherit; }
.bk-time-slot:hover { background: rgba(0,0,0,.05); }
.bk-time-slot.is-selected { outline: 2px solid #c2410c; outline-offset: -2px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .bk-timegrid { background: rgba(255,255,255,.03); } }

/* Typable time field. Keeps .bk-date-toggle's frame so it lines up with the date
   trigger beside it, but the text inside is a real input — the slot grid below is
   a suggestion list, not the only set of times we run. */
/* Two-class selectors throughout: the booking form's generic `.form-group input`
   rule is more specific than a lone `.bk-time-input`, and would put its own
   padding back and leave the time field taller than the date one beside it. */
.bk-timefield { padding-right: .4rem; cursor: text; }
.bk-timefield .bk-time-input { flex: 1 1 auto; min-width: 0; width: 100%; height: auto;
    margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    /* line-height inherited, not the UA's `normal` for inputs — otherwise the
       field sits ~2px shorter than the date button next to it. */
    background: transparent; font: inherit; line-height: inherit; color: inherit; }
.bk-timefield .bk-time-input:focus { outline: none; box-shadow: none; background: transparent; }
.bk-timefield .bk-time-input::placeholder { color: var(--text-light, #64748b); font-weight: 400; opacity: 1; }
.bk-time-open { flex: none; display: flex; align-items: center; border: 0; padding: .2rem;
    background: transparent; color: inherit; cursor: pointer; }

.bk-picker { position: relative; }

.bk-date-wrap { position: relative; }
/* Time fields get the identical treatment — the browser's "--:-- --" is just as
   unreplaceable as "mm/dd/yyyy", and a bare time input next to a styled date one
   is the thing that made the transfer pickup time look unfinished. */
.bk-date-wrap input[type="date"],
.bk-date-wrap input[type="time"] {
    width: 100%; padding: .7rem .8rem; font: inherit; color: var(--text-dark);
    background: var(--bg-light); border: 1px solid var(--border-color);
    border-radius: var(--radius); transition: border-color .2s, box-shadow .2s, background .2s;
}
.bk-date-wrap input[type="date"]:hover,
.bk-date-wrap input[type="time"]:hover { background: #fff; border-color: #d6dade; }
.bk-date-wrap input[type="date"]:focus,
.bk-date-wrap input[type="time"]:focus {
    outline: none; background: #fff; border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(8, 131, 149, .15);
}
/* Blank the native date/time text only while empty and unfocused. */
.bk-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit,
.bk-date-wrap.is-empty input[type="time"]::-webkit-datetime-edit { color: transparent; }
.bk-date-wrap.is-empty:focus-within input[type="date"]::-webkit-datetime-edit,
.bk-date-wrap.is-empty:focus-within input[type="time"]::-webkit-datetime-edit { color: inherit; }
/* The picker icon stays visible so the field still reads as a picker while the
   value is hidden — without it an empty field looks like a plain text box. */
.bk-date-wrap.is-empty input[type="date"]::-webkit-calendar-picker-indicator,
.bk-date-wrap.is-empty input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; }
.bk-date-ph {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--text-light); pointer-events: none; font-size: .95rem;
}
.bk-date-wrap:not(.is-empty) .bk-date-ph,
.bk-date-wrap:focus-within .bk-date-ph { display: none; }

/* ── Gallery lightbox ─────────────────────────────────────────────────── */
#lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#lb-img-wrap {
    max-width: 90vw;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lb-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    cursor: zoom-out;
}
#lb-close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s;
}
#lb-close:hover { opacity: 1; }
#lb-prev, #lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
#lb-prev { left: 1.25rem; }
#lb-next { right: 1.25rem; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.25); }
#lb-counter {
    color: rgba(255,255,255,.65);
    font-size: 13px;
    margin-top: 0.75rem;
}
/* Make main gallery image look clickable */
.tour-gallery__main img { cursor: zoom-in; }

/* ── Contact — booking inquiry summary ────────────────────────────────── */
.bk-inquiry-summary {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.bk-inquiry-summary__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #2563eb;
    margin-bottom: 0.9rem;
}
.bk-inquiry-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 5px 0;
    border-bottom: 1px solid #dbeafe;
    font-size: 14px;
}
.bk-inquiry-row:last-child { border-bottom: none; }
.bk-inquiry-row span { color: var(--text-light); }
.bk-inquiry-total { font-size: 1.1rem; color: var(--primary); }

/* ── Tour detail — media tabs ──────────────────────────────────────────── */
.tour-media-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
}
.tour-media-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tour-media-tab.active,
.tour-media-tab:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.tour-media-pane { display: none; }
.tour-media-pane.active,
.tour-media-pane.no-tabs { display: block; }

/* ── Tour detail — gallery with main + thumbnails ──────────────────────── */
.tour-gallery {
    margin-bottom: 2rem;
}
.tour-gallery__main {
    width: 100%;
    aspect-ratio: 1200 / 800;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-light);
    margin-bottom: 0.6rem;
}
.tour-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.tour-gallery__thumbs-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.tour-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Hide scrollbar but keep functionality */
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px; /* small buffer */
    flex: 1;
}
.tour-gallery__thumbs::-webkit-scrollbar {
    display: none;
}
.tour-gallery__arrow {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
    box-shadow: var(--shadow);
    font-size: 1.5rem;
    line-height: 1;
    transition: var(--transition);
}
.tour-gallery__arrow:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.tour-gallery__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.tour-gallery__thumb {
    width: 80px;
    height: 53px; /* Fixed height based on 80px width and 1200/800 ratio */
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.15s;
    flex: 0 0 80px; /* Do not grow, do not shrink, fixed at 80px */
}
.tour-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tour-gallery__thumb.active {
    border-color: var(--primary);
}
.tour-gallery__thumb:not(.active):hover {
    opacity: 0.8;
    border-color: var(--border-color);
}

/* ── Tour detail — video embed 16:9 ───────────────────────────────────── */
.tour-video-embed,
.tour-map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #f0f2f5;
    margin-bottom: 2rem;
}
.tour-video-embed {
    background: #000;
}
.tour-video-embed iframe,
.tour-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ==========================================================================
   Mobile responsiveness — consolidated breakpoints
   ========================================================================== */

/* Tablet ≤ 992px */
@media (max-width: 992px) {
    .hero { height: auto; min-height: 60vh; padding: 4rem 0; }
    .hero-content h1, .hero-content h2 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; }

    /* Tour-single sidebar already collapses via .tour-detail-grid (set above
       at 992px). Make sure related-tours card and booking-sidebar use full
       width and aren't sticky on the small layout. */
    .tour-sidebar { gap: 1.5rem; }
}

/* Phone ≤ 768px */
@media (max-width: 768px) {
    section { padding: 3rem 0; }
    .page-header { padding: 2.5rem 0; }
    .page-header h1 { font-size: 1.75rem; }

    .hero { min-height: 50vh; padding: 3rem 0; }
    .hero-content h1, .hero-content h2 { font-size: 2rem; line-height: 1.2; }
    .hero-content p { font-size: 1rem; }
    .hero-btns { flex-wrap: wrap; }
    .hero-btns .btn { flex: 1 1 auto; min-width: 0; }

    /* Row headers (home page section heads) — wrap so "View all" doesn't get
       squeezed off-screen next to long titles. */
    .row-header { flex-wrap: wrap; gap: 0.75rem; }

    /* Transfers — booking widget */
    .booking-widget { padding: 1.5rem; margin: -30px 1rem 3rem; }
    .booking-tabs { flex-wrap: wrap; gap: 0; }
    .booking-tab { flex: 1 1 auto; padding: 0.75rem 0.75rem; font-size: 0.9rem; text-align: center; }
    .booking-form { grid-template-columns: 1fr; gap: 1rem; }

    /* Transfers — vehicle list */
    .vehicle-card {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
        text-align: left;
    }
    .vehicle-img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius); }
    .vehicle-card .vehicle-price { text-align: left !important; }

    /* Tour-single — dense info pills (rendered with inline style 1fr 1fr) */
    .tour-info > .overview > div[style*="grid-template-columns:1fr 1fr"],
    .tour-info > .overview > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Contact form — name/email row collapses to single column on mobile */
    .contact-form form > div[style*="grid-template-columns:1fr 1fr"],
    .contact-form form > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Checkout — your-details (name/email) row */
    .checkout-form section > div[style*="grid-template-columns:1fr 1fr"],
    .checkout-form section > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Booking sidebar (tour-single) — drop heavy padding on phones */
    .booking-sidebar { padding: 1.25rem; }

    /* Gallery on tour-single (3-col) → 2-col on phones */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* Tours archive — sort dropdown + count line wraps cleanly */
    .tour-results .results-header { flex-wrap: wrap; gap: 0.75rem; }

    /* Currency + language switchers live INLINE in the header bar on mobile —
       between a shrunk logo and the hamburger — always visible, not a floating
       panel. margin-left:auto pushes this group (and the toggle after it) right. */
    .header-actions {
        display: flex !important;
        position: static;
        margin-left: auto;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }
    .header-actions .lang-switcher { margin-right: 0; }

    /* Compact switcher toggles so they + the hamburger fit on one line. */
    .curr-current, .lang-current {
        padding: 0.25rem 0.4rem;
        font-size: 0.78rem;
        gap: 0.15rem;
    }
    .curr-current .curr-symbol { font-size: 0.85rem; }
    .curr-current .caret, .lang-current .caret { font-size: 0.7rem; }
    .lang-current img, .lang-dropdown-list img { width: 15px; }

    /* Shrink the logo to make room for the inline switchers. */
    .logo { flex: 0 0 auto; }
    .logo--image img { max-height: 28px; }

    .header .nav-toggle { margin-left: 0.25rem; }
}

/* Small phone ≤ 480px */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }

    .hero-content h1, .hero-content h2 { font-size: 1.65rem; }
    .hero-content p { font-size: 0.95rem; }
    .hero-btns { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .hero-btns .btn { text-align: center; }

    .page-header { padding: 2rem 0; }
    .page-header h1 { font-size: 1.5rem; }

    .booking-widget { padding: 1rem; margin: -20px 0.5rem 2rem; border-radius: var(--radius); }
    .booking-tab { font-size: 0.85rem; padding: 0.6rem 0.5rem; }

    /* Tour card content — tighten footer so price + button fit one line */
    .tour-content { padding: 1.25rem; }
    .tour-card .tour-footer { flex-wrap: wrap; gap: 0.5rem; }
    .tour-card .tour-footer .btn { flex: 1 1 auto; text-align: center; }

    /* Filter sidebar fits cleanly */
    .filter-group h4 { font-size: 0.95rem; }

    /* Pagination — chip padding */
    .pagination a, .pagination span { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
}

/* Very small ≤ 360px (tighten further so 320–360px iPhone SE-class devices
   still render the tours grid and core forms without overflow). */
@media (max-width: 360px) {
    .tour-image { height: 200px; }
    .booking-tabs { font-size: 0.8rem; }
    .booking-tab { padding: 0.5rem 0.4rem; }
    .filter-sidebar { padding: 1rem; }
}

/* ── Blog "Plan your trip" CTA (partials/blog_trip_cta.php) ──────────────────
   Scoped with its own classes rather than reusing .btn: the block renders inside
   .post-content, whose `a { color: var(--primary) }` (0,1,1) outranked
   .btn-primary (0,1,0) and painted deep-blue text on a deep-blue button. Every
   pairing below is >= 4.5:1 against white (WCAG AA). The old coral --secondary
   is 2.50:1 and cannot carry white text at all, so the quiet actions are
   outlined instead of filled. */
.trip-cta {
    margin-top: 4rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface, #f8f9fb);
    padding: 2rem 1.75rem;
}
.trip-cta__h { margin: 0 0 .6rem; font-size: 1.4rem; }
.trip-cta__p { margin: 0 0 1.25rem; color: var(--text-light); max-width: 60ch; line-height: 1.6; }
.trip-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The .post-content a rule is (0,1,1); this is (0,2,0) on class count and wins. */
.trip-cta .trip-cta__btn,
.post-content .trip-cta .trip-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    font-family: var(--font-main);
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.trip-cta .trip-cta__btn--primary,
.post-content .trip-cta .trip-cta__btn--primary { background: #0a4d68; color: #fff; }   /* 9.23:1 */
.trip-cta .trip-cta__btn--primary:hover        { background: #0d637f; color: #fff; }

.trip-cta .trip-cta__btn--ghost,
.post-content .trip-cta .trip-cta__btn--ghost  { background: #fff; color: #0a4d68; border-color: #0a4d68; }  /* 9.23:1 */
.trip-cta .trip-cta__btn--ghost:hover          { background: #0a4d68; color: #fff; }

.trip-cta .trip-cta__btn--wa,
.post-content .trip-cta .trip-cta__btn--wa     { background: #0e6b60; color: #fff; }   /* 6.38:1 */
.trip-cta .trip-cta__btn--wa:hover             { background: #128c7e; color: #fff; }

.trip-cta .trip-cta__btn--tg,
.post-content .trip-cta .trip-cta__btn--tg     { background: #1b6f9c; color: #fff; }   /* 5.53:1 */
.trip-cta .trip-cta__btn--tg:hover             { background: #2288bd; color: #fff; }

.trip-cta__ico { flex: none; }

/* ── Relevant-tour cards inside the CTA ──────────────────────────────────────
   The three fixed category buttons ("All tours" etc.) were clicked zero times
   in the first month of tracking, so the block now leads with the specific
   tours the article itself links to. Same specificity trick as the buttons
   above: `.post-content a` is (0,1,1), so every anchor rule here is written
   twice to clear it. */
.trip-cta__tours {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: .6rem;
}
.trip-cta__tour { margin: 0; }

.trip-cta .trip-cta__tourlink,
.post-content .trip-cta .trip-cta__tourlink {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .55rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.trip-cta .trip-cta__tourlink:hover,
.post-content .trip-cta .trip-cta__tourlink:hover {
    border-color: #0a4d68;
    box-shadow: 0 2px 10px rgba(10, 77, 104, .12);
    transform: translateY(-1px);
    color: inherit;
}
.trip-cta__thumb {
    flex: none;
    width: 84px;
    aspect-ratio: var(--card-ratio, 3 / 2);
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface, #f1f3f6);
}
.trip-cta__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-cta__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.trip-cta__name {
    font-weight: 600;
    line-height: 1.3;
    color: #0a4d68;                       /* 9.23:1 on white */
    overflow-wrap: anywhere;
}
.trip-cta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-light);
}
.trip-cta__rate { white-space: nowrap; }
.trip-cta__price { font-size: .9rem; color: var(--text-light); }
.trip-cta__price strong { color: #9a3412; }   /* 5.9:1 on white — matches the booking-card accent */

.trip-cta__browse { margin: .9rem 0 0; font-size: .9rem; }
.trip-cta .trip-cta__browse a,
.post-content .trip-cta .trip-cta__browse a { color: #0a4d68; text-decoration: underline; }

@media (max-width: 560px) {
    .trip-cta { padding: 1.5rem 1.15rem; }
    .trip-cta__actions { gap: .5rem; }
    .trip-cta .trip-cta__btn { width: 100%; justify-content: center; }
    .trip-cta__thumb { width: 66px; }
}
/* ── Tour booking widget: secondary WhatsApp path + reassurance strip ────────
   Added after measuring that more visitors clicked WhatsApp than opened the
   booking widget at all (19 vs 15 in three weeks, 16 of them never opening it).
   Styled deliberately quieter than .bk-cta: checkout bookings average ₼318 vs
   ₼155 at the desk, so the form must stay the primary action.
   #0e6b60 is WhatsApp green darkened to 6.38:1 against white — the brand
   #25d366 is 1.98:1 and cannot carry white text. */
.bk-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: .5rem;
    padding: .6rem 1rem;
    border-radius: var(--radius, 8px);
    background: #fff;
    color: #0e6b60;
    border: 1px solid #0e6b60;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}
.bk-wa:hover { background: #0e6b60; color: #fff; }

/* One wrapping line, not three stacked ones. Every 40px added to this card
   raises the viewport height sticky needs to engage (see the sticky-sidebar
   rule above), so the reassurance line stays deliberately compact. */
.bk-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .2rem .45rem;
    /* Sits BETWEEN the two booking buttons, so it takes the same .5rem it gives
       the CTA below it — an uneven pair of gaps made it look attached to the
       WhatsApp button rather than shared by both. */
    margin: .5rem 0 0;
    padding: 0;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--text-light);
}
.bk-trust > * + *::before {
    content: "·";
    margin-right: .45rem;
    color: var(--border-color, #d8dce3);
}
.bk-trust a { color: var(--text-light); text-decoration: underline; }
.bk-trust a:hover { color: var(--primary); }

/* ══════════════════════════════════════════════════════════════════════════
   RIGHT-TO-LEFT (Arabic)
   ══════════════════════════════════════════════════════════════════════════
   `dir="rtl"` on <html> already flips flexbox, grid, text alignment, list
   markers and scrollbars on its own. This block only overrides the PHYSICAL
   properties the browser cannot flip for us — anything written as left/right
   rather than start/end.

   Scoped entirely under [dir="rtl"], so LTR output is byte-for-byte unchanged.
   New CSS should prefer logical properties (margin-inline-start, inset-inline-
   start, text-align:start) so it needs no entry here at all.
   ══════════════════════════════════════════════════════════════════════════ */

/* Arabic needs a font stack that actually has Arabic glyphs, and a little more
   line-height: Arabic ascenders/descenders are taller than Latin at the same
   size, so the Latin leading looks cramped. */
[dir="rtl"] body { font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; }

/* ── Header: nav dropdowns ─────────────────────────────────────────────── */
[dir="rtl"] .nav-links .has-dropdown .dropdown { left: auto; right: 0; }
[dir="rtl"] .nav-links .dropdown .has-dropdown .dropdown { left: auto; right: 100%; }
[dir="rtl"] .nav-links .dropdown .has-dropdown .dropdown::before { left: auto; right: -0.6rem; }
[dir="rtl"] .header-actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .header-actions .lang-switcher { margin-right: 0; margin-left: 0; }
[dir="rtl"] .header .nav-toggle { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .lang-dropdown-list, [dir="rtl"] .curr-dropdown-list { right: auto; left: 0; }
[dir="rtl"] .curr-opt-name { margin-left: 0; margin-right: auto; }

/* Mobile nav slides in from the right instead of the left. */
[dir="rtl"] .nav-links { left: auto; right: 0; }

/* ── Hero slider controls ──────────────────────────────────────────────── */
[dir="rtl"] .hero-nav--prev { left: auto; right: 16px; }
[dir="rtl"] .hero-nav--next { right: auto; left: 16px; }

/* ── Cards & badges ────────────────────────────────────────────────────── */
[dir="rtl"] .tour-badge { left: auto; right: 1rem; }
[dir="rtl"] .tour-themes { left: auto; right: 0; }
[dir="rtl"] .tour-price__was { margin-right: 0; margin-left: .35rem; }
[dir="rtl"] .tour-stars__fill { left: auto; right: 0; }

/* ── Article body ──────────────────────────────────────────────────────── */
[dir="rtl"] .post-content ul, [dir="rtl"] .post-content ol { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .post-content blockquote {
    border-left: none; border-right: 4px solid var(--primary, #2563eb);
    padding-left: 0; padding-right: 1.25rem;
}
[dir="rtl"] .post-content .story-acc > summary::after { right: auto; left: 1.1rem; }
[dir="rtl"] .post-content .story-acc > ol { padding-left: 0; padding-right: 2.6rem; }
[dir="rtl"] .resizable-wrapper.align-left  { float: right; margin-right: 0; margin-left: 15px; }
[dir="rtl"] .resizable-wrapper.align-right { float: left;  margin-left: 0;  margin-right: 15px; }

/* ── Booking widget ────────────────────────────────────────────────────── */
[dir="rtl"] .bk-type-tab:not(:last-child) { border-right: none; border-left: 1px solid var(--border-color); }
[dir="rtl"] .bk-total__value { text-align: left; }
[dir="rtl"] .bk-date-ph { left: auto; right: .85rem; }
[dir="rtl"] .bk-proof__sep { margin-left: 0; margin-right: -.15rem; }
[dir="rtl"] .password-toggle { right: auto; left: 0.75rem; }
[dir="rtl"] input[type="password"] { padding-right: .75rem !important; padding-left: 2.75rem !important; }

/* Calendar: the grid itself flips with dir, but the tooltip arrow is centred
   by transform and the nav chevrons point the wrong way. */
[dir="rtl"] .bk-cal-nav { transform: scaleX(-1); }

/* ── Floating action buttons & lightbox ────────────────────────────────── */
[dir="rtl"] .floating-buttons, [dir="rtl"] .float-btns { right: auto; left: 24px; }
[dir="rtl"] #lb-close { right: auto; left: 1.5rem; }
[dir="rtl"] #lb-prev  { left: auto;  right: 1.25rem; }
[dir="rtl"] #lb-next  { right: auto; left: 1.25rem; }

/* ── Misc alignment ────────────────────────────────────────────────────── */
[dir="rtl"] .vehicle-card .vehicle-price { text-align: right !important; }

/* Latin fragments (prices, dates, phone numbers, URLs) inside Arabic text must
   stay LTR or the digits and punctuation reorder wrongly. */
[dir="rtl"] .tour-price, [dir="rtl"] .bk-total__value, [dir="rtl"] .tour-hero-price,
[dir="rtl"] .bk-cal-grid, [dir="rtl"] a[href^="tel:"], [dir="rtl"] .bk-bd-row span:last-child {
    direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .tour-hero-price, [dir="rtl"] .bk-bd-row span:last-child { text-align: right; }
/* ── Mixed-direction text ──────────────────────────────────────────────────
   During an incremental rollout most CONTENT is still English while the shell
   is Arabic. In an RTL container an LTR sentence has its trailing punctuation
   reordered — "Ride the hills." renders as ".Ride the hills" — because the
   full stop is neutral and inherits the paragraph direction.

   `unicode-bidi: plaintext` makes each block pick its own direction from its
   first strong character, so an English paragraph behaves as LTR and an Arabic
   one as RTL, with no per-string markup and nothing to undo once the content is
   translated. Applied to content-bearing blocks only — never to layout
   containers, which must keep the page direction. */
[dir="rtl"] .hero-slide__content,
[dir="rtl"] .hero-slide__content h1,
[dir="rtl"] .hero-slide__content h2,
[dir="rtl"] .hero-slide__content p,
[dir="rtl"] .post-content p,
[dir="rtl"] .post-content li,
[dir="rtl"] .post-content h1, [dir="rtl"] .post-content h2,
[dir="rtl"] .post-content h3, [dir="rtl"] .post-content h4,
[dir="rtl"] .post-content blockquote,
[dir="rtl"] .landing-body p, [dir="rtl"] .landing-body li,
[dir="rtl"] .page-body p, [dir="rtl"] .page-body li,
[dir="rtl"] .tour-card h3, [dir="rtl"] .tour-facts li,
[dir="rtl"] .page-header h1, [dir="rtl"] .page-header p,
[dir="rtl"] .tour-hero-facts li,
[dir="rtl"] .landing-faq h3, [dir="rtl"] .landing-faq p,
[dir="rtl"] .tour-review__body, [dir="rtl"] .tour-review__title {
    unicode-bidi: plaintext;
}
/* Footer and hero carry operator-entered text (address, phone, tagline, slide
   copy) that stays English until translated. Same plaintext treatment so a
   trailing "." or ":" does not jump to the front of the line. */
[dir="rtl"] .footer p, [dir="rtl"] .footer li, [dir="rtl"] .footer address,
[dir="rtl"] .footer-about, [dir="rtl"] .footer-contact li,
[dir="rtl"] .footer-bottom, [dir="rtl"] .footer-bottom p,
[dir="rtl"] .hero-slide h1, [dir="rtl"] .hero-slide h2, [dir="rtl"] .hero-slide p,
[dir="rtl"] .hero-slide__title, [dir="rtl"] .hero-slide__subtitle,
[dir="rtl"] .traveler-rating-badge {
    unicode-bidi: plaintext;
}
/* Logo / nav breathing room in RTL. In LTR the header's flex distribution leaves
   a gap between the logo and the first menu item; mirrored, the nav's inline
   edge lands flush against the logo (measured: both at x=1259 on a 1440px
   viewport). Mobile is unaffected — the nav becomes a full-width drawer.
   inline-start is the RIGHT here, i.e. the side the logo sits on. */
[dir="rtl"] .nav-links { margin-inline-start: 2.25rem; }
@media (max-width: 900px) { [dir="rtl"] .nav-links { margin-inline-start: 0; } }
/* --- Font sizes chosen in the editor -------------------------------------
   The editor's size dropdown wraps the selection in one of these classes
   instead of emitting a <font> tag, so the size survives a round-trip through
   the HTML tab and every article can be restyled from this one place.
   Sizes are relative (em) so they scale with the surrounding block and stay
   correct inside headings, captions and the mobile type scale. */

.post-content .fs-sm  { font-size: 0.85em; }
.post-content .fs-md  { font-size: 1em; }
.post-content .fs-lg  { font-size: 1.25em; }
.post-content .fs-xl  { font-size: 1.5em; }
.post-content .fs-xxl { font-size: 2em; }