/* NAVBAR WRAPPER */

.navbar-wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    /* 10px → 0 */
    left: 0;
    display: flex;
    justify-content: center;
    z-index: 1000;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

/* NAVBAR CONTAINER */
.navbar-container {
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-radius: 0;
    padding: 0 clamp(16px, 4vw, 40px);
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}

/* LOGO */

.logo-text{
    font-size:26px;
    font-weight:600;
    color:#222;
    text-decoration:none;
    letter-spacing:1.5px;
    font-family: 'Titillium Web', sans-serif;
    transition:0.3s ease;
}

.logo-text:hover{
    color:#8d2123;
}

/* NAV LINKS */

#navbar{
    display:flex;
    list-style:none;
    gap:clamp(18px, 3vw, 40px);
    margin:0;
    padding:0;
}

#navbar li a{
    text-decoration:none;
    font-weight:600;
    color:#444;
    font-size:16.5px;
    position:relative;
    transition:all 0.25s ease;
    font-family: 'Titillium Web', sans-serif;
}

#navbar li a::after{
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    bottom:-6px;
    left:0;
    background:#8d2123;
    transition:0.3s ease;
}

#navbar li a:hover::after,
#navbar li a.active::after{
    width:100%;
}

/* Hover */

#navbar li a:hover{
    color:#b22222;
}

/* RIGHT ACTIONS */

.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

/* AUTH BUTTON CONTAINER */

#auth-buttons{
    display:flex;
    align-items:center;
    gap:10px;
}

/* remove link default style */

#auth-buttons a{
    text-decoration:none;
    display:flex;
}

/* LOGIN BUTTON */

.login-btn{
    padding:9px 20px;
    border:none;
    outline:none;
    background:white;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    transition:all 0.25s ease;
    border: 1px solid #8D2123;
}

.login-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* REGISTER BUTTON */

.register-btn{
    padding:9px 22px;
    border:none;
    outline:none;
    border-radius:8px;
    background:#2f855a;
    color:white;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.25s ease;
    box-shadow:0 6px 18px rgba(47,133,90,0.35);
}

.login-btn,
.register-btn{
    height:36px;
}

.register-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(47,133,90,0.45);
    background:#2a7a52;
}

/* HAMBURGER */

.hamburger{
    display:none;
    font-size:22px;
    cursor:pointer;
    color:#8d2123;
    min-width:40px;
    min-height:40px;
    align-items:center;
    justify-content:center;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border: none;
    outline: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #444;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

#point{
    margin-top:0;
    background-size:cover;
    background-position:center;
}

/* MOBILE */

@media (max-width:768px){
    .navbar-container{
        height:auto;
        min-height:64px;
        padding:10px 16px;
    }

    #navbar{
        position:absolute;
        top:calc(100% + 10px);
        left:16px;
        right:16px;
        width:auto;
        background:rgba(244,246,251,0.92);
        backdrop-filter:blur(6px);
        border-radius:8px;
        flex-direction:column;
        padding:18px;
        display:none;
        gap:16px;
        box-shadow:0 10px 20px rgba(0,0,0,0.05);
    }

    #navbar.active{
        display:flex;
    }#navbar li a::after{
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    bottom:-6px;
    left:0;
    background:#b22222;
    transition:0.3s;
}

#navbar li a:hover::after{
    width:100%;
}

    .hamburger{
        display:flex;
    }

    .nav-actions{
        gap:8px;
    }

    #auth-buttons{
        gap:8px;
    }

    .login-btn,
    .register-btn{
        width:40px;
        min-width:40px;
        padding:0;
        font-size:0;
        border-radius:8px;
    }

    .login-btn::before{
        content:"\f2f6";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
        font-size:15px;
    }

    .register-btn::before{
        content:"\f234";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
        font-size:15px;
    }

}
/* DROPDOWN */

.dropdown{
    position:relative;
}

/* Dropdown menu container */

.dropdown-menu{
    position:absolute;
    top:50px;
    left:0;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
    border-radius:8px;
    list-style:none;
    padding:10px 0;
    min-width:200px;
    box-shadow:0 15px 30px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all 0.25s ease;
}

/* Dropdown items */

.dropdown-menu li{
    padding:0;
}

.dropdown-menu li a{
    display:block;
    padding:10px 20px;
    text-decoration:none;
    color:#444;
    font-size:15px;
    font-weight:500;
    transition:all 0.2s ease;
}

/* Hover effect */

.dropdown-menu li a:hover{
    background:#f5f7fb;
    color:#8d2123;
}

/* Show dropdown */

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Arrow icon alignment */

.dropdown > a i{
    font-size:12px;
    margin-left:5px;
    transition:0.25s;
}

/* Rotate arrow */

.dropdown:hover > a i{
    transform:rotate(180deg);
}

/* MOBILE FIX */

@media (max-width:768px){

.dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    background:transparent;
    box-shadow:none;
    padding-left:10px;
}

.dropdown-menu li a{
    padding:6px 0;
}

}

/* =========================
   USER PROFILE SECTION
========================= */

.user-profile{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

/* Profile image */

.user-photo{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(0,0,0,0.08);
}

/* Username */

.user-name{
    font-size:14px;
    font-weight:600;
    color:#333;
}

/* Arrow */

.profile-arrow{
    font-size:12px;
    color:#555;
}

/* =========================
   PROFILE DROPDOWN
========================= */

.profile-dropdown{

    position:absolute;

    top:45px;
    right:0;

    background:white;

    border-radius:8px;

    box-shadow:0 10px 25px rgba(0,0,0,0.12);

    min-width:170px;

    display:none;

    flex-direction:column;

    overflow:hidden;

    z-index:2000;
}

@media (max-width:480px){
    .logo-text{
        font-size:21px;
        letter-spacing:0.5px;
    }

    .theme-toggle{
        width:36px;
        height:36px;
        border-radius:8px;
    }

    .user-name,
    .profile-arrow{
        display:none;
    }
}

/* dropdown links */

.profile-dropdown a,
.profile-dropdown button{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 16px;

    text-decoration:none;

    border:none;

    background:none;

    font-size:14px;

    color:#333;

    cursor:pointer;

    width:100%;
}

/* hover */

.profile-dropdown a:hover,
.profile-dropdown button:hover{

    background:#f5f7fb;

}

/* show dropdown */

.user-profile.active .profile-dropdown{
    display:flex;
}