* {
    box-sizing: border-box;
}

:root{
    --bg:#0f111a;
    --surface:#1a1d28;
    --primary:#995af2;
    --text:#f0f1f5;
    --muted:#7b879d;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Rajdhani",sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:100vh;
    padding:24px 16px;
    width:100%;
}

.container{
    width:min(420px, 100%);
    background:var(--surface);
    padding:40px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    margin:auto 0;
}

h1{
    font-family:"Orbitron";
    margin-bottom:10px;
}

p{
    color:var(--muted);
    margin-bottom:30px;
}

/* FORM LAYOUT */

#signupForm{
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* INPUTS */

.container input{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:none;
    background:#10131d;
    color:white;
}

input:focus{
    outline:none;
}

/* PASSWORD FIELD */

.password-field{
    position:relative;
    width:100%;
}

.password-field input{
    padding-right:40px;
}

.toggle-password{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    user-select:none;
    opacity:0.7;
}

.toggle-password:hover{
    opacity:1;
}

/* PHONE INPUT */

.iti{
    width:100%;
}

.iti input{
    width:100%;
    background:#10131d;
    color:white;
    padding-left:85px !important;
}

.iti__flag-container{
    position:absolute;
    left:0;
    top:0;
    height:100%;
}

.iti__selected-country{
    margin-right:8px;
}

/* DROPDOWN */

.iti__country-list{
    background:#1a1d28;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    outline:none;
}

/* SEARCH BAR */

.iti__search-input{
    background:#10131d;
    color:white;
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:10px 12px;
    border-radius:6px 6px 0 0;
}

.iti__search-input::placeholder{
    color:var(--muted);
}

.iti__search-input:focus{
    outline:none;
    box-shadow:none;
}

/* HOVER */

.iti__country:hover{
    background:rgba(153,90,242,0.15);
}

/* SCROLLBAR */

.iti__country-list::-webkit-scrollbar{
    width:8px;
}

.iti__country-list::-webkit-scrollbar-track{
    background:#0f111a;
}

.iti__country-list::-webkit-scrollbar-thumb{
    background:#995af2;
    border-radius:10px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover{
    background:#b07cff;
}

/* FIREFOX */

.iti__country-list{
    scrollbar-width:thin;
    scrollbar-color:#995af2 #0f111a;
}

/* BUTTON */

button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:var(--primary);
    color:white;
    font-weight:700;
    cursor:pointer;
}

button:hover{
    opacity:.9;
}

/* LINKS */

.switch{
    text-align:center;
    margin-top:20px;
    color:var(--muted);
}

.switch a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

/* ERROR */

.error{
    color:#ff5c5c;
    display:none;
    margin-top:10px;
}

@media (max-width: 540px){
    body{
        align-items:flex-start;
        padding:20px 12px;
    }

    .container{
        padding:24px 18px;
        border-radius:12px;
    }

    .toggle-password{
        right:10px;
    }
}