/*
 * Диалог на нативном <dialog>: фокус-ловушка, Esc и backdrop — от браузера.
 * На мобильном превращается в bottom sheet (ТЗ §52, §27).
 */

.dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-panel);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-dialog);
}

.dialog::backdrop {
    background: var(--bg-backdrop);
    backdrop-filter: blur(2px);
}

.dialog[open] {
    animation: dialog-in var(--t-slow) var(--ease);
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}

.dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6) var(--space-3);
}

.dialog__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-extrabold);
}

.dialog__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--bg-soft);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.dialog__close:hover {
    background: var(--primary-soft);
    color: var(--primary-2);
}

.dialog__body {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

@media (max-width: 560px) {
    .dialog {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    }

    .dialog__foot {
        border-radius: 0;
    }

    .dialog__foot .btn {
        flex: 1;
    }

    .dialog[open] {
        animation: sheet-in var(--t-slow) var(--ease);
    }

    @keyframes sheet-in {
        from {
            transform: translateY(24px);
        }
    }
}