/* Small site-wide overrides that don't belong in the vendored travhub.css.
   Loaded last so it can win on equal specificity. */

/* ---- Brand mark (logo badge + wordmark), used in header/footer/mobile-nav ---- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand-mark__img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}
.brand-mark__text {
    font-family: var(--travhub-heading-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
}
.main-header__logo .brand-mark__text { color: var(--travhub-black); }
.footer-widget__logo.brand-mark .brand-mark__text,
.logo-box .brand-mark .brand-mark__text { color: var(--travhub-white); }

/* ---- Footer bottom bar: copyright + developer credit side by side ---- */
.main-footer__bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    text-align: start;
}
@media (max-width: 575px) {
    .main-footer__bottom__inner {
        justify-content: center;
        text-align: center;
    }
}
.main-footer__credit {
    margin: 0;
    font-size: 14px;
    color: rgba(var(--travhub-white-rgb), 0.7);
}
.main-footer__credit a {
    color: var(--travhub-white);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--travhub-white-rgb), 0.4);
    transition: color 200ms ease, border-color 200ms ease;
}
.main-footer__credit a:hover {
    color: var(--travhub-base);
    border-color: var(--travhub-base);
}
.main-footer__legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
}
.main-footer__legal-links li {
    position: relative;
}
.main-footer__legal-links li + li {
    padding-inline-start: 16px;
}
.main-footer__legal-links li + li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--travhub-white-rgb), 0.4);
}
.main-footer__legal-links a {
    font-size: 14px;
    color: rgba(var(--travhub-white-rgb), 0.7);
    text-decoration: none;
    transition: color 200ms ease;
}
.main-footer__legal-links a:hover {
    color: var(--travhub-base);
}

/* ---- Hero/cars search form date inputs ----
   travhub.css only styles input[type=text/number/email] inside
   .banner-form__control, so a native <input type="date"> fell back to the
   browser's raw default box (thin border, wrong font) instead of matching
   the branch dropdown next to it. Mirror the exact same treatment here. */
.banner-form .banner-form__control input[type="date"] {
    width: 100%;
    background-color: transparent;
    padding: 2px 0;
    font-family: var(--travhub-font);
    font-weight: 400;
    font-size: 17px;
    line-height: normal;
    color: var(--travhub-black);
    border: 1px solid transparent !important;
    outline: none;
    cursor: pointer;
}
.banner-form .banner-form__control input[type="date"]:focus {
    outline: none;
    border: 1px solid transparent !important;
}
.banner-form .banner-form__control input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(46%) sepia(84%) saturate(1874%) hue-rotate(346deg) brightness(97%) contrast(92%);
    cursor: pointer;
}
.cars-search input[type="date"],
.cars-search select.form-select {
    cursor: pointer;
}

/* ---- Car cards (tours-three__*, repurposed from the tour showcase for
   the car listings on the homepage and /cars) ----
   The vendored CSS only sets width:100% on the <img>, so the card's height
   was entirely at the mercy of whatever aspect ratio the uploaded photo
   happened to have — a tall or panoramic upload would stretch that one
   card taller/shorter than its neighbors and break the grid. Force a fixed
   box and crop to fill it instead, whatever the source image's shape. */
.tours-three__image { height: 240px; border-radius: 14px 14px 0 0; }
.tours-three__image img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The original design floats .tours-three__content on top of the image
   (position:absolute, overlapping its bottom ~90px) — fine for a scenic
   tour photo, but a car photo's most identifiable part (wheels/lower
   body) usually sits exactly there, so the white card was hiding the car.
   Move it into normal flow below the image instead — full photo stays
   visible, content card sits underneath. */
.tours-three__card {
    background: var(--travhub-white);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.tours-three__content {
    position: static;
    left: auto; right: auto; bottom: auto;
    border-radius: 0 0 14px 14px;
    padding: 22px 24px;
}

/* ---- Currently-rented cars: shown (so visitors know they exist) but
   blurred and unbookable rather than hidden entirely ---- */
.tours-three__card--rented .tours-three__image img {
    filter: blur(2px) grayscale(60%);
}
.tours-three__card--rented .tours-three__content { opacity: 0.75; }
.tours-three__card--rented .tours-three__feature.bg-secondary { background-color: #8a8a8a !important; }
.car-rented-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: rgba(30, 30, 30, 0.85); color: #fff;
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px;
}

/* ---- Car details booking box (car-details.php) ----
   .travhub-btn is inline-block with no full-width rule of its own — the
   theme only stretches it to 100% when it's a submit button inside a
   .form-one (see ".tours-details__booking .form-one .travhub-btn"); the
   car booking box just links straight to /book, no form, so mirror the
   same treatment directly. */
.tours-details__booking .travhub-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.tours-details__booking__check-box { margin-top: 14px; margin-bottom: 0; }
.car-gallery-carousel img { border-radius: 12px; width: 100%; height: 420px; object-fit: cover; }
.car-gallery-carousel .owl-nav, .car-gallery-carousel .owl-dots { margin-top: 12px; }

/* Day/Month rate toggle on the booking box — shows exactly one price at a
   time instead of stacking both, matching how the rest of the site's
   pill/badge controls look. Kept compact on purpose: this sits in a narrow
   sidebar column stacked 3x (rate / pickup / drop-off) plus extras below,
   so anything oversized here makes the whole booking box very tall. */
.car-rate-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.car-rate-toggle__btn {
    flex: 1; border: 1px solid rgba(var(--travhub-black-rgb), 0.15); background: transparent;
    border-radius: 20px; padding: 5px 6px; font-size: 12.5px; font-weight: 600;
    font-family: var(--travhub-font); color: var(--travhub-black); cursor: pointer;
    line-height: 1.3; transition: 200ms ease;
}
.car-rate-toggle__btn small { font-size: 10.5px; font-weight: 500; opacity: 0.85; }
.car-rate-toggle__btn.active { background: var(--travhub-base); border-color: var(--travhub-base); color: #fff; }
/* The booking box's own sub-headings (Pickup/Drop-off/Add-ons) reuse
   .tours-details__title's "mt35" spacer, which is tuned for the wide
   left-column content — way too much air in this narrow sidebar. */
.tours-details__booking .mt35 { margin-top: 18px !important; }
.tours-details__booking__title { margin-bottom: 10px; }

/* Transfer booking box — vehicle picker (tour-details.php, product_type =
   transfer). A transfer's price is per vehicle, not per passenger, so this
   replaces the generic "Adults" headcount stepper entirely: pick a card,
   its price is what you pay, capacity is fixed by the vehicle. Each card
   is a real <label>+radio (works without JS; the inline script only adds
   the active-card highlight). */
.transfer-vehicle-picker-row { flex-direction: column; align-items: stretch !important; }
.transfer-vehicle-picker { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.transfer-vehicle-picker__option {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(var(--travhub-black-rgb), 0.15);
    border-radius: 12px; padding: 12px 14px; cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.transfer-vehicle-picker__option:hover { border-color: rgba(var(--travhub-base-rgb), 0.5); }
.transfer-vehicle-picker__option.active {
    border-color: var(--travhub-base);
    background: rgba(var(--travhub-base-rgb), 0.06);
}
.transfer-vehicle-picker__option input[type="radio"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.transfer-vehicle-picker__icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(var(--travhub-base-rgb), 0.1); color: var(--travhub-base);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.transfer-vehicle-picker__option.active .transfer-vehicle-picker__icon {
    background: var(--travhub-base); color: #fff;
}
.transfer-vehicle-picker__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.transfer-vehicle-picker__name { font-weight: 700; font-size: 15px; color: var(--travhub-black); }
.transfer-vehicle-picker__meta { font-size: 12.5px; color: var(--travhub-text, #6b7280); }
.transfer-vehicle-picker__price { flex: 0 0 auto; font-weight: 700; font-size: 16px; color: var(--travhub-base); white-space: nowrap; }

/* Transfer booking box — optional priced extras (extra stop, specific
   drop-off area, etc.) shown as plain checkboxes, and a running total that
   updates as the vehicle/extras selection changes. */
.transfer-addons-row { flex-direction: column; align-items: stretch !important; }
.transfer-addons { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.transfer-addons__option {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px 10px; border: 1px solid rgba(var(--travhub-black-rgb), 0.12); border-radius: 8px;
}
.transfer-addons__option:hover { border-color: rgba(var(--travhub-base-rgb), 0.5); }
.transfer-addons__option input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--travhub-base); }
.transfer-addons__name { flex: 1 1 auto; font-size: 13.5px; color: var(--travhub-black); }
.transfer-addons__price { flex: 0 0 auto; font-weight: 700; font-size: 13.5px; color: var(--travhub-base); white-space: nowrap; }
.transfer-total-row {
    background: rgba(var(--travhub-base-rgb), 0.07);
    border-radius: 10px; padding: 12px 14px; border: none !important;
}
.transfer-total-row .tours-details__booking__list__left { margin: 0; }
.transfer-total-row > span { font-size: 19px; font-weight: 700; color: var(--travhub-base); }

/* Car gallery slider (car-details.php) — the theme's --basic-nav treatment
   is built for dark carousel backgrounds elsewhere on the site: white
   icon, transparent fill, sitting in normal flow below the slide. On a
   plain photo that's a white-on-white invisible arrow plus a large empty
   gap (nav's own 70px + its 40px margin-top) before the dots. Override
   just for this carousel: overlay the arrows on the image itself (out of
   flow, so no gap) with a dark circle so they're visible on any photo,
   and pull the dots back up against the image. */
.car-gallery-carousel.owl-carousel { position: relative; }
.car-gallery-carousel.owl-carousel .owl-nav {
    position: absolute; top: 50%; left: 16px; right: 16px;
    transform: translateY(-50%);
    justify-content: space-between; margin-top: 0; pointer-events: none;
}
.car-gallery-carousel.owl-carousel .owl-nav button {
    pointer-events: auto;
    width: 48px; height: 48px; font-size: 18px;
    background-color: rgba(0, 0, 0, 0.45) !important;
    border-color: transparent !important;
}
.car-gallery-carousel.owl-carousel .owl-nav button:hover {
    background-color: var(--travhub-base) !important;
}
.car-gallery-carousel.owl-carousel .owl-dots { margin-top: 14px; }

/* Specifications/Features lists (car-details.php) — previously split into
   two separate <ul> elements inside Bootstrap grid columns to get a 2-col
   look on desktop. Below the md breakpoint both columns stack full-width,
   but each <ul> still carries its own top margin, so the two lists left
   an ugly gap in the middle instead of reading as one continuous list.
   A single list with CSS columns avoids that entirely: 2 columns on wider
   screens, naturally collapses to 1 with no gap on mobile. */
.tours-details__list--cols {
    column-count: 2;
    column-gap: 24px;
}
.tours-details__list--cols li { break-inside: avoid; }
@media (max-width: 767.98px) {
    .tours-details__list--cols { column-count: 1; }
}

/* "Estimated Total" row (car-details.php booking box) — the base
   .tours-details__booking__list li is a tight flex row (space-between,
   no wrap) sized for a short label like "Price"/"Per day". "Estimated
   Total (5 days)" is much longer and, together with the price text, has
   nowhere to go on a narrow phone screen: both sides wrap independently
   and the price itself splits across two lines ("70.00" / "JOD"). Give
   this row its own highlighted card and let label+price wrap as a unit
   instead. */
.car-total-row {
    background: rgba(var(--travhub-base-rgb), 0.07);
    border-radius: 10px;
    padding: 12px 14px;
}
.car-total-row li {
    border: none; padding: 0; flex-wrap: wrap; row-gap: 4px;
}
.car-total-row .tours-details__booking__list__left {
    font-size: 14px; margin: 0; flex: 1 1 auto; min-width: 0;
}
.car-total-row #carEstimatedTotal {
    font-size: 19px; font-weight: 700; color: var(--travhub-base); white-space: nowrap;
}
@media (max-width: 400px) {
    .car-total-row li { flex-direction: column; align-items: flex-start; }
    .car-total-row #carEstimatedTotal { font-size: 22px; }
}

/* Tour photo gallery (tour-details.php) — a tour can have up to ~12
   uploaded photos; showing them as a static grid meant 3+ full rows of
   thumbnails stacking the page height. Turned into a paged owl-carousel
   instead. The theme's basic-nav treatment assumes a dark carousel
   background (white icon + white border) — invisible here on the plain
   page background — so recolor to the page's own palette and tighten the
   default 40px/40px flow gaps down to something that fits a secondary
   gallery section instead of a full hero slider. */
.tour-gallery-carousel .tours-details__gallery img {
    height: 160px;
    object-fit: cover;
}
.tour-gallery-carousel.owl-carousel .owl-nav {
    margin-top: 16px;
}
.tour-gallery-carousel.owl-carousel .owl-nav button {
    width: 44px;
    height: 44px;
    font-size: 16px;
    border-color: rgba(var(--travhub-black-rgb), 0.15);
    color: var(--travhub-black);
}
.tour-gallery-carousel.owl-carousel .owl-nav button:hover {
    color: #fff;
}
.tour-gallery-carousel.owl-carousel .owl-dots {
    margin-top: 10px;
}

/* Tour booking box — Date field (tour-details.php). Every other value in
   this box is either plain text or the theme's own pill-shaped stepper
   control; a bare native <input type="date"> had no box at all, so it sat
   there as a tiny unstyled control that looked broken next to everything
   else. Give it the same pill treatment as the guest-count stepper. */
.tour-date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    padding: 0 14px;
    background-color: var(--travhub-white);
    border: 1px solid rgba(var(--travhub-black-rgb), 0.1);
    border-radius: 100px;
}
.tour-date-picker i { color: var(--travhub-base); font-size: 13px; }
.tour-date-picker input[type="date"] {
    border: none;
    outline: none;
    background: transparent;
    width: 128px;
    padding: 0;
    font-family: var(--travhub-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--travhub-black);
    cursor: pointer;
    -moz-appearance: textfield;
}
/* This field already shows its own brand-colored calendar icon before the
   input (see .tour-date-picker i above) — the native picker indicator was
   previously just recolored to match rather than hidden, so both icons
   showed at once. Hide the native one, matching the same fix used on the
   hero's own date fields. */
.tour-date-picker input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* Review "Rating" field (tour-details.php write-a-review form) — was a
   bare native <select>, the only unstyled control on an otherwise
   polished form. Classic CSS-only star picker: radios are listed 5→1 in
   DOM order and the row is flex-reversed so they display 1→5 on screen;
   ":checked ~ label" then lights up every star at-or-before the checked
   one, and the ":hover ~ label" chain gives the same live preview before
   clicking. Wrapped in dir="ltr" so it always fills the same visual
   direction regardless of the active site language. */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: rgba(var(--travhub-black-rgb), 0.18);
    transition: color 150ms ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc107;
}
.star-rating-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--travhub-black);
    margin-bottom: 8px;
}

/* Included/excluded-style lists (tour-details.php) — the theme colors every
   list icon the same brand-orange circle regardless of meaning, so
   "included" and "excluded" (and the newer not-suitable/not-allowed/
   must-bring/know-before lists) all looked identical apart from their
   glyph. Recolor by icon so included-style items read green and
   excluded-style items read red, matching the familiar marketplace
   convention (GetYourGuide, Airbnb, etc). */
.tours-details__list li i.flaticon-check { background-color: #17a34a; }
.tours-details__list li i.flaticon-close { background-color: #dc3545; }

/* Trip essentials rows (tour-details.php) — cancellation policy, pay-later,
   duration, guide language, group size. Shown as a short icon+label list
   right under the cover photo, same information hierarchy used by
   marketplace tour listings: a bold one-line takeaway plus a lighter
   supporting line underneath. */
.tour-essentials {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 6px;
    padding: 20px;
    background: rgba(var(--travhub-base-rgb), 0.04);
    border-radius: 12px;
}
.tour-essentials li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tour-essentials i {
    font-size: 17px;
    color: var(--travhub-base);
    margin-top: 3px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.tour-essentials strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-black);
}
.tour-essentials span {
    display: block;
    font-size: 13px;
    color: var(--travhub-text);
    margin-top: 1px;
}
@media (min-width: 768px) {
    .tour-essentials { flex-direction: row; flex-wrap: wrap; }
    .tour-essentials li { flex: 1 1 45%; }
}

/* Route / itinerary timeline (tour-details.php) — replaces the old
   day-by-day accordion with a vertical stop-by-stop route, each marker
   connected by a line and tagged with an optional duration chip, mirroring
   how marketplace tour listings visualize a route rather than a plain
   text schedule. Uses logical (inset-inline) offsets so the line/markers
   sit on the correct side automatically in both LTR and RTL. */
.tour-route {
    position: relative;
    padding-inline-start: 40px;
    margin-top: 20px;
}
.tour-route__meeting-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(var(--travhub-base-rgb), .07);
    border: 1px solid rgba(var(--travhub-base-rgb), .18);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
}
.tour-route__meeting-point i {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--travhub-base);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transform: translate(0, 3px);
}
.tour-route__meeting-point strong {
    display: block;
    font-size: 14px;
    color: var(--travhub-black);
    margin-bottom: 2px;
}
.tour-route__meeting-point p {
    margin: 0;
    font-size: 14px;
    color: var(--travhub-text);
    line-height: 1.5;
}
.tour-route::before {
    content: '';
    position: absolute;
    inset-inline-start: 14px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(var(--travhub-black-rgb), 0.12);
}
.tour-route__stop {
    position: relative;
    padding-bottom: 28px;
}
.tour-route__stop:last-child { padding-bottom: 0; }
.tour-route__marker {
    position: absolute;
    inset-inline-start: -40px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--travhub-base);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 0 0 4px rgba(var(--travhub-base-rgb), 0.15);
}
/* The flaticon-pin glyph itself has a lot of empty space baked into its
   bottom-left, so centering the icon box still left it looking shifted
   toward the top-right of the circle. Nudge the glyph itself to compensate. */
.tour-route__marker i {
    transform: translate(0, 3px);
}
.tour-route__content h5 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--travhub-black);
}
.tour-route__content p {
    margin: 0 0 6px;
    color: var(--travhub-text);
    font-size: 14px;
    line-height: 1.6;
}
.tour-route__duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--travhub-base-rgb), 0.08);
    color: var(--travhub-base);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Transfer-time connector (tour-details.php route) — the travel time
   between one stop and the next (e.g. a jeep transfer). Positioned with
   the same inset-inline-start trick as .tour-route__marker so the badge
   sits centered directly on top of the route's vertical line, like a
   waypoint on the line itself, instead of floating off to the side. */
.tour-route__transfer {
    position: relative;
    inset-inline-start: -40px;
    margin: -14px 0 14px 0;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--travhub-base);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 0 0 4px var(--travhub-white, #fff);
}

/* Review cards + summary sidebar (tour-details.php) — replaces a plain
   "Name ★★★☆☆ / date / text" text block with a proper card: a colored
   initial avatar, name + a "Confirmed booking" badge (true for every
   review now, since one can't be submitted without a confirmed booking —
   see api/submit_tour_review.php), star row, date, comment. The summary
   card (avg score + per-category bars) sits alongside the list rather
   than stacked above it. */
.review-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(var(--travhub-black-rgb), 0.08);
}
.review-card--hidden {
    display: none;
}
.review-card:first-child {
    padding-top: 0;
}
.review-card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.review-card__body {
    flex: 1;
    min-width: 0;
}
.review-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.review-card__name {
    font-size: 15px;
    color: var(--travhub-black);
}
.review-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #198754;
}
.review-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.review-card__stars {
    color: var(--travhub-base);
    font-size: 13px;
    letter-spacing: 1px;
}
.review-card__date {
    font-size: 12px;
    color: var(--travhub-text);
}
.review-card__text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--travhub-text);
}
.review-card__text--translated {
    padding-inline-start: 12px;
    border-inline-start: 2px solid rgba(var(--travhub-base-rgb), .3);
}
.review-card__translate {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--travhub-base);
    cursor: pointer;
}
.review-card__translate:hover {
    text-decoration: underline;
}
.review-card__translate:disabled {
    opacity: .6;
    cursor: default;
}

.review-summary {
    background: rgba(var(--travhub-black-rgb), 0.02);
    border: 1px solid rgba(var(--travhub-black-rgb), 0.08);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    position: sticky;
    top: 100px;
}
.review-summary__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-black);
    margin: 0 0 14px;
}
.review-summary__score {
    font-size: 40px;
    font-weight: 800;
    color: var(--travhub-black);
    line-height: 1;
}
.review-summary__stars {
    color: var(--travhub-base);
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 6px;
}
.review-summary__count {
    font-size: 13px;
    color: var(--travhub-text);
    margin-top: 6px;
    margin-bottom: 20px;
}
.review-summary__breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start;
}
.review-summary__row {
    display: grid;
    grid-template-columns: 1fr 90px 28px;
    align-items: center;
    gap: 10px;
}
.review-summary__label {
    font-size: 13px;
    color: var(--travhub-text);
}
.review-summary__bar {
    height: 6px;
    border-radius: 4px;
    background: rgba(var(--travhub-black-rgb), 0.08);
    overflow: hidden;
}
.review-summary__bar div {
    height: 100%;
    background: var(--travhub-base);
    border-radius: 4px;
}
.review-summary__value {
    font-size: 12px;
    font-weight: 700;
    color: var(--travhub-black);
    text-align: end;
}
@media (max-width: 991px) {
    .review-summary { position: static; margin-top: 24px; }
}


/* "Good to know" list (tour-details.php) — these items are informational
   paragraphs (can wrap to 2-3 lines), unlike the short one-line bullets
   used for included/excluded/highlights. The theme's list icon uses
   align-items:center, which vertically centers the icon against the whole
   wrapped block — fine for one line, off-center for several. Pin it to
   the top of the text instead, just for this list. */
.tours-details__list--top-icons li { align-items: flex-start; }
.tours-details__list--top-icons li i { margin-top: 5px; }

/* Hero photo mosaic (tour-details.php) — cover photo + up to 4 thumbnails
   shown together at a glance (main photo + 2x2 grid), instead of a single
   cover image followed by a separate "Gallery" slider further down the
   page. A "View all (N)" badge only appears — and only then is the full
   paged carousel built at all — once there are more photos than the
   mosaic can show; for 5 photos or fewer, everything is already visible
   so no expand step is needed. */
.tour-hero-gallery__mosaic {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
}
.tour-hero-gallery__mosaic--clickable { cursor: pointer; }
.tour-hero-gallery__mosaic--solo { grid-template-columns: 1fr; }
.tour-hero-gallery__main { height: 420px; }
.tour-hero-gallery__main img,
.tour-hero-gallery__main video,
.tour-hero-gallery__thumb img,
.tour-hero-gallery__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tour-hero-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 420px;
}
/* Fewer than 4 thumbnails — reflow the grid so there are no empty cells
   next to the real photos (1 photo total skips this grid entirely). */
.tour-hero-gallery__grid--thumbs-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tour-hero-gallery__grid--thumbs-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.tour-hero-gallery__grid--thumbs-3 .tour-hero-gallery__thumb:nth-child(3) { grid-column: 1 / -1; }
.tour-hero-gallery__thumb { position: relative; overflow: hidden; }
.tour-hero-gallery__viewall {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-end: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 150ms ease;
}
.tour-hero-gallery__mosaic--clickable:hover .tour-hero-gallery__viewall { background: var(--travhub-base); }
@media (max-width: 767.98px) {
    .tour-hero-gallery__mosaic { grid-template-columns: 1fr; }
    .tour-hero-gallery__main { height: 240px; }
    .tour-hero-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 76px; }
    .tour-hero-gallery__grid--thumbs-1 { grid-template-columns: 1fr; }
    .tour-hero-gallery__grid--thumbs-2 { grid-template-columns: repeat(2, 1fr); }
    .tour-hero-gallery__grid--thumbs-3 { grid-template-columns: repeat(3, 1fr); }
    .tour-hero-gallery__grid--thumbs-3 .tour-hero-gallery__thumb:nth-child(3) { grid-column: auto; }
    /* The "View all photos (N)" pill doesn't fit a ~76px-tall thumbnail —
       the label wrapped and overlapped the icon/count. Cover the whole
       thumbnail instead and drop the label, keeping just the icon + count. */
    .tour-hero-gallery__viewall {
        position: absolute;
        inset: 0;
        inset-block-end: 0;
        inset-inline-end: 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 13px;
        padding: 0;
    }
    .tour-hero-gallery__viewall-label { display: none; }
}

/* Route map (tour-details.php) — the theme only sizes an <iframe> inside
   .tours-details__map (the single-pin Google fallback); the Leaflet div
   IS the .tours-details__map element here (not a descendant of it), and
   needs the same explicit height itself, since Leaflet renders 0px tall
   in an unsized container. */
#tourRouteMap {
    height: 476px;
    width: 100%;
}
@media (max-width: 767px) {
    #tourRouteMap { height: 400px; }
}
.tour-route__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: none;
    border: 1px solid rgba(var(--travhub-black-rgb), 0.12);
    border-radius: 8px;
    color: var(--travhub-base);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
}
.tour-route__toggle:hover { background: rgba(var(--travhub-base-rgb), 0.06); }
.tour-route__toggle i { transition: transform 200ms ease; }
.tour-route__toggle.is-expanded i { transform: rotate(180deg); }
.tour-route--collapsed {
    max-height: 640px;
    overflow: hidden;
    position: relative;
}
.tour-route--collapsed::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.tour-route--expanded {
    max-height: none !important;
    overflow: visible !important;
}
.tour-route--expanded::after { display: none; }

/* Full photo gallery modal (tour-details.php) — a real Bootstrap modal
   showing every photo at once in a scrollable grid (white background),
   opened by clicking any photo in the hero mosaic. */
#tourGalleryModal .modal-content {
    background: #fff;
}
#tourGalleryModal .modal-body {
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
}
.tour-gallery-modal__grid {
    /* True masonry via CSS multi-column — a regular grid can't let a short
       item and a tall neighbor share a row without a gap (row height
       always matches the tallest cell). Columns instead let each item
       pack directly under whatever's above it in the same column,
       Pinterest-style, with no gap regardless of its own height. */
    column-count: 2;
    column-gap: 14px;
}
.tour-gallery-modal__grid img,
.tour-gallery-modal__grid video {
    /* No fixed height/crop here on purpose — each photo or video keeps its
       own natural aspect ratio instead of being force-cropped into a
       uniform box. */
    width: 100%;
    height: auto;
    max-height: 80vh;
    margin: 0 auto 14px;
    border-radius: 10px;
    display: block;
    background: #000;
    break-inside: avoid;
}
@media (max-width: 575.98px) {
    .tour-gallery-modal__grid { column-count: 1; }
}
.tour-gallery-modal__close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: var(--travhub-black, #1a1a1a);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.tour-gallery-modal__close:hover { background: rgba(0, 0, 0, 0.12); }

/* ===== Public gallery page — bilingual caption overlay ===== */
.gallery-one__card__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: 10px 14px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    text-align: center;
    pointer-events: none;
}

/* ===== Car booking checkout (pages/book.php) =====
   Replaces plain Bootstrap border/dl-dt-dd boxes with cards that match the
   rest of the site's look (rounded corners, accent color, soft shadow). */
.checkout-summary {
    background: var(--travhub-white);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    position: sticky;
    top: 100px;
}
.checkout-summary__photo {
    position: relative;
    height: 180px;
}
.checkout-summary__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-summary__badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background-color: var(--travhub-black);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 30px;
}
.checkout-summary__body {
    padding: 22px;
}
.checkout-summary__eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--travhub-base);
    margin-bottom: 4px;
}
.checkout-summary__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--travhub-black);
    margin: 0 0 10px;
}
.checkout-summary__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-size: 13px;
    color: var(--travhub-text);
}
.checkout-summary__meta i {
    color: var(--travhub-base);
    margin-inline-end: 4px;
}
.checkout-summary__list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}
.checkout-summary__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--travhub-text);
}
.checkout-summary__list li strong {
    color: var(--travhub-black);
    font-weight: 700;
    white-space: nowrap;
}
.checkout-summary__list li strong small {
    font-weight: 500;
    color: var(--travhub-text);
}
.checkout-summary__addons {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.checkout-summary__addons-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--travhub-black);
    margin-bottom: 8px;
}
.checkout-summary__addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--travhub-text);
    padding: 5px 0;
    cursor: pointer;
}
.checkout-summary__addon-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout-summary__addon input {
    accent-color: var(--travhub-base);
    width: 16px;
    height: 16px;
}
.checkout-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-black);
}
.checkout-summary__total span:last-child {
    font-size: 22px;
    color: var(--travhub-base);
}
.checkout-summary__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--travhub-text);
}
.checkout-summary__note i {
    color: var(--travhub-base);
    margin-top: 2px;
}
@media (max-width: 991px) {
    .checkout-summary { position: static; }
}

.checkout-form-card {
    background: var(--travhub-white);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    padding: 32px;
}
.checkout-form-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--travhub-black);
    margin: 0 0 6px;
}
.checkout-form-card__hint {
    font-size: 13.5px;
    color: var(--travhub-text);
    margin-bottom: 0;
}
.checkout-form-card__section {
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-black);
    margin: 22px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(var(--travhub-base-rgb), .18);
}
.checkout-form-card__section--spaced {
    margin-top: 26px;
}
.checkout-form-card__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}
.checkout-form-card__cancel {
    font-size: 14px;
    font-weight: 600;
    color: var(--travhub-text);
    text-decoration: underline;
}
.checkout-form-card__cancel:hover {
    color: var(--travhub-base);
}

/* About page "Why Choose Us" media — a looping video replacing the
   original two-image layout (main photo + small overlapping circle).
   The source clip is a portrait 9:16 phone recording — width:100%/height:auto
   like the old img rule would render it well over 1000px tall in this
   two-column layout, so it's cropped to a normal landscape frame instead. */
.why-choose-one__image {
    display: block;
    width: 95%;
}
.why-choose-one__image video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 620px;
    object-fit: cover;
    border-radius: 24px;
}
@media (max-width: 991px) {
    .why-choose-one__image video { height: 480px; }
}
@media (max-width: 767px) {
    .why-choose-one__image video { height: 380px; }
}

/* Contact page hero media — a looping video replacing the old 4-piece
   photo collage (main image + person cutout + two cloud shapes). Same
   portrait-source-cropped-to-landscape treatment as the About page video. */
.contact-page__video {
    display: block;
    width: 100%;
}
.contact-page__video video {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
}
@media (max-width: 991px) {
    .contact-page__video video { height: 420px; }
}
@media (max-width: 767px) {
    .contact-page__video video { height: 320px; }
}

/* Tour listing card + featured-tour card: an uploaded cover video takes the
   same slot the cover <img> normally occupies — match travhub.css's own
   sizing/hover rules for .tours-one__item img / .tours-three__image img
   exactly so a video card looks identical to a photo card. */
.tours-one__item video {
    /* Unlike the img rule above, this can't rely on height:auto +
       min-height — a portrait-shot video (very common from phones) would
       size itself to its own tall aspect ratio instead of the card's box.
       A fixed height forces it to match the card exactly, same as a photo. */
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: all ease 0.3s;
}
.tours-one__item:hover video {
    transform: scale(1.05) rotate(1.1deg);
}

/* Blog cover images — the theme only sets height:auto, so each post's
   image (or the placeholder when none is uploaded yet) renders at whatever
   height its own natural aspect ratio happens to produce, making cards and
   the detail-page hero inconsistent from post to post. Fixed height +
   object-fit:cover keeps every one the same size regardless of source. */
.blog-details__thumb img {
    width: 100%;
    height: 480px;
    object-fit: cover;
}
.blog-list__item__thumb {
    height: 340px;
}
.blog-list__item__thumb img {
    height: 100%;
    object-fit: cover;
}

/* Public gallery page — Pinterest-style masonry via CSS multi-column
   (no JS needed). The old 4-column Bootstrap grid stretched every card in
   a row to match its tallest sibling, leaving gaps under shorter photos;
   columns instead pack each photo directly under whatever's above it,
   keeping its own natural aspect ratio (.gallery-one__card img already
   has no forced height/crop). */
.gallery-one__masonry {
    column-count: 4;
    column-gap: 24px;
}
.gallery-one__masonry .gallery-one__card {
    break-inside: avoid;
}
@media (max-width: 991.98px) {
    .gallery-one__masonry { column-count: 3; }
}
@media (max-width: 767.98px) {
    .gallery-one__masonry { column-count: 2; }
}
@media (max-width: 575.98px) {
    .gallery-one__masonry { column-count: 1; }
}

/* Homepage "Recent Gallery" teaser — same masonry approach as the full
   gallery page, replacing the old fixed single/double-tile slot map (which
   assumed exactly 6 photos in a specific pattern) with columns that adapt
   to however many photos are actually set featured, at their own heights. */
.gallery-three__masonry {
    /* 3, not 4 — this teaser only ever shows 6 photos (LIMIT 6 in the
       query), and CSS column-balancing leaves a declared 4th column
       completely empty when there isn't enough content to justify it. */
    column-count: 3;
    column-gap: 24px;
}
.gallery-three__masonry .gallery-three__item {
    break-inside: avoid;
    margin-bottom: 24px;
}
@media (max-width: 991.98px) {
    .gallery-three__masonry { column-count: 2; }
}
@media (max-width: 575.98px) {
    .gallery-three__masonry { column-count: 1; }
}

/* ---- Legal pages (Privacy Policy / Terms & Conditions / Cancellation
   Policy) — turns the admin's plain-text paragraphs into a structured,
   numbered layout instead of one unbroken wall of text. Paragraphs shaped
   like "Heading: body" (pages/legal-page.php parses these) become numbered
   section cards; a sticky on-page nav lists them for quick jumping. ---- */
.legal-page { padding: 100px 0; }
.legal-page__toc {
    position: sticky;
    top: 100px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    margin-bottom: 40px;
}
.legal-page__toc__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(0, 0, 0, .4);
    margin-bottom: 14px;
}
.legal-page__toc ul { display: flex; flex-direction: column; gap: 10px; }
.legal-page__toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--travhub-black);
    text-decoration: none;
    transition: color 200ms ease;
}
.legal-page__toc a:hover { color: var(--travhub-base); }
.legal-page__toc a span {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--travhub-base-rgb), .1);
    color: var(--travhub-base);
    font-size: 12px;
    font-weight: 700;
}
.legal-page__updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(0, 0, 0, .5);
    margin-bottom: 24px;
}
.legal-page__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(var(--travhub-base-rgb), .06);
    border-inline-start: 3px solid var(--travhub-base);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 36px;
}
.legal-page__intro i { color: var(--travhub-base); font-size: 18px; margin-top: 3px; }
.legal-page__intro p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--travhub-text); }
.legal-page__section {
    display: flex;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.legal-page__section:last-of-type { border-bottom: none; }
.legal-page__section__num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--travhub-black);
    color: var(--travhub-white);
    font-family: var(--travhub-heading-font);
    font-weight: 700;
    font-size: 16px;
}
.legal-page__section__body h3 {
    font-size: 19px;
    margin-bottom: 10px;
}
.legal-page__section__body p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--travhub-text);
}
.legal-page__plain {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--travhub-text);
    margin-top: 28px;
}
.legal-page__cta {
    text-align: center;
    background: rgba(0, 0, 0, .025);
    border-radius: 16px;
    padding: 40px 30px;
    margin-top: 36px;
}
.legal-page__cta i { font-size: 30px; color: var(--travhub-base); margin-bottom: 14px; display: block; }
.legal-page__cta p {
    max-width: 480px;
    margin: 0 auto 20px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--travhub-text);
}
@media (max-width: 575.98px) {
    .legal-page { padding: 60px 0; }
    .legal-page__section { flex-direction: column; gap: 14px; }
}