/*
 * Style, których nie ma w makietach.
 *
 * Wszystko tutaj jest świadomym dodatkiem — albo odtwarza stary wzorzec, który
 * musi jeszcze chwilę pożyć, albo obsługuje ekran dorobiony poza makietami.
 * Każda reguła ma powód i warunek usunięcia.
 */

/* --------------------------------------------------------------------------
 * Modal ze starego szablonu.
 * Makiety używają natywnego <dialog>; te trzy widoki jeszcze nie:
 * registration/default.php (#wait-modal z TransactionLink) oraz
 * profile/use-voucher.php (widok bez makiety, na zaślepce).
 * Do usunięcia, gdy przejdą na wzorzec z makiet.
 * -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.open {
    display: flex;
}

.modal-bg {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 60%);
}

.modal-container {
    position: relative;
    z-index: 1;
    width: min(32rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    border-radius: 1rem;
    background: #fff;
    text-align: center;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* --------------------------------------------------------------------------
 * Ekran nieaktywnego linku do zmiany hasła.
 *
 * Od 1024px makieta chowa separator (.password-flow-layout ... .separator),
 * więc przycisk i sekcja pod nim stykały się bez odstępu. Marginesy na samym
 * separatorze nic nie dają, bo ma display:none — odstęp musi nieść sekcja.
 * Poniżej 1024px separator jest widoczny i sam rozdziela te bloki.
 * -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .reset-invalid__actions {
        margin-top: 48px;
    }
}

/* --------------------------------------------------------------------------
 * Potwierdzenie w polu komunikatu formularza.
 *
 * Makiety mają tylko wariant błędu (.form-field__error), bo ich formularze
 * nie rozmawiają z backendem i nie mają czego potwierdzać. Na stronie
 * dodawania kodów ten sam element niesie też odpowiedź pozytywną z API.
 * -------------------------------------------------------------------------- */

.form-field__error--success {
    color: var(--color-success);
}