/* ================================================================
   Casea UAE - RTL overrides for Arabic
   Loaded only when <html dir="rtl">
   ================================================================ */

/* Body-level: enable proper Arabic font stack and natural RTL flow */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system,
               'Helvetica Neue', Arial, sans-serif;
}

/* Arabic Google Font import for nicer typography */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* ================================================================
   Header navigation - flip horizontal flow
   ================================================================ */
html[dir="rtl"] .nav-main a { letter-spacing: 0; }
html[dir="rtl"] .btn--mobile-cta {
  margin-left: var(--space-3);
  margin-right: auto;
}
html[dir="rtl"] .lang-selector__dropdown {
  right: auto;
  left: 0;
}
html[dir="rtl"] .lang-selector__toggle svg { transform: scaleX(-1); }

/* ================================================================
   Hero
   ================================================================ */
html[dir="rtl"] .hero h1 .brand-name,
html[dir="rtl"] .hero h1 .brand-type { letter-spacing: 0; }

html[dir="rtl"] .hero__bonus-extra { direction: rtl; }

/* ================================================================
   Tables, lists, cards
   ================================================================ */
html[dir="rtl"] .quick-table th { text-align: right; }
html[dir="rtl"] .quick-table td { text-align: right; }

html[dir="rtl"] .check-list li {
  padding-right: 2em;
  padding-left: 0;
}
html[dir="rtl"] .check-list li::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .info-card { text-align: right; }

html[dir="rtl"] .two-col { direction: rtl; }

html[dir="rtl"] .provider-logos { direction: rtl; }
html[dir="rtl"] .provider-tag { direction: ltr; } /* Provider names stay LTR */

/* ================================================================
   FAQ accordion
   ================================================================ */
html[dir="rtl"] .faq-item summary {
  padding-right: 0;
  padding-left: 2.5rem;
}
html[dir="rtl"] .faq-item summary::after,
html[dir="rtl"] .faq-item summary::marker { right: auto; left: 1rem; }

/* Native disclosure triangle - hide and replace */
html[dir="rtl"] .faq-item summary::-webkit-details-marker { display: none; }

/* ================================================================
   Footer
   ================================================================ */
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-col ul { padding-right: 0; }
html[dir="rtl"] .footer-bottom { direction: rtl; }
html[dir="rtl"] .footer-disclaimer { text-align: right; line-height: 1.8; }

/* ================================================================
   Sticky CTA bottom bar
   ================================================================ */
html[dir="rtl"] .sticky-cta__text { direction: rtl; text-align: right; }

/* ================================================================
   Mobile nav
   ================================================================ */
html[dir="rtl"] .nav-mobile { text-align: right; }
html[dir="rtl"] .mobile-actions { direction: rtl; }

/* ================================================================
   Game tabs and grid
   ================================================================ */
html[dir="rtl"] .game-tabs { direction: rtl; }
html[dir="rtl"] .game-grid { direction: rtl; }

/* Game tile labels: keep game names LTR (they're English) but flip the layout */
html[dir="rtl"] .game-tile__name,
html[dir="rtl"] .game-tile__provider,
html[dir="rtl"] .winner-card__game,
html[dir="rtl"] .winner-card__name { direction: ltr; text-align: right; }

/* ================================================================
   Winners section
   ================================================================ */
html[dir="rtl"] .winners-grid { direction: rtl; }
html[dir="rtl"] .winner-card { text-align: right; }
html[dir="rtl"] .winner-card__amount { direction: ltr; } /* Keep $ amount LTR */

/* Jackpot counter stays LTR (it's a number with $) */
html[dir="rtl"] .jackpot-amount { direction: ltr; }

/* ================================================================
   Stats bar
   ================================================================ */
html[dir="rtl"] .stat__value { direction: ltr; } /* Keep numerics LTR */

/* ================================================================
   Hero CTAs - flip button order naturally via flex
   ================================================================ */
html[dir="rtl"] .hero__ctas { direction: rtl; }

/* ================================================================
   Page-hero (sub-page banners)
   ================================================================ */
html[dir="rtl"] .page-hero { text-align: center; direction: rtl; }
html[dir="rtl"] .page-hero h1 { direction: rtl; }

/* ================================================================
   Highlight box (sport welcome bonus card on home)
   ================================================================ */
html[dir="rtl"] .highlight-box { direction: rtl; text-align: right; }

/* ================================================================
   Dollar amounts and English brand names should stay LTR inline
   - Use class="ltr" on inline spans inside Arabic text where needed
   ================================================================ */
html[dir="rtl"] .ltr,
html[dir="rtl"] [lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ================================================================
   Footer-badges - keep emoji + label in correct order
   ================================================================ */
html[dir="rtl"] .footer-badges { direction: rtl; }
html[dir="rtl"] .footer-badge { direction: rtl; }