/* ─── RTL / Arabic support ──────────────────────────────────
 * Applied only when <html dir="rtl"> (Arabic language).
 * Words flow right-to-left, while numeric/technical containers
 * keep their natural left-to-right reading with unicode-bidi.
 * ───────────────────────────────────────────────────────────── */

/* Arabic-friendly font stack */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, "Helvetica Neue",
    Arial, sans-serif;
}

/* Remove latin-specific letter-spacing quirks */
html[dir="rtl"] .header-title-inline,
html[dir="rtl"] .header-title-large,
html[dir="rtl"] .grouped-item-label,
html[dir="rtl"] .stat-pill-label,
html[dir="rtl"] .grouped-section-header,
html[dir="rtl"] .landing-hero-content h1,
html[dir="rtl"] .success-page h1 {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .grouped-section-header {
  text-transform: none;
}

/* Header slots flip sides in RTL */
html[dir="rtl"] .header-left {
  left: auto !important;
  right: 16px !important;
}
html[dir="rtl"] .header-right {
  right: auto !important;
  left: 16px !important;
}
html[dir="rtl"] .header-title-large {
  text-align: right !important;
}

/* Directional icons get mirrored so their semantics feel right in RTL */
html[dir="rtl"] .lucide-arrow-left,
html[dir="rtl"] .lucide-arrow-right,
html[dir="rtl"] .lucide-chevron-left,
html[dir="rtl"] .lucide-chevron-right,
html[dir="rtl"] .lucide-log-in,
html[dir="rtl"] .lucide-log-out,
html[dir="rtl"] .lucide-external-link,
html[dir="rtl"] .lucide-send,
html[dir="rtl"] .lucide-corner-down-left,
html[dir="rtl"] .lucide-corner-down-right,
html[dir="rtl"] .lucide-refresh-cw,
html[dir="rtl"] .lucide-undo,
html[dir="rtl"] .lucide-redo {
  transform: scaleX(-1);
}

/* ─── Numbers & technical values always read LTR ───
 * Use the .ltr class or [data-ltr] in templates, or rely on the
 * element selectors below which cover the numeric widgets. */
html[dir="rtl"] .ltr,
html[dir="rtl"] [data-ltr],
html[dir="rtl"] .stat-pill-value,
html[dir="rtl"] .zinc-countdown,
html[dir="rtl"] .zinc-countdown-value,
html[dir="rtl"] .zinc-countdown-unit,
html[dir="rtl"] .success-points-value,
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[inputmode="tel"],
html[dir="rtl"] input[pattern],
html[dir="rtl"] .raffle-points-input {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

html[dir="rtl"] .zinc-countdown {
  display: inline-flex;
}

/* Keep steppers/point counters aligned */
html[dir="rtl"] .raffle-points-input {
  text-align: center !important;
}

/* Markdown content reads right-to-left; keep tables LTR */
html[dir="rtl"] .md-content {
  text-align: right;
}
html[dir="rtl"] .md-content p {
  text-align: right;
}

/* Join/chevron value spacing mirrors properly */
html[dir="rtl"] .grouped-item-value {
  justify-content: flex-end;
}

/* Landing hero */
html[dir="rtl"] .landing-hero-content {
  text-align: center;
}

/* Onboarding overlay slide direction mirrors in RTL.
   Order matters: each state rule must win over the generic one. */
html[dir="rtl"] .ob-layer .ob-card {
  transform: translateX(-40px);
}
html[dir="rtl"] .ob-layer.active .ob-card {
  transform: translateX(0);
}
html[dir="rtl"] .ob-layer.exit .ob-card {
  transform: translateX(40px);
}

/* Language button on landing keeps stable size while it cycles text */
#lang-cycle-btn {
  min-width: 64px;
  text-align: center;
}

/* Language radio page */
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-option:not(:last-child) {
  border-bottom: 0.5px solid var(--color-separator);
}
.lang-option .form-checkbox {
  flex-shrink: 0;
}