/**
 * Попапы: затемнение .u-body-after + диалог .app-popup
 *
 * JS: класс is-open на span.u-body-after, hidden на .app-popup
 * !important на .is-open — если в теме есть свои правила для .u-body-after
 */

.u-body-after {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 55;
}

.u-body-after.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 55 !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.app-popup[hidden] {
    display: none !important;
}

.app-popup:not([hidden]) {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.app-popup__dialog {
    position: relative;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
}

.app-popup--sm .app-popup__dialog {
    max-width: 490px;
    border-radius: 20px;
}

.app-popup--md .app-popup__dialog {
    max-width: 730px;
    border-radius: 20px;
    padding: 40px 54px 20px;
}

.app-popup--alert .app-popup__dialog {
    max-width: 360px;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
}

.app-popup--alert .ui-popup__title {
    margin-bottom: 12px;
}

.app-popup--alert .ui-popup__message {
    margin-bottom: 24px;
    color: #52525b;
    font-size: 15px;
}

.ui-popup__icon {
    margin-bottom: 16px;
}

.ui-popup__icon--error {
    color: #dc3545;
}

.ui-popup__icon--success {
    color: #28a745;
}

.ui-popup__close {
    position: absolute;
    right: 21px;
    top: 24px;
    display: inline-flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    z-index: 4;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.ui-popup__close .ui-icon {
    fill: #6c757d;
}

.ui-popup__close:hover .ui-icon {
    fill: #333;
}

.ui-popup__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.ui-popup__text {
    margin-bottom: 20px;
}

.ui-popup__box .ui-input:not(:last-child) {
    margin-bottom: 12px;
}

.ui-popup__message {
    text-align: center;
}

@media (max-width: 767.98px) {
    .app-popup:not([hidden]) {
        padding: 0;
    }

    .app-popup--sm .app-popup__dialog,
    .app-popup--md .app-popup__dialog {
        max-width: 100%;
        min-height: 100%;
        border-radius: 0;
    }

    .app-popup--alert .app-popup__dialog {
        max-width: 90%;
        min-height: auto;
        border-radius: 16px;
    }
}