/* =========================================================
   ParsBall Web CSS — clean build
   Scope:
   - Top bar: logo, login, register, support, clock, language
   - Right glass panel: nav only (live/sports/casino/…)
   - Light homepage polish + countdown
   Does NOT rearrange homepage sections.
   ========================================================= */

:root {
  --pb-sidebar-width: 211px; /* ~176 * 1.2 */
  --pb-sidebar-gap: 12px;
  --pb-topbar-height: 70px; /* ~58 * 1.2 */
  --pb-nav-item-height: 46px; /* ~38 * 1.2 */
  /* --border-radius* come from page builder / platform — do not override */
}

@media (min-width: 1024px) and (max-width: 1280px) {
  :root {
    --pb-sidebar-width: 190px;
    --pb-nav-item-height: 44px;
  }
}

/* -----------------------------
   Desktop shell + background
----------------------------- */
@media (min-width: 1024px) {
  html, body {
    background-color: #06121f !important;
    background-image: url("https://cmsbetconstruct.com/storage/medias/golibet/media_1242_77b0792706c83d32fb19df936fd78573.png") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  body {
    box-sizing: border-box;
    padding-top: calc(var(--pb-topbar-height) + 12px) !important;
    padding-right: calc(var(--pb-sidebar-width) + 24px) !important;
  }

  .layout-bc {
    background: transparent !important;
  }

  /* Sports sticky titles stick below fixed top bar (not under it) */
  .sg-head-bc,
  .sp-s-l-head-bc,
  .competition-title-bc.sticky,
  .layout-content-holder-bc .sg-head-bc {
    top: var(--pb-topbar-height) !important;
  }
}

/* -----------------------------
   TOP BAR
   logo / login / register / support / clock / language

   IMPORTANT: do NOT use backdrop-filter / filter / transform on
   .header-bc — they create a containing block and crush the
   position:fixed glass nav into the ~58px top bar.
----------------------------- */
@media (min-width: 1024px) {
  .header-bc {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: calc(var(--pb-sidebar-width) + var(--pb-sidebar-gap) * 2) !important;
    bottom: auto !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    min-height: var(--pb-topbar-height) !important;
    max-height: none !important;
    padding: 8px 16px !important;
    overflow: visible !important;
    color: #e7f5fb !important;
    background: linear-gradient(180deg, rgba(8, 23, 37, 0.96), rgba(6, 18, 31, 0.94)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(95, 172, 211, 0.20) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    /* solid-ish bar — no backdrop-filter (breaks fixed nav) */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }

  .header-bc .hdr-main-content-bc {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .header-bc .logo-container {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
  }

  .header-bc .hdr-logo-bc {
    max-width: 158px !important; /* +20% */
    height: auto !important;
  }

  .header-bc .hdr-user-bc,
  .header-bc .header-custom-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* Login / Register only — do NOT size icon buttons like these */
  .header-bc .hdr-user-bc .btn.register,
  .header-bc .hdr-user-bc .btn.sign-in,
  .header-bc .hdr-user-bc .btn.btn-color,
  .header-bc .hdr-user-bc .sign-in,
  .header-bc .header-custom-buttons .btn.register,
  .header-bc .header-custom-buttons .btn.sign-in {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 86px !important;
    min-height: 41px !important;
    height: 41px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border-radius: var(--border-radius) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .header-bc .hdr-user-bc .btn.register,
  .header-bc .hdr-user-bc .btn.btn-color {
    background: linear-gradient(135deg, rgba(20, 140, 195, 0.95), rgba(10, 90, 140, 0.95)) !important;
    border: 1px solid rgba(160, 230, 255, 0.35) !important;
  }

  .header-bc .hdr-user-bc .btn.sign-in,
  .header-bc .hdr-user-bc .sign-in {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(162, 224, 246, 0.28) !important;
    color: #eaf7ff !important;
  }

  /* =========================================================
     Header utility icons (notifications, messages, …)
     Platform hides labels under 1400px — force labels visible
     ========================================================= */
  .header-bc .header-icon-text,
  .header-bc .header-custom-buttons .header-icon-text,
  .header-bc .hdr-user-bc .header-icon-text,
  .header-bc .btn.header-icon-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(162, 224, 246, 0.22) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #eaf7ff !important;
    font-family: Tahoma, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-decoration: none !important;
  }

  .header-bc .header-icon-text::before {
    font-family: BetConstruct-Icons !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #9fd8ef !important;
    margin: 0 !important;
  }

  /* Force label text visible (overrides platform max-width:1400 hide) */
  .header-bc .header-icon-text > span,
  .header-bc .header-icon-text[class*="bc-i"] > span,
  .header-bc .header-icon-text[class*="bc-i"] > span:not(:empty),
  .header-bc .header-icon-text > i + span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    margin-inline-start: 5px !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #eaf7ff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* =========================================================
     Account balance pill — text only (avatar is a sibling link)
     ========================================================= */
  .header-bc .hdr-user-info-content-bc,
  .header-bc .header-user-nav .hdr-user-info-content-bc {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }

  .header-bc .hdr-user-info-texts-bc,
  .header-bc .hdr-user-info-texts-bc.ext-1,
  .header-bc .hdr-user-info-texts-bc.ext-2,
  .header-bc .balanceAmount,
  .header-bc .balanceAmount span,
  .header-bc .currencySymbol,
  .header-bc .hdr-user-info-output {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .header-bc .hdr-user-info-texts-bc.ext-1,
  .header-bc .balanceAmount {
    color: #ffe991 !important;
    font-size: 15px !important;
  }

  .header-bc .hdr-user-info-texts-bc.ext-2,
  .header-bc .hdr-user-info-output {
    color: rgba(234, 247, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* Profile avatar: keep on the same line as balance */
  .header-bc .hdr-user-info-content-bc img,
  .header-bc .hdr-user-bc img.user-avatar,
  .header-bc .user-avatar,
  .header-bc .user-avatar-bc,
  .header-bc .hdr-user-avatar,
  .header-bc .profile-picture-bc,
  .header-bc .user-profile-picture {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Parent wrappers around balance/avatar stay horizontal */
  .header-bc .hdr-user-bc .user-info,
  .header-bc .hdr-user-info-bc,
  .header-bc .logged-in-user-info {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .header-bc .infoTime,
  .header-bc .smartPanel-bc,
  .header-bc .callPanel {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
  }

  .header-bc .hdr-user-bc:after,
  .header-bc .hdr-user-bc .sign-in:after,
  .header-bc .header-icon-text:after,
  .header-bc .infoTime:after,
  .header-bc .smartPanel-bc:after,
  .header-bc .callPanel:after {
    content: none !important;
    display: none !important;
  }

  /* Hide "Connect to wallet" CTA only */
  .header-bc .connect-wallet,
  .hdr-main-content-bc .connect-wallet,
  .btn.connect-wallet {
    display: none !important;
  }
}

/* -----------------------------
   RIGHT GLASS NAV PANEL
   only sports / casino / live links

   Only .nav-content-bc is fixed+glass.
   .nav-content-menu stays a normal flex child (double-fixed was crushing layout).
----------------------------- */
@media (min-width: 1024px) {
  .header-bc .nav-content-bc {
    position: fixed !important;
    top: var(--pb-sidebar-gap) !important;
    right: var(--pb-sidebar-gap) !important;
    bottom: var(--pb-sidebar-gap) !important;
    left: auto !important;
    z-index: 3010 !important;
    display: flex !important;
    flex-direction: column !important;
    width: var(--pb-sidebar-width) !important;
    max-width: var(--pb-sidebar-width) !important;
    height: auto !important;
    max-height: calc(100vh - var(--pb-sidebar-gap) * 2) !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #e7f5fb !important;
    background: linear-gradient(180deg, rgba(8, 27, 44, 0.88), rgba(5, 18, 31, 0.82)) !important;
    border: 1px solid rgba(121, 207, 241, 0.32) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: -10px 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
  }

  /* Inner wrapper: fill the glass panel, do NOT also become fixed */
  .header-bc .nav-content-menu {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .header-bc .nav-menu-container.header-navigation {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    gap: 5px !important;
  }

  .header-bc .nav-menu,
  .header-bc .nav-menu-container.header-navigation > ul.nav-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }

  /* Platform uses opacity:0 (not display:none) for overflow items — force them back */
  .header-bc .nav-menu > li,
  .header-bc .nav-menu > li.hidden-global {
    display: block !important;
    flex: 0 0 var(--pb-nav-item-height) !important;
    width: 100% !important;
    height: var(--pb-nav-item-height) !important;
    min-height: var(--pb-nav-item-height) !important;
    max-height: var(--pb-nav-item-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    position: relative !important;
  }

  .header-bc .nav-menu > li > a,
  .header-bc .nav-menu > li > .nav-menu-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: var(--pb-nav-item-height) !important;
    min-height: var(--pb-nav-item-height) !important;
    max-height: var(--pb-nav-item-height) !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    border-radius: var(--border-radius) !important;
    font-size: 14px !important; /* +20% from 12 */
    white-space: nowrap !important;
    text-align: right !important;
    color: #e7f5fb !important;
    background: rgba(12, 40, 62, 0.72) !important;
    border: 1px solid rgba(162, 224, 246, 0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    overflow: hidden !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }

  .header-bc .nav-menu > li > a:hover,
  .header-bc .nav-menu > li > .nav-menu-item:hover {
    color: #fff !important;
    background: rgba(28, 130, 180, 0.58) !important;
    border-color: rgba(170, 235, 255, 0.50) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset -3px 0 0 rgba(120, 220, 255, 0.95) !important;
  }

  .header-bc .nav-menu > li > a.active,
  .header-bc .nav-menu > li > .nav-menu-item.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(20, 120, 170, 0.72), rgba(12, 70, 110, 0.66)) !important;
    border-color: rgba(180, 240, 255, 0.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset -3px 0 0 #7ad7ff !important;
    filter: none !important;
  }

  .header-bc .nav-menu > li > a:active,
  .header-bc .nav-menu > li > .nav-menu-item:active {
    color: #fff8d6 !important;
    border-color: rgba(255, 214, 70, 0.85) !important;
    background: linear-gradient(135deg, rgba(255, 205, 50, 0.40), rgba(20, 90, 130, 0.45)) !important;
    box-shadow: 0 0 0 1px rgba(255, 220, 80, 0.7), 0 0 18px rgba(255, 200, 40, 0.45) !important;
  }

  /* No More in glass sidebar only — do NOT hide top-bar 3-dot menu */
  .header-bc .nav-content-bc .nav-menu-other,
  .header-bc .nav-content-menu .nav-menu-other,
  .header-bc .nav-menu-container.header-navigation > .nav-menu-other,
  .header-bc .nav-menu-other.hidden-global {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* =========================================================
     Top-bar balance + profile (header-user-nav)
     Must stay HORIZONTAL — never reuse 3-dot dropdown styles here
     ========================================================= */
  .header-bc .hdr-user-bc .nav-menu-container.header-user-nav,
  .header-bc .nav-menu-container.header-user-nav,
  .header-bc .header-user-nav {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    margin-inline-start: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .header-bc .header-user-nav > .nav-menu-other,
  .header-bc .header-user-nav > ul.nav-menu-other {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .header-bc .header-user-nav > .nav-menu-other > li {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .header-bc .header-user-nav > .nav-menu-other > li > a,
  .header-bc .header-user-nav > .nav-menu-other > li > .nav-menu-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .header-bc .header-user-nav .hdr-user-avatar-icon-bc,
  .header-bc .header-user-nav .avatarHolderImg,
  .header-bc .hdr-user-bc .avatarHolderImg,
  .header-bc .hdr-user-bc .hdr-user-avatar-icon-bc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* =========================================================
     Top-bar 3-dot collapsed dropdown ONLY — show labels
     Do NOT style .header-user-nav itself as a dropdown panel
     ========================================================= */
  .header-bc .compact-mode,
  .header-bc .hdr-user-bc .compact-mode {
    display: inline-flex !important;
    pointer-events: auto !important;
    overflow: visible !important;
    z-index: 5001 !important;
  }

  .header-bc .m-nav-collapsed-container-bc {
    min-width: 190px !important;
    width: max-content !important;
    max-width: 260px !important;
    padding: 8px !important;
    overflow: visible !important;
    z-index: 5002 !important;
    pointer-events: auto !important;
  }

  .header-bc .m-nav-collapsed-container-bc.active,
  .header-bc .compact-mode.active + .m-nav-collapsed-container-bc,
  .header-bc .compact-mode.active ~ .m-nav-collapsed-container-bc {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-bc .m-nav-collapsed-container-bc .app-nav-link,
  .header-bc .m-nav-collapsed-container-bc a,
  .header-bc .m-nav-collapsed-container-bc .user-nav-icon {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .header-bc .m-nav-collapsed-container-bc span,
  .header-bc .m-nav-collapsed-container-bc .app-nav-link > span,
  .header-bc .m-nav-collapsed-container-bc [class*="bc-i"] > span,
  .header-bc .m-nav-collapsed-container-bc .user-nav-icon > span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin-inline-start: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #eaf7ff !important;
    white-space: nowrap !important;
  }

  /* Dropdown under balance/profile: labels only inside submenu */
  .header-bc .header-user-nav .nav-menu-sub a,
  .header-bc .header-user-nav .nav-menu-sub .nav-menu-item,
  .header-bc .header-user-nav .nav-menu-sub .user-nav-icon {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }

  .header-bc .header-user-nav .nav-menu-sub span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin-inline-start: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #eaf7ff !important;
    white-space: nowrap !important;
  }
}

/* -----------------------------
   Banners / PNGs — leave untouched (no color effects)
----------------------------- */
@media (min-width: 1024px) {
  .sdr-item-bc,
  .sdr-item-bc:hover,
  .sdr-item-bc:active,
  .is-home-page .sdr-item-bc,
  .is-home-page .sdr-item-bc:hover,
  .is-home-page .sdr-item-bc:active {
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    background: transparent !important;
  }

  .sdr-image-bc,
  .product-banner-img-bc,
  .product-banner-bc img,
  .sdr-item-bc img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  /* Stories: never restyle circles */
  .layout-content-holder-bc .horizontal-sl-item-bc.active,
  .layout-content-holder-bc .horizontal-sl-item-bc.selected,
  .layout-content-holder-bc .horizontal-sl-icon-bc {
    filter: none !important;
  }

  .layout-content-holder-bc .horizontal-sl-item-bc.active,
  .layout-content-holder-bc .horizontal-sl-item-bc.selected {
    box-shadow: unset !important;
  }
}

/* =========================================================
   FEATURED GAMES — mockup layout (desktop)
   Date top-left | League top-right | Time center XL
   Odds: single navy pill #1d364b | W1/X/W2 white | odds #f9e8b0
   ========================================================= */
@media (min-width: 1024px) {
  .layout-content-holder-bc .featuredGames,
  .layout-content-holder-bc .featuredGamesContent {
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    pointer-events: auto !important;
  }

  .featuredGames .featuredGameItem,
  .featuredGamesContent .featuredGameItem,
  .featuredGameItem {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 14px !important;
    border: 1px solid rgba(168, 120, 30, 0.35) !important;
    /* Force gold — kill platform sport photo / dark fallback that sometimes 404s */
    background-color: #e0b84a !important;
    background-image: linear-gradient(to left, #f3df9a 0%, #e0b84a 48%, #c9962e 100%) !important;
    background: linear-gradient(to left, #f3df9a 0%, #e0b84a 48%, #c9962e 100%) !important;
    box-shadow:
      0 14px 30px rgba(90, 55, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    color: #1f1f1f !important;
    transition: transform 200ms ease, box-shadow 200ms ease !important;
  }

  /* Platform puts sport photo on ::before — when CDN fails, card goes black.
     Remove it so our gold always shows. Keep ::after watermark below. */
  .featuredGames .featuredGameItem::before,
  .featuredGamesContent .featuredGameItem::before,
  .featuredGameItem::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Soft white ball watermark — large, opacity 10% */
  .featuredGames .featuredGameItem::after,
  .featuredGamesContent .featuredGameItem::after,
  .featuredGameItem::after {
    content: "⚽" !important;
    position: absolute !important;
    right: -22px !important;
    bottom: -34px !important;
    z-index: 0 !important;
    font-size: 200px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    opacity: 0.1 !important;
    pointer-events: none !important;
    user-select: none !important;
    filter: grayscale(1) brightness(10) !important;
    display: block !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
  }

  .featuredGames .featuredGameItem:hover,
  .featuredGamesContent .featuredGameItem:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 18px 36px rgba(90, 55, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }

  .featuredGames .featuredGameItemHeader,
  .featuredGamesContent .featuredGameItemHeader {
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 8px 16px 10px 86px !important;
    background: transparent !important;
    align-items: center !important;
  }

  .featuredGames .featuredGameItemHeader::before,
  .featuredGamesContent .featuredGameItemHeader::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 0 !important;
    height: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(29, 54, 75, 0.18) !important;
  }

  .featuredGames .featuredGameItemHeaderContent,
  .featuredGamesContent .featuredGameItemHeaderContent {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .featuredGames .featuredGameItemSportAliasIcon,
  .featuredGamesContent .featuredGameItemSportAliasIcon,
  .featuredGames .featuredGameItemHeaderContent > i[class^="bc-i-"],
  .featuredGamesContent .featuredGameItemHeaderContent > i[class^="bc-i-"] {
    color: #0a4f86 !important;
    font-size: 17px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    text-shadow: none !important;
    filter: none !important;
  }

  .featuredGames .featuredGameItemFlag,
  .featuredGamesContent .featuredGameItemFlag,
  .featuredGames .featuredGameItem .flag-bc,
  .featuredGamesContent .featuredGameItem .flag-bc,
  .featuredGames .flag-bc,
  .featuredGamesContent .flag-bc {
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 5px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) !important;
  }

  .featuredGames .featuredGameItemCompetitionName,
  .featuredGamesContent .featuredGameItemCompetitionName {
    flex: 0 1 auto !important;
    color: #1f1f1f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.75),
      0 0 6px rgba(0, 0, 0, 0.45) !important;
  }

  .featuredGames .featuredGameItemBody,
  .featuredGamesContent .featuredGameItemBody {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 14px 16px !important;
    background: transparent !important;
  }

  .featuredGames .featuredGameItemPlayersContainer,
  .featuredGamesContent .featuredGameItemPlayersContainer {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    min-height: 56px !important;
    margin: 0 !important;
    column-gap: 10px !important;
  }

  /* Desktop: team logos beside the center clock */
  .featuredGames .featuredGameItemPlayerImg,
  .featuredGamesContent .featuredGameItemPlayerImg {
    display: block !important;
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
  }

  .featuredGames .team-logo-bc,
  .featuredGamesContent .team-logo-bc {
    display: none !important;
  }

  .featuredGames .featuredGameItemPlayer,
  .featuredGamesContent .featuredGameItemPlayer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .featuredGames .featuredGameItemPlayer,
  .featuredGamesContent .featuredGameItemPlayer,
  .featuredGames .featuredGameItemPlayerName,
  .featuredGamesContent .featuredGameItemPlayerName {
    color: #1f1f1f !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  .featuredGames .featuredGameItemPlayerName,
  .featuredGamesContent .featuredGameItemPlayerName {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }

  .featuredGames .featuredGameItemPlayer.team1,
  .featuredGamesContent .featuredGameItemPlayer.team1 {
    justify-content: flex-end !important;
    text-align: end !important;
  }

  .featuredGames .featuredGameItemPlayer.team2,
  .featuredGamesContent .featuredGameItemPlayer.team2 {
    justify-content: flex-start !important;
    text-align: start !important;
  }

  .featuredGames .featuredGameItemTimeBlock,
  .featuredGamesContent .featuredGameItemTimeBlock {
    min-width: 72px !important;
    margin: 0 !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .featuredGames .featuredGameItemTime,
  .featuredGamesContent .featuredGameItemTime {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .featuredGames .featuredGameItemTime > time:first-child:nth-last-child(2),
  .featuredGamesContent .featuredGameItemTime > time:first-child:nth-last-child(2) {
    position: absolute !important;
    top: 6px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1d364b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.8),
      0 0 6px rgba(0, 0, 0, 0.5) !important;
  }

  .featuredGames .featuredGameItemTime > time:last-child:nth-child(2),
  .featuredGamesContent .featuredGameItemTime > time:last-child:nth-child(2) {
    position: static !important;
    color: #1f1f1f !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.8),
      0 0 6px rgba(0, 0, 0, 0.5) !important;
  }

  .featuredGames .featuredGameItemTimeAdditionalInfo,
  .featuredGames .featuredGameItemNotStarted,
  .featuredGames .featuredGameItemCurrentSet,
  .featuredGamesContent .featuredGameItemTimeAdditionalInfo,
  .featuredGamesContent .featuredGameItemNotStarted,
  .featuredGamesContent .featuredGameItemCurrentSet {
    color: #1f1f1f !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.8),
      0 0 6px rgba(0, 0, 0, 0.5) !important;
  }

  .featuredGames .featuredGameItemTimeAdditionalInfo,
  .featuredGamesContent .featuredGameItemTimeAdditionalInfo {
    font-size: 24px !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #1d364b !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-group-item-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-group-item-bc {
    flex: 1 1 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: transparent !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-group-item-bc:first-child,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-group-item-bc:first-child {
    border-inline-start: 0 !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-group-item-bc + .market-group-item-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-group-item-bc + .market-group-item-bc {
    margin-inline-start: 0 !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-bc {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    direction: ltr !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-bc:hover,
  .featuredGames .featuredGameItem .market-group-holder-bc .market-bc.active,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-bc:hover,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-bc.active {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-name-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-name-bc {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-coefficient-bc,
  .featuredGames .featuredGameItem .market-group-holder-bc .market-odd-bc,
  .featuredGames .featuredGameItem .market-group-holder-bc .market-odds-container,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-coefficient-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-odd-bc,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-odds-container {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f9e8b0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .featuredGames .featuredGameItem .market-group-holder-bc .market-coefficient-bc *,
  .featuredGames .featuredGameItem .market-group-holder-bc .market-odd-bc *,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-coefficient-bc *,
  .featuredGamesContent .featuredGameItem .market-group-holder-bc .market-odd-bc * {
    color: #f9e8b0 !important;
    background: transparent !important;
  }
}

/* -----------------------------
   Homepage title dividers ONLY
   (never on sports tree titles)
   Decorative only — no section reorder
----------------------------- */
@media (min-width: 1024px) {
  .is-home-page .layout-content-holder-bc > .hm-row-bc .sp-s-l-h-title-content,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .comp-title-w-bc,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .market-title-bc {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .is-home-page .layout-content-holder-bc > .hm-row-bc .sp-s-l-h-title-content::before,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .sp-s-l-h-title-content::after,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .comp-title-w-bc::before,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .comp-title-w-bc::after,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .market-title-bc::before,
  .is-home-page .layout-content-holder-bc > .hm-row-bc .market-title-bc::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 28px !important;
    max-width: 140px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(137, 216, 244, 0.34), transparent) !important;
  }
}

/* -----------------------------
   Countdown banner size fix
----------------------------- */
@media (min-width: 1024px) {
  .countdown-banner-content {
    top: 12px !important;
    inset-inline-start: 14px !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    max-width: min(420px, 46%) !important;
    background: rgba(6, 18, 31, 0.62) !important;
    border: 1px solid rgba(162, 224, 246, 0.22) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    transform: none !important;
    z-index: 3 !important;
  }

  .countdown-banner-date {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .countdown-banner-names {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .countdown-banner-counter {
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  .countdown-banner-counter + .countdown-banner-counter {
    padding-inline-start: 12px !important;
  }

  .countdown-banner-counter + .countdown-banner-counter:before {
    font-size: 16px !important;
    top: 0 !important;
  }
}

/* =========================================================
   SAFE hover + golden click
   Only: glass nav, header/popup/betslip buttons, homepage cards
   Never: sports tree, markets, team rows, stories
   No overflow/layout changes on sports UI
   ========================================================= */
@media (min-width: 1024px) {
  /* --- shared soft shine (pseudo only on already-clipped safe targets) --- */
  .header-bc .nav-menu > li > a,
  .header-bc .nav-menu > li > .nav-menu-item,
  .header-bc .hdr-user-bc .btn,
  .header-bc .header-custom-buttons .btn,
  .popup-holder-bc .btn,
  .betslip-bc .btn {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      color 160ms ease,
      filter 160ms ease,
      transform 120ms ease !important;
  }

  .header-bc .nav-menu > li > a::after,
  .header-bc .nav-menu > li > .nav-menu-item::after,
  .header-bc .hdr-user-bc .btn.register::after,
  .header-bc .hdr-user-bc .btn.sign-in::after,
  .header-bc .hdr-user-bc .btn.btn-color::after,
  .header-bc .header-custom-buttons .btn.register::after,
  .header-bc .header-custom-buttons .btn.sign-in::after {
    content: "" !important;
    position: absolute !important;
    top: -30% !important;
    bottom: -30% !important;
    left: -45% !important;
    width: 40% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(
      100deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(255, 255, 255, 0.32) 50%,
      transparent 100%
    ) !important;
    transform: translateX(-130%) skewX(-18deg) !important;
    opacity: 0 !important;
    transition: transform 460ms ease, opacity 180ms ease !important;
  }

  /* Never put shine pseudo on icon+label buttons */
  .header-bc .header-icon-text::after,
  .header-bc .btn.header-icon-text::after {
    content: none !important;
    display: none !important;
  }

  .header-bc .hdr-user-bc .btn.register,
  .header-bc .hdr-user-bc .btn.sign-in,
  .header-bc .hdr-user-bc .btn.btn-color,
  .header-bc .header-custom-buttons .btn.register,
  .header-bc .header-custom-buttons .btn.sign-in {
    position: relative !important;
    overflow: hidden !important;
  }

  .header-bc .header-icon-text,
  .header-bc .btn.header-icon-text {
    position: relative !important;
    overflow: visible !important;
  }

  .header-bc .nav-menu > li > a > *,
  .header-bc .nav-menu > li > .nav-menu-item > *,
  .header-bc .hdr-user-bc .btn.register > *,
  .header-bc .hdr-user-bc .btn.sign-in > *,
  .header-bc .header-custom-buttons .btn.register > *,
  .header-bc .header-custom-buttons .btn.sign-in > *,
  .header-bc .header-icon-text > * {
    position: relative !important;
    z-index: 3 !important;
  }

  /* Hover — glass nav */
  .header-bc .nav-menu > li > a:hover,
  .header-bc .nav-menu > li > .nav-menu-item:hover {
    color: #fff !important;
    background: rgba(28, 130, 180, 0.62) !important;
    border-color: rgba(170, 235, 255, 0.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset -3px 0 0 rgba(120, 220, 255, 0.95),
      0 8px 18px rgba(0, 80, 130, 0.26) !important;
  }

  .header-bc .nav-menu > li > a:hover::after,
  .header-bc .nav-menu > li > .nav-menu-item:hover::after,
  .header-bc .hdr-user-bc .btn.register:hover::after,
  .header-bc .hdr-user-bc .btn.sign-in:hover::after,
  .header-bc .header-custom-buttons .btn.register:hover::after,
  .header-bc .header-custom-buttons .btn.sign-in:hover::after {
    opacity: 1 !important;
    transform: translateX(290%) skewX(-18deg) !important;
  }

  /* Hover — header / popup / betslip buttons */
  .header-bc .hdr-user-bc .btn.register:hover,
  .header-bc .hdr-user-bc .btn.sign-in:hover,
  .header-bc .hdr-user-bc .btn.btn-color:hover,
  .header-bc .header-custom-buttons .btn.register:hover,
  .header-bc .header-custom-buttons .btn.sign-in:hover,
  .popup-holder-bc .btn:hover,
  .betslip-bc .btn:hover {
    filter: brightness(1.08) saturate(1.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 8px 18px rgba(0, 80, 130, 0.24) !important;
  }

  .header-bc .header-icon-text:hover,
  .header-bc .btn.header-icon-text:hover {
    background: rgba(28, 130, 180, 0.35) !important;
    border-color: rgba(170, 235, 255, 0.45) !important;
    color: #ffffff !important;
    filter: none !important;
  }

  /* Golden click — safe targets only */
  .header-bc .nav-menu > li > a:active,
  .header-bc .nav-menu > li > .nav-menu-item:active,
  .header-bc .hdr-user-bc .btn.register:active,
  .header-bc .hdr-user-bc .btn.sign-in:active,
  .header-bc .header-custom-buttons .btn.register:active,
  .header-bc .header-custom-buttons .btn.sign-in:active,
  .popup-holder-bc .btn:active,
  .betslip-bc .btn:active {
    color: #fff8d6 !important;
    border-color: rgba(255, 214, 70, 0.88) !important;
    background: linear-gradient(
      135deg,
      rgba(255, 210, 55, 0.46),
      rgba(255, 170, 25, 0.22) 55%,
      rgba(20, 90, 130, 0.48)
    ) !important;
    box-shadow:
      0 0 0 1px rgba(255, 220, 80, 0.78),
      0 0 22px rgba(255, 200, 40, 0.52),
      inset 0 0 16px rgba(255, 230, 120, 0.32),
      inset 0 1px 0 rgba(255, 250, 210, 0.55) !important;
    filter: saturate(1.15) brightness(1.06) !important;
    transform: scale(0.985) !important;
  }

  /* Stories only: don't leave custom shine leftovers */
  .layout-content-holder-bc .horizontal-sl-item-bc::before,
  .layout-content-holder-bc .horizontal-sl-item-bc::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   LIVE / PREMATCH rows — align score & markets-count texts
   Keep period / N+ / scores on one clean line per row
   ========================================================= */
@media (min-width: 1024px) {
  .c-row-bc .c-info-content-bc {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  /* Period / clock: single line, no wrap stagger */
  .c-row-bc .c-info-time-bc,
  .c-row-bc .c-info-score-bc {
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 118px !important;
    line-height: 18px !important;
    max-height: 18px !important;
  }

  /* Markets count column (13+ / star): fixed width so rows align */
  .c-row-bc .c-info-more-bc {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .c-row-bc .c-info-markets-count-bc {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  .c-row-bc .c-info-icon-line {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 14px !important;
  }

  .c-row-bc .c-info-more-bc .c-info-icon-bc,
  .c-row-bc .c-info-more-bc .notification-loader {
    margin-inline-start: 0 !important;
  }

  /* Team score next to name: fixed slot, same line */
  .c-row-bc .c-teams-row-bc {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 19px !important;
  }

  .c-row-bc .c-team-info-team-bc {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 19px !important;
  }

  .c-row-bc .c-team-info-scores-bc {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    margin-inline-start: 6px !important;
    text-align: end !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 19px !important;
  }

  .c-row-bc .c-info-score-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Live match header: time/score on photo — readable shadow only */
  .game-details-additional-info-title-bc {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 8px rgba(0, 0, 0, 0.55) !important;
  }
}

/* Live soccer score panel — keep platform photo, +15% black tint only */
.game-details-container-inner-bc.live-score-bg-soccer {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15) !important;
}

/* Live header row data (score/time line) — black shadow for readability */
.game-details-c-head-c-row-data-bc {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.6) !important;
}

/* Game details date/time on photo header */
.game-details-container-inner-bc time,
.game-details-c-head-bc time,
.game-details-c-head-c-row-data-bc time {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.6) !important;
}