/* Header style 8: a full-width gaming ribbon, built from the site's own colours and menu data. */
@media (min-width: 992px) {
  body[data-menu-head-style="8"] #nav-original {
    width: 100% !important;
    max-width: none !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid color-mix(in srgb, var(--sub) 80%, var(--main)) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08)),
      linear-gradient(180deg, var(--main) 0%, color-mix(in srgb, var(--main) 50%, var(--sub)) 50%, var(--sub) 100%) !important;
    box-shadow: 0 9px 24px color-mix(in srgb, var(--main) 19%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-menu-head-style="8"] #nav-original > .container-fluid {
    display: flex !important;
    align-items: center !important;
    width: min(96%, 1460px) !important;
    max-width: 1460px !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    gap: clamp(8px, 1.3vw, 20px) !important;
  }
  body[data-menu-head-style="8"] #nav-original .mobile-nav-tools { display: none !important; }
  body[data-menu-head-style="8"] #nav-original .navbar-brand {
    display: flex !important;
    flex: 0 0 clamp(74px, 7vw, 112px) !important;
    justify-content: flex-start !important;
    width: clamp(74px, 7vw, 112px) !important;
    margin: 0 !important;
  }
  body[data-menu-head-style="8"] #nav-original .navbar-brand img {
    width: auto !important;
    max-width: 96px !important;
    height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
  }
  body[data-menu-head-style="8"] #nav-original .site-brand-name { display: none !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar {
    position: static !important;
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .offcanvas-body {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(8px, 1.2vw, 18px) !important;
    overflow: visible !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item { flex: 0 0 auto !important; margin: 0 !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px clamp(8px, .75vw, 14px) !important;
    gap: 7px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    white-space: nowrap !important;
    transform: none !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link i {
    color: inherit !important;
    font-size: 14px !important;
    filter: none !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link:is(:hover, :focus-visible, .active),
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item.show > .nav-link {
    border-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .17) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.desktop-member-actions, .desktop-guest-actions) {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 5px !important;
    transform: none !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.desktop-member-actions, .desktop-guest-actions) > .nav-item { flex: 0 0 auto !important; margin: 0 !important; }
  body[data-menu-head-style="8"] #nav-original .desktop-guest-actions .guest-contact-item { display: none !important; }
  body[data-menu-head-style="8"] #nav-original :is(.guest-login-link, .guest-register-link) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 39px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.guest-login-link, .guest-register-link):hover { background: rgba(255, 255, 255, .16) !important; }
  body[data-menu-head-style="8"] #nav-original .guest-register-link { position: relative; margin-left: 0 !important; }
  body[data-menu-head-style="8"] #nav-original .guest-register-link::before { content: none !important; display: none !important; }
  body[data-menu-head-style="8"] #nav-original :is(.nav-search-icon, .nav-checkin-icon, .site-language-toggle) {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    border: 1px solid rgba(255, 255, 255, .27) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.nav-search-icon, .nav-checkin-icon, .site-language-toggle) i { color: #fff !important; }
  body[data-menu-head-style="8"] #nav-original .site-language-code { display: none !important; }
  body[data-menu-head-style="8"] #nav-original .member-profile-trigger.member-avatar-trigger {
    border-color: rgba(255, 255, 255, .58) !important;
    background: rgba(255, 255, 255, .12) !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body[data-menu-head-style="8"] #nav-original > .container-fluid { width: 100% !important; gap: 5px !important; }
  body[data-menu-head-style="8"] #nav-original .navbar-brand { flex-basis: 70px !important; width: 70px !important; }
  body[data-menu-head-style="8"] #nav-original .navbar-brand img { max-width: 65px !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link { padding-inline: 6px !important; gap: 5px !important; font-size: 11px !important; }
  body[data-menu-head-style="8"] #nav-original .nav-balance-compact { display: none !important; }
}
@media (max-width: 991.98px) {
  body[data-menu-head-style="8"] #nav-original {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid color-mix(in srgb, var(--sub) 75%, var(--main)) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08)),
      linear-gradient(180deg, var(--main) 0%, color-mix(in srgb, var(--main) 50%, var(--sub)) 50%, var(--sub) 100%) !important;
  }
  body[data-menu-head-style="8"] #nav-original > .container-fluid { width: 100% !important; max-width: none !important; padding: 0 12px !important; }
  body[data-menu-head-style="8"] #nav-original .site-brand-name { display: inline-flex !important; color: #fff !important; }
  body[data-menu-head-style="8"] #nav-original .site-brand-name span { color: #fff !important; }
  body[data-menu-head-style="8"] #nav-original .navbar-toggler { border-color: rgba(255, 255, 255, .32) !important; color: #fff !important; background: rgba(255, 255, 255, .12) !important; }
  body[data-menu-head-style="8"] #nav-original .navbar-toggler i { color: #fff !important; }
  body[data-menu-head-style="8"] #nav-original .site-language-code { display: none !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar { background: var(--bg_main) !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .mobile-main-menu .nav-link:is(:hover, .active) {
    border-color: color-mix(in srgb, var(--main) 35%, var(--bg_border)) !important;
    color: var(--main) !important;
    background: color-mix(in srgb, var(--main) 12%, var(--bg_sub)) !important;
  }
}

/* Refined ribbon: one continuous surface with a consistent icon/tool system. */
@media (min-width: 992px) {
  body[data-menu-head-style="8"] #nav-original {
    --ribbon-ink: color-mix(in srgb, #fff 94%, var(--sub));
    --ribbon-muted: color-mix(in srgb, #fff 72%, var(--sub));
    --ribbon-surface: rgba(255, 255, 255, .105);
    --ribbon-surface-hover: rgba(255, 255, 255, .18);
    --ribbon-line: rgba(255, 255, 255, .18);
    min-height: 74px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08)),
      linear-gradient(180deg, var(--main) 0%, color-mix(in srgb, var(--main) 50%, var(--sub)) 50%, var(--sub) 100%) !important;
    box-shadow: 0 10px 27px color-mix(in srgb, var(--main) 20%, transparent), inset 0 -1px var(--ribbon-line) !important;
  }
  body[data-menu-head-style="8"] #nav-original::before,
  body[data-menu-head-style="8"] #nav-original::after,
  body[data-menu-head-style="8"] #nav-original > .container-fluid::before,
  body[data-menu-head-style="8"] #nav-original > .container-fluid::after,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar::before,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar::after,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .offcanvas-body::before,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .offcanvas-body::after,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu::before,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu::after { content: none !important; display: none !important; }
  body[data-menu-head-style="8"] #nav-original > .container-fluid,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .offcanvas-body,
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu,
  body[data-menu-head-style="8"] #nav-original :is(.desktop-member-actions, .desktop-guest-actions),
  body[data-menu-head-style="8"] #nav-original .member-nav-compact {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-menu-head-style="8"] #nav-original > .container-fluid {
    min-height: 73px !important;
    gap: clamp(7px, 1vw, 15px) !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link {
    min-height: 42px !important;
    padding: 8px clamp(7px, .68vw, 12px) !important;
    gap: 7px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: var(--ribbon-ink) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link i {
    display: inline-grid !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    place-items: center !important;
    margin: 0 !important;
    color: var(--ribbon-ink) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link:is(:hover, :focus-visible, .active),
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item.show > .nav-link {
    border-color: var(--ribbon-line) !important;
    color: #fff !important;
    background: var(--ribbon-surface-hover) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 5px 14px rgba(0, 0, 0, .08) !important;
    transform: none !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.desktop-member-actions, .desktop-guest-actions) {
    gap: 6px !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.nav-search-icon, .nav-checkin-icon, .site-language-toggle) {
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid var(--ribbon-line) !important;
    border-radius: 11px !important;
    color: var(--ribbon-ink) !important;
    background: var(--ribbon-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.nav-search-icon, .nav-checkin-icon, .site-language-toggle):hover {
    color: #fff !important;
    background: var(--ribbon-surface-hover) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .08) !important;
    transform: translateY(-1px) !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.nav-search-icon, .nav-checkin-icon, .site-language-toggle) i {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  body[data-menu-head-style="8"] #nav-original .site-language-flag { width: 20px !important; height: 20px !important; margin: 0 !important; border-radius: 50% !important; object-fit: cover !important; }
  body[data-menu-head-style="8"] #nav-original .member-nav-compact { gap: 6px !important; margin: 0 !important; }
  body[data-menu-head-style="8"] #nav-original .nav-balance-compact {
    display: flex !important;
    min-height: 40px !important;
    height: 40px !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    border: 1px solid var(--ribbon-line) !important;
    border-radius: 11px !important;
    color: var(--ribbon-ink) !important;
    background: var(--ribbon-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-menu-head-style="8"] #nav-original .nav-balance-icon,
  body[data-menu-head-style="8"] #nav-original .nav-balance-refresh {
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ribbon-ink) !important;
    background: rgba(255, 255, 255, .09) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-menu-head-style="8"] #nav-original .nav-balance-icon i,
  body[data-menu-head-style="8"] #nav-original .nav-balance-refresh i { color: currentColor !important; font-size: 13px !important; }
  body[data-menu-head-style="8"] #nav-original .nav-balance-info { min-width: 72px !important; }
  body[data-menu-head-style="8"] #nav-original .nav-balance-info strong { gap: 4px !important; color: var(--ribbon-ink) !important; font-size: 13px !important; }
  body[data-menu-head-style="8"] #nav-original .nav-amount { color: var(--ribbon-ink) !important; font-size: 13px !important; }
  body[data-menu-head-style="8"] #nav-original .nav-point-suffix { color: var(--ribbon-muted) !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase; }
  body[data-menu-head-style="8"] #nav-original .member-profile-trigger.member-avatar-trigger {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 3px !important;
    border: 1px solid var(--ribbon-line) !important;
    border-radius: 11px !important;
    color: var(--ribbon-ink) !important;
    background: var(--ribbon-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-menu-head-style="8"] #nav-original .member-profile-trigger.member-avatar-trigger > img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.guest-login-link, .guest-register-link) {
    min-height: 40px !important;
    padding: 8px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: var(--ribbon-ink) !important;
  }
  body[data-menu-head-style="8"] #nav-original :is(.guest-login-link, .guest-register-link) i { color: currentColor !important; font-size: 14px !important; }
  body[data-menu-head-style="8"] #nav-original :is(.guest-login-link, .guest-register-link):hover { border-color: var(--ribbon-line) !important; background: var(--ribbon-surface-hover) !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body[data-menu-head-style="8"] #nav-original .nav-balance-compact { display: flex !important; }
  body[data-menu-head-style="8"] #nav-original .nav-balance-info { min-width: 58px !important; }
  body[data-menu-head-style="8"] #offcanvasDarkNavbar .desktop-menu > .nav-item > .nav-link { padding-inline: 6px !important; gap: 4px !important; font-size: 10px !important; }
}

@media (max-width: 991.98px) {
  body[data-menu-head-style="8"] #nav-original {
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08)),
      linear-gradient(180deg, var(--main) 0%, color-mix(in srgb, var(--main) 50%, var(--sub)) 50%, var(--sub) 100%) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--main) 18%, transparent) !important;
  }
  body[data-menu-head-style="8"] #nav-original::before,
  body[data-menu-head-style="8"] #nav-original::after,
  body[data-menu-head-style="8"] #nav-original > .container-fluid::before,
  body[data-menu-head-style="8"] #nav-original > .container-fluid::after { content: none !important; display: none !important; }
  body[data-menu-head-style="8"] #nav-original > .container-fluid { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
}