/* =========================================================
   RTL OVERRIDES — applied automatically when <html dir="rtl">
   Most layout already uses logical properties (inset-inline,
   padding-inline, text-align:start). This file covers the
   remaining physical-property exceptions and font tuning.
   ========================================================= */

[dir="rtl"] body{
  font-family:'Almarai','Inter',sans-serif;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .font-display{
  font-family:'Almarai','Fraunces',serif; font-weight:700; letter-spacing:0;
}
[dir="rtl"] .eyebrow,[dir="rtl"] .card-stat b,[dir="rtl"] .hero-stats .stat b,
[dir="rtl"] .step-num,[dir="rtl"] .seal-badge .txt small{
  font-family:'Almarai','IBM Plex Mono',monospace;
}

[dir="rtl"] .eyebrow::before{margin-inline-start:0;}

[dir="rtl"] .main-nav a{text-align:right;}

[dir="rtl"] .hero-grid{direction:rtl;}
[dir="rtl"] .hero h1 em{font-style:normal;}

[dir="rtl"] .card:hover .card-link svg,
[dir="rtl"] .job-card .card-link svg{
  transform:scaleX(-1);
}

[dir="rtl"] .value-item .num::before{
  content: counter(vnum, decimal-leading-zero);
  direction:ltr; display:inline-block;
}

[dir="rtl"] .nav-toggle span{align-self:flex-end;}

[dir="rtl"] .footer-grid{direction:rtl;}

[dir="rtl"] .step-row{grid-template-columns:64px 1fr;}

[dir="rtl"] .lang-switch svg,[dir="rtl"] .btn svg{transform:scaleX(-1);}

[dir="rtl"] .coverage-panel .panel-label{direction:rtl;}

/* Dropdown / bootstrap RTL alignment */
[dir="rtl"] .dropdown-menu{text-align:right;}

/* Icon mirroring for directional chevrons/arrows only (not brand icons) */
[dir="rtl"] .icon-flip{transform:scaleX(-1);}

/* Branch phone numbers stay LTR-isolated for correct digit order, but the
   row itself should hug the right edge with the icon leading from the right. */
[dir="rtl"] .branch-card-phone{
  display:flex; width:100%;
  flex-direction:row-reverse;
  justify-content:flex-start;
}

/* Phone numbers are always written left-to-right, even on Arabic pages
   (otherwise a typed "+971 50…" renders with the "+" on the wrong end).
   Kept right-aligned so the field still lines up with the RTL form. */
[dir="rtl"] input[type="tel"]{direction:ltr; text-align:right;}