/* =============================================
   AquaShelter i18n — RTL & Language Toggle CSS
   ============================================= */

/* Arabic hero title — smaller font so each line fits without wrapping */
html[lang="ar"] .hero-title {
  font-size: 30px !important;
}
@media (min-width: 760px) {
  html[lang="ar"] .hero-title {
    font-size: 40px !important;
  }
}
@media (min-width: 1200px) {
  html[lang="ar"] .hero-title {
    font-size: 46px !important;
  }
}

/* Hero images mirror in Arabic */
html[dir="rtl"] .hero-slide {
  transform: scaleX(-1) scale(1);
}
html[dir="rtl"] .hero-slide.is-active {
  transform: scaleX(-1) scale(1);
}

/* --- Language toggle (nav) --- */
.nav-lang-toggle {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #44515F;
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}
.nav-lang-toggle:hover { background: var(--soft, #F6F8FA); }

/* =============================================
   Arabic Typography
   ============================================= */
html[lang="ar"] body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  line-height: 1.8;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: 'Cairo', Georgia, serif;
  line-height: 1.4;
}
html[lang="ar"] .eyebrow {
  letter-spacing: 0.04em;
}

/* =============================================
   RTL — General text alignment
   ============================================= */
html[dir="rtl"] body { text-align: right; }

/* Nav links reverse */
html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
html[dir="rtl"] .button-row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* Mobile menu */
html[dir="rtl"] .mobile-menu {
  direction: rtl;
  text-align: right;
}

/* =============================================
   RTL — JOURNEY SECTION
   صورة يسار + نص يمين → نص يسار + صورة يمين
   ============================================= */
html[dir="rtl"] .journey-inner {
  direction: rtl;
}
/* الصورة تيجي تاني (يمين) والنص أول (يسار) */
html[dir="rtl"] .journey-image { order: 2; }
html[dir="rtl"] .journey-content { order: 1; }
html[dir="rtl"] .journey-content { text-align: right; }

/* =============================================
   RTL — WORKFLOW SECTION
   صورة يسار + steps يمين → steps يسار + صورة يمين
   ============================================= */
html[dir="rtl"] .workflow-layout {
  direction: rtl;
}
html[dir="rtl"] .workflow-visual { order: 2; }
html[dir="rtl"] .workflow-steps { order: 1; }

/* workflow items */
html[dir="rtl"] .workflow-item {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .workflow-item-marker {
  margin-left: 0;
  margin-right: 0;
}

/* =============================================
   RTL — SAFETY SECTION
   نص يسار + card يمين → card يسار + نص يمين
   ============================================= */
html[dir="rtl"] .safety-card {
  direction: rtl;
}
html[dir="rtl"] .safety-copy { order: 2; text-align: right; }
html[dir="rtl"] .safety-sheet { order: 1; }

/* safety fields alignment */
html[dir="rtl"] .safety-row-inline,
html[dir="rtl"] .safety-sheet-head,
html[dir="rtl"] .safety-sheet-status,
html[dir="rtl"] .safety-sheet-reason {
  flex-direction: row-reverse;
}
html[dir="rtl"] .safety-sheet-context { text-align: right; }
html[dir="rtl"] .safety-context-list { justify-content: flex-end; }
html[dir="rtl"] .safety-safe-step { text-align: right; }

/* =============================================
   RTL — SHOP VALUE SECTION
   نص يسار + benefits يمين → benefits يسار + نص يمين
   ============================================= */
html[dir="rtl"] .shop-value-layout {
  direction: rtl;
}
html[dir="rtl"] .shop-value-copy { text-align: right; }

/* shop trust line border flip */
html[dir="rtl"] .shop-trust-line {
  border-left: none;
  border-right: 4px solid #00A8B8;
  padding-left: 0;
  padding-right: 18px;
}

/* shop benefit rows */
html[dir="rtl"] .shop-benefit-row {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .shop-benefit-marker {
  margin-right: 0;
}

/* =============================================
   RTL — PROBLEM CARDS
   ============================================= */
html[dir="rtl"] .problem-card-overlay { text-align: right; }
html[dir="rtl"] .problem-card-num {
  /* رقم الكارد يفضل يسار في RTL */
  left: auto;
  right: 18px;
}

/* =============================================
   RTL — FOOTER
   ============================================= */
html[dir="rtl"] .footer-grid { direction: rtl; text-align: right; }
html[dir="rtl"] .footer-col { text-align: right; }
html[dir="rtl"] .footer-bottom-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .footer-bottom-links {
  flex-direction: row-reverse;
}
html[dir="rtl"] .footer-top { text-align: right; }

/* =============================================
   RTL — LISTS
   ============================================= */
html[dir="rtl"] ul {
  padding-right: 20px;
  padding-left: 0;
  text-align: right;
}
html[dir="rtl"] .safety-checks {
  padding-right: 20px;
  padding-left: 0;
}

/* =============================================
   LTR isolation — أرقام وأسعار تفضل LTR
   ============================================= */
html[dir="rtl"] .hero-stat strong,
html[dir="rtl"] .price,
html[dir="rtl"] .pricing-card__price-amount {
  direction: ltr;
  unicode-bidi: isolate;
}