/* ============================================================
   RTL.CSS — Karim Painting v2
   All right-to-left overrides for Tunisian Arabic (darija)
   Applied when body.rtl is present (set by i18n.js)
   ============================================================ */

/* Arabic system font fallback (Poppins/Inter have no Arabic glyphs) */
body.rtl {
  font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
}

/* ----------------------------------------
   NAVBAR
   ---------------------------------------- */
body.rtl .nav-container {
  flex-direction: row-reverse;
}

body.rtl .nav-menu {
  flex-direction: row-reverse;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body.rtl .nav-logo {
  flex-direction: row-reverse;
}

body.rtl .nav-logo-text {
  text-align: right;
}

/* Dropdown opens from right */
body.rtl .dropdown-menu {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

body.rtl .nav-dropdown:hover .dropdown-menu {
  transform: translateX(50%) translateY(0);
}

/* Language switcher flips to left side on desktop */
body.rtl .lang-dropdown {
  right: auto;
  left: 0;
}

body.rtl .lang-option {
  border-inline-start: 3px solid transparent;
  text-align: right;
}

body.rtl .lang-option.active {
  border-inline-start-color: var(--color-teal);
}

/* ----------------------------------------
   HERO
   ---------------------------------------- */
body.rtl .hero-content {
  direction: rtl;
}

/* ----------------------------------------
   BENEFITS
   ---------------------------------------- */
body.rtl .benefit-card {
  text-align: right;
}

body.rtl .benefit-icon {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ----------------------------------------
   STATS — stays centered, no change needed
   ---------------------------------------- */

/* ----------------------------------------
   PROCESS STEPS
   ---------------------------------------- */
body.rtl .process-step {
  text-align: right;
}

body.rtl .step-number {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ----------------------------------------
   SPLIT SECTIONS
   ---------------------------------------- */
/* .split-section.alt uses direction:rtl which already handles RTL reversal.
   In RTL mode, we need to ensure .alt doesn't double-flip. */
body.rtl .split-section.alt {
  direction: ltr;
}

body.rtl .split-section {
  direction: rtl;
}

body.rtl .split-section > * {
  direction: rtl;
}

body.rtl .split-content {
  text-align: right;
}

/* ----------------------------------------
   SERVICE CARDS
   ---------------------------------------- */
body.rtl .service-card-body {
  text-align: right;
}

body.rtl .service-card-link {
  flex-direction: row-reverse;
}

body.rtl .service-card-icon {
  right: auto;
  left: 1rem;
}

/* ----------------------------------------
   TESTIMONIALS
   ---------------------------------------- */
body.rtl .testimonial-card {
  text-align: right;
}

body.rtl .testimonial-author {
  flex-direction: row-reverse;
}

body.rtl .author-info {
  text-align: right;
}

/* ----------------------------------------
   CTA BANNER
   ---------------------------------------- */
body.rtl .cta-banner {
  direction: rtl;
}

/* ----------------------------------------
   CONTACT STRIP
   ---------------------------------------- */
body.rtl .contact-strip-item {
  direction: rtl;
}

/* ----------------------------------------
   FOOTER
   ---------------------------------------- */
body.rtl .footer {
  direction: rtl;
}

body.rtl .footer-grid {
  direction: rtl;
}

body.rtl .footer-brand {
  text-align: right;
}

body.rtl .footer-social {
  justify-content: flex-end;
}

body.rtl .footer-col h4 {
  text-align: right;
}

body.rtl .footer-col ul li a {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

body.rtl .footer-contact-item {
  flex-direction: row-reverse;
  text-align: right;
}

body.rtl .footer-bottom {
  flex-direction: row-reverse;
}

/* ----------------------------------------
   FLOAT BUTTONS — swap to left side
   ---------------------------------------- */
body.rtl .float-whatsapp {
  right: auto;
  left: 1.5rem;
}

body.rtl .float-cta {
  right: auto;
  left: 1.5rem;
}

/* ----------------------------------------
   TOAST
   ---------------------------------------- */
body.rtl .toast {
  direction: rtl;
  border-inline-start: none;
  border-inline-end: 4px solid var(--color-orange);
}

body.rtl .toast-header {
  flex-direction: row-reverse;
}

/* ----------------------------------------
   FORMS
   ---------------------------------------- */
body.rtl .contact-form-wrapper {
  direction: rtl;
}

body.rtl .form-group label {
  text-align: right;
}

body.rtl .form-group select {
  background-position: left 1rem center;
  padding-right: 1rem;
  padding-left: 2.5rem;
  text-align: right;
}

body.rtl .contact-option-card {
  flex-direction: row-reverse;
}

body.rtl .contact-option-card:hover {
  transform: translateX(-5px);
}

body.rtl .contact-option-info {
  text-align: right;
}

/* ----------------------------------------
   ABOUT PAGE
   ---------------------------------------- */
body.rtl .value-card {
  text-align: right;
}

body.rtl .value-icon {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ----------------------------------------
   PORTFOLIO
   ---------------------------------------- */
body.rtl .portfolio-filters {
  direction: rtl;
}

/* ----------------------------------------
   FAQ / INFO CARDS
   ---------------------------------------- */
body.rtl .faq-card {
  border-inline-start: none;
  border-inline-end: 4px solid var(--color-teal);
  text-align: right;
}

body.rtl .info-card {
  text-align: right;
}

/* ----------------------------------------
   SECTION HEADERS
   ---------------------------------------- */
body.rtl .section-header {
  direction: rtl;
}

body.rtl .section-header h2::after {
  margin: 0.75rem auto 0;
}

/* ----------------------------------------
   HERO ACCENT BAR & SPLASH
   ---------------------------------------- */
body.rtl .hero-accent-bar {
  direction: ltr; /* decorative, stays LTR */
}

body.rtl .splash-overlay {
  direction: rtl;
}

body.rtl .splash-accent {
  direction: ltr;
}

/* ----------------------------------------
   PROCESS GRID
   ---------------------------------------- */
body.rtl .process-grid {
  direction: rtl;
}

body.rtl .process-step {
  direction: rtl;
}