/* =============================================================================
   SafeBox — Secure Application Frame Execution Box
   BEM classes:
     .cmp-safebox              root wrapper
     .cmp-safebox__frame       the iframe
     .cmp-safebox__error-message  message inside error state
     .cmp-safebox--size-*      size preset modifiers
     .cmp-safebox--aspect-*    aspect ratio modifiers
     .cmp-safebox--error       error / rejection state
   ========================================================================== */

.cmp-safebox {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--mfa-safebox-bg, #f5f5f5);
    border-radius: var(--mfa-safebox-radius, 4px);
}

.cmp-safebox__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
}

/* ---- Size presets --------------------------------------------------------- */

.cmp-safebox--size-fill {
    width: 100%;
    height: 100%;
    /* Fallback so the box remains visible when the parent has no height. */
    min-height: 400px;
}

.cmp-safebox--size-compact {
    height: 320px;
}

.cmp-safebox--size-standard {
    height: 600px;
}

.cmp-safebox--size-tall {
    height: 900px;
}

.cmp-safebox--size-fullviewport {
    height: 100vh;
    max-height: 100vh;
}

/* Custom preset: model writes width/height directly onto the iframe; wrapper adapts. */
.cmp-safebox--size-custom {
    height: auto;
    min-height: 200px;
}

.cmp-safebox--size-custom .cmp-safebox__frame {
    height: auto;
}

/* ---- Aspect ratios (override height when present) ------------------------- */

.cmp-safebox--aspect-16-9,
.cmp-safebox--aspect-4-3,
.cmp-safebox--aspect-1-1 {
    height: auto;
}

.cmp-safebox--aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.cmp-safebox--aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.cmp-safebox--aspect-1-1 {
    aspect-ratio: 1 / 1;
}

/* ---- Author / edit-mode placeholder --------------------------------------- */

/* Rendered in Edit mode instead of the real iframe so authors see the true size
   and can arrange the page without loading vendor JS into the editor. */
.cmp-safebox--edit {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mfa-safebox-edit-bg, #eef3f8);
    background-image:
        linear-gradient(45deg, rgba(0, 113, 188, 0.06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 113, 188, 0.06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 113, 188, 0.06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 113, 188, 0.06) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    border: 1px dashed var(--mfa-safebox-edit-border, #0071bc);
    color: var(--mfa-safebox-edit-fg, #1a3b5c);
}

.cmp-safebox__edit-body {
    max-width: 90%;
    padding: 1rem 1.25rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cmp-safebox__edit-title {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cmp-safebox__edit-meta {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    word-break: break-all;
}

/* ---- Error state ---------------------------------------------------------- */

.cmp-safebox--error {
    padding: 1.5rem;
    min-height: 96px;
    background-color: var(--mfa-safebox-error-bg, #fdecea);
    border: 1px solid var(--mfa-safebox-error-border, #f4c7c3);
    color: var(--mfa-safebox-error-fg, #611a15);
}

.cmp-safebox__error-message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 600;
}

.cmp-safebox__error-detail {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    word-break: break-all;
}

/* ---- Focus outline (a11y) ------------------------------------------------- */

.cmp-safebox:focus-within {
    outline: 2px solid var(--mfa-safebox-focus, #0071bc);
    outline-offset: 2px;
}