/* ===== Header additions: language switch + search + account controls ===== */

/* Arabic uses Tajawal everywhere — headings, links, buttons, labels, form
   fields — instead of the Latin-only template fonts, which fall back to an
   inconsistent system Arabic face. Headings/taglines have their own
   font-family rules elsewhere in travhub.css (e.g. `h1..h6`, `.title`,
   `.sec-title__tagline`) that would otherwise win over simple inheritance
   from .lang-ar, so every text-bearing tag is listed explicitly here.
   Icon glyphs live exclusively on <i> tags in this codebase, so leaving
   that tag out of the list keeps Font Awesome/icomoon icons unaffected
   without needing to fight their font-family rules on specificity. */
.lang-ar,
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5, .lang-ar h6,
.lang-ar p, .lang-ar a, .lang-ar span, .lang-ar div, .lang-ar li,
.lang-ar button, .lang-ar input, .lang-ar select, .lang-ar textarea, .lang-ar label {
    font-family: 'Tajawal', var(--travhub-font);
}
/* The mobile slide-out menu's own nav-link rule sets font-family with
   higher specificity (two classes + two elements) than the generic
   `.lang-ar a` above, so it kept winning and fell back to the Latin font
   on small screens. Match its selector path to override it too. */
.lang-ar .mobile-nav__content .main-menu__list li > a {
    font-family: 'Tajawal', var(--travhub-font);
}

.main-header__right {
    gap: 12px;
}

/* The uploaded logo can be square or wide depending on what the admin
   picked (currently a square file) — the site-wide .brand-mark__img default
   (42x42, object-fit:cover) crops it down small. Constrain by height only
   and let width scale naturally so it's never cropped or squeezed into
   empty box space, at a size comparable to the admin header's logo tile. */
.main-header__logo .brand-mark__img {
    width: auto;
    height: 72px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 0;
}

.mobile-nav__content .logo-box .brand-mark__img {
    width: auto;
    height: 60px;
    max-width: 180px;
    object-fit: contain;
    border-radius: 0;
}

/* The template's default is a transparent header absolutely positioned over
   the hero image (so the hero's background shows through it), with a
   separate white copy that a scroll listener fixes to the top only while
   scrolling up (see travhub.js / .sticky-header--cloned in travhub.css —
   left alone below, it already does "stays fixed on scroll" correctly).
   `position: sticky` can't be used for the real header instead because
   .page-wrapper has overflow:hidden, which disables sticky on any
   descendant — so we only fix the resting/top state here: make the real
   header solid white and part of the page flow instead of a transparent
   overlay floating over the hero. */
.main-header--three:not(.sticky-header--cloned) {
    position: relative;
    background-color: var(--travhub-white);
    margin: 6px 0;
}

/* Now that the header sits in normal flow (not floating over the hero), its
   default ~100px height — mostly 35px of vertical padding baked into every
   nav link for a floating-over-hero header — reads as too tall. Tighten it
   into a normal, always-visible top bar. */
.main-header--two .main-menu .main-menu__list > li {
    padding-top: 20px;
    padding-bottom: 10px;
}

/* Same shrink for the mobile/tablet bar (nav is hidden there, so its height
   comes from .main-header__inner's own padding instead). */
@media (max-width: 1199px) {
    .main-header--two .main-header__inner {
        padding: 10px 0;
    }
}

/* Three-zone header: logo pinned to the start, nav truly centered in the
   remaining space, controls pinned to the end — mirrors automatically with
   dir="rtl"/"ltr" (logo right / nav middle / buttons left in Arabic). */
.main-header--two .main-header__inner {
    justify-content: space-between;
}
.main-header--two .main-header__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

/* The template only ever spaces nav items with a physical margin-left,
   which doesn't flip for dir="rtl" — in Arabic that put the gap on the
   wrong side of each link, so "الرئيسية" and "من نحن" rendered glued
   together. margin-inline-start respects dir and fixes both languages. */
.main-header--two .main-menu .main-menu__list > li + li {
    margin-left: 0;
    margin-inline-start: 35px;
}
@media (max-width: 1240px) {
    .main-header--two .main-menu .main-menu__list > li + li {
        margin-inline-start: 20px;
    }
}

/* "Pages" submenu: show it's a dropdown with a caret, and rebuild the
   panel so it's positioned/animated correctly whether the page is RTL
   or LTR (the template only ever offset it with a physical `left`). */
.nav-dropdown__caret {
    font-size: 10px;
    margin-inline-start: 6px;
    transition: transform 300ms ease;
}
.nav-dropdown:hover .nav-dropdown__caret {
    transform: rotate(180deg);
}

.main-menu .main-menu__list li.nav-dropdown ul {
    left: auto;
    right: auto;
    inset-inline-start: -20px;
    border-radius: 14px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.main-menu .main-menu__list li.nav-dropdown ul li > a {
    border-radius: 8px;
    margin-bottom: 2px;
}
.main-menu .main-menu__list li.nav-dropdown ul li > a::after {
    right: auto;
    inset-inline-end: 16px;
}

/* The desktop inline text nav has no room once the language/account controls
   are added; below the hamburger breakpoint the same links are already
   available via the cloned slide-out menu (see travhub.js), so hide the
   duplicate to stop it from pushing the hamburger button off-screen. */
@media (max-width: 1199px) {
    .main-header__nav { display: none; }
}

/* The template's own "hide Start Booking on mobile" rule relies on CSS
   nesting that isn't reliably applied here, and a more specific
   `.main-header--two .main-header__btn { display: block }` rule at
   max-width:1599px otherwise wins — match its specificity to actually hide it. */
@media (max-width: 767px) {
    .main-header--two .main-header__btn { display: none; }
}

/* Language switch + search — styled as the same travhub-btn pill used by
   "Start Booking" / "Login" so every header control reads as one family.
   Sized down a notch from the template's default pill so a whole row of
   them doesn't dominate the header. */
.main-header--two .main-header__right .travhub-btn {
    padding: 8px 16px;
    font-size: 14px;
}

.header-lang__toggle span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-lang__code { letter-spacing: .5px; }
.header-lang__caret { font-size: 10px; opacity: .85; }

/* Shared polish for every Bootstrap dropdown panel hanging off the header
   (language switch, account chip) so they match the "Pages" nav dropdown
   and sit correctly whether the page is RTL or LTR. */
.main-header .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, .1);
    padding: 8px;
    margin-top: 10px !important;
    min-width: 170px;
}
.main-header .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 200ms ease, color 200ms ease;
}
.main-header .dropdown-menu .dropdown-item + .dropdown-item {
    margin-top: 2px;
}
.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus {
    background-color: var(--travhub-gray);
    color: var(--travhub-black);
}
.main-header .dropdown-menu .dropdown-item.active,
.main-header .dropdown-menu .dropdown-item:active {
    background-color: var(--travhub-base);
    color: var(--travhub-white);
}
.main-header .dropdown-menu .dropdown-divider {
    margin: 6px 4px;
}

.header-account {
    display: inline-flex;
    align-items: center;
}

.header-account__chip { display: flex; align-items: center; }

.header-account__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    background-color: rgba(0, 0, 0, .04);
    font-family: inherit;
    padding: 6px 12px 6px 6px;
    border-radius: 30px;
}
[dir="rtl"] .header-account__toggle {
    padding: 6px 6px 6px 12px;
}

.header-account__avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--travhub-base);
    color: var(--travhub-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.header-account__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--travhub-black);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__toggle i { font-size: 11px; color: var(--travhub-black); }

@media (max-width: 991px) {
    .header-account__name { display: none; }
}

.main-header__btn .travhub-btn span,
.header-account .travhub-btn span {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .header-lang__code { display: none; }
    .main-header__right { gap: 8px; }
    .header-lang__toggle { padding: 8px 12px !important; }
    .mobile-nav__btn.mobile-nav__toggler { margin-left: 6px !important; margin-right: 6px !important; }
}

/* Language switch + login move out of the top bar and into the hamburger
   menu on phones — with the nav links, an account chip/dropdown, and now a
   language switcher all crammed into one row, it was too tight. */
.mobile-nav__account-lang { display: none; }
@media (max-width: 767px) {
    .header-lang, .header-account { display: none; }
    .mobile-nav__account-lang {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 24px 0;
        padding: 16px 0;
        border-top: 1px solid rgba(0, 0, 0, .08);
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }
    .mobile-nav__lang { display: flex; gap: 14px; }
    .mobile-nav__lang__link {
        font-size: 13px;
        font-weight: 600;
        color: var(--travhub-text);
        text-decoration: none;
    }
    .mobile-nav__lang__link.active { color: var(--travhub-base); }
    .mobile-nav__account-btn { padding: 8px 18px !important; font-size: 13px; }
}

/* ===== Mobile slide-out menu (parts/footer.php .mobile-nav__wrapper) =====
   Switched from the template's dark panel to a plain white one, matching
   the rest of the site's light chrome. */
.mobile-nav__content {
    background-color: var(--travhub-white);
}
.mobile-nav__content .main-menu__list li > a {
    color: var(--travhub-black);
}
.mobile-nav__content .main-menu__list li:not(:last-child) {
    border-bottom-color: rgba(0, 0, 0, .08);
}
.mobile-nav__content .main-menu__list ul {
    border-top-color: rgba(0, 0, 0, .08);
}
.mobile-nav__social a,
.mobile-nav__contact li {
    color: var(--travhub-black);
}

/* Same physical margin-left bug as the desktop nav spacing: it doesn't
   flip for dir="rtl", so the social icons rendered with no gap between them. */
.mobile-nav__social a + a {
    margin-left: 0;
    margin-inline-start: 20px;
}

/* Same bug again on the contact icons: margin-right doesn't flip for
   dir="rtl", so the icon rendered glued to the email/phone text with the
   gap pushed out to the wrong (outer) side instead of between them. */
.mobile-nav__contact li > i {
    margin-right: 0;
    margin-inline-end: 10px;
}
.mobile-nav__contact li,
.mobile-nav__contact li > a {
    width: 100%;
}

/* The close (X) button is pinned with a physical `right`, which never
   flips for dir="rtl" — in Arabic the logo (first child of the row, so it
   renders on the right under RTL) ended up sitting right underneath it.
   inset-inline-end keeps it on the true trailing edge in both directions. */
.mobile-nav__close {
    right: auto;
    inset-inline-end: 15px;
    color: var(--travhub-black);
}

/* "Pages" gets our own dropdown caret (see the nav-dropdown rules above)
   cloned in from the desktop menu, plus travhub.js injects its own toggle
   button here for the mobile accordion — that's two chevrons on one link.
   Keep only the functional accordion toggle. */
.mobile-nav__container .nav-dropdown__caret {
    display: none;
}

/* ===== Home "Our Tour Programs" section =====
   Reuses the /tour listing page's .tours-one__item card (always-visible
   gradient scrim, no hover-only content) instead of the old destination
   carousel's hover-to-reveal design. Only the summary paragraph is new
   here — the card doesn't have one on the /tour page — so it needs its
   own styling and a line-clamp to keep varying summary lengths from
   pushing the meta/price around. */
.tours-one__item__text {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* .home-tours is a brand new section with no padding of its own (unlike
   every sibling section here, which uses the template's 120px 0
   convention) — its heading sat flush against the search bar above it and
   its "View All Tours" button sat flush against the cars section below. */
.home-tours {
    padding: 100px 0;
}
@media (max-width: 767px) {
    .home-tours {
        padding: 60px 0;
    }
}

/* The cars section's background was the old orange theme's peach tint
   (#FFEDE5) — replaced with a light tint of the new teal accent instead. */
.tours-three {
    background: rgba(var(--travhub-base-rgb), .08);
}

/* ===== Real footer: stripped down to just a plain copyright bar ===== */
.site-footer {
    background-color: var(--travhub-white);
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding: 20px 0;
}
.site-footer .main-footer__copyright {
    color: var(--travhub-black);
}
.site-footer .main-footer__credit {
    color: var(--travhub-text);
}
.site-footer .main-footer__credit a {
    color: var(--travhub-black);
    border-bottom-color: rgba(0, 0, 0, .3);
}
.site-footer .main-footer__legal-links a {
    color: var(--travhub-text);
}
.site-footer .main-footer__legal-links a:hover {
    color: var(--travhub-base);
}
.site-footer .main-footer__legal-links li + li::before {
    background: rgba(0, 0, 0, .25);
}

/* ===== Car listing card (cars.php + home.php featured cars) =====
   Replaces the reused .tours-three__card (a tour-package card design that
   never really fit a car listing — mismatched proportions, a floating
   status badge, and no clear call to action). This is a purpose-built
   card instead. */
.car-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: 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);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .1);
}
.car-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .04);
}
.car-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.car-card:hover .car-card__thumb img {
    transform: scale(1.06);
}
.car-card__thumb-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.car-card__badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--travhub-base);
    color: var(--travhub-white);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 30px;
}
.car-card__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}
.car-card__badge--seasonal {
    background-color: var(--travhub-black);
}
.car-card__badge--rented {
    background-color: rgba(var(--travhub-black-rgb), .55);
}
.car-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}
.car-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.car-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--travhub-black);
}
.car-card__title a {
    color: inherit;
}
.car-card__title a:hover {
    color: var(--travhub-base);
}
.car-card__color {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--travhub-text);
    background-color: rgba(0, 0, 0, .04);
    padding: 5px 10px;
    border-radius: 30px;
    white-space: nowrap;
}
.car-card__color i {
    font-size: 8px;
    color: var(--travhub-base);
}
.car-card__specs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.car-card__specs li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--travhub-text);
}
.car-card__specs a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}
.car-card__specs i {
    color: var(--travhub-base);
    font-size: 13px;
}
.car-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.car-card__price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.car-card__price-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--travhub-text);
}
.car-card__price-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--travhub-base);
}
.car-card__price-value small {
    font-size: 12px;
    font-weight: 600;
    color: var(--travhub-text);
}
.car-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background-color: var(--travhub-black);
    color: var(--travhub-white);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 200ms ease;
}
.car-card__cta:hover {
    background-color: var(--travhub-base);
    color: var(--travhub-white);
}
.car-card__cta i {
    font-size: 11px;
    transition: transform 200ms ease;
}
.car-card:hover .car-card__cta i {
    transform: translateX(3px);
}
[dir="rtl"] .car-card:hover .car-card__cta i {
    transform: translateX(-3px);
}
.car-card--rented {
    opacity: .8;
}
.car-card--rented .car-card__title,
.car-card--rented .car-card__title a {
    color: var(--travhub-text) !important;
}