/* ============================================================
   tips.co.za Sprint 1 redesign — June 2026
   Goal: neutral operator cards, single green CTA, 44px tap targets
   Loaded after style.css, overrides bcz-* and bc-* card systems
   ============================================================ */

:root{
  --t1-primary:#1641B4;
  --t1-primary-hover:#1233A0;
  --t1-primary-light:#E8EEFF;
  --t1-text:#111827;
  --t1-text-muted:#4B5563;
  --t1-border:#E2E5EB;
  --t1-surface:#FFFFFF;
  --t1-surface-2:#F7F8FA;
  --t1-radius:12px;
  --t1-tap:44px; /* min tap target */
}
[data-theme="dark"]{
  --t1-primary:#3D6FFF;
  --t1-primary-hover:#5B85FF;
  --t1-primary-light:rgba(61,111,255,0.16);
  --t1-text:#e6edf3;
  --t1-text-muted:#9ca3b0;
  --t1-border:#30363d;
  --t1-surface:#161b22;
  --t1-surface-2:#1c2333;
}

/* ============================================================
   A. best-betting-sites cards (.bcz-*) — neutralise the rainbow
   ============================================================ */

/* Drop the brand-coloured slab effect: shrink the logo panel to a chip,
   keep the brand colour as the chip background so white-on-brand logos remain visible. */
.bcz-card{
  border-radius:var(--t1-radius) !important;
}
.bcz-brand-panel{
  min-height:auto !important;
  max-width:120px !important;
  border-radius:10px !important;
  margin:14px 0 14px 14px !important;
  padding:10px !important;
  border-right:0 !important;
  align-self:flex-start !important;
}
.bcz-brand-panel img{
  max-width:96px !important;
  max-height:46px !important;
}

/* CTA: orange → system green, 48px tall, full-width on mobile */
.bcz-claim{
  background:var(--t1-primary) !important;
  color:#fff !important;
  font-size:16px !important;
  padding:14px 22px !important;
  min-height:48px !important;
  border-radius:10px !important;
}
.bcz-claim:hover{
  background:var(--t1-primary-hover) !important;
}

/* Secondary "Visit" link → outlined button so it reads as an action */
.bcz-visit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:10px 16px !important;
  border:1.5px solid var(--t1-border) !important;
  border-radius:10px !important;
  color:var(--t1-text) !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:14px !important;
}
.bcz-visit:hover{
  background:var(--t1-surface-2) !important;
  color:var(--t1-primary) !important;
}

/* Rank badge: less prison-stamp, more chip */
.bcz-rank-badge{
  background:var(--t1-primary) !important;
  border-bottom-left-radius:12px !important;
  font-size:1rem !important;
  width:36px !important;
  height:36px !important;
}

/* Bonus title text size up to 17px so it scans on mobile */
.bcz-bonus-title{font-size:17px !important;line-height:1.3 !important;}
.bcz-bonus-sub{font-size:14px !important;line-height:1.5 !important;}
.bcz-brand-name{font-size:18px !important;color:var(--t1-text) !important;font-weight:800 !important;}
[data-theme="dark"] .bcz-brand-name{color:var(--t1-text) !important;}

/* Promo chip: solid background, no dashed look */
.bcz-promo-chip{
  border-style:solid !important;
  background:var(--t1-primary-light) !important;
  color:var(--t1-text) !important;
  min-height:36px !important;
  padding:8px 14px !important;
  font-size:14px !important;
}
.bcz-promo-chip button{
  min-width:32px !important;
  min-height:32px !important;
}

/* Stronger separation between cards */
.bcz-list{gap:16px !important;}

/* Mobile: enforce 44px tap targets and full-width CTA */
@media (max-width:520px){
  .bcz-claim{width:100% !important;font-size:16px !important;}
  .bcz-visit{width:100% !important;}
  .bcz-cta-stack{gap:8px !important;}
  .bcz-rating-score{font-size:1.9rem !important;}
}

/* ============================================================
   B. betting-bonuses cards (.bonus-card / .bc-*)
   ============================================================ */

/* Card: keep neutral surface, drop brand colour as fill */
.bonus-card{
  border-left:4px solid var(--brand) !important;
  border-radius:var(--t1-radius) !important;
}
.bonus-card[data-rank="1"]{
  border:1px solid var(--t1-border) !important;
  border-left:4px solid var(--brand) !important;
  box-shadow:0 0 0 2px var(--t1-primary-light) !important;
}

/* Rank stripe: neutral charcoal, not the operator's brand colour */
.bc-rank-stripe{
  background:#1F2937 !important;
  color:#fff !important;
}
[data-theme="dark"] .bc-rank-stripe{
  background:#0d1117 !important;
}

/* Logo wrap: keep the brand colour so white logos stay visible, but shrink the chip */
.bc-logo-wrap{
  width:140px !important;
  max-width:140px !important;
  height:56px !important;
  border-radius:8px !important;
}
.bc-logo-wrap img{
  max-height:40px !important;
}
@media (max-width:680px){
  .bc-logo-wrap{
    width:140px !important;
    height:54px !important;
  }
}

/* Key-terms accent stays brand-coloured (it's a 3px left border, not a fill) */
/* keep existing .bc-key-terms */

/* CTAs: primary becomes system green (not brand-colour); secondary outlined */
.bc-cta-primary{
  background:var(--t1-primary) !important;
  color:#fff !important;
  min-height:48px !important;
  padding:14px 22px !important;
  font-size:16px !important;
  border-radius:10px !important;
}
.bc-cta-primary:hover{
  background:var(--t1-primary-hover) !important;
  filter:none !important;
}
.bc-cta-secondary{
  min-height:44px !important;
  padding:10px 18px !important;
  font-size:14px !important;
  border-radius:10px !important;
}

/* Promo block: keep yellow-amber pattern, just bump tap target */
.bc-promo{
  min-height:48px !important;
  font-size:14px !important;
}
.bc-promo-value{
  font-size:17px !important;
}

/* Editor-pill: keep but soften */
.bc-pill-editor{
  background:var(--t1-primary) !important;
  color:#fff !important;
}

/* Mobile: full-width CTAs, stacked */
@media (max-width:680px){
  .bc-cta-row{grid-template-columns:1fr !important;}
  .bc-cta{width:100% !important;}
  .bc-headline{font-size:17px !important;}
  .bc-pitch{font-size:14px !important;}
}

/* ============================================================
   C. Global Sprint 1 tap-target floor (applies everywhere)
   ============================================================ */

/* FAQ chevron: 44px hit area */
details summary{
  min-height:var(--t1-tap);
  padding:12px 16px;
  cursor:pointer;
}

/* Footer accordion arrows */
.footer-section-toggle,
.footer-accordion-trigger{
  min-height:var(--t1-tap);
}

/* All buttons get a min hit area on mobile */
@media (max-width:768px){
  .btn-primary,
  .btn-secondary,
  .nav-cta-mobile,
  .btn-sm{
    min-height:var(--t1-tap);
    padding-top:10px;
    padding-bottom:10px;
  }
}

/* ============================================================
   D. Default-collapsed Top 5 pattern
   ============================================================ */

/* Best-betting-sites: hide cards #6+ until expanded */
.bcz-list.collapsed .bcz-card:nth-child(n+6){
  display:none;
}

/* Bonus stack: hide cards #6+ until expanded */
.bonus-cards-stack.collapsed .bonus-card:nth-child(n+6){
  display:none;
}

/* The expand button */
.t1-expand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  max-width:420px;
  margin:18px auto 8px;
  padding:14px 22px;
  min-height:48px;
  background:transparent;
  color:var(--t1-primary);
  border:1.5px solid var(--t1-primary);
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
}
.t1-expand:hover{
  background:var(--t1-primary-light);
}
.t1-expand[aria-expanded="true"]{
  display:none;
}
.t1-collapse-note{
  display:block;
  text-align:center;
  margin-top:8px;
  font-size:13px;
  color:var(--t1-text-muted);
}

/* Reduce vertical rhythm on listing pages to make pages shorter */
@media (max-width:680px){
  .bonus-cards-stack{gap:12px !important;}
  .bcz-list{gap:12px !important;}
}