/* ═══════════════════════════════════════════════════════
   EL-SHERIEF LIMOUSINE — rtl.css
   Loaded only when the site is in Arabic mode (dir="rtl").
   Patches the specific left/right-anchored and margin-based
   rules that don't auto-flip with the browser's own RTL
   handling of text flow, flexbox, and grid.
═══════════════════════════════════════════════════════ */

html[dir="rtl"] body {
  font-family: 'Cairo', 'Instrument Sans', sans-serif;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .section-h, html[dir="rtl"] .nav-logo-main,
html[dir="rtl"] .cta-h, html[dir="rtl"] .about-story-h,
html[dir="rtl"] .prod-title, html[dir="rtl"] .pd-title,
html[dir="rtl"] .blog-card-title, html[dir="rtl"] .blog-featured-title,
html[dir="rtl"] .bd-hero-title, html[dir="rtl"] .testimonials-h,
html[dir="rtl"] .service-title, html[dir="rtl"] .cap-title {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

/* Numbers/prices/badges read left-to-right internally even in an RTL page,
   but the block itself must still sit on the right like everything else
   in the layout — otherwise a number ends up stranded on the left while
   its label (in normal RTL flow) sits on the right of the same card. */
html[dir="rtl"] .prod-price, html[dir="rtl"] .p-price,
html[dir="rtl"] .pd-stat-num, html[dir="rtl"] .about-stat-num,
html[dir="rtl"] .cap-stat-num, html[dir="rtl"] .card-value {
  direction: ltr;
  text-align: right;
}

/* ── Breadcrumb: flip from left-anchored to right-anchored ── */
html[dir="rtl"] .breadcrumb { left: auto; right: 48px; }
@media (max-width: 1024px) { html[dir="rtl"] .breadcrumb { left: auto; right: 32px; } }
@media (max-width: 860px)  { html[dir="rtl"] .breadcrumb { left: auto; right: 20px; } }
@media (max-width: 480px)  { html[dir="rtl"] .breadcrumb { left: auto; right: 16px; } }
html[dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); display: inline-block; }

/* ── Card badges/price tags: mirror corners ── */
html[dir="rtl"] .prod-badge, html[dir="rtl"] .p-tag,
html[dir="rtl"] .blog-card-tag { left: auto; right: 14px; }
html[dir="rtl"] .prod-price, html[dir="rtl"] .p-price { right: auto; left: 14px; }
html[dir="rtl"] .prod-price span, html[dir="rtl"] .p-price span { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .blog-play-badge.sm { right: auto; left: 12px; }

/* ── Nav ── */
html[dir="rtl"] .nav-logo-icon svg { transform: scaleX(-1); }


/* ── Hero decorative orb: mirror to the left side ── */
html[dir="rtl"] .page-hero-orb { right: auto; left: -220px; }
@media (max-width: 1024px) { html[dir="rtl"] .page-hero-orb { right: auto; left: -160px; } }

/* ── Buttons with trailing arrows ──
   These are plain inline-flex elements; flexbox's own `row` direction
   already follows the page's dir="rtl" natively (first child anchors to
   the right/start, following children flow left/end) — no override needed.
   An earlier version of this file forced flex-direction: row-reverse here,
   which fought that native behavior and pushed icons to the wrong side. */
html[dir="rtl"] .pd-btn-primary svg { transform: scaleX(-1); }

/* ── Icon + text rows ──
   These components space their icon and text with flexbox `gap`, not
   margins, so they already re-flow correctly under dir="rtl" with no
   extra CSS needed. (Previously this file added margin-left overrides
   here, which just stacked extra space on top of the existing gap.) */

/* ── Ticker: keep scrolling toward reading direction ── */
html[dir="rtl"] .ticker-inner { direction: ltr; }
html[dir="rtl"] .ticker-item { direction: rtl; }

/* ── Forms ── */
html[dir="rtl"] .form-input, html[dir="rtl"] .form-textarea,
html[dir="rtl"] .form-control { text-align: right; }

/* ── Footer columns: grid auto-mirrors, just fix text alignment.
   footer-contact-item is a plain flex row with no reverse needed — native
   RTL flex already puts the icon on the right, next to where the Arabic
   text begins. */
html[dir="rtl"] .footer-links, html[dir="rtl"] .footer-contact-row { text-align: right; }

/* ── Services page zigzag layout ──
   .service-feature.reverse uses a direction:rtl / direction:ltr trick purely
   to flip which column the image sits in — it isn't aware of the site's
   actual language. In an RTL page the non-reversed row already inherits
   dir="rtl" from <html> (image on the right, text on the left), so the
   base CSS's ".reverse { direction: rtl }" is a no-op there — every row
   ends up identical, image on the right, instead of alternating.
   Flip it: force .reverse to direction:ltr so its column order mirrors
   the non-reversed row (image on the left, text on the right), restoring
   the zigzag. Then cancel that direction:ltr on the children so the real
   Arabic text inside still renders and reads right-to-left. */
html[dir="rtl"] .service-feature.reverse { direction: ltr; }
html[dir="rtl"] .service-feature.reverse > * { direction: rtl; }

/* ── Testimonials quote mark mirrors visually ── */
html[dir="rtl"] .testi-quote { transform: scaleX(-1); }

/* ── Misc text-align resets for elements that hardcode left alignment ── */
html[dir="rtl"] .about-story-text, html[dir="rtl"] .service-text,
html[dir="rtl"] .contact-info, html[dir="rtl"] .cta-text,
html[dir="rtl"] .cta-inner, html[dir="rtl"] .about-cta-inner,
html[dir="rtl"] .pd-cta-inner, html[dir="rtl"] .prod-cta-inner {
  text-align: right;
}

/* ── Chip rows / filter rows keep natural RTL flow (no change needed;
     flexbox row already reverses under dir=rtl) ── */

/* ── Mobile nav menu: dock and enter from the right in Arabic, matching
     RTL reading direction. base.css docks/animates the panel from the
     left (left:0, slides in from translateX(-100%)); here we re-dock it
     to the right edge (right:0, left:auto) and slide it in from
     translateX(100%) instead, so it opens from and closes back to the
     right edge of the screen. (English keeps the left-docked slide+fade
     defined in base.css.) ── */
@media (max-width: 860px) {
  html[dir="rtl"] .nav-center {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  }
  html[dir="rtl"] .nav-center.open { transform: translateX(0); }
}

/* ── Admin-triggered RTL text inputs (Settings page Arabic fields) ── */
[dir="rtl"].form-control, textarea[dir="rtl"], input[dir="rtl"] {
  font-family: 'Cairo', sans-serif;
}