/* Page: verify-success.html — Verification Success */

/* ── PAGE SHELL ── */
body { background: var(--off); min-height: 100vh; display: flex; flex-direction: column; }

/* ── MINIMAL NAV ── */
.vn {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 var(--s8); height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.vn__logo { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-b); font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.vn__logo-mark { width: 30px; height: 30px; background: var(--blue); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.vn__logo em { font-style: normal; color: var(--blue); }
.vn__secure { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--text-m); font-weight: 600; }

/* ── MAIN CONTENT ── */
.vs-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s12) var(--s8); }

/* ── STATES ── */
.vs-state { display: none; width: 100%; max-width: 540px; margin: 0 auto; animation: fadeUp .6s var(--ease) both; }
.vs-state.active { display: block; }

/* ── SUCCESS CARD ── */
.vs-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--sh-xl);
}

/* Animated success header */
.vs-card__top {
  background: linear-gradient(145deg, var(--blue) 0%, #1D4ED8 100%);
  padding: var(--s10) var(--s8); text-align: center;
  position: relative; overflow: hidden;
}
.vs-card__top::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.vs-success-ring {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 3px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s4);
  position: relative; z-index: 1;
  animation: successPop .6s var(--ease) .2s both;
}
@keyframes successPop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.vs-success-ring svg { animation: checkDraw .5s ease .7s both; }
@keyframes checkDraw { from{stroke-dashoffset:30;opacity:0} to{stroke-dashoffset:0;opacity:1} }
.vs-card__top-title { font-family: var(--font-d); font-size: var(--t-3xl); font-weight: 700; color: var(--white); letter-spacing: -0.02em; position: relative; z-index: 1; margin-bottom: var(--s2); }
.vs-card__top-sub { font-size: var(--t-sm); color: rgba(255,255,255,.8); position: relative; z-index: 1; line-height: 1.6; }

/* Body */
.vs-card__body { padding: var(--s8); }
.vs-ref-row { display: flex; align-items: center; justify-content: space-between; background: var(--off); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s6); }
.vs-ref-label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-m); }
.vs-ref-val { font-family: var(--font-d); font-size: var(--t-xl); font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }

/* ── DEVICE ROUTING ── */
.vs-device-section { margin-bottom: var(--s6); }
.vs-device-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: var(--s4); display: flex; align-items: center; gap: var(--s2); }

/* Cross-device banner — shown when verified on different device */
.vs-cross-device {
  background: linear-gradient(135deg, #FEF9EC 0%, #FFFBF0 100%);
  border: 1.5px solid rgba(245,158,11,.3);
  border-radius: var(--r-xl); padding: var(--s5);
  margin-bottom: var(--s5);
  display: none; /* shown conditionally by JS */
}
.vs-cross-device.visible { display: block; animation: fadeUp .5s var(--ease) both; }
.vs-cross-device__header { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.vs-cross-device__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.vs-cross-device__title { font-size: var(--t-md); font-weight: 700; color: var(--ink); margin-bottom: var(--s1); }
.vs-cross-device__sub { font-size: var(--t-sm); color: var(--text-s); line-height: 1.6; }
.vs-cross-device__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* Same-device: single CTA */
.vs-same-device { }

/* ── OPTION CARDS ── */
.vs-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s6); }
.vs-opt {
  border: 2px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s5); cursor: pointer; text-align: center;
  transition: all var(--t-base) var(--ease); background: var(--white);
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.vs-opt:hover { border-color: var(--blue); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.vs-opt--primary { border-color: var(--blue); background: var(--blue-pale); }
.vs-opt--primary:hover { box-shadow: var(--sh-blue); background: var(--blue); }
.vs-opt--primary:hover .vs-opt__title,
.vs-opt--primary:hover .vs-opt__sub { color: var(--white); }
.vs-opt__icon { font-size: 2rem; line-height: 1; }
.vs-opt__title { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.vs-opt__sub { font-size: var(--t-xs); color: var(--text-s); line-height: 1.5; }

/* ── WHAT'S NEXT CHECKLIST ── */
.vs-next { border-top: 1px solid var(--border); padding-top: var(--s6); }
.vs-next__title { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-m); margin-bottom: var(--s4); }
.vs-next__list { display: flex; flex-direction: column; gap: var(--s3); }
.vs-next-item { display: flex; align-items: center; gap: var(--s3); }
.vs-next-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.vs-next-item__dot.done { background: var(--ok); }
.vs-next-item__text { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.vs-next-item__text .done-text { color: var(--ok); font-weight: 600; }

/* ── WAITING STATE (original device, waiting for mobile to verify) ── */
.vs-waiting__anim {
  display: flex; justify-content: center; margin-bottom: var(--s6); position: relative;
}
.vs-waiting__laptop { font-size: 3rem; }
.vs-waiting__phone  { font-size: 2rem; position: absolute; right: 28%; bottom: -8px; }
.vs-waiting__pulse {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--blue-pale); position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  animation: waitPulse 1.8s ease-in-out infinite;
}
@keyframes waitPulse { 0%{transform:translate(-50%,-50%) scale(1);opacity:.8} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }

.vs-waiting__dots { display: flex; gap: var(--s2); justify-content: center; margin: var(--s4) 0; }
.vs-waiting__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: dotBounce 1.4s ease-in-out infinite; }
.vs-waiting__dot:nth-child(2) { animation-delay: .2s; }
.vs-waiting__dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotBounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-8px);opacity:1} }

.vs-waiting__status { font-size: var(--t-sm); color: var(--text-s); text-align: center; line-height: 1.65; }
.vs-waiting__status strong { color: var(--ink); }

/* Polling status indicator */
.vs-poll-bar { height: 3px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; margin: var(--s5) 0; }
.vs-poll-fill { height: 100%; background: var(--blue); border-radius: var(--r-pill); animation: pollScan 2s ease-in-out infinite; }
@keyframes pollScan { 0%{width:0%;margin-left:0} 50%{width:70%;margin-left:0} 100%{width:0%;margin-left:100%} }

/* ── ALREADY VERIFIED (returning to desktop after mobile verify) ── */
.vs-already-verified { text-align: center; padding: var(--s8); }
.vs-already-verified__icon { font-size: 3rem; margin-bottom: var(--s4); }
.vs-already-verified__title { font-family: var(--font-d); font-size: var(--t-2xl); font-weight: 700; color: var(--ok); margin-bottom: var(--s3); }
.vs-already-verified__sub { font-size: var(--t-md); color: var(--text-s); margin-bottom: var(--s8); line-height: 1.65; }

/* ── FOOTER ── */
.vs-footer { text-align: center; padding: var(--s8) var(--s8) var(--s10); }
.vs-footer__legal { font-size: var(--t-xs); color: var(--text-m); max-width: 480px; margin: 0 auto; line-height: 1.7; }

@media(max-width:600px) {
  .vs-page { padding: var(--s8) var(--s5); align-items: flex-start; }
  .vs-options { grid-template-columns: 1fr; }
  .vs-card__top { padding: var(--s8) var(--s6); }
  .vs-card__body { padding: var(--s6); }
  .vs-cross-device__actions { flex-direction: column; }
}