/* rtl.css — Arabic (right-to-left) overrides for KeliaTrips.
   Loaded only by /ar/ pages, after the inline page CSS (html and .bm carry dir="rtl").
   tools/translate_dc.py also appends this file to Arabic canvas artboards.
   Stub created by tools/build.py; it is never overwritten — fill it in. */
[dir="rtl"] .bm{font-family:'Tajawal','Figtree',system-ui,sans-serif}
[dir="rtl"] .bm h1,[dir="rtl"] .bm h2,[dir="rtl"] .bm h3,[dir="rtl"] .bm h4{font-family:'Baloo Bhaijaan 2','Bricolage Grotesque',sans-serif;letter-spacing:0}
[dir="rtl"] .bm-script{font-family:'Aref Ruqaa','Kaushan Script',serif}

/* ------------------------------------------------------------------------------------------
   Everything below is scoped with :is(.bm[dir="rtl"],[dir="rtl"] .bm) so it works both on the
   built site (dir on <html>) and on canvas artboards (dir only on the root .bm div).
   Rules marked !important override inline style="" attributes of the design masters.
   ------------------------------------------------------------------------------------------ */

/* ---------- 1. Fonts ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm){
  --ar-body:'Tajawal','Figtree',system-ui,sans-serif;
  --ar-head:'Baloo Bhaijaan 2','Bricolage Grotesque',sans-serif;
  /* Kaushan first: the Latin "KeliaTrips" wordmark keeps its face, Arabic glyphs (absent from
     Kaushan) fall through to Aref Ruqaa. */
  --ar-script:'Kaushan Script','Aref Ruqaa',serif;
  font-family:var(--ar-body);line-height:1.7}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(h1,h2,h3,h4){font-family:var(--ar-head);letter-spacing:0}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-script,
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="Kaushan"],
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-vc-msg{font-family:var(--ar-script) !important;letter-spacing:0 !important}
/* controls and components that name Figtree / Bricolage explicitly */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(button,input,select,textarea,.bm-btn,.rv-input){font-family:var(--ar-body)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="Figtree"]{font-family:var(--ar-body) !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="Bricolage"]{font-family:var(--ar-head) !important;letter-spacing:0 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg text{font-family:var(--ar-body);letter-spacing:0}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-mq-item,.bm-info-val,.rv-pack-name,.rv-count-name,.bm-vc-title,.bm-vc-amt,.bm-gb-lbl){font-family:var(--ar-head);letter-spacing:0}

/* ---------- 2. Line heights (Arabic needs more room than the Latin masters) ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(h1,h2,h3,h4){line-height:1.3 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-h2,.bm-ah1,.rv-h1,.bm-of-h1){line-height:1.25 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(p,blockquote){line-height:1.8 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-script.bm-giant{line-height:.95 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-lead,.bm-aexp-p1,.bm-aexp-p2,.rv-sub,.bm-lsec p,.bm-lsec li){line-height:1.85 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-script,[style*="Kaushan"]){line-height:1.45 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-info-val,.rv-pack-name,.rv-count-name,.bm-gb-lbl,.bm-chip,.rv-act-name,.rv-pack-list,.rv-sum-val,.rv-rc-val,.bm-afact-txt,.bm-dv-line-txt){line-height:1.45}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-vc-title{line-height:1.2}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-faq-q{line-height:1.5}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-btn{line-height:1.2}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-mq-item{line-height:1.4}

/* Aref Ruqaa renders smaller than Kaushan: scale the Arabic script accents up ~10%
   (not the Latin "KeliaTrips" wordmarks: header/footer logo, giant footer word, voucher brand). */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-script,[style*="Kaushan"]):not(.bm-giant):not([style*="font-size:32px"]):not(.bm-vc-word .bm-script){zoom:1.1}

/* ---------- 3. No letter-spacing / uppercase on Arabic labels ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-eyebrow,.bm-field label,.bm-field .bm-flabel,.bm-chip,.bm-afact-lbl,.bm-info-lbl,.rv-tab,.rv-step-lbl,.rv-label,.rv-sum-lbl,.rv-sum-pack,.bm-gb-live,.bm-dv-line-txt small,.bm-vc-codelbl,.bm-vc-tolbl,.bm-mq-item,.bm-atag,.bm-nav a,.bm-pill){letter-spacing:0 !important;text-transform:none !important}
/* inline letter-spacing on Arabic text (the Latin logo line "HERGLA · TUNISIE" keeps its tracking) */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="letter-spacing"]:not([style*="letter-spacing:.3em"]){letter-spacing:0 !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="uppercase"]{text-transform:none !important}
/* small labels were sized for Latin capitals: give the Arabic a little more size */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-eyebrow{font-size:15px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-field label,.bm-field .bm-flabel,.rv-label,.rv-sum-lbl,.bm-afact-lbl,.bm-info-lbl,.rv-tab,.rv-step-lbl,.bm-gb-live,.bm-dv-line-txt small){font-size:13.5px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-chip{font-size:15px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-sum-pack{font-size:12px}

/* ---------- 4. Highlighter + misc text ---------- */
/* Arabic glyphs sit higher in the em box and have deep descenders: move the marker band up a bit */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-mark{background:linear-gradient(transparent 56%,#FFD23F 56%,#FFD23F 86%,transparent 86%)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-faq-q{text-align:start}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-nav a::after{transform-origin:right}
/* phone numbers / e-mails stay left-to-right inside Arabic text */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(a[href^="tel:"],a[href^="mailto:"]){direction:ltr;unicode-bidi:isolate;flex-direction:row-reverse}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(a[href^="tel:"],a[href^="mailto:"]) :is(.bm-dv-line-txt){text-align:right}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-dl dd{unicode-bidi:plaintext;text-align:right}
/* values typed by the visitor (phone, e-mail, name) shown back in the booking summary / recap:
   "+216 22 333 444" would otherwise be displayed with its digit groups in reverse order */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is([data-text="rc.phone"],[data-text="sum.phone"],[data-text="rc.email"],[data-text="rc.name"],[data-text="sum.contact"],[data-text="v.to"]){unicode-bidi:plaintext}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(input[type="tel"],input[type="email"]){direction:ltr;text-align:right}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(input[type="tel"],input[type="email"])::placeholder{text-align:right}

/* ---------- 5. Forward / back arrows point the other way ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg:has(> path[d^="M5 12h14M13"]),
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg:has(> path[d="m9 6 6 6-6 6"]),
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg:has(> path[d^="M19 12H5"]),
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg[viewBox="0 0 44 34"]{transform:scaleX(-1)}  /* + review quote marks */

/* ---------- 6. Header, hero, booking ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-skip{left:auto;right:16px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-hero-badge{right:auto;left:max(32px,calc((100% - 1240px) / 2 + 32px))}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="right:18px;bottom:16px"]{right:auto !important;left:18px !important}

/* ---------- 7. Activity cards, carousels ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-tag{left:auto;right:16px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-more{margin-left:0;margin-inline-start:auto}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.bm-acts,.bm-grid3){scroll-padding-left:0;scroll-padding-inline-start:20px}
@media (max-width:1023px){:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-grid3{scroll-padding-inline-start:32px}}
@media (max-width:639px){:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-grid3{scroll-padding-inline-start:20px}}

/* ---------- 8. "Pourquoi" art: postcards + badge ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-why-art .bm-postcard[style*="left:0"]{left:auto !important;right:0 !important;transform:rotate(5deg) !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-why-art .bm-postcard[style*="right:0"]{right:auto !important;left:0 !important;transform:rotate(-3deg) !important}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-why-art .bm-float{right:auto !important;left:2% !important}

/* ---------- 9. Formules: overlapping icon stacks ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) [style*="margin-left:-10px"]{margin-left:0 !important;margin-right:-10px !important}

/* ---------- 10. Marquee scrolls the other way ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-marquee-track{animation-name:bm-mq-rtl}
@keyframes bm-mq-rtl{to{transform:translateX(50%)}}

/* ---------- 11. Night section: mirror the picture so the empty sky is behind the text ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-night-img{transform:scaleX(-1)}

/* ---------- 12. Contact, footer, floating buttons ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-caravan{right:auto;left:7%;transform:scaleX(-1)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-fab{right:auto;left:24px}

/* ---------- 13. Mobile timelines (homepage day + activity steps + gift steps) ---------- */
@media (max-width:639px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-day::before{left:auto;right:39px;border-left:0;border-right:3px dotted #13306B}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-day-item{text-align:right}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-steps::before{left:auto;right:32px;border-left:0;border-right:3px dotted #13306B}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-step{text-align:right}
}
@media (max-width:759px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-step{text-align:right}
}

/* ---------- 14. Activity page ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-aart{padding:36px 12px 50px 36px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-asun{left:auto;right:-1%}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-aframe{transform:rotate(2.5deg)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-abadge{right:auto;left:6px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-asticker{left:auto;right:0;transform:rotate(-3deg)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-afact{padding:8px 8px 8px 18px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-acta-badge{right:auto;left:max(32px,calc((100% - 1240px) / 2 + 32px))}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-acta-waves{left:auto;right:-40px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-acta-ico{left:auto;right:max(32px,calc((100% - 1240px) / 2 + 40px))}
@media (max-width:639px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-aart{padding:24px 4px 38px 20px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-abadge{right:auto;left:2px}
}

/* ---------- 15. Booking page ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-tab{margin-left:0;margin-right:30px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-steps li:not(:last-child)::after{left:calc(-50% + 32px);right:calc(50% + 32px)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-tick{right:auto;left:10px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) :is(.rv-act,.rv-pack){text-align:right}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-act-ico{left:auto;right:14px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-pack-icons span + span{margin-left:0;margin-right:-8px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-nav-end{margin-left:0;margin-right:auto}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-hint{text-align:left}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-chip{padding:4px 5px 4px 12px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-chip--plain{padding-right:12px}
@media (max-width:759px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-pack{padding:14px 14px 14px 46px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-pack-icons span + span{margin-left:0;margin-right:-10px}
}
@media (max-width:639px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-tab{margin-left:0;margin-right:18px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-steps li:not(:last-child)::after{left:calc(-50% + 24px);right:calc(50% + 24px)}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-act-ico{left:auto;right:10px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-tick{right:auto;left:8px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .rv-hint{text-align:right}
}

/* ---------- 16. Gifts & groups page ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-frame{right:auto;left:1%;transform:rotate(-4deg)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-ticket{left:auto;right:0}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-burst{left:auto;right:-2%}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-badge{right:auto;left:-1%}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-sun{left:auto;right:14%}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-ring{left:auto;right:5%}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-note{transform:rotate(3deg)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-note svg{transform:scaleX(-1)}
/* the voucher keeps its physical layout (stub + notched mask on the right); only its text is RTL */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-vc-in{direction:ltr}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-vc-main{direction:rtl}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gchip{text-align:right;padding:0 7px 0 18px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gchip--plain{padding:0 20px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-step-ico{right:auto;left:-14px;transform:rotate(-10deg)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-steps-line{transform:scaleX(-1)}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gb-card{padding:18px 14px 14px 6px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gb-prev-deco{right:auto;left:-90px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-dv-deco{left:auto;right:-44px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-dv-line{padding:8px 8px 8px 16px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-dv-caravan{transform:scaleX(-1)}
@media (max-width:759px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-step-ico{right:auto;left:-12px}
}
@media (max-width:639px){
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-frame{right:auto;left:0}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-burst{left:auto;right:-3%}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-badge{right:auto;left:-3%}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gchip{padding:6px 6px 6px 10px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gchip--plain{padding:6px 10px}
  :is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-gb-card{padding:16px 10px 10px 2px}
}

/* ---------- 17. Legal page ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-lhero-sun{right:auto;left:max(32px,calc((100% - 1240px) / 2 + 40px))}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-lsec ul.bm-bullets li{padding-left:0;padding-right:22px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-lsec ul.bm-bullets li::before{left:auto;right:2px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-dl dt{padding-right:0;padding-left:20px}

/* ---------- 18. 404: the caravan walks right-to-left ---------- */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-nf-walk{left:auto;right:0;animation-name:bm-nf-walk-rtl}
@keyframes bm-nf-walk-rtl{from{transform:translateX(320px) scaleX(-1)}to{transform:translateX(calc(-100vw - 20px)) scaleX(-1)}}
@media (prefers-reduced-motion: reduce){:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-nf-walk{left:auto;right:58%;transform:scaleX(-1)}}

/* ---------- 19. Rotating ring badges (text on a circular path) ---------- */
/* an RTL run anchored at the path start would run backwards off the path: lay it out LTR along the ring */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg text:has(textPath){direction:ltr}
/* the ring text has textLength="348": the Arabic phrase is repeated in ar.json so its natural length is
   close to the ring, otherwise the stretched spacing breaks the letter joins */
:is(.bm[dir="rtl"],[dir="rtl"] .bm) svg text:has(textPath){font-size:12.5px}
:is(.bm[dir="rtl"],[dir="rtl"] .bm) .bm-of-badge svg text:has(textPath){font-size:13px}

/* Photo gallery captions (homepage + activity pages) */
[dir="rtl"] .bm-photo figcaption{left:auto;right:12px}
@media (max-width:639px){[dir="rtl"] .bm-photo figcaption{left:auto;right:8px}}