/* Bonus page v3 (bp3) — wallet style: spotlight hero, glass cards, compact asset rows.
   Formal: only the skin's own CSS vars (accent + surfaces), no emoji, no rainbow, no hard-coded brand colour.
   Same markup on every template (1XBET, Gamblix, Hillside, …). Scoped to #pa[data-tab="bonus"].
   Free-spin rows (#wl-fs-box) are rendered by sk-autospin with classes only; hero (#bp-hero) by sk-bonuspage.js. */

#pa[data-tab="bonus"]{
  --bp-a: var(--brand-primary, var(--accent, var(--cta, #3b82f6)));
  --bp-accent: var(--bp-a);
  --bp-on: #fff; /* set by sk-bonuspage.js from the accent luminance */
  --bp-tx: var(--text, #fff);
  --bp-bgx: var(--bg, #0b0f17);
  --bp-s: var(--surface, color-mix(in srgb, var(--bp-tx) 6%, var(--bp-bgx)));
  --bp-s2: var(--surface-2, color-mix(in srgb, var(--bp-tx) 9%, var(--bp-bgx)));
  --bp-bd: var(--border, color-mix(in srgb, var(--bp-tx) 14%, transparent));
  --bp-mu: var(--text-muted, color-mix(in srgb, var(--bp-tx) 64%, transparent));
  --bp-line: color-mix(in srgb, var(--bp-tx) 7%, transparent);
  --bp-glass: color-mix(in srgb, var(--bp-s) 42%, transparent);
  --bp-glass-bd: color-mix(in srgb, var(--bp-tx) 7%, transparent);
  --bp-r: 22px;
  --bp-gap: 12px;
  font-family: InterV, Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
#pa[data-tab="bonus"] [hidden],
#pa[data-tab="bonus"] .bp-hide-empty,
#pa[data-tab="bonus"] .bp-promo-card{ display: none !important; }

#pa[data-tab="bonus"] #pa-body{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--bp-gap);
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
#pa[data-tab="bonus"] #pa-body > *{ margin-top: 0; margin-bottom: 0; }

/* ——— Hero: spotlight, expiry pill, illustration, headline ——— */
#pa[data-tab="bonus"] .bp-hero3{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 12px 10px;
  border-radius: 28px;
  background:
    radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--bp-a) 30%, transparent) 0%, color-mix(in srgb, var(--bp-a) 8%, transparent) 55%, transparent 80%);
}
#pa[data-tab="bonus"] .bp-hero-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: color-mix(in srgb, #000 62%, var(--bp-a));
  border: 1px solid color-mix(in srgb, #fff 8%, transparent);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.6);
}
#pa[data-tab="bonus"] .bp-hero-pill svg{ width: 14px; height: 14px; opacity: .85; flex: none; }
#pa[data-tab="bonus"] .bp-hero-art{
  width: 112px;
  height: 112px;
  margin: 2px 0 0;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--bp-a) 70%, transparent));
}
#pa[data-tab="bonus"] .bp-hero-v{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--bp-tx);
}
#pa[data-tab="bonus"] .bp-hero-l{
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-mu);
  letter-spacing: .01em;
}

/* ——— Glass base for every card ——— */
#pa[data-tab="bonus"] .pa-balcards,
#pa[data-tab="bonus"] .pa-card,
#wl-fs-box .wl-fs-list,
#pa[data-tab="bonus"] #bp-jp .bp-jp-grid{
  border-radius: var(--bp-r, 22px);
  border: 1px solid var(--bp-glass-bd, rgba(255,255,255,.05));
  background: var(--bp-glass, rgba(20,24,36,.4));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.7);
}

/* ——— KPIs: one compact glass card, three columns ——— */
#pa[data-tab="bonus"] .pa-balcards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 12px 4px;
  overflow: hidden;
}
#pa[data-tab="bonus"] .pa-balcards::before,
#pa[data-tab="bonus"] .pa-balcards::after{ content: none; }
#pa[data-tab="bonus"] .pa-balcards .pa-bc,
#pa[data-tab="bonus"] .pa-bc{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 2px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#pa[data-tab="bonus"] .pa-balcards .pa-bc + .pa-bc{ box-shadow: inset 1px 0 0 var(--bp-line); }
#pa[data-tab="bonus"] .pa-balcards .bp-ico,
#pa[data-tab="bonus"] .pa-bc > .ic{ display: none; }
#pa[data-tab="bonus"] .pa-bc small{
  order: 1;
  max-width: 100%;
  color: var(--bp-mu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pa[data-tab="bonus"] .pa-bc b,
#pa[data-tab="bonus"] .pa-bc b.num,
#pa[data-tab="bonus"] .pa-balcards .pa-bc:first-child b{
  order: 2;
  max-width: 100%;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bp-tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ——— Section subtitle + generic card ——— */
#pa[data-tab="bonus"] .pa-card{ padding: 14px 16px 16px; gap: 10px; }
#pa[data-tab="bonus"] .pa-card-h{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  margin: 0 0 2px;
  border: 0;
}
#pa[data-tab="bonus"] .pa-card-h h3{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bp-mu);
}
#pa[data-tab="bonus"] .pa-card-h h3 .ic,
#pa[data-tab="bonus"] .pa-card-h h3 .bp-ico{ display: none; }
#pa[data-tab="bonus"] .pa-card-h small.dim{ margin-left: auto; font-size: 12px; color: var(--bp-mu); }
/* cards whose rows carry their own glass: header becomes a plain subtitle above */
#pa[data-tab="bonus"] #wl-fs-box > .pa-card,
#pa[data-tab="bonus"] #bp-jp{
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}
#pa[data-tab="bonus"] #wl-fs-box .pa-card-h,
#pa[data-tab="bonus"] #bp-jp .pa-card-h{ padding: 0 4px; margin: 0 0 12px; }

/* ——— Active bonuses / offers as compact rows ——— */
#pa[data-tab="bonus"] .pa-bonus,
#pa[data-tab="bonus"] .pa-offer{
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--bp-line);
}
#pa[data-tab="bonus"] .pa-card-h + .pa-bonus,
#pa[data-tab="bonus"] .pa-card-h + .pa-offer{ border-top: 0; padding-top: 4px; }
#pa[data-tab="bonus"] .pa-bonus-h{ align-items: flex-start; }
#pa[data-tab="bonus"] .pa-bonus-h b:not(.num){ font-size: 14px; font-weight: 600; color: var(--bp-tx); }
#pa[data-tab="bonus"] .pa-bonus-h b.num{ font-size: 15px; font-weight: 700; color: var(--bp-tx); line-height: 1.2; flex: none; }
#pa[data-tab="bonus"] .pa-bonus-h small{ margin-top: 1px; font-size: 12px; color: var(--bp-mu); }
#pa[data-tab="bonus"] .pa-wager .pbar{ height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--bp-tx) 12%, transparent); }
#pa[data-tab="bonus"] .pa-wager .pbar span{ border-radius: 999px; background: var(--bp-a); }
#pa[data-tab="bonus"] .pa-wager-t{ font-size: 12px; color: var(--bp-mu); }
#pa[data-tab="bonus"] .bp-exp{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--bp-mu); }
#pa[data-tab="bonus"] .bp-exp.soon{ color: var(--warning, var(--bp-a)); }
#pa[data-tab="bonus"] .bp-exp .ic{ width: 13px; height: 13px; }
#pa[data-tab="bonus"] .pa-offer > .ic{ width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--bp-tx); background: color-mix(in srgb, var(--bp-a) 22%, transparent); box-sizing: border-box; flex: none; }
#pa[data-tab="bonus"] .pa-cols{ gap: var(--bp-gap); align-items: stretch; }
#pa[data-tab="bonus"] .pa-inline{ gap: 8px; }
#pa[data-tab="bonus"] .pa-inline .input{ border-radius: 12px; }
#pa[data-tab="bonus"] .bp-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 8px 4px; color: var(--bp-mu); }
#pa[data-tab="bonus"] .bp-empty .ic{ width: 28px; height: 28px; color: var(--bp-a); }
#pa[data-tab="bonus"] .bp-empty p{ margin: 0; font-size: 13px; color: var(--bp-mu); }
#pa[data-tab="bonus"] .bp-empty .btn{ margin-top: 4px; border-radius: 999px; }
#pa[data-tab="bonus"] .pa-card > p.muted{ display: none; }
#pa[data-tab="bonus"] .bp-empty .btn,
#pa[data-tab="bonus"] .btn-cta{ font-weight: 700; }

/* ——— Cashback ——— */
#pa[data-tab="bonus"] #wl-cb-box .cbx{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-top,
#pa[data-tab="bonus"] #wl-cb-box .bp-cb-hero{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bp-accent) 10%, var(--bp-s2));
  border: 1px solid color-mix(in srgb, var(--bp-accent) 26%, var(--bp-bd));
  
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-amt small{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-amt > b,
#pa[data-tab="bonus"] #wl-cb-box .cbx-amt > b.num{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-amt .dim b,
#pa[data-tab="bonus"] #wl-cb-box .cbx-amt .dim .num{
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-ring{
  width: 56px;
  height: 56px;
  flex: none;
  transform: rotate(-90deg);
  color: var(--bp-accent);
}
#pa[data-tab="bonus"] #wl-cb-box .bp-ring-bg,
#pa[data-tab="bonus"] #wl-cb-box .bp-ring-fg{
  fill: none;
  stroke-width: 8;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-ring-bg{
  stroke: color-mix(in srgb, var(--bp-accent) 18%, var(--surface-3, var(--bp-bd)));
}
#pa[data-tab="bonus"] #wl-cb-box .bp-ring-fg{
  stroke: var(--bp-accent);
  stroke-linecap: round;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-cb-due{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 180px;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-cb-due small{
  display: block;
  color: var(--bp-mu);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-cb-due b{
  font-size: 14px;
  font-weight: 700;
}
#pa[data-tab="bonus"] #wl-cb-box .bp-cb-due .bp-cd{
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bp-accent);
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-g{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  grid-template-columns: none;
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-g > div{
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  gap: 2px;
  min-width: 0;
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-h{
  border-radius: 10px;
  border: 1px solid var(--bp-bd);
}
#pa[data-tab="bonus"] #wl-cb-box .cbx-pct{
  background: var(--bp-accent);
  color: var(--cta-text, #111);
}
html.hs-tpl #pa[data-tab="bonus"] #wl-cb-box .cbx-pct,
html[data-theme="dark"] #pa[data-tab="bonus"] #wl-cb-box .cbx-pct{
  color: var(--cta-text, #0c2017);
}


/* ——— Free spins: the prominent active rows ——— */
#wl-fs-box{ --fs-a: var(--bp-a, var(--brand-primary, var(--accent, var(--cta, #3b82f6)))); }
#wl-fs-box .wl-fs-chips{ display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; margin: -4px 0 10px; }
#wl-fs-box .wl-fs-chips::-webkit-scrollbar{ display: none; }
#wl-fs-box .wl-fs-chip{
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 6px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--bp-glass-bd, rgba(255,255,255,.05));
  background: var(--bp-glass, rgba(20,24,36,.4));
  color: var(--bp-mu, var(--text-muted));
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#wl-fs-box .wl-fs-chip i{
  font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--bp-tx, #fff) 10%, transparent);
}
#wl-fs-box .wl-fs-chip.on{ color: var(--bp-on, #fff); background: var(--fs-a); border-color: transparent; }
#wl-fs-box .wl-fs-chip.on i{ background: color-mix(in srgb, var(--bp-on, #fff) 22%, transparent); }
#wl-fs-box .wl-fs-list{ display: flex; flex-direction: column; padding: 4px 16px; }
#wl-fs-box .wl-fs-row{
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#wl-fs-box .wl-fs-row + .wl-fs-row{ border-top: 1px solid var(--bp-line, rgba(255,255,255,.05)); }
#wl-fs-box .wl-fs-row[hidden]{ display: none !important; }
#wl-fs-box .wl-fs-ico{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bp-tx, #fff);
  background: color-mix(in srgb, var(--fs-a) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-a) 40%, transparent), 0 0 14px -2px color-mix(in srgb, var(--fs-a) 55%, transparent);
}
#wl-fs-box .wl-fs-ico svg{ width: 16px; height: 16px; display: block; }
#wl-fs-box .wl-fs-body{ min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 1px; }
#wl-fs-box .wl-fs-top{ display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 30px; }
#wl-fs-box .wl-fs-t{
  flex: 0 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--bp-tx, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#wl-fs-box .wl-fs-st{
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6;
  color: var(--bp-mu, var(--text-muted));
  background: color-mix(in srgb, var(--bp-tx, #fff) 8%, transparent);
}
#wl-fs-box .wl-fs-row[data-state="active"] .wl-fs-st{ color: var(--bp-tx, #fff); background: color-mix(in srgb, var(--fs-a) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-a) 45%, transparent); }
#wl-fs-box .wl-fs-row[data-state="pending"] .wl-fs-st{ color: var(--warning, #f0a630); background: color-mix(in srgb, var(--warning, #f0a630) 14%, transparent); }
#wl-fs-box .wl-fs-amt{
  margin-left: auto; flex: none;
  font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: var(--bp-tx, #fff); white-space: nowrap; text-align: right;
}
#wl-fs-box .wl-fs-amt small{ font-size: 12px; font-weight: 500; color: var(--bp-mu, var(--text-muted)); }
#wl-fs-box .wl-fs-bar{ height: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bp-tx, #fff) 12%, transparent); }
#wl-fs-box .wl-fs-bar i{ display: block; height: 100%; border-radius: inherit; background: var(--fs-a); box-shadow: 0 0 8px color-mix(in srgb, var(--fs-a) 60%, transparent); }
#wl-fs-box .wl-fs-exp{ font-size: 12px; line-height: 1.4; color: var(--bp-mu, var(--text-muted)); }
#wl-fs-box .wl-fs-left{ color: var(--bp-tx, #fff); font-weight: 600; }
#wl-fs-box .wl-fs-left::after,
#wl-fs-box .wl-fs-meta::after{ content: " · "; font-weight: 400; color: var(--bp-mu, var(--text-muted)); }
#wl-fs-box .wl-fs-exp .bp-cd{ color: var(--bp-tx, #fff); font-weight: 500; }
/* used / expired: muted grey */
#wl-fs-box .wl-fs-row[data-state="used"] .wl-fs-t,
#wl-fs-box .wl-fs-row[data-state="expired"] .wl-fs-t,
#wl-fs-box .wl-fs-row[data-state="used"] .wl-fs-amt,
#wl-fs-box .wl-fs-row[data-state="expired"] .wl-fs-amt{ color: var(--bp-mu, var(--text-muted)); font-weight: 500; }
#wl-fs-box .wl-fs-row[data-state="used"],
#wl-fs-box .wl-fs-row[data-state="expired"]{ opacity: .62; }
#wl-fs-box .wl-fs-row[data-state="used"] .wl-fs-ico,
#wl-fs-box .wl-fs-row[data-state="expired"] .wl-fs-ico{ color: var(--bp-mu, var(--text-muted)); background: color-mix(in srgb, var(--bp-tx, #fff) 7%, transparent); box-shadow: none; }
#wl-fs-box .wl-fs-row[data-state="used"] .wl-fs-v,
#wl-fs-box .wl-fs-row[data-state="expired"] .wl-fs-v{ text-decoration: line-through; }

/* ——— Jackpot: compact rows in a glass card ——— */
#pa[data-tab="bonus"] #bp-jp .bp-jp-grid{ display: flex; flex-direction: column; gap: 0; padding: 4px 16px; }
#pa[data-tab="bonus"] #bp-jp .bp-jp-tier{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 11px 0; margin: 0;
  border: 0; border-radius: 0; background: none;
}
#pa[data-tab="bonus"] #bp-jp .bp-jp-tier + .bp-jp-tier{ border-top: 1px solid var(--bp-line); }
#pa[data-tab="bonus"] #bp-jp .bp-jp-tier small{
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--bp-tx); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
#pa[data-tab="bonus"] #bp-jp .bp-jp-tier small::before{
  content: ""; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bp-a) 60%, #fff) 0%, color-mix(in srgb, var(--bp-a) 35%, transparent) 55%, color-mix(in srgb, var(--bp-a) 14%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-a) 40%, transparent);
}
#pa[data-tab="bonus"] #bp-jp .bp-jp-tier b{ font-size: 15px; font-weight: 700; color: var(--bp-tx); line-height: 1.2; white-space: nowrap; }
#pa[data-tab="bonus"] #bp-jp .pa-card-h small.dim{ font-size: 12px; }

/* ——— Footer ——— */
#pa[data-tab="bonus"] .bp-foot{ margin: 2px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--bp-mu); text-align: center; }
#pa[data-tab="bonus"] .bp-foot a{ color: var(--bp-tx); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ——— Mobile ——— */
@media (max-width: 767px){
  #pa[data-tab="bonus"]{ --bp-gap: 12px; --bp-r: 20px; }
  #pa[data-tab="bonus"] .bp-hero3{ padding: 14px 8px 6px; }
  #pa[data-tab="bonus"] .bp-hero-art{ width: 88px; height: 88px; }
  #pa[data-tab="bonus"] .bp-hero-v{ font-size: 26px; }
  #pa[data-tab="bonus"] .pa-balcards{ padding: 11px 2px; }
  #pa[data-tab="bonus"] .pa-balcards .pa-bc{ padding: 2px 6px; }
  #pa[data-tab="bonus"] .pa-bc small{ font-size: 10px; letter-spacing: .02em; }
  #pa[data-tab="bonus"] .pa-bc b,
  #pa[data-tab="bonus"] .pa-bc b.num,
  #pa[data-tab="bonus"] .pa-balcards .pa-bc:first-child b{ font-size: 14px; }
  #wl-fs-box .wl-fs-list,
  #pa[data-tab="bonus"] #bp-jp .bp-jp-grid{ padding: 2px 14px; }
  #pa[data-tab="bonus"] .pa-card{ padding: 12px 14px 14px; }
  #pa[data-tab="bonus"] #wl-cb-box .cbx-amt > b,
  #pa[data-tab="bonus"] #wl-cb-box .cbx-amt > b.num{ font-size: 20px; }
}
@media (prefers-reduced-motion: reduce){
  #pa[data-tab="bonus"] *{ transition: none !important; }
}

/* ——— Template-neutral layer: same look on every template (beats template card skins) ——— */
html body #pa[data-tab="bonus"] .pa-balcards .pa-bc{
  grid-column: auto !important;
  grid-row: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #pa[data-tab="bonus"] .pa-balcards .pa-bc + .pa-bc{ box-shadow: inset 1px 0 0 var(--bp-line) !important; }
html body #pa[data-tab="bonus"] .pa-balcards,
html body #pa[data-tab="bonus"] .pa-card:not(.wl-fs-card):not(#bp-jp),
html body #wl-fs-box .wl-fs-list,
html body #pa[data-tab="bonus"] #bp-jp .bp-jp-grid{
  background: var(--bp-glass) !important;
  border: 1px solid var(--bp-glass-bd) !important;
  border-radius: var(--bp-r) !important;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.7) !important;
}
html body #pa[data-tab="bonus"] #wl-fs-box > .pa-card,
html body #pa[data-tab="bonus"] #bp-jp,
html body #pa[data-tab="bonus"] .pa-card-h,
html body #pa[data-tab="bonus"] #bp-jp .bp-jp-tier,
html body #wl-fs-box .wl-fs-row{
  background: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #pa[data-tab="bonus"] #wl-fs-box > .pa-card,
html body #pa[data-tab="bonus"] #bp-jp,
html body #pa[data-tab="bonus"] .pa-card-h,
html body #wl-fs-box .wl-fs-row:first-child,
html body #pa[data-tab="bonus"] #bp-jp .bp-jp-tier:first-child{ border-top: 0 !important; }
html body #pa[data-tab="bonus"] #wl-fs-box > .pa-card,
html body #pa[data-tab="bonus"] #bp-jp{ padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body #pa[data-tab="bonus"] #wl-fs-box .wl-fs-row + .wl-fs-row,
html body #pa[data-tab="bonus"] #bp-jp .bp-jp-tier + .bp-jp-tier{ border-top: 1px solid var(--bp-line) !important; }
/* ——— Desktop: full width, left-aligned hero (illustration left, text right) ——— */
@media (min-width: 768px){
  #pa[data-tab="bonus"] #pa-body{ max-width: none; margin-left: 0; margin-right: 0; }
  #pa[data-tab="bonus"] .bp-hero3{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "art pill" "art v" "art l";
    align-content: center;
    justify-items: start;
    align-items: center;
    column-gap: 22px;
    row-gap: 6px;
    text-align: left;
    padding: 18px 24px;
    background: radial-gradient(40% 120% at 72px 50%, color-mix(in srgb, var(--bp-a) 30%, transparent) 0%, color-mix(in srgb, var(--bp-a) 7%, transparent) 60%, transparent 100%);
  }
  #pa[data-tab="bonus"] .bp-hero3 .bp-hero-art{ grid-area: art; margin: 0; }
  #pa[data-tab="bonus"] .bp-hero3 .bp-hero-pill{ grid-area: pill; align-self: end; }
  #pa[data-tab="bonus"] .bp-hero3 .bp-hero-v{ grid-area: v; font-size: 30px; }
  #pa[data-tab="bonus"] .bp-hero3 .bp-hero-l{ grid-area: l; align-self: start; }
  #pa[data-tab="bonus"] .bp-hero3:not(:has(.bp-hero-pill)){ grid-template-areas: "art v" "art l"; }
}
/* ——— Animated gift: gentle float + breathing glow + twinkle (off with reduced motion) ——— */
@keyframes bp3-float{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-6px) rotate(-2deg); } }
@keyframes bp3-glow{ 0%,100%{ opacity: .55; transform: scale(.92); } 50%{ opacity: 1; transform: scale(1.06); } }
@keyframes bp3-twinkle{ 0%,100%{ opacity: .15; } 50%{ opacity: .95; } }
#pa[data-tab="bonus"] .bp-hero-art{ overflow: visible; }
#pa[data-tab="bonus"] .bp-hero-art .bp-a-box{ transform-box: fill-box; transform-origin: 50% 100%; animation: bp3-float 3.2s ease-in-out infinite; }
#pa[data-tab="bonus"] .bp-hero-art .bp-a-glow{ transform-box: fill-box; transform-origin: 50% 50%; animation: bp3-glow 3.2s ease-in-out infinite; }
#pa[data-tab="bonus"] .bp-hero-art .bp-a-sp{ animation: bp3-twinkle 2.4s ease-in-out infinite; }
#pa[data-tab="bonus"] .bp-hero-art .bp-a-sp:nth-of-type(2){ animation-delay: .8s; }
#pa[data-tab="bonus"] .bp-hero-art .bp-a-sp:nth-of-type(3){ animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce){
  #pa[data-tab="bonus"] .bp-hero-art *{ animation: none !important; }
}
@media (max-width: 767px){
  #wl-fs-box .wl-fs-exp:has(.bp-cd) .wl-fs-date{ display: none; }
  #wl-fs-box .wl-fs-exp:has(.bp-cd) .wl-fs-meta::after{ content: ""; }
}