/* ============================================================================
   kto-rtl.css — the missing RTL layer for the Arabic site (/ar/).
   Loaded AFTER mobile.css on every /ar/ page, so [dir=rtl] selectors here
   (specificity 0,2,x + !important) win over mobile.css's physical-direction
   rules. FR pages never load this file; even if they did, [dir=rtl] would not
   match, so it is inert outside Arabic.

   Goal: flip the physical left/right/text-align rules that mobile.css and the
   per-page inline <style> blocks bake in for LTR, and fix Arabic-specific
   typography + bidi (numbers / prices / phones / Latin brands).
   ============================================================================ */

/* ====================================================================
   1. HEADER — icon cluster + cart badge on the inline-start (left in RTL)
   mobile.css forces .header-icons{right:12px} at <=480; #mainHeader
   justify-content:flex-start puts the logo on the right in RTL, so the
   icons must move to the LEFT or they collide with the logo.
   ==================================================================== */
[dir="rtl"] .header-icons { right: auto !important; left: 48px !important; }
[dir="rtl"] .cart-badge,
[dir="rtl"] .cart-count,
[dir="rtl"] .wishlist-badge { right: auto !important; left: 4px !important; }

@media (max-width: 480px) {
  [dir="rtl"] .header-icons { right: auto !important; left: 12px !important; }
  /* logo hugs the start (right) edge; icons sit at the end (left) */
  [dir="rtl"] #mainHeader { justify-content: flex-start !important; }
}

/* ====================================================================
   2. HERO (homepage) — controls/counter + spring-hero text anchor
   ==================================================================== */
[dir="rtl"] .hero-spring .hero-content { margin-left: 0 !important; margin-right: clamp(28px, 6vw, 84px) !important; }
@media (max-width: 480px) {
  [dir="rtl"] .hero-spring .hero-content { margin-right: 0 !important; }
  [dir="rtl"] .hero-controls { left: auto !important; right: 16px !important; }
  [dir="rtl"] .hero-counter  { right: auto !important; left: 16px !important; }
}

/* ====================================================================
   3. BEST-SELLERS / horizontal carousels — snap padding on the start side
   ==================================================================== */
@media (max-width: 480px) {
  [dir="rtl"] .bs-carousel-track { scroll-padding-left: 0 !important; scroll-padding-right: 16px !important; }
}

/* ====================================================================
   4. PRODUCT DETAIL PAGE
   ==================================================================== */
/* Promo/new tags pinned to the start (right) edge */
[dir="rtl"] .product-tags-top { right: auto !important; left: 12px !important; }

/* Gallery prev/next arrows: "previous" belongs on the right in RTL */
[dir="rtl"] .gallery-arrow-left  { left: auto !important;  right: 0 !important; }
[dir="rtl"] .gallery-arrow-right { right: auto !important; left: 0 !important; }

/* Gallery dot rail + zoom button mirror */
@media (max-width: 480px) {
  [dir="rtl"] .gallery-dots-left { left: auto !important;  right: 14px !important; }
  [dir="rtl"] .gallery-zoom-right { right: auto !important; left: 14px !important; }
  /* Bottom action bar text — mobile.css forces text-align:left */
  [dir="rtl"] .bottom-bar-left,
  [dir="rtl"] .bottom-bar-center,
  [dir="rtl"] .bottom-bar-right { text-align: right !important; }
}

/* Info column gutter, colour name gap, Rx table indent */
[dir="rtl"] .product-info { padding-left: 0 !important; padding-right: 60px !important; }
[dir="rtl"] .color-name   { margin-left: 0 !important; margin-right: 8px !important; }
[dir="rtl"] .rx-table th:first-child { text-align: right !important; }
[dir="rtl"] .rx-table td:first-child { padding-left: 0 !important; padding-right: 10px !important; }
@media (max-width: 480px) {
  [dir="rtl"] .product-info { padding-right: 0 !important; }
}

/* ====================================================================
   5. LISTING CARDS — strike-through old price gap + wishlist button +
      the kto.ma logo watermark (bottom-start corner)
   ==================================================================== */
[dir="rtl"] .product-price-old,
[dir="rtl"] .price-old,
[dir="rtl"] .bs-price-old { margin-left: 0 !important; margin-right: 8px !important; }

[dir="rtl"] .product-card .wishlist-btn { right: auto !important; left: 16px !important; }

[dir="rtl"] .product-image-container::after,
[dir="rtl"] .gallery-fullwidth::after {
  left: auto !important; right: 12px !important;
  padding-left: 0 !important; padding-right: 60px !important;
  background-position-x: right !important;
}
@media (max-width: 600px) {
  [dir="rtl"] #productsGrid:not(.view-1) .product-image-container::after,
  [dir="rtl"] .products-grid:not(.view-1) .product-image-container::after {
    left: auto !important; right: 8px !important;
    padding-left: 0 !important; padding-right: 32px !important;
  }
}

/* ====================================================================
   6. LENS WIZARD recap (mobile) — align to start
   ==================================================================== */
@media (max-width: 768px) {
  [dir="rtl"] #kto-wiz-recap { text-align: right !important; }
}

/* ====================================================================
   7. ARTICLE / LONG-FORM — quote bar + list indent on the start side
   ==================================================================== */
[dir="rtl"] .article-body blockquote { border-left: 0 !important; border-right: 3px solid var(--kto-blue) !important; padding-left: 0; padding-right: 20px; }
[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol { margin-left: 0 !important; margin-right: 22px !important; padding-left: 0; padding-right: 0; }
/* Generic landing-page lists (section ul{padding-left:22px}) */
[dir="rtl"] section ul,
[dir="rtl"] .facts ul,
[dir="rtl"] main ul { padding-left: 0; padding-right: 22px; }

/* City/landing hero titles (e.g. opticien-*) ship a fixed 40–42px h1 with a
   long bilingual title; cap + fluidly shrink on phones so it never overflows. */
@media (max-width: 600px) {
  [dir="rtl"] main > h1 { font-size: clamp(26px, 7vw, 42px) !important; line-height: 1.25 !important; }
}

/* ====================================================================
   8. ARABIC TYPOGRAPHY
   Arabic script is cursive: letter-spacing BREAKS the joins, and
   text-transform:uppercase is a no-op. Neutralise both on label classes
   that carry Arabic copy, and lift the smallest text a notch for legibility.
   ==================================================================== */
[dir="rtl"] .nav-link,
[dir="rtl"] .mobile-nav-link,
[dir="rtl"] .dropdown-title,
[dir="rtl"] .dropdown-link,
[dir="rtl"] .filter-label,
[dir="rtl"] .filters-label,
[dir="rtl"] .section-label,
[dir="rtl"] .section-subtitle,
[dir="rtl"] .hero-kicker,
[dir="rtl"] .hero-tag,
[dir="rtl"] .product-brand,
[dir="rtl"] .blog-cat,
[dir="rtl"] .article-cat,
[dir="rtl"] .footer-heading,
[dir="rtl"] .benefit-title,
[dir="rtl"] .benefit-sub,
[dir="rtl"] .advance-title,
[dir="rtl"] .payment-label,
[dir="rtl"] .empty-tile-label,
[dir="rtl"] .promo-tag,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-outline,
[dir="rtl"] .btn-promo,
[dir="rtl"] .bs-add-btn,
[dir="rtl"] .marquee-item,
[dir="rtl"] .view-all,
[dir="rtl"] .specs-label,
[dir="rtl"] .tag { letter-spacing: normal !important; }

/* Drop uppercase only where the label is Arabic copy (uppercase has no
   effect on Arabic and removing it never hurts Latin tokens in these). */
[dir="rtl"] .nav-link,
[dir="rtl"] .mobile-nav-link,
[dir="rtl"] .dropdown-title,
[dir="rtl"] .filter-label,
[dir="rtl"] .filters-label,
[dir="rtl"] .section-label,
[dir="rtl"] .footer-heading,
[dir="rtl"] .benefit-title,
[dir="rtl"] .advance-title,
[dir="rtl"] .payment-label,
[dir="rtl"] .empty-tile-label,
[dir="rtl"] .hero-kicker { text-transform: none !important; }

/* Lift the most cramped Arabic text for phone legibility */
[dir="rtl"] .product-brand { font-size: 12px !important; }
[dir="rtl"] .product-name,
[dir="rtl"] .product-title,
[dir="rtl"] .bs-name { font-size: 13.5px !important; line-height: 1.55 !important; }
[dir="rtl"] .footer-link,
[dir="rtl"] .footer-contact-item,
[dir="rtl"] .benefit-sub,
[dir="rtl"] .cart-item-name { line-height: 1.6 !important; }

/* ====================================================================
   9. BIDI — isolate numbers, prices, phones, IBANs, Latin brands so the
   leading +/-/% and the – range separator stop jumping inside Arabic runs.
   ==================================================================== */
[dir="rtl"] .price-main,
[dir="rtl"] .price-ttc,
[dir="rtl"] .product-price,
[dir="rtl"] .product-price-old,
[dir="rtl"] .lw-card-price,
[dir="rtl"] .bs-price,
[dir="rtl"] .bs-price-old,
[dir="rtl"] .summary-row .val,
[dir="rtl"] #summaryTotal,
[dir="rtl"] .summary-total-price,
[dir="rtl"] .lw-summary-total-price,
[dir="rtl"] .advance-amount,
[dir="rtl"] #discountDisplay,
[dir="rtl"] .price-range { unicode-bidi: isolate; }

/* Numeric / phone / IBAN inputs and tel links read LTR but stay at the start */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[inputmode="tel"],
[dir="rtl"] .rib-num { direction: ltr; text-align: right; }
[dir="rtl"] a[href^="tel:"] { unicode-bidi: isolate; }

/* ====================================================================
   10. TOUCH TARGETS — AR cart qty/remove buttons (AR pages don't load
   mobile.css, so the FR fix there doesn't reach them).
   ==================================================================== */
@media (max-width: 480px) {
  [dir="rtl"] .qty-btn { width: 44px !important; height: 44px !important; }
  [dir="rtl"] .qty-control .qty-val { height: 44px !important; }
  [dir="rtl"] .remove-btn { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  /* Required-field asterisk + sticky-summary chevron spacing on the right side */
  [dir="rtl"] .addr-label .req { margin-right: 0 !important; margin-left: 2px !important; }
}

/* ====================================================================
   11. FLOATING WIDGETS — WhatsApp bubble side handled in whatsapp-cta.js.
   Mutuelle/legal table scroll wrapper handled inline in ar/mutuelle.html.
   ==================================================================== */