/*
 * The line under a protected form.
 *
 * This lands in themes we have never seen, so it inherits rather than decides:
 * the font comes from the form, the colour from the surrounding text. The
 * status variant draws nothing of its own - no background, no border - because
 * a captcha that advertises itself as invisible should not add furniture to
 * someone else's design.
 *
 * Two elements, not one. The outer box clears the floats a theme may have left
 * beside the submit button (the WordPress login form floats "Remember me" next
 * to it), and clearance swallows a top margin - so the gap has to be padding on
 * the element that clears, while the border belongs to the one inside it.
 *
 * Every class is repeated in its own selector. Form plugins ship blanket resets
 * over their whole subtree - WPForms has `div.wpforms-container-full *` with
 * `font-size: 100%; padding: 0` - and those outrank a single class. Doubling it
 * wins on specificity without reaching for !important, which would take the
 * override away from a site owner who wants one.
 */

.captchaapi-badge.captchaapi-badge {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    /* clear only works in normal flow. Block themes and page builders lay forms
       out with flex or grid, where an appended element becomes an item on the
       last row instead of a row of its own. grid-column spans every column;
       flex-basis claims the full width, which puts the badge on its own line
       wherever the container wraps. Both are inert outside such a container. */
    flex-basis: 100%;
    grid-column: 1 / -1;
    padding: 16px 0 0;
    margin: 0;
    border: 0;
    font-size: 12px;
    line-height: 1.4;
    color: inherit;
}

.captchaapi-badge__inner.captchaapi-badge__inner {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.captchaapi-badge__status.captchaapi-badge__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0;
    margin: 0;
    font-size: inherit;
    opacity: 0.75;
}

/* The widget writes its own icon into the status element; keep it in step with
   the text rather than at whatever intrinsic size it arrives. */
.captchaapi-badge__status.captchaapi-badge__status svg,
.captchaapi-badge__status.captchaapi-badge__status img {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    margin: 0;
}

/*
 * Opt-in variant. It carries a link and a logo, so it may take up room the
 * status line may not - but still no fill: a coloured panel that looks right on
 * a light theme glows on a dark one. A bordered box also reads as heavier than
 * a line of text, so it needs more room above it before it stops looking bolted
 * onto the submit button.
 */
.captchaapi-badge--branded.captchaapi-badge--branded {
    padding-top: 22px;
}

.captchaapi-badge--branded.captchaapi-badge--branded .captchaapi-badge__inner {
    min-height: 32px;
    padding: 0 0.75em;
    border: 1px solid currentColor;
    border-radius: 6px;
    opacity: 0.85;
}

.captchaapi-badge__link.captchaapi-badge__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    box-shadow: none;
}

.captchaapi-badge__link.captchaapi-badge__link:hover,
.captchaapi-badge__link.captchaapi-badge__link:focus {
    text-decoration: underline;
}

.captchaapi-badge__logo.captchaapi-badge__logo {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
    margin: 0;
}

.captchaapi-badge__separator.captchaapi-badge__separator {
    width: 1px;
    align-self: stretch;
    margin: 0.4em 0;
    padding: 0;
    background: currentColor;
    opacity: 0.35;
}