/* ==========================================================================
   صفحة الدخول — login.php (تصميم 2026-09-25)
   بادئة .lg-* مستقلة عمداً: forgot_password.php ما زالت تستعمل .auth-*
   من style.css، فلا يتغيّر شكلها بتغيير هذه الصفحة.
   ========================================================================== */
.lg-body{
  --lg-bg:#F7F5FC; --lg-surface:#FFFFFF; --lg-line:#ECE6F5; --lg-soft:#F1EAFB;
  --lg-tx:#1B2436; --lg-tx2:#4A5468; --lg-tx3:#727C90;
  --lg-accent:var(--brand-a, #6C3BAA); --lg-accent-tx:#5B2E96;
  margin:0; min-height:100vh; background:var(--lg-bg); color:var(--lg-tx);
  font-family:"Almarai", system-ui, "Segoe UI", Tahoma, sans-serif;
}
[data-theme="dark"] .lg-body{
  --lg-bg:#0F1320; --lg-surface:#171C2B; --lg-line:#262D40; --lg-soft:#2A1F43;
  --lg-tx:#EDEFF6; --lg-tx2:#C1C6D4; --lg-tx3:#8D95A8; --lg-accent-tx:#C7A9F5;
  color-scheme:dark;
}

.lg{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }

/* --- عمود النموذج --- */
.lg-form-col{ display:flex; flex-direction:column; padding:20px 24px 32px; }
.lg-top{ display:flex; justify-content:flex-end; }
.lg-theme{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--lg-line);
  background:var(--lg-surface); color:var(--lg-tx3); cursor:pointer; display:grid; place-items:center;
}
.lg-theme:hover{ color:var(--lg-accent-tx); border-color:var(--lg-accent); }
.lg-form-wrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 0; }
.lg-form{ width:100%; max-width:380px; display:grid; gap:18px; }
.lg-head h1{ margin:0; font-size:28px; font-weight:800; line-height:1.3; }
.lg-head p{ margin:6px 0 0; color:var(--lg-tx3); font-size:15px; }

.lg-alert{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:var(--danger-bg, #FEF2F2); color:var(--danger-tx, #B91C1C);
  border:1px solid var(--danger-bd, #FECACA); font-size:13.5px; line-height:1.6;
}
.lg-alert i{ margin-top:3px; }

.lg-group{ display:grid; gap:7px; }
.lg-label{ font-size:13.5px; font-weight:800; color:var(--lg-tx); }
.lg-field{
  display:flex; align-items:center; gap:10px; height:50px; padding:0 14px;
  border-radius:14px; border:1.5px solid var(--lg-line); background:var(--lg-surface);
  transition:border-color .15s, box-shadow .15s;
}
.lg-field:focus-within{ border-color:var(--lg-accent); box-shadow:0 0 0 4px var(--lg-soft); }
.lg-field > i{ color:var(--lg-tx3); font-size:15px; width:18px; text-align:center; flex:none; }
.lg-input{
  flex:1; min-width:0; height:100%; border:0; outline:none; background:none;
  font:inherit; font-size:15.5px; color:var(--lg-tx);
}
.lg-input::placeholder{ color:var(--lg-tx3); opacity:.75; }
.lg-input--num{ letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.lg-eye{ border:0; background:none; color:var(--lg-tx3); cursor:pointer; padding:6px; display:grid; place-items:center; }
.lg-eye:hover{ color:var(--lg-accent-tx); }
.lg-hint{ margin:0; font-size:12.5px; color:var(--warn-tx, #B45309); display:flex; gap:6px; align-items:center; }

.lg-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.lg-check{ display:flex; align-items:center; gap:8px; color:var(--lg-tx2); cursor:pointer; }
.lg-check input{ width:17px; height:17px; accent-color:var(--lg-accent); }
.lg-link{ color:var(--lg-accent-tx); font-weight:800; text-decoration:none; }
.lg-link:hover{ text-decoration:underline; }

.lg-submit{
  height:52px; border:0; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:16px; font-weight:800; color:#fff;
  background:var(--lg-accent); box-shadow:0 10px 22px -10px rgba(108,59,170,.85);
  transition:background .15s, transform .15s;
}
.lg-submit:hover{ background:#5d2f98; transform:translateY(-1px); }
.lg-submit:disabled{ opacity:.75; cursor:wait; transform:none; }

.lg-help{ margin:4px 0 0; text-align:center; font-size:13px; color:var(--lg-tx3); }
.lg-help a{ color:var(--lg-tx2); font-weight:700; text-decoration:none; }
.lg-help a:hover{ color:var(--lg-accent-tx); }
.lg-help .fa-whatsapp{ color:var(--wa, #128C4A); }

.lg-form :focus-visible, .lg-theme:focus-visible{ outline:2px solid var(--brand-b, #3498DB); outline-offset:2px; }

/* --- لوحة الهوية --- */
.lg-art{
  position:relative; overflow:hidden; color:#fff;
  padding:48px; display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  background:
    radial-gradient(circle at 12% 100%, rgba(52,152,219,.55), transparent 45%),
    radial-gradient(circle at 88% 0%, rgba(108,59,170,.75), transparent 50%),
    var(--brand-deep, #1D3557);
}
.lg-art::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
  background-size:28px 28px;
}
.lg-art > *{ position:relative; }
.lg-brand{ display:flex; align-items:center; gap:12px; }
.lg-mark{
  width:52px; height:52px; border-radius:15px; background:#fff; flex:none;
  display:grid; place-items:center; box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
.lg-mark img{ width:40px; height:auto; display:block; }
.lg-brand strong{ display:block; font-size:17px; font-weight:800; }
.lg-brand small{ display:block; font-size:11.5px; letter-spacing:1px; color:#A9BEDC; }
.lg-pitch h2{ margin:0 0 14px; font-size:36px; font-weight:800; line-height:1.35; max-width:15ch; text-wrap:balance; }
.lg-pitch p{ margin:0; color:#C3D2E8; font-size:15px; line-height:1.8; max-width:44ch; }
.lg-roles{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.lg-roles span{
  font-size:13px; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.lg-copy{ font-size:12px; color:#8FA6C6; }

/* --- التجاوب --- */
@media (max-width:992px){
  .lg{ grid-template-columns:minmax(0,1fr); }
  .lg-art{ order:-1; padding:28px 24px; gap:18px; }
  .lg-pitch h2{ font-size:26px; max-width:none; }
  .lg-pitch p{ font-size:14px; }
  .lg-roles{ margin-top:16px; }
  .lg-copy{ display:none; }
  .lg-form-wrap{ padding:8px 0 24px; }
}
@media (max-width:480px){
  .lg-form-col{ padding:16px 16px 28px; }
  .lg-art{ padding:22px 16px; }
  .lg-pitch p, .lg-roles{ display:none; }
  .lg-pitch h2{ font-size:22px; margin:0; }
}
@media (prefers-reduced-motion:reduce){
  .lg-submit, .lg-field{ transition:none; }
}

/* ==========================================================================
   استعادة كلمة المرور — forgot_password.php على الهيكل نفسه (2026-09-25)
   مكوّنات المعالج (.fp-steps · .fp-otp · .fp-strength · .fp-reqs …) باقية
   من style.css ويقرؤها forgot_password.js بمعرّفاتها.
   ========================================================================== */
.lg-top--fp{ inset-inline-end:auto; inset-inline-start:24px; }
.lg-backlink{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:12px;
  background:var(--lg-surface); border:1px solid var(--lg-line); color:var(--lg-tx2);
  font-size:13px; font-weight:800; text-decoration:none;
}
.lg-backlink:hover{ color:var(--lg-accent-tx); border-color:var(--lg-accent); }
.lg-form--fp{ gap:16px; }
.lg-form--fp form{ display:grid; gap:12px; }
.lg-form--fp .lg-field{ margin-bottom:0 !important; }
.lg-form--fp .lg-submit{ margin:6px 0 0 !important; width:100%; text-decoration:none; }
.lg-form--fp .fp-steps{ margin-bottom:4px; }
.lg-body--fp .fp-foot{ margin-top:auto; }
.lg-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:12.5px; font-weight:800; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
}
.lg-points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.lg-points li{ display:flex; align-items:center; gap:10px; font-size:14px; color:#DCE6F5; }
.lg-points i{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.1); color:#fff; font-size:13px;
}
.lg-help-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#C3D2E8; font-size:13px; line-height:1.6;
}
.lg-help-card:hover{ background:rgba(255,255,255,.12); }
.lg-help-card > i{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#128C4A; color:#fff; font-size:19px; flex:none; }
.lg-help-card b{ display:block; color:#fff; font-size:14px; }
@media (max-width:992px){
  .lg-top--fp{ inset-inline-start:16px; }
  .lg-points, .lg-help-card{ display:none; }
}