/* Bitrix24 CRM form — приведение к дизайн-системе Boostodrom (перекрывает стили виджета) */

.b24-form {
    --b24-font-family-default: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --b24-font-family: var(--b24-font-family-default) !important;
    --b24-primary-color: var(--accent) !important;
    --b24-primary-text-color: #fff !important;
    --b24-primary-hover-color: color-mix(in srgb, var(--accent) 82%, #000 18%) !important;
    --b24-text-color: var(--text) !important;
    --b24-background-color: var(--surface) !important;
    --b24-field-border-color: var(--line) !important;
    --b24-field-background-color: var(--surface-soft) !important;
    --b24-field-focus-background-color: var(--surface) !important;
    --b24-popup-background-color: var(--surface) !important;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: normal !important;
}

.b24-form-wrapper {
    --ui-border-radius-md: var(--radius-md) !important;
    /* Дублируем токены на обёртке: скрипт Bitrix иногда задаёт цвета до привязки к .b24-form */
    --b24-font-family-default: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --b24-font-family: var(--b24-font-family-default) !important;
    --b24-primary-color: var(--accent) !important;
    --b24-primary-text-color: #fff !important;
    --b24-primary-hover-color: color-mix(in srgb, var(--accent) 82%, #000 18%) !important;
    --b24-text-color: var(--text) !important;
    --b24-background-color: var(--surface) !important;
    --b24-field-border-color: var(--line) !important;
    --b24-field-background-color: var(--surface-soft) !important;
    --b24-field-focus-background-color: var(--surface) !important;
    --b24-popup-background-color: var(--surface) !important;

    position: relative !important;
    display: block !important;
    background-color: var(--surface) !important;
    min-height: 250px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    -webkit-transition: min-height .18s ease !important;
    -o-transition: min-height .18s ease !important;
    transition: min-height .18s ease !important;
    word-break: break-word !important;
    border-radius: var(--radius-md) !important;
}

.b24-form-wrapper.b24-form-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.b24-form * {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Те же токены, что и у .b24-form: виджет не должен тащить «тёмную» палитру Bitrix */
.b24-form-dark,
.b24-form-dark-auto {
    --b24-font-family-default: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --b24-font-family: var(--b24-font-family-default) !important;
    --b24-primary-color: var(--accent) !important;
    --b24-primary-text-color: #fff !important;
    --b24-primary-hover-color: color-mix(in srgb, var(--accent) 82%, #000 18%) !important;
    --b24-text-color: var(--text) !important;
    --b24-background-color: var(--surface) !important;
    --b24-field-border-color: var(--line) !important;
    --b24-field-background-color: var(--surface-soft) !important;
    --b24-field-focus-background-color: var(--surface) !important;
    --b24-popup-background-color: var(--surface) !important;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Кнопка открытия формы (click-to-open) */
.b24-form-click-btn-wrapper a,
.b24-form-click-btn-wrapper button {
    cursor: pointer !important;
}

.b24-form-click-btn-wrapper button {
    border-radius: 14px !important;
    margin: 0 !important;
    min-width: 80px !important;
    height: 39px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    vertical-align: baseline !important;
    padding: 0 19px !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    border: 0 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-click-btn-wrapper.--b24-mod-outlined > button {
    border: 1px solid var(--accent) !important;
}

.b24-form-click-btn-wrapper.--b24-mod-rounded > button {
    border-radius: 9999px !important;
}

.b24-form-click-btn-wrapper.--b24-mod-center > button {
    display: block !important;
    margin: 0 auto !important;
}

.b24-form-click-btn-wrapper.--b24-mod-left > button {
    display: block !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.b24-form-click-btn-wrapper.--b24-mod-right > button {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.b24-form-click-btn-wrapper.--b24-mod-plain.--b24-mod-inline {
    display: inline !important;
}

.b24-form-click-btn-wrapper.--b24-mod-plain.--b24-mod-center {
    text-align: center !important;
}

.b24-form-click-btn-wrapper.--b24-mod-plain.--b24-mod-left {
    text-align: left !important;
}

.b24-form-click-btn-wrapper.--b24-mod-plain.--b24-mod-right {
    text-align: right !important;
}

.b24-form-click-btn-wrapper.--b24-mod-dotted > a {
    border-bottom: 1px dotted !important;
}

.b24-form-click-btn-wrapper.--b24-mod-solid > a {
    border-bottom: 1px solid !important;
}

button.b24-form-click-btn-font-elegant,
button.b24-form-click-btn-font-classic,
button.b24-form-click-btn-font-modern {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

button.b24-form-click-btn-font-elegant {
    font-style: italic !important;
    font-weight: 500 !important;
}

button.b24-form-click-btn-font-modern {
    font-size: 14px !important;
}

a.b24-form-click-btn-font-elegant {
    font-style: italic !important;
}

a.b24-form-click-btn-font-classic {
    font-style: normal !important;
}

a.b24-form-click-btn-font-modern {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Прогресс, корзина */
.b24-form-progress-bar-counter,
.b24-form-progress-bar-title {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-basket {
    border-radius: 14px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Шапка и контент */
.b24-form-header {
    border-bottom: 1px solid var(--line) !important;
}

.b24-dark .b24-form-header {
    border-bottom: 1px solid var(--line) !important;
}

.b24-form-header-title {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-header-description {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-sign-text {
    color: var(--muted) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-sign-bx {
    color: var(--accent-2) !important;
}

.b24-form-sign-24 {
    color: var(--accent) !important;
}

.b24-form-field-agreement a.b24-form-field-agreement-link {
    color: var(--accent) !important;
}

/* Состояния загрузки / успех / ошибка */
.b24-form-state-container .b24-form-loader,
.b24-form-state-container .b24-form-state,
.b24-from-state-on .b24-form-state-container {
    background-color: var(--surface) !important;
    border-radius: var(--radius-md) !important;
}

div.b24-form-loader {
    background-color: var(--surface) !important;
}

.b24-form-state-text {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-success .b24-form-state-text {
    color: var(--text) !important;
}

.b24-form-state-container .b24-form-warning {
    background-color: var(--surface) !important;
}

.b24-form-warning .b24-form-state-text {
    color: var(--text) !important;
}

/* Основная кнопка отправки */
.b24-form-btn {
    border-radius: 14px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

.b24-form-btn-border {
    color: color-mix(in srgb, var(--text) 82%, transparent) !important;
}

.b24-form-loader-progress-time-left-value {
    color: var(--muted) !important;
}

/* Поля ввода */
.b24-form-control-desc,
.b24-form-control,
.b24-form-control-list .b24-form-control,
.b24-form-control-select .field-item,
.b24-form-control-string .b24-form-control,
.b24-form-control-text .b24-form-control {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    border-radius: 14px !important;
}

.b24-form-control-comment {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Без фокуса Bitrix оставляет placeholder прозрачным (плавающая подпись) */
.b24-form .b24-form-control::placeholder,
.b24-form .b24-form-control::-moz-placeholder,
.b24-form .b24-form-control::-webkit-input-placeholder,
.b24-form .b24-form-control:-ms-input-placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* При фокусе Bitrix подставляет rgba(0,0,0,.33) — в тёмной теме это даёт чёрный текст */
.b24-form .b24-form-control:focus::placeholder,
.b24-form .b24-form-control:focus::-moz-placeholder,
.b24-form .b24-form-control:focus::-webkit-input-placeholder,
.b24-form .b24-form-control:focus:-ms-input-placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
}

.b24-form-control-checkbox,
.b24-form-control-product,
.b24-form-control-radio {
    border-radius: 14px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-checkbox .b24-form-control.b24-form-control-checked,
.b24-form-control-radio .b24-form-control.b24-form-control-checked {
    border-color: var(--accent) !important;
}

.b24-form-control-product-info {
    border-radius: 0 0 14px 14px !important;
}

.b24-form-control-product-icon {
    border-radius: 0 0 0 14px !important;
}

.b24-form-control-label,
.b24-form-control-select-label {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-add-btn {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-file {
    border-radius: 14px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-list-selector-item-title,
.b24-form-control-list-selector-item-price {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-product-price {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-control-product-quantity-counter {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-field-layout-section {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Всплывающие окна и виджет */
.b24-window-panel {
    border-radius: 14px !important;
}

.b24-window-popup-wrapper {
    border-radius: 14px !important;
}

.b24-window-widget {
    border-radius: 14px !important;
    background-color: var(--surface) !important;
    -webkit-box-shadow: var(--shadow-md) !important;
    box-shadow: var(--shadow-md) !important;
}

.b24-window-popup-head {
    border-bottom: 1px solid var(--line) !important;
}

.b24-window-popup-title,
.b24-window-popup-body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-window-header {
    border-bottom: 1px solid var(--line) !important;
    background-color: var(--surface) !important;
}

.b24-window-header-title {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-scroll-textable {
    border-top: 1px solid var(--line) !important;
    background-color: var(--surface) !important;
}

.b24-form-scroll-textable-text {
    color: var(--muted) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Выпадающие списки */
.b24-form-dropdown-title {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.b24-form-dropdown-container {
    -webkit-box-shadow: var(--shadow-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 0 0 14px 14px !important;
}

/* Календарь (vue date picker внутри формы) */
.vdpComponent,
.vdpComponent button,
.vdpComponent input,
.vdpComponent select {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.vdpInnerWrap {
    border-radius: 14px !important;
}

.vdpTimeCloseBtn {
    border-radius: 10px !important;
}

/* Слайдер изображений в форме */
.b24-form-slider-wrapper {
    background: var(--surface-soft) !important;
}

/*
 * Тёмная тема: стили виджета после загрузки часто задают color: #000 / -webkit-text-fill-color.
 * Явно перебиваем по :root[data-theme='dark'] (выше по каскаду, чем инжект Bitrix без !important).
 */
:root[data-theme='dark'] .b24-form,
:root[data-theme='dark'] .b24-form-wrapper {
    --b24-text-color: var(--text) !important;
    --b24-background-color: var(--surface) !important;
    --b24-field-background-color: var(--surface-soft) !important;
    --b24-field-focus-background-color: var(--surface) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-header-title,
:root[data-theme='dark'] .b24-form .b24-form-header-description {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-label,
:root[data-theme='dark'] .b24-form .b24-form-control-select-label {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-check .b24-form-control-label,
:root[data-theme='dark'] .b24-form .b24-form-control-radio .b24-form-control-label {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-desc,
:root[data-theme='dark'] .b24-form .b24-form-control-checkbox .b24-form-control-desc,
:root[data-theme='dark'] .b24-form .b24-form-control-radio .b24-form-control-desc,
:root[data-theme='dark'] .b24-form .b24-form-control-product .b24-form-control-desc {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-field-agreement,
:root[data-theme='dark'] .b24-form .b24-form-field-agreement .b24-form-control-desc {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
}

:root[data-theme='dark'] .b24-form .b24-form-field-agreement a.b24-form-field-agreement-link {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-list .b24-form-control,
:root[data-theme='dark'] .b24-form .b24-form-control-string .b24-form-control,
:root[data-theme='dark'] .b24-form .b24-form-control-text .b24-form-control,
:root[data-theme='dark'] .b24-form .b24-form-control-select .field-item,
:root[data-theme='dark'] .b24-form .b24-form-control-select select {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control:focus::placeholder,
:root[data-theme='dark'] .b24-form .b24-form-control:focus::-moz-placeholder,
:root[data-theme='dark'] .b24-form .b24-form-control:focus::-webkit-input-placeholder,
:root[data-theme='dark'] .b24-form .b24-form-control:focus:-ms-input-placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
}

:root[data-theme='dark'] .b24-form input.b24-form-control:-webkit-autofill,
:root[data-theme='dark'] .b24-form input.b24-form-control:-webkit-autofill:hover,
:root[data-theme='dark'] .b24-form input.b24-form-control:-webkit-autofill:focus,
:root[data-theme='dark'] .b24-form textarea.b24-form-control:-webkit-autofill,
:root[data-theme='dark'] .b24-form textarea.b24-form-control:-webkit-autofill:hover,
:root[data-theme='dark'] .b24-form textarea.b24-form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-comment {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
}

:root[data-theme='dark'] .b24-form .b24-form-control-list-selector-item-title,
:root[data-theme='dark'] .b24-form .b24-form-control-list-selector-item-price,
:root[data-theme='dark'] .b24-form .b24-form-field-layout-section {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

:root[data-theme='dark'] .b24-window-popup-title,
:root[data-theme='dark'] .b24-window-popup-body,
:root[data-theme='dark'] .b24-window-header-title {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

:root[data-theme='dark'] .vdpComponent,
:root[data-theme='dark'] .vdpComponent .vdpCellContent,
:root[data-theme='dark'] .vdpComponent .vdpHeadCellContent {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}