dialog:has(.purchase-form){width:576px;max-width:calc(100vw - 24px);max-height:90dvh;border:0;border-radius:24px;padding:26px 25px;color:#0f172a;background:#fff;box-shadow:0 30px 90px #0f172a40;animation:purchase-enter .22s ease-out}
dialog:has(.purchase-form)::backdrop{background:#0f172acf;backdrop-filter:blur(5px)}
dialog:has(.purchase-form) .dialog-head{border-bottom:1px solid #edf2f7;padding:0 0 22px;margin-bottom:26px;gap:12px}
dialog:has(.purchase-form) h2{font-size:23px;letter-spacing:-.6px;display:flex;align-items:center;gap:10px;margin:0}
dialog:has(.purchase-form) h2:before{content:"";width:10px;height:28px;border-radius:9px;background:#059669;flex-shrink:0}
dialog:has(.purchase-form) .dialog-head button{border-radius:30px;background:#f1f5f9;color:#475569}
.purchase-form h3{font-size:12px;letter-spacing:.4px;color:#71839e;font-weight:600;margin:25px 0 10px}
.purchase-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.purchase-plan{position:relative;cursor:pointer;min-width:0}
.purchase-plan>input{position:absolute;opacity:0;width:1px;height:1px}
.purchase-plan>span{display:flex;flex-direction:column;gap:6px;border:1px solid #dbe4ee;border-radius:17px;padding:16px 14px;min-height:95px;transition:border-color .2s,background .2s,box-shadow .2s}
.purchase-plan input:checked+span{border-color:#059669;background:#f3fcf9;box-shadow:0 0 0 1px #059669}
.purchase-plan input:focus-visible+span{outline:3px solid #93c5fd;outline-offset:3px}
.purchase-plan small{font-size:12px;color:#475569}.purchase-plan strong{font-size:15px}.purchase-plan input:checked+span strong{color:#059669}
.purchase-plan em{font-size:11px;font-style:normal;color:#8497b2}.purchase-plan b{position:absolute;right:8px;top:-9px;border-radius:20px;background:#059669;color:#fff;font-size:10px;padding:3px 8px}
.purchase-email{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid #dbe4ee;border-radius:16px;padding:0 15px;min-height:50px}
.purchase-email input{border:0!important;background:transparent!important;box-shadow:none!important;min-width:0;width:100%}
.purchase-confirm{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:#64748b;margin:14px 0 8px}
.purchase-confirm input{width:16px;height:16px;flex-shrink:0;accent-color:#059669;margin-top:2px}
.purchase-form .notice{background:#f0fdf7;border:1px solid #bbf7d0;color:#065f46;border-radius:17px;font-size:12px;padding:16px;line-height:1.7}
.voucher-input{display:flex;gap:8px}.voucher-input input{min-width:0;flex:1;border:1px solid #dbe4ee;border-radius:16px;background:#f8fafc;padding:12px 15px}.voucher-input button{border-radius:16px;background:#f1f5f9;color:#475569;white-space:nowrap}
.voucher-result{min-height:18px;font-size:12px;color:#047857;margin:7px 0}.voucher-result[data-error="true"]{color:#be123c}
.purchase-total{border-top:1px solid #edf2f7;margin-top:20px;padding-top:16px;display:grid;gap:8px}
.purchase-total>div,.purchase-total>strong{display:flex;justify-content:space-between;gap:16px}.purchase-total>div{font-size:12px;color:#64748b}.purchase-total>strong{font-size:18px}.purchase-total>strong span{color:#059669}
.purchase-terms{font-size:12px;line-height:1.7;color:#71839e;margin:20px 0 26px}.purchase-submit{width:100%;background:#059669;border-radius:16px;padding:15px}
.voucher-admin{margin-bottom:24px}.voucher-admin p{color:#64748b;font-size:13px}.voucher-admin .table-wrap{overflow:auto;margin-top:20px}
.voucher-breakdown{font-size:12px;color:#047857;padding:12px;background:#effcf5;border-radius:12px;margin:12px 0}
@keyframes purchase-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:480px){dialog:has(.purchase-form){padding:22px 16px}dialog:has(.purchase-form) h2{font-size:19px}.purchase-plans{gap:8px}.purchase-plan>span{padding:16px 8px}.purchase-plan strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){dialog:has(.purchase-form){animation:none}.purchase-plan>span{transition:none}}

/* Keep checkout actions visible; only the fields scroll on short viewports. */
dialog:has(.purchase-form){width:680px;max-height:calc(100dvh - 24px);padding:20px 24px;overflow:hidden}
dialog[open]:has(.purchase-form){display:flex;flex-direction:column}
dialog:has(.purchase-form) .dialog-head{flex:none;padding-bottom:14px;margin-bottom:0}
dialog:has(.purchase-form) h2{font-size:21px}
.purchase-form{display:flex;flex-direction:column;min-height:0;overflow:hidden;margin:0}
.purchase-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 3px;scrollbar-width:thin}
.purchase-form h3{margin:15px 0 9px;line-height:1.4}
.purchase-plans{gap:10px}
.purchase-plan>span{min-height:72px;padding:10px 12px;gap:3px;border-radius:14px}
.purchase-email{min-height:42px;border-radius:12px}
.purchase-email input{padding:10px 0}
.purchase-confirm{margin:9px 0;font-size:12px;line-height:1.45}
.purchase-form .notice{margin:8px 0 0;padding:10px 12px;border-radius:12px;line-height:1.5}
.voucher-input input{padding:10px 12px;border-radius:12px}
.voucher-input button{padding:10px 16px;border-radius:12px}
.voucher-result{min-height:0;margin:6px 0;line-height:1.4}
.voucher-result:empty{margin:0}
.purchase-footer{flex:none;background:#fff;padding-top:12px}
.purchase-total{margin-top:0;padding-top:12px;gap:4px}
.purchase-total>strong{font-size:17px}
.purchase-terms{margin:8px 0 12px;font-size:11px;line-height:1.45}
.purchase-submit{min-height:44px;padding:11px 16px;border-radius:12px}
@media(min-width:620px) and (max-height:740px){
 dialog:has(.purchase-form){width:760px;padding:16px 22px}
 .purchase-plans{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
 .purchase-plan>span{padding:9px;min-height:68px}
 .purchase-form h3{margin-top:11px}
 .purchase-form .notice{padding:8px 10px}
}
@media(max-width:480px){
 dialog:has(.purchase-form){max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px 14px}
 dialog:has(.purchase-form) h2{font-size:18px}
 .purchase-plan>span{padding:9px 7px;min-height:70px}
 .purchase-plans{gap:8px}
 .purchase-footer{padding-top:9px}
}