/* ==========================================================================
   Para Ella RTL overrides. Loaded only on Arabic pages, after style.css.
   Scoped to [dir="rtl"] so it can never affect the LTR languages.

   Only genuinely asymmetric declarations are flipped. Rules that already set
   both sides (.site-header, .mobile-sticky, .cookie-banner: left:0; right:0)
   are symmetric and are deliberately left alone.
   ========================================================================== */

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

/* Flex and grid tracks mirror automatically under direction:rtl, so the header,
   nav, price rows and card grids need no per-component reversal. */

/* ── Header and navigation ── */
[dir="rtl"] .mobile-nav-close { right: auto; left: 18px; }

/* ── Tables and price lists ── */
[dir="rtl"] .price-table th            { text-align: right; }
[dir="rtl"] .price-table td:last-child { text-align: left; }
[dir="rtl"] .price-list-header         { text-align: right; }
[dir="rtl"] .price-row-price           { text-align: left; }
[dir="rtl"] .hours-table .time         { padding-left: 16px; padding-right: 0; }

/* ── Accent borders ── */
[dir="rtl"] .testimonial-card  { border-left: none; border-right: 3px solid var(--rose); }
[dir="rtl"] .premium-cta-card  { border-left: none; border-right: 3px solid var(--burg); }

/* ── Decorative absolutely positioned marks ── */
[dir="rtl"] .offer-card::before          { right: auto; left: 20px; }
[dir="rtl"] .about-img-badge             { right: auto; left: 0; }
[dir="rtl"] .section-star-bg::before     { right: auto; left: -40px; }
[dir="rtl"] .service-detail-hero::before { right: auto; left: -40px; }
[dir="rtl"] .premium-cta-card::before    { right: auto; left: 28px; }
[dir="rtl"] .luxury-beauty-media-tag     { left: auto; right: 20px; }

/* ── Text alignment ── */
[dir="rtl"] .faq-question       { text-align: right; }
[dir="rtl"] .luxury-beauty-text { text-align: right; }

/* Centred content stays centred in both directions. */
[dir="rtl"] .section-header.centered,
[dir="rtl"] .centered { text-align: center; }

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

/* ── Typography ──
   Arabic needs a slightly taller line box and no letter-spacing, which is a
   Latin-display convention and looks broken on Arabic script. */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.9; letter-spacing: 0; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] .nav-logo,
[dir="rtl"] .section-label { letter-spacing: 0; }

/* The brand wordmark stays latin and left to right, even inside an RTL page. */
[dir="rtl"] .nav-logo { direction: ltr; unicode-bidi: isolate; }

/* Prices, phone numbers and times are latin numerals inside Arabic text and
   must not be re-ordered by the bidi algorithm. */
[dir="rtl"] .price-row-price,
[dir="rtl"] .price-row-dur,
[dir="rtl"] .hours-table .time,
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* The clock glyph is prepended in LTR order; mirror the spacing. */
[dir="rtl"] .price-row-dur::before { content: '⏱ '; }

/* ── Mobile ── */
@media (max-width: 768px) {
  [dir="rtl"] .mobile-nav { text-align: right; }
}


/* pe-boost: flip the price-row link chevron for RTL */
[dir="rtl"] a.price-row .price-row-name::after { content: ' \2039'; }


/* ── Arabic typography, continued ──────────────────────────────────────────
   The rule above already states the intent: letter-spacing is a Latin-display
   convention and looks stretched on Arabic script. Its selector list only
   reached body/p/li and the headings, so every component below kept its Latin
   tracking on Arabic text. Measured on the hero eyebrow, the inherited 0.2em
   stretched a 46-character Arabic string by 11.6% (219.8px -> 245.3px).
   Scoped to [dir="rtl"] so the five LTR language trees are untouched. */
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .nav-links a,
[dir="rtl"] .blog-tag,
[dir="rtl"] .hero-trust-label,
[dir="rtl"] .offer-badge,
[dir="rtl"] .contact-info-label,
[dir="rtl"] .from,
[dir="rtl"] .mobile-sticky-btn,
[dir="rtl"] .lang-label { letter-spacing: 0; }

/* The Arabic font stack was declared as [lang="ar"] on <html>, but
   `body { font-family: var(--font-body) }` re-declares the family on <body>
   itself, so the Arabic stack never won for anything inside body. Re-assert it
   on the same element with higher specificity. System fonts only, deliberately:
   an Arabic webfont would add a render-blocking request to the hero. */
[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }