/* ==========================================================================
   Shiva Online Book ID — Base design system (v4)
   Sports-site look: condensed headings, flat gold, sharp corners, real images
   ========================================================================== */
:root {
  --bg: #0a0b0d;
  --surface: #111317;
  --surface-2: #171a1f;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --gold: #f5b301;
  --gold-dark: #d69c00;
  --text: #f2f2f2;
  --muted: #9aa0a9;
  --wa: #25d366;
  --radius: 8px;
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* purane blocks ke liye aliases */
  --panel: var(--surface); --panel-2: var(--surface-2); --ink: var(--bg);
  --gold-2: var(--gold); --gold-grad: var(--gold);
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  font-family: var(--font-body) !important;
  font-size: 17px;
  background: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 767.98px) { body { padding-bottom: 72px; font-size: 16px; } }

/* ---------- Typography ---------- */
main h1, main h2, main h3, .h-display {
  font-family: var(--font-head) !important;
  color: #fff !important;
  letter-spacing: .005em;
}
main h1 { font-size: clamp(2.4rem, 4vw + 1rem, 4.4rem); font-weight: 800; line-height: 1; text-transform: uppercase; }
main h2 { font-size: clamp(1.9rem, 2vw + 1rem, 2.8rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
main h3 { font-size: clamp(1.25rem, .6vw + 1rem, 1.5rem); font-weight: 700; line-height: 1.15; }
main p, main li { color: #d0d3d9; }
main a:not(.btn) { color: var(--gold); text-underline-offset: 3px; }
.text-gold { color: var(--gold) !important; }
.sec-head { margin-bottom: 36px; }
.sec-head h2 { margin-bottom: 10px; }
.sec-head h2::after { content: ''; display: block; width: 48px; height: 4px; background: var(--gold); margin-top: 14px; }
.sec-head.center { text-align: center; } .sec-head.center h2::after { margin-inline: auto; }
.sec-head p { color: var(--muted) !important; max-width: 620px; margin: 0; }
.sec-head.center p { margin-inline: auto; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: var(--gold); color: #000; padding: 8px 14px; border-radius: 4px; font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 3px; }

/* ---------- Header ---------- */
.site-nav { background: rgba(10, 11, 13, .96) !important; border-bottom: 1px solid var(--line); padding: 12px 0; transition: padding .2s ease; }
.site-nav.scrolled { padding: 6px 0; }
.brand-logo { max-height: 52px; width: auto; transition: max-height .2s ease; }
.site-nav.scrolled .brand-logo { max-height: 42px; }
.site-nav .nav-link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem !important; font-weight: 600 !important; color: #e8e8e8 !important; position: relative; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--gold) !important; }
.site-nav .nav-link.active::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: -2px; height: 2px; background: var(--gold); }
.site-nav .dropdown-menu { border-radius: var(--radius); padding: .5rem; border: 1px solid var(--line-strong) !important; background: var(--surface) !important; }
.site-nav .dropdown-item { border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn-cta, .exchange-card .btn-get-id, .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--gold) !important; color: #111 !important; border: 0 !important;
  border-radius: 6px !important; padding: .8rem 1.6rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem !important; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: none !important; transition: background .15s ease, transform .15s ease;
}
.btn-cta:hover, .exchange-card .btn-get-id:hover, .btn-gold:hover { background: #ffc21a !important; transform: translateY(-1px); box-shadow: none !important; }
.btn-cta .fa-arrow-right { transition: transform .15s ease; } .btn-cta:hover .fa-arrow-right { transform: translateX(3px); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--line-strong) !important; color: #fff !important; background: transparent !important;
  border-radius: 6px !important; padding: .8rem 1.6rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem !important; text-transform: uppercase; letter-spacing: .04em;
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--gold) !important; color: var(--gold) !important; transform: none; box-shadow: none !important; }
.btn-sm.btn-cta, .btn-sm.btn-ghost { padding: .5rem 1rem; font-size: .95rem !important; }
.btn-wa { background: var(--wa) !important; color: #fff !important; }
.btn-wa:hover { background: #1ebe5a !important; }

/* ---------- Old page-builder blocks ko naye look me laao ---------- */
.exchange-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); padding: 12px; transition: border-color .2s ease; }
.exchange-card:hover { border-color: var(--gold) !important; }
.custom-promo-card { border-radius: var(--radius) !important; border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: none !important; }
.faq-item h3 { font-size: 1.25rem !important; }
.faq-answer-box { border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: none !important; border-radius: var(--radius) !important; }
main table thead th { background: var(--surface-2) !important; color: var(--gold) !important; }
main img { max-width: 100%; height: auto; }
main .text-muted, main .text-secondary { color: var(--muted) !important; }

/* Reveal (sirf fade, halka) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.site-footer { background: #060708 !important; border-top: 1px solid var(--line); font-family: var(--font-body) !important; }
.site-footer .footer-heading { font-family: var(--font-head); font-size: 1rem; letter-spacing: .08em; color: var(--gold); border-bottom: 0 !important; }
.site-footer .footer-links li a { font-size: .95rem; color: #cfd2d8; }
.footer-muted { color: #7d828b !important; }
.site-footer .payment-methods img { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; width: 100%; height: 34px; object-fit: contain; }
.site-footer .badge-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0a0b0d; border-top: 1px solid var(--line-strong); }
.mobile-cta-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; min-height: 48px; }
.mcb-wa { flex: 1; background: var(--wa); color: #fff !important; font-size: 1.05rem; }
.mcb-call { width: 56px; background: var(--gold); color: #000 !important; font-size: 1.1rem; }
.whatsapp-float { animation: none !important; }

/* ---------- Blogs ---------- */
.blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: border-color .2s ease; }
.blog-card:hover { border-color: var(--gold); }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card h2 { font-size: 1.35rem !important; text-transform: none; }
.blog-article h2, .blog-article h3 { margin-top: 1.8rem; text-transform: none; }
.blog-article img { border-radius: var(--radius); }
.sidebar-card, .whatsapp-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.recent-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.recent-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; }
.recent-item a { color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }