/* ================================================================
   Dar Al-Ilm Custom Auth  ·  RTL Stylesheet v2.0
   Arabic (RTL) layout overrides — loaded only when dir="rtl"
   ================================================================ */

/* ── Font override for Arabic ─────────────────────────────────── */
.daai-page[dir="rtl"],
.daai-page[dir="rtl"] * {
  font-family: 'Tajawal', system-ui, sans-serif;
}

/* ── Flip the split-screen:
     Visual panel  LEFT  |  Form panel  RIGHT
   ────────────────────────────────────────── */
.daai-page[dir="rtl"] {
  flex-direction: row-reverse;
}

/* ── Language switcher: move to left edge ─────────────────────── */
.daai-page[dir="rtl"] .daai-lang-wrap {
  right: auto;
  left:  22px;
}

/* ── Input padding: icon on RIGHT, toggle on LEFT ─────────────── */
.daai-page[dir="rtl"] .daai-field-icon {
  left:  auto;
  right: 16px;
}

.daai-page[dir="rtl"] .daai-input {
  padding:    0 48px 0 18px;
  text-align: right;
}

.daai-page[dir="rtl"] .daai-textarea {
  padding: 14px 48px 14px 18px;
}

.daai-page[dir="rtl"] .daai-field--textarea .daai-field-icon {
  right: 16px;
  left:  auto;
}

/* ── Password toggle: mirror to left ──────────────────────────── */
.daai-page[dir="rtl"] .daai-pw-toggle {
  right: auto;
  left:  13px;
}

/* ── Remember / forgot row: reverse order ─────────────────────── */
.daai-page[dir="rtl"] .daai-remember-row {
  flex-direction: row-reverse;
}

/* ── Back link arrow: flip horizontally ───────────────────────── */
.daai-page[dir="rtl"] .daai-back-link svg {
  transform: scaleX(-1);
}

.daai-page[dir="rtl"] .daai-back-link:hover svg {
  transform: scaleX(-1) translateX(-3px);
}

/* ── Button arrow: animate leftward ───────────────────────────── */
.daai-page[dir="rtl"] .daai-submit-btn:hover .daai-btn-arrow {
  transform: translateX(-5px);
}

/* Rotate the arrow SVG for RTL direction */
.daai-page[dir="rtl"] .daai-btn-arrow svg {
  transform: scaleX(-1);
}

/* ── Feature items: animate opposite direction ─────────────────── */
.daai-page[dir="rtl"] .daai-feature-item:hover {
  transform: translateX(-5px);
}

/* ── Feature text: right-aligned ─────────────────────────────── */
.daai-page[dir="rtl"] .daai-feature-text {
  text-align: right;
}

/* ── Visual title: right-aligned when RTL ────────────────────── */
.daai-page[dir="rtl"] .daai-visual-title,
.daai-page[dir="rtl"] .daai-visual-sub {
  text-align: center; /* keep centered in the panel */
}

/* ── Form title gradient direction ────────────────────────────── */
.daai-page[dir="rtl"] .daai-form-title {
  background: linear-gradient(225deg, var(--a-500) 0%, var(--a-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   Responsive: override flex-direction for stacked mobile layout
   ================================================================ */

@media (max-width: 820px) {
  .daai-page[dir="rtl"] {
    flex-direction: column; /* stack even in RTL */
  }

  .daai-page[dir="rtl"] .daai-lang-wrap {
    right: auto;
    left:  16px;
  }
}