/**
 * Verify Product page (page-verify-product.php).
 * Two-column: form (left) + animated "how to find your code" (right). Uses common.css tokens.
 */

.vp-card{font-family:var(--font-jost,'Jost',sans-serif);color:var(--ink);max-width:1280px;margin:40px auto 56px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.vp-grid{display:grid;grid-template-columns:1fr 1fr;}

/* ---- Left: form ---- */
.vp-form-col{padding:34px 32px;}
.vp-title{font-weight:800;font-size:22px;color:var(--ink);margin:0 0 8px;}
.vp-intro{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;}

.vp-field{margin-bottom:15px;}
.vp-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 7px;}
.vp-field input{width:100%;box-sizing:border-box;height:50px;border:1px solid var(--line);border-radius:11px;padding:0 15px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;}
.vp-field input:focus{outline:none;border-color:var(--green);}
#vp-code{letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
.vp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

.vp-btn{display:block;width:100%;height:52px;margin-top:5px;border:0;border-radius:11px;background:var(--green);color:#fff;font-family:inherit;font-weight:800;font-size:15.5px;cursor:pointer;transition:background .2s;}
.vp-btn:hover{background:var(--green-d);}
.vp-btn.is-loading{position:relative;color:transparent;pointer-events:none;}
.vp-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2.5px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:vpSpin .7s linear infinite;}
@keyframes vpSpin{to{transform:rotate(360deg);}}
.vp-feedback:empty{display:none;}

.vp-errors{background:#fdecec;border:1px solid #f6c9c9;border-radius:12px;padding:12px 16px;margin:0 0 18px;}
.vp-errors p{margin:0;font-size:14px;color:#b3261e;line-height:1.45;}

.vp-result{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--line);border-radius:13px;padding:15px 17px;margin:0 0 18px;}
.vp-result-c{display:flex;flex-direction:column;gap:3px;}
.vp-result-h{font-weight:800;font-size:16px;}
.vp-result-p{font-size:14px;line-height:1.5;color:var(--muted);}
.vp-result.is-ok{background:#eef7f2;border-color:#c7e6d6;}
.vp-result.is-ok .vp-result-ico,.vp-result.is-ok .vp-result-h{color:var(--green-d);}
.vp-result.is-warn{background:#fff7e8;border-color:#f3dca6;}
.vp-result.is-warn .vp-result-ico,.vp-result.is-warn .vp-result-h{color:#9a6a00;}
.vp-result.is-bad{background:#fdecec;border-color:#f6c9c9;}
.vp-result.is-bad .vp-result-ico,.vp-result.is-bad .vp-result-h{color:var(--red);}

/* ---- Right: how-to ---- */
.vp-how{padding:30px 28px;background:#F1F7F3;border-left:1px solid var(--line);}
.vp-how-title{font-weight:800;font-size:18px;color:var(--green-d);margin:0 0 18px;}
.vp-step{display:flex;align-items:center;gap:14px;}
.vp-num{width:26px;height:26px;border-radius:50%;background:var(--green-d);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.vp-step-txt{flex:1;font-size:14px;color:#3a4540;line-height:1.5;}
.vp-step-txt strong{color:var(--ink);font-weight:700;}
.vp-arrow{display:flex;justify-content:center;color:#9ec3ad;margin:6px 0;}

/* bottle + scratch animation */
.vp-bot{position:relative;width:88px;height:88px;flex-shrink:0;}
.vp-panel{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:40%;height:11%;background:#bcc5bf;border-radius:3px;}
.vp-code{position:absolute;top:31.5%;left:50%;transform:translateX(-50%);display:flex;gap:2px;opacity:0;}
.vp-code span{width:3px;height:6px;border-radius:1px;background:#2f6b4f;}
.vp-finger{position:absolute;top:13%;left:30%;opacity:0;}
.vp-shav{position:absolute;top:26%;left:58%;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;}
.vp-s3 .vp-panel{display:none;}
.vp-s3 .vp-code{opacity:1;}

.vp-how.play .vp-s2 .vp-panel{animation:vpWipe 1.9s ease forwards;}
.vp-how.play .vp-s2 .vp-finger{animation:vpSweep 1.9s ease forwards;}
.vp-how.play .vp-s2 .vp-shav{animation:vpShav 1.9s ease forwards;}
.vp-how.play .vp-s3 .vp-code{animation:vpCode 2.3s ease forwards;}
@keyframes vpWipe{from{clip-path:inset(0 0 0 0);}to{clip-path:inset(0 0 0 108%);}}
@keyframes vpSweep{0%{left:24%;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{left:62%;opacity:0;}}
@keyframes vpShav{0%,25%{opacity:0;}55%{opacity:1;}100%{opacity:0;}}
@keyframes vpCode{0%,55%{opacity:0;}100%{opacity:1;}}

.vp-replay-wrap{display:flex;justify-content:center;margin-top:18px;}
.vp-replay{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--green-d);font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;}
.vp-replay:hover{color:var(--green);}

@media(max-width:760px){
	.vp-grid{grid-template-columns:1fr;}
	.vp-how{border-left:0;border-top:1px solid var(--line);}
}
@media(max-width:480px){
	.vp-card{margin:26px auto 40px;}
	.vp-form-col,.vp-how{padding:24px 20px;}
	.vp-bot{width:74px;height:74px;}
}
@media(prefers-reduced-motion:reduce){
	.vp-how.play .vp-s2 .vp-panel,.vp-how.play .vp-s2 .vp-finger,.vp-how.play .vp-s2 .vp-shav,.vp-how.play .vp-s3 .vp-code{animation:none;}
	.vp-s2 .vp-panel{display:none;}.vp-s2 .vp-code{opacity:1;}
}

/* ---- Warning to sellers ---- */
.vp-warning{max-width:1280px;margin:0 auto 56px;background:linear-gradient(180deg,#fdf6f6 0%,#fbf8f8 100%);border:1px solid #f1d3d3;border-radius:16px;padding:24px 28px;}
.vp-warning-head{display:flex;align-items:center;gap:10px;font-family:var(--font-jost,'Jost',sans-serif);font-weight:800;font-size:17px;color:#d62a28;margin:0 0 10px;}
.vp-warning-head svg{color:#d62a28;flex-shrink:0;}
.vp-warning-body{font-size:14px;color:#5d574f;line-height:1.65;margin:0;}
.vp-warning-body a{color:var(--green-d,#178460);font-weight:600;text-decoration:none;}
.vp-warning-body a:hover{text-decoration:underline;}
@media(max-width:480px){.vp-warning{padding:20px;margin-bottom:40px;}}