/* ============================================
   NAVBAR REDESIGN V3.0 - AUTHENTICATED STATE
   FIXED: Guest buttons hiding when authenticated
   ============================================ */

/* ============================================
   MAIN NAVBAR STRUCTURE
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;
    z-index: 120;
    background-color: var(--primary-dark, #151d23);
    min-height: 64px;
}

/* ============================================
   LOGO (LEFT SIDE)
   ============================================ */
.nav-logo {
    position: absolute;
    left: 40px;
    display: flex;
    align-items: center;
}

.nav-logo a {
    display: flex;
    align-items: center;
}

.nav-logo img {
    height: 40px;
    width: auto;
    transition: opacity 0.3s ease;
}

.nav-logo img:hover {
    opacity: 0.8;
}

/* ============================================
   NAVIGATION LINKS (CENTER)
   ============================================ */
.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-family: var(--font-nav);
    font-weight: var(--weight-nav);
    font-size: 25px;
    color: var(--nav-text-light, #ffffff);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

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

/* ============================================
   RIGHT SIDE CONTROLS
   ============================================ */
.nav-right {
    position: absolute;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ============================================
   LANGUAGE SELECTOR (ALWAYS VISIBLE)
   ============================================ */
.language-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.language-dropdown-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.language-dropdown-button:hover {
    opacity: 0.8;
}

.language-dropdown-button span {
    font-family: var(--font-nav);
    font-weight: var(--weight-nav);
    font-size: 20px;
    color: var(--nav-text-light, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.language-dropdown-button img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.language-selector.open .language-dropdown-button img {
    transform: rotate(180deg);
}

/* Language Dropdown Menu */
.language-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--primary-dark, #151d23);
    border-radius: 4px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
}

.language-dropdown-menu.hidden {
    display: none;
}

.language-dropdown-menu a {
    font-family: var(--font-nav);
    font-weight: var(--weight-nav);
    font-size: 18px;
    color: var(--primary-green, #95ff50);
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.language-dropdown-menu a:hover {
    color: var(--nav-text-light, #ffffff);
    background-color: rgba(149, 255, 80, 0.1);
}

/* ============================================
   GUEST BUTTONS (NOT AUTHENTICATED)
   FIXED: Proper hiding when authenticated
   ============================================ */
#guest-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* CRITICAL FIX: Hide guest buttons when user is authenticated */
#guest-buttons.hidden,
#guest-buttons[style*="display: none"] {
    display: none !important;
}

/* Sign Up Button */
.nav-button-signin {
    position: relative;
    width: 100px;
    height: 35px;
    background-color: var(--primary-dark, #151d23);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    overflow: hidden;
}

.nav-button-signin::before {
    content: '';
    position: absolute;
    inset: 2px;
    background-color: var(--primary-dark, #151d23);
    clip-path: polygon(8.5% 0%, 100% 0%, 91.5% 100%, 0% 100%);
    transition: all 0.3s ease;
    z-index: 0;
}

.nav-button-signin::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--primary-green, #95ff50);
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    z-index: -1;
}

.nav-button-signin:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.nav-button-signin:hover::before {
    background-color: var(--primary-green, #95ff50);
}

.nav-button-signin:hover span {
    color: var(--primary-dark, #151d23);
}

.nav-button-signin span {
    font-family: var(--font-button-standard);
    font-weight: var(--weight-button-standard);
    font-size: 20px;
    color: var(--primary-green, #95ff50);
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.nav-button-signin .glow-line {
    position: absolute;
    bottom: 4px;
    left: 8%;
    width: 0;
    height: 2px;
    background: var(--primary-green, #95ff50);
    transition: width 0.3s ease;
    z-index: 2;
}

.nav-button-signin:hover .glow-line {
    width: 84%;
}

/* Log In Button */
.nav-button-login {
    position: relative;
    width: 100px;
    height: 35px;
    background-color: var(--primary-green, #95ff50);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
}

.nav-button-login:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.nav-button-login span {
    font-family: var(--font-button-standard);
    font-weight: var(--weight-button-standard);
    font-size: 20px;
    color: var(--primary-dark, #151d23);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ============================================
   AUTHENTICATED NAV (LOGGED IN)
   FIXED: Proper display control
   ============================================ */
#authenticated-nav {
    display: none;
    align-items: center;
    gap: 15px;
    position: relative;
}

/* Show when authenticated - IMPORTANT */
#authenticated-nav.show {
    display: flex !important;
}

/* CRITICAL FIX: Ensure authenticated nav is hidden when not authenticated */
#authenticated-nav:not(.show) {
    display: none !important;
}

/* ============================================
   NOTIFICATION BUTTON (GREEN BELL)
   ============================================ */
.notification-btn {
    width: 45px;
    height: 45px;
    background-color: var(--primary-green, #95ff50);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.notification-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(149, 255, 80, 0.3);
}

.notification-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ============================================
   USER PROFILE IMAGE BUTTON (GRAY CIRCLE)
   FIXED: Profile placeholder fallback
   ============================================ */
.user-profile-image-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #6b7280;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-image-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* FIXED: Placeholder gray circle when no image */
.profile-image[src*="profile-placeholder"],
.profile-image[src=""],
.profile-image:not([src]) {
    background-color: #6b7280;
}

/* ============================================
   USER DROPDOWN MODAL (WHITE BACKGROUND)
   ============================================ */
.user-dropdown-modal {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.user-dropdown-modal.show {
    display: block;
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Header - Display Name (Adgasima Font) */
.dropdown-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #f9fafb;
}

.user-display-name {
    font-family: 'Agdasima', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    display: block;
}

/* Dropdown Items (Settings, Logout) */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
}

.dropdown-item:hover {
    background: #f3f4f6;
}

.dropdown-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.dropdown-item:hover .dropdown-icon {
    opacity: 1;
}

.dropdown-item span {
    color: #374151;
    font-weight: 500;
}

/* Logout Item (Red Color) */
.logout-item {
    color: #dc2626;
}

.logout-item:hover {
    background: #fee2e2;
}

.logout-item span {
    color: #dc2626;
}

.logout-item .dropdown-icon {
    filter: brightness(0) saturate(100%) invert(17%) sepia(89%) saturate(5424%) hue-rotate(355deg) brightness(92%) contrast(89%);
}

/* Dropdown Divider */
.dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 4px 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .navbar {
        padding: 12px 20px;
    }
    
    .nav-logo {
        left: 20px;
    }
    
    .nav-logo img {
        height: 35px;
    }
    
    .nav-right {
        right: 20px;
        gap: 12px;
    }
    
    .notification-btn,
    .user-profile-image-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        gap: 15px;
    }
    
    .nav-logo img {
        height: 30px;
    }
    
    .nav-links a {
        font-size: 20px;
    }
    
    .nav-right {
        gap: 10px;
    }
    
    .notification-btn,
    .user-profile-image-btn {
        width: 38px;
        height: 38px;
    }
    
    .language-dropdown-button span {
        font-size: 18px;
    }
}