/*
 * Right-align the Cloudflare Turnstile widget on the registration form
 * (resources/views/filament/user/forms/turnstile.blade.php). The widget
 * renders a fixed-width iframe, so the flex row pushes it to the end.
 */
.turnstile-widget {
    display: flex;
    justify-content: flex-end;
}

/*
 * Match the form inputs' rounded corners, ring, and shadow. Turnstile renders
 * its iframe inside a closed shadow root, so we clip the host container
 * instead, and pull Cloudflare's own square 1px border just outside the clip
 * (negative margin) so our rounded ring replaces it rather than doubling up.
 */
.turnstile-widget > [x-ref="widget"] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.turnstile-widget > [x-ref="widget"] > div {
    margin: -1px;
}

/*
 * Turnstile's iframe is inline, so its host element adds a line-box descender
 * gap (~6px) below it, exposing the widget's bottom edge inside our clip.
 * Flex blockifies the iframe so the host is exactly the widget's height.
 */
.turnstile-widget > [x-ref="widget"] > div > div {
    display: flex;
}