/* App-level overrides only. Original theme CSS owns colours, layout,
   fonts and component styling — this file re-creates the small pieces
   of behaviour the original Vue/hooper bundle used to provide. */

/* --------------------------------------------------------------------
   Hooper sliders.
   The vendor stylesheet sets `.hooper-slide { height: 100%; flex: 1 }`,
   which used to work because hooper.js sized the wrapper per-item.
   Without that JS we override the rule so each slide sizes by content.
   ------------------------------------------------------------------- */

/* Reset the vendor rule globally — each slide takes its content size. */
.hooper-slide {
  height: auto !important;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------
   Vertical sliders — Upcoming Fixture + Winner Announcement.
   Original (.hooper { height: 200px }) + 54 px-per-row inline; we keep
   the same viewport and let auto-scroll cycle through.
   ------------------------------------------------------------------- */
.hooper.is-vertical {
  position: relative;
  overflow: hidden !important;
}
.hooper.is-vertical .hooper-list {
  height: 100% !important;
  overflow: hidden !important;
}
.hooper.is-vertical .hooper-track {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  /* JS (startSlideAutoplay) drives the transform — step-slide, not flow. */
}
.hooper.is-vertical .hooper-slide {
  display: block;
  width: 100%;
  height: 54px !important;
}

/* --------------------------------------------------------------------
   Now Trending side rail — binder adds `.is-trending` to the parent .hooper.
   wver-wolf-custom.css hides every non-active slide with `opacity: 0
   !important` (original Vue/hooper carousel toggled `.is-active`); we don't
   have that runtime, so without these overrides all slides stay invisible.
   We also force a vertical track and tall slide so the side banners render
   at their natural aspect, scrolling like Winner Announcement.
   ------------------------------------------------------------------- */
/* Specificity needs to beat
   `.wolf-open-home .right-sidebar .home-casiono-icons .hooper-slide` (4 classes)
   from wver-wolf-custom.css, so we anchor selectors on the same ancestors. */
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending,
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending .hooper-list,
.home-casiono-icons .hooper.is-trending,
.home-casiono-icons .hooper.is-trending .hooper-list {
  height: 480px !important;
  overflow: hidden !important;
  position: relative;
}
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending .hooper-track,
.home-casiono-icons .hooper.is-trending .hooper-track {
  display: block !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
  will-change: transform;
  align-items: stretch !important;
  /* JS (startSlideAutoplay) drives the transform — step-slide, not flow. */
}
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending .hooper-slide,
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending .hooper-slide.is-prev,
.wolf-open-home .right-sidebar .home-casiono-icons .hooper.is-trending .hooper-slide.is-next,
.wolf-open-home .right-sidebar .hooper.is-trending .hooper-slide,
.home-casiono-icons .hooper.is-trending .hooper-slide {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  padding: 4px 0 !important;
  visibility: visible !important;
}
.home-casiono-icons .hooper.is-trending .hooper-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 6px;
}

/* --------------------------------------------------------------------
   Our Casino — horizontal tile strip (small square game thumbnails).
   Same approach: binder adds `.is-our-casino` to the parent .hooper.
   ------------------------------------------------------------------- */
.hooper.is-our-casino {
  width: 100% !important;
  height: 160px !important;
  overflow: hidden !important;
  position: relative !important;
}
.hooper.is-our-casino .hooper-list {
  height: 100% !important;
  overflow: hidden !important;
}
.hooper.is-our-casino .hooper-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  animation: app-hooper-scroll-x 40s linear infinite;
  will-change: transform;
}
.hooper.is-our-casino .hooper-slide {
  flex: 0 0 200px !important;
  width: 200px !important;
  height: 100% !important;
  padding: 4px !important;
  box-sizing: border-box;
}
.hooper.is-our-casino .hooper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 6px;
}
@keyframes app-hooper-scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause scroll on hover so the user can click an item. */
.hooper:hover .hooper-track { animation-play-state: paused; }

/* --------------------------------------------------------------------
   Winner Announcement / Upcoming Fixture row sizing
   ------------------------------------------------------------------- */
.top-result-box,
.fixure-box {
  padding: 8px 12px;
  margin: 4px 6px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------
   Marquee (announcement strip).
   Original behaviour:
     - Wide text → scrolls right-to-left, JS sets `animation-duration` inline
       per text length so speed is constant.
     - Short text (fits in window) → Vue adds `.no-marquee` class +
       `animation-duration: 0s` to disable scroll, and the text stays put.
   Since we have no JS computing widths, we:
     1) Provide a default scroll keyframe and a sensible 40 s loop.
     2) For `.no-marquee`, kill the animation AND the padding-left:100%
        (otherwise the text would sit off-screen forever).
   ------------------------------------------------------------------- */
.marquee-wrapper { overflow: hidden; white-space: nowrap; }
.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 40s linear infinite;
}
.marquee-content.no-marquee {
  padding-left: 0 !important;
  animation: none !important;
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------
   Carousel — the original Vue bundle handled active-slide transitions.
   Our binder toggles `.active` on a timer; ensure non-active slides
   are hidden and active ones visible.
   ------------------------------------------------------------------- */
.carousel-item.carousal-23 { display: none; }
.carousel-item.carousal-23.active { display: block; }

/* --------------------------------------------------------------------
   Right sidebar — Winner Announcement + Now Trending stays visible
   while the centre column scrolls.
   The original theme has TWO fixed headers stacked at the top:
     .header-top { height: 34px; position: fixed; top: 0 }
     .header     { height: 60px; position: fixed; top: 34px }
   So the sticky offset must clear 34 + 60 = 94 px, not 34.
   ------------------------------------------------------------------- */
.right-sidebar {
  position: sticky !important;
  top: 94px !important;
  align-self: flex-start;
}

/* --------------------------------------------------------------------
   Loading hint for any zone that hasn't been bound yet.
   ------------------------------------------------------------------- */
[data-bind]:empty::before {
  content: '';
  display: block;
}

/* --------------------------------------------------------------------
   Aviator/Crash tab icon (mobile menu).
   The original SVG paths use `class="cls-1"` with no inline fill. The
   vendor `blinkmenu` keyframe animates `fill` (red↔white) but only inside
   a mobile media query, leaving the paths black-on-dark (invisible)
   outside it. Set a fallback fill so the plane silhouette always shows,
   and a sane size so it sits next to the "Crash" label. */
.sport-tabs.menu-tabs a.aviator svg,
.header-top a.aviator svg {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
}
.sport-tabs.menu-tabs a.aviator svg .cls-1,
.header-top a.aviator svg .cls-1 {
  fill: #e40539;
}

/* --------------------------------------------------------------------
   Mobile sidebar (hamburger menu).
   The original mobile menu shows ONLY the flat all-sports list — no
   logo, no "Racing Sports" section, no "All Sports" pill header. The
   drawer slides in BELOW the page header so the hamburger / APK /
   REGISTER / LOGIN remain visible and tappable (the same hamburger tap
   closes the menu).
   ------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Vendor only hides `.header-top` below 767px; on tablet widths
     (768–1279px) it leaves a 34 px green strip at the top of the page.
     The user's mobile design has no such strip — hide it across the
     whole mobile range and pull `.header` to the very top. */
  .header-top { display: none !important; }
  /* `.header` is `position: fixed; top: 34px` in vendor wver-style.css.
     With `.header-top` hidden there's no reason to leave that gap on
     mobile — pull it to the top of the viewport. The !important + .wrapper
     prefix combo wins against any vendor mobile rule that might also
     touch this property. */
  .header,
  .wrapper .header {
    top: 0 !important;
    margin-top: 0 !important;
  }
  /* Same for the wrapper — make sure no padding/margin pushes content
     down on top. */
  .wrapper.wolf-open-home {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Drawer: 80% width, starts below the ~60 px page header. */
  body.menu-open .sidebar-left {
    display: block !important;
    position: fixed !important;
    top: 60px;
    left: 0;
    width: 80%;
    max-width: 320px;
    height: calc(100vh - 60px);
    z-index: 1040;
    overflow-y: auto;
    background: var(--bg-sidebar, #16191c);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
    padding-top: 8px;     /* the "little top margin" you asked for */
  }
  /* Dim backdrop on the rest of the viewport — tap outside to close
     (main.js click handler handles that). */
  body.menu-open::before {
    content: '';
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
  }
  /* Page header / hamburger sit ABOVE the drawer so they stay visible
     and the hamburger can be tapped to close. */
  body.menu-open .header,
  body.menu-open .header .menu-button-mobile,
  body.menu-open .header .login-box {
    position: relative;
    z-index: 1101;
  }
  /* Original mobile menu shows only the flat sports list — hide the
     drawer's own logo, the Racing Sports section, and the "All Sports"
     pill header inside the menu-box. */
  body.menu-open .sidebar-left > .logo-box,
  body.menu-open .sidebar-left > .upcoming-fixure,
  body.menu-open .sidebar-left > .special-menu,
  body.menu-open .sidebar-left > .menu-box > h5 {
    display: none !important;
  }
 
  /* Lock background scroll while menu is open. */
  body.menu-open { overflow: hidden; }
}

/* --------------------------------------------------------------------
   Mobile APK button + login/register alignment in .login-box.
   ------------------------------------------------------------------- */
.dwld-apk { vertical-align: middle; }
@media (max-width: 1279px) {
  .login-box {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .login-box .dwld-apk.d-md-none {
    height: 32px;
    width: auto;
  }
  .login-box .register-btn,
  .login-box .login-btn {
    margin-top: 0 !important;
    height: 32px;
    padding: 0 10px;
    line-height: 32px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------
   Mobile-only sections (between header and the bet table) — the
   original Vue runtime sized many of these inline; without it the
   wrappers can collapse or balloon. These rules give them sensible
   heights so marquee/upcoming/banner/trending all show on mobile.
   d-none-mobile/.d-none-desktop break at 1280px in wver-responsive.css,
   so we use the same breakpoint.
   ------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Mobile marquee + settings strip (between header and upcoming). */
  .mobile-switch-theme {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #2a2f33;
  }
  .mobile-switch-theme .news-bar {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 34px;
  }
  .mobile-switch-theme .news-bar .marquee-wrapper {
    flex: 1;
    overflow: hidden;
    min-width: 0;
  }
  .mobile-switch-theme .news-bar .news-title {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-switch-theme .news-bar .news-title img { width: 22px; height: 22px; }
  .mobile-switch-theme .setting-box-container {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d2125;
  }
  .mobile-switch-theme .setting-box-container .setting-icon { color: #aaafb5; }

  /* Mobile upcoming-fixure — show one 46px row at a time (matches original).
     Need `!important` to beat the global `.hooper.is-vertical { height: 200px !important }`
     rule above; the global one is for the desktop placements. */
  .upcoming-fixure.d-none-desktop .hooper.is-vertical {
    height: 46px !important;
    overflow: hidden !important;
  }
  .upcoming-fixure.d-none-desktop .hooper.is-vertical .hooper-list {
    height: 46px !important;
    overflow: hidden !important;
  }
  .upcoming-fixure.d-none-desktop .hooper.is-vertical .hooper-slide {
    height: 46px !important;
    width: 100% !important;
    display: block !important;
  }

  /* Banner carousel — single visible image at a sensible mobile height. */
  .center-container .carousel,
  .center-container .carousel-inner {
    width: 100%;
    height: 110px;
    overflow: hidden;
  }
  .center-container .carousel-item.carousal-23 {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Now Trending mobile — horizontal strip of side banners. The vendor
     CSS expects a Vue carousel; without it, lay slides out as a flex
     row that overflow-scrolls and show ~2 at a time. */
  .point-casino-list.d-none-desktop { margin: 4px 0; }
  .point-casino-list.d-none-desktop .point-casino-list-title {
    background: var(--bg-table-header-new, #126E51);
    color: var(--text-table-header-new, #fff);
    padding: 4px 8px;
    font-weight: bold;
  }
  .point-casino-list.d-none-desktop .hooper,
  .point-casino-list.d-none-desktop .hooper .hooper-list {
    height: 110px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative;
  }
  .point-casino-list.d-none-desktop .hooper-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    animation: app-hooper-scroll-x 50s linear infinite;
    will-change: transform;
  }
  .point-casino-list.d-none-desktop .hooper-slide {
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 100% !important;
    opacity: 1 !important;
    padding: 4px !important;
    box-sizing: border-box;
  }
  .point-casino-list.d-none-desktop .hooper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: 6px;
  }

  /* Mobile menu-tabs (Crash | Sports Book | …) — keep inline, not fixed
     to viewport bottom (some vendor rules try to bottom-fix it). */
  .sport-tabs.menu-tabs.d-none-desktop {
    position: static !important;
    bottom: auto !important;
    background: #2a2f33;
    padding: 4px 0;
  }
  .sport-tabs.menu-tabs.d-none-desktop .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sport-tabs.menu-tabs.d-none-desktop .nav-tabs::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------
   Login pop-up close button.
   wver-style.css defines `.close-login-modal img { width:30px; height:30px;
   border:2px solid #f00; padding:5px }`, but in some browsers the rendered
   img collapses to a few pixels (a stray `!important` somewhere in the
   vendor stack overrides the explicit width/height). Force the size with
   `!important` and high specificity so the red-ring close button always
   renders at 30 × 30 with the close.svg X inside.
   ------------------------------------------------------------------- */
.modal-login-new .close-login-modal img,
#login-point .close-login-modal img {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  padding: 5px !important;
  border: 2px solid #f00 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-sizing: border-box !important;
  display: block !important;
  object-fit: contain;
}