/* KurtBet unified theme override — load after the site's main stylesheet. */
:root {
  --kb-black: #000000;
  --kb-ink: #07040d;
  --kb-navy: #000a50;
  --kb-surface: #0b0d15;
  --kb-surface-2: #15101d;
  --kb-purple: #8317a1;
  --kb-purple-dark: #5b0d73;
  --kb-neon: #f20df4;
  --kb-neon-soft: #d946ef;
  --kb-gold: #fbbf24;
  --kb-white: #ffffff;
  --kb-muted: #cbd5e1;
  --kb-dim: #94a3b8;
  --kb-border: rgba(242, 13, 244, 0.18);
  --kb-glow: 0 0 0 1px rgba(242, 13, 244, 0.12), 0 14px 40px rgba(131, 23, 161, 0.22);
  --primary: 287 75% 36% !important;
  --primary-foreground: 0 0% 100% !important;
  --background: 270 100% 1% !important;
  --card: 252 28% 6% !important;
  --border: 299 90% 20% !important;
  --ring: 299 93% 50% !important;
  --bg-main: #000000 !important;
}

html {
  color-scheme: dark;
  background: var(--kb-black) !important;
  scrollbar-color: var(--kb-purple) var(--kb-black);
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(131, 23, 161, 0.22), transparent 32rem),
    linear-gradient(180deg, var(--kb-ink) 0, var(--kb-black) 42rem) !important;
  color: var(--kb-white) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

::selection { background: var(--kb-neon); color: var(--kb-black); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kb-black); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--kb-purple), var(--kb-neon)); border: 2px solid var(--kb-black); border-radius: 999px; }

/* Header */
header {
  background: rgba(0, 5, 42, 0.94) !important;
  border-bottom: 1px solid rgba(242, 13, 244, 0.22) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

header img[alt="KurtBet"] {
  height: 4rem !important;
  width: auto !important;
  max-width: 14rem !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(242, 13, 244, 0.24));
  transform-origin: left center;
}

header a, header button { color: var(--kb-white) !important; }
header nav a, header nav button {
  position: relative;
  transition: color .2s ease, transform .2s ease, background-color .2s ease !important;
}
header nav a:hover, header nav button:hover { color: var(--kb-neon) !important; transform: translateY(-1px); }

/* Mobile navigation drawer */
header .lg\:hidden.border-t {
  position: relative;
  isolation: isolate;
  margin-inline: -1rem;
  margin-bottom: -.25rem;
  padding: .85rem 1rem 1.15rem !important;
  color: var(--kb-white) !important;
  background: #05062d !important;
  border-top: 1px solid rgba(217,70,239,.28) !important;
  box-shadow: 0 22px 36px rgba(0,0,0,.5) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

header .lg\:hidden.border-t nav {
  padding: .25rem;
  background: #08083a !important;
  border: 1px solid rgba(217,70,239,.16);
  border-radius: .85rem;
}

header .lg\:hidden.border-t nav a {
  color: #e2e8f0 !important;
  background: transparent !important;
  border-color: transparent !important;
  opacity: 1 !important;
}

header .lg\:hidden.border-t nav a:hover,
header .lg\:hidden.border-t nav a:focus-visible,
header .lg\:hidden.border-t nav a[aria-current="page"] {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(131,23,161,.78), rgba(162,28,175,.5)) !important;
  border-color: rgba(242,13,244,.24) !important;
  transform: none !important;
}

/* Surfaces and cards */
main, section { color: var(--kb-white); }
footer {
  background: linear-gradient(180deg, #0d0713 0%, #050207 50%, #000 100%) !important;
  border-top: 1px solid var(--kb-border) !important;
}
footer, footer p, footer span { color: var(--kb-muted); }
footer a { color: var(--kb-muted) !important; transition: color .2s ease; }
footer a:hover { color: var(--kb-neon) !important; }

/* Nine-game banner grid: 3x3 mobile, one complete row on desktop. */
.kb-nine-grid {
  margin-block: 2rem !important;
  padding-inline: .75rem !important;
}

.kb-nine-grid > .row-auto {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 !important;
  width: 100%;
}

.kb-nine-grid > .row-auto > [class*="gcol-"] {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kb-nine-grid > .row-auto > [class*="gcol-"] > div,
.kb-nine-grid > .row-auto > [class*="gcol-"] > div > div {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4;
}

.kb-nine-grid img[alt="Banner"] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: .7rem;
}

@media (min-width: 768px) {
  .kb-nine-grid { padding-inline: 0 !important; }
  .kb-nine-grid > .row-auto {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: .75rem;
  }
}

.kb-themed-card {
  background: linear-gradient(145deg, rgba(21, 16, 29, .97), rgba(7, 4, 13, .98)) !important;
  border-color: var(--kb-border) !important;
  box-shadow: var(--kb-glow) !important;
}

/* Buttons: all brand actions use the same purple family. */
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--kb-neon) !important;
  outline-offset: 3px !important;
}

.kb-primary-action,
button[aria-label="Para Yatırma"],
button[aria-label="Bonus Talep"],
button[aria-label="Para Yatırma"] {
  color: var(--kb-white) !important;
  background: linear-gradient(100deg, var(--kb-purple-dark), var(--kb-purple) 48%, #a21caf) !important;
  border: 1px solid rgba(242, 13, 244, .34) !important;
  box-shadow: 0 10px 28px rgba(131, 23, 161, .3), inset 0 1px rgba(255,255,255,.12) !important;
}
.kb-primary-action:hover,
button[aria-label="Para Yatırma"]:hover,
button[aria-label="Bonus Talep"]:hover {
  filter: brightness(1.12) saturate(1.08);
  box-shadow: 0 12px 34px rgba(242, 13, 244, .26), inset 0 1px rgba(255,255,255,.16) !important;
}

/* Live support and betting suggestion: remove green/amber divergence. */
.kb-live-support, .kb-suggest {
  color: var(--kb-white) !important;
  background: linear-gradient(135deg, var(--kb-purple-dark), var(--kb-purple) 55%, var(--kb-neon)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 34px rgba(131,23,161,.42), 0 0 22px rgba(242,13,244,.15) !important;
}
.kb-live-support:hover, .kb-suggest:hover { filter: brightness(1.12); }
.kb-live-support::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(242,13,244,.45);
  border-radius: inherit;
  animation: kb-support-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

/* Open live-chat window: override its original white/green theme. */
.kb-chat-panel {
  color: var(--kb-white) !important;
  background: #100914 !important;
  border: 1px solid rgba(217, 70, 239, .32) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.72), 0 0 32px rgba(131,23,161,.18) !important;
}

.kb-chat-panel > div:first-child {
  color: #ffffff !important;
  background: linear-gradient(105deg, #5b0d73 0%, #8317a1 58%, #a21caf 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

.kb-chat-panel > div:first-child h3 { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.kb-chat-panel > div:first-child p { color: #f3ddf8 !important; opacity: 1 !important; }
.kb-chat-panel > div:first-child button { color: #ffffff !important; }
.kb-chat-panel > div:first-child button:hover { background: rgba(255,255,255,.15) !important; }

.kb-chat-panel > div:nth-child(2) {
  background: #0a060d !important;
  border-color: rgba(217,70,239,.24) !important;
}

.kb-chat-panel > div:last-child,
.kb-chat-panel .bg-white,
.kb-chat-panel .bg-gray-50 {
  background: #100914 !important;
}

.kb-chat-panel .text-gray-900,
.kb-chat-panel .text-gray-800,
.kb-chat-panel h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
}

.kb-chat-panel .text-gray-500,
.kb-chat-panel .text-gray-600,
.kb-chat-panel > div:last-child p {
  color: #ddd2e2 !important;
  opacity: 1 !important;
}

.kb-chat-panel .border-gray-200,
.kb-chat-panel .border-gray-100 {
  border-color: rgba(217,70,239,.22) !important;
}

.kb-chat-panel .bg-green-600,
.kb-chat-panel .hover\:bg-green-700:hover,
.kb-chat-panel .kb-chat-start {
  color: var(--kb-white) !important;
  font-weight: 700 !important;
  background: linear-gradient(100deg, #8317a1, #a21caf 62%, #c026d3) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 26px rgba(131,23,161,.38) !important;
}

.kb-chat-panel .kb-chat-start:hover {
  filter: brightness(1.13);
  box-shadow: 0 12px 30px rgba(242,13,244,.22) !important;
}

.kb-chat-panel input,
.kb-chat-panel textarea {
  color: var(--kb-white) !important;
  background: #07040a !important;
  border-color: rgba(217,70,239,.34) !important;
}

.kb-chat-panel input::placeholder,
.kb-chat-panel textarea::placeholder { color: #b8aabe !important; opacity: 1 !important; }

.kb-chat-panel img[alt="Promo Banner"] {
  display: block;
  opacity: .9;
  filter: saturate(.85) contrast(1.05);
}

@media (min-width: 768px) {
  .kb-chat-panel { border-radius: 1rem !important; overflow: hidden; }
}

/* Tailwind color utilities used by dynamic components. */
.bg-purple-600, .hover\:bg-purple-500:hover { background-color: var(--kb-purple) !important; }
.bg-green-500, .bg-emerald-600, .bg-amber-500, .bg-blue-500 { background-color: var(--kb-purple) !important; }
.text-green-400, .text-emerald-400, .text-amber-300, .text-amber-400, .text-blue-400 { color: var(--kb-neon-soft) !important; }
.border-green-500, .border-emerald-500, .border-amber-500, .border-blue-500 { border-color: var(--kb-border) !important; }

/* Toasts */
[data-sonner-toaster][data-sonner-theme="dark"] {
  --normal-bg: #0b0710 !important;
  --normal-border: rgba(242,13,244,.28) !important;
  --normal-text: #fff !important;
  --success-bg: #16071d !important;
  --success-border: #8317a1 !important;
  --success-text: #f6c8ff !important;
  --info-bg: #0d0717 !important;
  --info-border: #8317a1 !important;
  --info-text: #f6c8ff !important;
}
[data-sonner-toast] { box-shadow: var(--kb-glow) !important; }

/* BettingVet badge is visually brought into the same theme. */
#bettingvet-badge a.bv-card {
  background: linear-gradient(145deg, #15101d, #07040d) !important;
  border-color: var(--kb-border) !important;
  box-shadow: var(--kb-glow) !important;
}
#bettingvet-badge .bv-status, #bettingvet-badge .bv-code { color: var(--kb-neon-soft) !important; }
#bettingvet-badge .bv-dot { background: var(--kb-neon) !important; box-shadow: 0 0 12px var(--kb-neon) !important; }

/* Loading screen */
#kb-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(131,23,161,.32), transparent 18rem),
    linear-gradient(145deg, #020104, #090310 55%, #000);
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility .55s ease;
}
#kb-loader.kb-loader--done { opacity: 0; visibility: hidden; pointer-events: none; }
.kb-loader__inner { display: grid; justify-items: center; gap: 1.35rem; }
.kb-loader__logo {
  width: clamp(150px, 24vw, 245px);
  height: auto;
  filter: drop-shadow(0 0 25px rgba(242,13,244,.3));
  animation: kb-logo-breathe 1.7s ease-in-out infinite;
}
.kb-loader__track { width: min(230px, 56vw); height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.kb-loader__bar { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--kb-purple), var(--kb-neon), transparent); animation: kb-loading 1.15s ease-in-out infinite; }
.kb-loader__text { color: var(--kb-muted); font-size: .72rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }

@keyframes kb-loading { from { transform: translateX(-115%); } to { transform: translateX(275%); } }
@keyframes kb-logo-breathe { 50% { transform: scale(1.035); filter: drop-shadow(0 0 34px rgba(242,13,244,.48)); } }
@keyframes kb-support-pulse { 0% { opacity: .72; transform: scale(.88); } 70%,100% { opacity: 0; transform: scale(1.25); } }

@media (max-width: 768px) {
  header img[alt="KurtBet"] { height: 3.25em !important; max-width: 11em !important; }
  header { min-height: 4rem; }
  .kb-live-support { width: 3.25rem !important; height: 3.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}