.commerce-shell{padding:110px 20px 70px;min-height:100vh;background:var(--bg)}
.commerce-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:24px}
.commerce-panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.commerce-media{aspect-ratio:1/1;background:var(--bg3);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.commerce-media img,.commerce-media video{width:100%;height:100%;object-fit:contain;padding:10px}
.commerce-media iframe{width:100%;height:100%;border:0}
.private-youtube-player{position:relative;width:100%;height:100%;min-height:220px;background:#000;overflow:hidden}
.private-youtube-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.private-youtube-toggle{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.private-youtube-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(5,9,16,.82);box-shadow:0 10px 30px rgba(0,0,0,.38);font-size:22px;transition:opacity .2s,transform .2s,background .2s}
.private-youtube-toggle:hover .private-youtube-icon,.private-youtube-toggle:focus-visible .private-youtube-icon{transform:scale(1.06);background:rgba(245,166,35,.92);color:#080b12}
.private-youtube-player[data-video-state="playing"] .private-youtube-icon{opacity:0}
.private-youtube-player[data-video-state="playing"] .private-youtube-toggle:hover .private-youtube-icon,.private-youtube-player[data-video-state="playing"] .private-youtube-toggle:focus-visible .private-youtube-icon{opacity:1}
.private-youtube-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.commerce-thumbs{display:flex;gap:8px;overflow:auto;margin-top:10px}
.commerce-thumb{width:72px;height:72px;flex:0 0 72px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer}
.commerce-thumb.active{border-color:var(--gold)}
.commerce-thumb img{width:100%;height:100%;object-fit:contain}
.commerce-badge{display:inline-flex;background:var(--gold);color:#080b12;border-radius:999px;padding:6px 12px;font:800 11px 'Exo 2';letter-spacing:1px}
.commerce-title{font:800 clamp(24px,4vw,38px) 'Orbitron';color:var(--white);margin:14px 0 8px}
.commerce-description{color:var(--text2);line-height:1.7}
.commerce-section-title{font:800 12px 'Exo 2';letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin:20px 0 10px}
.variant-list{display:grid;gap:8px}
.variant-option{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer}
.variant-option.maintenance{opacity:.68;cursor:not-allowed}.variant-option.maintenance:hover{transform:none}.variant-maintenance{display:block;color:#f39c12!important;margin-left:22px}.variant-option.selected{border-color:var(--gold);background:rgba(245,166,35,.08)}
.variant-option input{accent-color:var(--gold)}
.variant-price{color:var(--gold);font-weight:800}
.commerce-quantity{display:flex;align-items:center;gap:0;width:max-content;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.commerce-quantity button{width:40px;height:38px;background:var(--bg3);color:var(--gold);font-size:18px}
.commerce-quantity span{width:48px;text-align:center;font-weight:800}
.commerce-total{display:flex;justify-content:space-between;align-items:end;margin:18px 0;padding:16px;background:rgba(245,166,35,.06);border:1px solid var(--border2);border-radius:10px}
.commerce-total strong{font:800 22px 'Orbitron';color:var(--gold)}
.commerce-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#05070b;border-radius:8px;font:900 13px 'Exo 2';letter-spacing:1px}
.commerce-primary:disabled{opacity:.45;cursor:not-allowed}
.commerce-tabs{max-width:1180px;margin:24px auto 0}
.commerce-tab-buttons{display:flex;gap:8px;flex-wrap:wrap}
.commerce-tab-button{padding:11px 18px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-weight:700}
.commerce-tab-button.active{color:var(--gold);border-color:var(--gold)}
.commerce-tab{display:none;margin-top:10px}.commerce-tab.active{display:block}
.commerce-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.commerce-feature{padding:11px 13px;background:var(--bg3);border-radius:8px;color:var(--text)}
.commerce-feature i{color:var(--green);margin-right:8px}
.checkout-overlay{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s ease}
.checkout-overlay.open{display:flex}
.checkout-card{width:min(920px,100%);max-height:92vh;overflow:auto;background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 0 1px rgba(245,166,35,.22);animation:checkoutCardEnter .28s cubic-bezier(.16,1,.3,1) both}
@keyframes checkoutCardEnter{from{opacity:.5;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.checkout-close{float:right;background:transparent;color:var(--text2);font-size:22px}
.payment-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.payment-method{min-height:70px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer;display:grid;grid-template-columns:30px minmax(0,auto);grid-template-rows:auto auto;align-content:center;justify-content:center;align-items:center;column-gap:8px;text-align:left}
.payment-method img{grid-row:1/3;width:28px!important;height:28px!important;object-fit:contain;display:block}
.payment-method strong{grid-column:2;grid-row:1;line-height:1.15;white-space:nowrap}
.payment-method small{grid-column:2;grid-row:2;line-height:1.1;margin:0!important}
.payment-method:not(:has(img)){grid-template-columns:auto;text-align:center}.payment-method:not(:has(img)) strong,.payment-method:not(:has(img)) small{grid-column:1}
.payment-method.selected{border-color:var(--gold);background:rgba(245,166,35,.08)}
.payment-private{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.payment-account{padding:18px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.payment-field-label{display:block;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--text2,#b9c8db);letter-spacing:.06em;margin-top:10px;margin-bottom:4px}
.payment-value{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:rgba(12,18,30,.88);border:1px solid rgba(245,166,35,.22);border-radius:8px;margin-top:4px;margin-bottom:10px;transition:border-color .22s ease,box-shadow .22s ease}
.payment-value:focus-within{border-color:var(--gold);box-shadow:0 0 14px rgba(245,166,35,.2)}
.pv-text-wrap{min-width:0;flex:1;overflow:hidden}
.pv-val{font-family:'Orbitron',monospace;font-size:14px;font-weight:800;color:var(--white);letter-spacing:.04em;word-break:break-all}
.pv-copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);border-radius:6px;color:var(--gold,#f5a623);font-family:'Exo 2',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;flex-shrink:0;min-height:32px;transition:all .22s cubic-bezier(.2,.8,.2,1)}
.pv-copy-btn:hover{background:var(--gold,#f5a623);color:#080c14;box-shadow:0 4px 16px rgba(245,166,35,.45);transform:translateY(-1px)}
.pv-copy-btn:active{transform:scale(.94)}
.pv-copy-btn.is-copied{background:rgba(46,204,113,.2)!important;border-color:#2ecc71!important;color:#2ecc71!important;box-shadow:0 0 16px rgba(46,204,113,.45)!important;animation:copyPulse .32s cubic-bezier(.2,.8,.2,1)}
@keyframes copyPulse{0%{transform:scale(.92)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

.payment-qr-wrap{display:flex;flex-direction:column;align-items:center;margin:14px auto 10px;padding:12px;background:#ffffff;border-radius:12px;width:fit-content;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.payment-qr{max-width:180px;max-height:180px;object-fit:contain;display:block}
.payment-qr-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;background:#0d131f;border-radius:6px;color:var(--gold);font-family:'Exo 2',sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em}

.payment-tutorial-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.payment-tutorial-media img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--bg3);border-radius:8px}

.payment-form input,.payment-form textarea{width:100%;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);margin:6px 0 12px;transition:border-color .2s,box-shadow .2s}
.payment-form input:focus,.payment-form textarea:focus{border-color:var(--gold);box-shadow:0 0 14px rgba(245,166,35,.25);outline:none}

/* ── Custom File Upload Component ───────────────────────────── */
.custom-file-upload{position:relative;width:100%;margin:6px 0 16px}
.custom-file-upload input[type="file"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2;margin:0;padding:0}
.file-upload-label{display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(14,21,33,.85);border:1px dashed rgba(245,166,35,.35);border-radius:9px;cursor:pointer;transition:all .22s ease}
.custom-file-upload:hover .file-upload-label,.custom-file-upload:focus-within .file-upload-label{border-color:var(--gold);background:rgba(245,166,35,.06);box-shadow:0 0 18px rgba(245,166,35,.2)}
.custom-file-upload.has-file .file-upload-label{border-style:solid;border-color:#2ecc71;background:rgba(46,204,113,.08);box-shadow:0 0 16px rgba(46,204,113,.2)}
.file-upload-icon{width:36px;height:36px;border-radius:50%;background:rgba(245,166,35,.12);color:var(--gold);display:grid;place-items:center;font-size:15px;flex-shrink:0;transition:all .22s ease}
.custom-file-upload.has-file .file-upload-icon{background:rgba(46,204,113,.2);color:#2ecc71}
.file-upload-info{display:flex;flex-direction:column;min-width:0;flex:1}
.file-upload-title{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-upload-hint{font-family:'Exo 2',sans-serif;font-size:10px;color:var(--text3,#8da1b9);margin-top:2px}
.file-upload-badge{padding:5px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--text);flex-shrink:0;transition:all .2s ease}
.custom-file-upload:hover .file-upload-badge{background:rgba(245,166,35,.2);border-color:var(--gold);color:var(--gold)}
.custom-file-upload.has-file .file-upload-badge{background:rgba(46,204,113,.2);border-color:#2ecc71;color:#2ecc71}

/* ── Submit Proof Button ────────────────────────────────────── */
.submit-proof-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;font-size:13px;font-weight:900;letter-spacing:1.2px;margin-top:8px;box-shadow:0 8px 25px rgba(245,166,35,.35);transition:all .25s cubic-bezier(.2,.8,.2,1)}
.submit-proof-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 35px rgba(245,166,35,.55)}
.submit-proof-btn:active:not(:disabled){transform:scale(.98)}
.submit-proof-btn .btn-icon{font-size:12px;transition:transform .22s ease}
.submit-proof-btn:hover:not(:disabled) .btn-icon{transform:translateX(4px)}

.commerce-error{text-align:center;padding:140px 20px;color:var(--text2)}
@media(max-width:800px){.commerce-grid{grid-template-columns:1fr}.commerce-shell{padding:90px 12px 50px}.commerce-panel{padding:15px}.payment-private{grid-template-columns:1fr;gap:16px}.commerce-features{grid-template-columns:1fr}}
@media(max-width:520px){.private-youtube-player{min-height:190px}.private-youtube-icon{width:54px;height:54px;font-size:19px}}

.checkout-guide{margin:18px 0;padding:16px 18px;background:rgba(245,166,35,.055);border:1px solid var(--border);border-radius:10px}
.checkout-guide .commerce-section-title{margin:0 0 10px}
.checkout-guide ol{margin:0;padding-left:22px;display:grid;gap:8px}
.checkout-guide li{padding-left:3px;color:var(--text2);font:500 13px/1.55 'Exo 2',sans-serif}
.checkout-guide li::marker{color:var(--gold);font-weight:800}
.checkout-guide strong{color:var(--text);font-weight:800}
.payment-account .checkout-guide{margin-bottom:0}
@media(max-width:520px){.checkout-guide{padding:14px}.checkout-guide li{font-size:12px}}

/* ═════════════════════════════════════════════════════════════
   PRODUCT COMMERCE & CHECKOUT VISUAL POLISH (v18.0)
   Golden Auras, Shimmer Action, Selection Rings, Tab Polish
   ═════════════════════════════════════════════════════════════ */

.commerce-panel {
  position: relative;
  background: linear-gradient(165deg, rgba(20, 28, 44, 0.94) 0%, rgba(12, 18, 30, 0.98) 100%);
  border: 1px solid rgba(245, 166, 35, 0.18);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 166, 35, 0.08);
}

.variant-option {
  position: relative;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.variant-option:hover:not(.maintenance) {
  border-color: rgba(245, 166, 35, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.variant-option.selected {
  border-color: var(--gold);
  background: rgba(245, 166, 35, 0.12);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.22), inset 0 0 12px rgba(245, 166, 35, 0.08);
}

.payment-method {
  position: relative;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.payment-method:hover {
  border-color: rgba(245, 166, 35, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.payment-method.selected {
  border-color: var(--gold);
  background: rgba(245, 166, 35, 0.14);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.25);
}

.commerce-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 6px 22px rgba(245, 166, 35, 0.35);
}
.commerce-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.48);
}
.commerce-primary::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(28deg);
  animation: commerceBtnSweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes commerceBtnSweep {
  0% { left: -80%; }
  32%, 100% { left: 160%; }
}

.commerce-total strong {
  text-shadow: 0 0 18px rgba(245, 166, 35, 0.42);
}

.commerce-thumb {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.commerce-thumb:hover {
  transform: scale(1.05);
  border-color: rgba(245, 166, 35, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.commerce-thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(245, 166, 35, 0.35);
}

/* Animated checkout interactions & celebration */
#continueCheckout.checkout-clicked{transform:scale(.975);box-shadow:0 0 32px rgba(245,166,35,.75)!important;transition:all .15s ease}
.commerce-pill{transition:all .18s cubic-bezier(.2,.8,.2,1)}
.commerce-pill:active{transform:scale(.96)}
.commerce-pill.selected{border-color:var(--gold);box-shadow:0 0 18px rgba(245,166,35,.35);background:rgba(245,166,35,.12)}
.payment-method{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.payment-method:active{transform:scale(.975)}
.payment-method.selected{border-color:var(--gold)!important;box-shadow:0 0 20px rgba(245,166,35,.25);background:rgba(245,166,35,.08)}
.commerce-success-screen{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 10px 16px;animation:successScreenEnter .38s cubic-bezier(.16,1,.3,1) both}
@keyframes successScreenEnter{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}

.checkout-card.checkout-card-success{max-width:620px;padding:26px 22px;border-color:rgba(46,204,113,.35);box-shadow:0 24px 80px rgba(0,0,0,.75),0 0 35px rgba(46,204,113,.15)}

/* ── Hero Animated Checkmark with Radar Ripples ─────────────── */
.cyber-check-wrapper{position:relative;width:88px;height:88px;margin:8px auto 14px;display:grid;place-items:center}
.cyber-ripple-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(46,204,113,.55);pointer-events:none;animation:cyberRipple 2.2s cubic-bezier(.1,.7,.1,1) infinite}
.cyber-ripple-ring.ring-2{animation-delay:.75s}
@keyframes cyberRipple{0%{transform:scale(.75);opacity:.95}100%{transform:scale(1.6);opacity:0}}

.cyber-check-circle{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(46,204,113,.22) 0%,rgba(10,20,16,.94) 80%);border:2px solid rgba(46,204,113,.6);box-shadow:0 0 35px rgba(46,204,113,.45),inset 0 0 16px rgba(46,204,113,.2);display:grid;place-items:center;position:relative;z-index:2;animation:circleGlowPulse 2.8s ease-in-out infinite alternate}
@keyframes circleGlowPulse{0%{box-shadow:0 0 25px rgba(46,204,113,.35),inset 0 0 12px rgba(46,204,113,.15);border-color:rgba(46,204,113,.5)}100%{box-shadow:0 0 45px rgba(46,204,113,.65),inset 0 0 22px rgba(46,204,113,.3);border-color:rgba(46,204,113,.9)}}

.cyber-check-svg{width:52px;height:52px}
.cyber-svg-circle-bg{stroke:rgba(46,204,113,.18);stroke-width:3}
.cyber-svg-circle-stroke{stroke:#2ecc71;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176;animation:checkCircleStroke .65s cubic-bezier(.65,0,.45,1) forwards}
.cyber-svg-check{stroke:#2ecc71;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;filter:drop-shadow(0 0 6px rgba(46,204,113,.8));animation:checkMarkStroke .45s .35s cubic-bezier(.65,0,.45,1) forwards}
@keyframes checkCircleStroke{to{stroke-dashoffset:0}}
@keyframes checkMarkStroke{to{stroke-dashoffset:0}}

/* ── Status Pill ────────────────────────────────────────────── */
.verification-status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.38);color:#2ecc71;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;margin:4px auto 12px;box-shadow:0 0 20px rgba(46,204,113,.15)}
.verification-live-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px #2ecc71;animation:radarDotPulse 1.6s ease-in-out infinite}
@keyframes radarDotPulse{0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 8px #2ecc71}50%{transform:scale(1.4);opacity:.65;box-shadow:0 0 16px #2ecc71}}

/* ── Cyber Order Details Card ───────────────────────────────── */
.verification-details-card{width:100%;max-width:540px;margin:8px auto 20px;padding:16px 18px;background:rgba(14,21,33,.85);border:1px solid rgba(245,166,35,.22);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);text-align:left}
.vd-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.vd-order-ref{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vd-label{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--text3,#8da1b9);letter-spacing:.08em}
.vd-id-code{font-family:'Orbitron',monospace;font-size:14px;font-weight:800;color:var(--gold,#f5a623);letter-spacing:.04em;word-break:break-all}
.vd-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);border-radius:6px;color:var(--gold,#f5a623);font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease}
.vd-copy-btn:hover{background:var(--gold,#f5a623);color:#080c14;box-shadow:0 0 12px rgba(245,166,35,.4)}

/* ── 4-Step Interactive Verification Timeline ───────────────── */
.vd-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;width:100%}
.vd-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 4px;background:rgba(8,12,20,.65);border:1px solid rgba(255,255,255,.06);border-radius:8px;transition:all .2s ease}
.vd-step-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;margin-bottom:6px}
.vd-step.completed .vd-step-icon{background:rgba(46,204,113,.18);border:1px solid rgba(46,204,113,.5);color:#2ecc71}
.vd-step.active .vd-step-icon{background:rgba(245,166,35,.22);border:1px solid var(--gold,#f5a623);color:var(--gold,#f5a623);box-shadow:0 0 14px rgba(245,166,35,.5);animation:timelinePulse 1.6s ease-in-out infinite}
.vd-step.locked .vd-step-icon{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#5c6b7e}
@keyframes timelinePulse{0%,100%{transform:scale(1);box-shadow:0 0 10px rgba(245,166,35,.4)}50%{transform:scale(1.15);box-shadow:0 0 20px rgba(245,166,35,.75)}}

.vd-step-title{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:var(--white);line-height:1.25;margin-bottom:2px}
.vd-step.active .vd-step-title{color:var(--gold,#f5a623)}
.vd-step.locked .vd-step-title{color:#7b8ea5}
.vd-step-desc{font-family:'Exo 2',sans-serif;font-size:9px;color:var(--text3,#8da1b9);line-height:1.2}

.vd-info-note{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(46,204,113,.06);border:1px dashed rgba(46,204,113,.3);border-radius:8px;font-family:'Exo 2',sans-serif;font-size:11px;color:#b9c8db;line-height:1.45}
.vd-info-note i{color:#2ecc71;font-size:14px;flex-shrink:0}

/* ── Action Buttons ─────────────────────────────────────────── */
.verification-actions{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:540px;flex-wrap:wrap}
.verification-actions .commerce-primary{flex:1 1 220px;padding:13px 20px;font-size:12px;margin:0}
.commerce-secondary-btn{flex:1 1 180px;padding:13px 20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:8px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .22s ease}
.commerce-secondary-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:var(--white);transform:translateY(-2px)}

/* ── Submit Button Spinner State ────────────────────────────── */
.submit-btn-spinner{display:inline-block;margin-right:8px}
.commerce-primary.is-submitting{filter:brightness(1.15);box-shadow:0 0 28px rgba(245,166,35,.6);pointer-events:none}

/* ── Confetti & Particles ───────────────────────────────────── */
.commerce-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:15}
.confetti-particle{position:absolute;top:22%;left:50%;border-radius:2px;animation:confettiFly 2.2s cubic-bezier(.2,.8,.3,1) forwards;opacity:1}
@keyframes confettiFly{0%{transform:translate(0,0) rotate(0deg) scale(.6);opacity:1}75%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1);opacity:0}}

.success-burst-icon{animation:successBurst .5s cubic-bezier(.16,1,.3,1) both}
@keyframes successBurst{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ── Responsive Mobile Optimizations ────────────────────────── */
@media(max-width:560px){
  .checkout-card.checkout-card-success{padding:20px 14px}
  .vd-timeline{grid-template-columns:repeat(2,1fr);gap:8px}
  .verification-actions{flex-direction:column;gap:10px}
  .verification-actions .commerce-primary,.commerce-secondary-btn{width:100%;flex:1 1 100%}
  .vd-card-header{flex-direction:column;align-items:flex-start}
}

/* ── Product Live Proof Badge ───────────────────────────────── */
.product-live-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(13,20,32,0.85);border:1px solid rgba(245,166,35,0.25);border-radius:30px;box-shadow:0 4px 18px rgba(0,0,0,0.35);margin:12px 0 6px;font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:#ffffff;width:fit-content}
.product-live-badge strong{color:var(--gold,#f5a623)}
[data-theme="light"] .product-live-badge{background:rgba(255,255,255,0.92);border-color:rgba(212,137,26,0.35);color:#1a1a2e;box-shadow:0 4px 18px rgba(0,0,0,0.08)}
[data-theme="light"] .product-live-badge strong{color:#b47000}