/* =========================================================
   SOUQ 218 — Modern Authentication Design System
   نظام تصميم صفحات الدخول/التسجيل العصري (موبايل أولاً + RTL)
   يعتمد متغيرات الهوية من الـ layout (--primary / --secondary-base)
   ========================================================= */

/* منع أي فيض أفقي على صفحات المصادقة (آمن — هذا الملف يُحمّل في auth layout فقط) */
html, body{ overflow-x: hidden; max-width: 100%; }

.sq-auth-wrap{
  --sq-primary: var(--primary, #2080e0);
  --sq-primary-d: var(--hov-primary, #1a6cc0);
  --sq-cyan: var(--secondary-base, #60e0e0);
  --sq-navy: #14233a;
  --sq-ink: #1f2d3d;
  --sq-muted: #6b7a90;
  --sq-line: #e7eef6;
  --sq-bg: #eef3f9;
  --sq-danger: #e5484d;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 600px at 100% -10%, rgba(96,224,224,.14), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(32,128,224,.12), transparent 55%),
    var(--sq-bg);
  font-family: 'ArialNumbers', 'Tajawal', sans-serif;
}

/* ===== البطاقة الرئيسية (split-screen) ===== */
.sq-auth-card{
  width: 100%;
  max-width: 1060px;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(20,35,58,.45), 0 8px 24px -12px rgba(20,35,58,.18);
  display: grid;
  grid-template-columns: 1.02fr 1fr;
}
.sq-auth-card.sq-wide{ max-width: 1120px; }

/* ===== اللوحة البصرية (الجانب الملوّن) ===== */
.sq-auth-visual{
  position: relative;
  padding: 52px 44px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, var(--sq-navy) 0%, var(--sq-primary-d) 52%, var(--sq-primary) 100%);
  isolation: isolate;
}
/* صورة الخلفية القابلة للإدارة — مخفاة افتراضياً (التدرّج الهوياتي أنظف وأكثر اتساقاً).
   لتفعيل صورة خلفية حقيقية لاحقاً: غيّر display إلى block. */
.sq-auth-visual .sq-visual-bg{ display: none; }
/* طبقة تدرّج فوق الصورة */
.sq-auth-visual::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(155deg, rgba(20,35,58,.92) 0%, rgba(26,108,192,.82) 55%, rgba(32,128,224,.78) 100%);
}
/* دوائر زخرفية */
.sq-auth-visual .sq-orb{
  position: absolute; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 30% 30%, rgba(96,224,224,.55), rgba(96,224,224,0) 70%);
  filter: blur(2px);
}
.sq-auth-visual .sq-orb.o1{ width: 280px; height: 280px; top: -90px; inset-inline-end: -70px; }
.sq-auth-visual .sq-orb.o2{ width: 200px; height: 200px; bottom: -70px; inset-inline-start: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%); }
.sq-auth-visual .sq-ring{
  position: absolute; z-index:-1; inset-inline-end: 8%; top: 32%;
  width: 120px; height: 120px; border: 2px solid rgba(255,255,255,.18); border-radius: 50%;
}

/* شعار نصي (يطابق هوية سوق 218، يظهر مثالياً على كل الشاشات) */
.sq-auth-visual .sq-visual-brand{
  margin-bottom: auto; line-height: 1; align-self: flex-start; text-align: start;
  font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .5px;
  font-family: 'Tajawal', sans-serif;
}
.sq-auth-visual .sq-visual-brand b{ color: var(--sq-cyan); font-weight: 800; }

/* شعار سوق 218 كصورة بيضاء (يتغلّب على قواعد aiz-core للصور) */
.sq-auth-visual .sq-visual-logo{
  margin-bottom: auto; align-self: flex-start;
  height: 52px !important; width: auto !important; max-width: 240px !important;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1);            /* تحويل اللوقو الملوّن إلى أبيض نقي */
  -webkit-filter: brightness(0) invert(1);
}

.sq-visual-head{ margin-top: 28px; }
.sq-visual-head h2{ font-size: 30px; font-weight: 800; line-height: 1.3; margin: 0 0 10px; color:#fff; }
.sq-visual-head p{ font-size: 15px; font-weight: 400; color: rgba(255,255,255,.85); margin: 0; max-width: 34ch; }

.sq-visual-features{ list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.sq-visual-features li{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.92); }
.sq-visual-features .ic{
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  color: var(--sq-cyan);
}

/* ===== لوحة الـ form ===== */
.sq-auth-form{
  padding: 48px 46px;
  display: flex; flex-direction: column; justify-content: center;
  max-height: 100vh; overflow-y: auto;
}
.sq-auth-form .sq-mobilehead{ display: none; }

.sq-form-head{ margin-bottom: 22px; }
.sq-form-head h1{ font-size: 25px; font-weight: 800; color: var(--sq-ink); margin: 0 0 4px; }
.sq-form-head p{ font-size: 14px; color: var(--sq-muted); margin: 0; }

.sq-section-title{ font-size: 13px; font-weight: 700; color: var(--sq-primary);
  text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 10px; display:flex; align-items:center; gap:8px; }
.sq-section-title::before{ content:""; width:18px; height:2px; border-radius:2px; background: var(--sq-cyan); }

/* الحقول */
.sq-auth-form .form-group{ margin-bottom: 15px; }
.sq-auth-form label{ font-size: 13px; font-weight: 700; color: var(--sq-ink); margin-bottom: 7px; display: block; }
.sq-field{ position: relative; }
.sq-field > .sq-ic{
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: 15px; font-size: 19px; color: var(--sq-muted); pointer-events: none; z-index: 2;
}
.sq-auth-form .form-control,
.sq-auth-form input[type="text"],
.sq-auth-form input[type="email"],
.sq-auth-form input[type="tel"],
.sq-auth-form input[type="phone"],
.sq-auth-form input[type="password"]{
  height: 52px !important;
  width: 100%;
  border: 1.5px solid var(--sq-line) !important;
  border-radius: 14px !important;
  padding: 0 46px 0 46px !important;
  font-size: 14.5px;
  color: var(--sq-ink);
  background: #fbfcfe;
  transition: border-color .18s, box-shadow .18s, background .18s;
  box-shadow: none !important;
}
.sq-auth-form .form-control::placeholder{ color: #aab6c6; }
.sq-auth-form .form-control:focus{
  border-color: var(--sq-primary) !important;
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sq-primary) 14%, transparent) !important;
}
.sq-auth-form .form-control.is-invalid{ border-color: var(--sq-danger) !important; }
/* الحقل بلا أيقونة يسار/بادئة */
.sq-field.no-ic .form-control{ padding-inline-start: 16px !important; }

/* زر إظهار كلمة المرور */
.sq-auth-form .position-relative .password-toggle{
  position: absolute !important; top: 50% !important; transform: translateY(-50%);
  inset-inline-end: 14px !important; inset-inline-start: auto !important;
  font-size: 20px !important; color: var(--sq-muted); cursor: pointer; z-index: 3;
}
.sq-auth-form .position-relative .password-toggle:hover{ color: var(--sq-primary); }

/* رسالة الخطأ */
.sq-auth-form .invalid-feedback{ font-size: 12px; color: var(--sq-danger); margin-top: 5px; }
.sq-hint{ font-size: 12px; color: var(--sq-muted); margin-top: 5px; display:block; }

/* صف تذكّرني / نسيت كلمة المرور */
.sq-row-between{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; flex-wrap: wrap; }
.sq-auth-form .aiz-checkbox{ font-size: 13px !important; color: var(--sq-muted); margin: 0; }
.sq-forgot{ font-size: 13px; font-weight: 600; color: var(--sq-primary); }
.sq-forgot:hover{ color: var(--sq-primary-d); text-decoration: underline; }

/* الزر الأساسي */
.sq-auth-form .btn-primary,
.sq-btn-submit{
  height: 54px !important;
  width: 100%;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sq-primary) 0%, var(--sq-primary-d) 100%) !important;
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--sq-primary) 70%, transparent);
  transition: transform .15s, box-shadow .2s, filter .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.sq-auth-form .btn-primary:hover,
.sq-btn-submit:hover{ transform: translateY(-2px); filter: brightness(1.04);
  box-shadow: 0 20px 34px -14px color-mix(in srgb, var(--sq-primary) 75%, transparent); }
.sq-auth-form .btn-primary:active,
.sq-btn-submit:active{ transform: translateY(0); }

/* فاصل "أو" */
.sq-divider{ display:flex; align-items:center; gap:14px; margin: 22px 0 16px; color: var(--sq-muted); font-size: 12.5px; }
.sq-divider::before, .sq-divider::after{ content:""; flex:1; height:1px; background: var(--sq-line); }

/* السوشيال */
.sq-auth-form ul.social.colored{ display:flex; gap:12px; justify-content:center; padding:0; margin:0 0 6px; list-style:none; }
.sq-auth-form ul.social.colored li{ margin:0 !important; }
.sq-auth-form ul.social.colored a{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:20px;
  border:1.5px solid var(--sq-line); color: var(--sq-ink); transition: all .18s; background:#fff;
}
.sq-auth-form ul.social.colored a:hover{ border-color: var(--sq-primary); color: var(--sq-primary); transform: translateY(-2px); }

/* رابط أسفل (سجّل/دخول) */
.sq-switch{ text-align: center; font-size: 13.5px; color: var(--sq-muted); margin: 18px 0 0; }
.sq-switch a{ font-weight: 700; color: var(--sq-primary); }
.sq-switch a:hover{ text-decoration: underline; }

/* زر العودة للصفحة الرئيسية */
.sq-back{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13.5px; font-weight:700; color: var(--sq-primary);
  margin: 18px auto 0; padding: 11px 20px; border:1.5px solid var(--sq-line);
  border-radius:12px; transition: all .18s; align-self:center; background:#fff; }
.sq-back:hover{ border-color: var(--sq-primary); color: var(--sq-primary-d);
  background: color-mix(in srgb, var(--sq-primary) 6%, #fff); transform: translateY(-1px); }
.sq-back i{ font-size: 18px; }

/* جدول الديمو */
.sq-auth-form .table{ border-radius: 10px; overflow: hidden; font-size: 13px; }

/* intl-tel-input توافق — RTL: العلم وكود البلد يمين الحقل، والرقم يُكتب من اليمين */
.sq-auth-form .iti{ width: 100%; display: block; }
.sq-auth-form .iti__flag-container{ z-index: 5; }
[dir="rtl"] .sq-auth-form .iti--separate-dial-code .iti__flag-container,
[dir="rtl"] .sq-auth-form .iti--separate-dial-code .iti__selected-flag{
  left: auto !important; right: 0 !important; border-radius: 0 14px 14px 0;
}
[dir="rtl"] .sq-auth-form .iti--separate-dial-code .iti__selected-dial-code{ direction: ltr; }
/* الحقل: مساحة للعلم+الكود يمين، النص (الرقم) يبدأ من اليمين */
[dir="rtl"] .sq-auth-form .phone-form-group input[type="tel"]{
  padding-right: 96px !important; padding-left: 16px !important;
  text-align: right; direction: ltr;
}
[dir="rtl"] .sq-auth-form .iti__country-list{ text-align: right; direction: rtl; }
/* قائمة الدول تفتح بمحاذاة صحيحة */
.sq-auth-form .iti--separate-dial-code .iti__country-list{ white-space: nowrap; }

/* ===== أنيميشن دخول ===== */
@keyframes sqFadeUp{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }
.sq-auth-card{ animation: sqFadeUp .5s ease both; }

/* =========================================================
   RESPONSIVE — موبايل أولاً
   ========================================================= */
@media (max-width: 900px){
  .sq-auth-wrap{ display: block; padding: 0; min-height: 100vh; overflow-x: hidden; }
  .sq-auth-card{
    width: 100%; max-width: 100%; min-width: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    display: flex; flex-direction: column;
  }
  .sq-auth-card.sq-wide{ max-width: 100%; }
  /* تأمين ضد الفيض الأفقي: flex children تنكمش تحت محتواها (min-width:0) */
  .sq-auth-card > *, .sq-auth-form, .sq-auth-visual,
  .sq-auth-form form, .sq-auth-form .form-group, .sq-auth-form .iti{ min-width: 0; max-width: 100%; }
  /* اللوحة البصرية تصبح هيدر علوي مضغوط */
  .sq-auth-visual{
    padding: 38px 26px 70px;
    border-radius: 0 0 30px 30px;
    flex: 0 0 auto;
  }
  .sq-auth-visual .sq-visual-brand{ margin-bottom: 14px; font-size: 25px; }
  .sq-auth-visual .sq-visual-logo{ height: 42px !important; margin-bottom: 16px; }
  .sq-visual-head h2{ font-size: 23px; }
  .sq-visual-head p{ font-size: 13.5px; }
  .sq-visual-features{ display: none; }          /* تُخفى على الموبايل لتوفير المساحة */
  .sq-auth-visual .sq-orb,
  .sq-auth-visual .sq-ring{ display: none; }   /* الزخارف تُخفى على الموبايل — التدرّج أنظف */

  /* بطاقة الفورم ترتفع فوق الهيدر */
  .sq-auth-form{
    margin-top: -42px;
    background: #fff;
    border-radius: 26px 26px 0 0;
    padding: 34px 22px 40px;
    flex: 1 1 auto;
    max-height: none;
    justify-content: flex-start;     /* الفورم يبدأ من الأعلى (لا فراغ علوي) */
    box-shadow: 0 -10px 30px -18px rgba(20,35,58,.25);
    position: relative; z-index: 2;
  }
  .sq-form-head{ margin-bottom: 18px; }
}

@media (max-width: 420px){
  .sq-auth-visual{ padding: 30px 20px 64px; }
  .sq-visual-head h2{ font-size: 21px; }
  .sq-auth-form{ padding: 26px 16px 34px; }
  .sq-form-head h1{ font-size: 22px; }
  .sq-auth-form .form-control{ height: 50px !important; }
}

/* شاشات كبيرة جداً: تكبير لطيف */
@media (min-width: 1400px){
  .sq-auth-card{ max-width: 1140px; }
  .sq-auth-visual{ padding: 60px 52px; }
  .sq-auth-form{ padding: 56px 56px; }
}