/* ============================================================
   My Bonuses — the authenticated player's own rewards.

   Brand-neutral by construction: every colour is an existing site
   token, so NeonBet and Winospin get their own palette from the same
   file. Nothing here names a brand.

   View visibility follows the same model as body.acct-open /
   body.cp-open / body.gd-open used by every other in-flow view.
   ============================================================ */

#nb-bonuses { display: none; }
body.bonus-open #nb-bonuses { display: block; }
body.bonus-open #nb-home,
body.bonus-open #nb-games,
body.bonus-open #nb-account,
body.bonus-open #nb-game { display: none !important; }
/* Content panels and Game Details take precedence, same as Account. */
body.cp-open #nb-bonuses,
body.gd-open #nb-bonuses { display: none !important; }

#nb-bonuses .mb-wrap {
  width: 100%; max-width: var(--container-max, 1240px);
  margin: 0 auto; padding: 0 var(--space-5, 16px) 96px;
}
@media (min-width: 768px) { #nb-bonuses .mb-wrap { padding: 0 var(--space-8, 32px) 64px; } }

/* ---- header ---- */
#nb-bonuses .mb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 6px;
}
#nb-bonuses .mb-back {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border, rgba(255,255,255,.12));
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--text-1, #eee); font-size: 20px; line-height: 1; cursor: pointer;
}
#nb-bonuses .mb-back:hover { background: var(--surface-3, rgba(255,255,255,.09)); }
#nb-bonuses .mb-h1 {
  font-size: clamp(20px, 4.5vw, 28px); font-weight: 800;
  letter-spacing: -.02em; margin: 0; color: var(--text-1, #fff);
}

/* ---- sections ---- */
#nb-bonuses .mb-sec { margin-top: 22px; }
#nb-bonuses .mb-sec-h {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3, #8a8a99); margin: 0 0 10px;
}

/* ---- cards ----
   One column on a phone, filling the width; a responsive grid from tablet up.
   auto-fit rather than a breakpoint per width, so a single reward does not sit
   in a narrow column on a wide screen. */
#nb-bonuses .mb-sec { display: grid; gap: 12px; }
@media (min-width: 700px) {
  #nb-bonuses .mb-sec { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  #nb-bonuses .mb-sec-h { grid-column: 1 / -1; }
}

#nb-bonuses .mb-card {
  display: flex; overflow: hidden;
  border-radius: var(--r-lg, 14px);
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: var(--surface-2, rgba(255,255,255,.04));
}
#nb-bonuses .mb-card.mb-locked { border-style: dashed; opacity: .92; }
/* Game artwork is landscape (the catalog serves 840x500, ~1.68:1). The thumb was
   a 92px-wide flex column with no height, so it stretched to the card and
   object-fit:cover cropped that landscape into a tall narrow slice — the
   aggressive zoom that hid the artwork. Giving the box its own aspect ratio and
   stopping it stretching lets ANY game's art render as intended, with no
   per-campaign CSS. */
#nb-bonuses .mb-thumb {
  flex: 0 0 124px; aspect-ratio: 16 / 10; align-self: center;
  margin: 12px 0 12px 12px; border-radius: 10px; overflow: hidden;
  background: var(--surface-3, rgba(255,255,255,.06));
}
#nb-bonuses .mb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
  #nb-bonuses .mb-thumb { flex-basis: 96px; margin: 10px 0 10px 10px; }
}
#nb-bonuses .mb-body { flex: 1 1 auto; min-width: 0; padding: 12px 14px 14px; }

#nb-bonuses .mb-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
#nb-bonuses .mb-name {
  font-size: 15px; font-weight: 700; margin: 0; color: var(--text-1, #fff);
  overflow-wrap: anywhere;
}
#nb-bonuses .mb-sub { font-size: 12px; color: var(--text-3, #8a8a99); margin: 2px 0 0; }

#nb-bonuses .mb-pill {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
#nb-bonuses .mb-ok   { color: var(--success, #2ecc8f); background: rgba(46, 204, 143, .13); }
#nb-bonuses .mb-wait { color: var(--warning, #f5a623); background: rgba(245, 166, 35, .13); }

/* ---- figures ---- */
/* Locked welcome offer: the PROMOTION is the hero, not the verification step. */
#nb-bonuses .mb-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3, #8a8a99);
}
#nb-bonuses .mb-hero { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
#nb-bonuses .mb-hero b {
  font-size: 34px; line-height: 1.05; font-weight: 800;
  background: linear-gradient(180deg, #fff, #b9a2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#nb-bonuses .mb-hero span {
  font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2, #c9c9d4);
}
#nb-bonuses .mb-card.mb-locked .mb-name.mb-game {
  font-size: 14px; font-weight: 600; color: var(--text-2, #c9c9d4); margin: 0;
}
@media (max-width: 480px) {
  #nb-bonuses .mb-hero b { font-size: 28px; }
  #nb-bonuses .mb-card.mb-locked .mb-body { padding-top: 12px; padding-bottom: 12px; }
}

#nb-bonuses .mb-figs { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 0; }
#nb-bonuses .mb-fig { display: flex; flex-direction: column; }
#nb-bonuses .mb-fig b {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-1, #fff); line-height: 1.15;
}
#nb-bonuses .mb-fig span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3, #8a8a99); margin-top: 1px;
}

/* ---- wagering ---- */
#nb-bonuses .mb-wager { margin-top: 12px; }
#nb-bonuses .mb-wager-h {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3, #8a8a99); margin-bottom: 5px;
}
#nb-bonuses .mb-wager-h span { text-transform: none; letter-spacing: 0; font-weight: 600; }
#nb-bonuses .mb-bar {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3, rgba(255,255,255,.09));
}
#nb-bonuses .mb-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #7c5cff), var(--success, #2ecc8f));
  transition: width .35s ease;
}
#nb-bonuses .mb-bar-t { font-size: 10.5px; color: var(--text-3, #8a8a99); margin-top: 4px; }

#nb-bonuses .mb-note { font-size: 12px; line-height: 1.45; color: var(--text-3, #8a8a99); margin: 8px 0 0; }
#nb-bonuses .mb-exp { font-size: 11.5px; color: var(--text-3, #8a8a99); margin: 9px 0 0; }
#nb-bonuses .mb-exp.is-soon { color: var(--warning, #f5a623); font-weight: 600; }

#nb-bonuses .mb-cta {
  margin-top: 12px; width: 100%;
}
@media (min-width: 700px) { #nb-bonuses .mb-cta { width: auto; min-width: 160px; } }

/* ---- empty / loading ---- */
#nb-bonuses .mb-empty {
  text-align: center; padding: 48px 18px;
  border-radius: var(--r-lg, 14px);
  border: 1px dashed var(--border, rgba(255,255,255,.12));
  background: var(--surface-2, rgba(255,255,255,.03));
  color: var(--text-3, #8a8a99);
}
#nb-bonuses .mb-empty-i { font-size: 34px; margin-bottom: 8px; }
#nb-bonuses .mb-empty h3 {
  font-size: 16px; font-weight: 700; color: var(--text-1, #fff); margin: 0 0 6px;
}
#nb-bonuses .mb-empty p { font-size: 13px; margin: 0 0 16px; }
/* .btn is already inline-flex, centred and 44px tall. An earlier
   `display:inline-block` here overrode that and pushed the label off-centre;
   the component is left to do its own job. */
#nb-bonuses .mb-empty .mb-cta { width: auto; min-width: 180px; }


/* ============================================================
   BONUSES HUB — My bonuses · Available now · Unlock more bonuses
   Tokens only; nothing here names a brand.
   ============================================================ */
#nb-bonuses .bh-sec { margin-top: 26px; }
#nb-bonuses .bh-sec:first-of-type { margin-top: 14px; }
#nb-bonuses .bh-sec-head { margin: 0 0 12px; }
#nb-bonuses .bh-sec-h {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-1, #fff);
}
#nb-bonuses .bh-sec-h::before {
  content: ''; width: 4px; height: 16px; border-radius: 4px;
  background: linear-gradient(180deg, var(--accent, #7c5cff), var(--accent-2, #ff2e93));
}
#nb-bonuses .bh-count {
  font-size: 11px; font-weight: 800; letter-spacing: 0; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-1, #fff); background: var(--surface-3, rgba(255,255,255,.1));
}
#nb-bonuses .bh-sec-sub { font-size: 12.5px; color: var(--text-3, #8a8a99); margin: 4px 0 0 14px; }

#nb-bonuses .bh-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  #nb-bonuses .bh-grid-mine  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  #nb-bonuses .bh-grid-offers { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  #nb-bonuses .bh-grid-lock  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* compact empty / notice row — never a tall block */
#nb-bonuses .bh-mini {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-lg, 14px);
  border: 1px dashed var(--border, rgba(255,255,255,.12));
  background: var(--surface-2, rgba(255,255,255,.03));
}
#nb-bonuses .bh-mini > div { flex: 1 1 200px; min-width: 0; }
#nb-bonuses .bh-mini b { display: block; font-size: 14px; color: var(--text-1, #fff); }
#nb-bonuses .bh-mini p { font-size: 12.5px; color: var(--text-3, #8a8a99); margin: 2px 0 0; }
#nb-bonuses .bh-mini-i { font-size: 22px; line-height: 1; }

/* shared bits */
#nb-bonuses .bh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#nb-bonuses .bh-name {
  min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3, #8a8a99); overflow-wrap: anywhere;
}
#nb-bonuses .bh-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#nb-bonuses .bh-chip-live { color: var(--success, #2ecc8f); background: rgba(46, 204, 143, .14); }
#nb-bonuses .bh-chip-lock { color: var(--text-2, #c9c9d4); background: var(--surface-3, rgba(255,255,255,.09)); }
#nb-bonuses .bh-title {
  font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em;
  color: var(--text-1, #fff); margin: 6px 0 0; overflow-wrap: anywhere;
}
#nb-bonuses .bh-mech { font-size: 12.5px; line-height: 1.45; color: var(--text-2, #c9c9d4); margin: 6px 0 0; }
#nb-bonuses .bh-terms-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-3, #8a8a99); text-decoration: underline;
}
#nb-bonuses .bh-terms { font-size: 11.5px; line-height: 1.5; color: var(--text-3, #8a8a99); margin: 8px 0 0; white-space: pre-line; }

#nb-bonuses .bh-art, #nb-bonuses .bh-lart {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, rgba(124,92,255,.35), transparent 60%),
              radial-gradient(120% 120% at 100% 100%, rgba(255,46,147,.28), transparent 60%),
              var(--surface-3, #15152a);
}
#nb-bonuses .bh-art img, #nb-bonuses .bh-lart img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
#nb-bonuses .bh-art-fallback {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 12px; text-align: center; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: 18px; color: #fff; overflow-wrap: anywhere;
}
#nb-bonuses .no-art .bh-art-fallback { display: flex; }

/* ---- available offer ---- */
#nb-bonuses .bh-offer {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  border-radius: var(--r-lg, 16px);
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid rgba(124, 92, 255, .45);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.03) inset;
}
#nb-bonuses .bh-offer .bh-art { aspect-ratio: 3 / 2; }
#nb-bonuses .bh-offer .bh-art.is-game img { object-fit: cover; }
#nb-bonuses .bh-ob { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 14px 14px; }
#nb-bonuses .bh-actions {
  margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
#nb-bonuses .bh-actions .bh-terms { flex-basis: 100%; margin-top: 0; }
#nb-bonuses .bh-cta {
  flex: 1 1 auto; min-height: 46px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .35);
}
@media (min-width: 700px) { #nb-bonuses .bh-cta { flex: 0 1 auto; min-width: 170px; } }

/* ---- upcoming (locked by deposit progression) ---- */
#nb-bonuses .bh-lock {
  display: flex; flex-direction: column; gap: 0; overflow: hidden; min-width: 0;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
/* The key art is 3:2 (800x533; Lucky 777 600x400) and carries painted headline text, so
   the box has to BE 3:2: a side thumb stretched to the card's height was a portrait box
   and object-fit:cover showed only ~40% of the artwork's width (the same slice-crop
   already fixed for .mb-thumb above), while a short centred thumb left the text column
   with 110-240px of dead space beside it. Full width on top is the available-offer card's
   own shape, so both sections read as one grid, nothing is cropped and nothing is empty. */
#nb-bonuses .bh-lart {
  flex: 0 0 auto; width: 100%; aspect-ratio: 3 / 2; min-height: 0;
}
#nb-bonuses .bh-lart img { filter: saturate(.55) brightness(.62); }
/* Locked reads from the dimmed art and the badge, not from an edge fade that would
   imply the image bleeds into the text column. */
#nb-bonuses .bh-lart::after {
  content: ''; position: absolute; inset: 0; background: rgba(8, 8, 20, .28);
}
#nb-bonuses .bh-lart .bh-art-fallback { font-size: 12px; }
#nb-bonuses .bh-lb { flex: 1 1 auto; min-width: 0; padding: 12px 14px 14px; }
#nb-bonuses .bh-lock .bh-title { font-size: 15px; color: var(--text-2, #d6d6e0); }
#nb-bonuses .bh-lock .bh-mech { color: var(--text-3, #8a8a99); }
#nb-bonuses .bh-unlock {
  font-size: 13.5px; font-weight: 800; margin: 9px 0 0;
  background: linear-gradient(90deg, #fff, #b9a2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#nb-bonuses .bh-steps { display: flex; gap: 6px; margin: 8px 0 0; }
#nb-bonuses .bh-step {
  width: 22px; height: 6px; border-radius: 999px; background: var(--surface-3, rgba(255,255,255,.12));
  display: inline-flex; align-items: center; justify-content: center;
}
#nb-bonuses .bh-step.is-done { background: linear-gradient(90deg, var(--accent, #7c5cff), var(--success, #2ecc8f)); }
#nb-bonuses .bh-step.is-goal {
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  color: var(--text-1, #fff); background: rgba(124, 92, 255, .25); border: 1px solid rgba(124, 92, 255, .6);
}
#nb-bonuses .bh-step.is-goal svg { width: 11px; height: 11px; }
#nb-bonuses .bh-left { font-size: 12px; color: var(--text-3, #8a8a99); margin: 6px 0 0; }
#nb-bonuses .bh-lb .bh-terms-btn { margin-top: 8px; }
@media (max-width: 480px) {
  #nb-bonuses .bh-title { font-size: 16px; }
  #nb-bonuses .bh-lock .bh-title { font-size: 15px; }
}

/* ---- navigation entry ----
   The live top bar is rendered by js/nav.js; this styles the entry there.
   It sits beside the wallet balance pill on every width, which is the
   "near Wallet" visibility the brief asked for, and it is emitted only in
   the signed-in branch of actionsHtml() so anonymous visitors never see it.
   Colour comes from tokens, so Winospin restyles it for free. */
.nav-mybonuses { position: relative; }
.nav-mybonuses:hover { border-color: var(--accent, #7c5cff); }
/* From tablet up there is room to say what it is rather than rely on the icon. */
@media (min-width: 900px) {
  .nav-mybonuses::after {
    content: 'Bonuses';
    font-size: 12px; font-weight: 700; letter-spacing: .03em; margin-left: 7px;
  }
  .nav-mybonuses { width: auto; padding: 0 13px; }
}
.drawer-link-bonuses { font-weight: 700; }

/* Total the withdrawal gate is holding, above the cards. */
#nb-bonuses .mb-owe {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 196, 0, 0.08); border: 1px solid rgba(255, 196, 0, 0.28);
  font-size: 13px; line-height: 1.45; color: var(--text-1, #f2f2f7);
}