@layer components {

    /* Auth popups */
    .popup-overlay {
        position: fixed;
        inset: 0;
        z-index: 20000;
        pointer-events: none;
    }

    .popup-overlay.is-open {
        pointer-events: auto;
    }

    .popup {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        padding: var(--space-20);
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility .18s ease;
    }

    .popup[hidden] {
        display: none;
    }

    .popup.show {
        opacity: 1;
        visibility: visible;
    }

    .popup::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--color-bg-overlay);
        backdrop-filter: blur(.35rem);
        -webkit-backdrop-filter: blur(.35rem);
    }

    .popup__wrapper {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--space-16);
        width: min(31rem, 100%);
        max-height: calc(100vh - (var(--space-20) * 2));
        overflow-y: auto;
        padding: var(--space-24);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface);
        color: var(--color-text);
        box-shadow: 0 1.5rem 4rem var(--color-shadow-modal);
    }

    .popup__header {
        position: absolute;
        top: var(--space-18);
        left: var(--space-24);
        right: var(--space-24);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 0;
        pointer-events: none;
    }

    .popup__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-40);
        height: var(--space-40);
        padding: 0;
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-round);
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        pointer-events: auto;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }

    .popup__btn[hidden] {
        display: none;
    }

    .popup__btn--close {
        margin-left: auto;
    }

    .popup__btn:hover,
    .popup__btn:focus-visible,
    .popup__icon:hover,
    .popup__icon:focus-visible {
        outline: none;
        background: var(--color-bg-surface-alt);
    }

    .popup__btn-icon,
    .popup__icon-svg,
    .popup__check-icon {
        display: block;
        width: var(--space-10);
        height: var(--space-10);
        fill: currentColor;
    }

    .popup__btn--back .popup__btn-icon {
        width: var(--space-12);
        height: var(--space-12);
    }

    .popup__icon-svg {
        width: var(--space-16);
        height: var(--space-16);
    }

    .popup__btn--back:hover,
    .popup__btn--back:focus-visible,
    .popup__btn--close:hover,
    .popup__btn--close:focus-visible {
        border-color: var(--color-border-medium);
        color: var(--color-text);
    }

    .popup__section[hidden] {
        display: none;
    }

    .popup__section {
        padding-top: var(--space-56);
        font-size: 1.1rem;
    }

    .popup__form {
        display: grid;
        gap: var(--space-18);
    }

    .popup__title {
        margin: 0;
        font-size: 1.65rem;
        line-height: var(--leading-title);
    }

    .popup__field {
        display: grid;
        gap: var(--space-8);
    }

    .popup__label {
        font-size: .9625rem;
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
    }

    .popup__input {
        width: 100%;
        height: var(--space-46);
    }

    .popup__input-wrap {
        position: relative;
    }

    .popup__input-wrap .popup__input {
        padding-right: var(--space-56);
    }

    .popup__icon {
        position: absolute;
        top: 50%;
        right: var(--space-6);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-36);
        height: var(--space-36);
        padding: 0;
        border: 0;
        border-radius: var(--radius-round);
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .popup__message {
        padding: var(--space-12);
        border-radius: var(--radius-corner-m);
        font-size: .9625rem;
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-ui);
    }

    .popup__message.error {
        border: var(--border-width-hairline) solid var(--color-danger);
        background: var(--color-danger-ring);
        color: var(--color-danger);
    }

    .popup__message.success {
        border: var(--border-width-hairline) solid var(--color-success);
        background: var(--color-bg-success-soft);
        color: var(--color-success);
    }

    .popup__error {
        color: var(--color-danger);
        font-size: .9625rem;
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-ui);
    }

    .popup__input.invalid,
    .popup__check-input.invalid + .popup__check .popup__check-box {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .1875rem var(--color-danger-ring);
    }

    .popup__input.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .1875rem var(--color-danger-ring);
    }

    .popup__check-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .popup__check {
        display: flex;
        align-items: center;
        gap: var(--space-10);
        cursor: pointer;
    }

    .popup__check-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--space-24);
        width: var(--space-24);
        height: var(--space-24);
        border: var(--border-width-hairline) solid var(--color-brand-primary);
        border-radius: var(--radius-corner-m);
        background: var(--color-bg-surface);
        color: var(--color-text-inverse);
    }

    .popup__check-icon {
        opacity: 0;
    }

    .popup__check-input:checked + .popup__check .popup__check-box {
        background: var(--color-brand-primary);
    }

    .popup__check-input:checked + .popup__check .popup__check-icon {
        opacity: 1;
    }

    .popup__check-input:focus-visible + .popup__check .popup__check-box {
        outline: var(--border-width-default) solid var(--input-border-focus);
        outline-offset: var(--space-2);
    }

    .popup__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--space-40);
        border-radius: var(--radius-corner);
        background: var(--color-brand-primary);
        color: var(--color-text-inverse);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
        cursor: pointer;
    }

    .popup__submit:hover,
    .popup__submit:focus-visible {
        outline: none;
        background: var(--color-brand-primary-hover);
    }

    .popup__submit[disabled] {
        cursor: wait;
        opacity: .7;
    }

    .popup__note {
        margin: 0;
        color: var(--color-text-muted);
        font-size: .9625rem;
        line-height: var(--leading-ui);
    }

    .popup__link {
        color: var(--color-link);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        cursor: pointer;
    }

    .popup__link:hover,
    .popup__link:focus-visible {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

    @media (max-width: 36rem) {
        .popup {
            align-items: center;
            padding: var(--space-12);
        }

        .popup__wrapper {
            width: 100%;
            max-height: calc(100vh - (var(--space-12) * 2));
            padding: var(--space-20);
        }
    }
}