/* ==========================================================================
   MXFlix Custom Header Styles (Netflix Inspired v3)
   ========================================================================== */

/* 1. Base Setup & Reset Streamit Backgrounds */
.mxf-header,
.mxf-header::before,
.mxf-header::after,
.mxf-header .navbar,
.mxf-header .navbar-inner,
.mxf-header .iq-navbar,
.mxf-header .navbar-collapse,
.mxf-header .iq-navbar .navbar-collapse:not(.offcanvas-collapse) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force transparent links box on desktop */
@media (min-width: 1200px) {

    .mxf-header #navbar_main.offcanvas,
    .mxf-header .offcanvas.mobile-offcanvas {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* 2. Header Container & Transparency Trigger */
.mxf-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1080 !important;
    /* Extremely high to beat default theme */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0)) !important;
    transition: background-color 0.4s ease, background-image 0.4s ease;
}

/* Scrolled Solid State */
.mxf-header.scrolled,
.mxf-header.scrolled .navbar,
.mxf-header.scrolled .iq-navbar,
.mxf-header.scrolled .navbar-collapse:not(.offcanvas-collapse) {
    background-color: #141414 !important;
    /* Netflix core dark background */
    background-image: none !important;
}

/* Inner Layout and Spacing */
.mxf-header .navbar-inner {
    padding: 0 4% !important;
    /* Netflix uses ~4% horizontal padding */
    min-height: 68px !important;
    /* Standard premium header height */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 991.98px) {
    .mxf-header .navbar-inner {
        padding: 0 20px !important;
    }
}

/* 3. Logo Alignment & Size */
.mxf-header .navbar-brand {
    margin: 0 35px 0 0 !important;
    /* Space between logo and links */
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.mxf-header .navbar-brand img.logo {
    height: 30px !important;
    /* Proportionate logo size */
    max-height: 30px !important;
    transition: transform 0.2s ease;
}

.mxf-header .navbar-brand:hover img.logo {
    transform: scale(1.03);
}

/* 4. Primary Navigation (Desktop center links) */
.mxf-header .iq-nav-menu {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.mxf-header .iq-nav-menu>li {
    margin: 0 20px 0 0 !important;
    padding: 0 !important;
    border: none !important;
}

.mxf-header .iq-nav-menu>li>a {
    color: #e5e5e5 !important;
    font-size: 14px !important;
    /* Slightly smaller for elegance */
    font-weight: 400 !important;
    /* Regular weight, not bold */
    padding: 10px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    /* Keep text on a single line */
    background: transparent !important;
    border: none !important;
    transition: color 0.3s ease !important;
}

/* Strip out Streamit's active/hover lines and arrows completely */
.mxf-header .iq-nav-menu>li>a::before,
.mxf-header .iq-nav-menu>li>a::after,
.mxf-header .iq-nav-menu .arrow-active,
.mxf-header .iq-nav-menu .arrow-hover,
.mxf-header .iq-nav-menu i.right-icon {
    display: none !important;
}

/* Clean Hover states */
.mxf-header .iq-nav-menu>li>a:hover,
.mxf-header .iq-nav-menu>li.active>a {
    color: #ffffff !important;
    font-weight: 500 !important;
    background: transparent !important;
}

/* 5. Right Panel (Actions: Search, Notifications, Profile, Login) */
.mxf-header .right-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mxf-header .right-panel .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 22px !important;
    /* Consistent spacing between right items */
    margin: 0 !important;
    padding: 0 !important;
}

/* Removed rule hiding right panel on mobile as per user request */

/* Reset button/icon defaults */
.mxf-header .right-panel .btn-icon,
.mxf-header .right-panel .btn-dark,
.mxf-header .right-panel .dropdown-toggle,
.mxf-header .right-panel a {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* Icons styling */
.mxf-header .right-panel .btn-icon i,
.mxf-header .right-panel .btn-dark i {
    font-size: 22px !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mxf-header .right-panel .btn-icon:hover i,
.mxf-header .right-panel .btn-dark:hover i {
    transform: scale(1.1);
}

/* Language Switcher Styling */
.mxf-header .dropdown-language-wrapper .btn-dark {
    font-size: 14px !important;
    font-weight: 500 !important;
    gap: 6px !important;
}

.mxf-header .dropdown-language-wrapper img {
    border: none !important;
    /* Remove borders from flags */
    border-radius: 2px;
}

/* Notification Badge (Netflix Red) */
.mxf-header .header-notification .notification_list {
    position: relative;
    display: flex;
    align-items: center;
}

.mxf-header .header-notification .notification_list .notification-alert {
    background-color: #e50914 !important;
    color: white !important;
    position: absolute;
    top: -4px !important;
    right: -6px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
    border: 1px solid #141414;
    /* Add a tiny dark stroke to separate from icon */
}

/* 6. Premium Dropdown Menus */
.mxf-header .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 2px solid white !important;
    border-radius: 0 !important;
    margin-top: 15px !important;
    /* padding: 10px 0 !important; */
}

.mxf-header .dropdown-menu a,
.mxf-header .dropdown-menu .dropdown-item,
.mxf-header .dropdown-menu .text-body {
    color: #e5e5e5 !important;
    background: transparent !important;
}

.mxf-header .dropdown-menu a:hover,
.mxf-header .dropdown-menu .dropdown-item:hover,
.mxf-header .dropdown-notification .iq-sub-card:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Profile Icon */
.mxf-header .dropdown-user .user-image {
    border-radius: 4px !important;
    width: 32px !important;
    height: 32px !important;
}

/* Primary Action Buttons (Subscribe / Login) */
.mxf-header .subscribe-btn,
.mxf-header .login-btn {
    background-color: #e50914 !important;
    color: white !important;
    border-radius: 3px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
    margin: 0 !important;
}

.mxf-header .subscribe-btn i {
    display: none !important;
    /* Hide crown icon for clean look */
}

.mxf-header .subscribe-btn:hover,
.mxf-header .login-btn:hover {
    background-color: #f40612 !important;
}

/* 7. Mobile Layout Fixes */
/* Ensure left elements align when right is hidden */
.mxf-header .landing-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.mxf-header .landing-header>div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Hamburger clean up - mobile only */
@media (max-width: 1199.98px) {
    .mxf-header .toggle-rounded-btn {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mxf-header .custom-bars .bar {
        background-color: #ffffff !important;
    }
}

/* Elegant Dark Mobile Offcanvas Menu */
@media (max-width: 1199.98px) {
    .mxf-header #navbar_main.mobile-offcanvas {
        background-color: #141414 !important;
        /* Solid dark */
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

.mxf-header #navbar_main.mobile-offcanvas .nav-link {
    color: #e5e5e5 !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; */
}

/* Make offcanvas logo pop against dark background */
.mxf-header #navbar_main.mobile-offcanvas .navbar-brand img {
    /* filter: brightness(0) invert(1) brightness(1.2); */
    /* Force white */
}

/* Mobile Offcanvas Action Buttons Wrapper */
@media (max-width: 1199.98px) {
    .mxf-header .mobile-offcanvas-actions {
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 20px !important;
    }

    .mxf-header .mobile-offcanvas-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Ensure dropdowns inside mobile menu open inline, preventing huge gaps */
.mxf-header .mobile-offcanvas-actions .dropdown-menu {
    position: static !important;
    transform: none !important;
    margin-top: 10px !important;
    float: none !important;
    width: 100% !important;
}

.mxf-header #navbar_main.mobile-offcanvas .nav-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.mxf-header #navbar_main.mobile-offcanvas .sub-menu {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 20px !important;
}

.mxf-header #navbar_main.mobile-offcanvas .sub-menu .nav-link {
    font-size: 15px !important;
    border: none !important;
    color: #b3b3b3 !important;
}

/* Fix mobile menu search bar display issue */
.mxf-header #navbar_main.mobile-offcanvas .search-box,
.mxf-header #navbar_main.mobile-offcanvas .dropdown-search {
    display: none !important;
}

/* 8. Fix Search Box Override */
.mxf-header .search-box .nav-link {
    background: transparent !important;
    /* Remove dark background on search trigger */
    width: auto !important;
    height: auto !important;
}

.mxf-header .search-box .btn-icon {
    width: auto !important;
    height: auto !important;
}

.mxf-header .search-box .iq-search-bar {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 2px solid #ffffff !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.mxf-header .search-box .iq-search-bar input {
    background-color: transparent !important;
    border: none !important;
    color: white !important;
}

.mxf-header .search-box .iq-search-bar input::placeholder {
    color: #8c8c8c !important;
}

/* 9. Global Header Spacing Fix for Internal Pages */
body.internal-page main.flex-fill {
    padding-top: 85px !important;
}