/* Qoolbet WebGL-inspired visual layer. Layout and betting controls remain owned by the original theme. */
:root {
  --q3-ink: #080a12;
  --q3-panel: rgba(17, 20, 33, .88);
  --q3-line: rgba(255, 255, 255, .105);
  --q3-gold: #f3c875;
  --q3-rose: #fb4267;
  --q3-violet: #8c78ff;
  --q3-depth: 0 22px 60px rgba(0, 0, 0, .34);
}

/* Shared dimensional surfaces across the lobby, sports, live and promotion views. */
.qool-experience-world,
.qool-experience-featured-game,
.qool-experience-rail-card,
.qool-promo-grid > *,
.sportbook-theme .fevent-holder,
.sportbook-theme .qpro-match-detail,
.fx-lobby .fx-provider-card,
.fx-lobby .qc-game-card,
.fx-lobby .game-card {
  isolation: isolate;
  border-color: var(--q3-line) !important;
  box-shadow: var(--q3-depth), inset 0 1px 0 rgba(255, 255, 255, .055);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease, filter .24s ease;
}

.qool-experience-world,
.qool-experience-featured-game,
.qool-experience-rail-card,
.qool-promo-grid > *,
.sportbook-theme .fevent-holder,
.sportbook-theme .qpro-match-detail,
.fx-lobby .fx-provider-card,
.fx-lobby .qc-game-card,
.fx-lobby .game-card {
  background-image: linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%, rgba(119,104,255,.035));
}

@media (hover:hover) and (pointer:fine) {
  .qool-experience-world:hover,
  .qool-experience-featured-game:hover,
  .qool-promo-grid > *:hover,
  .sportbook-theme .fevent-holder:hover,
  .fx-lobby .fx-provider-card:hover,
  .fx-lobby .qc-game-card:hover,
  .fx-lobby .game-card:hover {
    transform: translateY(-3px) perspective(900px) rotateX(.35deg);
    border-color: rgba(243, 200, 117, .36) !important;
    box-shadow: 0 28px 68px rgba(0, 0, 0, .45), 0 0 28px rgba(140, 120, 255, .11), inset 0 1px 0 rgba(255,255,255,.09);
  }
}

/* Hero banners become the stage for the WebGL lighting layer. */
.qool-experience-hero,
.qool-seo-intro,
.qool-promotions__header,
.qool-next-sidebar-promo,
[data-webgl-banner] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b0d18;
  background-image: radial-gradient(ellipse at 78% 30%, rgba(116, 94, 255, .21), transparent 42%), radial-gradient(ellipse at 18% 100%, rgba(251, 66, 103, .16), transparent 46%), linear-gradient(112deg, #0a0c16, #151323 54%, #0b0d18);
  box-shadow: 0 28px 74px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
}

.qool-experience-hero {
  border: 1px solid rgba(255,255,255,.11);
}

@media (min-width: 701px) {
  .qool-experience-hero { min-height: clamp(390px, 27vw, 450px) !important; }
}

.qool-experience-hero::after,
.qool-seo-intro::after,
.qool-promotions__header::after,
.qool-next-sidebar-promo::after,
[data-webgl-banner]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(6,8,15,.34), transparent 53%, rgba(8,9,17,.12)), linear-gradient(0deg, rgba(7,8,14,.22), transparent 44%);
}

.qool-promotions__header > :not(.qool-webgl-canvas),
.qool-next-sidebar-promo > :not(.qool-webgl-canvas),
[data-webgl-banner] > :not(.qool-webgl-canvas) {
  position: relative;
  z-index: 2;
}

.qool-seo-intro {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  background-color: #0b0d18;
  background-image: radial-gradient(ellipse at 82% 24%, rgba(116,94,255,.16), transparent 42%), linear-gradient(112deg, rgba(12,15,25,.98), rgba(20,20,36,.94));
  box-shadow: 0 22px 56px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.075);
}

.qool-seo-intro > :not(.qool-webgl-canvas) {
  position: relative;
  z-index: 2;
}

.qool-experience-hero::after { z-index: 0; }
.qool-home-banner-track { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.qool-home-banner-controls,
.qool-experience-hero-links { z-index: 3 !important; }

.qool-webgl-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: .72;
  pointer-events: none !important;
  mix-blend-mode: screen;
}

.qool-webgl-static {
  background-image: radial-gradient(ellipse at 72% 28%, rgba(133,112,255,.25), transparent 45%), radial-gradient(ellipse at 28% 95%, rgba(251,66,103,.19), transparent 48%), linear-gradient(135deg, #0a0c16, #171426 56%, #0b0d18) !important;
}

.qool-promotions__header {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
}

.qool-home-banner-slide > .qool-webgl-canvas { z-index: 1 !important; }
.qool-home-banner-slide::before { z-index: 0 !important; }
.qool-home-banner-slide .qool-experience-hero-copy,
.qool-home-banner-slide .qool-experience-hero-copy > * { position: relative; z-index: 2; }
.qool-home-banner-slide .qool-experience-hero-copy { z-index: 2 !important; }

.qool-next-sidebar-promo {
  border: 1px solid rgba(255,255,255,.12);
}

/* Keep the same brand scale on inner pages as on the redesigned home page. */
.navbar-brand .img-link {
  position: relative;
  display: inline-flex;
  width: clamp(190px, 15vw, 248px);
  max-height: 82px;
  overflow: hidden;
  align-items: center;
  vertical-align: middle;
}
.navbar-brand .img-link img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 80px;
  object-fit: contain;
}
.navbar-brand .img-link::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -48%;
  width: 24%;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: q3-logo-glint 7.5s ease-in-out infinite;
}
@keyframes q3-logo-glint {
  0%, 66% { left: -48%; opacity: 0; }
  72% { opacity: .85; }
  91%, 100% { left: 128%; opacity: 0; }
}

/* Sports filters and the betslip share the same glass-metal surface treatment. */
.sportbook-theme #qpro-coupon,
.sportbook-theme #qpro-country-filters,
.sportbook-theme #qpro-time-filters,
.sportbook-theme .qpro-sport-select,
.sportbook-theme .qpro-live-sport-tabs,
.qool-promotions__toolbar {
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24,28,43,.94), rgba(12,15,25,.94));
  box-shadow: 0 18px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.065);
}
.sportbook-theme .qpro-sport-select,
.sportbook-theme .qpro-live-sport-tabs,
.qool-promotions__toolbar { backdrop-filter: blur(14px); }

.sportbook-theme .qpro-league {
  overflow: hidden;
  margin: 10px 0 14px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15,19,31,.94), rgba(8,11,19,.98));
  box-shadow: 0 16px 38px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045);
}
.sportbook-theme .qpro-league-title {
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(100deg, rgba(38,42,59,.95), rgba(19,22,35,.92));
}
.sportbook-theme .qpro-feed-row {
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(105deg, rgba(20,24,37,.92), rgba(10,13,22,.94));
  transition: background .2s ease, box-shadow .2s ease;
}
.sportbook-theme .qpro-feed-row:hover {
  background: linear-gradient(105deg, rgba(27,31,48,.98), rgba(13,16,27,.98));
  box-shadow: inset 3px 0 0 rgba(243,200,117,.58);
}
.sportbook-theme .qpro-feed-odd {
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(35,40,57,.98), rgba(20,24,36,.98)) !important;
  color: #f6f7fa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 12px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sportbook-theme .qpro-feed-odd:hover {
  border-color: rgba(243,200,117,.7) !important;
  box-shadow: 0 0 15px rgba(243,200,117,.14), inset 0 1px 0 rgba(255,255,255,.11);
}
.sportbook-theme .qpro-feed-odd.is-selected,
.sportbook-theme .qpro-feed-odd.selected {
  border-color: rgba(243,200,117,.88) !important;
  background: linear-gradient(145deg, rgba(132,92,31,.96), rgba(74,48,21,.98)) !important;
  box-shadow: 0 0 18px rgba(243,200,117,.22), inset 0 1px 0 rgba(255,255,255,.15);
}

#qpro-feed .qpro-feed-odd {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #252a3a, #171c2a) !important;
  background-color: #1d2231 !important;
  color: #f6f7fa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 12px rgba(0,0,0,.2) !important;
}
#qpro-feed .qpro-feed-odd:hover {
  border-color: rgba(243,200,117,.72) !important;
  background: linear-gradient(145deg, #343044, #202438) !important;
  box-shadow: 0 0 15px rgba(243,200,117,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#qpro-feed .qpro-feed-odd.is-selected,
#qpro-feed .qpro-feed-odd.selected {
  border-color: rgba(243,200,117,.9) !important;
  background: linear-gradient(145deg, #835c28, #493219) !important;
  box-shadow: 0 0 18px rgba(243,200,117,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body #main.sportbook-theme #main-panel.qpro-sports-layout #qpro-feed:not(.is-detail) #qpro-feed-list.qpro-feed-table .qpro-feed-row .qpro-feed-group-cells > button.qpro-feed-odd:not(:disabled) {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #252a3a, #171c2a) !important;
  background-color: #1d2231 !important;
  color: #f6f7fa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 12px rgba(0,0,0,.2) !important;
}
body #main.sportbook-theme #main-panel.qpro-sports-layout #qpro-feed:not(.is-detail) #qpro-feed-list.qpro-feed-table .qpro-feed-row .qpro-feed-group-cells > button.qpro-feed-odd.is-selected,
body #main.sportbook-theme #main-panel.qpro-sports-layout #qpro-feed:not(.is-detail) #qpro-feed-list.qpro-feed-table .qpro-feed-row .qpro-feed-group-cells > button.qpro-feed-odd[aria-pressed="true"] {
  border-color: rgba(243,200,117,.9) !important;
  background: linear-gradient(145deg, #835c28, #493219) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(243,200,117,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

@media (max-width: 700px) {
  .navbar-brand .img-link { width: min(36vw, 150px); max-height: 52px; }
  .navbar-brand .img-link img { max-height: 50px; }
  .navbar-brand .img-link::after { animation-duration: 10s; }
}

/* A fine luminous edge gives game and match blocks the same crafted depth. */
.qool-experience-world::before,
.qool-experience-featured-game::before,
.qool-experience-rail-card::before,
.qool-promo-grid > *::before,
.sportbook-theme .fevent-holder::before,
.fx-lobby .fx-provider-card::before,
.fx-lobby .qc-game-card::before,
.fx-lobby .game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(128deg, rgba(255,255,255,.13), transparent 22%, transparent 72%, rgba(243,200,117,.09));
  opacity: .56;
}

@media (max-width: 700px) {
  .qool-webgl-canvas { opacity: .54; }
  .qool-experience-world,
  .qool-experience-featured-game,
  .qool-experience-rail-card,
  .qool-promo-grid > *,
  .sportbook-theme .fevent-holder,
  .fx-lobby .fx-provider-card,
  .fx-lobby .qc-game-card,
  .fx-lobby .game-card {
    box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    transition-duration: .16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qool-experience-world,
  .qool-experience-featured-game,
  .qool-experience-rail-card,
  .qool-promo-grid > *,
  .sportbook-theme .fevent-holder,
  .fx-lobby .fx-provider-card,
  .fx-lobby .qc-game-card,
  .fx-lobby .game-card { transition: none !important; }
  .qool-webgl-canvas { opacity: .42; }
}