/* Общая база полей. Порядок подключения: reset → controls → потребители. */
:root {
    --form-field-height: 48px;
    --form-space: 24px;
    --form-text-color: #4c504a;
    --form-border-color: #dedede;
    --form-surface-color: #f3f3f3;
    --form-error-color: #b42318;
    --form-focus-color: #696969;
}

textarea,
select,
input
{
    font-family: 'PT Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 20px;

    display: block;

    width: 100%;
    height: var(--form-field-height);
    padding: 0 15px;
    transition: all .3s ease-in-out;

    color: var(--form-text-color);
    border: 1px solid var(--form-border-color);
    border-radius: 0;
    background-color: transparent;
    appearance: none;
}

textarea:focus::placeholder,
select:focus::placeholder,
input:focus::placeholder
{
    color: transparent;
}

textarea:focus,
select:focus,
input:focus:not([type="submit"]):not([type="button"])
{
    border-color: var(--form-focus-color);
    background-color: #fff;
}

textarea.disabled,
textarea[disabled='disabled'],
textarea[disabled],
select.disabled,
select[disabled='disabled'],
select[disabled],
input.disabled,
input[disabled='disabled'],
input[disabled]
{
    background-color: var(--form-surface-color);
}

.input--inverse
{
    border-color: #fff;
    background-color: #fff;
}

textarea
{
    line-height: 1.5;

    height: 121px;
    padding: 13px 16px;

    resize: none;
}

.js-input-phone[readonly],
.js-input-phone[readonly]:focus {
    border-color: #fff !important;
    background-color: var(--form-surface-color) !important;
}

input[readonly]:not([type="hidden"]),
textarea[readonly] {
    background-color: var(--form-surface-color);
}

/* Сохраняем ошибку и при фокусе, поверх общего правила input:focus:not(...). */
.input-error,
:is(input, select, textarea):is(.input-error, [aria-invalid="true"]):not([type="submit"]):not([type="button"]) {
    border-color: var(--form-error-color);
}