/* =========================================================================
   MyGuide AE — Arabic / RTL
   The layout itself is written with logical properties, so this file only
   corrects the things that cannot mirror on their own: the parent theme's
   hard-coded left/right rules, glyph metrics, and direction-sensitive art.
   ========================================================================= */

html[dir="rtl"] body.mg-body { direction: rtl; text-align: right; }

/* ---- typography -------------------------------------------------------- */
html[lang^="ar"] .mg,
html[lang^="ar"] .mg input,
html[lang^="ar"] .mg select,
html[lang^="ar"] .mg textarea,
html[lang^="ar"] .mg button {
  font-family: var(--mg-font-ar);
}

/* Arabic has no case, so every uppercase treatment has to be switched off or
   it silently does nothing while the letter-spacing shreds the joins. */
html[lang^="ar"] .mg-eyebrow,
html[lang^="ar"] .mg-mega h5,
html[lang^="ar"] .mg-fact dt {
  text-transform: none;
  letter-spacing: 0;
}

/* An Arabic glyph box runs about 1.9x the font size; anything tighter clips
   the descenders on ج ح خ ع غ م. */
html[lang^="ar"] .mg-article p,
html[lang^="ar"] .mg-article li { line-height: 1.95; }
html[lang^="ar"] .mg-card-desc,
html[lang^="ar"] .mg-head p { line-height: 1.85; }
html[lang^="ar"] .mg-card-title { line-height: 1.5; }
html[lang^="ar"] .mg h1,
html[lang^="ar"] .mg h2 { line-height: 1.45; }

/* Latin runs inside Arabic copy (AED, DXB, brand names) keep their own font
   and direction so they do not scatter. */
html[lang^="ar"] .mg [lang="en"],
html[lang^="ar"] .mg .mg-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--mg-font);
  display: inline-block;
}

/* Numbers stay Latin and isolated. A bare number next to Arabic text flips
   its neighbouring punctuation otherwise — "1 / 7" becomes "7 / 1". */
html[lang^="ar"] .mg-num,
html[lang^="ar"] .mg-rating-val,
html[lang^="ar"] .mg-price,
html[lang^="ar"] .mg-count,
html[lang^="ar"] .mg-hours td,
html[lang^="ar"] time {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---- direction-sensitive art ------------------------------------------- */
html[dir="rtl"] .mg-crumbs li::after { content: '\\'; }
html[dir="rtl"] .mg-nav .caret,
html[dir="rtl"] .mg-drawer summary::after { transform: none; }
html[dir="rtl"] .mg-nav li.open .caret { transform: rotate(180deg); }

/* Arrows written as → in copy must point the other way in Arabic. */
html[dir="rtl"] .mg-head-link .arrow,
html[dir="rtl"] .mg-mega-foot .arrow { transform: scaleX(-1); display: inline-block; }

/* Gradients never mirror on their own. */
html[dir="rtl"] .mg-hero-shade {
  background: linear-gradient(270deg, rgba(2,48,27,.92) 0%, rgba(2,48,27,.72) 42%, rgba(2,48,27,.18) 100%);
}

/* ---- mega panel anchoring ---------------------------------------------- */
/* The base rule already uses inset-inline-start, which flips on its own. Re-mirroring
   it here double-flipped the panel: in RTL it resolved to left:0 and the 640px dropdown
   ran 229px past the viewport, clipped by body overflow-x:hidden. */

/* ---- parent theme corrections ------------------------------------------ */
/* ListingPro ships a full LTR grid and floats. These are the rules that leak
   into pages the child theme owns. */
html[dir="rtl"] .mg .pull-left { float: right !important; }
html[dir="rtl"] .mg .pull-right { float: left !important; }
html[dir="rtl"] .mg .text-left { text-align: right !important; }
html[dir="rtl"] .mg .text-right { text-align: left !important; }

/* Full-bleed under RTL needs both margins zeroed AND max-width released, or
   the section keeps a phantom offset on wide screens. */
html[dir="rtl"] .mg-fullbleed {
  margin-inline: 0 !important;
  max-width: none !important;
  width: 100%;
}

/* ---- forms -------------------------------------------------------------- */
html[dir="rtl"] .mg-hsearch input { padding-inline: 42px var(--s4); }
html[dir="rtl"] .mg-hsearch svg { inset-inline-start: 14px; }

/* ---- lists -------------------------------------------------------------- */
html[dir="rtl"] .mg-article ul,
html[dir="rtl"] .mg-article ol { padding-inline-start: var(--s6); padding-inline-end: 0; }

/* The theme suppresses ::marker, so bullets are drawn manually. Single quotes
   only — a double quote breaks JSON.parse of _elementor_data on this stack. */
html[dir="rtl"] .mg-article ul { list-style: none; padding-inline-start: var(--s5); }
html[dir="rtl"] .mg-article ul > li { position: relative; padding-inline-start: var(--s4); }
html[dir="rtl"] .mg-article ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mg-green);
}