/* Neo345 brand tokens — shared across all NeoClient pages and components. */
:root {
    --neo-brand-blue: #3164ff;
    --neo-brand-blue-hover: #1f55f3;
    --neo-brand-blue-bg: rgba(49, 100, 255, 0.08);
    --neo-sidebar-active-bg: #dfe7ff;
    --neo-brand-blue-shadow: rgba(49, 100, 255, 0.22);
    --neo-brand-orange: #FF6400;
    --neo-brand-orange-hover: #e05800;
    --neo-brand-orange-shadow: rgba(255, 100, 0, 0.28);
}

/* Force appbar height to always be 64px regardless of breakpoint.
   MudBlazor reduces --mud-appbar-height to 56px below 600px by default. */
@media (max-width: 599px) {
    :root {
        --mud-appbar-height: 64px !important;
    }

    .mud-appbar {
        height: 64px !important;
        min-height: 64px !important;
    }

    .mud-toolbar {
        height: 64px !important;
        min-height: 64px !important;
    }
}

/* Sidebar nav shared styles — used by MainNavMenu and NeoSupportMenu */

.main-nav-menu-list .main-nav-item {
    margin: 2px 8px;
    padding: 1px 8px;
    border-radius: 6px;
}

.main-nav-menu-list .main-nav-item-active {
    margin: 2px 8px;
    padding: 1px 8px;
    border-radius: 6px;
    background-color: var(--neo-sidebar-active-bg);
    font-weight: 400;
}

    .main-nav-menu-list .main-nav-item-active .mud-nav-link-text {
        color: var(--neo-brand-blue);
        font-weight: 400;
    }

.main-nav-menu-list .main-nav-item:hover,
.main-nav-menu-list .main-nav-item-active:hover {
    background-color: var(--neo-brand-blue-bg);
    transition: 0.3s ease;
}

/* Neutraliza el hover interno de MudBlazor (.mud-nav-link) para que solo
   se vea el hover del wrapper .main-nav-item, evitando el doble efecto. */
.main-nav-menu-list .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: transparent !important;
}

.main-nav-menu-list .main-nav-item:active,
.main-nav-menu-list .main-nav-item-active:active {
    background-color: var(--neo-sidebar-active-bg);
    transition: 0.3s ease;
}

.main-nav-menu-list .sports-title,
.main-nav-menu-list .mud-typography.sports-title {
    color: var(--neo-brand-blue);
    padding-top: 28px;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
}

.main-nav-menu-list .mud-navmenu.mud-navmenu-default .mud-nav-link {
    padding: 3px 0px;
}

    .main-nav-menu-list .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: unset;
        background-color: unset;
    }

        .main-nav-menu-list .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
            background-color: unset;
        }

.main-nav-menu-list .mud-nav-link-text {
    font-size: 14px;
    font-weight: 400;
    margin-left: 0px !important;
    margin-inline-start: 0px !important;
    color: var(--mud-palette-appbar-text);
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.main-nav-menu-list.neo-sidebar-menu {
    padding-top: 12px;
}

.main-nav-menu-list.neo-sidebar-menu .mud-nav-link-text {
    color: var(--mud-palette-text-primary);
}

/* Primary nav items (Home, Lotto & Casino, Sportsbook) — pill style */
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link {
    border-radius: 8px;
    margin: 2px 8px;
    padding: 1px 8px;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link .mud-nav-link-text,
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link .nav-item-icon,
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__section-title {
    color: var(--neo-brand-blue);
}

/* SVG icons — blue when inactive (already blue by default, ensure no filter) */
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link .nav-item-icon img {
    filter: none;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active {
    background-color: var(--neo-brand-blue);
    border-radius: 8px;
    padding: 1px 8px;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active .mud-nav-link-text,
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active .nav-item-icon {
    color: #ffffff;
}

/* SVG icons — white when active */
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active .nav-item-icon img {
    filter: brightness(0) invert(1);
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link:hover:not(.main-nav-item-active) {
    background-color: var(--neo-brand-blue-bg);
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__group-link {
    margin: 2px 8px;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__group-link.main-nav-item-active .mud-nav-link-text {
    color: var(--neo-brand-blue);
}

/* Prevent MudBlazor internal link bg from overriding the primary pill active state */
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active .mud-nav-link:not(.mud-nav-link-disabled) {
    background-color: transparent !important;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: transparent !important;
}

/* Keep active pill solid blue on hover */
.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__primary-link.main-nav-item-active:hover {
    background-color: var(--neo-brand-blue-hover) !important;
}

.main-nav-menu-list.neo-sidebar-menu .neo-sidebar-menu__section-title {
    padding-top: 16px;
    padding-bottom: 4px;
    font-weight: bold;
    font-size: 16px;
}

.main-nav-menu-list .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    display: none;
}

.main-nav-menu-list span.nav-item-icon {
    font-family: 'Olympicons';
    font-size: 18px;
    padding-right: 10px;
    line-height: 1;
    color: var(--mud-palette-primary);
    min-width: 35px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-nav-menu-list span.nav-item-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.main-nav-menu-list span.nav-item-logo {
    padding-right: 10px;
    line-height: 1;
    min-width: 35px;
    text-align: center;
}

.main-nav-menu-list .logo-badge {
    border-radius: 50%;
    font-weight: bold;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    font-size: 12px;
}

/* Rules page - bold text inside MarkupString bullet lists */
.rules-bonus-list strong,
.rules-bonus-list b {
    font-weight: 600 !important;
}

/* Rules page - bold text in Tier table column */
.rules-table td strong,
.rules-table td b {
    font-weight: 600 !important;
}

/* Page section titles — all NeoClient pages use --neo-brand-blue for the h1
   rendered by the Tabs component's SectionTitle prop. */
.section-title-content h1 {
    color: var(--neo-brand-blue) !important;
}

/* ── Carousel section: sized and positioned ── */
.lc-carousel-mud,
.featured-carousel-mud {
    --neo-carousel-bullet-size: 10px;
    --neo-carousel-bullet-active-width: 26px;
    --neo-carousel-bullet-border: rgba(245, 245, 245, 0.72);
    --neo-carousel-bullet-active-color: #e8e8e8;
    --neo-carousel-bullet-active-glow: rgba(232, 232, 232, 0.45);
    height: clamp(280px, 36vw, 440px);
    flex-direction: column !important;
    clip-path: none !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Swipe area fills all available column space */
.lc-carousel-mud > .mud-swipearea,
.featured-carousel-mud > .mud-swipearea {
    flex: 1 1 auto !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Items stay inside swipe area */
.lc-carousel-mud .mud-carousel-item,
.featured-carousel-mud .mud-carousel-item {
    overflow: hidden;
}

/* ── Controls bar: the real d-flex div that wraps arrows + bullets ── */
.lc-carousel-mud > .d-flex.flex-grow-1,
.featured-carousel-mud > .d-flex.flex-grow-1 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    pointer-events: none !important;
    align-items: center !important;
}

/* Arrow buttons — the first and last direct MudIconButton children */
.lc-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button,
.featured-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button {
    pointer-events: auto !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 12px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.50) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background 0.15s ease, transform 0.15s ease;
}

.lc-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button:hover,
.featured-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button:hover {
    background: rgba(0, 0, 0, 0.75) !important;
    transform: scale(1.08) !important;
}

/* Arrow icon color */
.lc-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button .mud-icon-root,
.featured-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button .mud-icon-root {
    color: #ffffff !important;
    font-size: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Bullets grow wrapper (flex-grow-1 align-self-end) ── */
.lc-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1,
.featured-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 {
    pointer-events: none !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 16px !important;
}

/* Inner d-flex justify-center row */
.lc-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 > .d-flex,
.featured-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 > .d-flex {
    pointer-events: auto !important;
    gap: 7px !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* ── Individual bullet buttons ── */
.lc-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .mud-icon-button,
.featured-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .mud-icon-button,
.lc-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .d-flex > div,
.featured-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .d-flex > div {
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.neo-carousel-bullet {
    display: block;
    width: var(--neo-carousel-bullet-size);
    height: var(--neo-carousel-bullet-size);
    border: 2px solid var(--neo-carousel-bullet-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.neo-carousel-bullet--active {
    /*width: var(--neo-carousel-bullet-active-width) !important;*/
    background: var(--neo-carousel-bullet-active-color) !important;
    border-color: var(--neo-carousel-bullet-active-color) !important;
    box-shadow: 0 0 2px 2px var(--neo-carousel-bullet-active-glow) !important;
}

/* Hide the SVG icon inside bullet — the button shape IS the dot */
.lc-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .mud-icon-button .mud-icon-root,
.featured-carousel-mud > .d-flex.flex-grow-1 > .flex-grow-1 .mud-icon-button .mud-icon-root {
    display: none !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .lc-carousel-mud,
    .featured-carousel-mud {
        height: clamp(220px, 48vw, 340px);
    }
}

@media (max-width: 600px) {
    .lc-carousel-mud,
    .featured-carousel-mud {
        height: clamp(190px, 56vw, 280px);
    }

    .lc-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button,
    .featured-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin: 0 6px !important;
    }

    .lc-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button .mud-icon-root,
    .featured-carousel-mud > .d-flex.flex-grow-1 > .mud-icon-button .mud-icon-root {
        font-size: 16px !important;
    }
}

/* ── Clauses list — global rules needed because MarkupString bypasses Blazor CSS scoping ── */
.neo-rules-clauses__list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.neo-rules-clauses__list > li {
    display: list-item;
    list-style: disc;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.65;
}

.neo-rules-clauses__sublist {
    margin: 0.5rem 0 0 0;
    padding-left: 1.4rem;
    list-style: circle;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.neo-rules-clauses__sublist > li {
    display: list-item;
    list-style: circle;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.65;
}