/* Stiluri generale pentru corpul paginii */
body {
    font-family: Arial, sans-serif; /* Font-ul folosit în pagină */
    display: flex; /* Utilizare flexbox pentru aliniere */
    flex-direction: column; /* Elemente dispuse în coloană */
    min-height: 100vh; /* Înălțime minimă de 100% din fereastră */
    align-items: center; /* Aliniere orizontală la centru */
    justify-content: center; /* Aliniere verticală la centru */
    background: linear-gradient(135deg, #6371c7, #55a7e5); /* Gradient de fundal */
    background-repeat: no-repeat; /* Fundalul nu se repetă */
    background-attachment: fixed; /* Fundalul este fixat */
}

/* Stiluri pentru cardul de login */
.card {
    width: 350px; /* Lățimea cardului */
    padding: 30px; /* Spațiu interior */
    border-radius: 20px; /* Margini rotunjite */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Umbră */
    background: linear-gradient(135deg, #e0c3fc, #8ec5fc); /* Gradient pentru card */
}

/* Stiluri pentru grupurile de input */
.input-group {
    margin-bottom: 20px; /* Spațiu între grupuri */
}

/* Stiluri pentru elementele dinaintea inputurilor (icoane) */
.input-group-text {
    background-color: rgba(255, 255, 255, 0.8); /* Fundal semi-transparent */
    border-radius: 5px 0 0 5px; /* Margini rotunjite doar în stânga */
}

/* Stiluri pentru câmpurile de input */
.form-control {
    border-radius: 0 5px 5px 0; /* Margini rotunjite doar în dreapta */
    border: 2px solid #a084e2; /* Bordură colorată */
    padding: 12px; /* Spațiu interior */
}

/* Stiluri pentru câmpurile de input când sunt focusate */
.form-control:focus {
    outline: none; /* Elimină conturul implicit */
    border-color: #6371c7; /* Schimbă culoarea bordurii */
    box-shadow: 0 0 5px rgba(99, 113, 199, 0.5); /* Adaugă o umbră */
}

/* Stiluri pentru butonul de login */
.btn-primary {
    background: linear-gradient(135deg, #6371c7, #55a7e5); /* Gradient pentru buton */
    border: none; /* Elimină bordura implicită */
    border-radius: 8px; /* Margini rotunjite */
    padding: 14px 28px; /* Spațiu interior */
    width: 100%; /* Ocupă toată lățimea disponibilă */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Umbră */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Tranziții pentru efectul hover */
}

/* Stiluri pentru butonul de login la hover */
.btn-primary:hover {
    transform: translateY(-2px); /* Ridică butonul puțin */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); /* Schimbă umbra */
}

/* Stiluri pentru footer */
footer {
    position: fixed; /* Poziționare fixă */
    bottom: 0; /* Poziționat în partea de jos */
    width: 100%; /* Ocupă toată lățimea */
    text-align: center; /* Text centrat */
    background-color: rgba(248, 249, 250, 0.8); /* Fundal semi-transparent */
    padding: 10px 0; /* Spațiu interior */
}

/* Stiluri pentru logo */
.img-fluid {
    margin-bottom: 20px; /* Spațiu sub logo */
/*    max-width: 200px;  Lățimea maximă */
    display: block; /* Afișare ca element block */
    margin-left: auto; /* Centrare orizontală */
    margin-right: auto;
}