/* =====================================================================
   استمارة التسجيل — التنسيق والحركة
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.24; text-wrap:balance; margin:0}
p{margin:0}
button{font:inherit; color:inherit}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--brand-mid); outline-offset:2px; border-radius:6px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums; letter-spacing:.02em}
.wrap{max-width:660px; margin:0 auto; padding:0 16px 120px}

/* ===== الترويسة ============================================= */
.masthead{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(152deg,var(--brand) 0%,var(--brand-mid) 46%,var(--brand-dark) 100%);
  padding:24px 16px 30px; margin-bottom:20px; border-radius:0 0 var(--r-xl) var(--r-xl);
}
/* توهج بطيء يتنفّس خلف الترويسة */
.masthead::after{
  content:""; position:absolute; inset:-30%; pointer-events:none;
  background:radial-gradient(42% 42% at 82% 6%, rgba(250,208,8,.42), transparent 68%);
  animation:gp-breathe 7s ease-in-out infinite;
}
.mast-in{position:relative; z-index:1; max-width:660px; margin:0 auto; display:flex; align-items:center; gap:14px}
.logo{
  width:66px; height:66px; border-radius:20px; flex:none; object-fit:cover; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.3); animation:gp-drop .55s var(--ease-back) both;
}
.mast-txt{min-width:0; overflow:hidden}
.mast-txt h1{
  font-size:clamp(1.2rem,5vw,1.55rem); font-weight:800; letter-spacing:-.01em; color:#fff;
  animation:gp-mask-up .5s var(--ease) .1s both;
}
.mast-txt p{font-size:.84rem; opacity:.93; margin-top:3px; font-weight:300;
  animation:gp-mask-up .5s var(--ease) .18s both}
.mast-badge{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.3);
  padding:3px 11px 4px; border-radius:999px; font-size:.73rem; font-weight:500;
  animation:gp-rise .5s var(--ease) .26s both;
}

/* ===== عدّاد الطاقة ========================================= */
.meter{margin:0 0 24px; animation:gp-rise .5s var(--ease) .3s both}
.meter-track{
  position:relative; height:9px; border-radius:99px; margin:0 16px 13px;
  background:var(--surface-3); overflow:visible;
  box-shadow:inset 0 1px 3px rgba(42,21,38,.12);
}
.meter-fill{
  position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--brand-mid),var(--brand),var(--bolt));
  transition:width .62s var(--ease);
}
/* ومضة ضوء تمرّ على الشريط عند كل تقدّم */
.meter-fill::after{
  content:""; position:absolute; inset:0; border-radius:99px; overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  width:38%; transform:translateX(-120%);
}
.meter.charging .meter-fill::after{animation:gp-sweep .85s var(--ease)}
.meter-bolt{
  position:absolute; top:50%; inset-inline-start:0; transform:translate(50%,-50%);
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--bolt); color:var(--bolt-ink); font-size:15px; line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.24), 0 0 0 3px var(--bg);
  transition:inset-inline-start .62s var(--ease);
}
.meter.charging .meter-bolt{animation:gp-charge .85s ease-out}
.meter-steps{display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin:0; padding:0}
.meter-steps li{
  list-style:none; flex:1; text-align:center; font-size:.7rem; font-weight:500;
  color:var(--ink-3); transition:color var(--t), transform var(--t);
}
.meter-steps li.is-done{color:var(--ink-2)}
.meter-steps li.is-now{color:var(--brand-deep); font-weight:600; transform:translateY(-1px)}

/* ===== البطاقة والخطوات ===================================== */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 18px; box-shadow:var(--shadow);
}
.step{display:none}
.step.active{display:block}
.step.active.fwd{animation:gp-in-next .42s var(--ease) both}
.step.active.back{animation:gp-in-back .42s var(--ease) both}
/* دخول الحقول بالتتابع */
.step.active .stagger > *{animation:gp-rise .4s var(--ease) both}
.step.active .stagger > *:nth-child(1){animation-delay:.05s}
.step.active .stagger > *:nth-child(2){animation-delay:.10s}
.step.active .stagger > *:nth-child(3){animation-delay:.15s}
.step.active .stagger > *:nth-child(4){animation-delay:.20s}
.step.active .stagger > *:nth-child(5){animation-delay:.25s}
.step.active .stagger > *:nth-child(6){animation-delay:.30s}

.step-head{display:flex; align-items:flex-start; gap:11px; margin-bottom:20px}
.step-num{
  flex:none; width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-mid)); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
  font-variant-numeric:tabular-nums; box-shadow:0 5px 14px -6px var(--brand-mid);
}
.step-head h2{font-size:1.1rem; font-weight:700}
.step-head p{font-size:.79rem; color:var(--ink-2); font-weight:300; margin-top:2px}

/* ===== الحقول =============================================== */
.grid{display:grid; gap:15px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:460px){.g2,.g3{grid-template-columns:1fr}}

.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label{font-size:.82rem; font-weight:500}
.req{color:var(--brand-deep); font-weight:700}
.hint{font-size:.71rem; color:var(--ink-3); font-weight:300}
.ctl{
  width:100%; padding:11px 13px; border-radius:var(--r); font-size:.94rem;
  background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink);
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.ctl::placeholder{color:var(--ink-3); font-weight:300}
.ctl:hover{border-color:var(--line-2)}
.ctl:focus{outline:none; border-color:var(--brand); background:var(--surface); box-shadow:var(--glow)}
textarea.ctl{resize:vertical; min-height:76px; line-height:1.6}
select.ctl{
  appearance:none; padding-inline-start:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:left 16px top 51%, left 11px top 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.ctl.bad{border-color:var(--crit); background:var(--crit-soft); animation:gp-shake .42s}
.err{font-size:.73rem; color:var(--crit); font-weight:500; display:none}
.err.show{display:block; animation:gp-rise .25s var(--ease)}

/* ===== الصورة =============================================== */
.photo-row{display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.photo-well{
  width:92px; height:92px; border-radius:26px; flex:none; overflow:hidden;
  background:var(--surface-2); border:2px dashed var(--line-2);
  display:grid; place-items:center; color:var(--ink-3); font-size:1.5rem;
  transition:border-color var(--t), transform var(--t);
}
.photo-well img{width:100%; height:100%; object-fit:cover; display:block; animation:gp-pop .4s var(--ease-back)}
.photo-well.has{border-style:solid; border-color:var(--brand); transform:scale(1.03)}
.btn-file{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r);
  background:var(--surface-2); border:1.5px solid var(--line-2);
  font-size:.85rem; font-weight:500; cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn-file:hover{border-color:var(--brand); color:var(--brand-deep); transform:translateY(-1px)}
.vis-hidden{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ===== البنود الصحية ======================================== */
.allclear{
  display:flex; align-items:center; gap:11px; padding:13px 15px; margin-bottom:16px;
  background:var(--ok-soft); border:1.5px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:border-color var(--t-fast), transform var(--t-fast);
}
.allclear:hover{border-color:var(--ok); transform:translateY(-1px)}
.allclear span{font-size:.85rem; font-weight:500; color:var(--ok)}
.allclear input{accent-color:var(--ok); width:18px; height:18px; flex:none}

.hlist{display:flex; flex-direction:column; gap:9px}
.hrow{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color var(--t), background var(--t), transform var(--t-fast);
}
.hrow.yes{border-color:var(--crit); background:var(--crit-soft)}
.hrow.no{border-color:var(--ok)}
.hrow.miss{border-color:var(--crit); animation:gp-shake .42s}
.hrow > span{flex:1; font-size:.89rem; min-width:0}
/* المفتاح: مؤشر منزلق واحد خلف الخيارين */
.seg{
  position:relative; display:flex; flex:none; padding:3px; gap:2px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--line);
}
.seg::before{
  content:""; position:absolute; top:3px; bottom:3px; width:calc(50% - 3px);
  border-radius:999px; background:var(--ok); opacity:0;
  transition:transform var(--t) var(--ease-back), opacity var(--t-fast), background var(--t-fast);
  inset-inline-start:3px;
}
.seg[data-pick="no"]::before {opacity:1; transform:translateX(0); background:var(--ok)}
.seg[data-pick="yes"]::before{opacity:1; transform:translateX(-100%); background:var(--crit)}
.seg button{
  position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 18px; border-radius:999px; font-size:.8rem; font-weight:500;
  color:var(--ink-2); transition:color var(--t-fast);
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:#fff; font-weight:600}
.detail{margin:-3px 0 3px; padding-inline-start:14px; animation:gp-rise .3s var(--ease)}

/* ===== أسئلة مُضافة من لوحة التحكم ========================== */
.qcard{
  padding:14px; background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--r); display:flex; flex-direction:column; gap:9px;
  transition:border-color var(--t);
}
.qcard.miss{border-color:var(--crit); animation:gp-shake .42s}
.qcard-label{font-size:.89rem; font-weight:500}
.chips-pick{display:flex; flex-wrap:wrap; gap:8px}
.chip-pick{
  min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2);
  font-size:.85rem; font-weight:500; transition:.16s;
}
.chip-pick:hover{border-color:var(--line-2); color:var(--ink)}
.chip-pick[aria-pressed="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;
}

/* ===== التوقيع ============================================== */
.sigpad{
  width:100%; height:160px; border-radius:var(--r); touch-action:none; display:block;
  background:var(--surface-2); border:1.5px dashed var(--line-2); cursor:crosshair;
  transition:border-color var(--t), box-shadow var(--t);
}
.sigpad:hover{border-color:var(--brand)}
.sigpad.inked{border-style:solid; border-color:var(--brand); box-shadow:var(--glow)}
.sig-bar{display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:10px}
.link-btn{
  background:none; border:0; color:var(--brand-deep); font-size:.79rem; font-weight:500;
  cursor:pointer; padding:6px 4px; min-height:44px; text-decoration:underline;
  text-underline-offset:3px;
}
.link-btn:hover{color:var(--brand-mid)}

/* ===== الإقرار ============================================== */
.pledge{
  background:var(--surface-2); border-inline-start:4px solid var(--brand);
  border-radius:var(--r); padding:15px 17px; margin-bottom:20px;
  font-size:.86rem; line-height:1.9; color:var(--ink-2); font-weight:300;
}
.consent{
  display:flex; gap:11px; align-items:flex-start; padding:14px 15px; cursor:pointer;
  background:var(--brand-soft); border-radius:var(--r); margin-top:18px;
  border:1.5px solid transparent; transition:border-color var(--t-fast);
}
.consent:hover{border-color:var(--brand)}
/* البند الاختياري: حدّ متقطّع يميّزه عن الإقرار الإلزامي */
.consent.opt{border-style:dashed}
.consent.opt span{color:var(--ink-2)}
.consent input{accent-color:var(--brand-mid); width:19px; height:19px; flex:none; margin-top:2px}
.consent span{font-size:.83rem; line-height:1.6}

/* ===== المراجعة ============================================= */
.review{margin-top:22px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.review > summary{
  padding:13px 16px; background:var(--surface-2); cursor:pointer;
  font-size:.87rem; font-weight:600; list-style:none;
}
.review > summary::-webkit-details-marker{display:none}
.review > summary::before{content:"\25BE\00A0"; color:var(--brand-deep)}
.review[open] > summary::before{content:"\25B4\00A0"}
.sum-body{padding:6px 16px 16px}
.sum-sec{margin-top:14px}
.sum-sec h4{
  font-family:var(--f-body); font-size:.68rem; font-weight:600; letter-spacing:.09em;
  color:var(--ink-3); margin:0 0 6px;
}
.sum-row{display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:.83rem}
.sum-row:last-child{border-bottom:0}
.sum-row b{font-weight:500; color:var(--ink-2); flex:none; min-width:118px}
.sum-row span{color:var(--ink); word-break:break-word; min-width:0}
.chip{display:inline-block; padding:2px 10px; border-radius:99px; font-size:.74rem; font-weight:500}
.chip.crit{background:var(--crit-soft); color:var(--crit)}
.chip.ok{background:var(--ok-soft); color:var(--ok)}

/* ===== أزرار التنقل ========================================= */
.nav{
  position:fixed; inset-inline:0; bottom:0; z-index:20; background:var(--bg);
  border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.nav-in{max-width:660px; margin:0 auto; display:flex; gap:10px}
.btn{
  position:relative; overflow:hidden; flex:1; padding:14px 20px; border-radius:16px;
  border:1.5px solid transparent; cursor:pointer; display:flex; gap:8px;
  align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:.94rem;
  transition:transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast);
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-mid));
  color:#fff; box-shadow:0 8px 22px -8px var(--brand-mid);
}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 12px 28px -8px var(--brand-mid)}
.btn-primary[disabled]{opacity:.6; cursor:not-allowed; box-shadow:none}
.btn-ghost{flex:0 0 auto; background:var(--surface); border-color:var(--line-2); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-deep)}
/* موجة عند الضغط */
.ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
        transform:scale(0); animation:gp-ripple .55s ease-out; pointer-events:none}
@keyframes gp-ripple{to{transform:scale(4); opacity:0}}
.spin{width:16px; height:16px; border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff; border-radius:50%; animation:gp-spin .7s linear infinite}

/* ===== الشرائط ============================================== */
.banner{display:block; padding:12px 15px; border-radius:var(--r);
        font-size:.8rem; line-height:1.7; margin-bottom:18px; font-weight:300}
.banner.info{background:var(--brand-mist); color:var(--ink-2); border:1px solid var(--line-2)}
.banner.fail{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit);
             font-weight:400; margin:18px 0 0; animation:gp-rise .3s var(--ease)}
.banner b{font-weight:600; color:var(--brand-deep)}
.banner.fail b{color:var(--crit)}

/* ===== شاشة النجاح ========================================== */
.done{position:relative; text-align:center; padding:38px 20px}
#burst{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.done-inner{position:relative; z-index:1}
.done-mark{
  width:88px; height:88px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--bolt-lift),var(--bolt)); color:var(--bolt-ink);
  font-size:2.4rem; box-shadow:0 14px 38px -10px rgba(250,208,8,.75);
  animation:gp-pop .55s var(--ease-back) both;
}
.done h2{font-size:1.35rem; font-weight:800; animation:gp-rise .45s var(--ease) .12s both}
.done p{color:var(--ink-2); font-size:.89rem; margin-top:9px; font-weight:300;
        animation:gp-rise .45s var(--ease) .2s both}
.done-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;
              animation:gp-rise .45s var(--ease) .3s both}
.done-actions .btn{flex:0 0 auto}

/* ===== التذييل ============================================== */
.foot{text-align:center; padding:26px 16px 12px; color:var(--ink-3); font-size:.77rem; font-weight:300}
.foot a{color:var(--brand-deep); text-decoration:none; font-weight:500}
.foot a:hover{text-decoration:underline}
.foot .dot{margin:0 8px; opacity:.5}