#login-container {
position: relative;
}

#login-button {
cursor: pointer;
position: relative;
z-index: 10;
}

/* Popup Styling */
#login-popup {
position: absolute;
top: 100%;
right: 0;
margin-top: 0.4rem;
width: 220px;
background: var(--bright-color);
border: 1px solid var(--primary-color);
border-radius: var(--standard-radius);
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
padding: var(--standard-pad);
z-index: 1000;
font-size: var(--text-normal);
}

/* Inputs */
#login-popup input[type="text"],
#login-popup input[type="password"] {
width: 100%;
margin-bottom: 0.7rem;
padding: 0.4rem 0.5rem;
border-radius: var(--standard-radius);
border: 1px solid #ccc;
font-size: 1rem;
transition: border 0.2s ease;
}
#login-popup input[type="text"]:focus,
#login-popup input[type="password"]:focus {
border-color: var(--primary-color);
outline: none;
}

/* Submit Button */
#login-popup button[type="submit"] {
width: 100%;
background-color: var(--primary-color);
color: var(--bright-color);
border: none;
border-radius: var(--standard-radius);
padding: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
#login-popup button[type="submit"]:hover {
background-color: var(--secondary-hover-color);
transform: translateY(-1px);
}

#forgot-password-link{
}