/* ============================================================
   rtl.css — Arabic / RTL layout overrides
   Font: Almarai (Google Fonts) — applied universally to all RTL content
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ── ALMARAI: universal Arabic font application ─────────────── */
html[dir="rtl"],
html[dir="rtl"] body,
body.is-rtl,
[lang="ar"],
[lang="ar"] *,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] li,
html[dir="rtl"] span, html[dir="rtl"] button, html[dir="rtl"] input,
html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] label,
html[dir="rtl"] blockquote, html[dir="rtl"] td, html[dir="rtl"] th {
  font-family: 'Almarai', sans-serif !important;
}

html[dir="rtl"] body,
body.is-rtl {
  direction: rtl;
  text-align: right;
}

/* Header */
html[dir="rtl"] .header-inner,
body.is-rtl .header-inner { flex-direction: row-reverse; }

html[dir="rtl"] .nav,
body.is-rtl .nav { flex-direction: row-reverse; }

html[dir="rtl"] .header-right,
body.is-rtl .header-right { flex-direction: row-reverse; }

html[dir="rtl"] .social,
html[dir="rtl"] .footer-social,
html[dir="rtl"] .drawer-social,
body.is-rtl .social,
body.is-rtl .footer-social,
body.is-rtl .drawer-social { flex-direction: row-reverse; }

/* Dropdown aligns right in RTL */
html[dir="rtl"] .nav-dd .dd-panel,
body.is-rtl .nav-dd .dd-panel { left: auto; right: 0; }

/* Breadcrumbs */
html[dir="rtl"] .breadcrumbs,
body.is-rtl .breadcrumbs { flex-direction: row; }

/* Home two-col: swap column order */
html[dir="rtl"] .home-two .panel-shadow,
body.is-rtl .home-two .panel-shadow { order: 2; }

html[dir="rtl"] .home-two .panel-no-shadow,
body.is-rtl .home-two .panel-no-shadow { order: 1; }

/* Bootstrap row mirror */
html[dir="rtl"] .row,
body.is-rtl .row { flex-direction: row-reverse !important; }

/* Spacing utilities mirror */
html[dir="rtl"] .ms-auto,
body.is-rtl .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto,
body.is-rtl .me-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .text-start,
body.is-rtl .text-start { text-align: right !important; }
html[dir="rtl"] .text-end,
body.is-rtl .text-end { text-align: left !important; }

/* Keep email/phone fields LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
body.is-rtl input[type="email"],
body.is-rtl input[type="tel"] { direction: ltr; text-align: left; }

/* Select: RTL direction with caret on left */
html[dir="rtl"] select.form-select,
html[dir="rtl"] .contact-form select,
body.is-rtl select.form-select,
body.is-rtl .contact-form select {
  direction: rtl;
  text-align: right;
  padding-right: .75rem;
  padding-left: 2.25rem;
  background-position: left .75rem center;
}

/* Textarea */
html[dir="rtl"] textarea,
body.is-rtl textarea { direction: rtl; text-align: right; }

/* Buttons: no letter spacing in Arabic */
html[dir="rtl"] .btn,
body.is-rtl .btn { letter-spacing: 0; }

/* Reveal animations */
html[dir="rtl"] .reveal.from-left  { transform: translateX(60px); }
html[dir="rtl"] .reveal.from-right { transform: translateX(-60px); }
html[dir="rtl"] .reveal.is-visible { transform: translateX(0); }

/* Footer grid mirrors */
html[dir="rtl"] .footer-bottom-grid,
body.is-rtl .footer-bottom-grid { direction: rtl; }
html[dir="rtl"] .footer-links,
body.is-rtl .footer-links { flex-direction: row-reverse; }
html[dir="rtl"] .footer-copy,
body.is-rtl .footer-copy { justify-content: flex-start; text-align: right; }

/* LTR fix for phone/wa numbers */
.ltr-num,
a[href^="tel:"],
a[href*="wa.me"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
  text-align: right !important;
}

/* Contact info card — RTL layout adjustments */
html[dir="rtl"] .contact-info-grid { direction: rtl; }
html[dir="rtl"] .contact-book-btn  { align-self: flex-end; }
html[dir="rtl"] .contact-info-label { letter-spacing: 0; }