/* Atiestata noklusējuma margin un padding visiem elementiem un nodrošina vienotu kastes izmēru aprēķinu */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Nodrošina, ka padding un border nepalielina elementa kopējo izmēru */
}

/* Stilizē body (galveno lapas sadaļu) */
body {
    display: flex; /* Izmanto flexbox, lai centrētu saturu */
    justify-content: center; /* Centrē saturu horizontāli */
    align-items: center; /* Centrē saturu vertikāli */
    min-height: 100vh; /* Nodrošina, ka lapas augstums ir vismaz 100% no skatloga augstuma */
    background-color: #f4f4f9; /* Gaiši pelēka fona krāsa */
    font-family: Arial, sans-serif; /* Norāda fontu, ko izmantot visā lapā */
}

/* Konteiners pieteikšanās formai */
.login-container {
    width: 320px; /* Formas platums */
    padding: 30px; /* Iekšējā atstarpe */
    background-color: #fff; /* Baltas krāsas fons */
    border-radius: 15px; /* Noapaļoti stūri */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Viegls ēnojums, kas piešķir 3D efektu */
    text-align: center; /* Centrē tekstu konteinerī */
}

/* Attēla stilizēšana formā */
.login-container img {
    max-width: 100%; /* Nodrošina, ka attēls neiziet ārpus konteinera platuma */
    margin-bottom: 20px; /* Apakšējā atstarpe no nākamā elementa */
}

/* Galvenes sekcija (piemēram, virsraksts) */
.header {
    color: #ff8a42; /* Oranža krāsa */
    margin-bottom: 20px; /* Atstarpe zem galvenes */
}

/* Galvenes virsraksts */
.header h1 {
    font-size: 32px; /* Liels fonta izmērs */
    font-weight: bold; /* Padara tekstu treknrakstā */
}

/* Teksta ievades lauki (lietotājvārds un parole) */
input[type="text"],
input[type="password"] {
    width: 100%; /* Ievades lauks aizņem visu pieejamo platumu */
    padding: 10px; /* Iekšējā atstarpe */
    margin: 10px 0; /* Atstarpes starp laukiem */
    border: 1px solid #ddd; /* Pelēka apmale */
    border-radius: 5px; /* Noapaļoti stūri */
    font-size: 16px; /* Vidēja izmēra fonts */
}

/* Stilizē pogu */
button {
    width: 100%; /* Poga aizņem visu pieejamo platumu */
    padding: 12px; /* Iekšējā atstarpe */
    margin-top: 15px; /* Atstarpe virs pogas */
    background-color: #ff8a42; /* Oranža fona krāsa */
    color: #fff; /* Balta teksta krāsa */
    font-size: 16px; /* Vidēja izmēra fonts */
    font-weight: bold; /* Padara tekstu treknrakstā */
    border: none; /* Noņem apmali */
    border-radius: 20px; /* Noapaļoti stūri */
    cursor: pointer; /* Maina kursoru uz pointeri, lai norādītu, ka poga ir klikšķināma */
    transition: background-color 0.3s ease; /* Nodrošina gludu pāreju, mainot pogas krāsu */
}

/* Kad lietotājs uzbrauc ar peli uz pogas, tā maina krāsu */
button:hover {
    background-color: #ff7a30; /* Tumšāka oranža krāsa */
}

/* Pielāgota SweetAlert2 poga */
.custom-swal-button {
    background-color: #ff8a42; /* Oranža poga */
    color: #fff; /* Baltas krāsas teksts */
    font-size: 16px; /* Vidēja izmēra fonts */
    font-weight: bold; /* Padara tekstu treknrakstā */
    border: none; /* Noņem apmali */
    border-radius: 20px; /* Noapaļoti stūri */
    padding: 10px 20px; /* Iekšējā atstarpe */
    cursor: pointer; /* Maina kursoru uz pointeri */
    transition: background-color 0.3s ease; /* Gluda pāreja, mainot fonu */
}

/* Kad lietotājs uzbrauc ar peli uz SweetAlert2 pogas */
.custom-swal-button:hover {
    background-color: #ff7a30; /* Tumšāka oranža krāsa */
}