/* ═══════════════════════════════════════════════════════════
   التحقق من الشهادة — Certificate verification
   ═══════════════════════════════════════════════════════════ */

/* ── صندوق البحث ── */
.v-box{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:38px 40px; box-shadow:var(--shadow-2);
}
.v-box::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--brass) 0%, var(--brass-2) 50%, var(--brass) 100%);
}
.v-title{font-family:'Tajawal',system-ui,sans-serif; font-weight:800; font-size:21px; margin-bottom:7px}
.v-sub{font-size:14.5px; color:var(--ink-2); margin-bottom:22px; max-width:56ch}
.v-row{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch}
.v-row .input{
  flex:1; min-width:240px; font-size:16px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; text-align:center;
}
.v-hint{margin-top:12px; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.v-hint svg{width:15px; height:15px; color:var(--brass); flex:none}
.v-samples{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center}
.v-samples span{font-size:12.5px; color:var(--ink-3)}
.v-samples button{
  font-family:'IBM Plex Sans Arabic'; font-size:12.5px; font-weight:600;
  padding:4px 12px; border-radius:100px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2);
  font-variant-numeric:tabular-nums; letter-spacing:.03em;
}
.v-samples button:hover{border-color:var(--brass); color:var(--brass)}

/* ── حالة التحقق ── */
.v-state{display:flex; align-items:center; gap:12px; margin-top:26px; font-size:14.5px; color:var(--ink-2)}
.v-spin{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:2px solid var(--brass-soft); border-top-color:var(--brass);
  animation:vspin .8s linear infinite;
}
@keyframes vspin{to{transform:rotate(360deg)}}

/* ── شارة النتيجة ── */
.v-badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:100px;
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800; font-size:15px;
}
.v-badge.ok{background:var(--ok-soft); color:var(--ok)}
.v-badge.bad{background:var(--flag-soft); color:var(--flag)}
.v-badge svg{width:19px; height:19px}

/* ══ الشهادة — موك‑أب ══ */
.cert-wrap{margin-top:30px; perspective:1400px}
.cert{
  position:relative; aspect-ratio:1.414/1;              /* نسبة A4 أفقية */
  background:linear-gradient(155deg, #FEFCF7 0%, #F8F3E9 55%, #F4EDE0 100%);
  border-radius:8px; overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(16,23,32,.5), 0 3px 10px rgba(16,23,32,.1),
             0 0 0 1px rgba(168,118,44,.22);
  animation:certIn .7s cubic-bezier(.2,.8,.2,1) both;
  color:#1B1206;
}
@keyframes certIn{
  from{opacity:0; transform:translateY(22px) rotateX(6deg)}
  to{opacity:1; transform:none}
}
/* إطار مزدوج */
.cert::before{
  content:''; position:absolute; inset:14px; border:1.5px solid rgba(168,118,44,.55); border-radius:4px;
  pointer-events:none;
}
.cert::after{
  content:''; position:absolute; inset:20px; border:.5px solid rgba(168,118,44,.32); border-radius:2px;
  pointer-events:none;
}
/* نسيج گيريه في الخلفية */
.cert-bg{position:absolute; inset:0; width:100%; height:100%; opacity:.22; pointer-events:none}
/* توهّج مركزي يُخفّف النقش خلف النصّ */
.cert-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%, rgba(254,252,247,.92) 0%, rgba(254,252,247,0) 72%);
}

.cert-in{
  position:absolute; inset:0; z-index:2;
  padding:clamp(24px, 5%, 58px) clamp(20px, 4.2%, 52px) clamp(34px, 6.5%, 74px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:space-between;
}
/* الكتلة الوسطى تتوسّط ما بين الترويسة والتذييل */
.cert-mid{display:flex; flex-direction:column; align-items:center; gap:clamp(3px,.7%,8px)}
/* الارتفاع بوحدات مطلقة لا نسبة مئوية: الحاوية الآن مرنة الارتفاع،
   والنسبة المئوية فيها تُحسب على ارتفاع غير محدّد فينفلت حجم الشعار. */
.cert-logo{height:clamp(38px, 4.4vw, 74px); width:auto; margin-bottom:clamp(6px,.8vw,14px)}
.cert-uni{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800;
  font-size:clamp(13px, 1.9vw, 21px); letter-spacing:-.01em; color:#1B1206;
}
.cert-uni small{
  display:block; font-family:'IBM Plex Sans Arabic'; font-weight:400;
  font-size:clamp(8px, 1vw, 11px); color:#7A6338; letter-spacing:.08em; margin-top:3px;
}
.cert-rule{
  width:clamp(70px, 16%, 150px); height:1.5px; margin:clamp(8px,1.6%,18px) auto;
  background:linear-gradient(90deg, transparent, rgba(168,118,44,.85), transparent);
}
.cert-kind{
  font-family:'IBM Plex Sans Arabic'; font-size:clamp(9px, 1.1vw, 12.5px);
  color:#7A6338; letter-spacing:.14em;
}
.cert-name{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800;
  font-size:clamp(19px, 3.4vw, 40px); line-height:1.2; margin-block:clamp(5px,1.1%,12px);
  color:#12100A;
}
.cert-for{font-family:'IBM Plex Sans Arabic'; font-size:clamp(9px,1.1vw,13px); color:#5C4A2A}
.cert-degree{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:700;
  font-size:clamp(13px, 2vw, 24px); color:#8C6122; margin-top:clamp(3px,.8%,8px);
}
.cert-foot{
  width:100%; display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(8px,2%,24px); align-items:end;
}
.cert-sig{display:flex; flex-direction:column; gap:4px; align-items:center}
.cert-sig .line{width:100%; max-width:150px; height:1px; background:rgba(27,18,6,.3)}
.cert-sig b{font-family:'Tajawal'; font-weight:700; font-size:clamp(8.5px,1.05vw,12.5px); color:#1B1206}
.cert-sig span{font-family:'IBM Plex Sans Arabic'; font-size:clamp(7.5px,.9vw,10.5px); color:#7A6338}

/* الختم النحاسي */
.cert-seal{
  position:relative; width:clamp(70px, 14%, 128px); aspect-ratio:1;
  display:grid; place-items:center; flex:none;
  transform:rotate(-7deg);
}
.cert-seal svg{position:absolute; inset:0; width:100%; height:100%}
.cert-seal .core{
  position:relative; z-index:2; text-align:center;
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800;
  font-size:clamp(7px,.95vw,11px); color:#8C6122; line-height:1.35;
}

/* شريط QR والرقم المرجعي */
.cert-strip{
  position:absolute; inset-block-end:0; inset-inline:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(6px,1.2%,14px) clamp(20px,4.2%,52px);
  background:linear-gradient(to top, rgba(168,118,44,.1), transparent);
  font-family:'IBM Plex Sans Arabic'; font-size:clamp(7.5px,.92vw,11px); color:#7A6338;
}
.cert-strip .ref{font-variant-numeric:tabular-nums; letter-spacing:.08em; font-weight:600}
.cert-qr{width:clamp(34px,6.5%,58px); aspect-ratio:1; background:#fff; padding:3px; border-radius:3px; box-shadow:0 0 0 1px rgba(168,118,44,.3)}
.cert-qr canvas{width:100%; height:100%; display:block; image-rendering:pixelated}

/* ── تفاصيل السجل تحت الشهادة ── */
.rec{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:24px}
.rec div{background:var(--surface); padding:16px 18px}
.rec span{display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:4px}
.rec b{font-family:'Tajawal',system-ui,sans-serif; font-weight:700; font-size:15.5px; line-height:1.4}
.rec b.tnum{letter-spacing:.03em}

.v-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; align-items:center}

/* الطباعة: الشهادة وحدها */
@media print{
  body > *:not(#certPrint){display:none !important}
  .cert{box-shadow:none; break-inside:avoid}
}
@media (max-width:600px){
  .v-box{padding:26px 22px}
  .cert-foot{grid-template-columns:1fr; gap:14px; justify-items:center}
}
@media (prefers-reduced-motion:reduce){
  .cert{animation:none}
}

/* ── نتيجة التحقق: ترويسة + ملاحظة (added 2026-08-11) ── */
.v-badge{margin-bottom:6px}
.v-res-head{margin:22px 0 24px}
.v-res-label{font-size:12.5px; color:var(--ink-3); letter-spacing:.05em; margin-bottom:7px}
.v-res-name{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800;
  font-size:clamp(22px,3.4vw,30px); line-height:1.25; color:var(--ink);
}
.v-res-title{margin-top:9px; font-size:15px; font-weight:600; color:var(--brass-2)}
.v-note{margin:18px 0 22px; font-size:14.5px; line-height:1.75; color:var(--ink-2); max-width:62ch}
.v-box .rec{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}