html {
    scrollbar-gutter: stable;
}

html:has(.ui-modal-dialog.lock-scroll[open]) {
    overflow: hidden;
}

.ui-modal-dialog {
    /* Fallback for browsers that don't support the transition */
    display: none;
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    border-radius: 0.5rem;

    /* Keep your existing transitions */
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out,
        overlay 0.2s ease-out allow-discrete,
        display 0.2s ease-out allow-discrete;
}

/* Use [open] instead of or in addition to :open */
.ui-modal-dialog[open] {
    display: block; /* Essential for Safari */
    opacity: 1;
    transform: scale(1) translateY(0);
    padding: 0;
    margin: auto;
    border: none;
}

@starting-style {
    .ui-modal-dialog[open] {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Backdrop Fix */
.ui-modal-dialog::backdrop {
    background-color: rgb(0 0 0 / 0.6); /* Tailwind's bg-black/60 */
    backdrop-filter: blur(4px); /* Tailwind's backdrop-blur-sm */
    opacity: 0;
    transition:
        opacity 0.2s ease-out,
        display 0.2s ease-out allow-discrete;
}

.ui-modal-dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .ui-modal-dialog[open]::backdrop {
        opacity: 0;
    }
}

.ui-modal-dialog.-max-w-xs {
    width: 100%;
    max-width: 320px;

    @media (max-width: 320px) {
        width: calc(100% - 2rem);
    }
}

.ui-modal-dialog.-max-w-sm {
    width: 100%;
    max-width: 384px;

    @media (max-width: 384px) {
        width: calc(100% - 2rem);
    }
}

.ui-modal-dialog.-max-w-md {
    width: 100%;
    max-width: 448px;

    @media (max-width: 448px) {
        width: calc(100% - 2rem);
    }
}

.ui-modal-dialog.-max-w-3xl {
    width: 100%;
    max-width: 768px;

    @media (max-width: 768px) {
        width: calc(100% - 2rem);
    }
}

.ui-modal-dialog.-max-w-4xl {
    width: 100%;
    max-width: 896px;

    @media (max-width: 896px) {
        width: calc(100% - 2rem);
    }
}

.ui-modal-content {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.555556vw 2.77778vw;
    padding: 1.25rem 1rem;
}