/* Verification-code (captcha): the code image keeps its natural size and the
   input grows to fill the row, wrapping below the image only when the container
   is too narrow (e.g. the admin login box). The read-aloud speaker sits inside
   the input's right edge (same pattern as the passkey icon). Shared across
   admin forms (login, …). */

.captcha-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.captcha-group .captcha-image {
    flex: 0 0 auto;
}

.captcha-group .captcha-image img {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 3px;
}

.captcha-group .captcha-field {
    flex: 1 1 160px;
}

.captcha-group .captcha-input {
    position: relative;
}

.captcha-group .captcha-input .form-control {
    padding-right: 38px;
}

.captcha-group .captcha-input .speech.captcha {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.captcha-group .captcha-input .speech.captcha a {
    color: #999;
}

.captcha-group .captcha-input .speech.captcha a:hover,
.captcha-group .captcha-input .speech.captcha a:focus {
    color: #333;
}

.captcha-group .captcha-input .speech.captcha em {
    font-size: 1.1em;
}

/* ALTCHA proof-of-work widget. The widget is hidden by default; on submit it
   solves and captcha.js adds .altcha-visible to its .altcha-row wrapper (which
   the server also adds straight away after a failed/blocked attempt). The row
   collapses while hidden (no empty gap) and the widget is visually-hidden — NOT
   display:none — so the web component still renders and can solve. Accent color
   follows the tenant primary (themes/colors.css). */
.altcha-row {
    margin-bottom: 0;
}

.altcha-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.altcha-row.altcha-visible {
    margin-bottom: 15px;
}

.altcha-row.altcha-visible .altcha-wrap {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    max-width: 100%;
}

/* ALTCHA box look (applies when the widget is visible). Border + spinner colors
   come from the tenant primary (themes/colors.css); the background is a light
   tint derived from that border via color-mix, so it themes automatically and
   needs no extra build step. Falls back to a neutral border in non-themed
   contexts (e.g. admin). */
.altcha-wrap {
    --altcha-border-width: 1px;
    --altcha-border-radius: 4px;
    /* let the box fill the full column width (same as the input fields);
       ALTCHA caps its own box at --altcha-max-width (default 260px) */
    --altcha-max-width: 100%;
    --altcha-color-base: color-mix(in srgb, var(--altcha-color-border, #4f6ea2) 8%, #fff);
}

/* Shield-check icon at the right edge of the widget: fills the empty space the
   hidden ALTCHA logo left behind, balances the box and signals "protected".
   Rendered as a CSS mask so its color follows the accent (like the border) and
   survives ALTCHA's re-renders on state change — the .altcha-main flex row
   persists across them. */
.altcha-wrap .altcha-main::after {
    content: "";
    margin-left: auto;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: var(--altcha-color-border, #4f6ea2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .85;
}

/* match ALTCHA's checkbox to the site's checkbox size (ALTCHA defaults to 18px) */
.altcha-wrap .altcha-checkbox input {
    width: 16px;
    height: 16px;
}

/* Bootstrap's global label margin-bottom pushes the ALTCHA label above the
   flex row's vertical center — reset it so it lines up with the checkbox/icon */
.altcha-wrap .altcha-label {
    margin: 0;
}