/* Оформление виджетов форм Битрикс24 под стиль сайта (как исходные формы) */

/* ===== Общее: убираем «карточку» виджета, секции сами задают фон ===== */
.contact-form--b24 .b24-form-wrapper,
#callback-form .b24-form-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
}

/* Заголовок/описание внутри виджета скрываем — у секций есть свои */
.contact-form--b24 .b24-form-header,
#callback-form .b24-form-header {
    display: none !important;
}

.contact-form--b24 .b24-form-padding-side,
#callback-form .b24-form-padding-side {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== Основная форма «Оставьте заявку» (светлая секция) ===== */
.contact-form--b24 .b24-form-control {
    background: #F3F3F3 !important;
    border: 1px solid #DADADA !important;
    border-radius: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: -0.02em;
    color: #0D2041 !important;
    transition: all 0.3s ease;
}

.contact-form--b24 .b24-form-control:focus {
    outline: none !important;
    border-color: #005AF3 !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 243, 0.1) !important;
}

.contact-form--b24 .b24-form-control-label {
    font-family: 'Inter', sans-serif !important;
    color: #9CA3AF !important;
}

.contact-form--b24 .b24-form-field-agreement,
.contact-form--b24 .b24-form-control-desc {
    font-family: 'Inter', sans-serif !important;
    color: #0D2041;
}

.contact-form--b24 .b24-form-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #005AF3 !important;
    border-radius: 10px !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    /* вес 600 — единый для всех кнопок сайта (аудит кнопок, авг 2026) */
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    cursor: pointer;
    /* высота строго как у полей формы (42px, у виджета свои height/min-height) */
    height: 42px !important;
    min-height: 42px !important;
    line-height: 1 !important;
    padding: 0 28px !important;
    transition: all 0.3s ease;
}

.contact-form--b24 .b24-form-btn:hover {
    background: #0040b3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 90, 243, 0.3);
}

/* ===== Форма обратного звонка в футере (тёмный фон) ===== */
#callback-form .b24-form-control {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 5px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
}

#callback-form .b24-form-control:focus {
    outline: none !important;
    /* фон футера — фирменный #005AF3: синяя рамка на нём исчезала.
       Оставляем белую и добавляем мягкое белое свечение */
    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

#callback-form .b24-form-control-label {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

#callback-form .b24-form-btn {
    background: #FFFFFF !important;
    /* радиус 10px и вес 600 — как у остальных кнопок сайта (был 5px/500) */
    border-radius: 10px !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0D2041 !important;
    cursor: pointer;
    padding: 12px 24px !important;
    white-space: nowrap;
    transition: all 0.3s ease;
}

#callback-form .b24-form-btn:hover {
    background: #005AF3 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

#callback-form .b24-form-field-agreement,
#callback-form .b24-form-field-agreement-link,
#callback-form .b24-form-control-desc,
#callback-form .b24-form-sign-text {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Доводка дизайна (аудит) ===== */

/* Подпись «Заряжено Битрикс24» */
.contact-form--b24 .b24-form-sign,
#callback-form .b24-form-sign {
    display: none !important;
}

/* Отступ текста в полях — как у исходных форм (16px), метка вровень */
.contact-form--b24 .b24-form-control,
#callback-form .b24-form-control {
    padding-left: 16px !important;
}

.contact-form--b24 .b24-form-control-label,
#callback-form .b24-form-control-label {
    left: 16px !important;
    font-size: 14px !important;
}

/* Поле с ошибкой подсвечивается рамкой в цвет плашки */
.contact-form--b24 .b24-form-control-alert .b24-form-control,
#callback-form .b24-form-control-alert .b24-form-control {
    border-color: #F25830 !important;
}

/* Плашка ошибки — скругление в стиль сайта */
.b24-form-control-alert-message {
    border-radius: 6px !important;
    margin-top: 4px;
}

/* Текст согласия — размер мелкого текста сайта */
.contact-form--b24 .b24-form-field-agreement,
.contact-form--b24 .b24-form-field-agreement * {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

#callback-form .b24-form-field-agreement,
#callback-form .b24-form-field-agreement * {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Виджет оборачивает в ссылку весь текст согласия целиком — сплошное
   подчёркивание шести строк это шум, убираем */
.contact-form--b24 .b24-form-field-agreement a,
.contact-form--b24 .b24-form-field-agreement-link {
    color: #005AF3 !important;
    text-decoration: none !important;
}

#callback-form .b24-form-field-agreement a,
#callback-form .b24-form-field-agreement-link {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Чекбокс согласия — фирменный синий; в футере фон сам #005AF3,
   поэтому там чекбокс белый (синий квадрат сливался с фоном) + крупнее 13px */
.contact-form--b24 input[type="checkbox"],
#callback-form input[type="checkbox"] {
    accent-color: #005AF3;
}

#callback-form input[type="checkbox"] {
    accent-color: #FFFFFF;
    width: 16px !important;
    height: 16px !important;
}

/* ===== Один в один с исходными формами ===== */

/* Плавающие метки убираем — как в оригинале работают плейсхолдеры (ставит скрипт) */
.contact-form--b24 .b24-form-control-label,
#callback-form .b24-form-control-label {
    display: none !important;
}

.contact-form--b24 .b24-form-control,
#callback-form .b24-form-control {
    padding: 12px 35px 12px 16px !important;
    height: auto !important;
}

.contact-form--b24 .b24-form-control::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
}

#callback-form .b24-form-control::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1;
}

/* Комментарий — визуально однострочный, как в оригинале */
.contact-form--b24 textarea.b24-form-control {
    min-height: 46px !important;
    height: 46px;
    resize: vertical;
}

/* Сетка полей: имя 100%, телефон + email по 50% в одну строку */
.contact-form--b24 form > div:has(.b24-form-field) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
}

.contact-form--b24 .b24-form-field {
    flex: 0 0 100%;
    margin-bottom: 16px !important;
}

.contact-form--b24 .b24-form-field-phone,
.contact-form--b24 .b24-form-field-email {
    flex: 1 1 calc(50% - 8px);
}

@media (max-width: 576px) {
    .contact-form--b24 .b24-form-field-phone,
    .contact-form--b24 .b24-form-field-email {
        flex-basis: 100%;
    }
}

/* Чекбокс согласия — как оригинальный (11px, серый, синяя ссылка) */
.contact-form--b24 .b24-form-field-agreement,
.contact-form--b24 .b24-form-field-agreement * {
    font-size: 11px !important;
    color: #4B5563 !important;
}

.contact-form--b24 .b24-form-field-agreement a,
.contact-form--b24 .b24-form-field-agreement-link {
    color: #005AF3 !important;
}

/* ===== Футер: поле + кнопка в один ряд (как subscribe-wrapper) ===== */
#callback-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

#callback-form form > div:has(.b24-form-field) {
    display: contents;
}

#callback-form .b24-form-field-phone {
    flex: 1 1 200px;
    margin-bottom: 0 !important;
    order: 1;
}

#callback-form .b24-form-btn-container {
    order: 2;
    flex: 0 0 auto;
    margin: 0 !important;
}

#callback-form .b24-form-btn-block {
    margin: 0 !important;
    padding: 0 !important;
}

#callback-form .b24-form-btn {
    width: auto;
    /* высота строго как у поля телефона в той же строке (42px, было 52px;
       у виджета свои height/min-height) */
    height: 42px !important;
    min-height: 42px !important;
    line-height: 1 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px !important;
}

#callback-form .b24-form-field-agreement {
    order: 3;
    flex: 0 0 100%;
    margin: 10px 0 0 0 !important;
}

#callback-form form > div:not(:has(.b24-form-field)):not(.b24-form-btn-container) {
    order: 4;
    flex-basis: 100%;
}

#callback-form form > span {
    order: 5;
}

/* Высота комментария — строго как у остальных полей */
.contact-form--b24 textarea.b24-form-control {
    height: 43px !important;
    min-height: 43px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* Текст-ссылка согласия в основной форме — приглушённый серый, как юридическая приписка */
.contact-form--b24 .b24-form-field-agreement a,
.contact-form--b24 .b24-form-field-agreement-link {
    color: #4B5563 !important;
}