/* ============================================================
   HABIB EDUCATION — RTL (Arabic) overrides
   All rules are scoped to [dir="rtl"] — zero impact on ID/EN.
   JS sets <html dir="rtl"> when language is 'ar'.
   Arabic webfont: Noto Kufi Arabic (loaded via @import below).

   KEY PRINCIPLE: direction:rtl on <html> is inherited by every
   descendant. For flex-direction:row containers this already makes
   items flow right→left, so flex-direction:row-reverse is NEVER
   needed here (it would cancel out and restore LTR order).
   ============================================================ */

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

/* ── Base ──────────────────────────────────────────────────── */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Arabic font for all text */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: 'Noto Kufi Arabic', 'Poppins', sans-serif;
}

[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5 {
  font-family: 'Noto Kufi Arabic', 'Poppins', sans-serif;
  font-weight: 700;
}

/* ── Navigation ────────────────────────────────────────────── */
/* direction:rtl (inherited) already reverses flex row item order. */
[dir="rtl"] .mobile-nav {
  text-align: right;
}
[dir="rtl"] .crumb svg {
  transform: scaleX(-1);
}

/* ── Accommodation card ────────────────────────────────────── */
/* DOM order: .ac-photo first, .ac-body second.
   direction:rtl makes the grid flow right→left, so .ac-photo
   auto-lands on the RIGHT and .ac-body on the LEFT — exactly
   the mirror of the EN layout. No grid-column overrides needed. */
[dir="rtl"] .accom-card {
  grid-template-columns: 240px 1fr; /* matches LTR base; photo (right, 240px) + body (left, 1fr) */
}
[dir="rtl"] .accom-card .ac-body {
  text-align: right;
}
/* heart button: EN has it top-left of photo; mirror → top-right */
[dir="rtl"] .accom-card .ac-save {
  left: auto;
  right: 12px;
}
/* photo nav arrows: flip ‹ › so they point the correct RTL direction */
[dir="rtl"] .accom-card .ac-nav {
  transform: scaleX(-1);
}
/* pricing panel: flip divider from left edge → right edge */
[dir="rtl"] .accom-card .ac-right {
  border-left: none;
  border-right: 1px solid var(--line-2);
  padding-left: 0;
  padding-right: 20px;
}

/* ── Section headings ──────────────────────────────────────── */
[dir="rtl"] .section-head.left {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* ── University hero ───────────────────────────────────────── */
[dir="rtl"] .uni-intro {
  text-align: right;
}

/* ── Program grid cards ────────────────────────────────────── */
[dir="rtl"] .prog-card {
  text-align: right;
}

/* ── Program popup / modal ─────────────────────────────────── */
[dir="rtl"] .modal-box {
  text-align: right;
}
[dir="rtl"] .modal-close {
  right: auto;
  left: 18px;
}
[dir="rtl"] .syl-mods {
  padding-left: 0;
  padding-right: 20px;
  text-align: right;
}

/* ── Pricing table (Language Center) ──────────────────────── */
[dir="rtl"] .table th {
  text-align: right;
}
[dir="rtl"] .table td {
  text-align: right;
}
[dir="rtl"] .table td.price {
  text-align: left;
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Fee tables ────────────────────────────────────────────── */
[dir="rtl"] .fee-table-head {
  text-align: right;
}
[dir="rtl"] .fee-lbl {
  text-align: right;
}
[dir="rtl"] .fee-table .fee-total td:first-child {
  text-align: right;
}

/* ── Home / front-page sections ───────────────────────────── */
[dir="rtl"] .hero-copy {
  text-align: right;
}
[dir="rtl"] .stat-item {
  text-align: center;
}

/* ── Footer ────────────────────────────────────────────────── */
[dir="rtl"] .footer-col {
  text-align: right;
}
[dir="rtl"] .footer-col ul {
  padding-left: 0;
  padding-right: 0;
}

/* ── Forms ─────────────────────────────────────────────────── */
[dir="rtl"] .form-group,
[dir="rtl"] .habib-field {
  text-align: right;
}
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

/* ── Utility: flip asymmetric left border to right ─────────── */
[dir="rtl"] .section-label::before,
[dir="rtl"] .habib-section-label {
  border-left: none;
  border-right: 4px solid var(--brand);
  padding-left: 0;
  padding-right: 12px;
}

/* ── Numbers & amounts: keep LTR within RTL ────────────────── */
[dir="rtl"] .fee-amt,
[dir="rtl"] .stat-num,
[dir="rtl"] .price-tag {
  unicode-bidi: embed;
  direction: ltr;
}

/* fee amounts: right-align within their RTL column (number still reads LTR) */
[dir="rtl"] .fee-amt,
[dir="rtl"] .fee-table .fee-total .fee-amt {
  text-align: right;
}

/* ── Mobile RTL ────────────────────────────────────────────── */
@media (max-width: 768px) {
  [dir="rtl"] .accom-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  /* nav actions tighten in RTL matches LTR */
  [dir="rtl"] .nav-actions{gap:8px;}
  [dir="rtl"] .mobile-nav{text-align:right;}
  /* faculty select full-width RTL parity */
  [dir="rtl"] .faculty-select{align-items:stretch;}
  [dir="rtl"] .faculty-select select{min-width:0; width:100%;}
}