/* ============================================================
   AL HUDHUD — right-to-left layer
   Loaded only on /ar/ pages, after main.css.

   Nothing here introduces a colour, a size or a component. It does
   three things: it gives Arabic text an Arabic face, it mirrors the
   rules in main.css that are written with physical left/right, and it
   turns direction-bearing icons around. Photographs and logos are moved
   to the other side of the layout but never flipped.
   ============================================================ */

/* ---- Arabic face. Latin runs inside Arabic text keep the site's own
        faces, so brand names, numbers and codes look unchanged. ---- */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plex-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plex-arabic-600.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/plex-arabic-700.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}

[dir="rtl"] body,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .h1-alt,
[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{
  font-family:"IBM Plex Sans Arabic","DM Sans",system-ui,sans-serif;
}
/* Arabic has no capitals and hangs on its baseline, so it needs a little
   more room than the Latin setting to read at the same comfort. */
[dir="rtl"] body{line-height:1.75;letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .h1-alt{letter-spacing:0;line-height:1.35}
[dir="rtl"] .h1-alt,[dir="rtl"] h1{max-width:20ch}
[dir="rtl"] .kicker,[dir="rtl"] .hero-kicker{letter-spacing:0}

/* Numbers, phone numbers, e-mail addresses and codes stay left-to-right
   inside right-to-left sentences. */
[dir="rtl"] .faddr a[href^="tel"],
[dir="rtl"] .topbar .right a,
[dir="rtl"] .book-contact a,
[dir="rtl"] .card .n,
[dir="rtl"] .rv-num{direction:ltr;unicode-bidi:isolate}

/* ---- Header, navigation ---- */
[dir="rtl"] .caret{border-left:4.5px solid transparent;border-right:4.5px solid transparent}
[dir="rtl"] .mega{left:auto;right:0}
[dir="rtl"] .drawer .close{right:auto;left:6%}
[dir="rtl"] .drawer{transform:translateX(-100%)}
[dir="rtl"] .drawer.open{transform:translateX(0)}
[dir="rtl"] .drawer .dtog{text-align:right}
[dir="rtl"] .drawer .dtog .caret{border-left-width:6px;border-right-width:6px}
[dir="rtl"] .drawer .dpanel a{border-left:0;border-right:2px solid rgba(255,255,255,.18)}
[dir="rtl"] .drawer .dpanel a:hover,
[dir="rtl"] .drawer .dpanel a[aria-current]{border-left-color:transparent;border-right-color:var(--gold)}

/* ---- Hero ---- */
[dir="rtl"] .pane-uae{left:auto;right:0}
[dir="rtl"] .pane-dest{right:auto;left:0}
[dir="rtl"] .dest-word span{left:auto;right:0}
[dir="rtl"] .dest-chip{right:auto;left:6%}
[dir="rtl"] .scroll-hint span:after{left:50%;margin-left:-2px}
/* The flight path is drawn over the destination pane and moves with it, so
   the whole plate is turned rather than the artwork inside it. The geometry
   the script reads is untouched: this is a paint-time transform only. */
[dir="rtl"] .flight{transform:scaleX(-1)}
[dir="rtl"] .plane{transform-box:fill-box}

/* The ticker is decorative and aria-hidden; it runs the other way so it
   travels with the reading direction. */
[dir="rtl"] .ticker .track{animation-direction:reverse}
[dir="rtl"] .ticker .track span:after{margin-left:0;margin-right:44px}

/* ---- Cards, lists, sections ---- */
[dir="rtl"] .card .n{margin-left:0;margin-right:auto}
[dir="rtl"] .card .foot .flagsvg{margin-right:0;margin-left:5px}
[dir="rtl"] .dcard .flag{left:auto;right:22px}
[dir="rtl"] .dcard .go{right:auto;left:22px;transform:scaleX(-1)}
[dir="rtl"] .svc li{padding-left:0;padding-right:18px}
[dir="rtl"] .svc li:before{left:auto;right:0}
[dir="rtl"] .ab2-desks li:before{left:auto;right:0}
[dir="rtl"] .sp-list li{padding-left:0;padding-right:26px}
[dir="rtl"] .sp-list li:before{left:auto;right:0}
[dir="rtl"] .sp-steps li:before{left:auto;right:20px}
[dir="rtl"] .cred-acts li{padding-left:0;padding-right:24px}
[dir="rtl"] .cred-acts li:before{left:auto;right:0}
[dir="rtl"] .ab-how li:before{left:auto;right:24px}
[dir="rtl"] .step:before{right:auto;left:18px}
[dir="rtl"] .step .ico{left:auto;right:28px}
[dir="rtl"] .summary .lines b{text-align:left}
[dir="rtl"] .auth span{margin-right:0;margin-left:6px}
[dir="rtl"] .sbox .pic .ico,[dir="rtl"] .sbox .pic .flag{left:auto;right:20px}
[dir="rtl"] .sp-notice{border-left:0;border-right:5px solid var(--gold)}
[dir="rtl"] .sp-note{border-left:0;border-right:4px solid var(--green)}
[dir="rtl"] .sp-table th,[dir="rtl"] .sp-table td{text-align:right}
[dir="rtl"] .ab2-logo,[dir="rtl"] .ab2-tn,[dir="rtl"] .about .ab2-head{text-align:right}
[dir="rtl"] .cred-names{text-align:left;margin-left:0;margin-right:auto}
[dir="rtl"] .rv-card:before{right:auto;left:16px}
[dir="rtl"] .doc-body ul,[dir="rtl"] .doc-body ol,
[dir="rtl"] .guide-body ul,[dir="rtl"] .guide-body ol{padding-left:0;padding-right:22px}
[dir="rtl"] .guide-toc ol{padding-left:0;padding-right:20px}

/* Decorative off-canvas washes: mirrored so the light falls from the same
   side of the reading flow as it does in English. */
[dir="rtl"] .band .wrap:before{right:auto;left:-120px}
[dir="rtl"] .pw:before{right:auto;left:-140px}
[dir="rtl"] .pw:after{left:auto;right:-120px}
[dir="rtl"] .rv-sand:before{right:auto;left:-190px}
[dir="rtl"] .rv-sand:after{left:auto;right:-220px}
[dir="rtl"] .book-side:before{right:auto;left:-160px}
[dir="rtl"] .why-photo .float{left:24px;right:24px}

/* ---- Form ---- */
[dir="rtl"] .book-form .field select,[dir="rtl"] .iq-form .field select{
  padding-right:14px;padding-left:46px;background-position:left 16px center}
[dir="rtl"] .book-form .field .req,[dir="rtl"] .iq-form .field .req{margin-left:0;margin-right:2px}
[dir="rtl"] .book-form input,[dir="rtl"] .book-form textarea,
[dir="rtl"] .book-form select,[dir="rtl"] .book-form label{text-align:right}
[dir="rtl"] .book-form input::placeholder,[dir="rtl"] .book-form textarea::placeholder{text-align:right}
/* The phone field takes a Latin number, so it is typed and shown left to right. */
[dir="rtl"] #cPhone,[dir="rtl"] #cEmail{direction:ltr;text-align:right}

/* ---- Floating WhatsApp button ---- */
[dir="rtl"] .wa{right:auto;left:22px}

/* ---- Reviews stay in the language they were written in ---- */
[dir="rtl"] .rv-card .rv-quote,
[dir="rtl"] .rv-card .rv-who{direction:ltr;text-align:left;unicode-bidi:isolate;
  font-family:"DM Sans",system-ui,sans-serif}
[dir="rtl"] .rv-card .stars{direction:ltr;unicode-bidi:isolate}

/* The long-review fade exists so one very long quotation does not dominate the
   row. An Arabic card carries the translation underneath and is tall anyway, so
   the cap only makes the English look arbitrarily cut off mid-sentence while
   the Arabic below it runs to the end. Let the quotation finish. */
[dir="rtl"] .rv-card.is-long .rv-quote{max-height:none;-webkit-mask-image:none;mask-image:none}