/*
 * Modal Component CSS — jsgui3-html
 *
 * Target class: .jsgui-modal-overlay (backdrop)
 *               .jsgui-modal (dialog box)
 * Features: backdrop blur, sizes, slide-in, header/body/footer slots
 */

/* ── Overlay (backdrop) ── */
.jsgui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: var(--j-space-4, 16px);

    /* Entrance */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--j-duration-normal, 0.2s) var(--j-ease-out),
        visibility var(--j-duration-normal, 0.2s) var(--j-ease-out);
}

.jsgui-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Modal box ── */
.jsgui-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--modal-max-width, 480px);
    max-height: 90vh;
    background: var(--j-bg, #fff);
    border-radius: var(--j-radius-lg, 12px);
    box-shadow: var(--j-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.2));
    overflow: hidden;
    font-family: var(--j-font-sans);

    /* Entrance animation */
    transform: translateY(12px) scale(0.97);
    transition:
        transform var(--j-duration-normal, 0.2s) var(--j-ease-spring, ease-out);
}

.jsgui-modal-overlay.is-open .jsgui-modal {
    transform: translateY(0) scale(1);
}

/* ── Sizes ── */
.jsgui-modal[data-size="sm"] {
    --modal-max-width: 360px;
}

.jsgui-modal[data-size="lg"] {
    --modal-max-width: 640px;
}

.jsgui-modal[data-size="xl"] {
    --modal-max-width: 800px;
}

.jsgui-modal[data-size="full"] {
    --modal-max-width: 95vw;
    max-height: 95vh;
}

/* ── Header ── */
.jsgui-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--j-space-4, 16px) var(--j-space-5, 20px);
    border-bottom: 1px solid var(--j-border);
    flex-shrink: 0;
}

.jsgui-modal-title {
    font-size: var(--j-text-lg);
    font-weight: var(--j-font-weight-semibold);
    color: var(--j-fg);
    line-height: 1.3;
    margin: 0;
}

/* ── Close button ── */
.jsgui-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--j-radius-sm, 4px);
    background: transparent;
    color: var(--j-fg-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background var(--j-duration-fast), color var(--j-duration-fast);
}

.jsgui-modal-close:hover {
    background: var(--j-bg-muted);
    color: var(--j-fg);
}

/* ── Body ── */
.jsgui-modal-body {
    padding: var(--j-space-5, 20px);
    overflow-y: auto;
    flex: 1;
    font-size: var(--j-text-sm);
    line-height: 1.6;
    color: var(--j-fg);
}

/* ── Footer ── */
.jsgui-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--j-space-2, 8px);
    padding: var(--j-space-3, 12px) var(--j-space-5, 20px);
    border-top: 1px solid var(--j-border);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .jsgui-modal-overlay,
    .jsgui-modal {
        transition: none;
    }
}