/* =========================
   El Baraka Water — RTL fixes
   Scope: uniquement pages AR (dir="rtl")
   ========================= */

/* 1) Typo arabe (optionnel mais pro) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

html[dir="rtl"], html[dir="rtl"] body {
  direction: rtl;
  font-family: "Tajawal", "Segoe UI", sans-serif;
}

/* 2) Alignements texte par défaut */
html[dir="rtl"] body {
  text-align: right;
}
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-intro,
html[dir="rtl"] .hero,
html[dir="rtl"] .hero-inner {
  text-align: center; /* tes sections hero/titres sont plus belles centrées */
}

/* 3) Navbar desktop : rien de dangereux, juste ordre RTL naturel */
html[dir="rtl"] .nav-links {
  direction: rtl;
}

/* 4) Menu mobile off-canvas : slide depuis la gauche (RTL) */
html[dir="rtl"] .burger-btn {
  right: auto !important;
  left: 20px !important;
}
html[dir="rtl"] .offcanvas-menu {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-100%) !important;
}
html[dir="rtl"] .offcanvas-menu.active {
  transform: translateX(0) !important;
}
html[dir="rtl"] .offcanvas-menu .close-btn {
  right: auto !important;
  left: 25px !important;
}

/* 5) Inverser les sections 2 colonnes (flex) qui ont été codées LTR */
html[dir="rtl"] .problem-grid,
html[dir="rtl"] .skin-grid,
html[dir="rtl"] .filter-grid,
html[dir="rtl"] .why-baraka .container,
html[dir="rtl"] .contact-grid,
html[dir="rtl"] .product-container {
  flex-direction: row-reverse;
}

/* 6) Corriger des marges LTR hardcodées */
html[dir="rtl"] .product-image img {
  margin-right: 0 !important;
  margin-left: 100px !important; /* équivalent RTL de ton style actuel */
}
html[dir="rtl"] .skin-image img {
  margin-left: 0 !important;
  margin-right: 40px !important;
}
html[dir="rtl"] .skin-details {
  margin-right: 0 !important;
  margin-left: 40px !important;
}
html[dir="rtl"] .problem-accordions {
  margin-left: 0 !important;
  margin-right: 20px !important;
}
html[dir="rtl"] .problem-image {
  justify-content: flex-start !important; /* au lieu de flex-end */
}

/* 7) Cartes/accordéons: forcer l'align RTL et éviter text-align:left */
html[dir="rtl"] .feature-card,
html[dir="rtl"] .faq-grid,
html[dir="rtl"] .faq-item,
html[dir="rtl"] .acc-header,
html[dir="rtl"] .acc-body,
html[dir="rtl"] .install-tips ul,
html[dir="rtl"] .install-tips ul li {
  text-align: right !important;
}

/* 8) Installer — astuce "💡" positionnée à gauche en LTR : on la passe à droite */
html[dir="rtl"] .install-tips ul li {
  padding-left: 15px !important;
  padding-right: 45px !important;
}
html[dir="rtl"] .install-tips ul li::before {
  left: auto !important;
  right: 15px !important;
}

/* 9) Timeline (Notre histoire) : border-left -> border-right + points */
html[dir="rtl"] .timeline {
  border-left: 0 !important;
  border-right: 3px solid #1A3E5F !important;
  padding-left: 0 !important;
  padding-right: 30px !important;
  text-align: right !important;
}
html[dir="rtl"] .timeline-item::before {
  left: auto !important;
  right: -42px !important;
}

/* 10) Produit (EBP) : les "✓" et padding-left doivent basculer RTL */
html[dir="rtl"] .ebp-pack-points li {
  padding-left: 0 !important;
  padding-right: 24px !important;
}
html[dir="rtl"] .ebp-pack-points li::before {
  left: auto !important;
  right: 0 !important;
}
html[dir="rtl"] .ebp-pack .ebp-badge {
  right: auto !important;
  left: .6rem !important;
}

/* 11) Footer desktop (grille) : align à droite */
html[dir="rtl"] .footer-grid {
  text-align: right !important;
}
html[dir="rtl"] .footer-socials {
  justify-content: flex-end !important;
}
/* ===== Fix RTL (AR only) ===== */
html[dir="rtl"] .burger-btn{
  right: auto !important;
  left: 20px !important;
}

/* Offcanvas: qu’il “sort” depuis la gauche (logique en arabe) */
html[dir="rtl"] .offcanvas-menu{
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
html[dir="rtl"] .offcanvas-menu.active{
  transform: translateX(0) !important;
}

/* Bouton X à gauche aussi */
html[dir="rtl"] .offcanvas-menu .close-btn{
  right: auto !important;
  left: 25px !important;
}