/* Purchase Flow — modal shared by widget purchases and token top-ups, plus the consulting form. Tokens and the 3-6-9 spacing rule per css-guidelines.md. Mounted lazily into by js/Sections/Purchase/purchaseFlow.js. */ .vw-purchase-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-lock, 100); align-items: center; justify-content: center; padding: var(--space-24); background: var(--space-opacity-90); } .vw-purchase-overlay.is-open { display: flex; } .vw-purchase-modal { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: var(--gradient-panel); border: 2px solid var(--blue-opacity-30); border-radius: var(--space-12); box-shadow: 0 var(--space-24) var(--space-48) var(--space-opacity-60); } .vw-purchase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-18) var(--space-18) var(--space-12); border-bottom: 2px solid var(--blue-opacity-15); } .vw-purchase-head h3 { font-size: var(--font-15); color: var(--text-primary); overflow-wrap: anywhere; } .vw-purchase-close { flex: none; width: var(--space-30); height: var(--space-30); font-size: var(--font-18); line-height: 1; color: var(--text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--space-6); } .vw-purchase-close:hover { color: var(--text-primary); background: var(--blue-opacity-10); } .vw-purchase-body { padding: var(--space-18); } .vw-purchase-error { margin-bottom: var(--space-12); padding: var(--space-9) var(--space-12); font-size: var(--font-12); line-height: 1.6; color: var(--error-red); background: var(--space-opacity-40); border-left: 3px solid var(--error-red); border-radius: 0 var(--space-6) var(--space-6) 0; } .vw-purchase-loading { padding: var(--space-18) 0; font-size: var(--font-12); color: var(--text-muted); text-align: center; } .vw-purchase-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12); margin-bottom: var(--space-18); background: var(--space-opacity-40); border: 2px solid var(--blue-opacity-20); border-radius: var(--space-9); font-size: var(--font-12); color: var(--text-primary); } .vw-purchase-summary span:last-child { font-weight: 600; color: var(--green-ghost); } .vw-purchase-summary-text { margin-bottom: var(--space-18); font-size: var(--font-12); line-height: 1.6; color: var(--text-secondary); } /* --- token pack picker --- */ .vw-purchase-packs { display: flex; flex-direction: column; gap: var(--space-9); margin-bottom: var(--space-18); } .vw-purchase-pack { display: flex; align-items: center; gap: var(--space-9); padding: var(--space-9) var(--space-12); background: var(--space-opacity-40); border: 2px solid var(--blue-opacity-20); border-radius: var(--space-9); cursor: pointer; } .vw-purchase-pack:hover { border-color: var(--blue-opacity-50); } .vw-purchase-pack.is-selected { border-color: var(--blue-electric); box-shadow: 0 0 var(--space-12) var(--blue-opacity-30); } .vw-purchase-pack-label { flex: 1; font-size: var(--font-12); color: var(--text-primary); } .vw-purchase-pack-price { font-size: var(--font-12); font-weight: 600; color: var(--green-ghost); } /* --- form fields --- */ .vw-purchase-form { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-18); } .vw-purchase-field { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-12); color: var(--text-secondary); } .vw-purchase-field em { font-style: normal; font-size: var(--font-9); color: var(--text-muted); } .vw-purchase-optional { text-transform: lowercase; } .vw-purchase-field input, .vw-purchase-field select, .vw-purchase-field textarea { padding: var(--space-9) var(--space-12); font-size: var(--font-12); font-family: inherit; color: var(--text-primary); background: var(--space-opacity-60); border: 2px solid var(--blue-opacity-30); border-radius: var(--space-9); resize: vertical; } .vw-purchase-field input:focus, .vw-purchase-field select:focus, .vw-purchase-field textarea:focus { outline: none; border-color: var(--blue-electric); box-shadow: 0 0 var(--space-12) var(--blue-opacity-40); } .vw-purchase-hint { font-size: var(--font-9); color: var(--text-muted); } .vw-purchase-actions { display: flex; justify-content: flex-end; } .vw-purchase-actions .btn-base { width: 100%; justify-content: center; } /* --- authorise (simulated pay-by-bank) --- */ .vw-purchase-simulated-badge { display: inline-block; margin-bottom: var(--space-12); padding: var(--space-3) var(--space-9); font-size: var(--font-9); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning-orange); background: var(--warning-orange-opacity-40); border-radius: var(--space-6); } .vw-purchase-pay-card { padding: var(--space-12); margin-bottom: var(--space-18); background: var(--space-opacity-40); border: 2px solid var(--blue-opacity-20); border-radius: var(--space-9); } .vw-purchase-pay-headline { font-size: var(--font-15); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-6); } .vw-purchase-pay-desc { font-size: var(--font-12); color: var(--text-secondary); margin-bottom: var(--space-12); } /* --- done --- */ .vw-purchase-done { margin-bottom: var(--space-18); font-size: var(--font-12); line-height: 1.6; color: var(--text-secondary); } .vw-purchase-done-headline { font-size: var(--font-15); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-9); } .vw-purchase-key-warning { padding: var(--space-9) var(--space-12); margin-bottom: var(--space-12); font-size: var(--font-12); font-weight: 600; color: var(--error-red); background: var(--space-opacity-40); border-left: 3px solid var(--error-red); border-radius: 0 var(--space-6) var(--space-6) 0; } .vw-purchase-key-row { display: flex; gap: var(--space-9); margin-bottom: var(--space-9); } .vw-purchase-key-field { flex: 1; min-width: 0; padding: var(--space-9) var(--space-12); font-size: var(--font-12); font-family: monospace; color: var(--text-primary); background: var(--space-opacity-60); border: 2px solid var(--blue-opacity-30); border-radius: var(--space-9); }