html, body {
    margin: 0;
    padding: 0;
}
/* ===== GLOBAL RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;

    min-height: 100dvh;   /* important */
    background: 
        linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
        url("bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== MOVING STARS ===== */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("https://www.transparenttextures.com/patterns/stardust.png");
    animation: moveStars 80s linear infinite;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

@keyframes moveStars {
    from { transform: translate(0, 0); }
    to { transform: translate(-600px, -600px); }
}

/* ===== FLOATING MOUNTAINS ===== */
.mountains {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: url("bg.jpg") no-repeat center bottom;
    background-size: cover;
    animation: floatMountains 6s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes floatMountains {
    from { transform: translateY(0px); }
    to { transform: translateY(15px); }
}

/* ===== LOGIN WRAPPER ===== */
.login-wrapper {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: 20px;
}

/* ===== LOGIN CARD ===== */
.login-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 25px;

    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

    color: white;
    text-align: center;
}

/* ===== GLOW BORDER ===== */
.login-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 28px;
    background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc);
    background-size: 300% 300%;
    animation: glowBorder 6s linear infinite;
    z-index: -1;
}

@keyframes glowBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== FORM ===== */
.form-group {
    margin-bottom: 22px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus {
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

/* Remove fixed widths */
#email,
#password {
    width: 100%;
}

/* ===== PASSWORD GROUP ===== */
.password-group {
    position: relative;
}

.password-group input {
    padding-right: 45px;
}

#togglePassword {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* ===== OPTIONS ===== */
.options {
    margin-bottom: 22px;
    font-size: 14px;
}

/* ===== BUTTON ===== */
#loginBtn {
    width: 100%;
    padding: 14px;
    border-radius: 35px;
    border: none;
    background: white;
    color: #5f2c82;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

#loginBtn:hover {
    transform: scale(1.05);
}

/* ===== REGISTER ===== */
.register-text {
    margin-top: 25px;
    font-size: 14px;
}

.register-text span {
    cursor: pointer;
    font-weight: bold;
    color: #00ffcc;
}

/* ===== CUSTOM DROPDOWN ===== */
.custom-select {
    position: relative;
    cursor: pointer;
}

.select-selected {
    padding: 14px;
    border-radius: 35px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
    color: #00ffcc;
    font-weight: bold;
}

.select-options {
    position: absolute;
    top: 110%;
    width: 100%;
    background: rgba(15,15,30,0.9);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    display: none;
    flex-direction: column;
}

.select-options div {
    padding: 10px;
}

.select-options div:hover {
    background: rgba(0,255,204,0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    html { font-size: 14px; }
}

@media (max-width: 480px) {
    .login-card {
        padding: 25px;
        border-radius: 20px;
    }
}