/* Общие компоненты нового вида ml-stroy.ru (20.10.2026). Начало общего файла из дорожной карты сайта:
   сюда со временем переезжают кнопки, вопросы и токены из ml-catalog.css и ml-card.css.
   Подключается в head.html после style.css; пока за флажком ?ml_new=1, включается вместе с новой карточкой.
   Сейчас здесь окно заявки (#callback-form, форма 1 из админки) и окно «успешно отправлено» (#ok-form).
   Илья 20.10: «уебищная галочка», огромный заголовок капсом — «сделаем модалку более красивой».
   Классы и id формы 1 не меняются, цели Метрики на них не задеты. Всё квадратное, Bodoni без капса, Roboto. */
:root {
   --ml-ink: #111;
   --ml-text: #333;
   --ml-muted: #6B6B6B;
   --ml-red: #EE2329;
   --ml-gray: #F4F4F4;
   --ml-line: #D9D9D9;
}

/* Окно: 560 px, белое, отступы 40; на телефоне во всю ширину */
#callback-form .modal-block__inner, #ok-form .modal-block__inner { width: 560px; padding: 44px 40px 36px; text-align: left; }
#callback-form .modal-block__content, #ok-form .modal-block__content { font-size: 16px; line-height: 1.5; }
#callback-form .modal-block__title, #ok-form .modal-block__title { margin: 0 0 24px; padding-right: 40px; }
#callback-form .modal__h2.ml-mh { margin: 0; font: 34px/1.1 "BodoniBold", serif; text-transform: none; letter-spacing: -.005em; color: var(--ml-ink); text-wrap: balance; }
#callback-form .ml-msub { margin: 10px 0 0; font: 16px/1.5 "RobotoLight", Roboto, sans-serif; color: var(--ml-text); }
#ok-form .modal__h2 { margin: 0; font: 30px/1.15 "BodoniBold", serif; text-transform: none; color: var(--ml-ink); }
#ok-form .modal__h2 span { font: inherit; white-space: normal; text-transform: none; }

/* Крестик: квадрат 48 px, как у окна 3D-тура; вместо красного круга из style.css */
#callback-form .modal-block__close, #ok-form .modal-block__close { position: absolute; top: 0; right: 0; width: 52px; height: 52px; margin: 0; border-radius: 0; background: transparent; cursor: pointer; z-index: 2; }
#callback-form .modal-block__close::before, #callback-form .modal-block__close::after,
#ok-form .modal-block__close::before, #ok-form .modal-block__close::after { content: ""; position: absolute; top: 25px; left: 16px; width: 20px; height: 2px; margin: 0; border-radius: 0; background: var(--ml-ink); transform: rotate(45deg); transition: background .2s ease; }
#callback-form .modal-block__close::after, #ok-form .modal-block__close::after { transform: rotate(-45deg); }
#callback-form .modal-block__close:hover, #ok-form .modal-block__close:hover { background: var(--ml-red); }
#callback-form .modal-block__close:hover::before, #callback-form .modal-block__close:hover::after,
#ok-form .modal-block__close:hover::before, #ok-form .modal-block__close:hover::after { background: #FFF; }

/* Поля друг под другом, кнопка во всю ширину; сетка в одну строку из head.html здесь не нужна */
#callback-form .content-form__fieldset, #callback-form .content-form__fieldset.grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
#callback-form .form__field { margin: 0; width: 100%; }
#callback-form .form__field input[type="text"], #callback-form .form__field input[type="tel"] { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--ml-line); border-radius: 0; background: #FFF; box-shadow: none; font: 16px/1 "RobotoRegular", Roboto, sans-serif; color: var(--ml-ink); transition: border-color .2s ease; }
#callback-form .form__field input::placeholder { color: var(--ml-muted); opacity: 1; }
#callback-form .form__field input:focus { border-color: var(--ml-ink); outline: 0; }
#callback-form .form__submit { display: block; margin-top: 4px; }
#callback-form .form__submit .btn { display: block; width: 100%; height: 54px; margin: 0; padding: 0 20px; border: 1px solid var(--ml-red); border-radius: 0; background: var(--ml-red); color: #FFF; font: 14px/1 "RobotoMedium", Roboto, sans-serif; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
#callback-form .form__submit .btn:hover { background: var(--ml-ink); border-color: var(--ml-ink); }

/* Согласие: под кнопкой, 13 px, квадратная галочка 18 px. Нативный флажок скрыт, но доступен с клавиатуры */
.ml-consent, #callback-form .form__checkbox { display: block; width: 100%; margin: 16px 0 0; font-size: 13px; line-height: 1.45; }
#callback-form .form__checkbox-label { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.45; }
#callback-form .form__checkbox-input { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
#callback-form .form__checkbox-box { flex: 0 0 18px; position: relative; display: block; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ml-ink); border-radius: 0; background: #FFF; transition: background .15s ease, border-color .15s ease; }
#callback-form .form__checkbox-input:checked + .form__checkbox-box { background: var(--ml-red); border-color: var(--ml-red); }
#callback-form .form__checkbox-input:checked + .form__checkbox-box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#callback-form .form__checkbox-input:focus-visible + .form__checkbox-box { outline: 2px solid var(--ml-red); outline-offset: 2px; }
#callback-form .form__checkbox-text { flex: 1 1 auto; font: 13px/1.45 "RobotoRegular", Roboto, sans-serif; color: var(--ml-muted); }
#callback-form .form__checkbox .form__checkbox-text a { color: var(--ml-ink); text-decoration: underline; text-underline-offset: 2px; }
#callback-form .form__checkbox .form__checkbox-text a:hover { color: var(--ml-red); opacity: 1; }
#callback-form .form__checkbox-text a::after { display: none; }

@media (max-width: 600px) {
   #callback-form .modal-block__inner, #ok-form .modal-block__inner { width: 100%; padding: 36px 20px 28px; }
   #callback-form .modal__h2.ml-mh { font-size: 28px; }
   #ok-form .modal__h2 { font-size: 26px; }
}