/* ==========================================================================
   Transitional form styles — старая дизайн-система (ds2025)
   Поля старых форм: инпуты, чекбоксы, радио, тумблеры + старые утилиты раскладки.
   Подключается ПОСЛЕ ds2026/base.css и popup.min.css.
   Источник: assets/css/ds2025/base.css (.form__input / .form__checkbox* / .form__radio* / .form__toggle*).
   Классы .form__input / .form__checkbox* / .form__radio* / .form__toggle* принадлежат только
   старой ДС (в новой — .input / .form_checkbox / .form_radio / .form_switcher), поэтому правила
   глобальные: работают и в попап-формах, и в партиалах старой ДС (футер, баннеры, квизы).
   ========================================================================== */

:root {
    /* шрифты */
    --font_raleway: 'Raleway', 'Arial', sans-serif;

    /* цвета */
    --white: #FFFFFF;
    --body2_on_color: #C8C8DA;
    --inputs: #D8D8E7;
    --inputs_active: #2E2E3C;
    --accent_blue: #498EF5;
    --error: #D1053B;
    --icon_muted: #D8D8E7;
    --bg_neutral1: #F4F4F9;
    --bg_neutral5: #7A8093;
    --bg_accent_red_lite: #FFD0D0;
    --button_blue: #498EF5;
    --button_blue_hover: #1F65CC;
    --button_black: #2E2E3C;
    --button_black_hover: #4C4C59;
}

.form__input {
    height: 48px;
    width: 100%;
    line-height: 48px;
    padding: 0px 16px;
    border-radius: 4px;
    border: 1px solid var(--body2_on_color);
    background: var(--white);
    color: var(--inputs_active);
    font-family: var(--font_raleway);
    font-size: 16px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    outline: none;
}

.form__input::-webkit-input-placeholder {
    color: var(--body2_on_color);
}
.form__input::-moz-placeholder {
    color: var(--body2_on_color);
}
.form__input:-ms-input-placeholder {
    color: var(--body2_on_color);
}
.form__input::placeholder {
    color: var(--body2_on_color);
}

.form__input:focus {
    outline: none;
    border: 1px solid var(--accent_blue);
}

.form__input.error,
.form__input.form__error {
    border: 1px solid var(--error);
}

.form__input:disabled {
    background-color: var(--bg_neutral1);
    border: 1px solid var(--body2_on_color);
    color: var(--icon_muted);
}
.form__input:disabled::placeholder {
    color: var(--icon_muted);
}

/* --- Чекбоксы / радио / тумблеры (перенос из ds2025/base.css) --- */
.form__checkbox_wrap,
.form__radio_wrap,
.form__toggle_wrap {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    line-height: normal;
}
.form__checkbox_wrap input[type="checkbox"],
.form__radio_wrap input[type="radio"],
.form__toggle_wrap input[type="checkbox"] {
    display: none;
}
.form__checkbox_content,
.form__radio_content,
.form__toggle_content {
    display: inline-flex;
    gap: 12px;
    align-items: flex-start;
}
.form__checkbox_content.align_center {
    align-items: center;
}
.form__checkbox_content:before {
    content: '';
    border-radius: 4px;
    border: 1.5px solid var(--body2_on_color);
    background-color: var(--white);
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
}
.form__checkbox_wrap:hover .form__checkbox_content:before {
    border-color: var(--inputs_active);
}
.form__checkbox_wrap input:checked + .form__checkbox_content:before {
    background: url(/themes/1c/assets/i/ds_2025/check.svg) center center no-repeat var(--button_blue);
    border-color: var(--button_blue);
}
.form__checkbox_wrap:hover input:checked + .form__checkbox_content:before {
    background-color: var(--button_blue_hover);
    border-color: var(--button_blue_hover);
}
.form__checkbox_content .form__checkbox_text {
    min-height: 18px;
    line-height: 140%;
}
.form__checkbox_wrap input:disabled + .form__checkbox_content:before {
    border-color: var(--body2_on_color);
    background-color: var(--bg_neutral1);
}
.form__checkbox_wrap input:checked + .form__checkbox_content_black:before {
    background: url(/themes/1c/assets/i/ds_2025/check.svg) center center no-repeat var(--button_black);
    border-color: var(--button_black);
}
.form__checkbox_wrap:hover input:checked + .form__checkbox_content_black:before {
    background-color: var(--button_black_hover);
    border-color: var(--button_black_hover);
}
.form__checkbox_wrap input.error + .form__checkbox_content:before,
.form__checkbox_wrap input.form__error + .form__checkbox_content:before {
    background-color: var(--bg_accent_red_lite);
    border-color: var(--error);
}
.form__checkbox_wrap input:disabled:checked + .form__checkbox_content:before {
    background-color: var(--body2_on_color);
    border-color: var(--body2_on_color);
}

/* radio */
.form__radio_circle {
    position: relative;
    border-radius: 50%;
    border: 1.5px solid var(--body2_on_color);
    background-color: var(--white);
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
}
.form__radio_wrap:hover .form__radio_circle {
    border-color: var(--inputs_active);
}
.form__radio_wrap input:checked + .form__radio_content .form__radio_circle {
    border-color: var(--button_blue);
}
.form__radio_wrap:hover input:checked + .form__radio_content .form__radio_circle {
    border-color: var(--button_blue_hover);
}
.form__radio_wrap input:checked + .form__radio_content .form__radio_circle:before {
    content: '';
    background-color: var(--button_blue);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.form__radio_content .form__radio_text {
    display: flex;
    min-height: 18px;
    align-items: center;
}
.form__radio_wrap input:disabled + .form__radio_content .form__radio_circle {
    border-color: var(--body2_on_color);
    background-color: var(--bg_neutral1);
}
.form__radio_wrap input.error + .form__radio_content .form__radio_circle,
.form__radio_wrap input.form__error + .form__radio_content .form__radio_circle {
    background-color: var(--bg_accent_red_lite);
    border-color: var(--error);
}
.form__radio_wrap input:disabled:checked + .form__radio_content .form__radio_circle {
    border-color: var(--body2_on_color);
    background-color: var(--bg_neutral1);
}
.form__radio_wrap input:disabled:checked + .form__radio_content .form__radio_circle:before {
    background-color: var(--body2_on_color);
}

/* toggle */
.form__toggle_circle {
    position: relative;
    border-radius: 8px;
    background-color: var(--bg_neutral5);
    width: 32px;
    height: 16px;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
}
.form__toggle_circle::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--white);
    position: absolute;
    left: 3px;
    top: 3px;
}
.form__toggle_wrap:hover .form__toggle_circle {
    background-color: var(--inputs_active);
}
.form__toggle_wrap input:checked + .form__toggle_content .form__toggle_circle {
    background-color: var(--button_blue);
}
.form__toggle_wrap input:checked + .form__toggle_content .form__toggle_circle::before {
    left: 19px;
}
.form__toggle_wrap input.error + .form__toggle_content .form__toggle_circle,
.form__toggle_wrap input.form__error + .form__toggle_content .form__toggle_circle {
    background-color: var(--error);
}
.form__toggle_wrap:hover input:checked:not(:disabled) + .form__toggle_content .form__toggle_circle {
    background-color: var(--button_blue_hover);
}
.form__toggle_wrap input:disabled + .form__toggle_content .form__toggle_circle {
    background-color: var(--body2_on_color);
}

/* --- Старые утилиты раскладки, используемые в разметке старых форм --- */
.flex { display: flex; }
.flex_column { flex-direction: column; }
.gap24px { gap: 24px; }
.txt_inputs_active { color: var(--inputs_active); }
@media (min-width: 576px) {
    .flex_row_sm { flex-direction: row; }
}

/* --- Старый вид кнопок в попап-формах (временно, до переноса попапов на ds2026) --- */
.popup.popup_form .button,
.popup.popup_form .button_line {
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: var(--font_roboto);
}

/* --- Старые эффекты кнопок в попапах (старая ДС: без теней и плавных переходов) --- */
.popup .button,
.popup .button_line,
.popup .button_tertiary {
    transition: none;
    box-shadow: none;
}
.popup .button:hover,
.popup .button_line:hover {
    box-shadow: none;
}
.popup .button:disabled,
.popup .button[href=""],
.popup a.button:not([href]),
.popup .button.button_disabled {
    box-shadow: none !important;
}