/*
 * Поле ввода цифрового кода.
 * Размеры и цвета вынесены в переменные на корне элемента, чтобы страница могла
 * подстроить внешний вид без правки JS и без каскадных переопределений.
 */
.code-input {
    --code-input-size: 64px;
    --code-input-gap: 12px;
    --code-input-radius: 16px;
    --code-input-font-size: 26px;
    --code-input-border: #e4e7f0;
    --code-input-border-hover: #cdd2df;
    --code-input-accent: #7c5cff;
    --code-input-accent-soft: rgba(124, 92, 255, 0.14);
    --code-input-text: #171c27;
    --code-input-bg: #ffffff;
    --code-input-disabled-bg: #f7f8fc;
    --code-input-error: #df5c7a;
    --code-input-error-soft: rgba(223, 92, 122, 0.16);

    position: relative;
    display: flex;
    gap: var(--code-input-gap);
    justify-content: center;
}

/*
 * Приёмник кода из SMS лежит прозрачным слоем поверх ячеек: браузер подставляет код целиком
 * и только в видимое поле, поэтому оно остаётся на месте и в потоке — невидимым становится
 * лишь его содержимое. Ячейки под ним показывают набранное.
 */
.code-input__autofill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: var(--code-input-font-size);
    text-align: center;
}

.code-input__autofill:focus {
    outline: none;
}

.code-input__autofill::selection {
    background: transparent;
    color: transparent;
}

.code-input__cell {
    width: var(--code-input-size);
    height: var(--code-input-size);
    padding: 0;
    border: 1px solid var(--code-input-border);
    border-radius: var(--code-input-radius);
    background: var(--code-input-bg);
    color: var(--code-input-text);
    font-family: inherit;
    font-size: var(--code-input-font-size);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    -moz-appearance: textfield;
}

.code-input__cell::-webkit-outer-spin-button,
.code-input__cell::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.code-input__cell:hover:not(:disabled) {
    border-color: var(--code-input-border-hover);
}

.code-input__cell:focus {
    outline: none;
    border-color: var(--code-input-accent);
    box-shadow: 0 0 0 3px var(--code-input-accent-soft);
}

/*
 * Ячейку, куда сейчас идёт ввод, подсвечивает класс: настоящий фокус держит приёмник кода,
 * и псевдокласс `:focus` до ячеек не доходит.
 */
.code-input--focused .code-input__cell.is-active {
    border-color: var(--code-input-accent);
    box-shadow: 0 0 0 3px var(--code-input-accent-soft);
}

.code-input__cell:disabled {
    background: var(--code-input-disabled-bg);
    cursor: not-allowed;
}

.code-input--masked .code-input__cell {
    -webkit-text-security: disc;
    text-security: disc;
}

.code-input--error .code-input__cell {
    border-color: var(--code-input-error);
}

.code-input--error .code-input__cell:focus,
.code-input--error.code-input--focused .code-input__cell.is-active {
    box-shadow: 0 0 0 3px var(--code-input-error-soft);
}

.code-input--disabled {
    opacity: 0.6;
}

@media (max-width: 400px) {
    .code-input {
        --code-input-size: 56px;
        --code-input-gap: 10px;
        --code-input-font-size: 22px;
    }
}