/* Размеры и отступы — по макету Figma (узел 199-452): поле и кнопка одной ширины,
   от вкладок до заголовка примерно 90px. */
.b_card_balance {
    max-width: 500px;
    margin-top: 50px;
}

/* Переключатель и блок с формой одной ширины и по центру — края совпадают
   по построению. Только на этой странице: правила привязаны к её обёртке. */
.b_card_balance_page .b_onlinecart_menu {
    display: inline-flex;
    width: 100%;
    max-width: 830px;
}

.b_card_balance_page .b_onlinecart_menu a {
    flex: 1 1 auto;
    padding: 0 20px;
}

/* Воздух до баннера «Скажи, что от меня» под формой — как в макете. */
.b_card_balance_wrap {
    max-width: 860px;
    margin: 0 auto 60px;
}

/* f_h4 даёт 34px и две строки в колонке; в макете заголовок одной строкой. */
.b_card_balance_title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 16px;
}

.b_card_balance_text {
    color: #6f6a67;
    margin-bottom: 20px;
}

.b_card_balance_field {
    margin-bottom: 20px;
}

.b_card_balance input[type="text"] {
    width: 100%;
    margin-bottom: 0;
}

.b_card_balance .btn {
    width: 100%;
    padding: 0 20px;
}

/* Ошибка — красная обводка поля и подпись под ним, как в макете. */
.b_card_balance.m_error input[type="text"] {
    border-color: #c3385e;
}

.b_card_balance_error {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.35;
    color: #c3385e;
}

/* Блокировка после серии промахов: поле и кнопка гаснут до конца окна. */
.b_card_balance.m_locked input[type="text"] {
    background: #f4f1ef;
    border-color: #e3e3e3;
    color: #8b8480;
}

.b_card_balance .btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Карточка результата справа от формы (узел 199-477). */
.b_card_balance_result {
    max-width: 500px;
    margin-top: 50px;
    padding: 32px;
    border-radius: 16px;
    background: #f6f3f1;
    line-height: 1.4;
}

.b_card_balance_result_label {
    font-size: 14px;
    color: #6f6a67;
    margin-bottom: 8px;
}

.b_card_balance_sum {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 14px;
}

/* Подпись появляется, только когда картой уже не воспользоваться. */
.b_card_balance_note {
    margin-bottom: 10px;
    color: #c3385e;
}

.b_card_balance_result_text {
    font-size: 16px;
    color: #3b3b3b;
}

@media (max-width: 767px) {
    .b_card_balance {
        max-width: none;
        margin-top: 10px;
    }

    .b_card_balance_result {
        margin-top: 24px;
        padding: 24px 20px;
    }

    .b_card_balance_sum {
        font-size: 28px;
    }
}