/* Ekrany logowania, drugiego skladnika i resetu hasla.

   Styl przeniesiony z projektu ekranu powitalnego aplikacji mobilnej: pola bez ramki
   z czerwona linia pod spodem, pigulkowate przyciski, znaczek dostawcy w bialym kole.
   Kolory sa te same, co w style.css - czerwien #db0200 i granat #0b1e32 - wiec strona
   logowania nie rozjezdza sie z reszta serwisu.

   Logo nie jest tu powtarzane: siedzi juz w pasku nawigacji nad trescia. */

.auth-page {
    padding: 48px 16px 72px;
}

/* Wlasna szerokosc zamiast .container, ktory ma w style.css sztywne 1100px. */
.auth-card {
    max-width: 420px;
    margin: 0 auto;
}

    .auth-card h1 {
        color: #0b1e32;
        font-size: 1.75rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 12px;
    }

.auth-lead {
    color: #17293c;
    text-align: center;
    margin-bottom: 28px;
}

/* Pole: sama czerwona linia pod spodem. Etykieta jest ukryta wizualnie (zostaje dla
   czytnikow ekranu), a jej role widoczna przejmuje placeholder - dokladnie jak w projekcie. */
.auth-field {
    margin-bottom: 26px;
}

    .auth-field input {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #db0200;
        border-radius: 0;
        background: transparent;
        padding: 6px 2px 10px;
        font-family: inherit;
        font-size: 1.05rem;
        color: #0b1e32;
        -webkit-appearance: none; /* iOS inaczej dorysowuje pola wlasna ramka */
    }

        .auth-field input:focus {
            outline: none;
            border-bottom-width: 2px;
            padding-bottom: 9px; /* linia grubieje, wiec pole nie moze podskoczyc */
        }

        /* W projekcie etykieta jest ciemna, nie szara - stad nadpisanie domyslnej przezroczystosci. */
        .auth-field input::placeholder {
            color: #0b1e32;
            opacity: 1;
        }

.auth-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 15px 24px;
    /* Bez tego przegladarka rysuje <button> swoim wlasnym krojem zamiast krojem strony. */
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
}

/* Przycisk bywa też odnośnikiem (wylogowano, brak dostepu). */
a.auth-btn,
a.auth-btn:hover,
a.auth-btn:focus {
    text-decoration: none;
}

.auth-btn-primary {
    background: #db0200;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(219, 2, 0, .25);
}

    .auth-btn-primary:hover,
    .auth-btn-primary:focus {
        background: #b80200;
        color: #ffffff;
    }

.auth-or {
    display: flex;
    align-items: center;
    margin: 30px 0 20px;
    color: #0b1e32;
}

    .auth-or::before,
    .auth-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #db0200;
    }

    .auth-or::before {
        margin-right: 16px;
    }

    .auth-or::after {
        margin-left: 16px;
    }

/* Przycisk dostawcy: granatowa pigulka ze znaczkiem w bialym kole po prawej stronie. */
.auth-btn-provider {
    /* Dostawcow bywa dwoch, jeden pod drugim - bez odstepu zlewaja sie w jeden ksztalt.
       Nie da sie tego zrobic selektorem sasiedztwa: miedzy przyciskami stoja jeszcze
       formularze i znaczniki script. Z .auth-links ponizej margines sie skleja, wiec
       odstep pod ostatnim przyciskiem sie nie zmienia. */
    margin-bottom: 12px;
    position: relative;
    background: #0b1e32;
    color: #ffffff;
    padding-right: 64px;
    box-shadow: 0 8px 16px rgba(11, 30, 50, .20);
}

    .auth-btn-provider:hover,
    .auth-btn-provider:focus {
        background: #17293c;
        color: #ffffff;
    }

.auth-provider-icon {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-provider-icon svg {
        width: 22px;
        height: 22px;
    }

/* Znaczek Apple jest jednokolorowy i optycznie lzejszy od kolorowego Google przy tej samej
   wysokosci - stad dwa piksele wiecej, zeby oba przyciski wygladaly na rowne. */
.auth-provider-icon-apple svg {
    width: 24px;
    height: 24px;
    margin-top: -2px;
}

/* Zgoda na regulamin - jedyne pole na tych ekranach z widoczna etykieta. */
.auth-consent {
    margin: 6px 0 26px;
    font-size: .9rem;
    color: #17293c;
}

    .auth-consent label {
        font-weight: 400;
        margin: 0;
    }

    .auth-consent input {
        margin-right: 8px;
    }

    .auth-consent a {
        color: #0b1e32;
        text-decoration: underline;
    }

.auth-links {
    text-align: center;
    margin-top: 26px;
}

/* Ponowne wyslanie kodu wymaga POST-a, wiec jest przyciskiem - ma wygladac jak odnosnik. */
.auth-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: #0b1e32;
    text-decoration: underline;
    cursor: pointer;
}

    .auth-links a {
        color: #0b1e32;
        text-decoration: underline;
    }

.auth-note {
    text-align: center;
    color: #6c757d;
    font-size: .875rem;
    margin-top: 18px;
}

.auth-alert {
    border-radius: 12px;
}