* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif; /* Piemēro Jost fontu visā dokumentā */
    user-select: none; /* Padara visu tekstu neizvēlamu */
}

body {
    background-color: #121212; /* Tumšs fons */
    color: #e0e0e0; /* Gaiši pelēks teksts */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Pilns ekrāna augstums */
}

.signup-container {
    background-color: #1e1e1e; /* Nedaudz gaišāks nekā pamata fons */
    padding: 40px;
    width: 300px;
    border-radius: 10px; /* Noapaļoti stūri */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Viegla ēna */
    text-align: center; /* Centrēts teksts */
}

h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #ffffff; /* Balts teksts */
}


form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrē ievades laukus */
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px; /* Noapaļoti stūri */
    background-color: #333; /* Tumšs ievades lauku fons */
    color: white; /* Balts teksts */
    font-size: 16px;
    outline: none; /* Noņem noklusēto kontūru */
    transition: background-color 0.3s ease, color 0.3s ease; /* Pārejas efekti */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    background-color: #444; /* Nedaudz gaišāks fons, kad lauks ir fokusā */
    color: #ffffff; /* Saglabā baltu tekstu */
}


.password-container {
    position: relative;
    width: 100%; /* Pārliecinās, ka ievades lauks aizņem visu platumu */
}


.password-container input[type="password"] {
    width: 100%;
    padding: 10px 45px 10px 10px; /* Pielāgots atkāpe ikonai */
    border: none;
    border-radius: 5px;
    background-color: #333; /* Tumšs ievades lauku fons */
    color: white;
    box-sizing: border-box;
    outline: none;
    font-family: inherit; /* Pārliecinās, ka fonts atbilst citiem ievades laukiem */
    font-size: inherit; /* Mantotais fonta izmērs, lai izvairītos no neatbilstības */
    line-height: normal; /* Pārliecinās, ka līnijas augstums ir konsekvents */
}


.toggle-password {
    position: absolute;
    right: 10px; /* Izkārto ikonu pa labi no ievades lauka */
    top: 47%; /* Centrē ikonu vertikāli */
    transform: translateY(-60%); /* Pielāgots vertikālais izkārtojums */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Maina kursoru uz rādītāju */
    font-size: 18px;
    color: #888; /* Noklusētā ikonas krāsa */
    transition: color 0.3s ease; /* Pārejas efekts */
}


.toggle-password i {
    font-size: 18px; /* Fiksē ikonas izmēru */
    width: 18px;
    height: 18px;
    text-align: center;
    display: inline-block;
}


.toggle-password:hover {
    color: #e0e0e0; /* Gaiši pelēks krāsa, kad pele ir virs ikonas */
}


.password-requirements {
    text-align: left;
    font-size: 12px; /* Kompakts fonta izmērs */
    margin-top: -5px; /* Tāda pati atkāpe kā iepriekš */
    margin-bottom: 5px; /* Samazina atstarpi starp prasībām un pogu */
    margin-left: 0; /* Izlīdzina ar ievades laukiem */
    width: 100%; /* Atbilst ievades lauka platumam */
}

.password-requirements .requirement {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 12px; /* Mazāks fonta izmērs */
    color: #d3d3d3; /* Noklusētā pelēkā teksta krāsa */
}


.password-requirements .requirement .icon {
    margin-right: 5px; /* Atstarpe starp ikonu un tekstu */
    color: #ff0000; /* Noklusētā sarkanā krāsa nederīgajiem (✘) */
}


.password-requirements .requirement.valid .icon {
    color: #4caf50; /* Zaļa krāsa derīgajiem (✔) */
}


.signup-button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #e0e0e0; /* Gaiši pelēks teksts */
    background: transparent; /* Caurspīdīgs fons */
    border: 2px solid #e0e0e0; /* Gaiši pelēka apmale */
    border-radius: 5px;
    cursor: pointer; /* Maina kursoru uz rādītāju */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    margin-top: 5px; /* Pielāgo augšējo atkāpi, lai aizvērtu atstarpi */
}

.signup-button:hover {
    background-color: #e0e0e0; /* Gaiši pelēks fons, kad pele ir virs pogas */
    color: #121212; /* Tumšs teksts */
    transform: translateY(-3px); /* Neliela kustība uz augšu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Viegla ēna */
}


.back-to-login {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #8e99f3; /* Nenozīmīga zila krāsa */
    text-decoration: none; /* Noņem pasvītrojumu */
    transition: color 0.3s ease; /* Pārejas efekts */
}

.back-to-login:hover {
    color: #ffffff; /* Maina uz baltu, kad pele ir virs saites */
}


@media (max-width: 480px) {
    .signup-container {
        width: 90%; /* Pielāgo platumu mazākiem ekrāniem */
        padding: 20px; /* Pielāgo atkāpi */
    }
}


.error-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff4d4d; /* Sarkanā krāsa kļūdu ziņojumam */
    color: #fff; /* Balts teksts */
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ēna */
    font-size: 14px;
    z-index: 1000; /* Pārliecinās, ka ziņojums ir virs citiem elementiem */
    animation: fade-in-out 3s; /* Animācija */
}


@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
    10%, 90% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}