/* ============================================================
   site.css — shared across all pages of cricketidindia.com
   Kept in one file so browsers cache it once across page navigations,
   instead of re-downloading duplicate inline CSS on every page.
   ============================================================ */

:root {
  --apx: #0284c6;
  --apx-dark: #026a9e;
  --reddy: #c9861a;
  --reddy-dark: #a56e15;
  --gold: #edc33d;
  --dark-bg: #0f1115;
  --dark-card: #1a1d24;
  --text: #1a1a1a;
  --muted: #6b7280;
  --surface: #f8fafc;
  --white: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--surface);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 800; color: var(--gold); }
h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 800; }
.section-intro { color: var(--muted); max-width: 700px; margin: 0 auto 28px; font-size: .98rem; }
.text-center { text-align: center; }

/* ===== Header ===== */
header.site-header {
  background: var(--white);
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: 1080px; margin: 0 auto; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--apx-dark); }
nav.main-nav { display: none; gap: 18px; align-items: center; }
nav.main-nav a { color: #374151; font-weight: 600; font-size: .88rem; white-space: nowrap; }
nav.main-nav a:hover, nav.main-nav a[aria-current="page"] { color: var(--apx); }
.nav-cta { background: var(--apx); color: #fff !important; padding: 9px 16px; border-radius: 6px; font-weight: 700; }
.hamburger { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { width: 22px; height: 2px; background: #374151; display: block; }
.mobile-nav { display: none; flex-direction: column; background: #fff; border-top: 1px solid #e5e7eb; padding: 12px 20px 18px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 10px 0; color: #374151; font-weight: 600; border-bottom: 1px solid #f1f5f9; }
@media (min-width: 960px) {
  nav.main-nav { display: flex; }
  .hamburger { display: none; }
}

/* ===== Hero (generic, per-page override via inline style/class on section) ===== */
.hero { color: #fff; padding: 52px 0 60px; text-align: center; }
.hero img { display: block; margin-left: auto; margin-right: auto; }
.hero p { font-size: clamp(.95rem, 3vw, 1.1rem); max-width: 680px; margin: 0 auto 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 8px; font-weight: 700; font-size: .95rem; min-height: 44px; cursor: pointer; border: none; }
.btn-primary { background: #25D366; color: #fff; }
.btn-primary.is-disabled { background: #94a3b8; pointer-events: none; }
.btn-secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.trust-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 12px 18px; font-size: .82rem; }

/* ===== Cards / grid ===== */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 8px; }
.card { background: var(--white); border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; }
.card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.card p { font-size: .88rem; color: var(--muted); margin: 0; }
.id-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; justify-content: center; }
.id-chip { background: var(--white); border: 1px solid #e5e7eb; border-radius: 20px; padding: 8px 16px; font-size: .85rem; font-weight: 700; }

/* ===== Brand theme: All Panel Exchange ===== */
.theme-apx .hero { background: linear-gradient(135deg, #0b1220 0%, var(--apx) 130%); }
.theme-apx h2, .theme-apx h3 { color: var(--apx-dark); }
.theme-apx .card { border-left: 4px solid var(--apx); }
.theme-apx .id-chip { color: var(--apx-dark); }
.theme-apx .btn-primary { background: var(--apx); }

/* ===== Brand theme: ReddyBook ===== */
.theme-reddy .hero { background: linear-gradient(135deg, #2a1d09 0%, var(--reddy) 140%); }
.theme-reddy { background: linear-gradient(180deg, #fff8ee 0%, #fdf2e0 100%); }
.theme-reddy h2, .theme-reddy h3 { color: var(--reddy-dark); }
.theme-reddy .card { border-left: 4px solid var(--reddy); background: #fff; }
.theme-reddy .id-chip { color: var(--reddy-dark); border-color: #f0d9b3; background: #fff; }
.theme-reddy .btn-primary { background: var(--reddy); }

/* ===== Brand theme: MahadevBook (dark) ===== */
.theme-mahadev { background: var(--dark-bg); color: #e5e7eb; }
.theme-mahadev .hero { background: linear-gradient(135deg, #05070a 0%, #1c2230 140%); }
.theme-mahadev h2 { color: var(--gold); }
.theme-mahadev .section-intro { color: #9ca3af; }
.theme-mahadev .card { background: var(--dark-card); border: 1px solid #2a2e38; border-left: 4px solid var(--gold); }
.theme-mahadev .card h3 { color: var(--gold); }
.theme-mahadev .card p { color: #9ca3af; }
.theme-mahadev .id-chip { background: var(--dark-card); border-color: #2a2e38; color: var(--gold); }

/* ===== Brand theme: Winbuzz (dark) ===== */
.theme-winbuzz { background: #14161c; color: #e5e7eb; }
.theme-winbuzz .hero { background: linear-gradient(135deg, #05070a 0%, #241417 140%); }
.theme-winbuzz h2 { color: #ff8a8a; }
.theme-winbuzz .section-intro { color: #9ca3af; }
.theme-winbuzz .card { background: #1c1f27; border: 1px solid #2a2e38; border-left: 4px solid #ff6b6b; }
.theme-winbuzz .card h3 { color: #ff8a8a; }
.theme-winbuzz .card p { color: #9ca3af; }
.theme-winbuzz .id-chip { background: #1c1f27; border-color: #2a2e38; color: #ff8a8a; }

/* ===== FAQ ===== */
.faq-list { max-width: 760px; margin: 0 auto; }
details.faq-item { background: var(--white); border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; }
.theme-mahadev details.faq-item, .theme-winbuzz details.faq-item { background: var(--dark-card); border-color: #2a2e38; }
details.faq-item summary { padding: 14px 18px; font-weight: 700; cursor: pointer; list-style: none; font-size: .95rem; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; float: right; }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item p { padding: 0 18px 16px; margin: 0; color: var(--muted); font-size: .9rem; }
.theme-mahadev details.faq-item p, .theme-winbuzz details.faq-item p { color: #9ca3af; }

/* ===== Contact section ===== */
.contact-section { background: linear-gradient(135deg, #0b1220 0%, var(--apx) 140%); color: #fff; text-align: center; }
.contact-section h2, .contact-section h1 { color: #fff; }
.contact-section .section-intro { color: #dbeafe; }
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; }
.contact-methods .card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.contact-methods .card h3 { color: #fff; }
.contact-methods .card p { color: #dbeafe; }

/* ===== Footer ===== */
footer.site-footer { background: #0b0d12; color: #cbd5e1; padding: 40px 0 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-bottom: 24px; }
.footer-grid h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.footer-grid a { display: block; color: #94a3b8; font-size: .85rem; padding: 4px 0; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { text-align: center; font-size: .78rem; color: #6b7280; border-top: 1px solid #1f2430; padding-top: 18px; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 480px) {
  section { padding: 40px 0; }
}