/* =============================================================
   COSMOPRO.AI — RTL Stylesheet (Arabic)
   Applied when html[lang="ar"] is set
   ============================================================= */

html[lang="ar"] {
  direction: rtl;
  text-align: right;
}

/* --- Typography override for Arabic --- */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] label,
html[lang="ar"] button:not(.nav__lang a),
html[lang="ar"] input,
html[lang="ar"] textarea {
  font-family: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  line-height: 1.85; /* Arabic needs more leading */
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5 {
  font-family: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  letter-spacing: 0; /* Arabic does not use letter-spacing */
}

/* --- Navigation mirror --- */
html[lang="ar"] .nav__inner {
  flex-direction: row-reverse;
}

html[lang="ar"] .nav__links {
  flex-direction: row-reverse;
}

html[lang="ar"] .nav__actions {
  flex-direction: row-reverse;
}

html[lang="ar"] .nav__lang {
  flex-direction: row-reverse;
}

/* --- Hero eyebrow line --- */
html[lang="ar"] .hero__eyebrow {
  flex-direction: row-reverse;
}

html[lang="ar"] .hero__eyebrow::before {
  content: none;
}

html[lang="ar"] .hero__eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-gold);
}

/* --- Breadcrumb --- */
html[lang="ar"] .breadcrumb {
  flex-direction: row-reverse;
}

/* --- Section header --- */
html[lang="ar"] .section-header {
  margin-right: 0;
  margin-left: auto;
}

html[lang="ar"] .section-header--center {
  margin-right: auto;
  margin-left: auto;
}

/* --- Stat bar --- */
html[lang="ar"] .stat-bar__grid {
  direction: rtl;
}

html[lang="ar"] .stat-item {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.08);
}

html[lang="ar"] .stat-item:last-child {
  border-left: none;
}

/* --- Layer cards --- */
html[lang="ar"] .layer-card::before {
  transform-origin: right;
}

/* --- Two column layout --- */
html[lang="ar"] .two-col {
  direction: rtl;
}

html[lang="ar"] .two-col > * {
  direction: rtl;
}

html[lang="ar"] .two-col--reverse {
  direction: ltr;
}

/* --- Buttons --- */
html[lang="ar"] .btn {
  flex-direction: row-reverse;
}

html[lang="ar"] .btn__arrow {
  transform: scaleX(-1);
}

html[lang="ar"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(-3px);
}

/* --- Layer card link arrow --- */
html[lang="ar"] .layer-card__link {
  flex-direction: row-reverse;
}

/* --- Pledge box --- */
html[lang="ar"] .pledge-box {
  border-left: 1px solid var(--color-border);
  border-right: 4px solid var(--color-gold);
}

/* --- FAQ --- */
html[lang="ar"] .faq-question {
  text-align: right;
  flex-direction: row-reverse;
}

/* --- Card icon --- */
html[lang="ar"] .card__icon {
  margin-right: 0;
  margin-left: 0;
}

/* --- Footer --- */
html[lang="ar"] .footer__grid {
  direction: rtl;
}

html[lang="ar"] .footer__bottom {
  flex-direction: row-reverse;
}

html[lang="ar"] .footer__links {
  align-items: flex-end;
}

/* --- Form --- */
html[lang="ar"] .form-input,
html[lang="ar"] .form-textarea,
html[lang="ar"] .form-select {
  text-align: right;
}

/* --- Hero actions --- */
html[lang="ar"] .hero__actions {
  flex-direction: row-reverse;
}

html[lang="ar"] .cta-section__actions {
  flex-direction: row-reverse;
}

/* --- Page hero layer indicator --- */
html[lang="ar"] .page-hero__layer {
  flex-direction: row-reverse;
}

/* --- Mobile menu (RTL) --- */
@media (max-width: 768px) {
  html[lang="ar"] .nav__links.open {
    align-items: flex-end;
  }

  html[lang="ar"] .hero__actions {
    flex-direction: column;
  }
}