@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif; /* Dodana czcionka Poppins */
    background: 
      linear-gradient(64deg, rgba(110, 180, 255, 0.6), rgba(40, 180, 255, 0.6) 46%, rgba(55, 140, 260, 0.7)),
      url('https://www.icloud.com/system/icloud.com/current/wallpaper.svg') no-repeat center center fixed;
    background-size: cover; /* Umożliwia rozciąganie tła */
    min-height: 100vh; /* Upewnia się, że tło zajmuje co najmniej wysokość widoku */
    position: relative; /* Ważne dla pozycjonowania */
    z-index: -1; /* Tło pod treścią */
    display: flex; /* Umożliwia wyśrodkowanie kontenera */
    align-items: center; /* Wyśrodkowanie w pionie */
    justify-content: center; /* Wyśrodkowanie w poziomie */
}

.login-container {
    background-color: white;
    padding: 30px; /* Zwiększenie wypełnienia */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px; /* Zwiększenie maksymalnej szerokości */
    width: 90%; /* Umożliwia responsywność na urządzeniach mobilnych */
    margin: 0 auto; /* Wyśrodkowanie kontenera */
    position: relative; /* Umożliwia z-index, gdyby był potrzebny */
    z-index: 1; /* Wyższy z-index, aby kontener był nad tłem */
}

.logo {
    width: 100%; /* Szerokość logo */
    max-width: 300px; /* Maksymalna szerokość logo */
    height: auto; /* Wysokość automatyczna */
    border-radius: 200px; /* Zaokrąglenie rogów logo */
    margin: 0 auto 15px auto; /* Wyśrodkowanie i odstęp poniżej logo */
    display: block; /* Sprawia, że logo jest elementem blokowym */
}

.instruction {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.login-form {
    display: flex;
    flex-direction: column;
}

label {
    margin: 5px 0;
}

.pin-container {
    display: flex;
    justify-content: center; /* Wyśrodkowanie pól PIN */
    margin-bottom: 15px;
}

.pin-container input {
    width: 50px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    font-family: 'Poppins', sans-serif; /* Zmiana czcionki w polach pinu */
    margin: 0 5px; /* Odstęp między polami PIN */
}

.input-container {
    position: relative;
    margin-bottom: 15px; /* Odstęp między polami */
}

.input-container input {
    width: 100%;
    padding: 8px; /* Zmniejszenie paddingu dla mniejszych pól na mobilnych */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px; /* Dostosowanie rozmiaru czcionki */
    font-family: 'Poppins', sans-serif; /* Zmiana czcionki w polach wejściowych */
}

.input-container i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

.login-button {
    padding: 12px; /* Zwiększenie paddingu przycisku */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 25px; /* Zaokrąglenie przycisku */
    cursor: pointer;
    margin-top: 15px;
    font-size: 16px; /* Ustalanie rozmiaru czcionki przycisku */
    transition: background-color 0.3s; /* Płynna zmiana koloru tła */
}

.login-button:hover {
    background-color: #0056b3;
}


   
/* Styl dla urządzeń mobilnych */
@media (max-width: 480px) {
    .login-container {
        padding: 20px; /* Mniejsze wypełnienie dla urządzeń mobilnych */
        max-width: 80%; /* Dostosowanie maksymalnej szerokości kontenera */
        max-width: 300px; /* Zwiększenie maksymalnej szerokości */
    }

    .input-container input,
    .input-container select {
        height: 25px; /* Zmniejszenie wysokości pól na urządzenia mobilne */
        padding: 5px; /* Dostosowanie wypełnienia */
        font-size: 14px; /* Mniejsza wielkość czcionki */
    }

    .pin-container input {
        width: 35px; /* Dostosowanie szerokości pól PIN na urządzenia mobilne */
        padding: 5px; /* Mniejszy padding w polach PIN */
        font-size: 14px; /* Zmniejszenie rozmiaru czcionki */
        margin: 0 3px; /* Mniejszy odstęp między polami PIN */
    }

    .instruction {
        font-size: 13px; /* Mniejszy rozmiar instrukcji */
    }

    .logo {
        width: 50%; /* Zmniejszenie szerokości logo na urządzeniach mobilnych */
    }
}

/* Stylizowanie komunikatów błędów w div#altarium-login-result */
#altarium-login-result {
    font-size: 1rem;
    font-weight: 600;
    color: red;
    text-align: center;
    margin-top: 1em;
    padding: 0.5em 1em;
    border: 1px solid red;
    border-radius: 5px;
    background-color: #ffe6e6; /* Jasne tło dla wyróżnienia błędu */
    display: none; /* Ukryty, gdy nie ma komunikatu */
}

/* Wyświetlanie komunikatu, gdy jest tekst */
#altarium-login-result:empty {
    display: none;
}

/* Responsywność na urządzenia mobilne */
@media (max-width: 600px) {
    #altarium-login-result {
        font-size: 0.9rem; /* Mniejsza czcionka na telefonach */
        padding: 0.5em;
    }
}