/* BetKings24 – dark luxury tipster theme */

:root {
  --bg: #07090d;
  --bg2: #080b11;
  --surf: #121821;
  --card: #141c27;
  --card2: #10161f;
  --bdr: rgba(212, 175, 106, .16);
  --bdr2: rgba(212, 175, 106, .28);
  --lime: #d4af6a;
  --lime2: #c49a4e;
  --limeg: rgba(212, 175, 106, .12);
  --limeg2: rgba(212, 175, 106, .06);
  --chrome: rgba(7, 9, 13, .78);
  --chrome2: #0c1118;
  --cta: #e8c56b;
  --cta-hover: #f4d78c;
  --cta-ink: #14110a;
  --text: #f4efe6;
  --text2: #c2bbb0;
  --muted: #8e877c;
  --label: #1a222c;
  --green: #3ddc97;
  --red: #e85d5d;
  --gold: #e8c56b;
  --blue: #7aa2d4;
  --purple: #8b90a0;
  --fd: "Plus Jakarta Sans", system-ui, sans-serif;
  --fb: "Plus Jakarta Sans", system-ui, sans-serif;
  --glass-bg: rgba(16, 22, 30, .88);
  --glass-bg-soft: rgba(16, 22, 30, .72);
  --glass-card: var(--card);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, .38);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5);
  --shadow-cta: 0 10px 28px rgba(232, 197, 107, .28);
  --ring: 0 0 0 3px rgba(232, 197, 107, .22);
  --r: 8px;
  --r-lg: 14px;
  --r-xl: 18px;
}

html { color-scheme: dark; font-variant-numeric: lining-nums tabular-nums; }
html, body {
  background: var(--bg2);
  color: var(--text);
}
body {
  font-family: var(--fb);
  background-image: url("/static/theme/grain.webp");
  background-size: cover;
  background-attachment: fixed;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
::selection { background: rgba(232, 197, 107, .28); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.page-wrap { background: transparent; }

.bk-scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 400; pointer-events: none;
  background: linear-gradient(90deg, var(--cta), #fff3c4 60%, var(--lime));
  box-shadow: 0 0 10px rgba(232, 197, 107, .55);
}

/* ── Header / chrome ── */
.bk-header {
  background: rgba(7, 9, 13, .72) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(212, 175, 106, .18) !important;
  transition: box-shadow .25s var(--ease-out), background .25s;
}
.bk-header.is-scrolled {
  background: rgba(7, 9, 13, .92) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.bk-logo {
  font-family: var(--fb) !important;
  letter-spacing: .16em;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.bk-logo .num {
  color: var(--gold) !important;
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.bk-nav a {
  font-family: var(--fb) !important;
  color: #d8d2c6 !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  position: relative;
}
.bk-nav a:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }
.bk-nav a.active { color: #fff !important; }
.bk-nav a:not(.pro-btn)::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 1px; background: var(--cta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.bk-nav a:not(.pro-btn):hover::after,
.bk-nav a:not(.pro-btn).active::after { transform: scaleX(1); }

.bk-subbar {
  background: #0c1118 !important;
  border-bottom: 1px solid rgba(212, 175, 106, .12) !important;
  color: #c9c2b4 !important;
}
.bk-subbar-track a, .bk-subbar-track span { color: #c9c2b4 !important; }
.bk-subbar-track a:hover { color: var(--gold) !important; }
.bk-subbar-promo { color: var(--gold) !important; }

.header-pro-btn, .mobile-pro-btn, .bk-nav a.pro-btn {
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), var(--shadow-cta);
}
.header-pro-btn:hover, .mobile-pro-btn:hover, .bk-nav a.pro-btn:hover {
  background: var(--cta-hover) !important;
  color: var(--cta-ink) !important;
}

.lang-dd-btn { border-color: rgba(255,255,255,.18) !important; }
.lang-dd-menu {
  background: #161d28 !important;
  border-color: var(--bdr) !important;
  color: var(--text);
}
.lang-dd-item { color: var(--text2) !important; }
.lang-dd-item:hover { background: rgba(255,255,255,.05) !important; color: var(--text) !important; }
.lang-dd-item.is-active { background: var(--limeg) !important; color: var(--gold) !important; }

/* ── League strip ── */
.bk-liga-bar {
  background: rgba(8, 11, 17, .92) !important;
  border-bottom: 1px solid rgba(212, 175, 106, .12) !important;
}
.bk-liga-ico { color: var(--text2) !important; }
.bk-liga-ico:hover, .bk-liga-ico.is-active { color: var(--gold) !important; background: var(--limeg) !important; }
.bk-liga-ico-badge { background: #fff !important; }
.bk-liga-bar-hint {
  background: linear-gradient(90deg, transparent, #080b11 55%) !important;
  color: var(--gold) !important;
}

/* ── Cinematic home hero ── */
.bk-cinematic {
  position: relative;
  isolation: isolate;
  min-height: min(64vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: 0 0 8px;
  background: #07090d;
}
.bk-cinematic-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  filter: saturate(.9) contrast(1.08);
}
.bk-cinematic::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,9,13,.15) 0%, rgba(7,9,13,.45) 42%, rgba(7,9,13,.94) 100%),
    linear-gradient(90deg, rgba(7,9,13,.78) 0%, rgba(7,9,13,.25) 52%, rgba(7,9,13,.55) 100%);
}
.bk-cinematic-player {
  position: absolute;
  right: 6%;
  bottom: -2%;
  height: min(620px, 88%);
  width: auto;
  max-width: 34vw;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,.55)) contrast(1.06) saturate(1.04);
}
.bk-cinematic-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 22px 42px;
}
.bk-cinematic .hero-badge,
.bk-page-hero .hero-badge {
  background: rgba(7,9,13,.45);
  border: 1px solid rgba(232, 197, 107, .35);
  color: var(--gold);
  backdrop-filter: blur(8px);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.bk-cinematic h1,
.bk-tips-banner h1,
.bk-page-hero h1 {
  font-family: var(--fb) !important;
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 64px);
  letter-spacing: -.045em;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
  font-variant-numeric: lining-nums tabular-nums;
}
.bk-cinematic h1 .lime,
.bk-page-hero h1 .lime { color: var(--gold) !important; }
.bk-cinematic .hero-sub,
.bk-page-hero .hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #d7d0c4;
  max-width: 520px;
  margin-left: 0;
  text-align: left;
}
.bk-cinematic .bk-hero-cta { justify-content: flex-start; margin-top: 22px; }
.bk-cinematic .bk-hero-trust { text-align: left; color: #9c9589; }
.bk-hero-trust span {
  display: inline-block;
  margin: 0 .55em;
  color: var(--gold);
  opacity: .85;
}
.bk-cinematic .bk-tips-grid {
  margin-top: 28px;
  text-align: left;
}
.bk-cinematic .bk-tips-tile {
  background: rgba(12, 16, 24, .55);
  border: 1px solid rgba(232, 197, 107, .16);
  backdrop-filter: blur(10px);
  box-shadow: none;
  color: var(--text);
}
.bk-cinematic .bk-tips-tile-k { color: var(--gold) !important; letter-spacing: .12em; text-transform: uppercase; }
.bk-cinematic .bk-tips-tile-v { color: #c9c2b6 !important; }

/* Inner-page heroes – full-bleed, not a boxed card */
.bk-main .bk-page-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) 12px;
  padding: 52px max(16px, calc(50vw - 540px)) 40px;
  box-sizing: border-box;
}
.bk-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/theme/hero-stadium.webp") center 42%/cover;
  opacity: .55;
  pointer-events: none;
}
.bk-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,13,.62), rgba(7,9,13,.94));
  pointer-events: none;
}
.bk-goal-mark {
  display: none;
}
@media (min-width: 901px) {
  .bk-cinematic .bk-goal-mark,
  .bk-page-hero .bk-goal-mark {
    display: block;
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: Impact, "Arial Black", var(--fd), sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 3.1vw, 40px);
    letter-spacing: .16em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(232,197,107,.4), 0 2px 10px rgba(0,0,0,.75);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
  }
  /* Homepage: text is already burned into the desktop stadium still */
  .bk-cinematic .bk-goal-mark { display: none; }
}
.bk-page-hero > * { position: relative; z-index: 1; }
.bk-page-hero h1 { font-size: clamp(36px, 6vw, 64px) !important; }
.bk-page-hero .hero-sub { margin-left: 0; max-width: 560px; }

/* Legacy banner if still used */
.bk-tips-banner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Buttons ── */
.bk-cta-pri, .pw-btn, .bk-btn-trial, .bk-compare-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-ink) !important;
  font-family: var(--fb);
  font-weight: 650;
  font-size: 14px;
  letter-spacing: .02em;
  box-shadow: var(--shadow-cta);
  border: 1px solid rgba(255,255,255,.12);
  position: relative; overflow: hidden;
}
.bk-cta-pri::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.45) 48%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .65s var(--ease-out);
  pointer-events: none;
}
.bk-cta-pri:hover::after { transform: translateX(130%); }
.bk-cta-pri:hover, .pw-btn:hover, .bk-btn-trial:hover { background: var(--cta-hover) !important; color: var(--cta-ink) !important; }
.bk-cta-sec {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: transparent;
  color: #f4efe6 !important;
  border: 1px solid rgba(232, 197, 107, .4);
  font-weight: 600;
}
.bk-cta-sec:hover { background: var(--limeg) !important; border-color: var(--gold) !important; color: #fff !important; }
.bk-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Main / cards ── */
.bk-main { color: var(--text); }
.bk-ticker, .bk-empty, .bk-panel, .bk-glass, .bk-paywall, .bk-quote,
.bk-plan-card, .bk-compare-card, .home-kombi, .bk-email-box, .mc2 {
  background: var(--card) !important;
  border-color: var(--bdr) !important;
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.bk-ticker { border-radius: 14px; }
.bk-ticker-lbl { color: var(--muted) !important; border-color: var(--bdr) !important; }
.bk-ticker-match { color: var(--text) !important; }
.bk-ticker-tip { color: var(--gold) !important; }
.bk-ticker-ok { color: var(--green) !important; }

.mc2 {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    var(--card) !important;
  transition: border-color .2s, box-shadow .35s var(--ease-out);
  will-change: transform;
}
.mc2:hover, .mc2.mc2-open {
  border-color: var(--bdr2) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.mc2-top { border-color: var(--bdr) !important; }
.mc2-tname { color: var(--text) !important; }
.mc2-1x2-cell {
  background: rgba(0,0,0,.25) !important;
  border-color: var(--bdr) !important;
}
.mc2-1x2-cell.is-pick-h {
  border-color: var(--gold) !important;
  background: rgba(232, 197, 107, .14) !important;
}
.mc2-1x2-cell.is-pick-d {
  border-color: var(--gold) !important;
  background: rgba(232, 197, 107, .08) !important;
}
.mc2-1x2-cell.is-pick-a {
  border-color: var(--blue) !important;
  background: rgba(122, 162, 212, .12) !important;
}
.mc2-1x2-q { color: var(--text) !important; }
.mc2-detail {
  background: #0e141c !important;
  border-color: var(--bdr) !important;
}
.mc2-detail.open { animation: bkDetailIn .38s var(--ease-out); }
@keyframes bkDetailIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.mc2-dblock { border-color: var(--bdr) !important; }
.mc2-model { color: var(--text2); }

.dt {
  border-color: var(--bdr) !important;
  color: var(--muted) !important;
  border-radius: 999px;
}
.dt.active {
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-color: var(--cta) !important;
}

.home-kombi:hover, .bk-quote:hover, .bk-compare-card:hover, .bk-plan-card:hover {
  border-color: var(--bdr2) !important;
}
.bk-plan-card.is-featured {
  transform: translateY(-8px);
  border-color: rgba(232, 197, 107, .45) !important;
  background:
    radial-gradient(480px 180px at 100% 0%, rgba(232, 197, 107, .16), transparent 60%),
    var(--card) !important;
}
.bk-plan-badge { background: var(--cta) !important; color: var(--cta-ink) !important; }
.bk-plan-title, .bk-quotes-title, .pw-title, .home-kombis-title {
  font-family: var(--fb) !important;
  color: var(--text) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}
.bk-quotes-title { font-size: 28px; }
.bk-plan-price, .home-kombi-odds, .mc2-1x2-q, .bk-ticker-odds, .sv {
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.bk-quote p { color: var(--text2) !important; }
.bk-quote-name { color: var(--text) !important; }
.bk-quote-stars { color: var(--gold) !important; }

.bk-paywall {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 48px 28px !important;
}
.bk-paywall::before {
  content: "";
  position: absolute; inset: 0;
  background: url("/static/theme/bokeh.webp") center/cover;
  opacity: .18;
  pointer-events: none;
}
.bk-paywall > * { position: relative; z-index: 1; }
.pw-feat {
  background: rgba(0,0,0,.25) !important;
  border-color: var(--bdr) !important;
  color: var(--text2) !important;
  border-radius: 999px;
}

.bk-email-input, .bk-main input[type="email"], .bk-main input[type="text"],
.bk-main input[type="password"], .bk-main textarea {
  background: #0c1118 !important;
  color: var(--text) !important;
  border: 1.5px solid var(--bdr) !important;
  animation: none !important;
}
.bk-main input:focus, .bk-main textarea:focus, .bk-email-input:focus {
  border-color: var(--gold) !important;
  box-shadow: var(--ring);
  outline: none;
}

.bk-empty { border-radius: 20px; }
.bk-empty-title { color: var(--text) !important; font-family: var(--fb) !important; font-weight: 800; }
.bk-empty-text { color: var(--text2) !important; }

.ad-banner {
  background: var(--card) !important;
  border-color: var(--bdr) !important;
}

/* Mobile menu */
.mobile-menu {
  background: #0e131b !important;
  border-left: 1px solid var(--bdr) !important;
  box-shadow: -18px 0 50px rgba(0,0,0,.5);
  padding-bottom: 108px;
}
.mobile-nav a {
  color: #e8e2d6 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 17px !important;
  font-weight: 550 !important;
}
.mobile-nav a:hover { color: var(--gold) !important; background: rgba(255,255,255,.04) !important; }
.mobile-overlay { background: rgba(0,0,0,.55) !important; }
body:has(.mobile-menu.open) #boris-root {
  opacity: 0 !important;
  pointer-events: none !important;
}
.mlang { color: var(--text2) !important; border-color: var(--bdr) !important; }
.mlang.active { background: var(--cta) !important; color: var(--cta-ink) !important; border-color: var(--cta) !important; }

.bk-cookie {
  background: #121821 !important;
  border-top: 1px solid var(--bdr) !important;
  box-shadow: 0 -16px 40px rgba(0,0,0,.45);
}

/* FAQ / trial / misc */
.bk-trial-page, .bk-trial-ok, .bk-how-step, .res-row {
  background: var(--card);
  border-color: var(--bdr);
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .will-reveal:not(.is-in) { opacity: 0; }
}

@media (max-width: 900px) {
  .bk-cinematic { min-height: 0; }
  .bk-cinematic-player { display: none; }
  .bk-cinematic-inner { padding: 36px 16px 28px; }
  .bk-cinematic h1 { font-size: clamp(30px, 9vw, 42px) !important; letter-spacing: -.04em; }
  .bk-cinematic .hero-sub, .bk-cinematic .bk-hero-trust { text-align: left; }
  .bk-cta-pri, .bk-cta-sec { width: 100%; }
  .bk-main .bk-page-hero { padding: 32px 16px 24px; }
  .bk-plan-card.is-featured { transform: none; }
  .bk-goal-mark { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-cta-pri::after, .mc2-detail.open { animation: none !important; }
  .mc2, .bk-plan-card, .bk-cta-pri { transition: none !important; transform: none !important; }
}