/* Component: modal */

.sm-modal {
    border: 0;
    border-radius: var(--sm-radius);
    padding: 0;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: min(90vh, 900px);
    overflow: hidden;
    box-shadow: var(--sm-shadow-lg);
    /* Above WP admin chrome; TinyMCE / wp-link sit higher (see below) */
    z-index: 100000;
}

/* display:flex on the base selector overrides UA dialog:not([open]){display:none} */
.sm-modal:not([open]) {
    display: none !important;
}

.sm-modal[open] {
    display: flex;
    flex-direction: column;
}

.sm-modal::backdrop {
    background: rgb(15 23 42 / 40%);
    backdrop-filter: blur(2px);
    z-index: 99999;
}

/* Scrim for modeless dialogs (dialog.show — needed when the modal hosts wp_editor) */
.sm-modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgb(15 23 42 / 40%);
    backdrop-filter: blur(2px);
    border: 0;
    padding: 0;
    margin: 0;
}

/* TinyMCE / wp-link above SM modals when the dialog is modeless (not top-layer) */
.mce-floatpanel,
.mce-tooltip,
.mce-tinymce-inline,
.tox-tinymce-aux,
.tox-menu,
.tox-dialog,
#wp-link-wrap,
#wp-link-backdrop {
    z-index: 100100 !important;
}

.sm-modal__card { margin: 0; padding: 0; border: 0; }

.sm-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px;
}

.sm-modal__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--sm-ink); }

.sm-modal__text { margin: 0; color: var(--sm-muted); font-size: 14px; }

.sm-modal__actions,
.sm-modal__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--sm-line);
    background: var(--sm-soft);
}

/* When a form wraps body+footer inside the dialog, keep the flex column. */
.sm-modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
    flex: 1 1 auto;
    margin: 0;
}