/* =======================================================
    OCCASOR HEADER CSS - FINAL LAYOUT (RESPONSIVE FIX)
    Primary Color: #fa5754
    ======================================================= */

/* --- Variables --- */
:root {
    --primary-color: #fa5754;
    --primary-color-light: #fdeeee; /* Added: Light version for dropdown hover */
    --text-color: #2c3e50; /* Dark color for text and icons */
}

/* --- Header Container & Global Layout (Base/Desktop) --- */
.header-container {
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Use max-width for centering if needed, but padding 0 30px is fine for now */
    padding: 0 30px; 
}

/* --- Logo Styling --- */
.logo-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 180px;
}

.logo-main .logo{
    max-width: 176px;
    width: 100%;
}
.logo-main img {
    max-height: 40px;
    width: auto;
}

/* --- Navigation Links (Desktop) --- */
.nav-links {
    display: flex;
    gap: 25px;
    flex-grow: 1;
    justify-content: center;
    padding: 0 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 5px;
    transition: color 0.2s, border-bottom 0.2s;
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

/* --- Action Items (Right Side Block) --- */
.action-items {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 300px;
    justify-content: flex-end;
}

/* --- Buttons Styling --- */
.btn {
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s, border 0.2s;
    white-space: nowrap;
    line-height: 1.2;
}

.btn-occasor {
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
    border-radius: 25px;
}
.btn-occasor:hover {
    background-color: #e04e4b;
    color: white;
    border: 2px solid var(--primary-color);
}

/* --- Icons & Badges Styling --- */
.icon-with-badge {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-color);
    line-height: 1;
}

.icon-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--primary-color);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    padding: 2px 5px;
    line-height: 1;
    min-width: 10px;
    text-align: center;
    border: 1px solid white;
}

/* --- Logged-in Specific Styles (Legacy/Generic, kept for fallback/non-dropdown elements) --- */
.user-name-link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-color);
}
.logout-link { /* Used in mobile menu and hidden in action-items */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color);
}
.logout-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* ================================================================= */
/* --- USER DROPDOWN & AVATAR STYLING (The new, clean version) --- */
/* ================================================================= */

/* Container for the new dropdown */
.user-dropdown {
    display: flex;
    align-items: center;
    position: relative; /* Ensure dropdown menu positions relative to this */
}

/* The element that triggers the dropdown */
.user-profile-toggle {
    /* Make the whole area look interactive and unified */
    display: flex;
    align-items: center;
    padding: 5px 10px; /* Add padding around the avatar and name */
    border-radius: 20px; /* Make it pill-shaped */
    background-color: transparent;
    transition: background-color 0.2s;
    cursor: pointer;
}

/* Styling for the circular icon container */
.user-profile-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #eee; /* Light gray background for the container/fallback */
    overflow: hidden; /* Crucial: ensures the image stays within the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Removed: font-size, font-weight, text-transform (as we use an image now) */
    transition: all 0.2s;
    margin-right: 8px; /* Space between circle and name */
    border: 2px solid transparent;
}

/* New style for the actual avatar image */
.user-profile-icon .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the circle without stretching */
    display: block;
}

/* Fallback: If no image and showing first initial (less common with the above HTML) */
.user-profile-icon:empty {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* Hover/Active State */
.user-profile-toggle:hover,
.user-dropdown.show .user-profile-toggle {
    background-color: #f0f0f0; /* Subtle background when hovering or open */
}

/* Styling for the user's name link (part of the toggle) */
.desktop-only-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
}

/* Dropdown Menu Customization */
.user-dropdown .dropdown-menu {
    min-width: 220px;
    border-radius: 8px;
    margin-top: 10px; /* Slight separation from the header */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Ensuring Z-index is high enough */
    z-index: 1001; 
}

.user-dropdown .dropdown-header {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    color: #555;
}

.user-dropdown .dropdown-item {
    font-size: 15px;
    padding: 10px 16px;
}

.user-dropdown .dropdown-item:hover {
    background-color: var(--primary-color-light); /* Light hover background */
    color: var(--primary-color);
}

/* ------------------------------- MOBILE MENU SPECIFIC STYLES ----------------------- */

/* Mobile Menu Toggle (Hidden by default) */
.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
}

/* Mobile Navigation Drawer */
.nav-links-mobile {
    display: none; /* Default hidden on desktop */
}

@media (max-width: 768px) {
    .nav-links-mobile {
        position: fixed;
        /* absolute positioning handled by JS or top: 70px as fallback */
        top: 70px; 
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: white;
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        
        /* Animation Properties for Mobile */
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .nav-links-mobile.open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.nav-links-mobile a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: block;
}

.nav-links-mobile .mobile-auth-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.nav-links-mobile .mobile-auth-links a {
    border-bottom: none; /* Remove border for buttons/profile links */
    padding: 10px;
}

.nav-links-mobile .btn-occasor, .nav-links-mobile .btn {
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px; /* Reduced padding as requested */
    background-color: var(--primary-color); /* Ensure background is red */
    color: white !important; /* Ensure text is white */
    font-size: 15px; /* Adjusted font size */
    font-weight: 600; /* Bolder text */
    border-radius: 8px; /* Rounded corners */
    border: none;
    transition: background 0.3s;
}

.nav-links-mobile .btn-occasor:hover, .nav-links-mobile .btn:hover {
    background-color: #e04e4b;
    color: white !important;
}

.nav-links-mobile .logout-link {
    text-align: center;
    color: #dc3545; /* Red for logout */
    display: block;
    margin-top: 10px;
}



/* ... (Keep existing nav-links-mobile a and mobile-auth-links styles) ... */

/* ------------------------------- RESPONSIVENESS (Media Queries) ----------------------- */

/* --- Tablet/Small Desktop (Max 1024px) --- */
@media (max-width: 1024px) {
    /* ... (Keep existing 1024px styles) ... */

    /* Hide the full user name/logout links on tablet to save space */
    .desktop-only-name, /* Targeting the specific class in the dropdown */
    .action-items .logout-link {
        display: none;
    }
    
    /* Ensure the profile icon aligns correctly when the name is hidden */
    .user-profile-toggle .user-profile-icon {
        margin-right: 0;
    }
}


/* --- Mobile (Max 768px) --- */
@media (max-width: 768px) {
    /* Allow header content to wrap so search bar moves to next line */
    .header-content {
        flex-wrap: wrap;
    }

    /* Hide Desktop Navigation */
    .nav-links {
        display: none;
    }

    /* SHOW Search Bar on Mobile, adjust width and order */
    .header-search-bar {
        display: block !important;
        order: 10;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 5px 0 !important;
        flex-basis: 100%;
    }
    .header-search-bar form#header-search-form {
        width: 100%;
    }
    .header-search-bar .input-group {
        width: 100%;
    }

    /* Reset min-widths from desktop */
    .action-items {
        min-width: auto;
        gap: 15px; /* Reduced gap from 20px to 15px for better fit */
        flex-grow: 1; /* Allow it to take available space */
        justify-content: flex-end; /* Align items to the right */
        margin-left: 10px; /* Ensure space from logo */
    }
    
    /* Ensure only icons are shown, hidden text logic handled by desktop-only-name class */
    .action-items .btn, 
    .action-items .theme-btn-one {
        display: none !important;
    }
    .logo-area {
        min-width: auto;
        flex-shrink: 0; /* Prevent logo from shrinking */
    }
    
    .logo-main .logo {
        max-width: 140px; /* Reduce logo size slightly on mobile */
    }
    
    /* Ensure the user profile dropdown aligns properly */
    .user-dropdown .dropdown-menu {
        min-width: 200px !important; 
        width: 220px !important; /* Reduced width */
        max-width: 80vw;
        right: -10px !important; 
        left: auto !important; 
        top: 130% !important;
        margin-top: 5px;
        transform: none !important;
        position: absolute; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        border: none !important;
        max-height: 50vh; /* Significantly reduced height for better mobile fit */
        overflow-y: auto; 
    }
    
    /* Ensure arrow is visible or removed if causing issues */
    .user-dropdown .dropdown-menu::before {
        display: none;
    }
    
    /* Make Notification Dropdown fully responsive and prevent left cutting */
    .notification-dropdown .dropdown-menu {
        /* Reset positioning */
        position: absolute;
        top: 100% !important;
        margin-top: 10px;
        transform: none !important;
        
        /* Width and Alignment */
        width: 280px !important; /* Reduced width slightly */
        max-width: 85vw !important; 
        
        /* Right alignment: align right edge with right edge of bell icon (0), 
           but since icon is small and menu is wide, it goes left. 
           If it cuts on left, we need to shift it RIGHT. */
        right: -70px !important; 
        left: auto !important;

        /* Scrolling and Visibility */
        max-height: 60vh; /* Reduced height to ensure it fits better */
        overflow-y: auto;
        
        /* Visuals */
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        border: none !important;
        border-radius: 8px;
        z-index: 1050;
    }
    
    /* Ensure the 'Hello, Puneet Sharma' header text doesn't cause overflow */
    .user-dropdown .dropdown-header {
        white-space: normal; /* Allow text to wrap if the name is very long */
    }

    /* Hide desktop buttons and authentication links */
    .action-items .theme-btn-one,
    .action-items .user-name-link,
    .action-items .logout-link {
        display: none;
    }

    /* Display the Hamburger Menu Icon */
    .menu-toggle {
        display: block;
        order: 4; /* Place it last on the right */
        margin-left: 10px; /* Extra margin for safe measure */
    }

    /* Ensure dropdown stays an icon only on mobile */
    .user-dropdown .desktop-only-name {
        display: none;
    }
    
    /* Reduce avatar container size on mobile */
    .user-profile-toggle {
        padding: 0; /* Remove toggle padding on mobile to align with icons */
    }
    .user-profile-icon {
        width: 32px; /* Smaller avatar */
        height: 32px;
        margin-right: 0; /* No margin since name is hidden */
        border: 1px solid #ddd; /* Subtle border for visibility */
    }
    
    /* Adjust icon sizes for consistency */
    .icon-with-badge {
        font-size: 18px; /* Slightly smaller icons */
    }
    
    /* Adjust menu toggle size/alignment */
    .menu-toggle {
        font-size: 22px;
        margin-left: 5px; 
    }
}