/* ================================================================
   Aqua Spins AE - RTL overrides for Arabic (Palette C: Midnight Ocean + Pearl)
   Loaded only when <html dir="rtl"> - Arabic-only site
   ================================================================ */

/* Arabic font stack */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

html[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system,
               'Helvetica Neue', Arial, sans-serif;
  direction: rtl;
  text-align: right;
}

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

/* ================================================================
   Hero section
   ================================================================ */
html[dir="rtl"] .hero { text-align: right; }
html[dir="rtl"] .hero__content { direction: rtl; }
html[dir="rtl"] .hero h1 { direction: rtl; }
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; }
html[dir="rtl"] .hero__ctas { direction: rtl; flex-direction: row-reverse; }

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

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

html[dir="rtl"] .check-list { padding-right: 0; padding-left: 0; }
html[dir="rtl"] .check-list li {
  padding-right: 1.75em;
  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"] .info-grid { direction: rtl; }
html[dir="rtl"] .two-col { direction: rtl; }

/* ================================================================
   Content sections
   ================================================================ */
html[dir="rtl"] .content-section { direction: rtl; text-align: right; }
html[dir="rtl"] .content-section h2,
html[dir="rtl"] .content-section h3,
html[dir="rtl"] .content-section h4,
html[dir="rtl"] .content-section p { direction: rtl; text-align: right; }

/* ================================================================
   FAQ accordion
   ================================================================ */
html[dir="rtl"] .faq-item summary {
  padding-right: 0;
  padding-left: 2.5rem;
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] .faq-item summary::after,
html[dir="rtl"] .faq-item summary::marker {
  right: auto;
  left: 1rem;
}
html[dir="rtl"] .faq-item summary::-webkit-details-marker { display: none; }
html[dir="rtl"] .faq-answer { text-align: right; direction: rtl; }

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

/* ================================================================
   Games grid and tabs
   ================================================================ */
html[dir="rtl"] .game-tabs { direction: rtl; }
html[dir="rtl"] .game-grid,
html[dir="rtl"] .games-grid { direction: rtl; }
html[dir="rtl"] .game-tile__name,
html[dir="rtl"] .game-tile__provider { 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; }
html[dir="rtl"] .winner-card__game,
html[dir="rtl"] .winner-card__name { direction: ltr; text-align: right; }

/* Keep jackpot counter LTR (numbers) */
html[dir="rtl"] .jackpot-amount { direction: ltr; }

/* ================================================================
   Stats bar - keep numbers LTR
   ================================================================ */
html[dir="rtl"] .stats-bar { direction: rtl; }
html[dir="rtl"] .stat { text-align: center; }
html[dir="rtl"] .stat__value { direction: ltr; display: block; }
html[dir="rtl"] .stat__label { direction: rtl; }

/* ================================================================
   Offer feed / bonus cards
   ================================================================ */
html[dir="rtl"] .offer-feed { direction: rtl; }
html[dir="rtl"] .offer-card { text-align: right; direction: rtl; }
html[dir="rtl"] .offer-card .badge { direction: rtl; }

/* ================================================================
   Highlight box
   ================================================================ */
html[dir="rtl"] .highlight-box { direction: rtl; text-align: right; }

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

/* ================================================================
   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; direction: rtl; }
html[dir="rtl"] .mobile-actions { direction: rtl; }

/* ================================================================
   Euro/number amounts stay LTR inline
   ================================================================ */
html[dir="rtl"] .ltr,
html[dir="rtl"] [lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline;
}

/* ================================================================
   Pearl accent color overrides for Arabic identity
   ================================================================ */
html[dir="rtl"] .page-hero {
  background: linear-gradient(135deg, var(--color-bg, #03101f) 0%, var(--color-surface, #0a2238) 100%);
}

/* ================================================================
   Sections intro
   ================================================================ */
html[dir="rtl"] .section-intro { direction: rtl; text-align: right; }
html[dir="rtl"] .wi-page-header { direction: rtl; text-align: right; }
html[dir="rtl"] .wi-page-header h1 { direction: rtl; }

/* ================================================================
   Body text - ensure all paragraphs are RTL
   ================================================================ */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  direction: rtl;
}