/* ==========================================================================
   CMYH — RTL / Arabic layer
   Loaded only by the /ar/ pages, after styles.css.

   Two jobs:
   1. Give Arabic real glyphs. The Latin display faces (Archivo Black,
      Boldonse, Satoshi) have no Arabic coverage, so Arabic set in them falls
      back to a random system font and looks broken.
   2. Flip the directional properties in styles.css, which uses physical
      (left/right) rather than logical properties throughout.
   ========================================================================== */

/* ---------- 1. Typography ------------------------------------------------ */

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] select {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .hero-h, [dir="rtl"] .hero-h-word,
[dir="rtl"] .section-title, [dir="rtl"] .stat-num {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
  /* The Latin display faces are extremely tight; Arabic needs more room. */
  letter-spacing: 0;
  line-height: 1.35;
}

/* Arabic ascenders/descenders need more vertical space than the Latin faces. */
[dir="rtl"] p,
[dir="rtl"] li {
  line-height: 1.9;
}

/* Keep Latin brand marks in their original face — and in Latin order.
   Without direction:ltr the inline spans reverse and "CM YH" renders "YH CM". */
[dir="rtl"] .nav-logo,
[dir="rtl"] .nl-cm,
[dir="rtl"] .nl-yh,
[dir="rtl"] .nl-tm {
  font-family: 'Archivo Black', 'Impact', sans-serif;
}
[dir="rtl"] .nav-logo,
[dir="rtl"] .footer-logo {
  direction: ltr;
  unicode-bidi: isolate;
}

/* English strings that remain inside an RTL page (consent copy, brand names)
   must not have their trailing punctuation flipped to the wrong side. */
[dir="rtl"] .consent-banner p,
[dir="rtl"] [lang="en"] {
  unicode-bidi: isolate;
}

/* Latin runs inside Arabic text (numbers, CMYH, WhatsApp) stay LTR. */
[dir="rtl"] .ltr {
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

/* ---------- 2. Directional flips ----------------------------------------- */

/* Skip link */
[dir="rtl"] .skip-link { left: auto; right: 12px; }

/* Brand lockup spacing */
[dir="rtl"] .nl-cm { margin-right: 0; margin-left: 0.12em; }

/* Decorative corner brackets */
[dir="rtl"] .brackets::before {
  left: auto; right: -2px;
  border-right: 0; border-left: 0;
  border-left: 1px solid currentColor; border-right: 0;
}
[dir="rtl"] .brackets::after {
  right: auto; left: -2px;
  border-left: 0; border-right: 0;
  border-right: 1px solid currentColor; border-left: 0;
}
[dir="rtl"] .hero-bracket.tl { left: auto; right: clamp(40px, 6vw, 80px); }
[dir="rtl"] .hero-bracket.br { right: auto; left: clamp(40px, 6vw, 80px); }

/* Cart drawer slides in from the left in RTL */
[dir="rtl"] .cart-drawer-panel {
  right: auto; left: 0;
  border-left: 0;
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
}
[dir="rtl"] .cart-drawer.open .cart-drawer-panel { transform: translateX(0); }
[dir="rtl"] .cart-line-total { text-align: left; }

/* Cart badge */
[dir="rtl"] .nav-cart-count { right: auto; left: -4px; }

/* Lightbox controls */
[dir="rtl"] .lightbox-close { right: auto; left: 24px; }
[dir="rtl"] .lightbox-nav.prev { left: auto; right: 16px; }
[dir="rtl"] .lightbox-nav.next { right: auto; left: 16px; }

/* Before / after labels */
[dir="rtl"] .ba-label.before { left: auto; right: 12px; }
[dir="rtl"] .ba-label.after { right: auto; left: 12px; }

/* Floating WhatsApp button */
[dir="rtl"] .wa-float,
[dir="rtl"] .whatsapp-float { right: auto; left: 22px; }

/* Tile / card captions anchored to a corner */
[dir="rtl"] .tile-caption,
[dir="rtl"] .action-tile-caption { left: auto; right: 22px; }
[dir="rtl"] .review-tile-caption { left: auto; right: 16px; }

/* Long-form article typography */
[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .article-body blockquote,
[dir="rtl"] .callout {
  border-left: 0;
  border-right: 3px solid var(--red);
}

/* Generic left-aligned blocks */
[dir="rtl"] .text-left { text-align: right; }

/* Small inline spacers */
[dir="rtl"] .dot,
[dir="rtl"] .meta-dot { margin-right: 0; margin-left: 8px; }

/* Progress / scroll bars fill right-to-left */
[dir="rtl"] .scroll-progress,
[dir="rtl"] .progress-bar { transform-origin: right center; }

/* Form fields */
[dir="rtl"] input,
[dir="rtl"] textarea { text-align: right; }
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }