/* login.css — أنماط صفحة الدخول (جزيرة). تُحمَّل بعد irada-tokens.css. */
/* نهج (ج): توكنز login المحلية تصبح aliases تشير لطبقة irada الأساسية */
:root {
  --primary:       var(--teal-800);
  --primary-mid:   var(--teal-600);
  --primary-light: var(--teal-500);
  --accent:        var(--gold-500);
  --bg:            var(--paper);
  --text:          var(--ink);
  /* --muted محذوف عمدًا: يرث من irada (#5A6B70) لتفادي الدائرية --muted:var(--muted) */
  --border:        var(--line);
  --error:         var(--danger);
  --radius:        var(--radius-card);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Tajawal',sans-serif;
  background:linear-gradient(135deg, var(--teal-800) 0%, var(--teal-600) 50%, var(--teal-900) 100%);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  position:relative; overflow:hidden;
}
body::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.login-wrap {
  position:relative; z-index:1;
  width:100%; max-width:420px;
}

.login-header { text-align:center; margin-bottom:32px; }
.login-logo {
  width:160px; height:auto;
  margin:0 auto 16px;
  display:block;
}
.login-logo img { width:160px; height:auto; border-radius:12px; background:white; padding:8px; box-shadow:0 4px 20px rgba(0,0,0,.2); }
.login-header h1 { color:white; font-size:1.15rem; font-weight:900; line-height:1.4; }
/* توقيع الهوية (MASTER §4): خط ذهبي رفيع تحت العنوان — login هو مكان جمالية الغلاف */
.login-header h1::after { content:''; display:block; width:70px; height:3px; margin:12px auto 0; background:var(--gold-500); border-radius:2px; }
.login-header p  { color:rgba(255,255,255,.65); font-size:.82rem; margin-top:6px; line-height:1.5; }

.login-card {
  background:white;
  border-radius:20px;
  padding:36px 32px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}

.error-box {
  background:#fdecea; color:var(--error);
  border:1px solid #f5c0bb; border-radius:10px;
  padding:11px 14px; font-size:.88rem; font-weight:700;
  margin-bottom:20px; display:flex; align-items:center; gap:8px;
}

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field label { font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.field input {
  font-family:'Tajawal',sans-serif; font-size:.98rem;
  padding:12px 14px; border:1.5px solid var(--border);
  border-radius:10px; background:#fafcfe; color:var(--text);
  transition:all .2s; width:100%;
}
.field input:focus { outline:none; border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }

.btn-login {
  width:100%; padding:13px; border-radius:10px;
  background:linear-gradient(135deg, var(--primary-mid), var(--primary-light));
  color:white; border:none;
  font-family:'Tajawal',sans-serif; font-size:1rem; font-weight:800;
  cursor:pointer; transition:all .2s;
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.35);
  margin-top:4px;
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(var(--brand-rgb),.45); }
.btn-login:active { transform:translateY(0); }

.login-footer { text-align:center; margin-top:20px; color:rgba(255,255,255,.5); font-size:.8rem; }

@media(max-width:480px){
  .login-card { padding:24px 20px; }
}

      .wa-sep{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:#9aa7b8;font-size:.82rem;font-weight:700;}
      .wa-sep::before,.wa-sep::after{content:"";flex:1;height:1px;background:#dde6e8;}
      .btn-wa{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:none;border-radius:10px;background:#25D366;color:#fff;font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;transition:filter .15s;}
      .btn-wa:hover{filter:brightness(.95);}
      .btn-link{width:100%;background:none;border:none;color:#6a7e82;font-family:'Tajawal',sans-serif;font-size:.83rem;font-weight:700;cursor:pointer;margin-top:8px;padding:6px;}
      .btn-link:hover{color:var(--teal-600);}
      .wa-msg{margin-top:10px;font-size:.84rem;font-weight:700;text-align:center;min-height:18px;}