/* Paid states reuse the approved detail layout and shared theme tokens. */
.xl-paid-dialog {
  /* Shared checkout radios disable native appearance and need these colors. */
  --unlock-focus: var(--brand-blue-default);
  --unlock-muted: var(--text-tertiary);
  --unlock-surface: var(--bg-page);
}
.xl-paid-unlock{margin-top:16px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.xl-paid-unlock h2{font-size:20px;line-height:28px;margin-bottom:6px}.xl-paid-copy p{font-size:14px;line-height:20px;color:var(--text-tertiary)}.xl-paid-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;max-width:55%}.xl-paid-actions button,.xl-paid-dialog button,.xl-paid-dialog a,.xl-paid-overlay button{border:0;border-radius:100px;padding:9px 16px;font-size:14px;line-height:20px;cursor:pointer;text-align:center}.xl-paid-vip{color:var(--membership-accent);border:1px solid var(--membership-accent)!important;background:transparent}.xl-paid-retry,.xl-paid-replay{background:var(--bg-emphasis);color:var(--text-secondary)}.xl-paid-actions button:disabled,.xl-paid-dialog button:disabled{opacity:.5;cursor:wait}.xl-paid-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);text-align:center}.xl-paid-overlay h2{font-size:24px;color:#fff;line-height:34px}.xl-paid-overlay p{font-size:14px;line-height:20px;color:#ddd;margin:12px 0 24px}.xl-paid-overlay button{display:block;margin:12px auto}.xl-paid-overlay .xl-paid-replay{color:white;background:rgba(255,255,255,.15)}.xl-paid-dialog{width:440px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border-default);border-radius:16px;background:var(--bg-page);color:var(--text-primary);overflow:auto;box-shadow:0 16px 64px rgba(0,0,0,.2)}.xl-paid-dialog::backdrop{background:var(--overlay-mask-default)}.xl-paid-dialog header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px}.xl-paid-dialog h2{font-size:22px;line-height:30px;margin:0}.xl-paid-dialog [data-unlock-close]{font-size:28px;line-height:24px;padding:4px 8px;background:none;color:var(--text-tertiary)}.xl-paid-dialog-body{display:flex;flex-direction:column;gap:16px;padding:0 24px 24px;font-size:14px;line-height:20px}.xl-paid-balance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;background:var(--bg-surface);padding:16px;border-radius:8px}.xl-paid-balance dt{color:var(--text-tertiary);font-weight:400;margin-bottom:8px}.xl-paid-balance dd{margin:0}.xl-paid-balance strong{font-size:24px;line-height:34px}.xl-paid-dialog fieldset{border:0;padding:0;margin:0;min-width:0}.xl-paid-dialog legend{font-size:14px;color:var(--text-secondary);border:0;margin-bottom:12px}.xl-paid-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.xl-paid-choices label{padding:12px;border:1px solid var(--border-default);border-radius:8px;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--bg-surface)}.xl-paid-choices label:has(input:checked){border-color:var(--brand-blue-default);background:var(--brand-blue-disabled)}.xl-paid-choices input{accent-color:var(--brand-blue-default)}.xl-paid-choices span{font-size:12px;line-height:18px}.xl-paid-choices strong{display:block;font-size:16px;line-height:22px}.xl-paid-note{color:var(--text-muted);font-size:12px}.xl-paid-dialog footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 24px;border-top:1px solid var(--border-default)}.xl-paid-dialog [data-checkout-total-price]{color:var(--brand-pink-default);font-size:20px}.xl-paid-dialog [data-checkout-message]{color:var(--text-secondary)}.xl-paid-vip-link{background:var(--bg-emphasis);color:var(--text-primary)}
@media(max-width:1100px){.xl-paid-unlock{align-items:flex-start;flex-direction:column}.xl-paid-actions{max-width:100%}}
@media(max-width:640px){.xl-paid-unlock{padding:16px;gap:12px}.xl-paid-actions{gap:8px}.xl-paid-actions button{font-size:12px;padding:8px 12px}.xl-paid-overlay h2{font-size:20px}.xl-paid-overlay p{margin:8px 0 12px}.xl-paid-overlay button{font-size:12px;padding:6px 12px;margin:8px auto}.xl-paid-dialog header{padding:20px 16px 16px}.xl-paid-dialog-body{padding:0 16px 20px}.xl-paid-dialog footer{padding:16px}}

/* Figma 3276:67509 / 3277:67622: summary on the left, purchase controls on the right. */
.xl-paid-unlock{--membership-accent:#f59b00;--xl-unlock-lock:url('/static/web/images/redesign/video-unlock/lock-light.svg');--xl-unlock-vip:url('/static/web/images/redesign/video-unlock/vip-light.svg');--xl-unlock-retry:url('/static/web/images/redesign/video-unlock/retry-light.svg');padding:24px;border:0;gap:24px;min-height:134px;flex-direction:row;align-items:center;flex-wrap:wrap}
:root[data-theme=dark] .xl-paid-unlock{--membership-accent:#f7c156;--xl-unlock-lock:url('/static/web/images/redesign/video-unlock/lock-dark.svg');--xl-unlock-vip:url('/static/web/images/redesign/video-unlock/vip-dark.svg');--xl-unlock-retry:url('/static/web/images/redesign/video-unlock/retry-dark.svg')}
.xl-paid-summary{flex:1 1 280px;min-width:0}
.xl-paid-copy{display:flex;flex-direction:column;min-width:0}
.xl-paid-unlock .video-unlock-heading{align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.xl-paid-unlock .video-unlock-heading h2{font:500 24px/34px var(--font-ui);margin:0;color:var(--text-primary)}
.xl-paid-unlock .video-unlock-status{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:30px;min-height:30px;padding:4px 12px;border:1px solid rgba(247,164,86,.28);border-radius:999px;background:rgba(247,164,86,.18);color:var(--membership-selection-text-accent-foreground);font:500 14px/20px var(--font-ui)}
.xl-paid-unlock[data-access-state=preview] .video-unlock-status:before{content:'';flex:none;width:16px;height:16px;background:var(--xl-unlock-lock) center/contain no-repeat}
.xl-paid-unlock[data-access-state=unlocked] .video-unlock-status{background:rgba(47,204,102,.12);color:var(--state-success);border-color:currentColor}
.xl-paid-unlock[data-access-state=error] .video-unlock-status{color:var(--state-danger);border-color:currentColor}
.xl-paid-copy p{font:400 14px/20px var(--font-ui);color:var(--text-muted);overflow-wrap:anywhere;margin:0}
.xl-paid-actions{max-width:100%;flex:0 1 auto;gap:12px;justify-content:flex-end}
.xl-paid-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:36px;height:36px;padding:8px 16px;white-space:nowrap;font:400 14px/20px var(--font-ui)}
.xl-paid-actions>.xl-paid-vip{min-width:162px;height:36px;padding:0 24px;gap:4px;border:1px solid var(--membership-accent);background:rgba(247,193,86,.1);color:var(--membership-accent);font:600 16px/22px var(--font-ui)}
.xl-paid-actions>.xl-paid-vip:before{content:'';flex:none;width:18px;height:18px;background:var(--xl-unlock-vip) center/contain no-repeat}
.xl-paid-actions>.xl-paid-retry:before{content:'';flex:none;width:20px;height:20px;background:var(--xl-unlock-retry) center/contain no-repeat}
.xl-paid-actions>button:focus-visible{outline:2px solid var(--brand-blue-default);outline-offset:3px}
@media(max-width:1100px){.xl-paid-summary{flex-basis:100%}.xl-paid-actions{justify-content:flex-start}}
@media(max-width:640px){
 .xl-paid-unlock{min-height:0;padding:calc(16 * var(--xl-h5-unit));gap:calc(16 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit))}
 .xl-paid-summary{flex-basis:100%}
 .xl-paid-unlock .video-unlock-heading{gap:calc(12 * var(--xl-h5-unit));margin-bottom:calc(12 * var(--xl-h5-unit))}
 .xl-paid-unlock .video-unlock-heading h2{font-size:calc(20 * var(--xl-h5-unit));line-height:calc(28 * var(--xl-h5-unit))}
 .xl-paid-unlock .video-unlock-status{height:calc(30 * var(--xl-h5-unit));min-height:0;gap:calc(4 * var(--xl-h5-unit));padding:calc(4 * var(--xl-h5-unit)) calc(12 * var(--xl-h5-unit));font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit))}
 .xl-paid-unlock[data-access-state=preview] .video-unlock-status:before{width:calc(16 * var(--xl-h5-unit));height:calc(16 * var(--xl-h5-unit))}
 .xl-paid-copy p{font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit))}
 .xl-paid-actions{gap:calc(12 * var(--xl-h5-unit))}
 .xl-paid-actions>button{height:calc(36 * var(--xl-h5-unit));min-height:0;padding:calc(8 * var(--xl-h5-unit)) calc(16 * var(--xl-h5-unit));gap:calc(6 * var(--xl-h5-unit));font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit))}
 .xl-paid-actions>.xl-paid-vip{min-width:calc(162 * var(--xl-h5-unit));height:calc(36 * var(--xl-h5-unit));padding:0 calc(24 * var(--xl-h5-unit));gap:calc(4 * var(--xl-h5-unit));font-size:calc(16 * var(--xl-h5-unit));line-height:calc(22 * var(--xl-h5-unit))}
 .xl-paid-actions>.xl-paid-vip:before{width:calc(18 * var(--xl-h5-unit));height:calc(18 * var(--xl-h5-unit))}
 .xl-paid-actions>.xl-paid-retry:before{width:calc(20 * var(--xl-h5-unit));height:calc(20 * var(--xl-h5-unit))}
}