.app-modal {
    & .modal-content {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 8px 24px var(--shadow-card);
        font-family: var(--font-sans);
    }

    & .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border-color);
        background: var(--field-bg);
        border-radius: 12px 12px 0 0;

        & .close,
        & .btn-close {
            font-size: 24px;
            font-weight: 300;
            color: var(--text-color);
            opacity: 0.7;
            padding: 0;
            margin: 0;
            background: none;
            border: none;
            cursor: pointer;

            &:hover {
                opacity: 1;
            }

            & i {
                font-size: 1em;
            }
        }
    }

    & .modal-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-color);
    }

    & .modal-body {
        padding: 24px;
        background: var(--field-bg);
        color: var(--text-color);
        font-size: 14px;
    }

    & .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        background: var(--field-bg);
        border-radius: 0 0 12px 12px;
        gap: 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &.justify-content-start {
            justify-content: flex-start;
        }

        & .d-flex {
            gap: 12px;
        }

        .form-check-label {
            color: var(--text-color);
        }
    }

    & .image-modal-preview {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 120px;
        background: var(--gray-100);

        & img {
            max-width: 100%;
            max-height: 70vh;
            -o-object-fit: contain;
               object-fit: contain;
        }
    }

    & .modal-dialog.modal-med {
        max-width: 560px;
    }
}