/**
 * Form consent checkbox block.
 *
 * Стилизация чекбокса согласия, который встраивается в bitrix:form.result.new
 * шаблоны (form, form_modal, form_buy1click, form_check_rates). Использует
 * уникальный namespace .vp-form-consent / .vp-form-agreement чтобы избежать
 * перекрытий с правилами basa-шаблона (.modal label, .form label и т.д.).
 *
 * Disabled-состояние submit-кнопки покрывается общим селектором [data-vp-form-submit][disabled].
 */

.vp-form-consent {
    margin: 12px 0 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.vp-form-consent__label {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
}

.vp-form-consent__checkbox {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    /* basa-шаблон ставит appearance:none на input[type=checkbox] (для кастомных
       чекбоксов фильтров каталога). Возвращаем native UI чтобы галочка рисовалась
       браузером с accent-color. */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    accent-color: #fcb52c;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none !important;
}

.vp-form-consent__text {
    flex: 1 1 auto;
    display: inline-block;
}

.vp-form-consent__text a {
    color: #1a73e8;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Ссылки в скобках — это вспомогательная навигация, чуть мельче
       основного текста согласия. Подчёркивание + цвет сохраняют
       очевидность клика. Основной юридический текст («Я даю согласие…»)
       остаётся в полном размере 13px (требование «информированности»
       ст. 9 152-ФЗ + аналогии с ЗоЗПП ст. 8). */
    font-size: 0.85em;
}

.vp-form-consent__text a:hover {
    text-decoration: none;
}

/* Подпись «Согласие действительно до DD.MM.YYYY» под чекбоксом —
   показывается только когда чекбокс pre-check'ен по cookie vp_form_consent_v1. */
.vp-form-consent__valid-until {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.55);
    margin: 6px 0 0 26px;
    font-style: italic;
}
.modal .vp-form-consent__valid-until {
    color: rgba(255, 255, 255, 0.75);
}

[data-vp-form-submit][disabled],
[data-vp-form-submit][aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* basa-модалки (#call, #message, #buy1click, #check_rates, #buy-preorder)
   имеют тёмно-синий фон (rgb(0, 80, 158)) с белым текстом по умолчанию.
   Делаем чекбокс согласия читаемым: белый текст + жёлтые ссылки.
   Наша собственная #vp-form-agreement-modal (белый фон) внутри не содержит
   .vp-form-consent блока — этот override не пересекается. */
.modal .vp-form-consent {
    color: #ffffff;
}
.modal .vp-form-consent__text {
    color: #ffffff;
}
.modal .vp-form-consent__text a {
    color: #fcb52c;
    text-decoration: underline;
}
.modal .vp-form-consent__text a:hover {
    color: #ffd060;
    text-decoration: none;
}

/* Модалка с полным текстом соглашения.
   Перебиваем basa-шаблонный .modal (тёмно-синий фон + белый текст для compact modals
   типа #call/#message) — для длинного юр-текста нужен светлый фон с тёмным шрифтом. */
.modal.vp-form-agreement {
    max-width: 760px;
    width: 90vw;
    padding: 28px 32px;
    background-color: #ffffff !important;
    color: #333 !important;
    text-align: left;
    border-radius: 4px;
}

/* basa-шаблон рисует .modal::before с background-image modal_before.jpg
   (декоративная синяя картинка для коротких модалок #call/#message).
   Для длинной модалки соглашения это даёт синий блок поверх белого фона —
   убираем именно у нашей модалки, не трогая базовое правило. */
.modal.vp-form-agreement::before,
.modal.vp-form-agreement::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

.modal.vp-form-agreement .title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #222 !important;
    font-weight: 600;
    text-align: left;
}

.vp-form-agreement__body {
    font-size: 14px;
    line-height: 1.55;
    color: #333;
    max-height: 65vh;
    overflow-y: auto;
    text-align: left;
}

.vp-form-agreement__body p {
    margin: 0 0 12px;
}

.vp-form-agreement__body ul {
    margin: 0 0 12px 20px;
    padding: 0;
}

.vp-form-agreement__body li {
    margin: 0 0 4px;
    list-style: disc;
}

.vp-form-agreement__body strong {
    font-weight: 600;
}

.vp-form-agreement__body a {
    color: #1a73e8;
    text-decoration: underline;
}