/* Styles for the new User Profile Dropdown in the frontend header.
  These are based on your admin panel's classes.
*/

/* Main container for the profile dropdown */
.topbar-right .user-dropdown {
    position: relative; /* Essential for positioning the menu */
    cursor: pointer;
}

/* The clickable part: user image and name */
.topbar-right .user-profile-img {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between image and name */
}

/* Make the user image round */
.topbar-right .user-profile-img img {
    border-radius: 50%;
}

/* Style the user's name */
.topbar-right .user-profile-img span {
    font-weight: 600;
    font-size: 15px;
    color: #fff; /* Or match your existing header text color */
    display: flex; /* Aligns chevron icon */
    align-items: center;
    gap: 5px;
}

/* The hidden menu itself */
.topbar-right .user-menus {
    position: absolute;
    top: calc(100% + 15px); /* Position it below the header with a 15px gap */
    right: 0;
    min-width: 240px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
    border: 1px solid #eee; /* Light border */
    z-index: 1000;
    overflow: hidden; /* Ensures rounded corners on children */

    /* Hide the menu by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Start slightly lower for a "pop" effect */
    transition: all 0.2s ease-in-out;
}

/* This 'show' class will be added by JavaScript to display the menu.
  It targets both the user menu AND the existing post dropdown.
*/
.topbar-right .user-menus.show,
.topbar-right .post-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Menu Item Styling --- */

/* Reset list styles */
.topbar-right .user-menus ul {
    list-style: none;
    padding: 8px 0; /* Vertical padding inside the menu */
    margin: 0;
}

/* Individual list items */
.topbar-right .user-menus li a {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between icon and text */
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Hover effect for menu items */
.topbar-right .user-menus li a:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* Style the icons (FontAwesome 'i' and image 'img') */
.topbar-right .user-menus li a i,
.topbar-right .user-menus li a .user_menu_i {
    width: 18px; /* Gives icons a consistent space */
    text-align: center;
    color: #555;
}

.topbar-right .user-menus li a:hover i,
.topbar-right .user-menus li a:hover .user_menu_i {
    color: #111;
}