/* Active checkout states supplement the approved pack-v2 purchase presentation.
   Tokens stay in the pack palette. These names are the existing RSA controllers. */
body[data-checkout] {
  --accent-red: #ff5a52;
  --accent-green: var(--green);
  --text-primary: var(--chalk);
  --text-secondary: var(--mist);
  --text-muted: var(--dim);
  --bg-surface: var(--surface);
  --border-subtle: var(--line);
  --font-display: Poppins, sans-serif;
}
.pack-v2 .payment-mode { grid-column: 1 / -1; margin: 20px 0 0; padding: 16px 20px; border: 1px solid var(--green); background: var(--night); color: var(--chalk); font-size: 15px; }
.pack-v2 .payment-mode[hidden] { display: none; }
.pack-v2 .pn-products-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.pack-v2 .pn-product-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--line); border-top: 5px solid var(--green); background: var(--surface); }
.pack-v2 .pn-ticket-num { color: var(--green); font: 800 48px/1 Poppins,sans-serif; margin-bottom: 20px; }
.pack-v2 .pn-ticket-num.pre { font-size: 36px; }
.pack-v2 .pn-product-name { min-height: 2.8em; font: 700 20px/1.4 Poppins,sans-serif; }
.pack-v2 .pn-product-price { border-top: 2px dashed var(--line); margin-top: 20px; padding: 24px 0; font: 800 clamp(30px,3vw,44px)/1.1 Poppins,sans-serif; white-space: nowrap; }
.pack-v2 .pn-product-btn { margin-top: auto; width: 100%; padding: 16px 20px; background: var(--red); color: white; border: 1px solid var(--red); font: 700 13px Poppins,sans-serif; }
.pack-v2 :is(.pn-product-btn,.pn-pay-button,.gv-select-btn,.gv-continue-btn,.gv-pay-button):not(:disabled):hover { background: #c0261f; color: white; }
.pack-v2 .pn-trans-pill:has(:checked),.pack-v2 .gv-trans-pill:has(:checked) { border-color: var(--green); background: var(--night); }
.pack-v2 .pn-toggle-btn { background: var(--night); color: var(--mist); cursor: pointer; }
.pack-v2 .pn-toggle-btn:has(:checked) { background: var(--green); color: var(--black); border-color: var(--green); }
.pack-v2 .pn-toggle-group { display: flex; gap: 12px; }
.pack-v2 .pn-toggle-group .pn-toggle { display: inline-flex; align-items: center; gap: 8px; }
.pack-v2 .pn-toggle-group input:checked + .pn-toggle-btn { background: var(--green); color: var(--black); border-color: var(--green); }
.pack-v2 .pn-terms-label,.pack-v2 .gv-terms-label { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.pack-v2 .pn-terms-label input,.pack-v2 .gv-terms-label input { margin-top: 3px!important; }
.pack-v2 .pn-pay-button,.pack-v2 .gv-pay-button { width: 100%; gap: 10px; min-height: 58px; margin-top: 8px; }
.pack-v2 :is(#card-element,#gv-card-element) { min-height: 62px; border: 1px solid #7a7a80; background: var(--night); }
.pack-v2 :is(#pn-pay-status,#gv-pay-status,#card-errors,#gv-card-errors) { margin-top: 18px; overflow-wrap: anywhere; font-size: 14px; }
.pack-v2 :is(#pn-step-success,#gv-step-5) { text-align: center; padding: 64px 24px; }
.pack-v2 :is(.pn-success-h,.gv-success-h) { font: 800 clamp(28px,5vw,44px)/1.15 Poppins,sans-serif; margin: 24px 0; }
.pack-v2 :is(.pn-success-p,.gv-success-p,.pn-success-email,.gv-success-ref) { max-width: 640px; margin: 20px auto; }
.pack-v2 #pn-fallback-cta { padding: 24px; margin-top: 36px; border-top: 1px solid var(--line); text-align: center; }
.pack-v2 .gv-validation-msg { color: #ff5a52; margin: 18px 0; border-left: 3px solid #ff5a52; padding: 12px 16px; }
.pack-v2 .gv-input-invalid { border-color: #ff5a52; }
.pack-v2 .gv-progress-done .gv-progress-num { background: var(--green); color: var(--black); }
.pack-v2 .gv-coach-overlay { position: absolute; inset: 0; z-index: 10000; }
.pack-v2 .gv-coach-backdrop { position: fixed; inset: 0; background: #0009; }
.pack-v2 .gv-coach-spotlight { position: absolute; pointer-events: none; border: 2px solid var(--green); box-shadow: 0 0 0 5px #000; border-radius: 2px; }
.pack-v2 .gv-coach-tooltip { position: absolute; transform: translateY(-50%); width: 270px; padding: 24px; background: var(--surface); border: 2px solid var(--green); color: var(--chalk); }
.pack-v2 .gv-coach-step-count { color: var(--green); font: 700 11px Poppins,sans-serif; margin-bottom: 10px; }
.pack-v2 .gv-coach-title { font: 700 18px Poppins,sans-serif; margin-bottom: 10px; }
.pack-v2 .gv-coach-text { font-size: 14px; line-height: 1.6; color: var(--mist); }
.pack-v2 .gv-coach-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 12px; }
.pack-v2 .gv-coach-skip,.pack-v2 .gv-coach-next { padding: 10px 16px; border: 1px solid var(--line); font: 700 12px Poppins,sans-serif; }
.pack-v2 .gv-coach-skip { color: var(--mist); background: var(--night); }
.pack-v2 .gv-coach-next { color: var(--black); background: var(--green); }
.pack-v2 .gv-spinner,.pack-v2 .pn-spinner { display: inline-block; width: 18px; height: 18px; margin-right: 10px; border: 2px solid #fff7; border-top-color: white; border-radius: 50%; animation: checkout-spin 1s linear infinite; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .pack-v2 .pn-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) { .pack-v2 .pn-products-grid { grid-template-columns: minmax(0,1fr); } .pack-v2 .gv-coach-overlay { display: none; } }
@media (prefers-reduced-motion: reduce) { .pack-v2 .gv-spinner,.pack-v2 .pn-spinner { animation: none; } }