html {
    scrollbar-gutter: stable;
}

dialog.cloudflare-modal[open] {
    margin: auto;
    padding: 2.8rem 1.5rem 1.5rem; /* top | left-right | bottom */
    border: none;
    border-radius: 6px;
    overflow: visible;
}

body:has(dialog[open]) {
    overflow: hidden;
}

dialog.cloudflare-modal p {
    text-align: center;
}

dialog.cloudflare-modal button {
    border: none;
    background-color: transparent;
    font-size: 1rem;
    position: absolute;
    top: 18px;
    right: 8px;
    z-index: 1; /* Lower than turnstile, but still clickable in its area */
    padding: 4px 8px;
    cursor: pointer;
}

dialog.cloudflare-modal .turnstile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .6rem;
    position: relative;
    z-index: 10; /* Higher than button, ensures iframe receives clicks */
}

/* Ensure the Turnstile iframe itself is clickable */
dialog.cloudflare-modal .turnstile-container iframe {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}