/* PLACE YOUR CUSTOM STYLES IN THIS FILE */

/* Background image with semi-transparent overlay */
html {
    background: #080325 url('/assets/images/anglyx_bg_new.png') center center / cover fixed no-repeat;
}

body {
    background: transparent;
    position: relative;
}

/* Full-page dark overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 3, 37, 0.9);
    pointer-events: none;
    z-index: -1;
}

/* Keep content-wrap transparent so overlay shows through */
.content-wrap {
    background: transparent !important;
    position: relative;
}

/* Footer darker background */
.youplay-footer {
    background: rgba(0, 0, 0, 0.4) !important;
}

.youplay-footer .copyright {
    background: transparent !important;
}

/* Consistent spacing for nk-box elements */
.nk-box {
    margin-bottom: 50px;
}

/* Add top padding to content to account for fixed navbar */
.content-wrap {
    padding-top: 70px;
}

/* Hide mobile-only link versions on desktop */
.mobile-only-link {
    display: none !important;
}

/* Desktop-only dropdown styles */
@media (min-width: 769px) {
    /* Properly contain message and notification dropdowns with scrolling */
    .navbar-youplay .dropdown-menu {
        max-height: 400px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        background-color: #1a1a1a !important;
        opacity: 1 !important;
    }

    /* Make sure the UL inside doesn't break containment */
    .navbar-youplay .dropdown-menu ul {
        margin: 0 !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Prevent dropdown items from causing overflow */
    .navbar-youplay .dropdown-menu li {
        overflow: hidden;
    }

    /* Specifically target notification and message dropdowns */
    .navbar-right .dropdown-menu {
        max-height: 400px !important;
        overflow-y: auto !important;
    }
}

/* Hide mobile menu text/labels on desktop */
.mobile-menu-text,
.mobile-menu-label {
    display: none;
}

/* Mobile menu optimizations */
@media (max-width: 768px) {
    /* Hide desktop dropdown versions on mobile */
    .desktop-only-dropdown {
        display: none !important;
    }

    /* Show mobile-only link versions */
    .mobile-only-link {
        display: block !important;
    }

    /* Show mobile menu labels (Store, Admin, etc.) */
    .mobile-menu-label {
        display: inline !important;
    }

    /* Ensure mobile menu appears above logo */
    .navbar-youplay .navbar-collapse {
        z-index: 9999 !important;
    }

    /* Lower z-index for logo to allow menu to appear on top */
    .navbar-youplay .navbar-header {
        z-index: 1000 !important;
    }

    .navbar-youplay .navbar-brand {
        z-index: 1000 !important;
    }

    /* Profile dropdown - expand content on mobile */
    .navbar-youplay .navbar-right .dropdown.dropdown-hover .dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Hide the profile username and avatar toggle on mobile */
    .navbar-youplay .navbar-right .dropdown.dropdown-hover > a.dropdown-toggle {
        display: none !important;
    }

    /* Make profile dropdown links look like regular menu items */
    .navbar-youplay .navbar-right .dropdown.dropdown-hover .dropdown-menu li {
        padding-left: 0 !important;
    }

    /* Community dropdown (left nav) - always show content on mobile */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover .dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Hide the "Community" text and caret on mobile */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover > a.dropdown-toggle {
        display: none !important;
    }

    /* Make Community dropdown links look like regular menu items */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover .dropdown-menu li {
        padding-left: 0 !important;
    }

    /* Remove spacing from dropdown parent li elements on mobile */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove any default margins from dropdown-menu ul */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover .dropdown-menu ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure no extra spacing between menu groups */
    .navbar-youplay .navbar-nav > li.dropdown.dropdown-hover .dropdown-menu {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Navbar bottom border - always visible */
.navbar-youplay.navbar-small {
    border-bottom: 2px solid #fff !important;
}

/* Remove YouPlay theme's default white active underline */
.navbar-youplay .navbar-nav > li.active > a::after,
.navbar-youplay .navbar-nav > li.active > a::before,
.navbar-youplay .navbar-nav > li.dropdown.active > a.dropdown-toggle::after,
.navbar-youplay .navbar-nav > li.dropdown.active > a.dropdown-toggle::before {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* Active nav link highlight - light aqua underline */
.navbar-youplay .navbar-nav > li.active > a,
.navbar-youplay .navbar-nav > li.active > a:hover,
.navbar-youplay .navbar-nav > li.active > a:focus {
    border-bottom: 3px solid #17a2b8 !important;
    padding-bottom: 7px !important;
    background: none !important;
}

/* Active dropdown parent highlight */
.navbar-youplay .navbar-nav > li.dropdown.active > a.dropdown-toggle {
    border-bottom: 3px solid #17a2b8 !important;
    padding-bottom: 7px !important;
    background: none !important;
}