/*
 * Общие модальные окна приложения.
 *
 * Используется для:
 *
 * - информационных сообщений;
 * - подтверждения действий;
 * - ошибок;
 * - перехода к тарифам;
 * - жалоб;
 * - блокировки пользователей.
 */


/* =========================================================
   Блокировка прокрутки страницы
   ========================================================= */

body.modal-open {
    overflow: hidden;
    touch-action: none;
}


/* =========================================================
   Затемнение
   ========================================================= */

.modal-overlay {
    position: fixed;
    z-index: 3000;

    inset: 0;

    display: none;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    padding:
        max(
            16px,
            env(safe-area-inset-top, 0px)
        )
        max(
            16px,
            env(safe-area-inset-right, 0px)
        )
        max(
            16px,
            env(safe-area-inset-bottom, 0px)
        )
        max(
            16px,
            env(safe-area-inset-left, 0px)
        );

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        var(--overlay-bg);

    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);

    overscroll-behavior: contain;
}


.modal-overlay[aria-hidden="false"] {
    display: flex;
}


.modal-overlay[hidden] {
    display: none !important;
}


/* =========================================================
   Содержимое
   ========================================================= */

.modal-content {
    position: relative;

    width: min(
        100%,
        440px
    );

    max-height:
        calc(
            100dvh
            - max(
                32px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            - max(
                32px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
        );

    padding: 24px;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        var(--surface);

    color:
        var(--text);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--muted) 24%,
            transparent
        );

    border-radius:
        var(
            --radius,
            16px
        );

    box-shadow:
        var(--shadow-md);

    animation:
        modal-content-enter
        0.18s ease-out;
}


.modal-content h2,
.modal-content h3 {
    margin:
        0
        42px
        14px
        0;

    color:
        var(--accent);

    font-size:
        clamp(
            1.15rem,
            4vw,
            1.4rem
        );

    line-height: 1.25;

    overflow-wrap: anywhere;
}


.modal-content p {
    margin:
        0
        0
        16px;

    color:
        var(--text);

    font-size: 0.96rem;
    line-height: 1.5;

    white-space: pre-line;
    overflow-wrap: anywhere;
}


.modal-content label {
    display: block;

    margin-bottom: 6px;

    color:
        var(--text);

    font-size: 0.92rem;
    font-weight: 600;
}


.modal-content input,
.modal-content select,
.modal-content textarea {
    width: 100%;

    min-height: 44px;

    padding: 11px 12px;

    box-sizing: border-box;

    background:
        var(--bg);

    color:
        var(--text);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--muted) 45%,
            transparent
        );

    border-radius:
        var(
            --radius-sm,
            10px
        );

    font: inherit;
}


.modal-content textarea {
    min-height: 110px;

    resize: vertical;
}


.modal-content input::placeholder,
.modal-content textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--muted) 84%,
            transparent
        );
}


.modal-content input:focus-visible,
.modal-content select:focus-visible,
.modal-content textarea:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 52%,
            transparent
        );

    outline-offset: 2px;

    border-color:
        var(--accent);
}


/* =========================================================
   Кнопка закрытия
   ========================================================= */

.modal-close {
    position: absolute;

    top: 10px;
    right: 10px;

    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color:
        var(--muted);

    font-family: inherit;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        transform 0.12s ease;
}


.modal-close:hover {
    color:
        var(--text);

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 88%,
            transparent
        );
}


.modal-close:active {
    transform: scale(0.92);
}


.modal-close:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 65%,
            transparent
        );

    outline-offset: 2px;
}


/* =========================================================
   Действия
   ========================================================= */

.modal-actions {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.modal-actions .btn {
    flex: 1 1 0;

    min-width: 0;
    min-height: 44px;
}


#modal-ok-btn,
#modal-tariffs-btn {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;
}


#modal-tariffs-btn {
    margin-top: 10px;

    text-align: center;
}


#modal-tariffs-btn[hidden] {
    display: none !important;
}


#universal-modal-cancel[hidden] {
    display: none !important;
}


/* =========================================================
   Причины жалобы
   ========================================================= */

.report-reasons label {
    display: flex;

    min-height: 44px;

    align-items: center;
    gap: 10px;

    margin: 0;

    padding: 9px 10px;

    box-sizing: border-box;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 72%,
            transparent
        );

    border:
        1px solid
        transparent;

    border-radius:
        var(
            --radius-sm,
            10px
        );

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        background-color 0.16s ease;
}


.report-reasons label:hover {
    background:
        var(--surface-hover);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 35%,
            transparent
        );
}


.report-reasons input[type="radio"] {
    width: 20px;
    height: 20px;

    min-width: 20px;
    min-height: 20px;

    margin: 0;

    accent-color:
        var(--accent);
}


.report-reasons label:has(
    input:checked
) {
    border-color:
        var(--accent);

    background:
        color-mix(
            in srgb,
            var(--accent) 12%,
            var(--surface-hover)
        );
}


/* =========================================================
   Состояния
   ========================================================= */

.modal-content .error-message,
.modal-content .field-error {
    color:
        var(--danger);
}


.modal-content .success-message {
    color:
        var(--accent);
}


.modal-content button:disabled,
.modal-content .btn:disabled {
    opacity: 0.58;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   Мобильные устройства
   ========================================================= */

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;

        padding:
            max(
                12px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            0
            0;
    }


    .modal-content {
        width: 100%;
        max-width: none;

        max-height:
            calc(
                100dvh
                - max(
                    12px,
                    env(
                        safe-area-inset-top,
                        0px
                    )
                )
            );

        padding:
            22px
            18px
            calc(
                18px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        border-right: 0;
        border-bottom: 0;
        border-left: 0;

        border-radius:
            20px
            20px
            0
            0;

        animation:
            modal-sheet-enter
            0.2s ease-out;
    }


    .modal-content h2,
    .modal-content h3 {
        margin-right: 40px;
    }


    .modal-actions {
        flex-direction: column;
    }


    .modal-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   Очень маленькие экраны
   ========================================================= */

@media (max-width: 360px) {
    .modal-content {
        padding-right: 14px;
        padding-left: 14px;
    }


    .modal-content h2,
    .modal-content h3 {
        font-size: 1.12rem;
    }
}


/* =========================================================
   Низкий landscape-экран
   ========================================================= */

@media (
    max-width: 768px
) and (
    orientation: landscape
) and (
    max-height: 500px
) {
    .modal-overlay {
        align-items: center;

        padding:
            10px
            max(
                10px,
                env(
                    safe-area-inset-right,
                    0px
                )
            )
            10px
            max(
                10px,
                env(
                    safe-area-inset-left,
                    0px
                )
            );
    }


    .modal-content {
        width: min(
            100%,
            620px
        );

        max-height:
            calc(
                100dvh
                - 20px
            );

        border:
            1px solid
            color-mix(
                in srgb,
                var(--muted) 24%,
                transparent
            );

        border-radius:
            var(
                --radius,
                16px
            );
    }
}


/* =========================================================
   Анимации
   ========================================================= */

@keyframes modal-content-enter {
    from {
        opacity: 0;

        transform:
            translateY(8px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes modal-sheet-enter {
    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   Отключение анимации
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .modal-content {
        animation: none;
    }


    .modal-close,
    .report-reasons label {
        transition: none;
    }
}