/* 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 {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    /* .main-footer__legal-links is itself display:flex, so it ends up
       spanning the full row width as a flex item — its own children then
       need their own justify-content:center, the parent's text-align alone
       doesn't reach them since flex items ignore text-align for positioning. */
    .main-footer__legal-links {
        justify-content: center;
        width: 100%;
    }
}
.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 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);
}

/* "Complete your booking" modal (tour-details.php transfer/tour booking) —
   was raw unstyled Bootstrap .form-control boxes dropped into an otherwise
   fully custom-designed site. .form-one on the <form> already re-styles
   its text/textarea inputs (see travhub.css); this covers what that
   selector list doesn't reach — labels and the file input, which browsers
   won't let plain CSS restyle beyond its box. */
.transfer-booking-form .form-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--travhub-black);
    margin: 0 0 6px;
}
.transfer-booking-form__file {
    display: block;
    width: 100%;
    border: 1px solid var(--travhub-border-color);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: rgba(var(--travhub-text-rgb), 0.7);
    background-color: transparent;
}
.transfer-booking-form .form-text {
    font-size: 13px;
    margin-top: 6px;
}
.transfer-booking-form input[type="time"] {
    height: 48px;
    width: 100%;
    border: 1px solid var(--travhub-border-color);
    background-color: transparent;
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    font-size: 16px;
    color: rgba(var(--travhub-text-rgb), 0.8);
}

/* Booking modal shell — branded header (icon badge + tour name, instead of
   a bare "Complete your booking" with no context) and a bigger, clearer
   submit action instead of a plain default-size button. */
.transfer-booking-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}
.transfer-booking-modal__header {
    /* Solid-to-lighter-tint of the SAME brand color, not a second fixed
       color — so this keeps looking right no matter what
       --travhub-base is set to in assets/css/site-colors.css. */
    background: linear-gradient(135deg, var(--travhub-base), rgba(var(--travhub-base-rgb), 0.75));
    border: none;
    padding: 24px 28px;
    align-items: center;
}
.transfer-booking-modal__header-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-inline-end: 14px;
}
.transfer-booking-modal__header-text { flex: 1 1 auto; min-width: 0; }
.transfer-booking-modal__header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    margin: 0;
}
.transfer-booking-modal__header-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.transfer-booking-modal__header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.transfer-booking-modal .modal-body {
    padding: 28px;
}

/* Section labels — small caption above each group of fields, so the form
   reads as three clear steps (personal info / meeting details / documents)
   instead of one long undifferentiated list. */
.transfer-booking-form__section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--travhub-base);
    margin: 22px 0 12px;
}
.transfer-booking-form__section-label:first-of-type { margin-top: 0; }
.transfer-booking-form__section-label i { font-size: 13px; }

/* Meeting-details box — visually set apart (tinted background) since it's
   the one part of the form that's actually specific to this booking type,
   not just standard contact/document fields. */
.transfer-booking-form__meeting-box {
    background: rgba(var(--travhub-base-rgb), 0.06);
    border: 1px solid rgba(var(--travhub-base-rgb), 0.15);
    border-radius: 14px;
    padding: 18px 18px 6px;
    margin-top: 4px;
}
.transfer-booking-form__meeting-box .transfer-booking-form__section-label { margin-top: 0; }

.transfer-booking-modal__footer {
    border-top: 1px solid rgba(var(--travhub-black-rgb), 0.08);
    padding: 18px 28px;
}
.transfer-booking-modal__submit {
    padding: 12px 32px;
    font-weight: 700;
}

/* ---- 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;
}
/* ---- 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) — redesigned into a
   raised, self-contained "reserve" card: soft shadow instead of the
   theme's flat 1px border + flat grey fill, more breathing room, and a
   sticky position on desktop so it stays in view beside the long specs
   column. Nothing here renames the IDs/classes the inline booking
   calculator script reads (data-price, data-mode, .active, #carFromDate,
   etc) — this block only changes appearance. */
.tours-details__booking {
    background-color: var(--travhub-white);
    border: 1px solid rgba(var(--travhub-black-rgb), 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(var(--travhub-black-rgb), 0.14);
    padding: 26px 24px 28px;
}
@media (min-width: 992px) {
    .tours-details__booking { position: sticky; top: 24px; }
}
.tours-details__booking .travhub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    margin-top: 24px;
    box-shadow: 0 10px 24px -6px rgba(var(--travhub-base-rgb), 0.55);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.tours-details__booking .travhub-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -6px rgba(var(--travhub-base-rgb), 0.6);
}
.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 — a real segmented control (grey track, active
   choice raised on a white pill) instead of two separately-outlined
   buttons that read as two unrelated actions rather than one either/or
   choice. */
.car-rate-toggle {
    display: flex; gap: 4px; margin-bottom: 18px;
    background: rgba(var(--travhub-black-rgb), 0.05);
    border-radius: 12px; padding: 4px;
}
.car-rate-toggle__btn {
    flex: 1; border: none; background: transparent;
    border-radius: 9px; padding: 9px 6px; font-size: 13px; font-weight: 600;
    font-family: var(--travhub-font); color: var(--travhub-text); 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-white); color: var(--travhub-black);
    box-shadow: 0 2px 8px rgba(var(--travhub-black-rgb), 0.12);
}
/* 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: 22px !important; }
.tours-details__booking__title { margin-bottom: 10px; }

/* Price hero (car-details.php) — a tinted card instead of bare text, so
   the number that matters most on the page carries some visual weight of
   its own rather than blending into the surrounding labels. */
.car-price-hero {
    margin-bottom: 18px;
    background: rgba(var(--travhub-base-rgb), 0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.car-price-hero__label { font-size: 12.5px; color: var(--travhub-text, #6b7280); margin-bottom: 2px; }
.car-price-hero__amount { font-size: 23px; font-weight: 800; color: var(--travhub-base); line-height: 1.2; }

/* Pickup/return date range — one bordered card holding both fields with a
   center divider, instead of two independent Bootstrap inputs sitting
   loose in a row (which is what read as "uncomfortable" — plain native
   date inputs with no visual container of their own). */
.car-date-range {
    display: flex; flex-wrap: wrap; align-items: stretch;
    border: 1px solid rgba(var(--travhub-black-rgb), 0.12);
    border-radius: 12px; margin-bottom: 4px; overflow: hidden;
}
.car-date-field { flex: 1 1 0; min-width: 0; padding: 9px 12px; }
.car-date-field__label {
    display: block;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--travhub-text, #6b7280); margin-bottom: 4px;
}
.car-date-field__input {
    width: 100%; border: none; padding: 0; background: transparent;
    font-size: 14px; font-weight: 600; font-family: var(--travhub-font);
    color: var(--travhub-black);
}
.car-date-field__input:focus { outline: none; }
.car-date-range__divider {
    flex: 0 0 auto; width: 1px;
    background: rgba(var(--travhub-black-rgb), 0.12);
}
.car-days-count {
    flex: 0 0 100%; margin: 0; padding: 6px 12px 8px; font-size: 11.5px;
    border-top: 1px solid rgba(var(--travhub-black-rgb), 0.08);
}

/* Pickup/Drop-off location cards (car-details.php) — a compact single-line
   row (icon, label, price) instead of a tall stacked card, so this choice
   reads as a small in-line control rather than a big block competing with
   the price hero above it. */
.car-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.car-loc-option {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid rgba(var(--travhub-black-rgb), 0.1); border-radius: 10px;
    background: transparent; padding: 8px 10px; cursor: pointer;
    font-family: var(--travhub-font); color: var(--travhub-black); transition: 200ms ease;
}
.car-loc-option i { flex: 0 0 auto; font-size: 13px; color: var(--travhub-text, #6b7280); transition: color 200ms ease; }
.car-loc-option__label { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; text-align: start; }
.car-loc-option__price { flex: 0 0 auto; font-size: 10.5px; color: var(--travhub-text, #6b7280); }
.car-loc-option:hover { border-color: rgba(var(--travhub-base-rgb), 0.5); }
.car-loc-option.active { background: var(--travhub-base); border-color: var(--travhub-base); color: #fff; }
.car-loc-option.active i, .car-loc-option.active .car-loc-option__price { color: rgba(255,255,255,0.85); }

/* Optional extras — grouped into one bordered list instead of loose,
   free-floating checkbox rows, so add-ons read as a single block rather
   than scattered lines. */
.car-extras-list {
    border: 1px solid rgba(var(--travhub-black-rgb), 0.1);
    border-radius: 12px; overflow: hidden;
}
.car-extras-list .tours-details__booking__check-box {
    margin: 0; padding: 11px 14px;
}
.car-extras-list .tours-details__booking__check-box:not(:last-child) {
    border-bottom: 1px solid rgba(var(--travhub-black-rgb), 0.08);
}

/* 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); }
.transfer-coupon-row { flex-direction: column; align-items: stretch !important; }
.transfer-coupon-input { display: flex; gap: 8px; }
.transfer-coupon-input input {
    flex: 1 1 auto; padding: 9px 12px; border: 1px solid rgba(var(--travhub-black-rgb), 0.15);
    border-radius: 8px; font-size: 13.5px;
}
.transfer-coupon-input button {
    flex: 0 0 auto; padding: 0 16px; border: 1px solid var(--travhub-base);
    background: transparent; color: var(--travhub-base); border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s;
}
.transfer-coupon-input button:hover { background: var(--travhub-base); color: #fff; }
.transfer-coupon-input input:disabled { background: rgba(var(--travhub-black-rgb), 0.04); }
.transfer-coupon-msg { font-size: 12.5px; margin-top: 6px; min-height: 15px; }
#transferDiscountRow {
    background: rgba(220, 53, 69, 0.08); margin-top: -6px;
}
#transferDiscountRow > span, #transferDiscountRow .tours-details__booking__list__left { color: #dc3545 !important; font-size: 14px !important; }

/* 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: 11px 14px;
    margin-top: 18px !important;
}
.car-total-row li {
    border: none; padding: 0; flex-wrap: wrap; row-gap: 4px;
}
.car-total-row .tours-details__booking__list__left {
    font-size: 13px; font-weight: 600; margin: 0; flex: 1 1 auto; min-width: 0;
    color: var(--travhub-text, #6b7280);
}
.car-total-row #carEstimatedTotal {
    font-size: 18px; font-weight: 800; 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: 18px; }
}

/* Book-this-car CTA — scoped to #carBookLink only (not the shared
   .tours-details__booking .travhub-btn rule tour-details.php also uses)
   so shrinking/squaring it never touches the tour booking button. */
#carBookLink {
    font-size: 15px;
    padding: 11px 20px;
    border-radius: 8px;
}
.car-terms-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--travhub-text, #6b7280);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.car-terms-link:hover { color: var(--travhub-base); }
.car-terms-link i { font-size: 12px; }
/* Car rental terms modal — a plain Bootstrap .modal-header/.btn-close pair
   assumes LTR (the public site only ships the LTR bootstrap.min.css, no
   .rtl build), so the close "x" sits on the wrong side and overlaps the
   Arabic title. Same fix already used for .tour-gallery-modal__close:
   a custom header with the close button placed via inset-inline-end,
   which resolves to the correct physical side under dir="rtl" on its own. */
.car-terms-modal .modal-content { border: none; border-radius: 18px; overflow: hidden; }
.car-terms-modal__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 56px 20px 24px;
    background: linear-gradient(135deg, var(--travhub-base), rgba(var(--travhub-base-rgb), 0.75));
}
[dir="rtl"] .car-terms-modal__head { padding: 22px 24px 20px 56px; }
.car-terms-modal__head-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.car-terms-modal__head-text h5 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #fff; }
.car-terms-modal__head-text span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.car-terms-modal__close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.car-terms-modal__close:hover { background: rgba(255, 255, 255, 0.32); }
.car-terms-modal__body {
    /* No manual max-height/vh guess here — .modal-dialog-scrollable (added
       on the markup) already caps .modal-content to the viewport and makes
       this element the one that scrolls, so header+body+footer can never
       add up to more than the screen height on a short/mobile viewport. */
    padding: 24px;
    background: var(--travhub-white, #fff);
}
.car-terms-clause {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(var(--travhub-black-rgb), 0.06);
}
.car-terms-clause:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.car-terms-clause__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--travhub-base-rgb), 0.12);
    color: var(--travhub-base);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.car-terms-clause__body {
    font-size: 14px;
    line-height: 1.9;
    color: var(--travhub-text, #444);
}
.car-terms-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(var(--travhub-black-rgb), 0.06);
    display: flex;
    justify-content: flex-end;
}
.car-terms-modal__footer .travhub-btn { padding: 10px 28px; border-radius: 8px; font-size: 14px; }
@media (max-width: 480px) {
    .car-terms-modal .modal-dialog { margin: 8px; }
    .car-terms-modal__head { padding: 16px 48px 14px 16px; gap: 10px; }
    [dir="rtl"] .car-terms-modal__head { padding: 16px 16px 14px 48px; }
    .car-terms-modal__head-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
    .car-terms-modal__head-text h5 { font-size: 15.5px; }
    .car-terms-modal__head-text span { font-size: 11px; }
    .car-terms-modal__close { width: 30px; height: 30px; top: 13px; font-size: 12px; }
    .car-terms-modal__body { padding: 16px; }
    .car-terms-clause { gap: 10px; }
    .car-terms-clause__body { font-size: 13.5px; }
    .car-terms-modal__footer { padding: 12px 16px; }
    .car-terms-modal__footer .travhub-btn { width: 100%; }
}

/* 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;
}

/* Write-a-review star grid (tour-details.php) — used to be a lopsided
   Bootstrap row (one col-md-6 + three col-md-4, which never adds up to a
   clean 12 across two rows), each item floating loosely with no visual
   grouping. Now a proper card, matching .review-summary's look, with all
   4 categories in one evenly-spaced grid: 2x2 on phones, 4-across on
   larger screens. */
.review-form-ratings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: rgba(var(--travhub-black-rgb), 0.02);
    border: 1px solid rgba(var(--travhub-black-rgb), 0.08);
    border-radius: 14px;
    padding: 20px;
}
.review-form-ratings__item {
    text-align: center;
}
.review-form-ratings__item .star-rating-label {
    margin-bottom: 10px;
}
.review-form-ratings__item .star-rating {
    justify-content: center;
}
@media (min-width: 576px) {
    .review-form-ratings { grid-template-columns: repeat(4, 1fr); }
}

/* 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,
.checkout-summary__photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.checkout-summary__photo--clickable { cursor: pointer; }
.checkout-summary__viewall {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 150ms ease;
}
.checkout-summary__photo--clickable:hover .checkout-summary__viewall { background: var(--travhub-base); }
.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__coupon {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.checkout-summary__coupon-input { display: flex; gap: 8px; }
.checkout-summary__coupon-input input {
    flex: 1 1 auto; min-width: 0; padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; font-size: 13px;
}
.checkout-summary__coupon-input input:disabled { background: rgba(0, 0, 0, .04); }
.checkout-summary__coupon-input button {
    flex: 0 0 auto; padding: 0 16px; border: 1px solid var(--travhub-base);
    background: transparent; color: var(--travhub-base); border-radius: 8px;
    font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s;
}
.checkout-summary__coupon-input button:hover { background: var(--travhub-base); color: #fff; }
.checkout-summary__coupon-msg { font-size: 12px; margin-top: 6px; min-height: 15px; }
.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__total--discount {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
    font-size: 13px;
    font-weight: 600;
    color: #dc3545;
}
.checkout-summary__total--discount span:last-child {
    font-size: 13px;
    color: #dc3545;
}
.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/car listing card cover photo: travhub.css only sets height:auto +
   min-height:500px, which is a FLOOR not a fixed size — a portrait-shot
   upload (common from a phone, and now also possible for cars since the
   gallery upload has no aspect-ratio requirement) renders taller than
   500px and stretches that one card out of line with its row-mates. Fixed
   height forces every card to the same box regardless of what was
   uploaded, matching the video rule below exactly. */
.tours-one__item img {
    height: 500px;
}

/* 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);
}

/* The floating action button (car "Details" arrow, tour video-popup icon)
   is pinned with a hardcoded right:30px in travhub.css, so it stays glued
   to the same physical corner in Arabic even though its arrow icon already
   flips to point left — mirror the position too so the whole affordance
   reads consistently in RTL. */
[dir="rtl"] .tours-one__item__btn {
    right: auto;
    left: 30px;
}
@media (max-width: 1399px) {
    [dir="rtl"] .tours-one__item__btn {
        left: 20px;
    }
}

/* 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; }
}

/* ---- /cars filter sidebar ---- */
.cars-filter__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ecedf0;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--travhub-black);
    margin-bottom: 16px;
    cursor: pointer;
}
.cars-filter__toggle i { color: var(--travhub-base); }
.cars-filter__badge {
    margin-inline-start: auto;
    background: var(--travhub-base);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    padding: 5px 9px;
}
.cars-filter {
    background: #fff;
    border: 1px solid #ecedf0;
    border-radius: 14px;
    padding: 24px;
}
@media (min-width: 992px) {
    .cars-filter { position: sticky; top: 24px; }
}
.cars-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.cars-filter__head h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--travhub-black);
    margin: 0;
}
.cars-filter__clear {
    font-size: 13px;
    font-weight: 600;
    color: var(--travhub-base);
    text-decoration: underline;
}
.cars-filter__group {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f1f3;
}
.cars-filter__group:last-of-type { border-bottom: none; padding-bottom: 0; }
.cars-filter__label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--travhub-black);
    margin-bottom: 8px;
}
.cars-filter__checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 190px;
    overflow-y: auto;
}
.cars-filter__check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--travhub-text);
    cursor: pointer;
    margin: 0;
}
.cars-filter__check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--travhub-base);
    cursor: pointer;
    flex-shrink: 0;
}
.cars-filter__price-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cars-filter__price-sep { color: var(--travhub-text); flex-shrink: 0; }
.cars-results__head { margin-bottom: 18px; }
.cars-results__count {
    font-size: 15px;
    color: var(--travhub-text);
    margin: 0;
}
.cars-results__count strong { color: var(--travhub-black); }

/* The shared .tours-one__item card (assets/css/travhub.css) forces a
   500px-tall image — fine for the wide single-row tour showcases it was
   built for, but on /cars the cards sit 2-per-row next to the filter
   sidebar and looked oversized at that height. Scoped to this page's grid
   only, so tour.php/tour-carousel.php's cards (which reuse the same class)
   keep the original theme sizing. */
.cars-filters-section .tours-one__item img { min-height: 260px; }

/* ---- Cancellation reason in the customer's "My Bookings" (pages/bookings.php) ---- */
.account-cancel-reason {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #b42318;
    max-width: 260px;
    white-space: normal;
}
.account-cancel-reason i { margin-top: 3px; flex-shrink: 0; }
.account-cancel-box {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #912018;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}