/* Bonus page: header and page shell come from settings.css. */
.bonus-page .bonus-main { width:min(100%,560px); }
.bonus-card { display:grid; gap:14px; min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 42px var(--theme-shadow); }
.bonus-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--theme-field,var(--paper)); }
.bonus-tab { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:44px; padding:8px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); font:650 13px/1.25 var(--body); text-align:center; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.bonus-tab > span { min-width:0; overflow-wrap:anywhere; }
.bonus-tab > svg { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bonus-tab:hover { color:var(--ink); }
.bonus-tab[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:var(--surface); color:var(--ink); box-shadow:0 4px 14px var(--theme-shadow); }
.bonus-tab[aria-selected="true"] > svg { color:var(--accent); }
.bonus-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bonus-view { display:grid; gap:10px; min-width:0; }
.bonus-view[hidden] { display:none; }
.bonus-view:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.bonus-view-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.bonus-view-heading > h2 { min-width:0; margin:0; font-size:17px; line-height:1.3; overflow-wrap:anywhere; }
.bonus-soon { display:inline-flex; align-items:center; min-height:22px; padding:2px 9px; border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:999px; background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.2px; }
.bonus-view-note { margin:0; color:var(--muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.bonus-field-label { margin-top:4px; color:var(--muted); font-size:11px; font-weight:600; line-height:1.3; }
.bonus-field-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; min-width:0; }
.bonus-field-row > input { width:100%; min-width:0; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:var(--theme-field,var(--paper)); color:var(--ink); font:16px/1.4 var(--body); }
.bonus-field-row > input:disabled { cursor:not-allowed; opacity:.75; }
.bonus-field-row > input::placeholder { color:var(--muted); opacity:.8; }
.bonus-field-row > .button { min-height:44px; padding-inline:14px; white-space:nowrap; }
.bonus-field-row > .button:disabled { cursor:not-allowed; opacity:.55; }
.bonus-secondary-link { display:inline-flex; align-items:center; gap:6px; justify-self:start; min-height:44px; color:var(--accent); font-size:13px; font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
.bonus-secondary-link:hover { text-decoration:underline; }
.bonus-secondary-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
html[dir="rtl"] .bonus-secondary-link > span[aria-hidden] { transform:scaleX(-1); }
@media(prefers-reduced-motion:reduce) { .bonus-tab { transition:none; } }
@media(max-width:600px) {
  .bonus-card { gap:12px; padding:16px; border-radius:14px; }
  .bonus-tab { padding:8px 6px; font-size:13px; }
  .bonus-tab > svg { display:none; }
  .bonus-field-row { grid-template-columns:minmax(0,1fr); }
  .bonus-field-row > .button { width:100%; }
}
@media(max-width:380px) {
  .bonus-card { padding:14px; }
}

/* Activate bonus: the working promo-code form (bonus-codes.js, inline mode). */
.bonus-activate { --bonus-gold:#e4bd72; --bonus-fill:#dfb96e; --bonus-on-gold:#241b0b; }
:root[data-theme=light] .bonus-activate { --bonus-gold:#8d621b; --bonus-fill:#e4bc71; }
.bonus-activate #bonus-code-form { display:grid; gap:6px; min-width:0; margin:0; }
.bonus-activate #bonus-code-entry { display:grid; gap:6px; min-width:0; }
.bonus-activate #bonus-code-entry[hidden] { display:none; }
.bonus-activate #bonus-code-input { font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.bonus-activate #bonus-code-input::placeholder { text-transform:none; letter-spacing:normal; }
.bonus-activate #bonus-code-input[aria-invalid=true] { border-color:var(--theme-error-ink,var(--danger)); }
.bonus-activate #bonus-code-input:focus-visible { outline:2px solid var(--bonus-gold); outline-offset:2px; }
.bonus-activate .button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:9px; font:650 13px/1.4 var(--body); text-align:center; text-decoration:none; }
.bonus-activate :is(#bonus-code-activate,.bonus-promo-games) { min-width:132px; border:1px solid var(--bonus-fill); background:var(--bonus-fill); color:var(--bonus-on-gold); box-shadow:inset 0 1px 0 #ffffff24; }
.bonus-activate :is(#bonus-code-activate,.bonus-promo-games):hover:not(:disabled) { background:color-mix(in srgb,var(--bonus-fill) 88%,white); }
.bonus-activate :is(.button,#bonus-code-success):focus-visible { outline:2px solid var(--bonus-gold); outline-offset:3px; }
.bonus-activate #bonus-code-form:is([data-bonus-state=checking],[data-bonus-state=pending]) #bonus-code-activate::before { content:""; flex:none; width:14px; height:14px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:bonus-code-spin .8s linear infinite; }
.bonus-activate #bonus-code-signin,.bonus-activate #bonus-code-retry-account { justify-self:start; min-width:132px; }
.bonus-activate #bonus-code-signin { border-color:var(--bonus-fill); background:var(--bonus-fill); color:var(--bonus-on-gold); }
.bonus-activate #bonus-code-signin[hidden],.bonus-activate #bonus-code-retry-account[hidden] { display:none; }
.bonus-activate #bonus-code-activated { position:absolute; width:1px; height:1px; min-width:0; min-height:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); border:0; white-space:nowrap; }
.bonus-activate #bonus-code-status { min-height:20px; margin:0; color:var(--muted); font:400 12px/1.6 var(--body); overflow-wrap:anywhere; }
.bonus-activate #bonus-code-status:empty { visibility:hidden; }
/* Guests see the Sign in button; the matching "Sign in" status would repeat it. */
.bonus-activate:has(#bonus-code-signin:not([hidden])) #bonus-code-status { display:none; }
.bonus-activate:has(#bonus-code-form[data-bonus-state=error]) #bonus-code-status { color:var(--theme-error-ink,var(--danger)); }
.bonus-activate #bonus-code-status.cashier-promo-status-confirmed { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.bonus-activate .bonus-promo-terms { margin:0; color:var(--muted); font:400 11px/1.65 var(--body); overflow-wrap:anywhere; }
.bonus-activate .bonus-promo-terms[hidden] { display:none; }
.bonus-promo-success { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:16px; border:1px solid color-mix(in srgb,var(--bonus-gold) 30%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--bonus-gold) 5%,var(--theme-field,var(--paper))); }
.bonus-promo-success[hidden] { display:none; }
.bonus-promo-check { display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--bonus-gold) 35%,transparent); border-radius:50%; background:color-mix(in srgb,var(--bonus-gold) 10%,transparent); color:var(--bonus-gold); }
.bonus-promo-check svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bonus-promo-success[data-credited=true] .bonus-promo-check { animation:bonus-code-confirm .2s ease-out both; }
.bonus-promo-receipt { min-width:0; }
.bonus-activate #bonus-code-success-title { margin:0 0 5px; color:var(--ink); font:600 14px/1.5 var(--body); }
.bonus-activate #bonus-code-success-amount { display:block; color:var(--bonus-gold); font:600 clamp(26px,6vw,32px)/1.3 var(--body); font-variant-numeric:tabular-nums; letter-spacing:-.6px; overflow-wrap:anywhere; }
.bonus-activate #bonus-code-success-code { display:inline-block; max-width:100%; margin-top:10px; padding:4px 8px; border:1px solid var(--line); border-radius:5px; background:var(--theme-field,var(--paper)); color:var(--muted); font:500 11px/1.5 Consolas,"Liberation Mono",Menlo,monospace; letter-spacing:.07em; overflow-wrap:anywhere; }
.bonus-activate #bonus-code-success-code:empty { display:none; }
.bonus-activate #bonus-code-success-terms { margin:12px 0 0; color:var(--muted); font:400 12px/1.65 var(--body); overflow-wrap:anywhere; }
.bonus-promo-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.bonus-activate .bonus-promo-again { border:1px solid var(--line); background:var(--theme-field,var(--paper)); color:var(--ink); }
.bonus-activate .bonus-promo-again:hover:not(:disabled) { background:var(--raised,var(--surface)); }
@keyframes bonus-code-confirm { from { opacity:.35; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes bonus-code-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .bonus-promo-success[data-credited=true] .bonus-promo-check,.bonus-activate #bonus-code-form:is([data-bonus-state=checking],[data-bonus-state=pending]) #bonus-code-activate::before { animation:none; } }
@media(max-width:600px) {
  .bonus-activate #bonus-code-signin,.bonus-activate #bonus-code-retry-account { justify-self:stretch; }
}
@media(max-width:450px) {
  .bonus-promo-actions { grid-template-columns:minmax(0,1fr); }
  .bonus-promo-success { padding:14px; }
}