/* ============================================================
   PUBLIC VERIFICATION PAGE (/verify)
   Hexagon "molecule" network + glass panel. Uses site tokens only.
   Loaded after verify.css (which provides the .verify-steps cards).
   ============================================================ */

/* Explicit light canvas: never depend on the browser theme for this page. */
html { color-scheme: light; background: var(--surface-white); }
body { background: var(--surface-white); }

.vp-hero {
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-8);
  text-align: center;
  position: relative;
  z-index: 1;
}
.vp-hero .label-blue { display: inline-block; margin-bottom: var(--space-4); }
.vp-hero h1 { margin-bottom: var(--space-5); }
.vp-hero .body-lg { max-width: 560px; margin: 0 auto; }

.vp-section { padding: var(--space-4) 0 var(--space-12); position: relative; z-index: 1; }

.vp-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  padding: 72px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  background-color: var(--surface-white);
  background-image: radial-gradient(rgba(10, 47, 255, 0.24) 1.4px, transparent 1.7px);
  background-size: 18px 18px;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

/* ── hexagon network ── */
.vp-hex { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hx { transition: fill 0.55s ease, stroke 0.55s ease, stroke-width 0.55s ease, opacity 0.55s ease; }
.hx-solid { fill: rgba(10, 47, 255, 0.10); stroke: rgba(10, 47, 255, 0.30); stroke-width: 1.2; }
.hx-ring { fill: rgba(255, 255, 255, 0.9); stroke: rgba(10, 47, 255, 0.34); stroke-width: 1.6; }
.hx-edge { stroke: rgba(10, 47, 255, 0.22); stroke-width: 1.2; }

.hx-solid.on { fill: rgba(10, 47, 255, 0.88); stroke: var(--ssn-blue-light); }
.hx-ring.on { fill: rgba(10, 47, 255, 0.16); stroke: var(--ssn-blue); stroke-width: 2.4; }
.hx-edge.on { stroke: var(--ssn-blue); stroke-width: 1.9; }

.vp-hex.is-done .hx.on { animation: vpHexPulse 0.9s ease-out 1; }
.vp-hex.is-done .hx-solid.on { fill: var(--ssn-blue); }
.vp-hex.is-fail .hx-solid.on { fill: rgba(216, 44, 13, 0.78); stroke: #d82c0d; }
.vp-hex.is-fail .hx-ring.on { fill: rgba(216, 44, 13, 0.14); stroke: #d82c0d; }
.vp-hex.is-fail .hx-edge.on { stroke: #d82c0d; }

@keyframes vpHexPulse {
  0% { opacity: 0.55; }
  45% { opacity: 1; stroke-width: 3.2; }
  100% { opacity: 1; }
}

.vp-scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ssn-blue), transparent);
  box-shadow: 0 0 18px 4px var(--ssn-blue-glow-strong);
}
.vp-scanline.run { opacity: 1; animation: vpScan 1.7s ease-in-out infinite; }
@keyframes vpScan { 0% { top: 0; } 100% { top: calc(100% - 2px); } }

/* ── glass panel ── */
.vp-panel {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.vp-view[hidden] { display: none !important; }
.vp-panel-title { font-size: var(--text-h4); font-weight: var(--weight-semibold); margin-bottom: var(--space-6); letter-spacing: var(--tracking-tight); }

.vp-field { text-align: left; margin-bottom: var(--space-5); }
.vp-field label { display: block; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-2); }
.vp-opt { font-weight: var(--weight-regular); color: var(--text-tertiary); }
.vp-field input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--text-primary);
  background: var(--surface-off-white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.vp-field input:focus { outline: none; border-color: var(--ssn-blue); box-shadow: 0 0 0 4px var(--ssn-blue-glow); background: var(--surface-white); }
.vp-field input[aria-invalid="true"] { border-color: #d82c0d; }
.vp-code-input { font-family: var(--font-mono) !important; letter-spacing: 0.08em; }
.vp-hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }
.vp-error { font-size: var(--text-xs); color: #d82c0d; margin-top: var(--space-2); }
.vp-error:empty { display: none; }
.vp-captcha { margin: 0 0 var(--space-5); display: flex; justify-content: center; }
.vp-captcha[hidden] { display: none; }

.vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%;
  padding: 16px 28px;
  font: inherit; font-size: var(--text-small); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--text-on-blue);
  background: var(--ssn-blue);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 52px;
  transition: background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.vp-btn:hover { background: var(--ssn-blue-deep); box-shadow: var(--shadow-blue); }
.vp-btn:active { transform: translateY(1px); }
.vp-btn:focus-visible, .vp-link-btn:focus-visible { outline: 3px solid var(--ssn-blue-glow-strong); outline-offset: 2px; }
.vp-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vp-link-btn { margin-top: var(--space-5); background: none; border: 0; font: inherit; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ssn-blue); cursor: pointer; padding: var(--space-3); }
.vp-privacy { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.6; }

/* ── scanning view ── */
.vp-kicker { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); color: var(--ssn-blue); margin-bottom: var(--space-3); }
.vp-steps { list-style: none; padding: 0; margin: var(--space-6) auto 0; display: grid; gap: var(--space-3); max-width: 280px; text-align: left; }
.vp-steps li { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-quaternary); transition: color 0.3s ease; }
.vp-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; transition: background 0.3s ease; }
.vp-steps li.is-active { color: var(--ssn-blue); }
.vp-steps li.is-active .vp-dot { background: var(--ssn-blue); animation: vpBlink 0.9s ease-in-out infinite; }
.vp-steps li.is-done { color: var(--text-primary); }
.vp-steps li.is-done .vp-dot { background: var(--ssn-blue); border-color: var(--ssn-blue); }
@keyframes vpBlink { 50% { box-shadow: 0 0 0 6px var(--ssn-blue-glow); } }

/* ── results ── */
.vp-result-title { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.25; margin-bottom: var(--space-4); outline: none; }
.vp-result-text { color: var(--text-secondary); font-size: var(--text-body); line-height: 1.7; margin-bottom: var(--space-6); }
.vp-result-text a, .vp-caution a { color: var(--ssn-blue); text-decoration: underline; }
.vp-kicker-ok { color: #008060; }
.vp-kicker-no { color: #d82c0d; }
.vp-kicker-warn { color: #b25e09; }

.vp-icon { width: 76px; height: 76px; margin: 0 auto var(--space-5); display: block; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vp-icon circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: vpDraw 0.6s ease-out forwards; }
.vp-icon path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: vpDraw 0.45s 0.35s ease-out forwards; }
.vp-icon-ok { stroke: #008060; }
.vp-icon-no { stroke: #d82c0d; }
.vp-icon-info { stroke: #b25e09; }
@keyframes vpDraw { to { stroke-dashoffset: 0; } }

.vp-facts { display: grid; gap: 0; margin: var(--space-6) 0; text-align: left; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-white); }
.vp-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.vp-facts > div:last-child { border-bottom: 0; }
.vp-facts dt { font-size: var(--text-small); color: var(--text-tertiary); flex: none; }
.vp-facts dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; overflow-wrap: anywhere; }
.vp-caution { text-align: left; font-size: var(--text-small); line-height: 1.6; padding: 14px 16px; border-radius: var(--radius-md); background: #fff7e6; border: 1px solid #ffd79d; color: #7a4a00; margin-bottom: var(--space-2); }

.vp-how { padding: var(--space-4) 0 var(--space-12); position: relative; z-index: 1; }
.vp-how .verify-steps { padding: var(--space-8) 0 0; }
.verify-step-text code { font-family: var(--font-mono); background: var(--surface-light); padding: 1px 6px; border-radius: 4px; }

/* ── responsive ── */
@media (max-width: 768px) {
  .vp-hero { padding-top: calc(var(--nav-height) + var(--space-10)); }
  .vp-stage { min-height: 0; padding: 48px 14px; border-radius: var(--radius-lg); }
  .vp-panel { padding: var(--space-8) var(--space-5); }
  .vp-facts > div { flex-direction: column; gap: 2px; }
  .vp-facts dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hx, .vp-steps li, .vp-dot { transition: none !important; }
  .vp-scanline.run, .vp-steps li.is-active .vp-dot, .vp-hex.is-done .hx.on { animation: none !important; }
  .vp-icon circle, .vp-icon path { animation: none !important; stroke-dashoffset: 0; }
}

.vp-once { font-size: var(--text-small); color: var(--text-tertiary); margin-bottom: 0; }

/* WhatsApp OTP (only shown when enabled in the admin panel) */
.vp-field[hidden] { display: none; }
.vp-otp-row { display: flex; gap: var(--space-3); }
.vp-otp-row input { flex: 1 1 auto; min-width: 0; letter-spacing: 0.3em; font-family: var(--font-mono); }
.vp-secondary-btn {
  flex: none; padding: 0 var(--space-5); min-height: 50px;
  font: inherit; font-size: var(--text-small); font-weight: var(--weight-semibold);
  color: var(--ssn-blue); background: var(--ssn-blue-surface);
  border: 1.5px solid var(--border-blue); border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--duration-normal) var(--ease-out);
}
.vp-secondary-btn:hover:not(:disabled) { background: var(--ssn-blue-glow); }
.vp-secondary-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.vp-secondary-btn:focus-visible { outline: 3px solid var(--ssn-blue-glow-strong); outline-offset: 2px; }
@media (max-width: 420px) { .vp-otp-row { flex-direction: column; } .vp-secondary-btn { min-height: 46px; } }