/* ============================================================
   Saqrion · Arabic (RTL) overrides
   Loaded AFTER styles.css and calculator.css on /ar/ pages.
   Keeps numbers, SKUs, and Latin brand fragments LTR.
   ============================================================ */

/* --- Body typography: Arabic web fonts --- */
html[lang="ar"] body,
html[lang="ar"] .nav,
html[lang="ar"] .footer,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .card__body,
html[lang="ar"] .section__lead,
html[lang="ar"] .section__note,
html[lang="ar"] .hero__sub,
html[lang="ar"] .calc-hint,
html[lang="ar"] .calc-disclaimer,
html[lang="ar"] .product-card__sub,
html[lang="ar"] .step__body,
html[lang="ar"] .market__why,
html[lang="ar"] .builtfor__body,
html[lang="ar"] .gridfree__list,
html[lang="ar"] .gridfree__list li,
html[lang="ar"] .spread__detail,
html[lang="ar"] .spread__lbl,
html[lang="ar"] .engagement__body,
html[lang="ar"] .engagement__tag,
html[lang="ar"] .report__lead,
html[lang="ar"] .report__toc,
html[lang="ar"] .report__toc li,
html[lang="ar"] .report__note,
html[lang="ar"] .report__cover-sub,
html[lang="ar"] .person__bio,
html[lang="ar"] .tier__best {
  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero__title,
html[lang="ar"] .section__title,
html[lang="ar"] .calc-hero__title,
html[lang="ar"] .product-card__title,
html[lang="ar"] .step__title,
html[lang="ar"] .tier__name,
html[lang="ar"] .market__name,
html[lang="ar"] .builtfor__name,
html[lang="ar"] .gridfree__heading,
html[lang="ar"] .spread__label,
html[lang="ar"] .engagement__title,
html[lang="ar"] .report__cover-title,
html[lang="ar"] .person__name,
html[lang="ar"] .breakdown-card__title {
  font-family: 'Reem Kufi', 'Cairo', 'Tajawal', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* The SAQRION wordmark stays Latin */
html[lang="ar"] .nav__wordmark,
html[lang="ar"] .quote-print__name {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.22em;
}

/* Arabic mark already styled via .hero__eyebrow-ar / .footer__ar / .brand-ar */

/* --- Text alignment flips --- */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .hero,
html[dir="rtl"] .hero__inner,
html[dir="rtl"] .container,
html[dir="rtl"] .section,
html[dir="rtl"] .calc-hero,
html[dir="rtl"] .calc-main {
  text-align: right;
}

html[dir="rtl"] .hero__title,
html[dir="rtl"] .hero__sub,
html[dir="rtl"] .hero__eyebrow,
html[dir="rtl"] .section__title,
html[dir="rtl"] .section__eyebrow,
html[dir="rtl"] .section__lead,
html[dir="rtl"] .section__note,
html[dir="rtl"] .calc-hero__title,
html[dir="rtl"] .calc-hero__sub,
html[dir="rtl"] .calc-label,
html[dir="rtl"] .calc-hint,
html[dir="rtl"] .product-card__sub,
html[dir="rtl"] .product-card__title,
html[dir="rtl"] .step__title,
html[dir="rtl"] .step__body,
html[dir="rtl"] .tier__best,
html[dir="rtl"] .market__name,
html[dir="rtl"] .market__why,
html[dir="rtl"] .builtfor__name,
html[dir="rtl"] .builtfor__body,
html[dir="rtl"] .gridfree__title,
html[dir="rtl"] .gridfree__heading,
html[dir="rtl"] .gridfree__list li,
html[dir="rtl"] .spread__label,
html[dir="rtl"] .spread__detail,
html[dir="rtl"] .engagement__title,
html[dir="rtl"] .engagement__body,
html[dir="rtl"] .report__lead,
html[dir="rtl"] .report__toc li,
html[dir="rtl"] .report__note,
html[dir="rtl"] .report__cover-title,
html[dir="rtl"] .report__cover-sub,
html[dir="rtl"] .person__bio,
html[dir="rtl"] .person__role {
  text-align: right;
}

html[dir="rtl"] .gridfree__list li {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] .gridfree__list--neg li::before,
html[dir="rtl"] .gridfree__list--pos li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .spread__badge {
  left: auto;
  right: 24px;
}

html[dir="rtl"] .engagement__tag {
  right: auto;
  left: 20px;
}

html[lang="ar"] .spread__val {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-family: 'Inter', sans-serif;
}

html[dir="rtl"] .report__toc li {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] .report__toc li::before {
  left: auto;
  right: 0;
}

/* Quote-print: keep tables flowing right-to-left, but keep number cells LTR */
html[dir="rtl"] .quote-table th,
html[dir="rtl"] .quote-table td {
  text-align: right;
}

/* --- Flip border/padding sides where directional --- */
html[dir="rtl"] .urgency {
  border-left: none;
  border-right: 3px solid #ff6600;
  border-radius: 8px 0 0 8px;
  padding-right: 20px;
  padding-left: 16px;
}

html[dir="rtl"] .bar-label {
  text-align: left;
  padding-right: 0;
  padding-left: 14px;
}

html[dir="rtl"] .bar-fill {
  padding-left: 0;
  padding-right: 10px;
}

html[dir="rtl"] .brand {
  left: auto;
  right: 36px;
}

html[dir="rtl"] .brand-ar {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .brand-back {
  left: auto;
  right: 36px;
}

html[dir="rtl"] .sn {
  right: auto;
  left: 36px;
}

html[dir="rtl"] .nav {
  /* deck.html footer hint */
  left: auto;
  right: 36px;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

html[dir="rtl"] th:first-child,
html[dir="rtl"] td:first-child {
  text-align: right;
}

/* --- Keep numbers / SKUs / English fragments LTR inside RTL flow --- */
html[lang="ar"] [dir="ltr"],
html[lang="ar"] .ltr-num,
html[lang="ar"] .nav__wordmark {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Calculator scope-list items (rendered in English by calculator.js — safe to leave LTR) */
html[lang="ar"] .scope-list li {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* --- Language switcher: pill style now defined globally in styles.css. Deck-specific positioning only. --- */
.lang-switcher--deck {
  position: fixed;
  top: 24px;
  right: 36px;
  z-index: 100;
  font-size: 11px;
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.14);
}
.lang-switcher--deck a {
  color: rgba(255, 255, 255, 0.55);
}
.lang-switcher--deck a:hover {
  color: rgba(255, 255, 255, 0.9);
}
.lang-switcher--deck a.active {
  color: #0a0a0f;
  background: #c9a961;
}

@media (max-width: 900px) {
  .lang-switcher--deck {
    top: 12px;
    right: 12px;
  }
}

/* ============================================================
   RTL deltas for new sections: .bars, .chain, .services
   ============================================================ */

/* --- Arabic typography opt-in for new classes --- */
html[lang="ar"] .bars__name-main,
html[lang="ar"] .bars__name-sub,
html[lang="ar"] .bars__head-path,
html[lang="ar"] .bars__head-row,
html[lang="ar"] .bars__closing,
html[lang="ar"] .bars__closing-tag,
html[lang="ar"] .chain__label,
html[lang="ar"] .chain__tag,
html[lang="ar"] .chain__sub,
html[lang="ar"] .chain-specs__tag,
html[lang="ar"] .chain-specs__body,
html[lang="ar"] .chain__closing,
html[lang="ar"] .services__tag,
html[lang="ar"] .services__body {
  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[lang="ar"] .services__title,
html[lang="ar"] .chain-specs__stat {
  font-family: 'Reem Kufi', 'Cairo', 'Tajawal', 'Inter', sans-serif;
  font-weight: 600;
}

/* Keep numeric amounts LTR */
html[lang="ar"] .bars__amount,
html[lang="ar"] .chain__stat {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* --- Bars: flip caveat text alignment --- */
html[dir="rtl"] .bars__caveat {
  text-align: left; /* flips from EN's text-align:right */
}

html[dir="rtl"] .bars__name,
html[dir="rtl"] .bars__name-main,
html[dir="rtl"] .bars__name-sub,
html[dir="rtl"] .bars__head-path,
html[dir="rtl"] .bars__closing,
html[dir="rtl"] .bars__closing-tag {
  text-align: right;
}

/* Bars head row uses justify-content:space-between — flips naturally in RTL.
   No override needed, but ensure ceiling pill stays readable. */
html[lang="ar"] .bars__head-ceiling {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The bar fills are absolutely positioned with left:N% — in RTL we want them
   to grow from the right edge. Mirror by swapping left -> right. */
html[dir="rtl"] .bars__bar-min,
html[dir="rtl"] .bars__bar-max,
html[dir="rtl"] .bars__tick {
  /* Bars are layout (left-anchored) data viz — keep them LTR so widths read left-to-right
     and the gold bar still visually represents "more revenue". */
  direction: ltr;
}
html[dir="rtl"] .bars__bar {
  direction: ltr;
}

/* --- Chain: flip arrow direction --- */
/* EN arrow head sits on the right end (points right). In RTL we want it on the
   left end (points left), since the flow reads right-to-left. */
html[dir="rtl"] .chain__arrow::after {
  right: auto;
  left: -45%;
  border-left: none;
  border-right: 8px solid rgba(90, 82, 70, 0.5);
}
html[dir="rtl"] .chain--fast .chain__arrow::after {
  border-right-color: var(--gold);
}

html[dir="rtl"] .chain__head,
html[dir="rtl"] .chain__label,
html[dir="rtl"] .chain__stat,
html[dir="rtl"] .chain__tag,
html[dir="rtl"] .chain__sub,
html[dir="rtl"] .chain-specs__cell,
html[dir="rtl"] .chain-specs__tag,
html[dir="rtl"] .chain-specs__stat,
html[dir="rtl"] .chain-specs__body,
html[dir="rtl"] .chain__closing {
  text-align: right;
}

/* --- Services: flip card text alignment, icon stays left/start --- */
html[dir="rtl"] .services__tag,
html[dir="rtl"] .services__title,
html[dir="rtl"] .services__body {
  text-align: right;
}