/* ============================================================
   UAE tax deadline calendar — Arabic (RTL) point-overrides.

   Loaded AFTER ../uae-tax-deadline-calculator/styles.css (see index.html).
   The shared sheet is written LTR-first with several PHYSICAL properties
   (border-left, padding-left, left:, margin-left, text-align:left) that do
   not auto-flip under dir="rtl" — only this file's declarations fix those.
   Flexbox/CSS Grid layouts using the default (row) axis DO auto-mirror under
   dir="rtl" (the inline axis follows `direction`), so most of the page needs
   no override at all — topbar, header, hero, calc-grid, form-grid,
   footer-cols, etc. are untouched here on purpose.

   Never edit the shared styles.css from this file — only add scoped
   [dir="rtl"]/html[dir="rtl"] overrides here.
   ============================================================ */

/* ---- Typography: Arabic-first font stack + no Latin tracking ----
   --font-body/--font-display/--font-mono (Inter Tight / BGA Gothic / IBM
   Plex Mono) carry no Arabic glyphs; --font-arabic (IBM Plex Sans Arabic,
   already declared in the shared styles.css :root) does, and also covers the
   Latin glyphs used for brand names/dates/acronyms in this page, so one
   stack suffices for mixed Arabic+Latin runs. !important is deliberate here:
   the shared sheet sets font-family on many selectors deeper than a single
   class (e.g. `.tl-step .tl-when .when-tag`), so a same-specificity override
   would lose the cascade on several of them. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: var(--font-arabic) !important;
}

/* Letter-spacing/tracking (.eyebrow, .kicker, .tag, badges, table heads, …)
   is tuned for Latin all-caps tracking. Arabic script is cursive/joined
   within a word — added tracking breaks letter connections and looks
   broken, not "spaced". Zero it out page-wide (same specificity reasoning
   as the font-family rule above); the few short Latin badges that lose their
   tracking (e.g. the RU/EN/AR switcher, "ASP") stay perfectly legible. */
html[dir="rtl"] * {
  letter-spacing: normal !important;
}

/* ---- Vertical timeline (.timeline/.tl-step) ----
   Desktop: `.tl-step` is a 2-column CSS Grid (200px date chip + 1fr body).
   Grid tracks lay out from the inline-start edge, which IS the right edge
   under dir="rtl" — so the whole 2-column arrangement already mirrors
   automatically (date chip ends up on the right, body flows to its left).
   What does NOT auto-flip: the connecting "spine" border and dot, which are
   physical left/absolute-left in the shared sheet and need to move to the
   body's RIGHT edge (now adjacent to the mirrored date column). */
html[dir="rtl"] .tl-step .tl-body {
  padding: 22px 34px 22px 0;
  border-left: none;
  border-right: 2px solid var(--line);
}
html[dir="rtl"] .tl-step:last-child .tl-body {
  border-left-color: transparent; /* harmless no-op now border-left is none */
  border-right-color: transparent;
}
html[dir="rtl"] .tl-step .tl-body::before {
  left: auto;
  right: -8px;
}
html[dir="rtl"] .tl-asof {
  margin-left: 0;
  margin-right: 8px;
}
@media (max-width: 620px) {
  /* Mobile collapses to 1 column; the shared sheet indents .tl-when with a
     left-padding to align with the (now single-column) spine — mirror it. */
  html[dir="rtl"] .tl-step .tl-when {
    padding: 16px 34px 0 0;
  }
}

/* ---- FAQ accordion (.faq-q/.faq-a) ----
   Explicit text-align:left + margin-left:auto (chevron) in the shared sheet. */
html[dir="rtl"] .faq-q {
  text-align: right;
}
html[dir="rtl"] .faq-q .fq-chev {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .faq-a .inner {
  padding: 0 4px 24px 40px;
}

/* ---- Static rules table (.rules-table) ----
   th/td are explicitly text-align:left in the shared sheet. */
html[dir="rtl"] .rules-table th,
html[dir="rtl"] .rules-table td {
  text-align: right;
}
html[dir="rtl"] .rules-table a {
  /* still a URL-adjacent domain label ("tax.gov.ae") — keep it from
     reversing digit/dot order under the RTL bidi algorithm. */
  direction: ltr;
  unicode-bidi: embed;
}

/* ---- CTA arrow (↗) ----
   The diagonal "up-right" arrow reads naturally before LTR text; mirrored to
   "up-left" (↖) it points the same way relative to reading direction in
   Arabic. Applied to the svg only — the hover translate() below targets the
   parent .arrow span, so the two transforms don't compose/conflict. */
html[dir="rtl"] .arrow svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .btn-primary:hover .arrow {
  transform: translate(-2px, -2px);
}

/* ---- Hero art veil (.hero::before) ----
   The shared sheet's veil is a PHYSICAL 90deg (left→right) gradient tuned so
   the strong stop sits under .hero-left, which in LTR hugs the container's
   left edge. .hero-left is a plain block (no grid/flex ancestor), so under
   dir="rtl" it does NOT get carried along by the flexbox/grid bidi-mirroring
   this file's banner describes for other sections — it instead follows the
   inline-start edge of normal block flow, which IS the right edge under
   RTL. Verified empirically: at 1440px, .hero-left sits 528px from the
   hero's left edge and only 152px from its right edge. Mirror the gradient
   (270deg) so the strong stop still lands under the text column. */
html[dir="rtl"] .hero::before {
  background: linear-gradient(270deg, rgba(245,242,235,.92) 0%, rgba(245,242,235,.78) 46%, rgba(245,242,235,.6) 100%);
}

/* ---- Mobile topbar scroll fade (.tb-links) ----
   The shared sheet's <=960px fade is a PHYSICAL `linear-gradient(to right, ...)`
   mask, so it does not auto-flip with the flexbox bidi-mirroring mentioned in
   the file banner above. Under dir="rtl" the flex row's inline-start (where
   more links are revealed by scrolling) is the LEFT edge, so the fade needs
   to point the other way. */
@media (max-width: 960px) {
  html[dir="rtl"] .tb-links {
    mask-image: linear-gradient(to left, black calc(100% - 36px), transparent);
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 36px), transparent);
  }
}

/* ---- Form inputs holding Latin/numeric content ----
   Force LTR entry direction for date/email (digits, @, dots) so typing and
   the native date-picker UI aren't mangled by the inherited RTL direction;
   name/contact stay RTL (Arabic names, mixed contact handles are fine
   bidi-wise without an override). */
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: right;
}
/* Align the consent validation message with the RTL checkbox label. */
.form-consent-error { margin-right: 28px; margin-left: 0; }

/* ---- Header/footer contact links (phone number, Telegram handle) ----
   Digits and the @handle read backwards under the RTL bidi algorithm when
   embedded directly in a dir="rtl" ancestor with no isolation (same failure
   mode as .rules-table a's domain label above, fixed the same way): "+971 56
   679 7475" renders as "7475 679 56 971+" and "@mayustup" as "mayustup@".
   Isolate these specific links from the surrounding RTL run and set an
   explicit LTR base direction so the number/handle read left-to-right while
   the rest of the header/footer stays untouched. */
html[dir="rtl"] .header-cta a.phone,
html[dir="rtl"] .footer-contacts a[href^="tel:"],
html[dir="rtl"] .footer-contacts a[href^="https://t.me/"] {
  direction: ltr;
  unicode-bidi: isolate;
}