/*
 * Verification rows contain flexible inputs beside fixed images or buttons.
 * min-width: 0 is required because flex items otherwise keep their intrinsic
 * input width and can force translated content outside the form container.
 */
.code-group {
    width: 100%;
    min-width: 0;
}

.code-group .code-input {
    min-width: 0;
    width: 0;
}

.code-group > img,
.code-group > .code-button {
    flex-shrink: 0;
}

/*
 * English labels require more horizontal space than Chinese. These rules are
 * scoped to English so both Chinese modes retain their existing typography.
 */
html[data-translate-language="english"] .form-input::placeholder,
html[data-translate-language="english"] .code-input::placeholder {
    font-size: 13px;
}

html[data-translate-language="english"] .code-button {
    flex: 0 0 92px;
    width: 92px;
    max-width: 42%;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
    letter-spacing: 0;
}