/*
 * reCAPTCHA box — artinfo_recaptcha_field() (inc/users/recaptcha.php).
 * Shared by the sign-in / create-account page and the comment form.
 * Google's widget is an iframe we can't restyle, so it sits in a soft frame
 * that shows loading, verified and error states around it.
 */

.ail-captcha {
    --cap-ink: var(--ail-ink, #161616);
    --cap-muted: var(--ail-muted, #6B6B6B);
    --cap-line: var(--ail-line, #E7E5DF);
    --cap-bg: var(--ail-bg, #F6F6F3);
    --cap-yellow: var(--ail-yellow, #FFBB00);
    --cap-ok: #1F9D55;
    --cap-error: var(--ail-urgent, #B42318);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 20px;
    font-family: var(--ail-font, 'Inter', sans-serif);
}

.ail-captcha-frame {
    display: inline-flex;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--cap-line);
    border-radius: 14px;
    background: var(--cap-bg);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.ail-captcha-widget {
    width: 304px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
}

/* Loading placeholder until Google's iframe is in place. */
.ail-captcha:not(.is-ready) .ail-captcha-widget {
    background: linear-gradient(90deg, #ECEBE6 0%, #F7F6F2 50%, #ECEBE6 100%) 0 0 / 200% 100%;
    animation: ail-captcha-shimmer 1.2s linear infinite;
}

@keyframes ail-captcha-shimmer {
    to { background-position: -200% 0; }
}

.ail-captcha.is-verified .ail-captcha-frame {
    border-color: var(--cap-ok);
    box-shadow: 0 0 0 3px rgba(31, 157, 85, .12);
}

.ail-captcha.has-error .ail-captcha-frame {
    border-color: var(--cap-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
    animation: ail-captcha-nudge .35s ease-in-out;
}

@keyframes ail-captcha-nudge {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.ail-captcha[data-theme="dark"] .ail-captcha-frame {
    background: #1C1C1C;
    border-color: #2E2E2E;
}

.ail-captcha-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11.5px;
    color: var(--cap-muted);
}

.ail-captcha-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--cap-ok);
}

.ail-captcha-meta a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ail-captcha-meta a:hover {
    color: var(--cap-ink);
}

.ail-captcha-error {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cap-error);
}

/* The widget has a fixed 304px width; shrink it on very narrow phones. */
@media (max-width: 380px) {
    .ail-captcha-widget {
        width: 259px;
        height: 67px;
    }

    .ail-captcha-widget > div {
        transform: scale(.85);
        transform-origin: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ail-captcha-widget,
    .ail-captcha-frame {
        animation: none !important;
        transition: none !important;
    }
}