/* Shared checkout · Figma 2786:19677 / 2786:19710. */
:root .xl-home .xl-checkout{box-sizing:border-box;width:calc(100% - 32px);max-width:520px;max-height:calc(100dvh - 32px);margin:auto;padding:32px;border:0;border-radius:12px;background:var(--bg-page);color:var(--text-primary);overflow:auto;box-shadow:none}
.xl-checkout::backdrop{background:rgba(0,0,0,.6)}
.xl-home .xl-checkout .coin-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;margin:0 0 24px}
.xl-home .xl-checkout .coin-dialog-header h2{margin:0;font:600 24px/34px var(--font-ui)}
.xl-home .xl-checkout .coin-close{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0;border:0;background:transparent;line-height:0}
.xl-checkout .coin-close img{width:24px;height:24px}
.xl-checkout #coin-form,.xl-checkout-body{display:flex;flex-direction:column;gap:24px}
.xl-home .xl-checkout .coin-checkout-summary{box-sizing:border-box;min-height:153px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;border-radius:12px;background:var(--bg-surface);text-align:center;overflow-wrap:anywhere}
.xl-checkout #coin-selected-name,.xl-checkout [data-checkout-name]{font:400 20px/28px var(--font-ui);color:var(--text-primary)}
.xl-home .xl-checkout #coin-selected-price,.xl-home .xl-checkout .vip-price,.xl-home .xl-checkout .vip-price span{margin:0;font:700 40px/48px DIN,'Arial Narrow',Arial,sans-serif;color:var(--brand-blue-default)}
.xl-checkout #coin-selected-gift,.xl-checkout [data-checkout-days]{font:400 14px/21px var(--font-ui);color:var(--text-secondary)}
.xl-checkout .coin-way-group{display:flex;flex-direction:column;gap:16px}
.xl-home .xl-checkout .coin-way-group h3{margin:0;font:600 16px/23px var(--font-ui);color:var(--text-primary)}
.xl-checkout .coin-way-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xl-home .xl-checkout .coin-way-card{box-sizing:border-box;min-height:72px;min-width:0;border:1px solid transparent;border-radius:12px;padding:12px 16px;background:var(--bg-surface);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-primary);font:600 16px/22px var(--font-ui)}
.xl-home .xl-checkout .coin-way-card[aria-checked=true],.xl-home .xl-checkout .coin-way-card.is-selected{border-color:var(--brand-blue-default);background:var(--brand-blue-subtle)}
.xl-checkout .coin-way-channel{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere}
.xl-checkout .coin-way-channel img{flex:none;width:28px;height:28px}
.xl-checkout .coin-way-state{flex:none;width:20px;height:20px}
.xl-checkout .coin-way-state img{width:20px;height:20px}
.xl-home .xl-checkout img.coin-dark{display:none}
:root[data-theme=dark] .xl-checkout img.coin-dark{display:block}
:root[data-theme=dark] .xl-checkout img.coin-light{display:none}
:root .xl-checkout .coin-way-card[aria-checked=true] img.coin-state-unselected,:root .xl-checkout .coin-way-card[aria-checked=false] img.coin-state-selected{display:none}
:root .xl-checkout label.coin-way-card.is-selected img.coin-state-unselected,:root .xl-checkout label.coin-way-card:not(.is-selected) img.coin-state-selected{display:none}
.xl-checkout label.coin-way-card{position:relative;cursor:pointer}
.xl-checkout label.coin-way-card input{position:absolute;right:16px;width:20px;height:20px;opacity:0}
.xl-checkout label.coin-way-card:focus-within{outline:2px solid var(--brand-blue-default);outline-offset:3px}
.xl-checkout label.coin-way-card.is-disabled{opacity:.6;cursor:default}
.xl-home .xl-checkout .coin-note{margin:0;min-height:44px;display:flex;align-items:center;font:400 14px/1.6 var(--font-ui);color:var(--text-tertiary)}
.xl-home .xl-checkout #coin-submit,.xl-home .xl-checkout .vip-button{min-height:48px;height:auto;padding:12px 16px;margin:0;border:0;border-radius:100px;font:600 16px/24px var(--font-ui);background:linear-gradient(90deg,var(--brand-gradient-default-start),var(--brand-gradient-default-end));color:var(--text-on-brand)}
.xl-home .xl-checkout .vip-button-secondary{background:var(--bg-surface);color:var(--brand-blue-default)!important}
.xl-checkout .coin-way-card:disabled{cursor:wait;opacity:.6}
.xl-checkout button:focus-visible,.xl-checkout a:focus-visible,.xl-checkout summary:focus-visible{outline:2px solid var(--brand-blue-default);outline-offset:3px}
.xl-checkout .xl-checkout-details{font:400 14px/22px var(--font-ui);color:var(--text-tertiary)}
.xl-checkout-details summary{cursor:pointer;color:var(--text-secondary)}
.xl-checkout-details summary span{float:right;color:var(--brand-blue-default)}
.xl-checkout-details .vip-benefits{margin:12px 0;font-size:14px;line-height:22px}
.xl-checkout-details [data-checkout-policy]{margin-top:12px}
.xl-home .xl-checkout .vip-dialog-message{margin:0!important;font:400 14px/22px var(--font-ui);color:var(--brand-blue-default)}
.xl-checkout .vip-dialog-message:empty{display:none}
#coin-checkout-message:not([hidden]){margin-top:24px}
/* Video checkout keeps its quote, package selection and fixed payment actions. */
.xl-home .xl-checkout.xl-paid-dialog[open]{display:flex;flex-direction:column}
.xl-home .xl-checkout.xl-paid-dialog{overflow:hidden}
.xl-home .xl-checkout.xl-paid-dialog .coin-dialog-header{padding:0;flex-shrink:0}
.xl-home .xl-checkout .xl-paid-dialog-body{padding:0 4px;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:20px;font:400 14px/22px var(--font-ui)}
.xl-checkout [data-checkout-title]:focus{outline:none}
.xl-checkout [data-checkout-description]{margin:0;color:var(--text-secondary)}
.xl-home .xl-checkout .xl-paid-balance{border-radius:12px;padding:12px 16px;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.xl-checkout .xl-paid-balance dt{margin:0 0 4px;font:400 14px/22px var(--font-ui)}
.xl-checkout .xl-paid-balance dd{overflow-wrap:anywhere}
.xl-checkout .xl-paid-balance strong{font:700 24px/32px DIN,'Arial Narrow',Arial,sans-serif;color:var(--brand-blue-default)}
.xl-checkout .xl-paid-balance dd span{margin-left:4px;font-size:12px;color:var(--text-secondary)}
.xl-home .xl-checkout fieldset{flex-shrink:0}
.xl-home .xl-checkout legend{margin:0 0 16px;padding:0;font:600 16px/23px var(--font-ui);color:var(--text-primary)}
.xl-home .xl-checkout .video-unlock-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xl-checkout .xl-paid-choices{gap:12px}
.xl-home .xl-checkout .xl-paid-choices label{padding:12px 16px;border:1px solid transparent;border-radius:12px;background:var(--bg-surface);grid-template-columns:minmax(0,1fr) 20px;gap:4px 8px}
.xl-home .xl-checkout .xl-paid-choices label.is-selected{border-color:var(--brand-blue-default);background:var(--brand-blue-subtle)}
.xl-home .xl-checkout .xl-paid-choices input{width:20px;height:20px}
.xl-home .xl-checkout .xl-paid-choices .video-checkout-tier-name{font:600 16px/24px var(--font-ui)}
.xl-home .xl-checkout .xl-paid-choices .video-checkout-tier-price{font:700 24px/32px DIN,'Arial Narrow',Arial,sans-serif;color:var(--brand-blue-default);max-width:none}
.xl-home .xl-checkout .xl-paid-note{margin:0;font:400 14px/22px var(--font-ui);color:var(--text-tertiary)}
.xl-home .xl-checkout .video-checkout-footer{padding:20px 0 0;margin:20px 0 0;border-top:1px solid var(--border-default);display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.xl-home .xl-checkout .video-checkout-total{margin:0;display:flex;justify-content:center;align-items:baseline;gap:12px}
.xl-home .xl-checkout .video-checkout-total>span{font:400 14px/22px var(--font-ui);color:var(--text-secondary)}
.xl-home .xl-checkout [data-checkout-total-price]{font:700 32px/40px DIN,'Arial Narrow',Arial,sans-serif;color:var(--brand-blue-default)}
:root .xl-home .xl-checkout.xl-paid-dialog .video-checkout-footer button{width:100%;flex:none;min-height:48px;padding:12px 16px;border-radius:100px;font:600 16px/24px var(--font-ui)}
@media(max-width:520px){:root .xl-home .xl-checkout{padding:24px}.xl-checkout .coin-way-cards{gap:12px}.xl-home .xl-checkout .coin-way-card{padding:12px 10px;gap:8px}.xl-checkout .coin-way-channel{gap:8px}}
@media(max-width:360px){.xl-checkout .coin-way-cards,.xl-home .xl-checkout .video-unlock-methods{grid-template-columns:minmax(0,1fr)}.xl-home .xl-checkout .coin-way-card{min-height:60px}.xl-checkout-details summary span{float:none;display:block;margin-left:16px}.xl-home .xl-checkout .xl-paid-choices label{padding:12px 8px}.xl-home .xl-checkout .xl-paid-choices .video-checkout-tier-name{font-size:14px}.xl-home .xl-checkout .xl-paid-choices .video-checkout-tier-price{font-size:20px}}
/* Once an order exists, keep its status, feedback and actions together on one screen. */
.xl-home .vip-dialog.xl-checkout:has([data-checkout-confirm][hidden]){padding:24px}
.vip-dialog:has([data-checkout-confirm][hidden]) .coin-dialog-header{margin-bottom:16px}
.vip-dialog:has([data-checkout-confirm][hidden]) .xl-checkout-body{gap:12px}
.vip-dialog:has([data-checkout-confirm][hidden]) .coin-checkout-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:88px;gap:4px 16px;padding:12px 16px;text-align:left}
.vip-dialog:has([data-checkout-confirm][hidden]) [data-checkout-name]{grid-column:1;grid-row:1}
.vip-dialog:has([data-checkout-confirm][hidden]) [data-checkout-days]{grid-column:1;grid-row:2}
.xl-home .vip-dialog:has([data-checkout-confirm][hidden]) .vip-price{grid-column:2;grid-row:1 / 3;font-size:32px;line-height:40px}
.xl-home .vip-dialog:has([data-checkout-confirm][hidden]) .vip-price span{font-size:32px;line-height:40px}
.vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-group{gap:8px}
.xl-home .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-card{min-height:56px;padding:10px 12px}
.vip-dialog:has([data-checkout-confirm][hidden]) .coin-note{display:none}
.vip-dialog:has([data-checkout-confirm][hidden]) .payment-feedback{margin:0;padding:0;border:0}
.vip-dialog:has([data-checkout-confirm][hidden]) .vip-dialog-actions{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px}
.xl-home .vip-dialog:has([data-checkout-confirm][hidden]) .vip-dialog-actions .vip-button{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:20px;padding:12px 10px;min-width:0;text-align:center}
@media(max-width:400px){
  .xl-home .vip-dialog.xl-checkout:has([data-checkout-confirm][hidden]){padding:20px}
  .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .xl-home .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-card{gap:4px;padding:10px 8px;font-size:14px}
  .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-channel{gap:4px}
  .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-channel img{width:22px;height:22px}
  .vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-state,.vip-dialog:has([data-checkout-confirm][hidden]) .coin-way-state img{width:16px;height:16px}
  .vip-dialog:has([data-checkout-confirm][hidden]) .xl-checkout-details summary span{float:right;display:inline;margin:0}
}