/* Welcome-offer card, sign-up offer line, deposit bonus note, withdraw forfeit confirm (welcome-offer.js; RESEARCH
   docs/research/signup-conversion-2026-10-25 §2). Brand tokens only, so light and dark follow each site's theme. No backdrop:
   the sheet never blocks taps or scroll on the page behind it, and stays at most 46% of the viewport on phones. */
.wo-root[hidden]{display:none!important}
.wo-card{--wo-tint:color-mix(in srgb,var(--brand) 24%,transparent);position:fixed;z-index:60;left:8px;right:8px;bottom:70px;box-sizing:border-box;max-height:46vh;max-height:46dvh;display:flex;flex-direction:column;gap:8px;padding:12px 14px 2px;border:1px solid var(--border);border-radius:20px;background:radial-gradient(190px 130px at 64px 18px,var(--wo-tint),transparent 72%),var(--surface-2);color:var(--text);box-shadow:0 -4px 28px rgba(28,18,2,.2),0 2px 8px rgba(28,18,2,.08);font-family:var(--font);animation:wo-up .34s cubic-bezier(.2,.8,.2,1) both;transform:translateY(var(--wo-drag,0px))}
.wo-card.is-dragging{animation:none;transition:none}
.wo-grab{display:none}
@media(max-width:760px){.wo-grab{display:block;position:absolute;top:5px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:color-mix(in srgb,var(--text) 22%,transparent)}.wo-grab,.wo-head{touch-action:none}}
.wo-card:not(.is-dragging){transition:transform .18s ease-out}
@keyframes wo-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.wo-mascot{position:absolute;left:4px;top:-44px;width:auto;height:120px;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 8px rgba(28,18,2,.22))}
.wo-x{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--dim);font-size:26px;line-height:1;cursor:pointer}
.wo-x:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.wo-head{min-height:70px;padding:2px 40px 0 112px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.wo-title{margin:0;font-size:20px;line-height:1.15;font-weight:850;letter-spacing:-.2px;color:var(--text)}
.wo-hi{margin:0;font-size:13px;line-height:1.3;font-style:italic;font-weight:600;color:var(--dim)}
.wo-line{margin:0;font-size:13px;line-height:1.4;color:var(--text)}
.wo-timer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:4px 6px 4px 12px;border-radius:12px;background:color-mix(in srgb,var(--brand) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line))}
.wo-timer-label{font-size:12px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;color:var(--dim)}
.wo-clock{font-size:22px;line-height:1;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:.5px;padding:6px 10px;border-radius:9px;background:var(--text);color:var(--surface-2)}
.wo-cta.button{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:850;text-decoration:none;border-radius:12px;margin-top:2px}
.wo-terms{margin:0;font-size:11px;line-height:1.4;color:var(--faint);text-align:center}
.wo-later{align-self:center;min-height:44px;min-width:120px;padding:0 16px;border:0;background:transparent;color:var(--dim);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wo-card :focus-visible,.wo-pill :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the minimised pill: 44 px, docked above the tab bar */
.wo-pill{position:fixed;z-index:60;right:12px;bottom:72px;display:flex;align-items:center;height:44px;border:1px solid var(--border);border-radius:22px;background:var(--surface-2);color:var(--text);box-shadow:0 4px 18px rgba(28,18,2,.2);animation:wo-up .25s ease-out both;font-family:var(--font)}
.wo-pill-open{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 6px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.wo-pill-face{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--brand) 30%,var(--surface))}
.wo-pill-clock{font-variant-numeric:tabular-nums;padding:4px 8px;border-radius:8px;background:var(--text);color:var(--surface-2);font-size:13px}
.wo-pill-x{width:44px;height:44px;border:0;background:transparent;color:var(--dim);font-size:20px;cursor:pointer;border-radius:0 22px 22px 0}
@media(max-width:760px){
 /* the pill sits left: the prices are on the right of every row (and the floating slip button too) */
 .wo-pill{right:auto;left:12px}
 /* a toast while the sheet is up shows at the top instead of over the sheet's button */
 body.wo-sheet-open #toast{bottom:auto!important;top:calc(var(--header,67px) + 12px)}
 body.wc-has-slipbar .wo-card{bottom:118px}
 body.wc-has-slipbar .wo-pill{bottom:120px}
 /* the pill stays (the card is a moment): it docks above a casino dock, like the toast and the floating slip */
 body:has(.casino-dock) .wo-pill{bottom:calc(var(--mobile-bottom-space,62px) + 10px)}
 html[data-wyn-app] .wo-card{bottom:calc(70px + var(--wyn-inset-bottom-max,0px))}
 html[data-wyn-app] .wo-pill{bottom:calc(72px + var(--wyn-inset-bottom-max,0px))}
}
/* phones: the intent card is the tallest and docks highest (over wincricket's slip bar), so Bunty overlaps its top edge less and
   stays off the search field / row text above it */
@media(max-width:760px){.wo-card.is-intent .wo-mascot{top:-22px;height:100px;left:8px}.wo-card.is-intent .wo-head{padding-left:106px;min-height:64px}}
@media(max-width:760px) and (max-height:700px){.wo-hi{display:none}.wo-head{min-height:60px}.wo-mascot{height:104px;top:-38px}.wo-head{padding-left:98px}}
@media(min-width:761px){
 .wo-card{left:auto;right:24px;bottom:24px;width:372px;max-height:none;padding:16px 18px 4px;border-radius:22px}
 .wo-mascot{height:138px;top:-58px;left:6px}
 .wo-head{min-height:78px;padding-left:128px}
 .wo-pill{right:24px;bottom:24px}
}
/* wincricket's bet-slip column (≥1280 on the sportsbook routes): the card sits left of it */
@media(min-width:1280px){body:has(#wc-slipcol) .wo-card,body:has(#wc-slipcol) .wo-pill{right:calc(var(--wc-slipcol-w,340px) + 40px)}}
[data-theme="dark"] .wo-card{box-shadow:0 -4px 30px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35)}
[data-theme="dark"] .wo-mascot{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
@media(prefers-reduced-motion:reduce){.wo-card,.wo-pill{animation:none;transition:none}}
html.reduce-motion .wo-card,html.reduce-motion .wo-pill{animation:none;transition:none}

/* sign-up form: one line above "Create account" */
.wo-form-slot:empty{display:none}
.wo-form-line{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:7px 8px 7px 7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 12%,var(--surface));font-size:13px;line-height:1.35;color:var(--text)}
.wo-form-face,.wo-note-face{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--brand) 30%,var(--surface))}
.wo-form-text{flex:1 1 auto;min-width:0}
.wo-form-text strong{font-weight:800}
.wo-nw{white-space:nowrap}
.wo-form-clock{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;padding:4px 8px;border-radius:8px;background:var(--text);color:var(--surface-2)}

/* deposit page: the bonus note under the payment logos */
.wo-deposit-note{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px 8px 8px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 12%,var(--surface));font-size:13px;line-height:1.4;color:var(--text)}
.wo-deposit-note[hidden]{display:none}
.wo-deposit-note b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.wo-note-long{flex:1 1 auto;min-width:0}
.wo-note-short{display:none}
.wo-note-rule{display:block;font-size:11px;line-height:1.3;color:var(--dim)}
.wo-deposit-note.is-active{padding-bottom:13px}
.wo-note-bar{position:absolute;left:44px;right:12px;bottom:6px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
.wo-note-bar>i{display:block;height:100%;width:var(--wo-p,0%);border-radius:2px;background:var(--positive)}
/* phones (<= 760 px): the short form, and the form's eyebrow gives its room, so "Generate payment QR" stays clear of the tab
   bar (at 412 px the long sentence put it 4 px under the bar with the strip at its tallest) */
@media(max-width:760px){
 .wo-deposit-note{gap:6px;margin-bottom:6px;padding:3px 8px 3px 5px;font-size:12px;line-height:1.35;border-radius:10px}
 .wo-deposit-note.is-active{padding-top:2px;padding-bottom:7px}
 .wo-deposit-note.is-active .wo-note-short{white-space:normal}
 .wo-deposit-note.is-active .wo-note-rule{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wo-note-bar{left:34px;bottom:3px;height:3px}
 .wo-deposit-note .wo-note-face{flex-basis:22px;width:22px;height:22px}
 .wo-note-long{display:none}
 .wo-note-short{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 :is(.account-payment-form,.pago-deposit):has(>.wo-deposit-note)>.eyebrow{display:none}
 :is(.account-payment-form,.pago-deposit):has(>.wo-deposit-note)>h2{margin-top:0}
 .pay-apps:has(+.wo-deposit-note){margin-bottom:4px}
}

/* withdraw: the bonus forfeit confirm (account dialog) */
.wo-forfeit-progress{margin:-10px 0 18px;font-size:13px;line-height:1.5;color:var(--dim)}
.wo-forfeit-actions{display:grid;gap:10px}
.wo-forfeit-actions .button{min-height:48px}