/**
 * Capital School UAE — RTL (Arabic) Stylesheet
 * Loaded automatically by functions.php when Polylang detects ar language.
 * Uses [dir="rtl"] selectors so specificity is always correct.
 *
 * Approach:
 *  1. Global direction + Arabic font
 *  2. Component-by-component overrides in source order
 */

/* ── Google Fonts: Noto Sans Arabic ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ── 1. GLOBAL ──────────────────────────────────────────────────── */
[dir="rtl"],
[dir="rtl"] body {
  direction: rtl;
  font-family: 'Noto Sans Arabic', 'Cairo', sans-serif;
}

/* Headings inherit Arabic font */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: 'Noto Sans Arabic', 'Cairo', sans-serif;
  letter-spacing: 0; /* Arabic doesn't use letter-spacing */
}

/* Buttons */
[dir="rtl"] .cs-btn {
  font-family: 'Noto Sans Arabic', 'Cairo', sans-serif;
  letter-spacing: 0;
}

/* Badges */
[dir="rtl"] .cs-badge {
  letter-spacing: 0;
}

/* ── 2. RIBBON ──────────────────────────────────────────────────── */
[dir="rtl"] .cs-ribbon {
  direction: rtl;
  letter-spacing: 0;
}
[dir="rtl"] .cs-ribbon__khda {
  margin-right: 0;
  margin-left: 0.5rem;
}
[dir="rtl"] .cs-ribbon__divider {
  margin: 0 0.5rem;
}
/* Close button goes to the left in RTL */
[dir="rtl"] #cs-ribbon-close {
  margin-right: auto;
  margin-left: 0;
  order: -1;
}

/* ── 3. NAVIGATION ──────────────────────────────────────────────── */
[dir="rtl"] .cs-nav {
  direction: rtl;
}
/* Nav apply button gains right margin to match LTR left margin */
[dir="rtl"] .cs-nav__apply {
  margin-right: 0.75rem;
  margin-left: 0;
}

/* Desktop dropdown: open on the right side of the parent */
[dir="rtl"] .cs-nav__links .sub-menu {
  left: auto;
  right: 0;
}

/* Language switcher — keep pills readable */
[dir="rtl"] .cs-lang-switcher {
  direction: ltr; /* keep EN/AR labels reading correctly */
}

/* ── 4. MOBILE MENU PANEL ───────────────────────────────────────── */
/* Panel slides from the RIGHT in RTL */
[dir="rtl"] .cs-mobile-menu__panel {
  margin-left: auto;
  margin-right: 0;
}
/* Close button moves to left */
[dir="rtl"] .cs-mobile-menu__close {
  align-self: flex-start;
}
/* Mobile nav links: right-aligned */
[dir="rtl"] .cs-mobile-menu ul li a {
  text-align: right;
}
/* Submenu expand indicator: left side in RTL */
[dir="rtl"] .cs-mobile-menu .menu-item-has-children > a {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
}
[dir="rtl"] .cs-mobile-menu .menu-item-has-children > a::after {
  margin-left: 0;
  margin-right: auto;
  order: -1;
}
/* Submenu indent: right side */
[dir="rtl"] .cs-mobile-menu .menu-item-has-children.is-open > .sub-menu {
  padding: 0 1rem 0.5rem 0;
  margin: 0.25rem 0.5rem 0.25rem 0;
  border-left: none;
  border-right: 3px solid #d4a843;
}
/* Action row at bottom */
[dir="rtl"] .cs-mobile-menu__panel > div[style*="display:flex"] {
  flex-direction: row-reverse;
}

/* ── 5. HERO ────────────────────────────────────────────────────── */
[dir="rtl"] .cs-hero__container {
  text-align: right;
}
[dir="rtl"] .cs-hero__badges {
  justify-content: flex-start; /* visually starts from right in RTL */
}
[dir="rtl"] .cs-hero__ctas {
  justify-content: flex-start;
}
/* Arrow icon inside buttons: flip */
[dir="rtl"] .cs-hero__ctas .cs-btn svg {
  transform: scaleX(-1);
}
[dir="rtl"] .cs-hero__whatsapp {
  justify-content: flex-start;
}
[dir="rtl"] .cs-hero__social-proof {
  justify-content: flex-start;
}
[dir="rtl"] .cs-hero__social-proof__divider {
  display: inline; /* keep separators visible in RTL */
}

/* ── 6. PAGE HERO / BREADCRUMB ──────────────────────────────────── */
[dir="rtl"] .cs-page-hero__container {
  text-align: right;
}
[dir="rtl"] .cs-breadcrumb ol {
  direction: rtl;
  justify-content: flex-start;
}
/* Flip the chevron arrow */
[dir="rtl"] .cs-breadcrumb__sep svg {
  transform: scaleX(-1);
}

/* ── 7. SECTION HEADS ───────────────────────────────────────────── */
[dir="rtl"] .cs-section-head {
  text-align: right;
}
[dir="rtl"] .cs-eyebrow {
  display: block;
  text-align: right;
}

/* ── 8. STATS BAR ───────────────────────────────────────────────── */
[dir="rtl"] .cs-stat {
  text-align: center; /* stats are centred — no change */
}

/* ── 9. CARDS ───────────────────────────────────────────────────── */
[dir="rtl"] .cs-card {
  text-align: right;
}

/* ── 10. STEPS ──────────────────────────────────────────────────── */
[dir="rtl"] .cs-step {
  text-align: right;
}

/* ── 11. ESAAD BANNER ───────────────────────────────────────────── */
[dir="rtl"] .cs-esaad-banner {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── 12. TESTIMONIALS / BLOCKQUOTES ────────────────────────────── */
[dir="rtl"] blockquote {
  text-align: right;
  direction: rtl;
}
/* Flip decorative left-border to right-border */
[dir="rtl"] blockquote[style*="border-left"] {
  border-left: none !important;
  border-right: 4px solid #bd9a5f !important;
  border-radius: 0.75rem 0 0 0.75rem !important;
  padding-left: 1rem !important;
  padding-right: 1.5rem !important;
}
[dir="rtl"] cite {
  display: block;
  text-align: right;
}

/* ── 13. ENQUIRY FORM ───────────────────────────────────────────── */
[dir="rtl"] .cs-enquiry-form-wrap {
  direction: rtl;
}
[dir="rtl"] .cs-form__group {
  text-align: right;
}
[dir="rtl"] .cs-form__group label {
  text-align: right;
}
[dir="rtl"] .cs-form__group input,
[dir="rtl"] .cs-form__group textarea {
  text-align: right;
  direction: rtl;
}
/* Select: move custom arrow to left side */
[dir="rtl"] .cs-form__group select {
  text-align: right;
  direction: rtl;
  background-position: left 1rem center;
  padding-right: 1rem;
  padding-left: 2.5rem;
}
/* Consent checkbox row */
[dir="rtl"] .cs-form__consent label {
  flex-direction: row-reverse;
  text-align: right;
}
/* Error / success */
[dir="rtl"] .cs-form__error,
[dir="rtl"] .cs-form__success {
  text-align: center;
  direction: rtl;
}
/* Submit button: keep arrow icon on left in RTL */
[dir="rtl"] .cs-form__submit {
  flex-direction: row-reverse;
}
[dir="rtl"] .cs-form__submit svg {
  transform: scaleX(-1);
}

/* ── 14. CONTACT PAGE ───────────────────────────────────────────── */
[dir="rtl"] .cs-contact-item {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .cs-contact-item__text {
  text-align: right;
}

/* ── 15. COMPARISON TABLE ───────────────────────────────────────── */
[dir="rtl"] .cs-compare {
  direction: rtl;
}
[dir="rtl"] .cs-compare th,
[dir="rtl"] .cs-compare td {
  text-align: right;
}
/* Price columns were right-aligned in LTR → left-aligned in RTL */
[dir="rtl"] .cs-compare th[style*="text-align:right"],
[dir="rtl"] .cs-compare td[style*="text-align:right"] {
  text-align: left !important;
}

/* ── 16. FEE CALCULATOR ─────────────────────────────────────────── */
[dir="rtl"] #cs-fee-calculator-root {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] #cs-fee-calculator-root > div > div:first-child {
  flex-direction: row-reverse;
}
[dir="rtl"] #cs-fee-calculator-root label {
  flex-direction: row-reverse;
  gap: 0.5rem;
}

/* ── 17. LIST ITEMS WITH ICONS ──────────────────────────────────── */
/* Checklist items: icon should be on right, text on left (visually) */
[dir="rtl"] li[style*="display:flex"][style*="gap"] {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .cs-footer__col ul li[style*="display:flex"] {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── 18. KHDA CALLOUT ───────────────────────────────────────────── */
[dir="rtl"] .cs-khda-callout > div {
  flex-direction: row-reverse;
}
[dir="rtl"] .cs-khda-callout blockquote,
[dir="rtl"] .cs-khda-callout cite,
[dir="rtl"] .cs-khda-callout p {
  text-align: right;
}
[dir="rtl"] .cs-khda-callout div[style*="display:flex"] {
  justify-content: flex-start;
}

/* ── 19. FOOTER ─────────────────────────────────────────────────── */
[dir="rtl"] .cs-footer__grid {
  direction: rtl;
}
[dir="rtl"] .cs-footer__brand {
  text-align: right;
}
/* Social icons row */
[dir="rtl"] .cs-footer__brand > div[style*="display:flex"] {
  justify-content: flex-end;
}
[dir="rtl"] .cs-footer__col {
  text-align: right;
}
[dir="rtl"] .cs-footer__col ul {
  text-align: right;
}
[dir="rtl"] .cs-footer__bottom {
  flex-direction: row-reverse;
}
[dir="rtl"] .cs-footer__bottom p {
  text-align: right;
}

/* ── 20. WHATSAPP FAB ───────────────────────────────────────────── */
/* Move FAB to left side in RTL */
[dir="rtl"] .cs-whatsapp-fab {
  right: auto;
  left: 2rem;
}
[dir="rtl"] .cs-whatsapp-fab--lifted {
  right: auto;
  left: 2rem;
  bottom: calc(56px + 1rem);
}

/* ── 21. STICKY CTA BAR ─────────────────────────────────────────── */
/* Bar stays at bottom — just reverse button order visually */
[dir="rtl"] .cs-sticky-cta {
  flex-direction: row-reverse;
}

/* ── 22. OPEN DAY / FEES / THANK YOU PAGE CARDS ────────────────── */
[dir="rtl"] .cs-card[style*="display:flex"],
[dir="rtl"] div[style*="display:flex"][style*="align-items:center"][style*="gap"] {
  /* Don't force-reverse all flex — too broad. Handled per component above. */
}

/* ── 23. INLINE GRID LAYOUTS ────────────────────────────────────── */
/* Payment plan grid, stats grid etc. — text alignment only */
[dir="rtl"] div[style*="display:grid"] {
  direction: rtl;
}

/* ── 24. SCARCITY STRIP ─────────────────────────────────────────── */
[dir="rtl"] div[style*="background:#fff5e6"] {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── 25. PAGE SECTION NAV PILLS ─────────────────────────────────── */
[dir="rtl"] .cs-page-nav {
  direction: rtl;
}
[dir="rtl"] .cs-page-nav > div > div {
  flex-direction: row-reverse;
}

/* ── 26. BUTTON ARROW ICONS (global) ────────────────────────────── */
/* Flip SVG arrows inside .cs-btn but NOT icons (WA, phone, etc.) */
[dir="rtl"] .cs-btn > svg[viewBox="0 0 24 24"]:last-child {
  transform: scaleX(-1);
}