/* ============================================================================
   Engagement widgets — APR ticker · Daily Spin · Live calendar.
   PORTABLE: self-contained --cbi-* tokens (light fintech defaults) + own .cbi-btn,
   so it drops onto any site regardless of its CSS framework/palette. To re-theme a
   site, override the --cbi-* vars in that site's CSS (e.g. for a dark theme).
   Data: (relative) /api/public/bonuses. CTA: /redirect/{sub2}.
   ============================================================================ */
:root{
  --cbi-font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cbi-primary:#0A66C2; --cbi-primary-strong:#084E96;
  --cbi-cta:#0E7C3A; --cbi-cta-strong:#0A6230;
  --cbi-gold:#E0A53D; --cbi-gold-text:#7A5200; --cbi-gold-bg:#FFF6E5;
  --cbi-bg:#ffffff; --cbi-surface:#F7F9FC; --cbi-surface-2:#EEF3F9;
  --cbi-border:#DCE3ED; --cbi-border-hover:#C3D2E6;
  --cbi-text:#0F1B2D; --cbi-muted:#51607A;
  --cbi-danger:#B42318; --cbi-risk-bg:#FEF6E0; --cbi-risk-border:#E0A53D;
  --cbi-r:10px; --cbi-r-lg:16px;
  --cbi-shadow:0 4px 16px rgba(15,27,45,.08); --cbi-shadow-sm:0 1px 2px rgba(15,27,45,.06);
}

/* portable CTA button */
.cbi-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--cbi-cta);color:var(--cbi-cta-text,#fff);font:600 .95rem/1.1 var(--cbi-font);border:0;border-radius:8px;padding:11px 18px;text-decoration:none;cursor:pointer;transition:background .2s}
.cbi-btn:hover{background:var(--cbi-cta-strong);color:#fff}
.cbi-btn--sm{padding:8px 14px;font-size:.85rem}
.cbi-sponsored{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:4px;margin-left:6px}

/* ── APR ticker ──────────────────────────────────────────────────────────── */
.apr-ticker{display:flex;align-items:stretch;background:linear-gradient(90deg,var(--cbi-primary) 0%,var(--cbi-primary-strong) 100%);color:#fff;font-family:var(--cbi-font);overflow:hidden;border-bottom:1px solid rgba(0,0,0,.08)}
.apr-ticker__label{display:flex;align-items:center;gap:7px;flex:none;padding:0 16px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(0,0,0,.16);white-space:nowrap}
.apr-ticker__label .dot{width:7px;height:7px;border-radius:50%;background:#34D399;animation:aprPulse 1.8s infinite}
@keyframes aprPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.apr-ticker__viewport{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center}
.apr-ticker{max-width:100%}
.apr-ticker__track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:aprMarquee 60s linear infinite}
.apr-ticker:hover .apr-ticker__track{animation-play-state:paused}
@keyframes aprMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.apr-item{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;font-size:13.5px;text-decoration:none;color:#fff;border-right:1px solid rgba(255,255,255,.12);transition:background .2s;cursor:pointer}
.apr-item:hover{background:rgba(255,255,255,.10);color:#fff}
.apr-item .coin{font-weight:700}
.apr-item .rate{font-weight:700;font-variant-numeric:tabular-nums;color:#A7F3D0}
.apr-item .rate.hot{color:#FDE68A}
.apr-item .up{width:11px;height:11px;opacity:.85}

/* ── engage layout (self-contained, no Bootstrap dependency) ─────────────── */
.cbi-engage-wrap{max-width:1140px;margin:0 auto;padding:34px 16px;font-family:var(--cbi-font);overflow:hidden}
.cbi-engage-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;align-items:start}
.cbi-engage-grid>*{min-width:0;max-width:100%}
@media (max-width:900px){.cbi-engage-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
/* never let long unbroken strings (e.g. pair lists in "how to claim") blow out width */
.cal-card__title,.howto,.spin-result__title,.spin-result__desc{overflow-wrap:anywhere;word-break:break-word}

/* ── section heading ─────────────────────────────────────────────────────── */
.engage-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.engage-head h2{margin:0;font:700 1.35rem/1.2 var(--cbi-font);color:var(--cbi-text)}
.engage-head .live-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--cbi-cta);background:#E6F4EA;border:1px solid rgba(14,124,58,.25);padding:3px 9px;border-radius:999px}
.engage-sub{color:var(--cbi-muted);font:.92rem/1.5 var(--cbi-font);margin:0 0 18px}

/* ── Daily Spin ──────────────────────────────────────────────────────────── */
.spin-card{background:var(--cbi-bg);border:1px solid var(--cbi-border);border-radius:var(--cbi-r-lg);box-shadow:var(--cbi-shadow);padding:22px;text-align:center;position:relative;overflow:hidden;font-family:var(--cbi-font)}
.spin-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(10,102,194,.07),transparent 60%);pointer-events:none}
.spin-stage{position:relative;width:248px;height:248px;margin:6px auto 16px;max-width:100%}
.spin-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:20px solid var(--cbi-gold);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.spin-wheel{width:100%;height:100%;border-radius:50%;position:relative;border:6px solid #fff;box-shadow:0 0 0 3px var(--cbi-border),0 10px 28px rgba(15,27,45,.18);transition:transform 4.6s cubic-bezier(.16,.84,.30,1)}
.spin-wheel svg{display:block;width:100%;height:100%}
.spin-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--cbi-border);box-shadow:var(--cbi-shadow-sm);display:flex;align-items:center;justify-content:center}
.spin-hub svg{width:26px;height:26px;color:var(--cbi-primary)}
.spin-btn{font-size:1rem;padding:12px 26px}
.spin-note{font-size:.82rem;color:var(--cbi-muted);margin-top:10px;min-height:1.2em}
.spin-note b{color:var(--cbi-text);font-variant-numeric:tabular-nums}
.spin-result{margin-top:4px;text-align:left;border:1px solid var(--cbi-border);border-radius:var(--cbi-r);background:var(--cbi-surface);padding:14px;display:none;animation:revealUp .45s cubic-bezier(.16,.84,.3,1)}
.spin-result.show{display:block}
@keyframes revealUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.spin-result__tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--cbi-gold-text);background:var(--cbi-gold-bg);border:1px solid rgba(122,82,0,.25);padding:3px 9px;border-radius:999px;margin-bottom:8px}
.spin-result__title{font-weight:700;font-size:1.05rem;color:var(--cbi-text);line-height:1.3}
.spin-result__desc{font-size:.88rem;color:var(--cbi-muted);margin:4px 0 12px}
.spin-result__row{display:flex;gap:12px;align-items:center}
.spin-result img{width:84px;height:54px;object-fit:cover;border-radius:8px;flex:none;border:1px solid var(--cbi-border)}

/* ── Live calendar ───────────────────────────────────────────────────────── */
.cal-list{display:flex;flex-direction:column;gap:12px;font-family:var(--cbi-font)}
.cal-card{background:var(--cbi-bg);border:1px solid var(--cbi-border);border-radius:var(--cbi-r);box-shadow:var(--cbi-shadow-sm);padding:14px 16px;transition:box-shadow .2s,border-color .2s}
.cal-card:hover{box-shadow:var(--cbi-shadow);border-color:var(--cbi-border-hover)}
.cal-card.soon{border-color:var(--cbi-risk-border);background:linear-gradient(0deg,var(--cbi-risk-bg),var(--cbi-bg))}
.cal-card__main{display:flex;gap:14px;align-items:center}
.cal-card__icon{width:44px;height:44px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--cbi-surface-2);color:var(--cbi-primary)}
.cal-card__icon svg{width:22px;height:22px}
.cal-card.k-listing .cal-card__icon{background:#E8F0FE;color:#0A66C2}
.cal-card.k-event .cal-card__icon{background:#F3ECFE;color:#7C3AED}
.cal-card.k-bonus .cal-card__icon{background:#E6F4EA;color:#0E7C3A}
.cal-card__body{flex:1;min-width:0}
.cal-card__title{font-weight:600;color:var(--cbi-text);font-size:.96rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-card__meta{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.cal-kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--cbi-muted)}
.cal-cd{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--cbi-primary)}
.cal-cd.soon{color:var(--cbi-danger)}
.cal-cd svg{width:12px;height:12px;opacity:.7}
.cal-card__cta{flex:none}

/* ── how-to expander ─────────────────────────────────────────────────────── */
.howto-toggle{background:none;border:0;color:var(--cbi-primary);font:600 .82rem/1 var(--cbi-font);cursor:pointer;padding:8px 0 2px;display:inline-flex;align-items:center;gap:5px}
.howto-toggle:hover{color:var(--cbi-primary-strong);text-decoration:underline}
.howto-caret{font-size:.7rem}
.howto{max-height:0;overflow:hidden;transition:max-height .35s ease;font:.85rem/1.6 var(--cbi-font);color:var(--cbi-muted)}
.howto.open{max-height:520px;overflow:auto;border-top:1px dashed var(--cbi-border);margin-top:8px;padding-top:10px}
.howto img{max-width:100%;height:auto;border-radius:8px}
.howto p{margin:0 0 8px}
.howto :is(h1,h2,h3,h4){font-size:.95rem;color:var(--cbi-text);margin:10px 0 4px}
.spin-result .howto-toggle{padding-top:10px}

.cbi-confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

@media (max-width:575.98px){
  .apr-ticker__label{padding:0 11px;font-size:11px}
  .apr-item{padding:8px 13px;font-size:12.5px}
  .cal-card__main{flex-wrap:wrap}
  .cal-card__body{flex:1 1 0;min-width:0}   /* basis 0 → stays beside icon, never drops below it */
  .cal-card__cta{flex:1 1 100%;width:100%;order:3;margin-top:4px}
  .cal-card__cta .cbi-btn{width:100%}
  /* spin-result: stack banner over content so the Claim button gets full width */
  .spin-result__row{flex-direction:column;align-items:stretch}
  .spin-result img{width:100%;height:120px}
  .spin-result .cbi-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .apr-ticker__track{animation:none;overflow-x:auto}
  .spin-wheel{transition:transform .3s linear}
  .spin-result,.cal-card{animation:none}
}