/*
 * Functional baseline only. FirePrograms-2026 owns the final visual design.
 */
.fp-form-dialog {
    box-sizing: border-box;
    border: 0;
    border-radius: 0.75rem;
    color: inherit;
    inline-size: min(44rem, calc(100% - 2rem));
    max-block-size: calc(100dvh - 2rem);
    overflow: hidden;
    padding: 0;
}

.fp-form-dialog::backdrop {
    background: rgb(7 27 61 / 82%);
}

.fp-form-dialog__panel {
    box-sizing: border-box;
    background: Canvas;
    max-block-size: calc(100dvh - 2rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    position: relative;
}

.fp-form-dialog__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    box-sizing: border-box;
    font-size: 2rem;
    block-size: 2.75rem;
    inline-size: 2.75rem;
    justify-content: center;
    line-height: 1;
    min-block-size: 0;
    padding: 0;
    position: absolute;
    z-index: 2;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
}

.fp-form-dialog__close:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.fp-form-dialog__title {
    padding-inline-end: 3.5rem;
}

html:has(.fp-form-dialog[open]),
body:has(.fp-form-dialog[open]) {
    overflow: hidden;
    overscroll-behavior: none;
}

html.fp-form-modal-open,
body.fp-form-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.fp-form-modal-open {
    position: fixed;
    inset-inline: 0;
    width: 100%;
}



@media (max-width: 720px) {
    .fp-form-dialog {
        inline-size: min(44rem, calc(100% - 1rem));
        max-block-size: calc(100dvh - 1rem);
    }

    .fp-form-dialog__panel {
        max-block-size: calc(100dvh - 1rem);
        padding: 1.25rem;
    }

    .fp-form-dialog__close {
        inset-block-start: 1rem;
        inset-inline-end: 1rem;
    }

    .fp-form-dialog__title {
        padding-inline-end: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-form-dialog,
    .fp-form-dialog::backdrop {
        scroll-behavior: auto;
    }
}