/* Reset stili */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif; /* Piemēro Jost fontu visiem elementiem */
    user-select: none; /* Padara visu tekstu neizvēlāmu */
}

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

/* Konteinera stils */
.forgot-password-container {
    background-color: #1e1e1e; /* Nedaudz gaišāks fons nekā body */
    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 */
}

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

/* Rindkopas stils */
p {
    font-size: 14px;
    color: #d3d3d3; /* Viegli pelēks teksts */
    margin-bottom: 20px;
}

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

/* Ievades lauku stils */
input[type="email"],
input[type="password"], 
input[type="text"] {
    width: 100%;
    padding: 10px 45px 10px 10px; /* Atstarpe ikonai */
    margin-bottom: 10px;
    border: none;
    border-radius: 5px; /* Noapaļoti stūri */
    background-color: #333; /* Tumšs ievades lauka 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 */
    font-family: inherit; /* Piemēro tādu pašu fontu kā vecākam elementam */
    line-height: normal; /* Novērš augstuma izmaiņas */
}

/* Fokusa stils ievades laukiem */
input[type="email"]:focus,
input[type="password"]:focus {
    background-color: #444; /* Nedaudz gaišāks fons fokusā */
    color: #ffffff; /* Balts teksts */
}

/* Stils automātiski aizpildītiem laukiem */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #333 inset; /* Atbilst ievades lauka fona krāsai */
    box-shadow: 0 0 0px 1000px #333 inset; /* Atbilst ievades lauka fona krāsai */
    -webkit-text-fill-color: white; /* Uztur tekstu baltu */
    transition: background-color 5000s ease-in-out 0s; /* Novērš fona krāsas izmaiņas */
}

/* Paroles konteinera stils */
.password-container {
    position: relative;
    width: 100%;
}

/* Paroles redzamības ikonas stils */
.toggle-password {
    position: absolute;
    right: 10px; /* Ikonas novietojums pa labi no ievades lauka */
    top: 43%;
    transform: translateY(-50%); /* Centrē ikonu vertikāli */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Kursora izmaiņa uz rokas ikonu */
    font-size: 18px;
    color: #888; /* Noklusētā ikonas krāsa */
    transition: color 0.3s ease; /* Krāsas maiņas efekts */
}

/* Novērš ikonas izmēra izmaiņas */
.toggle-password i {
    font-size: 18px; /* Fiksēts ikonas izmērs */
    width: 18px;
    height: 18px;
    text-align: center;
    display: inline-block;
}

/* Ikonas hover efekts */
.toggle-password:hover {
    color: #e0e0e0; /* Gaiši pelēka krāsa hover stāvoklī */
}

/* Paroļu prasību stils */
.password-requirements {
    text-align: left;
    font-size: 12px; /* Kompakts fonta izmērs */
    margin-top: -5px; /* Atstarpe no ievades laukiem */
    margin-bottom: 5px; /* Atstarpe starp prasībām un pogu */
    margin-left: 0; /* Izlīdzināšana ar ievades laukiem */
    width: 100%; /* Atbilst ievades lauku 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ēka teksta krāsa */
}

/* Ikonu stils (atzīme un krusts) */
.password-requirements .requirement .icon {
    margin-right: 5px; /* Atstarpe starp ikonu un tekstu */
    color: #ff0000; /* Noklusētā sarkana krāsa neizpildītām prasībām (✘) */
}

/* Zaļa krāsa izpildītām prasībām (✔) */
.password-requirements .requirement.valid .icon {
    color: #4caf50;
}

/* Pogas stils */
.reset-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; /* Noapaļoti stūri */
    cursor: pointer; /* Kursora izmaiņa uz rokas ikonu */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Pārejas efekti */
}

/* Pogas hover efekts */
.reset-button:hover {
    background-color: #e0e0e0; /* Gaiši pelēks fons hover stāvoklī */
    color: #121212; /* Tumšs teksts */
    transform: translateY(-3px); /* Nedaudz pārvieto uz augšu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Viegla ēna */
}

/* Atgriešanās uz pieteikšanās lapas saite */
.back-to-login {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #8e99f3; /* Viegli zila krāsa */
    text-decoration: none; /* Noņem pasvītrojumu */
    transition: color 0.3s ease; /* Krāsas maiņas efekts */
}

/* Saites hover efekts */
.back-to-login:hover {
    color: #ffffff; /* Maina uz baltu krāsu hover stāvoklī */
}

/* Responsīvais stils */
@media (max-width: 480px) {
    .forgot-password-container {
        width: 90%; /* Pielāgots platums mazākiem ekrāniem */
        padding: 20px; /* Pielāgota atstarpe */
    }
}

/* Popup stili */
.popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 5px; /* Noapaļoti stūri */
    font-size: 14px;
    z-index: 1000; /* Novieto virs citiem elementiem */
    animation: fade-in-out 3s; /* Animācija */
    color: #fff; /* Balts teksts */
    text-align: center; /* Centrēts teksts */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Viegla ēna */
}

/* Veiksmīga popup stils */
.popup.success {
    background-color: #4caf50; /* Zaļa krāsa veiksmīgam popup */
}

/* Kļūdas popup stils */
.popup.error {
    background-color: #f44336; /* Sarkana krāsa kļūdas popup */
}

/* Fade-in-out 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);
    }
}