/* ==========================================================================
   Bono Hair — Arabic (RTL) Layout Adaptation
   Fixes hero background gradient, text alignment, and directional overrides
   for right-to-left languages
   ========================================================================== */

/* 1. Hero section: mirror the white gradient overlay from left→right to right→left
      so that dark Arabic text sits on a white-backed area instead of the busy factory photo */
html[dir="rtl"] .s1-hero,
html[lang="ar"] .s1-hero {
  text-align: right;
}

/* Mirror the hero background image horizontally for RTL */
html[dir="rtl"] .s1-hero-bg,
html[dir="rtl"] .s1-hero-bg-ph,
html[lang="ar"] .s1-hero-bg,
html[lang="ar"] .s1-hero-bg-ph {
  transform: scaleX(-1);
}

html[dir="rtl"] .s1-hero::after,
html[lang="ar"] .s1-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to left,
    #ffffff 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 255, 255, 0.7) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
}

html[dir="rtl"] .s1-hero-inner,
html[lang="ar"] .s1-hero-inner {
  align-items: flex-start !important;
  text-align: right !important;
}

html[dir="rtl"] .s1-hero h1,
html[dir="rtl"] .s1-hero p,
html[lang="ar"] .s1-hero h1,
html[lang="ar"] .s1-hero p {
  text-align: right !important;
  direction: rtl !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="rtl"] .s1-btn,
html[lang="ar"] .s1-btn {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* 2. Buttons: keep center alignment in RTL */
html[dir="rtl"] .btn,
html[lang="ar"] .btn {
  direction: rtl;
}

/* 3. Section headings */
html[dir="rtl"] .head,
html[lang="ar"] .head {
  text-align: center;
}

html[dir="rtl"] .head h2,
html[dir="rtl"] .head p,
html[lang="ar"] .head h2,
html[lang="ar"] .head p {
  direction: rtl;
}

/* 4. S4 card text direction */
html[dir="rtl"] .s4-main-copy,
html[dir="rtl"] .s4-main-desc,
html[dir="rtl"] .s4-side-copy,
html[lang="ar"] .s4-main-copy,
html[lang="ar"] .s4-main-desc,
html[lang="ar"] .s4-side-copy {
  direction: rtl;
  text-align: right;
}

/* 5. Footer and form */
html[dir="rtl"] .footer-form,
html[lang="ar"] .footer-form {
  direction: rtl;
}

html[dir="rtl"] .footer-form input,
html[dir="rtl"] .footer-form select,
html[dir="rtl"] .footer-form textarea,
html[lang="ar"] .footer-form input,
html[lang="ar"] .footer-form select,
html[lang="ar"] .footer-form textarea {
  text-align: right;
}

/* 6. Feature strip text */
html[dir="rtl"] .s1-feature span,
html[lang="ar"] .s1-feature span {
  direction: rtl;
}

/* 7. Mobile overrides */
@media (max-width: 767px) {
  html[dir="rtl"] .s1-hero-inner,
  html[lang="ar"] .s1-hero-inner {
    align-items: stretch !important;
  }

  html[dir="rtl"] .s1-hero h1,
  html[dir="rtl"] .s1-hero p,
  html[lang="ar"] .s1-hero h1,
  html[lang="ar"] .s1-hero p {
    text-align: right !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html[dir="rtl"] .s1-btn,
  html[lang="ar"] .s1-btn {
    text-align: center !important;
    margin: 0 auto !important;
  }
}