/* @title Header */
/* @help This is the main header section for the images */

#header {
    background-color: #333333;
    color: #FFFFFF;
    height: 40px;
    position: fixed;
    width: 100%;
    z-index: 200;
}

/* @title Header Links */
/* @help Header text URL */
#header a {
    text-transform: capitalize;
    text-decoration: none;
    color: #FFFFFF;
}

/* @title Header Link Hover */
/* @help Header text URL hover */
#header.login {
    background-color: rgba(0, 0, 0, 0.6);
}

#header_content {
    height: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.jlogo {
    position: relative;
    top: 0;
    width:auto;
    max-height:62px;
}

#main_logo {
    float: left;
    vertical-align: middle;

    cursor: pointer;
}

/* @title Main Menu */
/* @help Main Menu */
#main_menu {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    font-size: 16px;
    padding-right: 12px;
}

#add_to_cart_success {
    float: left;
    position: absolute;
    margin: 0 auto;
    background-color: #FFCC5B;
    border: 1px solid #999999;
    padding: 7px;
    font-size: 14px;
    border-radius: 3px;
}

#search_input {
    color: #DDDDDD;
    font-style: italic;
    text-transform: capitalize;
}

/* --- FIX FOR STACKED LOGO/HOME ICONS --- */
#header .desk a {
    display: inline-block;
    vertical-align: middle;
}

/* --- MEGA MENU & USER MENU STYLES (v4 - FINAL) --- */

/* This is the main <ul> container */
.header-nav ul {
    display: flex;
    align-items: center;  /* This vertically centers all the <li> items */
    height: 40px;       /* Make the nav list fill the header height */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Make all top-level <li> items fill the height */
.header-nav > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%; /* Make the <li> fill the 40px height */
}

/* * FIX 1: VERTICAL ALIGNMENT
 * This targets all top-level links (<a>) AND text (<span>)
 * and uses line-height to center them perfectly.
 */
.header-nav > ul > li > a,
.header-nav > ul > li > span {
    display: block;     /* Use block */
    height: 40px;         /* Set explicit height */
    padding: 0 0.75rem;   /* 12px padding */
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    line-height: 40px;  /* This centers text vertically */
}

.header-nav > ul > li > span {
    cursor: pointer;
}

/* Add hover effect */
.header-nav > ul > li:hover > a,
.header-nav > ul > li:hover > span {
    background-color: #444;
}

/* This part applies the alignment fix to the ICONS */
.header-nav .icon-link {
    padding: 0 0.5rem; /* 8px padding for icons */
    line-height: 40px;  /* This centers the icon box */
}

/* This new rule centers the <img> tag INSIDE the icon box */
.header-nav .icon-link img {
    vertical-align: middle;
}

/* ADD THIS NEW RULE */
.user-menu > ul > li {
    position: relative;
}
/* --- Mega Menu (Media, Licensing) --- */
.mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%; /* 40px */
    left: 50%;
    
    /* THIS IS THE UPDATED LINE: */
    transform: translateX(calc(-50% - 5px)); 
    
    background-color: #1e1e1e;
    border-top: 2px solid #F5B90B; /* Note: I corrected a typo here from F59E0B */
    padding: 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    width: max-content;
    z-index: 100;
}

.mega-menu-item:hover .mega-menu-panel {
    display: flex;
}

.mega-menu-column {
    padding: 0 1.5rem;
}

.mega-menu-column:not(:last-child) {
    border-right: 1px solid #333;
}

.mega-menu-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #F59E0B;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.mega-menu-link {
    display: block;
    padding: 0.5rem 0 !important;
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.2s ease;
    height: auto !important;
    font-size: 14px;
    line-height: 1.5; 
    text-align: left; /* ADD THIS LINE */
}

.mega-menu-link:hover {
    color: #ffffff;
    background-color: transparent !important;
}


/* --- User Menu (ACP, User Profile) --- */
.user-menu > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #1e1e1e;
    border-top: 2px solid #F59E0B;
    padding: 0.5rem 0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    width: 200px;
    z-index: 9999;
}

.user-menu:hover > ul {
    display: block;
}

.user-menu > ul a {
    display: block; 
    padding: 0.75rem 1.5rem;
    color: #d1d5db;
    white-space: nowrap;
    width: 100%;
    height: auto !important;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5; 
    background-color: #1e1e1e; 
    text-align: left; /* ADD THIS LINE */
}

.user-menu > ul a:hover {
    background-color: #333 !important;
    color: #fff;
}

/* * FIX 2: SUB-MENU HOVER
 * This is the "fly-out" style you wanted, which also
 * fixes the background color issue.
 */
.user-menu ul ul {
    position: absolute;
    left: -200px;
    top: 0;
    margin-top: -0.5rem; /* Align with parent */
    display: none;
    background-color: #1e1e1e; /* Main background */
    border-left: 1px solid #333;
    border-top: 2px solid #F59E0B;
    width: 200px;
    padding: 0.5rem 0;
    z-index: 101; /* <-- ADD THIS LINE TO FIX IT */
}

.user-menu li:hover > ul {
    display: block;
}

/* --- SEARCH FORM STYLES --- */
#header .jrSearch_form {
    line-height: 1; /* Prevent extra line height */
}

/* Style the search input field */
#header .form_text {
    height: 30px; /* Make it a bit shorter than the 40px header */
    vertical-align: middle; /* Center it */
    box-sizing: border-box; /* Include padding in height */
    padding: 0 8px; /* Add some internal padding */
    border: 1px solid #555;
    background-color: #111;
    color: #eee;
}

/* Hide the search button */
#header .form_button {
    display: none;
}
/* --- MOBILE FULL-WIDTH DROPDOWN (v2 - Stronger) --- */
@media (max-width: 767px) {

    /* 1. Target the main dropdown panel (Admin & Profile) */
    .user-menu > ul {
        width: 100vw !important; /* Force 100% width */
        position: fixed !important; /* Force position */
        top: 40px !important;    /* Force position */
        left: 0 !important;      /* Force position */
        left: auto !important;  /* Force position */
        
        border-radius: 0 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    }

    /* 2. Target the sub-menus (like "System Tools") */
    .user-menu ul ul {
        position: relative !important; /* Force stacking */
        width: 100% !important;        
        left: auto !important;         
        top: auto !important;          
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        background-color: #2a2a2a !important;
    }

    /* 3. Style the sub-menu links */
    .user-menu ul ul a {
        padding-left: 2.5rem !important; 
        background-color: #2a2a2a !important; 
    }
    
    .user-menu ul ul a:hover {
        background-color: #444 !important;
    }
}