/* ===================================
   ANTOLOGA NAVBAR - RESPONSIVE
   =================================== */

/* Container: Full width of the viewport */
.nav-bar-container {
    width: 100vw !important;
    padding: 0 !important;
    height: 6rem !important;
    overflow: visible !important;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
    z-index: 1000;
}

/* Navbar: Flex Layout */
.nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    height: 6rem;
    padding: 0 1.5rem;
}

/* Logo Section */
.nav-bar-logo-container {
    height: auto;
    display: flex;
    align-items: start;
    z-index: 1001;
}

.nav-bar-logo {
    width: 10rem;
    cursor: pointer;
}

/* Desktop Navigation Icons Container */
.nav-bar-icons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 4rem;
    padding-right: 2rem;
}

.nav-bar-icons {
    border-radius: 0.5rem;
    padding: 1rem;
    height: 3rem;
    margin: 0 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--antologa-primary) !important;
}

    .nav-bar-icons:hover {
        color: var(--antologa-white) !important;
        background-color: var(--antologa-dark) !important;
        border-radius: 0.5rem;
    }


/* Dark Mode Override */
.nav-bar.dark-mode .nav-bar-icons {
    color: var(--antologa-white) !important;
    background-color: transparent !important;
}

.nav-bar.dark-mode .nav-bar-icons:hover {
    color: var(--antologa-primary) !important;
    background-color: var(--antologa-white) !important;
    border-radius: 0.5rem;
}

/* Auth Buttons */
.login-signup {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.nav-login-btn {
    width: 9rem;
    color: var(--antologa-white);
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
}



    .nav-login-btn:hover {
        color: var(--antologa-white);
        background-color: var(--antologa-dark) !important;
    }

.nav-sign-up-btn {
    width: 9rem;
    background-color: var(--antologa-primary);
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    color: var(--antologa-white);
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .nav-sign-up-btn:hover {
        color: var(--antologa-white) !important;
        background-color: var(--antologa-dark) !important;
    }

    /* Dark Mode Override */

/* Update this section in navbar.css as well */

.nav-bar.dark-mode .nav-login-btn {
    color: var(--antologa-white) !important;
    background-color: transparent !important; /* Or dark depending on preference */
}

    .nav-bar.dark-mode .nav-login-btn:hover {
        color: var(--antologa-primary) !important;
        background-color: var(--antologa-white) !important;
    }

.nav-bar.dark-mode .nav-sign-up-btn:hover {
    color: var(--antologa-primary) !important;
    background-color: var(--antologa-white) !important;
}




/* ===================================
   MOBILE BOTTOM NAVIGATION (EXPEDIA STYLE)
   =================================== */

/* Mobile Bottom Nav Container */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--antologa-white) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Bottom Nav Items Container */
.bottom-nav-container {
    height: 5rem;
    padding: 0.5rem 0;
    width: 100%;
}

/* Individual Bottom Nav Item */
.bottom-nav-item {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 5rem;
}

    .bottom-nav-item .mud-icon-root {
        color: var(--antologa-dark);
        transition: color 0.2s ease;
    }

    .bottom-nav-item .mud-typography {
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--antologa-dark);
        transition: color 0.2s ease;
        margin-top: 0.25rem;
    }

    /* Active State */
    .bottom-nav-item.active .mud-icon-root {
        color: var(--antologa-primary, #078282);
        border-top: 2px solid var(--antologa-primary);
    }

    .bottom-nav-item.active .mud-typography {
        color: var(--antologa-primary, #078282);
        font-weight: 600;
    }

    /* Hover State */
    .bottom-nav-item:hover .mud-icon-root,
    .bottom-nav-item:hover .mud-typography {
        color: var(--antologa-primary);

    }

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

/* Tablet and Mobile (≤1279pxx) */
@media (max-width: 1279px) {

    .nav-bar-logo {
        width: 8rem;
    }

    .nav-bar-container {
        height: 6rem !important;
    }

    .nav-bar {
        height: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .top-sign-up-btn {
        width: 5rem;
        background-color: var(--antologa-primary);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        color: var(--antologa-white);
        font-size: 0.75rem;
        letter-spacing: 0.05rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .top-login-btn {
        width: 5rem;
        color: var(--antologa-white);
        border-radius: 0.5rem;
        font-size: 0.75rem;
        letter-spacing: 0.05rem;
        cursor: pointer;
        transition: all 0.2s ease;
        align-items: center;
    }

    .login-signup-mobile {
        padding-left: 25vw;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {

    .nav-bar-logo {
        width: 7rem;
    }

    .nav-bar {
        padding: 0 0.75rem;
    }

    .bottom-nav-item {
        max-width: 4rem;
    }

        .bottom-nav-item .mud-typography {
            font-size: 0.6rem;
        }

    .login-signup-mobile {
        padding-left: 15vw;
    }

}