/**
 * Landing / auth pages RTL — load after landing-auth.css
 * Complements public/css/rtl.css ([dir="rtl"] base Arabic typography)
 */

/* === ARABIC FONT ENFORCEMENT === */
[dir="rtl"] html,
[dir="rtl"] body,
[dir="rtl"] *,
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] div, [dir="rtl"] section, [dir="rtl"] article, [dir="rtl"] aside,
[dir="rtl"] nav, [dir="rtl"] footer, [dir="rtl"] input, [dir="rtl"] textarea,
[dir="rtl"] select, [dir="rtl"] button, [dir="rtl"] a, [dir="rtl"] label,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .heading, [dir="rtl"] .section-title, [dir="rtl"] .page-title,
[dir="rtl"] .hero-title, [dir="rtl"] .font-display,
[dir="rtl"] .login-title, [dir="rtl"] .login-sub,
[dir="rtl"] .reg-title, [dir="rtl"] .reg-sub,
[dir="rtl"] .chpw-title, [dir="rtl"] .chpw-sub,
[dir="rtl"] .fp-title, [dir="rtl"] .fp-sub,
[dir="rtl"] .bp-title, [dir="rtl"] .bp-sub,
[dir="rtl"] .reg-step-num, [dir="rtl"] .reg-step-title,
[dir="rtl"] .fp-step-num, [dir="rtl"] .fp-step-title,
[dir="rtl"] .bp-step-num, [dir="rtl"] .bp-step-title {
  font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* Enhanced Arabic typography */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div {
  line-height: 1.7;
  letter-spacing: 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  line-height: 1.5;
  letter-spacing: 0;
}

/*
 * Auth topbars: keep physical layout identical to LTR (EN).
 * Document dir=rtl mirrors flex order; forcing ltr keeps logo on the left,
 * back/home + lang + actions on the right.
 */
[dir="rtl"] .login-topbar,
[dir="rtl"] .reg-topbar,
[dir="rtl"] .fp-topbar,
[dir="rtl"] .bp-topbar {
  direction: ltr;
}

[dir="rtl"] .login-topbar__right,
[dir="rtl"] .reg-topbar__right,
[dir="rtl"] .fp-topbar__right,
[dir="rtl"] .bp-topbar__right {
  justify-content: flex-end;
}

/*
 * Topbar links: keep the same visual order as English (chevron, then label).
 * Outer topbar is direction:ltr; Arabic label text still shapes RTL via Unicode bidi.
 */
[dir="rtl"] .login-topbar__link,
[dir="rtl"] .reg-topbar__link,
[dir="rtl"] .fp-topbar__link,
[dir="rtl"] .bp-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-direction: row;
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

[dir="rtl"] .login-topbar__link-arrows,
[dir="rtl"] .reg-topbar__link-arrows,
[dir="rtl"] .fp-topbar__link-arrows,
[dir="rtl"] .bp-topbar__link-arrows {
  transform: none;
}

[dir="rtl"] .fp-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-direction: row-reverse;
}

[dir="rtl"] .fp-foot__arrows {
  transform: scaleX(-1);
}

[dir="rtl"] .reg-steps,
[dir="rtl"] .reg-nav,
[dir="rtl"] .fp-steps,
[dir="rtl"] .bp-steps {
  direction: rtl;
}

/* Register: next/back arrows point in reading direction */
[dir="rtl"] .reg-btn--next.reg-btn--with-arrow {
  flex-direction: row-reverse;
}

[dir="rtl"] .reg-btn--next.reg-btn--with-arrow .reg-btn-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .reg-btn--back.reg-btn--with-arrow {
  flex-direction: row-reverse;
}

[dir="rtl"] .reg-btn--back.reg-btn--with-arrow .reg-btn-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .reg-pw-wrap .reg-field__input,
[dir="rtl"] .fp-input-wrap .fp-field__input.has-pw-toggle {
  padding-inline-end: 48px;
  padding-inline-start: 14px;
}

[dir="rtl"] .reg-pw-toggle,
[dir="rtl"] .fp-pw-toggle {
  inset-inline-end: 14px;
  left: auto;
  right: auto;
}

[dir="rtl"] .reg-referral-wrap {
  flex-direction: row-reverse;
}

[dir="rtl"] .reg-referral-verify-btn {
  margin-inline-start: 0;
  margin-inline-end: 8px;
}

[dir="rtl"] .login-card,
[dir="rtl"] .reg-card,
[dir="rtl"] .chpw-card,
[dir="rtl"] .fp-card,
[dir="rtl"] .bp-card {
  text-align: right;
}

/*
 * Login card — Create account / Forgot password dropdowns:
 * Page RTL mirrors flex alignment, so flex-end / align-self:end sit on the physical LEFT.
 * Isolate LTR on wrappers so triggers stay on the same side as English (under the fields, right).
 * Menus use RTL for item content; keep physical right:0 anchor like the LTR build.
 */
[dir="rtl"] .login-create-wrap {
  direction: ltr;
  unicode-bidi: isolate;
  justify-content: flex-end;
}

[dir="rtl"] .login-fp-wrap {
  direction: ltr;
  unicode-bidi: isolate;
  align-self: flex-start;
}

[dir="rtl"] .login-create-toggle,
[dir="rtl"] .login-fp-toggle {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

[dir="rtl"] .login-create-menu,
[dir="rtl"] .login-fp-menu {
  direction: rtl;
  text-align: right;
  left: auto;
  right: 0;
}

[dir="rtl"] .login-create-menu__item,
[dir="rtl"] .login-fp-menu__item {
  flex-direction: row;
  direction: rtl;
}

[dir="rtl"] .login-create-menu__title,
[dir="rtl"] .login-fp-menu__title {
  text-align: right;
  font-family: 'Noto Kufi Arabic', sans-serif !important;
  letter-spacing: 0;
}

[dir="rtl"] .login-field__label,
[dir="rtl"] .reg-field__label,
[dir="rtl"] .fp-field__label {
  text-align: right;
}

[dir="rtl"] .login-field__input:not(.iti__tel-input),
[dir="rtl"] .reg-field__input:not(.iti__tel-input),
[dir="rtl"] .fp-field__input:not(.iti__tel-input),
[dir="rtl"] .bp-field__input:not(.iti__tel-input) {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .reg-field__select,
[dir="rtl"] .bp-field__select,
[dir="rtl"] select.reg-field__input,
[dir="rtl"] select.bp-field__input {
  text-align: right;
  direction: rtl;
  padding-inline-start: 14px;
  padding-inline-end: 36px;
  background-position: left 12px center;
}

[dir="rtl"] .chpw-reqs,
[dir="rtl"] .chpw-notice {
  text-align: right;
}

[dir="rtl"] .chpw-req {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .chpw-notice {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .chpw-notice svg,
[dir="rtl"] .chpw-notice i {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

/* Forgot-password email icon + padding (landing-auth uses physical left/right) */
[dir="rtl"] .fp-input-icon {
  left: auto;
  right: auto;
  inset-inline-start: 14px;
}

[dir="rtl"] .fp-input-wrap .fp-field__input:not(.has-pw-toggle) {
  padding-inline-start: 42px;
  padding-inline-end: 14px;
}

[dir="rtl"] .fp-input-wrap .fp-field__input.has-pw-toggle {
  padding-inline-start: 42px;
  padding-inline-end: 48px;
}

/* Password requirement lists */
[dir="rtl"] .fp-pw-reqs ul,
[dir="rtl"] .chpw-reqs ul {
  text-align: right;
}

[dir="rtl"] .fp-pw-reqs li,
[dir="rtl"] .chpw-reqs li {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .fp-pw-reqs li i,
[dir="rtl"] .chpw-reqs li i {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

/* Checkboxes and agreement labels */
[dir="rtl"] .reg-check,
[dir="rtl"] .bp-check,
[dir="rtl"] .login-check {
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: right;
}

[dir="rtl"] .reg-check input[type="checkbox"],
[dir="rtl"] .bp-check input[type="checkbox"],
[dir="rtl"] .login-check input[type="checkbox"] {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

[dir="rtl"] .bp-channel-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .bp-channel-item input[type="checkbox"] {
  margin-inline-start: 10px;
  margin-inline-end: 0;
}

/* Buttons with icons */
[dir="rtl"] .login-btn,
[dir="rtl"] .reg-btn,
[dir="rtl"] .fp-btn,
[dir="rtl"] .bp-btn,
[dir="rtl"] .chpw-btn {
  flex-direction: row-reverse;
}

[dir="rtl"] .login-btn i,
[dir="rtl"] .reg-btn i,
[dir="rtl"] .fp-btn i,
[dir="rtl"] .bp-btn i,
[dir="rtl"] .chpw-btn i {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

[dir="rtl"] button i[data-lucide="arrow-right"],
[dir="rtl"] button i[data-lucide="arrow-left"],
[dir="rtl"] button i[data-lucide="chevron-right"],
[dir="rtl"] button i[data-lucide="chevron-left"] {
  transform: scaleX(-1);
}

/* Language dropdown (inline partial on landing pages): menu + options RTL */
[dir="rtl"] .landing-lang-menu {
  left: 0;
  right: auto;
}

[dir="rtl"] .landing-lang-btn {
  flex-direction: row-reverse;
}

[dir="rtl"] .landing-lang-option {
  flex-direction: row-reverse;
  text-align: right;
}

/* Error messages and validation */
[dir="rtl"] .reg-field__error,
[dir="rtl"] .bp-field__error,
[dir="rtl"] .fp-field__error,
[dir="rtl"] .login-field__error {
  text-align: right;
  direction: rtl;
}

/* Success and info messages */
[dir="rtl"] .fp-success,
[dir="rtl"] .reg-success,
[dir="rtl"] .bp-success {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .fp-success-icon,
[dir="rtl"] .reg-success-icon,
[dir="rtl"] .bp-success-icon {
  margin-inline-start: 12px;
  margin-inline-end: 0;
}