/* 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 all
   frontend forms (login, forgot, registration …). */

.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: 320px;
}

/* right-aligned variant (e.g. checkout step 4): the widget sits in a full-width
   column and is pushed flush to the right edge so it lines up with the
   right-aligned action button below it (FormHelper::getCaptcha with .altcha-right).
   The host is capped to ALTCHA's natural widget width (260px) — the base rule's
   320px host is wider than the visible box, which would otherwise float left of
   the right edge and only look half-aligned. */
.altcha-row.altcha-right.altcha-visible .altcha-wrap {
    max-width: 260px;
    margin-left: auto;
}

/* 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;
    --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 tenant primary (like the
   border) and survives ALTCHA's re-renders on state change (unverified →
   verifying → verified) — 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;
}