/* =========================================================
   AllPanel777 — Cricket Betting ID page
   Loads AFTER /style.css, so it inherits the theme tokens,
   header, footer, buttons, tables, tabs and FAQ styles.
   Only page-specific (.cb-*) additions live here.
   ========================================================= */

html{scroll-padding-top:var(--cb-offset,120px);}
.text-link{color:var(--cyan-accent);text-decoration:underline;text-underline-offset:3px;}
.text-link:hover{color:#fff;}

/* ---------- Banner ---------- */
.cb-banner{
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-soft);
  background:var(--bg-card);box-shadow:var(--shadow-glow);
}
.cb-banner img{width:100%;height:auto;display:block;}

/* ---------- Intro ---------- */
.cb-intro .intro-panel h1{max-width:840px;}
.cb-intro .intro-panel p{max-width:760px;}
.cb-cta{display:flex;flex-wrap:wrap;gap:12px;}
.cb-intro-note{
  position:relative;z-index:1;margin:18px 0 0;font-size:12.5px;color:var(--text-faint);
}
.cb-intro-note a{color:var(--cyan-accent);text-decoration:underline;text-underline-offset:3px;}

/* Quick facts */
.cb-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;}
.cb-fact{
  display:flex;align-items:center;gap:14px;background:var(--bg-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:16px 18px;transition:var(--transition);
}
.cb-fact:hover{border-color:var(--blue-bright);transform:translateY(-3px);box-shadow:var(--shadow-glow);}
.cb-fact .icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:rgba(30,94,255,.15);
  display:flex;align-items:center;justify-content:center;color:var(--cyan-accent);
}
.cb-fact .icon svg{width:24px;height:24px;}
.cb-fact strong{display:block;font-family:var(--font-head);color:#fff;font-size:16px;line-height:1.25;}
.cb-fact span{display:block;font-size:12.5px;line-height:1.4;color:var(--text-mute);margin-top:2px;}

/* ---------- Sticky on-page nav (TOC) ---------- */
.cb-toc-wrap{
  position:sticky;top:var(--cb-header-h,64px);z-index:50;
  background:rgba(6,10,26,.96);border-bottom:1px solid var(--border-soft);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cb-toc{
  display:flex;gap:8px;overflow-x:auto;padding:10px 20px;max-width:1280px;margin:0 auto;
  scrollbar-width:none;
}
.cb-toc::-webkit-scrollbar{display:none;}
.cb-toc a{
  flex:0 0 auto;font-size:13px;font-weight:600;color:var(--text-mute);
  padding:7px 15px;border-radius:50px;border:1px solid var(--border-soft);
  background:var(--bg-card);transition:var(--transition);white-space:nowrap;
}
.cb-toc a:hover{color:#fff;border-color:var(--blue-bright);}
.cb-toc a.active{
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-primary));
  border-color:transparent;color:#fff;
}

/* ---------- Tables ---------- */
table.data-table.cb-compare th:nth-child(2){background:rgba(30,94,255,.25);color:#fff;}
table.data-table.cb-compare td:first-child{color:#fff;font-weight:600;}
table.data-table.cb-compare td:nth-child(2){color:#e6f6ff;font-weight:600;background:rgba(30,94,255,.07);}
table.data-table.cb-leagues{min-width:680px;}
table.data-table.cb-leagues td:first-child{color:#fff;font-weight:600;}
.cb-after{margin-top:18px;}

/* ---------- Numbered step lists ---------- */
.cb-step-list{list-style:none;counter-reset:cb;margin:0 0 18px;padding:0;display:grid;gap:12px;}
.cb-step-list li{
  counter-increment:cb;position:relative;background:var(--bg-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:14px 16px 14px 62px;color:var(--text-mute);font-size:14.5px;line-height:1.6;
  transition:var(--transition);
}
.cb-step-list li::before{
  content:counter(cb);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-primary));
  color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.cb-step-list li:hover{border-color:var(--blue-bright);color:#fff;}
.cb-step-list.cols-2{
  grid-template-columns:repeat(2,1fr);grid-auto-flow:column;
  grid-template-rows:repeat(var(--cb-rows,5),auto);
}
.cb-step-list a{color:var(--cyan-accent);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Demo ID callout ---------- */
.cb-callout{
  margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  background:linear-gradient(135deg,var(--bg-card),var(--bg-section));
  border:1px solid var(--border-soft);border-left:4px solid var(--cyan-accent);
  border-radius:var(--radius-md);padding:26px 28px;
}
.cb-callout-text{flex:1 1 420px;}
.cb-callout h3{margin-bottom:8px;}
.cb-callout p{margin:0;}

/* ---------- Notices (legal / scam / info) ---------- */
.cb-notice{
  display:flex;align-items:flex-start;gap:16px;border-radius:var(--radius-md);
  padding:22px 24px;border:1px solid var(--border-soft);background:var(--bg-card);
}
.cb-notice .n-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,94,255,.15);color:var(--cyan-accent);
}
.cb-notice .n-icon svg{width:24px;height:24px;}
.cb-notice p{margin:0;}
.cb-notice.warn{border-color:rgba(255,180,0,.45);background:linear-gradient(135deg,rgba(255,180,0,.08),var(--bg-card));}
.cb-notice.warn .n-icon{background:rgba(255,180,0,.15);color:var(--gold-accent);}
.cb-notice.legal{border-color:rgba(255,92,92,.5);background:linear-gradient(135deg,rgba(255,92,92,.09),var(--bg-card));}
.cb-notice.legal .n-icon{background:rgba(255,92,92,.15);color:#ff6b6b;}
.cb-notice.legal p{color:#c9d3f5;}

/* ---------- Icon boxes with text only ---------- */
.cb-icon-text .icon-box{display:flex;gap:14px;align-items:flex-start;}
.cb-icon-text .icon-box .icon{flex:0 0 46px;margin-bottom:0;}
.cb-icon-text .icon-box p{color:var(--text-mute);font-size:14.5px;line-height:1.6;}

/* ---------- Responsible gaming ---------- */
.cb-age-badge{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:2px solid var(--gold-accent);color:var(--gold-accent);
  font-family:var(--font-head);font-weight:800;font-size:14px;margin-bottom:12px;
}
.cb-check-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;}
.cb-check-list li{
  display:flex;align-items:flex-start;gap:12px;background:var(--bg-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:13px 16px;color:var(--text-mute);font-size:14.5px;line-height:1.6;
}
.cb-check-list li svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;color:#4ade80;}

/* ---------- FAQ closing CTA ---------- */
.cb-faq-cta{
  margin-top:28px;text-align:center;background:var(--bg-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:26px 22px;
}
.cb-faq-cta p{max-width:720px;margin:0 auto 18px;}

/* ---------- Scroll reveal (only active when JS adds .cb-js) ---------- */
.cb-js .cb-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.cb-js .cb-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .cb-js .cb-reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .cb-facts{grid-template-columns:repeat(2,1fr);}
  .icon-grid,.icon-grid-4{grid-template-columns:repeat(2,1fr);}
  .cb-step-list.cols-2{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
}
@media (max-width:640px){
  .icon-grid,.icon-grid-4{grid-template-columns:1fr;}
  .cb-check-list{grid-template-columns:1fr;}
  .cb-notice{flex-direction:column;padding:18px;}
  .cb-callout{padding:20px;}
  .cb-callout .btn{width:100%;}
  .cb-cta .btn{flex:1 1 100%;}
  .cb-toc{padding:8px 16px;}
  .cb-step-list li{padding:13px 14px 13px 56px;font-size:14px;}
  .cb-step-list li::before{left:13px;width:30px;height:30px;}
  .cb-faq-cta{padding:20px 16px;}
  .cb-faq-cta .btn{width:100%;}
}
@media (max-width:480px){
  .cb-facts{grid-template-columns:1fr;}
}