/* ==========================================================
   login.css — صفحة تسجيل الدخول
   ========================================================== */
#login {
  position: relative; min-height: 100vh; overflow: hidden;
  background: #1b0f08 url('bg-login.jpg') center / cover no-repeat;
}
/* تعتيم خفيف على جهة النموذج ليبقى النص مقروءاً */
#login:after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to left, rgba(20,10,5,.7), rgba(20,10,5,.35) 40%, transparent 64%);
}
.lw { position: relative; z-index: 3; min-height: 100vh; display: flex; align-items: center; padding: 4% 5.7%; }
.box { width: clamp(380px, 36vw, 580px); max-width: 100%; text-align: center; }
.box h2 { font-size: 44px; color: #f1dfc3; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.box p { color: #cdb592; margin: 12px 0 28px; font-size: 17px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.bm { display: block; width: 190px; margin: 0 auto 10px; }

.in {
  display: flex; align-items: center; gap: 10px; color: var(--gold);
  border: 1px solid rgba(227,181,116,.3); border-radius: 10px;
  background: rgba(20,10,5,.55); padding: 0 16px; margin-bottom: 14px;
}
.in:focus-within { border-color: var(--gold); }
.in input { flex: 1; background: none; border: 0; outline: 0; color: var(--cream); font: 17px 'Almarai', sans-serif; padding: 17px 0; }
.kn { font-size: 24px; line-height: 1; font-variant-emoji: text; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif; }
.rem { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #cdb592; margin: 8px 0 18px; }
.box .gold { width: 100%; margin: 0; }
.err { color: #ff9d7a; font-size: 14px; min-height: 20px; margin-top: 10px; }
.back { position: absolute; top: 24px; inset-inline-end: 5.5%; z-index: 4; background: none; color: var(--cream); font-size: 14px; padding: 0; text-shadow: 0 1px 8px rgba(0,0,0,.9); }

@media (max-width: 980px) {
  .lw { justify-content: center; padding: 70px 5% 40px; }
  #login:after { background: linear-gradient(180deg, rgba(20,10,5,.55), rgba(20,10,5,.8)); }
  #login { background-position: 25% center; }
  .box { width: 100%; max-width: 460px; }
}
@media (max-width: 700px) {
  .box h2 { font-size: 32px; }
  .box p { font-size: 15px; margin-bottom: 20px; }
  .bm { width: 140px; }
  .in input { padding: 14px 0; font-size: 16px; }   /* 16px يمنع تكبير الصفحة تلقائياً في iPhone */
}