/* =====================================================================
   فانوس — صفحة الدفع الخارجية | الأنماط المشتركة
   الألوان والخط والمقاسات مأخوذة حرفيًا من CLAUDE.md §3، لا من عيّنة
   الشعار. الغرض ألّا يشعر الطالب بفاصل بصري بين التطبيق وهذه الصفحة.
   ===================================================================== */
:root{
  --primary:#002955;
  --primary-container:#033f7b;
  --on-primary:#ffffff;
  --on-primary-container:#83acef;
  --primary-fixed:#d5e3ff;
  --secondary:#005fac;
  --gold:#e29e00;
  --gold-dim:#ffba3c;
  --on-gold:#281900;
  --surface:#f8f9ff;
  --lowest:#ffffff;
  --low:#eff4ff;
  --container:#e5eeff;
  --high:#dce9fe;
  --ink:#0f1c2b;
  --muted:#434750;
  --outline:#737781;
  --line:#c3c6d1;
  --error:#ba1a1a;
  --error-container:#ffdad6;
  --on-error:#93000a;
  --ok:#0f7b52;

  --radius:12px;
  --shadow:0 2px 12px rgba(3,63,123,.06);
  --font:"Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--surface); color:var(--ink);
  -webkit-font-smoothing:antialiased; min-height:100vh; line-height:1.7;
  display:flex; flex-direction:column; font-size:16px;
}
img{max-width:100%; display:block}
button,input{font-family:inherit; font-size:inherit}
a{color:var(--secondary)}
[hidden]{display:none !important}

/* ---------- الترويسة ---------- */
.site-head{
  background:var(--lowest); border-bottom:1px solid var(--line); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--primary-container)}
.brand img{height:40px; width:auto}
.secure-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; line-height:18px; font-weight:700;
  color:var(--primary-container); background:var(--low); border:1px solid var(--high);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.secure-pill svg{width:14px; height:14px; flex:none}

/* ---------- شريط انقطاع الشبكة ---------- */
.offline{
  background:var(--error-container); color:var(--on-error); text-align:center;
  padding:10px 16px; font-size:14px; line-height:22px; font-weight:700;
}

/* ---------- الشريط العلوي ---------- */
.hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 60%, var(--secondary) 145%);
  color:var(--on-primary); padding:32px 16px 72px; text-align:center;
}
.hero h1{margin:0 0 4px; font-size:26px; line-height:36px; font-weight:800}
.hero p{margin:0; color:var(--on-primary-container); font-size:14px; line-height:22px}

/* ---------- التخطيط ---------- */
main{flex:1; width:min(1040px,100%); margin:-56px auto 0; padding:0 16px 48px; position:relative; z-index:1}
.grid{display:grid; gap:16px; align-items:start}
@media (min-width:900px){ .grid{grid-template-columns:1fr 1fr} }

.card{background:var(--lowest); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card-pad{padding:16px}
.card-title{
  margin:0; padding:14px 16px; border-bottom:1px solid var(--line);
  font-size:16px; line-height:24px; font-weight:700; color:var(--primary-container);
  display:flex; align-items:center; gap:8px;
}
.card-title .n{
  width:22px; height:22px; border-radius:999px; background:var(--low); color:var(--secondary);
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none;
}

/* ---------- ملخص الطلب ---------- */
.item{display:flex; gap:12px; align-items:flex-start}
.item-cover{width:80px; height:80px; border-radius:var(--radius); object-fit:cover; flex:none; background:var(--low)}
.item-kind{
  display:inline-block; font-size:11px; line-height:16px; font-weight:700; color:var(--primary-container);
  background:var(--container); padding:3px 10px; border-radius:999px; margin-bottom:6px;
}
.item h2{margin:0 0 2px; font-size:18px; line-height:26px; font-weight:700}
.item .sub{margin:0; color:var(--muted); font-size:14px; line-height:22px}

.notice{
  display:flex; gap:8px; align-items:flex-start; margin-top:16px; padding:12px;
  background:var(--low); border:1px solid var(--high); border-radius:var(--radius);
  font-size:13px; line-height:20px; color:var(--muted);
}
.notice svg{width:16px; height:16px; flex:none; margin-top:2px; color:var(--secondary)}
.notice.warn{background:#fff8e8; border-color:var(--gold-dim); color:#6b4b00}
.notice.warn svg{color:var(--gold)}

.lines{margin-top:16px; border-top:1px solid var(--line); padding-top:12px}
.line{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:14px; line-height:22px; color:var(--muted)}
.line span:last-child{color:var(--ink); font-weight:500; white-space:nowrap; direction:ltr}
.line.minus span:last-child{color:var(--ok)}
.total{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}
.total .lbl{font-weight:700; font-size:16px; line-height:24px}
.total .val{font-size:26px; line-height:36px; font-weight:800; color:var(--primary-container); direction:ltr; white-space:nowrap}
.fx{margin:8px 0 0; font-size:12px; line-height:18px; color:var(--outline)}

/* ---------- خيارات الشهادة ---------- */
.opts{display:grid; gap:8px}
.opt{
  display:flex; align-items:center; gap:12px; padding:12px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius); transition:.15s; background:var(--lowest);
}
.opt:hover{border-color:var(--secondary)}
.opt input{width:18px; height:18px; accent-color:var(--secondary); flex:none; cursor:pointer}
.opt.on{border-color:var(--secondary); background:var(--low)}
.opt .t{flex:1; min-width:0}
.opt .t b{display:block; font-size:14px; line-height:22px; font-weight:700}
.opt .t small{color:var(--muted); font-size:12px; line-height:18px}
.opt .p{font-weight:700; color:var(--primary-container); direction:ltr; white-space:nowrap}

/* ---------- النموذج ---------- */
.field{margin-bottom:12px}
.field label{display:block; font-size:14px; line-height:20px; font-weight:700; margin-bottom:6px}
.field input{
  width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--lowest); color:var(--ink); transition:.15s; direction:ltr; text-align:left;
}
.field input::placeholder{color:var(--outline)}
.field input:focus{outline:none; border-color:var(--primary-container); box-shadow:0 0 0 3px rgba(3,63,123,.12)}
.field input[aria-invalid="true"]{border-color:var(--error); box-shadow:0 0 0 3px rgba(186,26,26,.10)}
.field .err{display:none; color:var(--error); font-size:12px; line-height:18px; font-weight:500; margin-top:6px}
.field.bad .err{display:block}

.readonly{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--low);
}
.readonly .v{direction:ltr; font-weight:700; font-size:14px; word-break:break-all}
.readonly button{
  border:0; background:none; color:var(--secondary); font-size:13px; font-weight:700;
  cursor:pointer; flex:none; padding:4px;
}

/* ---------- الأزرار ---------- */
.pay{
  width:100%; min-height:48px; margin-top:16px; padding:12px 16px; border:0; border-radius:var(--radius);
  cursor:pointer; background:var(--gold); color:var(--on-gold);
  font-size:16px; line-height:24px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:.15s;
}
.pay:hover:not(:disabled){background:var(--gold-dim)}
.pay:disabled{opacity:.55; cursor:not-allowed}
.pay .spin{
  width:16px; height:16px; border:2.5px solid rgba(40,25,0,.3); border-top-color:var(--on-gold);
  border-radius:50%; animation:spin .7s linear infinite; display:none;
}
.pay.busy .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-ghost{
  display:inline-block; min-height:48px; padding:12px 20px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--lowest); color:var(--primary-container);
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; line-height:24px;
}
.btn-ghost:hover{border-color:var(--secondary); background:var(--low)}
.btn-fill{
  display:block; width:100%; min-height:48px; padding:12px 16px; border:0; border-radius:var(--radius);
  background:var(--primary-container); color:var(--on-primary); font-weight:800; font-size:16px;
  line-height:24px; text-align:center; text-decoration:none; cursor:pointer;
}
.btn-fill:hover{background:var(--primary)}

.trust{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
  color:var(--muted); font-size:12px; line-height:18px; text-align:center;
}
.trust svg{width:14px; height:14px; color:var(--ok); flex:none}

/* ---------- التنبيهات والحالات ---------- */
.alert{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius);
  font-size:14px; line-height:22px; font-weight:500; margin-bottom:16px;
}
.alert svg{width:18px; height:18px; flex:none; margin-top:2px}
.alert.warn{background:#fff8e8; border:1px solid var(--gold-dim); color:#6b4b00}
.alert.error{background:var(--error-container); border:1px solid var(--error); color:var(--on-error)}

.state{
  background:var(--lowest); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:40px 24px; text-align:center;
}
.state h2{margin:12px 0 4px; font-size:20px; line-height:30px; font-weight:700}
.state p{margin:0 auto; max-width:440px; color:var(--muted); font-size:14px; line-height:22px}
.state .icon{width:52px; height:52px; margin:0 auto; display:grid; place-items:center; border-radius:50%}
.state .icon svg{width:26px; height:26px}
.state .icon.bad{background:var(--error-container); color:var(--error)}
.state .icon.ok{background:#e8f6ef; color:var(--ok)}
.state .icon.info{background:var(--container); color:var(--primary-container)}
.state .actions{margin-top:20px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

.sk{background:linear-gradient(90deg,var(--container) 25%,var(--low) 50%,var(--container) 75%); background-size:200% 100%; animation:sh 1.3s infinite; border-radius:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-row{height:14px; margin-bottom:10px}

/* ---------- التذييل ---------- */
.site-foot{
  background:var(--primary-container); color:var(--on-primary-container); text-align:center;
  padding:20px 16px; font-size:13px; line-height:20px; margin-top:auto;
}
.site-foot a{color:var(--primary-fixed)}
.site-foot .row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:6px}

@media (prefers-reduced-motion: reduce){
  .sk, .pay .spin, .ic svg{animation:none}
}

/* ---------- مقاسات هيكل التحميل ---------- */
.loading-state{text-align:right}
.w45{width:45%} .w80{width:80%} .w60{width:60%}
.sk-block{height:48px; margin-top:24px}
.err-inline{color:var(--error); font-size:12px; line-height:18px; font-weight:500; margin:8px 0 0}

/* ---------- صفحة النتيجة ---------- */
.center-main{flex:1; display:grid; place-items:center; padding:32px 16px 48px}
.result-card{width:min(560px,100%); padding:32px 24px 24px; text-align:center}
.icon-lg{width:72px; height:72px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center}
.icon-lg svg{width:34px; height:34px}
.icon-lg.ok{background:#e8f6ef; color:var(--ok)}
.icon-lg.wait{background:#fff8e8; color:var(--gold)}
.icon-lg.wait svg{animation:spin 1.4s linear infinite}
.icon-lg.bad{background:var(--error-container); color:var(--error)}
.result-card h1{margin:0 0 8px; font-size:20px; line-height:30px; font-weight:700}
.lead{margin:0 auto 20px; max-width:420px; color:var(--muted); font-size:14px; line-height:22px}
.box{text-align:right; background:var(--low); border:1px solid var(--high); border-radius:var(--radius); padding:12px 14px; margin-bottom:20px}
.box .row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; line-height:22px}
.box .row + .row{border-top:1px solid var(--high)}
.box .k{color:var(--muted)}
.box .v{font-weight:700; word-break:break-all; text-align:left}
.box .v.ltr{direction:ltr}
.btn-ghost.block{display:block; width:100%; margin-top:8px; text-align:center}
.note{margin:16px 0 0; font-size:12px; line-height:18px; color:var(--outline)}