/* ===== C. STICKY HEADER STACKING (z-index only; bg is native #0c211a) ===== */
#masthead.site-header { position: relative; z-index: 9990; }
.main-navigation.is_stuck,
#sticky-navigation,
#sticky-navigation.navigation-clone { z-index: 9995 !important; }

/* ===== B. MOBILE LOGO HEIGHT 56px (no native responsive logo-width field) ===== */
@media (max-width: 1149px) {
  .navigation-branding img.is-logo-image,
  .navigation-branding .sticky-navigation-logo img,
  #sticky-navigation .navigation-branding img,
  .site-logo img,
  #masthead .site-logo img,
  .site-header .header-image {
    max-height: 44px !important; height: 44px !important; width: auto !important;
    max-width: none !important; object-fit: contain !important;
    /* GP gives .navigation-branding img padding:10px 0; with border-box that
       padding eats into our capped height and visually shrinks the sticky
       logo vs the header logo. Zero it so the cap is all visible image. */
    padding: 0 !important;
  }
  /* keep EN standard logo container from shrinking/squeezing the image in a crowded bar */
  .site-header .site-logo,
  #masthead .inside-header > .site-logo { flex-shrink: 0 !important; }
}

/* ===== B2. DESKTOP unify logo height 62px on the STICKY CLONE =====
   Native Site Identity > Logo Width (=155 => 62px) sizes the ORIGINAL header
   logo, but GeneratePress does NOT apply logo width to the sticky-clone logo.
   Pin the clone (and original, harmlessly) to 62px so size is identical
   before/after scroll. */
@media (min-width: 1150px) {
  #sticky-navigation .navigation-branding img,
  .navigation-branding img.is-logo-image,
  .navigation-branding .sticky-navigation-logo img,
  #masthead .site-logo img,
  .site-header .header-image {
    max-height: 62px !important; height: 62px !important;
    /* explicit width, not auto: flex sizing squeezed the clone's copy of the
       same 250x100 logo to 105px. 62px tall at 2.5 aspect = 155px, identical
       to the real header logo. */
    width: 155px !important; max-width: none !important; object-fit: contain;
    /* GP's .navigation-branding img padding:10px 0 (border-box) left only
       42px of visible logo inside the 62px cap on the sticky clone — the
       "logo shrinks after scroll" report. Zero it: 62px = 62px both states. */
    padding: 0 !important;
  }
  /* pin the clone's logo CONTAINERS as well (Safari flex-shrink safety) */
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding,
  #sticky-navigation .navigation-branding .sticky-navigation-logo,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo {
    width: 155px !important; min-width: 155px !important;
    flex: 0 0 155px !important; overflow: visible !important;
  }
}

/* ===== B3. MOBILE sticky-clone logo = SAME 44px as the normal mobile header =====
   (was 52px, which made the logo visibly grow after scrolling) */
@media (max-width: 1149px) {
  #sticky-navigation .navigation-branding img,
  #sticky-navigation .sticky-navigation-logo img,
  #sticky-navigation .navigation-branding .sticky-navigation-logo img,
  .main-navigation.is_stuck .navigation-branding img,
  .main-navigation.is_stuck .sticky-navigation-logo img {
    max-height: 44px !important; height: 44px !important;
    width: 110px !important; /* 44px at the logo's 2.5 aspect */
    max-width: none !important; object-fit: contain !important;
  }
  /* BULLETPROOF (2026-07-21): Safari still shrank the clone's img despite all
     width pins — so hide the img and paint the logo as a fixed-size background
     on the branding container instead. Background-images cannot be squeezed
     by any flex math. */
  #sticky-navigation .navigation-branding img,
  .main-navigation.is_stuck .navigation-branding img { display: none !important; }
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding {
    width: 110px !important; min-width: 110px !important; height: 44px !important;
    flex: 0 0 110px !important; overflow: visible !important;
    background: url('https://tripyana.com/wp-content/uploads/2025/04/cropped-Tripyana-1-2-1.png') center/contain no-repeat !important;
  }
  /* keep the logo CLICKABLE (2026-07-22): hiding the img collapsed the inner
     <a> to 0 height, so the background-painted logo lost its home link —
     stretch the wrapper and anchor over the whole container instead. */
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding { position: relative !important; }
  #sticky-navigation .navigation-branding .sticky-navigation-logo,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 110px !important; min-width: 110px !important; height: 44px !important;
  }
  #sticky-navigation .navigation-branding .sticky-navigation-logo a,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo a {
    display: block !important; width: 100% !important; height: 100% !important;
  }
}

/* ===== A. BOOK NOW BUTTON COLORING (solid gold + dark emerald text, fully rounded) =====
   WP puts the menu CSS class on the <li>, so we style the <a> inside
   li.header-book-btn. Legacy a.tripyana-book-btn kept as a direct-anchor alias. */
.menu-bar-items li.header-book-btn > a, .main-navigation li.header-book-btn > a,
li.header-book-btn > a, a.header-book-btn, a.tripyana-book-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: #d4af37 !important; color: #0c211a !important;
  font-weight: 700; height: 42px; line-height: 42px; padding: 0 22px !important;
  border-radius: 9999px !important; text-decoration: none !important; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .2s ease, box-shadow .2s ease; margin: 0 6px;
}
li.header-book-btn > a:hover, a.header-book-btn:hover, a.tripyana-book-btn:hover {
  background-color: #e5c14e !important; color: #0c211a !important; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.main-navigation .main-nav ul li.header-book-btn > a { color: #0c211a !important; }
@media (max-width: 1149px) { li.header-book-btn > a, a.header-book-btn, a.tripyana-book-btn { height: 38px !important; line-height: 38px !important; padding: 0 16px !important; font-size: 12px !important; margin: 0 !important; } }

/* ===== G. RTL submenu arrow direction (desktop) =====
   Nested flyouts open to the LEFT on RTL (section N) — mirror the ">" arrow
   into "<". GP renders the arrow as an svg inside .dropdown-menu-toggle
   (the old a::after rule targeted markup that no longer exists). */
.rtl .main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item-has-children > a .dropdown-menu-toggle,
.rtl #sticky-navigation .main-nav ul ul li.menu-item-has-children > a .dropdown-menu-toggle {
  display: inline-block !important; transform: scaleX(-1) !important;
}

/* ===== G. Mobile accordion submenu indentation ===== */
@media (max-width: 1149px) {
  .slideout-navigation .sub-menu { padding-inline-start: 16px; }
  .rtl .slideout-navigation .sub-menu { padding-right: 16px; padding-left: 0; }
  html:not(.rtl) .slideout-navigation .sub-menu { padding-left: 16px; padding-right: 0; }
}

/* ===== G. Hero top padding so the title never hides under the header ===== */
@media (max-width: 1149px) {
  .home .entry-content > section:first-child,
  .page-id-2 .entry-content > section:first-child { padding-top: 26px !important; }
}

/* ===== D. MOBILE single-row header layout (original header only, via ">") ===== */
@media (max-width: 1149px) {
  #masthead.site-header .inside-header {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    justify-content: space-between !important; box-sizing: border-box !important;
    min-height: 64px !important; max-height: 72px !important;
    padding: 6px 8px !important;
  }
  .rtl #masthead.site-header .inside-header,
  html:not(.rtl) #masthead.site-header .inside-header { flex-direction: row !important; }
  /* single logo on mobile: show the populated page-hero logo (standard .site-logo is hidden globally by the page-hero template), sized 56px, aligned to the far side */
  #masthead.site-header .inside-header > .site-logo.page-hero-logo {
    display: inline-block !important; order: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important;
   flex-shrink: 0 !important; width: auto !important;}
  #masthead.site-header .inside-header > .site-logo.page-hero-logo img {
    max-height: 44px !important; height: 44px !important; width: auto !important;
   object-fit: contain !important; max-width: none !important;}
  .rtl #masthead.site-header .inside-header > .site-logo.page-hero-logo { margin-left: 0 !important; margin-right: 0 !important; }
  html:not(.rtl) #masthead.site-header .inside-header > .site-logo.page-hero-logo { margin-right: 0 !important; margin-left: 0 !important; }
  .rtl #masthead.site-header .inside-header { padding-right: 4px !important; } /* logo flush to the right edge (2026-07-21) */
  html:not(.rtl) #masthead.site-header .inside-header { padding-left: 12px !important; }
  /* controls cluster (original wrapper only, NOT the clone) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper {
    order: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; width: auto !important; margin: 0 !important;
  }
  /* match clone bar to the normal bar: same height, padding and item gaps,
     so nothing changes size or position when the sticky bar takes over */
  #sticky-navigation.navigation-clone .inside-navigation,
  .main-navigation.is_stuck .inside-navigation {
    height: 64px !important; /* GP forces 72px here; the normal bar is 64px */
    min-height: 64px !important; max-height: 64px !important;
    padding: 6px 12px !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important;
    flex-wrap: nowrap !important; /* EN content is wider — wrapping dropped the
                                     hamburger + menu onto a 2nd row below the bar */
    gap: 6px !important; /* same toggle<->cluster gap as the normal bar */
  }
  /* AR: logo side flush to the right edge in the STUCK bar too (matches the
     normal bar's 4px) */
  .rtl #sticky-navigation .inside-navigation,
  .rtl .main-navigation.is_stuck .inside-navigation { padding-right: 4px !important; }
  /* the bar never shows the desktop menu on mobile — the slideout owns it.
     (GP's own hide rule lives in dynamic CSS that UCSS can strip for guests) */
  #masthead nav.main-navigation:not(.slideout-navigation) .main-nav > ul,
  #sticky-navigation .main-nav > ul,
  .main-navigation.is_stuck .main-nav > ul { display: none !important; }
  /* the desktop primary nav (#site-navigation) is an EMPTY spacer on mobile —
     everything inside it is hidden — yet its .inside-navigation kept ~38px of
     width sitting at the logo edge, pushing the logo inward (logo "زايح لليسار"
     on AR, 22 Jul). Zero its footprint while NOT stuck; the sticky bar
     (renamed #sticky-navigation / .is_stuck) is excluded and unaffected. */
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.slideout-navigation):not(.is_stuck):not(#sticky-navigation):not(.navigation-clone) {
    width: 0 !important; min-width: 0 !important; flex: 0 0 0px !important;
    padding: 0 !important; margin: 0 !important; overflow: hidden !important; order: 1 !important;
  }
  #sticky-navigation .menu-bar-items,
  .main-navigation.is_stuck .menu-bar-items {
    display: flex !important; align-items: center !important; gap: 8px !important;
  }
  /* explicit flex order in the stuck bar: [logo]...[lang|book][hamburger].
     GP absolutely-positions the clone's toggle at the LEFT edge, which happens
     to look right in RTL but overlaps the logo on LTR (EN) — force static flow
     so both directions mirror the normal bar. */
  #sticky-navigation .inside-navigation > .navigation-branding,
  .main-navigation.is_stuck .inside-navigation > .navigation-branding { order: 0; margin-inline-end: auto !important; }
  #sticky-navigation .inside-navigation > .main-nav,
  .main-navigation.is_stuck .inside-navigation > .main-nav { order: 1; }
  #sticky-navigation .inside-navigation > .menu-bar-items,
  .main-navigation.is_stuck .inside-navigation > .menu-bar-items { order: 2; }
  #sticky-navigation .inside-navigation > .menu-toggle,
  .main-navigation.is_stuck .inside-navigation > .menu-toggle {
    order: 3; position: static !important; float: none !important; margin: 0 !important;
    right: auto !important; left: auto !important; top: auto !important;
  }
}

/* ===== E. MOBILE hamburger 27px + 44px touch targets + tap gaps ===== */
@media (max-width: 1149px) {
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper { gap: 6px !important; }
  /* space between language switcher and Book button (tightened so the
     hamburger never overflows on 360px screens) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items { display: flex !important; align-items: center !important; gap: 6px !important; }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle {
    min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    position: static !important; float: none !important; margin: 0 !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle .gp-icon,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle svg {
    width: 27px !important; height: 27px !important; font-size: 27px !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items .wpml-ls a {
    display: inline-flex !important; align-items: center !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items li.header-book-btn > a,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items a.tripyana-book-btn,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items a.hook-book-btn {
    height: 34px !important; line-height: 34px !important; padding: 0 10px !important; font-size: 13px !important; margin: 0 !important;
  }
}

/* ===== E3. MOBILE: force the stuck bar VISIBLE (GP slide-reveal is broken) =====
   GP sticky.js hides the stuck nav (inline height:0/visibility:hidden/
   translateY(-100%)) and waits for a transitionend to reveal it — but
   translateY(-100%) of a 0-height box is 0px, so no transition ever runs and
   the bar stays invisible forever on touch devices (desktop gets rescued by
   unrelated hover transitions bubbling up). Overriding the non-!important
   inline styles keeps the bar simply visible whenever it is stuck.
   Scoped to the REAL nav id — the #sticky-placeholder clone must stay hidden. */
@media (max-width: 1149px) {
  #sticky-navigation.is_stuck {
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    padding-top: 0 !important; padding-bottom: 0 !important; /* bar 64px like the normal one */
  }
  /* raise the hamburger a touch — it sat optically lower than the pill/book (2026-07-21) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle,
  #sticky-navigation .inside-navigation > .menu-toggle,
  .main-navigation.is_stuck .inside-navigation > .menu-toggle { transform: translateY(-4px) !important; }
}

/* ===== E2. Sticky-clone hamburger: match before-scroll size (27px icon / 44px touch) ===== */
@media (max-width: 1149px) {
  #sticky-navigation .menu-toggle,
  .main-navigation.is_stuck .menu-toggle {
    min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #sticky-navigation .menu-toggle .gp-icon,
  #sticky-navigation .menu-toggle svg,
  .main-navigation.is_stuck .menu-toggle .gp-icon,
  .main-navigation.is_stuck .menu-toggle svg {
    width: 27px !important; height: 27px !important; font-size: 27px !important;
  }
}

/* ===== G. DESKTOP: keep primary menu on ONE line (layout only, no font sizing) ===== */
@media (min-width: 1150px) {
  #masthead .main-navigation .inside-navigation { flex-wrap: nowrap !important; align-items: center !important; }
  #masthead .main-navigation .inside-navigation .main-nav { flex: 0 1 auto !important; min-width: 0 !important; }
  #masthead .main-navigation .inside-navigation .main-nav > ul { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
  /* 24 Jul (user request «رتب المسافات بين العناصر»): even 12px side padding
     on every item, and rein in the dropdown arrow's extra width — GP's toggle
     padding made arrowed items (Services/Fleet/Guide) look far wider spaced
     than the plain links (Plan/About/Contact). */
  #masthead .main-navigation .main-nav > ul > li > a,
  #sticky-navigation .main-nav > ul > li > a { padding-left: 12px !important; padding-right: 12px !important; }
  #masthead .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-inline-start: 6px;
  }
  /* control cluster stays compact at the outer side; centering handled in L */
  #masthead .main-navigation .inside-navigation .menu-bar-items,
  #sticky-navigation .inside-navigation .menu-bar-items { margin-inline-start: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ===== L. UNIFIED header before/after scroll (2026-07-21, approved mockup) =====
   Target: [logo][ centered menu ][EN|AR pill][Book] identical in the normal
   header AND the sticky clone: contained width, same vertical padding, menu
   centered between logo and the control cluster, consistent 14px gaps. */
@media (min-width: 1150px) {
  /* CRITICAL SCOPING NOTE: GP sticky.js RENAMES the primary nav on first stick
     (#site-navigation -> #sticky-navigation) and never renames it back, adding a
     hidden #sticky-placeholder next to it. So:
       - header-row rules must match the nav by CLASS in the header, not by id;
       - stuck-band rules must be gated on .is_stuck, never on the bare id,
         or they leak into the top-of-page header after the first scroll. */
  /* normal header: nav fills the row so the menu can center inside it */
  #masthead.site-header .inside-header { padding-top: 12px !important; padding-bottom: 12px !important; }
  #masthead.site-header .inside-header > .site-logo { flex: 0 0 auto; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) { flex: 1 1 auto; min-width: 0; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .inside-navigation { width: 100%; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .main-nav { margin-left: auto !important; margin-right: auto !important; }
  /* STUCK band only: full-width dark band, inner contained exactly like the
     header (side padding 0 — grid-container has none on this site). */
  nav.main-navigation.is_stuck { width: 100% !important; left: 0; right: 0; }
  nav.main-navigation.is_stuck .inside-navigation {
    max-width: 1200px; margin-left: auto !important; margin-right: auto !important;
    padding: 12px 0 !important; box-sizing: border-box;
  }
  nav.main-navigation.is_stuck .main-nav { margin-left: auto !important; margin-right: auto !important; }
  /* 24 Jul, user request «القائمة قريبة جدا من الشعار وزر اللغة»: the auto
     centering margins collapse to 0 when the row is crowded (long EN labels),
     letting menu text touch the logo and the language pill. Padding inside the
     centered .main-nav guarantees the gap in both bars, both languages. */
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .main-nav,
  nav.main-navigation.is_stuck .main-nav { padding-inline: 22px; }
  nav.main-navigation .navigation-branding { flex: 0 0 auto; margin: 0 !important; }
  .rtl nav.main-navigation .navigation-branding { margin: 0 !important; }
  nav.main-navigation .navigation-branding .sticky-navigation-logo { margin: 0 !important; }
  /* consistent spacing inside the control cluster (both bars) */
  .main-navigation .menu-bar-items { gap: 14px; }
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en { margin-inline-start: 0 !important; }
}

/* ===== N. Desktop dropdown menus: open LEFT on RTL + fit the full item text ===== */
@media (min-width: 1150px) {
  /* auto width so long Arabic/English items are never clipped */
  .main-navigation ul ul { width: auto !important; min-width: 220px !important; }
  .main-navigation ul ul li a { white-space: nowrap !important; }
  /* RTL: first-level dropdown hangs from the item's RIGHT edge and grows left;
     nested flyouts open to the LEFT (mirror of the LTR default) */
  .rtl .main-navigation ul ul { left: auto !important; right: 0 !important; }
  .rtl .main-navigation ul ul ul { left: auto !important; right: 100% !important; }
}

/* ===== M. Slideout panel: brand row + breathing room from the top edge =====
   The brand row is a real <a class="slideout-brand"> home link printed by
   snippet 26308 (generate_inside_slideout_navigation) — not a ::before. */
.slideout-navigation .inside-navigation { padding-top: 14px !important; display: block; }
.slideout-navigation a.slideout-brand {
  display: block; color: #d4af37 !important; font-weight: 700;
  font-size: 18px; letter-spacing: .4px; padding: 12px 30px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 6px;
  text-decoration: none; text-transform: none;
}
.slideout-navigation a.slideout-brand img {
  height: 40px; width: auto; display: block; max-width: none;
  margin-inline: auto; /* 24 Jul, user request: logo centered in the panel */
}
.slideout-navigation .main-nav { margin-top: 4px; }

/* ===== M2. Slideout menu items: bigger type + clear hover/tap feedback =====
   (no media query: the slideout itself only opens on mobile, and unconditional
   rules also style it correctly if the breakpoint ever changes) */
  /* nav. prefix beats the customizer's `.main-navigation .main-nav ul li a
     {font-size:16px !important}` which otherwise wins by stylesheet order */
  nav.slideout-navigation .main-nav > ul > li > a {
    font-size: 17px !important; line-height: 1.45 !important;
    padding: 14px 30px !important; color: #ffffff !important;
    transition: background-color .15s ease, color .15s ease;
  }
  nav.slideout-navigation .main-nav .sub-menu li a {
    font-size: 15px !important; line-height: 1.45 !important;
    padding: 11px 30px !important; color: #dfe3e6 !important;
  }
  /* soft separators between top-level items */
  .slideout-navigation .main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.07); }
  /* clear finger/pointer feedback: gold tint bg + gold text (site hover colors) */
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:hover,
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:focus,
  .slideout-navigation .main-nav li.sfHover:not(.header-book-btn) > a,
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:active {
    background-color: rgba(212,175,55,.13) !important; color: #d4af37 !important;
  }
  /* current page marked in gold */
  .slideout-navigation .main-nav li[class*="current-menu-"]:not(.header-book-btn) > a { color: #d4af37 !important; }
  /* Book Now REMOVED from the slideout menu (2026-07-21 request) — the always
     visible bar button covers booking; the menu item itself stays in the menus
     so nothing else breaks. */
  .slideout-navigation .main-nav li.header-book-btn { display: none !important; }
  /* accordion arrows: keep visible on the tinted rows */
  .slideout-navigation .dropdown-menu-toggle { color: inherit; }


/* ===== J. Hook-injected Book button in the header menu bar (Element: generate_menu_bar_items) =====
   The hook prints BOTH language anchors into every .menu-bar-items (mobile bar, site-nav, sticky clone).
   Language class .rtl lives on <body>, so we key off body.rtl / body:not(.rtl).
   2026-07-21: shown at ALL widths now. DOM order in menu-bar-items is
   [language pill] -> [book anchor], so Book Now sits at the OUTER edge of the
   header in both directions (far left on RTL, far right on LTR). The old Book
   Now MENU ITEM stays visible only inside the slideout panel; on the desktop
   nav it is hidden below to avoid a duplicate. */
.menu-bar-items a.hook-book-btn { display: none !important; }            /* hide the non-matching language anchor */
body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en {
  display: inline-flex !important; align-items: center !important;
  flex-shrink: 0 !important; white-space: nowrap !important;
}
@media (max-width: 1149px) {
  /* compact size (2026-07-21: smaller Book button so the hamburger always fits
     on 360px screens next to the bordered language pill), same in both bars */
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en {
    height: 34px !important; line-height: 34px !important;
    padding: 0 10px !important; font-size: 13px !important; margin: 0 !important;
  }
}
@media (min-width: 1150px) {
  /* the primary menus still end with the Book Now menu item (kept for the
     slideout); hide it on the desktop nav + sticky clone, the hook anchor
     in menu-bar-items replaces it at the outer edge */
  #masthead .main-navigation .main-nav li.header-book-btn,
  #sticky-navigation .main-nav li.header-book-btn { display: none !important; }
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en { margin-inline-start: 12px !important; }
}


/* ============================================================
   2026-07 header right-edge fix
   Real-device measure (390px iPhone): button.menu-toggle right
   edge sits +11px past viewport on EN (LTR), dragging
   nav#mobile-menu-control-wrapper -> 11px horizontal gap.
   AR (RTL) already clean at 0px. Root: GeneratePress
   ".main-navigation.has-branding .menu-toggle{padding-right:20px}"
   pushes the last item's box past the right content edge on LTR,
   and the LTR side lacks the explicit right padding the RTL side
   has (RTL has padding-right:12px). Fix = mirror RTL on LTR +
   neutralise the GP toggle padding-right + header-only clip for
   any residual sub-pixel. Scoped <=1149px. NOT shrink/gap.
   Reversible: delete this block.
   ============================================================ */
@media (max-width: 1149px) {
  /* mirror the clean RTL side: give LTR the same 12px right padding */
  html:not(.rtl) #masthead.site-header .inside-header {
    padding-right: 12px !important;   /* was: (none on LTR -> fell back to GP 0 30px, not containing toggle) */
  }
  /* neutralise GeneratePress .has-branding .menu-toggle padding-right:20px
     which pushes the toggle box past the right edge on LTR */
  #masthead.site-header .main-navigation.has-branding .menu-toggle,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle {
    padding-right: 8px !important;    /* was: padding-right: 20px (GP has-branding) */
    padding-left: 8px !important;     /* keep symmetric with existing padding:8px */
  }
  /* guaranteed catch for any residual: clip on the HEADER only
     (never html/body). Only trims empty edge space beside the toggle. */
  #masthead.site-header .inside-header {
    max-width: 100% !important;       /* new */
    overflow-x: clip;                 /* new: header-scoped safety net */
  }
}
/* ===== O. GOLD HAIRLINE under the header (2026-07-23 emerald redesign) =====
   Mirrors the gold line on top of the footer so the page is framed by the
   same emerald+gold identity. Applied to the normal header AND the sticky
   clone band (GP renames the nav on first stick — cover both selectors). */
.site-header { border-bottom: 1px solid rgba(212,175,55,.35); }
#sticky-navigation, nav.main-navigation.is_stuck { border-bottom: 1px solid rgba(212,175,55,.35) !important; }

/* ===== P. LOGO POP ON DARK EMERALD (2026-07-23, user-approved option 1) =====
   The teal/green logo sits close in hue to the #0c211a header bg, so it loses
   prominence. Brand identity keeps the logo COLORS (no whitening) — just a
   dark-background variant: slightly brighter + more saturated. Scoped to the
   header, its sticky clone, and the slideout brand link (all #0c211a panels).
   Footer logo (whitened separately) is NOT touched. Reversible: delete P. */
#masthead .site-logo img,
#masthead .navigation-branding img,
#sticky-navigation .navigation-branding img,
.navigation-branding .sticky-navigation-logo img,
a.slideout-brand img {
  filter: brightness(1.15) saturate(1.1);
}
/* ===== Q. LUXURY DROPDOWN MENUS (2026-07-23, user-approved "Option 1" preview) =====
   Scope: desktop dropdowns (normal nav + sticky clone, NOT slideout) get a gold
   frame; the Services dropdown flattens its region level (London/Turkey/Bosnia
   become gold group headers with children listed inline, deeper levels stay
   hover flyouts); gold inline-SVG icons on submenu items everywhere incl. the
   mobile slideout, which also gets top-level icons + a gold indent rail.
   Menu item ids: AR menu 805 / EN menu 19 — both hardcoded below.
   GP hides submenus via left:-99999px + opacity:0 + height:0 (sfHover/:hover
   reveals) — the flatten block below must neutralise ALL of those.
   Reversible: delete this whole style block. (NEVER write a literal
   style TAG inside a CSS comment here — LiteSpeed's HTML optimizer treats
   it as a real opener and the guest page loses its closing tag, swallowing
   every script tag after this block as inert CSS text. Broke suitcase
   dropdown + placeholders for guests on 24 Jul.) */

@media (min-width: 1150px) {
  /* Q1: gold frame on all top-level dropdown panels */
  nav.main-navigation:not(.slideout-navigation) .main-nav > ul > li > ul.sub-menu {
    border: 1px solid rgba(212,175,55,.28); border-top: 0;
    border-radius: 0 0 12px 12px; padding: 6px 4px 10px;
  }
  /* Q2a: Services = 3-column MEGA panel (24 Jul, user request: regions London/
     Turkey/Bosnia side by side, each with its pages beneath). The panel is
     centered under its own li; GP's hide/show still works via opacity/height/
     pointer-events, so pinning left/transform permanently is safe. right:auto
     matters in RTL: with left+right both set, RTL resolves the overconstraint
     in favour of `right` and the centering breaks. */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 { position: relative; }
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 > ul.sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 > ul.sub-menu {
    /* !important: a legacy `.main-navigation ul ul{width:auto!important}` rule
       (≥1150px) silently beat this width — panel measured 905px, not 740 */
    width: min(740px, 94vw) !important;
    display: flex !important; flex-wrap: nowrap; align-items: flex-start;
    /* 24 Jul v2 (user screenshot): flush with the li's HIGHLIGHT box edge
       (right:0), not the word start — the hover box is what the eye reads as
       "حدود خدماتنا", and a 9px offset made panel+highlight look jagged.
       RTL note: with left+right both set, RTL resolves the overconstraint in
       favour of `right`, hence the .rtl override below. */
    left: 0 !important; right: auto !important; transform: none;
    padding: 12px 8px 16px;
  }
  .rtl nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 > ul.sub-menu,
  .rtl nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 > ul.sub-menu {
    left: auto !important; right: 0 !important;
  }
  /* each region li is one column */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 > .sub-menu > li,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 > .sub-menu > li {
    flex: 1 1 0; min-width: 0; float: none !important; padding: 0 10px;
  }
  /* long labels must WRAP inside their column, not overflow into the next
     (the Bosnia leaf ran over the Turkey column) — both mega panels */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 .sub-menu a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 .sub-menu a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21511 > .sub-menu a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21451 > .sub-menu a {
    white-space: normal !important; line-height: 1.5;
  }

  /* Q2: flatten the region level inside Services (AR 21487 / EN 21448) */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 > .sub-menu > li > .sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 > .sub-menu > li > .sub-menu {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    height: auto !important; overflow: visible !important; pointer-events: auto !important;
    width: 100% !important; min-width: 0 !important; float: none !important;
    transition: none !important; box-shadow: none !important; border: 0 !important;
    border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important;
  }
  /* region links become gold group headers */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21487 > .sub-menu > li > a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21448 > .sub-menu > li > a {
    color: #d4af37 !important; font-size: 12.5px !important; letter-spacing: .6px;
    background: transparent !important; padding-top: 12px; padding-bottom: 4px;
  }
  /* their children are always visible now — drop the misleading arrows.
     Specificity must BEAT section G's RTL arrow-flip rule
     (.rtl .main-navigation:not(...) .main-nav ul ul li.menu-item-has-children > a
     .dropdown-menu-toggle = 0,5,4 !important, plus a #sticky-navigation variant
     at 1,5,4) — hence the padded selectors below (0,6,5 and 1,6,4-after-G). */
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21488 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21498 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21504 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21452 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21453 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21454 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21488 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21498 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21504 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21452 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21453 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21454 > a .dropdown-menu-toggle { display: none !important; }
  /* vertical hairline between the columns (was a horizontal one when the
     regions stacked); no top-of-column offsets so headers align */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21498,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21504,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21453,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21454 {
    border-top: 0; margin-top: 0; padding-top: 0;
    border-inline-start: 1px solid rgba(212,175,55,.16);
  }
  /* Q2b (24 Jul): deeper groups (airport transfers / VIP) no longer fly out —
     inside a column they flatten too: bold label + indented pages beneath
     (position:static also defuses section G's `.rtl ... ul ul ul{right:100%}`) */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21489 > .sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21494 > .sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21460 > .sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21461 > .sub-menu {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    height: auto !important; overflow: visible !important; pointer-events: auto !important;
    width: 100% !important; min-width: 0 !important; float: none !important;
    transition: none !important; box-shadow: none !important; border: 0 !important;
    border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
    padding-inline-start: 12px !important;
    background: transparent !important;
  }
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21489 > a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21494 > a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21460 > a,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21461 > a { font-weight: 600; }
  /* their arrows lie too now — hide them (same specificity war as the regions:
     padded selectors + #sticky-navigation variants beat section G's flip rule) */
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21489 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21494 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21460 > a .dropdown-menu-toggle,
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21461 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21489 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21494 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21460 > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav ul ul li.menu-item.menu-item-has-children.menu-item-21461 > a .dropdown-menu-toggle { display: none !important; }

  /* ===== Q5 (24 Jul, approved suggestion): Travel Guide = 2-column panel =====
     AR (21511) gets gold group headers via the ul's ::before/::after — on a
     grid container pseudo-elements become grid items, so they occupy row 1 of
     each column. EN (21451) children don't split semantically -> plain 3+3.
     grid-row/column are hardcoded per menu-item id (matches DOM order). */
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21511,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21451 { position: relative; }
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21511 > ul.sub-menu,
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21451 > ul.sub-menu {
    width: min(300px, 94vw) !important;
    display: grid !important; grid-template-columns: 1fr;
    align-items: start; align-content: start;
    left: 0 !important; right: auto !important;
    padding: 10px 8px 14px;
  }
  .rtl nav.main-navigation:not(.slideout-navigation) li.menu-item-21511 > ul.sub-menu,
  .rtl nav.main-navigation:not(.slideout-navigation) li.menu-item-21451 > ul.sub-menu {
    left: auto !important; right: 0 !important;
  }
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21511 > ul.sub-menu::before {
    display: block; color: #d4af37; font-size: 12.5px; font-weight: 600;
    letter-spacing: .6px; padding: 12px 20px 4px;
  }
  nav.main-navigation:not(.slideout-navigation) li.menu-item-21511 > ul.sub-menu::before { content: "أدلة الدول"; }

  /* ===== Q6 (24 Jul, approved suggestion): gold hover tint on dropdown links ===== */
  nav.main-navigation:not(.slideout-navigation) .main-nav ul ul li > a:hover,
  #sticky-navigation .main-nav ul ul li > a:hover {
    background: rgba(212,175,55,.13) !important; border-radius: 8px;
  }
}

/* Q3: gold SVG icons. Shared box first, then one background-image per icon.
   Submenu-item icons apply everywhere (desktop dropdowns + slideout); top-level
   icons are slideout-only (the desktop menu bar stays clean). */
.main-navigation li.menu-item-21488 > a::before, .main-navigation li.menu-item-21452 > a::before,
.main-navigation li.menu-item-21498 > a::before, .main-navigation li.menu-item-21453 > a::before,
.main-navigation li.menu-item-21504 > a::before, .main-navigation li.menu-item-21454 > a::before,
.main-navigation li.menu-item-21489 > a::before,
.main-navigation li.menu-item-21460 > a::before,
.main-navigation li.menu-item-21494 > a::before,
.main-navigation li.menu-item-21461 > a::before,
.main-navigation li.menu-item-21496 > a::before, .main-navigation li.menu-item-21499 > a::before,
.main-navigation li.menu-item-21503 > a::before, .main-navigation li.menu-item-21505 > a::before,
.main-navigation li.menu-item-21462 > a::before, .main-navigation li.menu-item-21464 > a::before,
.main-navigation li.menu-item-21468 > a::before, .main-navigation li.menu-item-21469 > a::before,
.main-navigation li.menu-item-21497 > a::before, .main-navigation li.menu-item-21463 > a::before,
.slideout-navigation li.menu-item-21487 > a::before, .slideout-navigation li.menu-item-21448 > a::before,
.slideout-navigation li.menu-item-21506 > a::before, .slideout-navigation li.menu-item-21449 > a::before,
.slideout-navigation li.menu-item-21511 > a::before, .slideout-navigation li.menu-item-21451 > a::before,
.slideout-navigation li.menu-item-26579 > a::before, .slideout-navigation li.menu-item-26574 > a::before,
.slideout-navigation li.menu-item-26957 > a::before, .slideout-navigation li.menu-item-26959 > a::before,
.slideout-navigation li.menu-item-21510 > a::before, .slideout-navigation li.menu-item-21450 > a::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-inline-end: 9px; vertical-align: -3px;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.main-navigation li.menu-item-21488 > a::before, .main-navigation li.menu-item-21452 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21h12M9 21V6l3-3 3 3v15'/%3E%3Ccircle cx='12' cy='10' r='1.8'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); }
.main-navigation li.menu-item-21498 > a::before, .main-navigation li.menu-item-21453 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20M4 21V9M20 21V9M7 21v-5c0-3 2.2-5 5-5s5 2 5 5v5'/%3E%3Cpath d='M12 8V6'/%3E%3C/svg%3E"); }
.main-navigation li.menu-item-21504 > a::before, .main-navigation li.menu-item-21454 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19v-3c0-4 3.6-7 8-7s8 3 8 7v3'/%3E%3Cpath d='M2 13h20M8 19v-2M16 19v-2'/%3E%3C/svg%3E"); }
/* (24 Jul, user request: plane icons kept ONLY on the two group headers —
   Turkey airport-transfer leaves 21500/21501/21502 + EN 21465/21466/21467
   stripped, as were VIP leaves 21495/21474 and students 26183 below) */
.main-navigation li.menu-item-21489 > a::before,
.main-navigation li.menu-item-21460 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M21.5 15.6v-1.9l-8.5-4.6V4.6c0-.9-.4-1.9-1-1.9s-1 1-1 1.9v4.5l-8.5 4.6v1.9l8.5-2.4v4.9l-2.1 1.5v1.4l3.1-.9 3.1.9v-1.4l-2.1-1.5v-4.9l8.5 2.4z'/%3E%3C/svg%3E"); }
.main-navigation li.menu-item-21494 > a::before,
.main-navigation li.menu-item-21461 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5h16L21.2 9l-5 3L12 6.5 7.8 12l-5-3L4 17.5z'/%3E%3Cpath d='M5.5 20.5h13'/%3E%3C/svg%3E"); }
.main-navigation li.menu-item-21496 > a::before, .main-navigation li.menu-item-21499 > a::before,
.main-navigation li.menu-item-21503 > a::before, .main-navigation li.menu-item-21505 > a::before,
.main-navigation li.menu-item-21462 > a::before, .main-navigation li.menu-item-21464 > a::before,
.main-navigation li.menu-item-21468 > a::before, .main-navigation li.menu-item-21469 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath d='M4.3 11h5.4M14.3 11h5.4M12 14.4V20'/%3E%3C/svg%3E"); }
.main-navigation li.menu-item-21497 > a::before, .main-navigation li.menu-item-21463 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 5h11l-2.5 3.5L17 12H6'/%3E%3C/svg%3E"); }
.slideout-navigation li.menu-item-21506 > a::before, .slideout-navigation li.menu-item-21449 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5V13l2.5-5h11L20 12.5v4'/%3E%3Cpath d='M3 13h17.5'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='16.5' cy='17' r='2'/%3E%3C/svg%3E"); }
/* (24 Jul, user request: fleet-car + travel-guide leaf icons removed —
   selectors 21507/21508/21509/21569, 21455/21456/21457/25942, 25345/21512/
   21513/21458, 21525-21529, 21515-21519 dropped from the shared box rule and
   their car/map/pin background rules deleted. Top-level slideout icons and the
   Services-branch icons are untouched.) */
.slideout-navigation li.menu-item-21487 > a::before, .slideout-navigation li.menu-item-21448 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 13h18'/%3E%3C/svg%3E"); }
.slideout-navigation li.menu-item-21511 > a::before, .slideout-navigation li.menu-item-21451 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5 5-2z'/%3E%3C/svg%3E"); }
.slideout-navigation li.menu-item-26579 > a::before, .slideout-navigation li.menu-item-26574 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.2L16.5 4.5a2.1 2.1 0 0 1 3 3L8.2 18.8 4 20z'/%3E%3Cpath d='M14.5 6.5l3 3'/%3E%3C/svg%3E"); }
/* Day trips — castle. Slideout only: the desktop bar deliberately carries no icon on top-level items, and the 🏰 emoji was dropped from the item titles
   on 30 Jul so it could not leak into the desktop menu or the page title. */
.slideout-navigation li.menu-item-26957 > a::before, .slideout-navigation li.menu-item-26959 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 21V9h2V7h2v2h2V6h4v3h2V7h2v2h2v12'/%3E%3Cpath d='M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3C/svg%3E"); }
.slideout-navigation li.menu-item-21510 > a::before, .slideout-navigation li.menu-item-21450 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }

/* Q4: slideout accordion polish — gold rail marks the open branch */
.slideout-navigation ul.sub-menu {
  border-inline-start: 2px solid rgba(212,175,55,.4);
  margin-inline-start: 14px;
}

/* ===== Q7 (24 Jul; bar removed 30 Jul 2026 on owner request) =====
   The slideout used to end in a sticky WhatsApp + Book Now bar. It is gone:
   the gold header button is on screen at all times and covers the same job.
   Only the menu-item hide survives — li.header-book-btn is still in both
   menus and must not reappear as a pill inside the panel. */
.slideout-navigation li.header-book-btn { display: none !important; }

/* ===== S. Top-level chevrons on one line (30 Jul 2026) =====
   See the note in the deploy script: GP's float:left on the toggle dropped
   the arrow onto a second row in RTL. Flex row, direction-neutral. */
#masthead .main-navigation:not(.slideout-navigation) .main-nav > ul > li > a,
#sticky-navigation .main-nav > ul > li > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#masthead .main-navigation:not(.slideout-navigation) .main-nav > ul > li > a .dropdown-menu-toggle,
#sticky-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  line-height: 0;
}

/* ===== T. Fit the bar between the logo and the control cluster =====
   Budget at the 1200px header: 1200 - 155 logo - 264 (switcher + Book now)
   = 781px for six items that measure 788px at the old 12px padding. Two
   tiers keep it inside that with headroom instead of overflowing into the
   switcher; below 1150px the slideout takes over and none of this runs. */
@media (min-width: 1150px) {
  #masthead .main-navigation .inside-navigation .main-nav > ul > li > a,
  #sticky-navigation .inside-navigation .main-nav > ul > li > a {
    padding-left: 9px !important; padding-right: 9px !important;
  }
}
@media (min-width: 1150px) and (max-width: 1249px) {
  #masthead .main-navigation .inside-navigation .main-nav > ul > li > a,
  #sticky-navigation .inside-navigation .main-nav > ul > li > a {
    padding-left: 7px !important; padding-right: 7px !important;
    font-size: 14.5px !important;
  }
  #masthead .main-navigation .inside-navigation .main-nav > ul > li > a .dropdown-menu-toggle,
  #sticky-navigation .inside-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
    margin-inline-start: 3px !important;
  }
}
/* Mobile menu fix: ensure inline dropdown menu opens on mobile */
@media (max-width: 800px) {
  #site-navigation.toggled .main-nav > ul,
  .main-navigation.toggled .main-nav > ul {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Logo alignment: right for Arabic (RTL), left for English (LTR) */
body.rtl .inside-header {
  flex-direction: row-reverse;
}
body.rtl .inside-header .main-navigation:not(.mobile-menu-control-wrapper) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Slightly larger main navigation menu font */
.main-navigation .main-nav ul li a,
#menu-home-arabic li a {
  font-size: 16px !important;
}

/* Feature-card Lucide icons: restore outline style + slightly larger size */
.gb-shape svg.lucide {
  width: 1.7em !important;
  height: 1.7em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ===== Contact page professional layout (Arabic 21138 + English 21441) ===== */
.page-id-21138 .entry-content,
.page-id-21441 .entry-content {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Intro heading + paragraph spacing */
.page-id-21138 .entry-content > h2:first-child,
.page-id-21441 .entry-content > h2:first-child {
  text-align: center;
  margin-bottom: 14px;
}
.page-id-21138 .entry-content > h2:first-child + p,
.page-id-21441 .entry-content > h2:first-child + p {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 10px;
  color: #4b5563;
  line-height: 1.9;
}

/* Two-column form + info: align to top, add breathing room */
.gb-element-4048722b {
  align-items: stretch !important;
}
.gb-element-4048722b > * {
  align-self: start;
}

/* The form column card: pad nicely and don't stretch empty space */
.gb-element-329348a9 {
  align-self: start !important;
  height: auto !important;
}

/* Prevent address / info text from wrapping into ugly narrow column */
.gb-element-dc3dab4b,
.gb-element-9f63ea1f,
.gb-element-7afcf0c7 {
  margin-bottom: 14px !important;
}

/* ===== FAQ heading (Rank Math) ===== */
/* Add a section title above the FAQ (per language) */
.rank-math-block::before {
  display: block;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #0f2a37;
  margin-bottom: 26px;
}
.page-id-21138 .rank-math-block::before { content: "الأسئلة الشائعة"; }
.page-id-21441 .rank-math-block::before { content: "Frequently Asked Questions"; }

/* Address block fix: text was display:flex causing per-word wrapping */
.gb-element-44c4334c { align-items: flex-start !important; }
.gb-element-44c4334c .gb-text.gb-text-4b2d3f81 {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0;
  font-size: 16px !important;
  line-height: 1.9;
  white-space: normal !important;
}
.gb-element-44c4334c .gb-text.gb-text-4b2d3f81 strong { font-size: 18px; display: inline-block; margin-bottom: 6px; }
.gb-element-44c4334c .gb-shape { flex: 0 0 auto !important; }
/* Contact info rows: consistent vertical alignment */
.gb-element-dc3dab4b, .gb-element-9f63ea1f, .gb-element-7afcf0c7 {
  align-items: center !important;
}

/* ===== Intro hero refinement (contact page) ===== */
.page-id-21138 .entry-content > h2:first-child,
.page-id-21441 .entry-content > h2:first-child {
  position: relative;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #0f2a37;
  text-align: center;
  margin: 8px auto 22px;
  padding-bottom: 20px;
  letter-spacing: -0.3px;
}
.page-id-21138 .entry-content > h2:first-child::before,
.page-id-21441 .entry-content > h2:first-child::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: #16a085;
  margin: 0 auto 16px;
}
.page-id-21138 .entry-content > h2:first-child::after,
.page-id-21441 .entry-content > h2:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d1d5db, transparent);
}
.page-id-21138 .entry-content > h2:first-child + p,
.page-id-21441 .entry-content > h2:first-child + p {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  color: #52606d;
  font-size: 18px;
  line-height: 2;
}
@media (max-width: 880px) {
  .page-id-21138 .entry-content > h2:first-child + p,
  .page-id-21441 .entry-content > h2:first-child + p { font-size: 16px; line-height: 1.9; margin-bottom: 28px; }
}
 
/* ===== Arabic contact header overlap fix (retired 21 Jul 2026) =====
   The root cause was the site-wide GP "Header merge" element (1774) floating
   the header over content; merge is now disabled so the old 150px compensation
   would just create a huge gap. Keep a small comfortable offset instead. */
.page-id-21138 .site-main {
  padding-top: 30px;
}
 

/* ===== Fix: bare internal-links paragraph outside GenerateBlocks container (all pages) ===== */
@media (max-width: 767px) {
  
}

/* Orphan content fix — align stray blocks to the 1200px reading column like the EN pages */
.inside-article > p,
.inside-article > .wp-block-paragraph {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 40px;
  box-sizing: border-box;
}
@media (max-width: 880px) {
  .inside-article > p,
  .inside-article > .wp-block-paragraph {
    padding: 0 20px;
  }
}

/* Fix: GenerateBlocks stats grid + CTA spacing on fleet pages (missing generated CSS) */
.gb-element-28553a40{column-gap:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0px;padding-left:0px;row-gap:2rem}
.gb-element-284c4993{margin-bottom:3rem}

/* Fix: GenerateBlocks 2-column layouts (Numbers + CTA) & list styling on fleet pages */
.gb-element-1b9104c5{column-gap:5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:auto;margin-right:auto}
.gb-element-c5036809{align-items:center;column-gap:5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:auto;margin-right:auto}
@media (max-width:1024px){.gb-element-1b9104c5{grid-template-columns:1fr}.gb-element-c5036809{display:block}}
.gb-element-dbf9a553,.gb-element-e812687d,.gb-element-baf3d3ca,.gb-element-3a3b1a71{list-style-type:none}
.gb-element-0e5134f0{column-gap:1rem;display:flex;margin-top:2rem}
/* language-scoped (2026-07-22): these GB uniqueIds are SHARED by the AR and EN
   fleet pages — right stays for Arabic, English reads left */
body.rtl .gb-element-b9568293, body.rtl .gb-element-05b53aaf{text-align:right}
body:not(.rtl) .gb-element-b9568293, body:not(.rtl) .gb-element-05b53aaf{text-align:left}

/* Fix: GenerateBlocks layouts for Range Rover, V-Class, E-Class & Fleet listing pages */
.gb-element-16179d63{column-gap:5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:auto;margin-right:auto}@media (max-width:1024px){.gb-element-16179d63{grid-template-columns:1fr;margin-left:auto;margin-right:auto}}
.gb-element-d8c684bb{column-gap:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0px;padding-left:0px;row-gap:2rem}
.gb-element-8a8350d2,.gb-element-619db6d3,.gb-element-cd777e1a,.gb-element-44b2e535{list-style-type:none}
.gb-element-ff7d3313{margin-bottom:3rem}
.gb-element-8443debc{margin-bottom:3rem}
.gb-element-de19e44c{column-gap:1rem;display:flex;margin-top:2rem}
.gb-element-4a99d122{column-gap:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0px;padding-left:0px;row-gap:2rem}
body.rtl .gb-element-4a99d122{text-align:right}
body:not(.rtl) .gb-element-4a99d122{text-align:left}
.gb-element-d9238fd1,.gb-element-78374b78,.gb-element-b1784138,.gb-element-508a5cb7{list-style-type:none}
.gb-element-ce5ecdde{margin-bottom:3rem}
.gb-element-adf2e76c{align-items:center;column-gap:2rem;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;margin-left:auto;margin-right:auto;max-width:var(--gb-container-width);row-gap:3rem}@media (max-width:1024px){.gb-element-adf2e76c{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.gb-element-adf2e76c{grid-template-columns:1fr}}
/* EN LTR fix - added 2026-07-15 */
html:not([dir="rtl"]) .has-text-align-right { text-align: left; }

/* Hero spacing fix v2 — 21 Jul 2026: AR homepage hero uses different GB ids
   (section a2fd9f9c / inner b6649bb9) than EN (86361667 / d2862f5d); apply
   the same measurements to both so the booking widget sits identically. */
.gb-element-d2862f5d,
.gb-element-b6649bb9 {
  top: 0 !important;
  bottom: 0 !important;
}
section.gb-element-86361667,
section.gb-element-a2fd9f9c {
  padding-top: 24px;
  padding-bottom: 40px;
}
section.gb-element-86361667 .gb-element-d2862f5d > .wp-block-group,
section.gb-element-a2fd9f9c .gb-element-b6649bb9 > .wp-block-group {
  margin-top: 0 !important;
}
section.gb-element-86361667 .wp-block-group__inner-container,
section.gb-element-a2fd9f9c .wp-block-group__inner-container {
  padding-top: 8px;
  padding-bottom: 16px;
}
section.gb-element-86361667 .chbs-main .chbs-main-content,
section.gb-element-a2fd9f9c .chbs-main .chbs-main-content {
  margin-top: 0 !important;
}
@media (max-width: 768px) {
  section.gb-element-86361667,
  section.gb-element-a2fd9f9c {
    padding-top: 32px;
    padding-bottom: 24px;
    padding-left: 2px;
    padding-right: 2px;
  }
  section.gb-element-86361667 .wp-block-group__inner-container,
  section.gb-element-a2fd9f9c .wp-block-group__inner-container {
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* =========================================================================
   Tripyana — Arabic booking page (/ar/online-bookings/) RTL fixes
   Scoped to Arabic (body.rtl) and/or the AR booking page (.page-id-21145).
   Does NOT affect the English version.
   ========================================================================= */

/* Task 2a — Price summary total: separate label and amount in RTL */
body.rtl .chbs-summary-price-element-total {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.rtl .chbs-summary-price-element-total > span:last-child {
  position: static !important;
  right: auto !important;
  left: auto !important;
  margin-inline-start: auto;
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Task 2b — Quantity counter (booking extras): clear label + buttons in RTL */
body.rtl .chbs-form-field > label {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 8px 0;
  text-align: right;
}
body.rtl .chbs-quantity-section {
  width: 130px;
  height: 40px;
}
body.rtl .chbs-quantity-section input {
  text-align: center;
  padding: 0 40px !important;
  height: 40px;
  box-sizing: border-box;
}
/* Place +/- buttons side by side on the left of the input, vertically centered */
body.rtl .chbs-quantity-section .chbs-quantity-section-button {
  top: 0 !important;
  bottom: auto !important;
  height: 40px !important;
  line-height: 40px !important;
}
body.rtl .chbs-quantity-section .chbs-meta-icon-plus {
  right: auto !important;
  left: 0 !important;
}
body.rtl .chbs-quantity-section .chbs-meta-icon-minus {
  right: 0 !important;
  left: auto !important;
}

/* Task 3a — Payment method label inside the box next to the wallet icon (RTL) */
body.rtl ul.chbs-payment .chbs-payment-name {
  display: inline !important;
  position: relative !important;
  top: -15px !important;
  left: 10px !important;
  right: auto !important;
  margin-top: 0 !important;
  margin-inline-start: 14px !important;
  line-height: 130px !important;
  font-size: 18px !important;
  text-align: center;
}
/* Task 3b — Payment boxes width aligned with the other boxes */
body.rtl ul.chbs-payment {
  position: relative;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Task 4 — Space between "تعديل" (edit) button and section headings */
body.rtl .chbs-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.rtl .chbs-summary-header > a {
  float: none !important;
  margin: 0 0 0 4px;
}

/* Task 5 — Booking page intro paragraph: smaller font size */
.page-id-21145 .entry-content > p.wp-block-paragraph {
  font-size: 17px;
  line-height: 1.6;
}

/* Task 6 — Discount bar at top not clipped under the sticky header */
.page-id-21145 .entry-content > div:first-child {
  margin-top: 40px;
}
@media (max-width: 768px) {
  .page-id-21145 .entry-content > div:first-child {
    margin-top: 30px;
  }
}


/* ==================================================================
   CLAUDE FIXES 2026-07-16  (appended; remove this block to revert)
   ================================================================== */

/* Fix #1: Fleet card buttons vertical spacing on mobile */
@media (max-width: 768px) {
  .gbp-button--primary + .gbp-button--primary {
    margin-top: 12px !important;
  }
}

/* Fix #4: Center footer content horizontally (both LTR & RTL) */
footer.gb-element-42095101 > .wp-block-group {
  margin-left: auto !important;
  margin-right: auto !important;
}
footer.gb-element-42095101 .gb-element-df22f01d {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix #5: Slightly larger, more comfortable body text site-wide
   (overrides existing body:not(.rtl)/html[lang] 16px rules) */
body:not(.rtl),
html[lang="en"] body,
body.rtl,
html body {
  font-size: 17.5px;
  line-height: 1.7;
}
.entry-content p:not(.rank-math-breadcrumb p),
.entry-content li,
p.wp-block-paragraph {
  font-size: 17.5px;
  line-height: 1.7;
}
/* keep breadcrumbs at their original size */
.rank-math-breadcrumb, .rank-math-breadcrumb p, .rank-math-breadcrumb a,
.rank-math-breadcrumb span { font-size: 13px; }
@media (max-width: 768px) {
  body:not(.rtl), html[lang="en"] body, body.rtl, html body {
    font-size: 17px;
    line-height: 1.7;
  }
  .entry-content p:not(.rank-math-breadcrumb p), .entry-content li, p.wp-block-paragraph {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* Fix #6 (retired 21 Jul 2026): step-button arrow flip is now handled by the
   plugin's own public.rtl.css (enqueued via "CHBS RTL Stylesheet Enqueue"
   snippet) which flips next and keeps prev — our unconditional double flip
   here would point the prev arrow the wrong way. */

/* Fix #8: Trust signals - 3 styled cards with icons (matches brand) */
.tripyana-trust-section {
  margin: 30px 0;
}
.tripyana-trust-grid-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.tripyana-trust-signal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 20px;
  background: #ffffff;
  border: 1px solid rgba(16,56,45,0.12);
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(16,56,45,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tripyana-trust-signal:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(16,56,45,0.12);
}
.tripyana-trust-signal::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #10382D;
  color: #E3C47F;
  font-size: 26px;
  line-height: 1;
}
.tripyana-trust-signal:nth-child(1)::before { content: "\2713"; }   /* check - officially registered */
.tripyana-trust-signal:nth-child(2)::before { content: "\21BA"; }   /* refresh/cancel - free cancellation */
.tripyana-trust-signal:nth-child(3)::before { content: "\260E"; }   /* phone - 24/7 support */
.tripyana-trust-signal strong {
  font-size: 18px;
  font-weight: 700;
  color: #10382D;
}
.tripyana-trust-signal span {
  font-size: 15.5px;
  line-height: 1.55;
  color: #61626f;
}
@media (max-width: 768px) {
  .tripyana-trust-grid-simple {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* Task 4a — RTL: add spacing between vehicle label and its price in summary */
body.rtl .chbs-summary-price-element-vehicle-fee {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Fix: remove default bottom margin on footer copyright paragraph to eliminate small empty space below footer (mobile & desktop) */
.gb-element-b16196a8 > p:last-child,
.gb-element-b16196a8 .gb-text-eb4a8fa5 {
  margin-bottom: 0 !important;
}

/* CLS fix: reserve booking-form space while it initializes (added 2026-07-20) */
.chbs-main[class*="chbs-booking-form-id"].chbs-hidden {
	display: block !important;
	visibility: hidden !important;
}


/* A11y fix (2026-07-20): footer green links were 4.25:1 on the light lavender bg — darken to ~5.5:1. Icon links (gb-text-*) excluded to keep their own styling */
footer.gb-element-42095101 a:not([class*="gb-text-"]) {
	color: #276A25 !important;
}

/* A11y fix (2026-07-20): in-content links relied on colour alone — add underline (buttons excluded) */
p.gb-text a:not(.gb-button) {
	text-decoration: underline !important;
}


/* CLS fix #2 (2026-07-20): pre-init, BOTH booking-form tab panels render stacked (974px) while the initialized form shows one (632px) — the 342px collapse was desktop lab CLS 0.36. Hide non-first panels only while the form still has .chbs-hidden (pre-init); the plugin manages them afterwards. */
.chbs-main .chbs-tab > div:not(:first-of-type):not(.ui-tabs-panel) {
	display: none !important;
}



/* LCP (2026-07-20): serve the 28KB 1024w hero variant on phones instead of the 67KB original; preload with matching media queries lives in mu-plugins/font-loading-fixes.php */
@media (max-width: 600px) {
	.gb-element-86361667,
	.gb-element-a2fd9f9c {
		background-image: url(https://tripyana.com/wp-content/uploads/2026/01/Mercedes-Benz-S-Class-780x437.webp) !important;
	}
}


/* Perf option-1 (2026-07-20): on phones, skip layout/paint of below-fold homepage sections until the user scrolls near them (cuts "element render delay"). First .entry-content child = hero + booking form, stays fully rendered. */
@media (max-width: 768px) {
	body.home .entry-content > *:not(:first-child):not(script),
	body.home .site-footer {
		content-visibility: auto;
		contain-intrinsic-size: auto 800px;
	}
}


/* --- Pre-init booking form skeleton (2026-07-20) ---
   Approximates the final tab-bar look before jquery.chauffeurBookingForm
   builds the UI on cold first visits. Every rule is scoped to
   .chbs-tab:not(.ui-tabs) so it stops applying the instant jQuery UI
   initializes the tabs (values mirror the initialized computed styles). */
.chbs-tab:not(.ui-tabs) > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chbs-tab:not(.ui-tabs) > ul li {
  margin: 0;
  padding: 0;
  flex: 1;
  list-style: none;
}
.chbs-tab:not(.ui-tabs) > ul li a {
  display: block;
  text-align: center;
  padding: 20px 10px;
  font-size: 13px;
  letter-spacing: .35px;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: #778591;
  border-bottom: 2px solid #338c83;
}
.chbs-tab:not(.ui-tabs) > ul li:first-child a {
  background: #338c83;
  color: #fff;
}
.chbs-tab:not(.ui-tabs) select {
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  padding: 0;
}


/* Task 6 (20 Jul 2026) — AR booking form polish:
   labels were flush against the field edge in RTL; dropdown text a bit large. */
body.rtl .chbs-main .chbs-form-field > label {
  padding-inline: 20px;
  box-sizing: border-box;
}
/* Slightly smaller, lighter selected-value text in dropdown buttons (was 18px bold 700) */
body.rtl .chbs-main .ui-selectmenu-button .ui-selectmenu-text {
  font-size: 16px;
  font-weight: 400;
}
/* Slightly smaller items in the open dropdown list (was 18px) */
body.rtl .chbs-main .ui-selectmenu-menu .ui-menu,
body.rtl .chbs-main .ui-selectmenu-menu .ui-menu .ui-menu-item,
body.rtl .chbs-main .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper {
  font-size: 15px;
}

/* Task 6b (20 Jul 2026) — RTL: mirror the LTR dropdown layout.
   English: value bottom-left, arrow far right. Arabic mirror: value on the
   right (under the label), arrow far LEFT. Covers both the pre-init jQuery UI
   icon class and the chbs replacement icon class. */
body.rtl .chbs-main .ui-selectmenu-button .ui-selectmenu-icon,
body.rtl .chbs-main .ui-selectmenu-button [class*="chbs-meta-icon-arrow"] {
  float: left;
}
body.rtl .chbs-main .ui-selectmenu-button .ui-selectmenu-text {
  text-align: right;
}

/* Task 7 (21 Jul 2026) — AR booking widget consistency pass */
/* 7a: "Book Now" button on the LEFT in RTL (mirror of the LTR bottom-right).
   Selector strength must beat .chbs-main.chbs-widget.chbs-widget-style-1 .chbs-button-widget-submit */
body.rtl .chbs-main.chbs-widget a.chbs-button-widget-submit {
  float: left;
}
/* 7b: calendar prev/next arrows were stacked on the same corner in RTL —
   pin them to opposite corners (prev on the right, next on the left) */
body.rtl .ui-datepicker .ui-datepicker-prev {
  right: 2px !important;
  left: auto !important;
}
body.rtl .ui-datepicker .ui-datepicker-next {
  left: 2px !important;
  right: auto !important;
}
/* 7c: entered text (locations, date, time) matches dropdown values: 16px regular */
body.rtl .chbs-main .chbs-form-field input[type="text"] {
  font-size: 16px;
  font-weight: 400;
}
/* 7d: stronger section tab titles (توصيل المطار / سائق خاص بالساعة).
   Selector strength must beat .chbs-main .chbs-tab.ui-tabs .ui-tabs-nav > li > a */
body.rtl .chbs-main .chbs-tab.ui-tabs .ui-tabs-nav > li > a {
  font-weight: 700;
  font-size: 14px;
}

/* 7b-2: clean chevron arrows inside the calendar prev/next circles (RTL).
   The jQuery UI sprite icon renders as a stray glyph; hide it and draw a
   border-based chevron instead. prev sits on the right → points right,
   next sits on the left → points left. */
body.rtl .ui-datepicker .ui-datepicker-prev span.ui-icon,
body.rtl .ui-datepicker .ui-datepicker-next span.ui-icon {
  text-indent: -9999px;
  overflow: hidden;
  background: none;
}
body.rtl .ui-datepicker .ui-datepicker-prev::before,
body.rtl .ui-datepicker .ui-datepicker-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #338c83;
  border-right: 2px solid #338c83;
  transform: translate(-60%, -50%) rotate(45deg);
}
body.rtl .ui-datepicker .ui-datepicker-next::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}
body.rtl .ui-datepicker .ui-datepicker-prev.ui-state-disabled::before,
body.rtl .ui-datepicker .ui-datepicker-next.ui-state-disabled::before {
  border-color: #c8cdd2;
}

/* 7b-3: RTL stylesheets flip the datepicker prev/next anchors with scaleX(-1)
   (meant for the old sprite icon) which would mirror our drawn chevrons —
   neutralize the transform on both; our ::before chevrons already point the
   correct way per corner. */
body.rtl .ui-datepicker .ui-datepicker-prev,
body.rtl .ui-datepicker .ui-datepicker-next {
  transform: none !important;
}

/* Task 8 (21 Jul 2026) — header merge disabled (GP element 1774): the header
   is back in normal flow, content no longer hides behind it site-wide. */

/* 8a: hero headline readability — service pages open with a dark image hero
   (.gbp-section pattern) whose headline/sub-text were dark-on-dark. Make the
   FIRST section's text white; sibling sections restore the original colors. */
.entry-content > .gbp-section .gbp-section__headline {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.entry-content > .gbp-section .gbp-section__text {
  color: #f3f4f6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.entry-content > .gbp-section ~ .gbp-section .gbp-section__headline,
.entry-content > section ~ .gbp-section .gbp-section__headline,
body.home .entry-content > .gbp-section .gbp-section__headline {
  color: #2d2f43;
  text-shadow: none;
}
.entry-content > .gbp-section ~ .gbp-section .gbp-section__text,
.entry-content > section ~ .gbp-section .gbp-section__text,
body.home .entry-content > .gbp-section .gbp-section__text {
  color: #1f2937;
  text-shadow: none;
}
/* 8a-fix (21 Jul 2026): the white-headline rule is meant ONLY for pages that
   OPEN with a dark gbp-section hero (service/fleet/VIP pages). The homepage's
   first gbp-section is the light "fleet" section (its hero is a different
   <section> pattern) — the two extra selectors above restore its dark text:
   any gbp-section preceded by a <section> sibling, and anything on body.home. */

/* Task 9 (21 Jul 2026) — tighten the big empty band between page body and
   footer: the last CTA gbp-section carries 112px bottom padding and the
   footer wrapper 80px top padding. Both languages. */
.entry-content > div.gbp-section:last-of-type {
  padding-bottom: 28px !important;
}
.site-footer > [class*="gb-element"]:first-child {
  padding-top: 36px !important;
}

/* Range Rover card book button (695bd56f): the London pricing widget styles
   a.lonw-open-wa with 15px radius !important — outrank it so this card button
   keeps the same 999px pill as the other fleet cards. */
a.gb-text-695bd56f.lonw-open-wa,
.gb-text-695bd56f {
  border-radius: 999px !important;
}

/* Remove the gray band between page content and the footer (22 Jul 2026):
   the article's theme bottom-padding exposed the light-gray body
   background (#f7f8fa) as a full-width strip above the lavender footer. */
.site-main > article.page { padding-bottom: 0 !important; }

/* Homepage services cards equal height — the Learn-more buttons sit on one
   horizontal line (22 Jul 2026). Same block ids on AR (page 2) and EN (48).
   Cards are flex columns; margin-top:auto pins the button to the bottom. */
@media (min-width: 768px) {
  .gb-element-746b7b6c { align-items: stretch !important; }
  .gb-element-746b7b6c > [class*="gb-element"] { height: 100% !important; }
  .gb-element-746b7b6c a.gb-text.gbp-button--primary { margin-top: auto !important; }
}

/* ===== Travel-guide hub page redesign (page 25326, 22 Jul 2026) =====
   Destination cards + service chips + dark CTA, matching the homepage
   card language (white cards, 1.5rem radius, brand green #10382D /
   gold family). Buttons reuse the global gbp-button--primary system. */
.page-id-25326 .tg-intro { max-width: 860px; margin: 0 auto 2.5rem; }
.page-id-25326 .tg-lead { font-size: 1.06rem; line-height: 1.9; color: #1f2937; text-align: center; }

.page-id-25326 .tg-grid > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; align-items: stretch; max-width: 1300px; margin: 0 auto 3rem;
}
@media (max-width: 1024px) { .page-id-25326 .tg-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .page-id-25326 .tg-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } }

.page-id-25326 .tg-card {
  display: flex; flex-direction: column; height: 100%;
  background: #ffffff; border: 1px solid rgba(45, 47, 67, 0.12);
  border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0px 1px 2px 1px rgba(186, 182, 191, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-id-25326 .tg-card:hover {
  transform: translate3d(0, -0.4rem, 0);
  box-shadow: 0px 20px 25px -6px rgba(186, 182, 191, 0.35);
}
.page-id-25326 .tg-card > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; }
.page-id-25326 .tg-card-media { margin: 0; }
.page-id-25326 .tg-card-media img { width: 100%; height: 210px; object-fit: cover; display: block; }
.page-id-25326 .tg-card-title { font-size: 1.3rem; color: #10382D; margin: 1.25rem 1.5rem 0.5rem; }
.page-id-25326 .tg-card-sub { color: #4b5563; font-size: 0.95rem; margin: 0 1.5rem 0.75rem; }
.page-id-25326 .tg-links { list-style: none; margin: 0 1.5rem 1.25rem; padding: 0; }
.page-id-25326 .tg-links li { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid rgba(45, 47, 67, 0.08); }
.page-id-25326 .tg-links li:last-child { border-bottom: 0; }
.page-id-25326 .tg-links a { color: #1f2937; text-decoration: none; font-size: 0.95rem; display: block; transition: color 0.15s ease, padding 0.15s ease; }
.page-id-25326 .tg-links a:hover { color: #10382D; padding-inline-start: 4px; }
.page-id-25326 .tg-card-btn { margin: auto 1.5rem 1.5rem !important; text-align: center; }

.page-id-25326 .tg-services {
  background: #EDE9F7; border-radius: 1.5rem;
  padding: 2.5rem clamp(1.2rem, 4vw, 3rem); margin: 0 auto 3rem; max-width: 1300px;
  text-align: center;
}
.page-id-25326 .tg-section-title { color: #10382D; font-size: 1.5rem; margin-bottom: 0.5rem; }
.page-id-25326 .tg-section-sub { color: #1f2937; max-width: 760px; margin: 0 auto 1.5rem; }
.page-id-25326 .tg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0; padding: 0; }
.page-id-25326 .tg-chips li { margin: 0; }
.page-id-25326 .tg-chips a {
  display: inline-block; background: #ffffff; color: #10382D; font-weight: 500;
  border: 1px solid rgba(16, 56, 45, 0.25); border-radius: 9999px;
  padding: 0.55rem 1.15rem; font-size: 0.9rem; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-id-25326 .tg-chips a:hover { background: #10382D; color: #E3C47F; border-color: #10382D; }

.page-id-25326 .tg-cta {
  background: linear-gradient(135deg, #0d2b23, #10382D); border-radius: 1.5rem;
  padding: 3rem clamp(1.2rem, 4vw, 3rem); margin: 0 auto 1rem; max-width: 1300px;
  text-align: center;
}
.page-id-25326 .tg-cta-title { color: #E3C47F; font-size: 1.6rem; margin-bottom: 0.75rem; }
.page-id-25326 .tg-cta-sub { color: #f3f4f6; max-width: 700px; margin: 0 auto 1.5rem; }
.page-id-25326 .tg-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.page-id-25326 .tg-cta-buttons a {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px !important; padding: 0.8rem 1.9rem !important;
  font-weight: 700 !important; text-decoration: none !important;
  transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.page-id-25326 .tg-cta-buttons a[href*="online-booking"] {
  background: #d4af37 !important;
  color: #0c211a !important; border: 1px solid transparent !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
.page-id-25326 .tg-cta-buttons a[href*="online-booking"]:hover { filter: brightness(1.08); }
.page-id-25326 .tg-cta-buttons a[href*="wa.me"] {
  background: transparent !important; color: #d4af37 !important;
  border: 1.5px solid #d4af37 !important; box-shadow: none !important;
}
.page-id-25326 .tg-cta-buttons a[href*="wa.me"]:hover { background: rgba(201, 162, 75, 0.15) !important; }

/* ===== Archive pagination polish (Claude 2026-07-22) =====
   Category/tag archives (GP .paging-navigation). The numbered bar already
   contains prev/next links, so GP's separate chevron + "older/newer posts"
   row above it is hidden as a duplicate. */
.paging-navigation .nav-previous,
.paging-navigation .nav-next { display: none !important; }
.paging-navigation {
  display: flex; justify-content: center;
  padding: 14px 0 6px; margin-top: 10px;
}
.paging-navigation .nav-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
}
.paging-navigation .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; gap: 6px;
  border-radius: 9999px; border: 1px solid #d9d4e3; background: #fff;
  color: #2D2F43; font-weight: 600; line-height: 1; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.paging-navigation a.page-numbers:hover {
  background: #14432f; border-color: #14432f; color: #fff;
}
.paging-navigation .page-numbers.current {
  background: #14432f; border-color: #14432f; color: #d4af37;
}
.paging-navigation .page-numbers.dots {
  border: none; background: transparent; min-width: 24px; padding: 0;
}
@media (max-width: 480px) {
  .paging-navigation .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; }
}
/* RTL: mirror the ← / → glyphs inside the numbered bar so "next" points left */
body.rtl .paging-navigation .nav-links span[aria-hidden="true"] {
  display: inline-block; transform: scaleX(-1);
}

/* RTL: mirror the right-pointing arrow icon on card read-more links
   (archive template "اقرأ المزيد" + blog loop "تابع قراءة المقال") */
body.rtl a.gb-text-1aa96799 .gb-shape svg,
body.rtl a.gb-text-15420da3 .gb-shape svg { transform: scaleX(-1); }

/* ===== FAQ contact button → inquiry-form opener (Claude 2026-07-22) ===== */
/* center the converted button whatever the parent layout is */
a.lonw-faq-center {
  width: fit-content !important;
  margin-left: auto !important; margin-right: auto !important;
  justify-self: center !important;
}
/* colors/radius intentionally NOT set here — the button inherits the approved
   gold form-trigger pill (bg #C9A24B, text #10382D) from snippet 25926's
   a.lonw-open-form x4 rule, same as the landing-page أرسل استفسارك buttons.
   Only layout belongs here. */
a.lonw-open-form.lonw-open-form.lonw-open-form.lonw-faq-center {
  display: flex !important; align-items: center !important;
  font-size: 17px !important;
}

/* ===== Booking form: date/time pair flush with row edge (Claude 2026-07-22) =====
   CHBS widget rule `.chbs-widget .chbs-form-field-pickup-date-time>div+div`
   pulls the 2nd field 1px (border-collapse trick) leaving a 1px background
   sliver at the row's outer edge (left in RTL, right in LTR). The adjacent
   border is already single (2nd field's inner border-width is 0), so the
   negative margin is unnecessary. */
.chbs-main.chbs-widget .chbs-form-field-pickup-date-time > div + div { margin-right: 0 !important; }

/* ===== أرسل استفسارك modal: submit button (Claude 2026-07-22) =====
   Fluent Forms' stylesheet is not loaded anywhere on this site, so the
   modal's submit button fell back to an invisible white-on-white default
   (landing pages included). Brand gold pill, same as the CHBS submit. */
#lonw-form-overlay .ff-btn-submit {
  display: block; width: 100%;
  background: linear-gradient(135deg, #D9B45E, #C9A24B) !important;
  background-color: #C9A24B !important;
  color: #10382D !important; -webkit-text-fill-color: #10382D !important;
  border: 1px solid #B8912F !important; border-radius: 12px !important;
  font-weight: 800 !important; font-size: 16px !important;
  padding: 13px 20px !important; margin-top: 8px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.3);
}
#lonw-form-overlay .ff-btn-submit:hover { filter: brightness(1.06); }

/* unify form-opener button layout: icon-first markup + flex gap (Claude 2026-07-22) */
a.lonw-open-form.lonw-open-form.lonw-open-form.lonw-open-form {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: .45em;
  /* deterministic icon-left placement: icon is first in markup; ltr flex row
     puts it visually left in BOTH language contexts (Arabic label is a single
     bidi run, unaffected). */
  direction: ltr;
}

/* re-center the post-FAQ button: the unification rule above forces inline-flex
   on all opener buttons, which makes auto margins inert (inline flow follows
   RTL text-align → button drifted right). 5-class specificity restores
   block-level flex so margin:auto centering works again. */
a.lonw-open-form.lonw-open-form.lonw-open-form.lonw-open-form.lonw-faq-center {
  display: flex !important;
}

/* ===== License badge: sit tight under the licence line (Claude 2026-07-22) =====
   The licence <p> carries the theme's 25px bottom margin; pull the badge up
   so the pair reads as one trust unit (~11px visual gap), both footers. */
.site-footer .gb-media-011a739f,
.site-footer .gb-media-c11a739e {
  margin-top: -14px !important;
}

/* Task 8: this CTA sits on a DARK panel — the global :has() demotion would
   paint an invisible emerald outline here; (0,4,1) re-assert keeps the gold
   dark-background secondary variant. */
body.page-id-25326 .tg-cta-buttons.tg-cta-buttons.tg-cta-buttons a.gbp-button--primary[href*="wa.me"] {
  background: transparent !important; color: #d4af37 !important;
  border: 1.5px solid #d4af37 !important; box-shadow: none !important;
}
body.page-id-25326 .tg-cta-buttons.tg-cta-buttons.tg-cta-buttons a.gbp-button--primary[href*="wa.me"] * { color: #d4af37 !important; }


/* Fix: Heathrow pricing section (.gb-element-e8a8c89a) text was cream on a white background */
.entry-content .gb-element-e8a8c89a .gb-text,
.entry-content .gb-element-e8a8c89a strong {
  color: #1F2937;
}
.entry-content .gb-element-e8a8c89a .gbp-section__headline,
.entry-content .gb-element-e8a8c89a .gbp-section__headline strong {
  color: #0C211A;
}
.entry-content .gb-element-e8a8c89a a {
  color: #1F6F3D;
}
.entry-content .gb-element-e8a8c89a .gb-text-0306c176,
.entry-content .gb-element-e8a8c89a .gb-text-0306c176 strong {
  color: #F7F5EF;
}
.entry-content .gb-element-e8a8c89a .gb-text-0306c176 a {
  color: #D4AF37;
}
.entry-content .gb-element-e8a8c89a .gbp-button--primary,
.entry-content .gb-element-e8a8c89a .tp-fleet__book {
  color: #0C211A;
}