/* 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;
}