/* ============================================================
   حسابات الزوّار — بنفس لغة تصميم بوابة أعضاء رواد:
   خلفية كحلية مشعّة، بطاقة بيضاء بزوايا 16px، حقول بزوايا 10px،
   وزرّ بتدرّج التيل. الفرق أن هذه الصفحات تحتاج حقولاً أكثر وزرّ
   جوجل، فتتّسع البطاقة عند الحاجة.
   ============================================================ */

.vs-page{
  font-family:'Tajawal', Arial, sans-serif;
  margin:0; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
  background:radial-gradient(circle at 20% 20%, #0d3a63, #05223E 60%);
  color:#1a2733;
}
.vs-page *{box-sizing:border-box;}

.vs-box{
  background:#fff; border-radius:16px; padding:38px;
  width:100%; max-width:380px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.vs-box.is-wide{max-width:560px;}

.vs-brand{display:block; text-align:center; margin-bottom:20px;}
.vs-brand img{height:42px; width:auto;}

.vs-box h1{
  font-family:'Noto Kufi Arabic', sans-serif; font-size:21px; color:#05223E; margin:0 0 6px;
}
.vs-muted{color:#8394a3; font-size:13px; margin:0 0 22px; line-height:1.8;}

/* ---------- التنبيهات ---------- */
.vs-error, .vs-ok{
  padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px; line-height:1.85;
}
.vs-error{background:#fdecec; border:1px solid #f2b8b5; color:#8a2c26;}
.vs-ok{background:#eaf6f4; border:1px solid #b8ddd7; color:#1a6460;}
.vs-error ul{margin:0; padding-inline-start:18px;}

/* ---------- الحقول ---------- */
.vs-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:0 16px;}
.vs-full{grid-column:1 / -1;}
.vs-box label{
  display:block; font-size:13px; font-weight:700; color:#33475a; margin-bottom:6px;
}
.vs-box label i{font-style:normal; color:#c0392b;}
.vs-box input{
  width:100%; padding:12px 14px; border:1px solid #e7ecf1; border-radius:10px;
  font-family:inherit; font-size:14px; margin-bottom:16px; background:#fbfcfd; color:#1a2733;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vs-box input:hover{border-color:#d5dde5;}
.vs-box input:focus{
  outline:none; border-color:#1F7874; background:#fff;
  box-shadow:0 0 0 3px rgba(31,120,116,.12);
}
.vs-box input:user-invalid{border-color:#e0a9a4;}
.vs-hint{margin:-10px 0 16px; font-size:11.5px; color:#8394a3;}

.vs-box button[type=submit]{
  width:100%; background:linear-gradient(120deg,#1F7874,#2c948e); color:#fff; border:none;
  padding:13px; border-radius:10px; font-weight:800; font-size:14px; cursor:pointer;
  font-family:inherit; transition:filter .25s ease, transform .25s ease;
}
.vs-box button[type=submit]:hover{filter:brightness(1.07); transform:translateY(-1px);}

/* ---------- زرّ جوجل ---------- */
.vs-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px; border:1px solid #e7ecf1; border-radius:10px; background:#fff;
  font-family:inherit; font-size:14px; font-weight:700; color:#33475a;
  cursor:pointer; text-decoration:none;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vs-google:hover{background:#fbfcfd; border-color:#d5dde5; box-shadow:0 6px 18px -10px rgba(5,34,62,.35);}
.vs-google svg{width:18px; height:18px; flex-shrink:0;}

.vs-or{
  display:flex; align-items:center; gap:12px; margin:18px 0;
  font-size:12px; color:#a3b0bc;
}
.vs-or::before, .vs-or::after{content:''; flex:1; height:1px; background:#eef2f5;}

/* ---------- أسفل البطاقة ---------- */
.vs-alt{
  margin-top:20px; padding-top:16px; border-top:1px solid #eef2f5;
  text-align:center; font-size:13px; color:#8394a3;
}
.vs-alt a{color:#1F7874; font-weight:700; text-decoration:none;}
.vs-alt a:hover{text-decoration:underline;}
.vs-back{
  display:block; text-align:center; margin-top:18px;
  font-size:12.5px; color:rgba(255,255,255,.6); text-decoration:none;
}
.vs-back:hover{color:#fff;}

/* ---------- شاشة النتيجة ---------- */
.vs-result{text-align:center;}
.vs-result-ic{
  width:66px; height:66px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.vs-result-ic.is-ok{background:#eaf6f4; color:#1F7874;}
.vs-result-ic.is-bad{background:#fdecec; color:#c0392b;}
.vs-result-ic svg{width:31px; height:31px;}
.vs-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:22px;}
.vs-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:10px;
  font-size:13.5px; font-weight:700; text-decoration:none;
  border:1px solid #e7ecf1; color:#33475a; background:#fff;
  transition:border-color .25s ease, color .25s ease, background .25s ease, filter .25s ease;
}
.vs-btn.is-primary{background:linear-gradient(120deg,#1F7874,#2c948e); color:#fff; border-color:transparent;}
.vs-btn.is-primary:hover{filter:brightness(1.07);}
.vs-btn:hover{border-color:#1F7874; color:#1F7874;}

@media (prefers-reduced-motion: no-preference){
  .vs-result-ic{animation:vs-pop .55s cubic-bezier(.16,1,.3,1) both;}
  @keyframes vs-pop{from{opacity:0; scale:.7;} to{opacity:1; scale:1;}}
}
@media (max-width:520px){
  .vs-box{padding:28px 22px;}
  .vs-row{grid-template-columns:1fr;}
  .vs-actions .vs-btn{width:100%; justify-content:center;}
}

/* ============================================================
   حساب الزائر في الشريط العلوي للموقع (يُحمَّل في كل الصفحات)
   ============================================================ */
.vs-account{display:inline-flex; align-items:center; gap:8px;}
.vs-account form{margin:0;}
.vs-account button{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:inherit; opacity:.75; transition:opacity .2s ease;
}
.vs-account button:hover{opacity:1;}