/* ============================================================
   rtl.css — Arabic (RTL) overrides for all SupremeAxis pages.
   Loaded ONLY on /ar/ pages, after the page's main stylesheet.
   Works with both assets/css/studio.css and the per-page
   styles.css used by the 3D showcase pages (shared class names).
   ============================================================ */

/* Arabic font (Tajawal, loaded via Google Fonts in each ar page) */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Slightly relax letter-spacing rules that look wrong in Arabic */
[dir="rtl"] .eyebrow,
[dir="rtl"] .brand-name,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  letter-spacing: 0;
}

/* Keep the brand wordmark, phone numbers and emails left-to-right */
[dir="rtl"] .brand-name,
[dir="rtl"] .tour-step,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Text alignment */
[dir="rtl"] .hero-copy,
[dir="rtl"] .content-card,
[dir="rtl"] .customizer-body,
[dir="rtl"] .modal,
[dir="rtl"] .field label,
[dir="rtl"] .form-note,
[dir="rtl"] .foot-grid,
[dir="rtl"] .ci div {
  text-align: right;
}

/* Header: language switcher + CTA spacing (flex rows follow dir
   automatically, but explicit margins need flipping) */
[dir="rtl"] .header-cta { margin-left: 0; margin-right: auto; }

/* Language switcher pill (used on both EN and AR pages) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.lang-switch:hover { border-color: rgba(255, 255, 255, .6); }

/* Process list numbers / bullets on the right */
[dir="rtl"] ol.process { padding-right: 0; }
[dir="rtl"] .modal-specs li,
[dir="rtl"] .ci-list li { text-align: right; }

/* Customizer slides in from the LEFT on RTL pages (mirrors the
   default right-side placement); fall back gracefully if the
   base stylesheet positions it with `right` */
[dir="rtl"] .customizer { right: auto; left: 0; }
[dir="rtl"] .customizer-handle { transform: scaleX(-1); }

/* Tour HUD + hero hint: keep icons readable, flip padding */
[dir="rtl"] .tour-hud { direction: rtl; }

/* Forms: two-column grid keeps working; placeholder alignment */
[dir="rtl"] .quote-form input,
[dir="rtl"] .quote-form select,
[dir="rtl"] .quote-form textarea {
  text-align: right;
}
[dir="rtl"] .quote-form input[type="email"],
[dir="rtl"] .quote-form input[type="tel"] {
  text-align: left; /* LTR data stays readable */
}

/* Footer bottom row */
[dir="rtl"] .foot-bottom { direction: rtl; }