/* Fix for Header Icons and Layout */

/* ===== LOGO & SYSTEM ICONS REPOSITIONING ===== */
.header-logo-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.logo-sub-icons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 2px !important;
    padding-left: 4px !important;
}

.main-center-logo .albaspace-img {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
}

.logo-sub-icons img {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.logo-sub-icons img:hover {
    opacity: 1;
}

.header-logo-icon img {
    width: 28px !important;
    height: 28px !important;
}

/* Hide original AI/Alien in the right switch to avoid duplicates */
.top-lang-switch .ai-widget-toggle,
.top-lang-switch .alien-dropdown-container {
    display: none !important;
}

/* ===== DESKTOP LAYOUT (1024px and above) ===== */
@media (min-width: 1024px) {
    /* Universal Header Container */
    .site-header {
        height: auto !important; /* Changed from 80px to auto to allow dropdown overflow */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 50 !important; /* Let shared z-index fixes manage dropdown stacking */
        overflow: visible !important;
        min-height: 80px !important; /* Maintain minimum visual height */
    }

    .header-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important; /* Changed from 100% to auto */
        max-width: 100% !important;
        padding: 0 20px !important;
        gap: 20px !important;
        position: relative !important;
        z-index: 50 !important; /* Keep header context stable for dropdown fix layers */
        overflow: visible !important;
    }

    /* Prevent overflow on flex items */
    .logo-sub-icons,
    .main-center-logo,
    .header-inner .main-nav,
    .header-social {
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    /* ORDERING */
    .logo-sub-icons {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    .main-center-logo {
        order: 2 !important;
        margin-left: 10px !important;
        margin-right: auto !important; /* Push nav to the right */
        display: flex !important;
        align-items: center !important;
    }

    /* Reduce logo size */
    .main-center-logo .albaspace-img {
        height: 33px !important;
        max-height: 33px !important;
        width: auto !important;
    }

    /* NAVIGATION */
    .header-inner .main-nav {
        order: 3 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important; /* Allow growing */
        gap: 15px !important; /* Base gap */
        position: relative !important;
        z-index: 51 !important; /* Keep nav above header content while shared fixes handle final layering */
        overflow: visible !important;
    }

    .header-inner .main-nav .dropdown {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        height: auto !important; /* Changed from 100% to auto */
        overflow: visible !important; /* Ensure dropdowns are visible */
        z-index: 51 !important; /* Keep dropdown parent above nav siblings */
    }

    /* Dropdown positioning */
    .header-inner .main-nav .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important; /* Let dropdown-fix-final.css override with higher value */
        visibility: hidden !important;
        pointer-events: none !important;
        display: block !important;
        background: #111827; /* Default dark */
        border: 1px solid #1e293b;
        min-width: 200px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.8);
        padding: 8px 0;
        margin-top: 5px;
        opacity: 0 !important; /* Add opacity for smooth transitions */
        transition: visibility 0.2s ease, opacity 0.2s ease !important;
        border-radius: 8px !important; /* Add border radius */
        transform: none !important; /* No transform to avoid stacking context */
    }
    
    /* Show dropdown on hover */
    .header-inner .main-nav .dropdown:hover .dropdown-menu,
    .header-inner .main-nav .dropdown.active .dropdown-menu {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important; /* Full opacity on hover */
    }
    
    .header-inner .main-nav .dropdown-menu a {
        display: block;
        padding: 12px 20px;
        color: #e2e8f0;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
        z-index: 99999 !important; /* Ensure links are clickable */
    }
    
    .header-inner .main-nav .dropdown-menu a:hover {
        background: rgba(0, 194, 255, 0.1);
        color: #ffffff;
        padding-left: 24px;
    }

    /* SOCIAL */
    .header-social {
        order: 4 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
    }

    .header-social .social-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .header-social a img {
        width: 18px !important;
        height: 18px !important;
    }

    .top-lang-switch {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .menu-toggle {
        display: none !important;
    }

    /* MEDIA QUERIES FOR FINE TUNING */
    
    /* 1280px (Laptop) */
    @media (min-width: 1280px) {
        .header-inner { gap: 30px !important; padding: 0 40px !important; }
        .header-inner .main-nav { gap: 25px !important; }
        .main-nav a { font-size: 14px !important; }
    }

    /* 1366px (Large Laptop) */
    @media (min-width: 1366px) {
        .header-inner { max-width: 1320px !important; margin: 0 auto !important; }
        .header-inner .main-nav { gap: 30px !important; }
    }

    /* 1920px (Desktop) */
    @media (min-width: 1920px) {
        .header-inner { max-width: 1800px !important; }
        .main-nav a { font-size: 16px !important; }
        .header-social { gap: 20px !important; }
    }
}

/* ===== MOBILE LAYOUT (max-width: 1023px) ===== */
@media (max-width: 1023px) {
    /* Prevent horizontal scrolling globally */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header {
        background: rgba(2, 6, 23, 0.95) !important;
        position: relative !important;
        z-index: 50 !important; /* Reduced to let dropdown-fix-final.css manage z-index */
        height: auto !important;
        min-height: 100px !important;
    }

    .header-inner {
        flex-wrap: wrap !important;
        gap: 5px !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        height: auto !important;
    }

    /* 1. TOP LINE: Logo, Social Icons, Lang Switch */
    
    /* Logo on the left */
    .logo-sub-icons {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
    }

    /* Ensure alien icon is visible on mobile */
    .alien-dropdown-container {
        display: flex !important;
        align-items: center !important;
    }

    /* Center Logo (if visible, but usually we want it in flow or hidden on mobile if too big, 
       but user didn't ask to hide it. Let's keep it but ensure it doesn't break layout) 
       Actually, standard mobile header usually has logo. 
       Let's put social and lang on the RIGHT side of the top line. */
    
    .main-center-logo {
        display: flex !important;
        order: 2 !important; /* Place on the second line */
        flex: 0 0 100% !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .header-social {
        order: 1 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important; /* Force row */
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
        width: auto !important;
    }

    /* Ensure Social and Lang are in one line */
    .header-social .social-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        order: 1 !important; /* Social first */
    }

    .header-social .top-lang-switch {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        order: 2 !important; /* Lang second */
    }

    /* Move cart icon to logo icons on mobile */
    .header-social .top-lang-switch .header-cart-link {
        display: none !important; /* Hide from lang switch on mobile */
    }

    /* Add cart icon to logo-sub-icons on mobile using CSS */
    .logo-sub-icons::after {
        content: ''; /* Empty, icon will be moved via JS or displayed via flex */
    }

    /* Position cart icon next to alien icon */
    .header-cart-link {
        display: none !important; /* Hide in header-social on mobile */
    }

    /* Create clone of cart in logo area for mobile - will use flexbox positioning */
    .mobile-cart-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 8px !important;
    }

    /* 2. SECOND LINE: Navigation */
    .header-inner .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 3 !important; /* Force to next line */
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 5px !important;
        justify-content: space-between !important;
        flex: 0 0 100% !important;
        position: relative !important;
        z-index: 51 !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    /* Hide scrollbar for cleaner look */
    .header-inner .main-nav .dropdown {
        display: inline-flex !important;
        position: relative !important;
        z-index: 52 !important;
        overflow: visible !important;
    }

    .header-inner .main-nav .dropdown-menu {
        position: fixed !important; /* Change from absolute to fixed for better mobile handling */
        top: auto !important;
        left: auto !important;
        transform: none !important; /* Remove transform to avoid stacking context issues - JavaScript will handle positioning */
        width: 80% !important;
        max-width: 300px !important;
        background: rgba(17, 24, 39, 0.95) !important;
        border: 1px solid rgba(0, 194, 255, 0.3) !important;
        border-radius: 12px !important;
        padding: 15px !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: none !important;
        flex-direction: column !important;
        gap: 10px !important;
        backdrop-filter: blur(10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    .header-inner .main-nav .dropdown.active .dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .header-inner .main-nav .dropdown-menu a {
        display: block !important;
        padding: 12px 20px !important;
        color: #e2e8f0 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        text-align: center !important;
        border-radius: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .header-inner .main-nav .dropdown-menu a:last-child {
        border-bottom: none !important;
    }
    
    .header-inner .main-nav .dropdown-menu a:hover {
        background: rgba(0, 194, 255, 0.1) !important;
        color: #ffffff !important;
        transform: scale(1.05) !important;
    }

    .header-inner .main-nav a, 
    .header-inner .main-nav .dropdown-trigger {
        display: inline-flex !important;
        padding: 6px 4px !important; /* Minimal padding */
        border: none !important; /* Remove border */
        border-radius: 0 !important; /* Remove radius */
        background: transparent !important; /* Remove background */
        font-size: 11px !important; 
        white-space: nowrap !important;
        color: #ffffff !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important; 
        text-transform: uppercase !important; /* Ensure uppercase */
        font-weight: 600 !important; /* Make text bolder */
    }

    .header-social .social-row {
        display: flex;
        gap: 8px;
    }

    .header-social a img {
        width: 14px !important;
    }
}

/* ===== CART BADGE STYLES (NEW) ===== */
.header-cart-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.header-cart-count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background-color: #00c2ff !important;
    color: white !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 10 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ===== ALIEN MENU CENTERING (NEW) ===== */
#alienMenu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999999 !important;
    box-shadow: 0 0 100px rgba(0,0,0,0.9), 0 0 30px rgba(0,194,255,0.2) !important;
    width: 200px !important;
    text-align: center;
    background: rgba(2, 6, 23, 0.98) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 191, 255, 0.3) !important;
    display: none;
    flex-direction: column !important;
    gap: 15px !important;
}

#alienMenu .alien-menu-item {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    background-color: #00BFFF !important; /* Deep Sky Blue */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 191, 255, 0.2) !important;
    text-align: center !important;
    border: none !important;
}

#alienMenu .alien-menu-item:hover,
#alienMenu .alien-menu-item:focus {
    background-color: #009ACD !important; /* Darker Blue on hover */
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.6) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
}

/* Ensure social icons and langs are always flex row as requested */
.header-social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Center align vertically */
    justify-content: flex-end;
    gap: 12px !important;
    flex-wrap: wrap !important; /* Allow wrapping on very small screens */
}

.social-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    order: 2 !important; /* Place social icons after lang switch (in the corner) */
}

.top-lang-switch {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: center;
    order: 1 !important; /* Place lang switch before social icons */
}

/* Ensure icons are small enough to fit in one line */
.header-social a img {
    width: 16px !important;
    height: 16px !important;
}

/* Override previous mobile styles if needed to keep the column layout or switch to row?
   User didn't specify, but usually header is compact on mobile.
   I'll keep column for consistency if space permits, or let them wrap.
*/

/* ===== MOBILE HEADER - CART ICON FIX ===== */
@media (max-width: 1024px) {
    /* Move the cart icon to absolute top-left */
    .header-cart-link {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        margin: 0 !important;
        z-index: 10005 !important; /* Higher than menu toggle or logo */
    }

    /* Shift the logo/left icons to make space for the cart */
    .logo-sub-icons {
        margin-left: 40px !important;
    }
}