/* ==========================================================================
   Auth layout — النموذج + صورة المتجر
   في العربي النموذج يمين والصورة يسار (مثل التصميم)، وفي الإنجليزي العكس.
   ========================================================================== */

.ui-auth {
  min-block-size: 100vh;
  background: var(--color-bg);
}

/* الشاشات الكبيرة: الصورة ثابتة والسكرول داخل قسم النموذج بس */
@media (min-width: 992px) {
  .ui-auth {
    display: grid;
    grid-template-columns: minmax(24rem, 0.9fr) 2fr;
    block-size: 100vh;
    overflow: hidden;
  }

  .ui-auth__panel {
    block-size: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.ui-auth__panel {
  position: relative;
  display: flex;
  min-block-size: 100vh;
  padding: var(--space-12) var(--space-6);
}

.ui-auth__lang {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  color: var(--color-text-muted);
}

.ui-auth__box {
  /* margin: auto يوسّط النموذج، ولو صار أطول من الشاشة يبدأ من فوق بدل ما ينقص أوله */
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: 24rem;
}

/* النماذج الطويلة (إنشاء حساب): صندوق أعرض والحقول عمودين من 576 وفوق */
.ui-auth__box--wide { max-inline-size: 36rem; }

@media (min-width: 992px) {
  .ui-auth:has(.ui-auth__box--wide) { grid-template-columns: minmax(36rem, 1.1fr) 1.6fr; }
}

@media (min-width: 576px) {
  .ui-auth__box--wide .ui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* روابط ثانوية تحت/جنب النموذج (نسيت كلمة المرور...) */
.ui-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* رمز التحقق: خانة كبيرة بمسافات بين الأرقام */
.ui-auth__code {
  font-size: var(--text-xl);
  letter-spacing: .5em;
  text-align: center;
  font-weight: var(--weight-bold);
}

.ui-auth__logo {
  inline-size: 4.5rem;
  block-size: auto;
  align-self: center;
}

.ui-auth__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
}

.ui-auth__title span {
  color: var(--color-secondary);
}

/* العناوين بالعربي ما تحتاج الخط الإنجليزي */
:lang(ar) .ui-auth__title,
:lang(ur) .ui-auth__title {
  font-family: var(--font-ar);
}

.ui-auth__footer {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* الصورة — تختفي على الجوال والتابلت */
.ui-auth__media {
  display: none;
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  background-size: cover;
  background-position: center;
}

@media (min-width: 992px) {
  .ui-auth__media { display: block; }
}

/* ---------- ردّ فعل الدخول (ui/js/pages/login.js) ---------- */
/* بعد 3 محاولات غلط: "نسيت كلمة المرور؟" برتقالي وينبض مرتين */
.ui-auth__row a.is-hint { color: var(--color-secondary); font-weight: var(--weight-bold); animation: ui-auth-hint 1.2s ease 2; }
@keyframes ui-auth-hint { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
/* القبول: الحقول تخضر لحظة قبل الانتقال */
.ui-field.is-valid .ui-input { border-color: var(--color-success); box-shadow: 0 0 0 3px rgb(31 157 85 / .15); }
@media (prefers-reduced-motion: reduce) { .ui-auth__row a.is-hint { animation: none; } }

/* ---------- الشعار يلزق مع السكرول (إنشاء الحساب — يتابع بناء الشعار وهو يعبّي) ----------
   الحاوية sticky (داخل قسم النموذج على الكمبيوتر، والصفحة على الجوال)، ولما تلزق (is-stuck من signup.js)
   تصغر بظل على الشعار نفسه (بدون خلفية) — التصغير transform على الحاوية عشان ما يتعارض مع حركة الشعار نفسه وما تتحرك الصفحة */
.ui-auth__logo-sticky {
  position: sticky;
  inset-block-start: var(--space-3);
  z-index: 5;
  align-self: center;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  transform-origin: 50% 0;
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), filter .25s ease;
}
.ui-auth__logo-sticky .ui-auth__logo { align-self: auto; }
.ui-auth__logo-sticky.is-stuck {
  transform: scale(.72);
  /* خلفية شفافة — الظل على شكل الشعار نفسه (drop-shadow يتبع حدود القطع) */
  filter: drop-shadow(0 6px 10px rgb(15 23 42 / .28)) drop-shadow(0 1px 2px rgb(15 23 42 / .18));
}
@media (prefers-reduced-motion: reduce) { .ui-auth__logo-sticky { transition: none; } }
/* الكمبيوتر: السكرول داخل قسم النموذج وحد الالتصاق يحسب من بعد هامشه (space-12) — نرفعه لنفس مسافة الجوال */
@media (min-width: 992px) { .ui-auth__logo-sticky { inset-block-start: calc(var(--space-3) - var(--space-12)); } }