/* Блок «форма прайс-листа». Разметку печатает
   components/pdf-form.php, точек вызова три: виджет Elementor, шорткод
   [freedes_pdf_form] и прямой вызов из шаблона темы.

   ЕДИНИЦА — REM, 1rem = 16px. Тот же переход, что тема прошла 28.08.2026:
   в пикселях размеры не меняются, но блок растёт вместе с настройкой
   шрифта у читателя, а не остаётся островом фиксированных величин.
   В пикселях остались только волосяные линии рамок и пороги
   медиа-запросов — пороги мерят окно, а не текст.

   Числа в комментариях приведены в пикселях: так они сверяются
   с разбором в _claude/STATE.md. Делить на 16 не нужно, значения те же. */

.pdf-form-widget {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    background-color: #F2F2F2;
}

/* Пол высоты — он же единственный рычаг размера буклета. Высоту блока
   задаёт колонка с формой (около 685px), картинка в неё вписывается,
   и крупнее собственной высоты блока стать не может. Пол поднимает блок
   до 740px на просторном экране — буклет прибавляет примерно двенадцатую
   часть, форма встаёт по центру.

   Второе слагаемое — страховка «помещаться в экран»: 200px это шапка
   и воздух вокруг блока. На невысоком окне пол опускается ниже высоты
   формы и просто перестаёт действовать, блок остаётся по форме. */
@media (min-width: 1025px) {
    .pdf-form-widget {
        min-height: min(46.25rem, calc(100vh - 12.5rem));
    }
}

.pdf-form-widget .desktop-bg,
.pdf-form-widget .mobile-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.pdf-form-widget .desktop-bg {
    display: block;
}

.pdf-form-widget .mobile-bg {
    display: none;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget {
        flex-direction: column;
    }

    .pdf-form-widget .desktop-bg {
        display: none;
    }

    .pdf-form-widget .mobile-bg {
        display: block;
    }
}

.pdf-form-widget .pdf-form-widget__form {
    position: relative;
    z-index: 15;
    width: 50%;
    padding: 3rem 0 3rem 4.1875rem;
    align-self: center; /* колонка ниже блока: центрируем, иначе форма
                           прижимается к верху, а буклет стоит во всю высоту */
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form {
        width: 100%;
        padding: 1.5rem 1rem 1rem;
    }
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__content {
    width: 100%;
    max-width: 29.1875rem;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__content {
        max-width: 100%;
        text-align: center;
    }
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__icon {
    margin-bottom: 0.75rem;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__icon {
        display: inline-block;
        /* 47 -> 40: значок держит верх колонки, и на телефоне каждая
           строка на счету. */
        width: 2.5rem;
        height: auto;
    }
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__title {
    width: 100%;
    max-width: 23.4375rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 2.125rem;
    color: #000;
    margin-bottom: 0.8125rem;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__title {
        max-width: 100%;
        font-size: 1.5rem;
        line-height: 1.875rem;
        margin-bottom: 0.75rem;
    }
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__description {
    width: 100%;
    max-width: 23.4375rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__description {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__description p {
    font-family: "Montserrat", sans-serif;
    /* Текст 400, заголовки 500 — таблица дизайнера от 28.08.2026.
       Блок был набран 500 целиком, включая бегущий текст. Заголовок
       и кнопка остаются 500: у кнопки формы заявки в теме тоже 500. */
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 120%;
    color: #000;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__description p strong {
    font-weight: 700;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form br {
    display: none;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form input[type="email"] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 100%;
    color: #000;
    border: none;
    outline: none;
    background-color: transparent;
    border-bottom: 1px solid #CECECE;
    margin-bottom: 2rem;
    /* Набивка своя. Тема даёт полям 20px сверху и 16px снизу, и поле
       вырастало до 73px при высоте текста 14. Зазор снизу — не воздух:
       в нём стоит подсказка «заполните поле», см. правило ниже. */
    padding: 0.5rem 0 0.75rem;
}

/* ЛОВУШКА TURNSTILE. Обёртка каптчи приезжает с ИНЛАЙНОВЫМ
   `margin-bottom: -15px`: она подтягивает кнопку вверх, в тот самый
   зазор, где появляется подсказка об ошибке. Раньше это обходилось
   отступом у кнопки — одно смещение гасилось другим, и пересчитывать
   пришлось бы оба. Теперь зазор задан один раз, полем почты, а чужое
   смещение снято.

   ФЛАГ ВАЖНОСТИ ЗДЕСЬ ЕДИНСТВЕННЫЙ СПОСОБ: инлайновый стиль
   специфичностью не перебивается. Если плагин каптчи сменит своё
   значение, геометрия блока не поедет. */
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .cf7-cf-turnstile {
    margin-bottom: 0 !important;
}

/* ПОДСКАЗКА ОБ ОШИБКЕ. CF7 печатает её блоком внутри СТРОЧНОГО <span>,
   поэтому в строке она места не занимает и следующая кнопка наезжала
   на неё сверху — читалась половина буквы.

   Обёртка становится блоком (у CF7 она уже `position: relative`),
   подсказка — слоем под чертой поля, ровно в том зазоре, который
   задан выше. Так при ошибке ничего не прыгает: кнопка стоит на месте,
   а текст появляется в готовом для него месте. */
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .wpcf7-form-control-wrap[data-name="your-email"] {
    display: block;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    line-height: 1.2;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form input[type="email"]::placeholder {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 100%;
    color: #A3A3A3;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form input[type="submit"] {
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 100%;
    text-transform: none;
    text-align: center;
    border: none;
    outline: none;
    /* БЛОЧНАЯ, и это не косметика. Кнопка шириной во всю колонку
       оставалась строчно-блочной, а следом за ней в разметке CF7 идёт
       перевод строки. Пробел рядом с кнопкой не помещался, переносился
       и создавал ПУСТУЮ СТРОКУ высотой 1.5 × 14px = 21px. Зазор до
       согласия выходил 45px вместо заданных 24. У блочного элемента
       пробел после него не образует строки вовсе. Измерено 03.09.2026. */
    display: block;
    padding: 1.0625rem 0.625rem;
    -webkit-border-radius: 5.4375rem;
    -moz-border-radius: 5.4375rem;
    border-radius: 5.4375rem;
    color: #000;
    background-color: #ABCF39;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    /* Мелкий текст блока набран ЗДЕСЬ и в .consent-note одинаково:
       гарнитура, вес и цвет заданы явно в обоих. Без веса приписка
       наследовала `body { font-weight: 300 }` из main.css и выходила
       Light рядом с Medium — при одном кегле это читается как другая
       гарнитура. Кегль 12 — ступень шкалы; 13 ступени не существует. */
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #545454;
    margin-bottom: 1rem;
}

/* Отступ до строки согласия. В `main.css` у `.consent-container` стоит
   `margin-top: var(--sp-32)` — самый большой зазор в колонке при том,
   что все прочие 24. Значение задаётся здесь, чтобы вертикальный ритм
   блока читался в одном файле, а не собирался из двух. */
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container {
    margin-top: 1.5rem;
}

/* ГАЛОЧКА НА ОБЩЕМ ЛЕВОМ КРАЮ. Здесь два разных сдвига, и убирать
   надо оба.

   Первый — свой: CF7 вешает на пункт списка `margin: 0 0 0 1em`,
   и галочка стояла на 16px правее значка, заголовка, поля и кнопки.

   Второй — чужой и невидимый в коде: согласие завёрнуто в три
   вложенных <span>, и все они СТРОЧНЫЕ. Между тегами в разметке CF7
   стоят переводы строк, а перевод строки между строчными элементами
   становится пробелом и сдвигает содержимое вправо примерно на 3px.
   Приписка ниже — обычный <p>, пробела перед ней нет, и строки
   переставали держать одну линию. Поэтому обёртки объявлены блочными:
   у блока пробел перед ним геометрию не меняет. Число 28px ниже
   становится верным для обеих строк. */
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container .wpcf7-form-control-wrap,
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container .wpcf7-acceptance,
.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container .wpcf7-list-item {
    display: block;
    margin: 0;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container label .wpcf7-list-item-label {
    text-align: left;
    font-weight: 400;
    /* Интерлиньяж задаётся здесь ЕЩЁ РАЗ, хотя он уже стоит у метки
       выше. В `main.css` есть `.wpcf7-form label span.wpcf7-list-item-label
       { line-height: 1 }` — правило бьёт прямо по этому элементу
       и перебивает наследование. Без строки ниже согласие набрано
       интерлиньяжем 1.0, а приписка — 1.45: три строки мелкого текста
       с двумя разными интерлиньяжами. */
    line-height: 1.45;
    color: #545454;
    padding: 0;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container input[type="checkbox"] {
    /* Флаг важности нужен: в `main.css` стоит `input[type="checkbox"]
       { display: none }` на все галочки сайта — там они оформлены
       кнопками-чипсами. Здесь галочка обычная и должна быть видна. */
    display: block !important;
    /* Поля задаются ЦЕЛИКОМ. У галочки есть собственные поля браузера
       (`margin: 3px 3px 3px 4px` в Chrome), и правило, задающее только
       верхнее, оставляло левое живым: галочка стояла на 4px правее
       общего края колонки, а зазор до текста выходил 13px вместо 10.
       Приписка ниже с её честными 28px не сходилась с текстом согласия
       именно из-за этого. */
    margin: 0.25rem 0 0;
    /* НЕ СЖИМАТЬ. Ширина у элемента флекса — пожелание, а не запрет:
       текст согласия длинный, места не хватало, и браузер отбирал
       у галочки 3px из 18. Текст начинался на 25px от края вместо 28,
       и приписка под ним, у которой честные 28, не сходилась с ним
       ровно на эти 3px. Измерено в браузере 03.09.2026. */
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: #a3cd3a;
}

.pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-note {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #545454;
    text-align: left;
    /* 28 = ширина галочки 18 + зазор 10. Строка встаёт ровно под текстом
       согласия. Прежние 45px были подобраны на глаз под чужой отступ CF7
       и промахивались на пиксель. */
    margin: 0 0 0 1.75rem;
}


.pdf-form-widget .pdf-form-widget__preview-image {
    width: 100%;
    position: relative;
    z-index: 10;
}

.pdf-form-widget .pdf-form-widget__preview-image img {
    /* Картинка ВЫНУТА ИЗ ПОТОКА. Раньше высоту блока задавала она: ширина
       колонки делилась на пропорции 2560/1924 и давала под 950px на широком
       экране. Одного `height: 100%` не хватило — процент считается от высоты
       колонки, а та у растянутого элемента флекса на момент раскладки ещё
       не известна (её же и определяет содержимое), поэтому браузер откатывал
       картинку на её собственную высоту. Абсолютное положение разрывает круг:
       колонка не даёт высоты вовсе, высоту блока задаёт форма, а картинка
       вписывается в готовый прямоугольник.

       `right: -55px` — прежний вылет за правый край блока. Буклет вырезан
       с прозрачным фоном, поэтому свободное место слева от него — фон блока,
       шва не видно. */
    position: absolute;
    top: 0;
    left: 0;
    /* Размеры заданы ЯВНО, а не четырьмя привязками. У абсолютно
       расположенной картинки `width: auto` означает не «растянись между
       привязками», а «возьми свой природный размер»: привязка `right`
       при этом просто отбрасывается, и в блок въезжали все 2560px
       исходника. Проценты же считаются от колонки, которая к этому
       моменту уже растянута по высоте формы. */
    width: calc(100% + 3.4375rem);
    max-width: none;
    height: 100%;
    margin-right: 0;
    object-fit: contain;
    object-position: right center;
}

@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__preview-image img {
        /* Колонка в столбик: картинка возвращается в поток и снова
           задаёт свою высоту сама. */
        position: static;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: -7.8125rem;
        height: auto;
    }
}

@media (max-width: 992.98px) {
    .pdf-form-widget .pdf-form-widget__preview-image img {
        margin-bottom: -6.5625rem;
    }
}

@media (max-width: 768.98px) {
    .pdf-form-widget .pdf-form-widget__preview-image img {
        margin-bottom: -5.9375rem;
    }
}

@media (max-width: 576.98px) {
    .pdf-form-widget .pdf-form-widget__preview-image img {
        margin-bottom: -3.125rem;
    }
}

.send-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0.5rem);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}

.send-form-modal .send-form-modal__modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 5rem;
    border-radius: 1rem;
    background-color: #fff;
    text-align: center;
    z-index: 9999;
}

.send-form-modal .send-form-modal__modal-content .send-form-modal__modal-content__icon {
    display: block;
    margin-bottom: 1.3125rem;
}

.send-form-modal .send-form-modal__modal-content .send-form-modal__modal-content__title {
    width: 100%;
    max-width: 23.4375rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 120%;
    text-align: center;
    margin-bottom: 1rem;
}

.send-form-modal .send-form-modal__modal-content .send-form-modal__modal-content__description {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 120%;
    margin-bottom: 1.3125rem;
}

.send-form-modal .send-form-modal__modal-content .send-form-modal__modal-content__close-btn-icon {
    position: absolute;
    top: 1.6875rem;
    right: 1.5rem;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    background-color: transparent;
}

.send-form-modal .send-form-modal__modal-content .send-form-modal__modal-content__close-btn {
    width: 100%;
    max-width: 13.125rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    -webkit-border-radius: 5.4375rem;
    -moz-border-radius: 5.4375rem;
    border-radius: 5.4375rem;
    padding: 1.3125rem 1.9375rem;
    color: #000000;
    background-color: #ABCF39;
}

/* ПОЛЯ ПО КРАЯМ, КОГДА БЛОК СТОИТ САМ ПО СЕБЕ.
   До 03.09.2026 он всегда лежал внутри секции Elementor, и поля давала
   она. Страницы блога переехали на шаблон «страница блоками», секций
   больше нет — и блок растянулся во всю ширину окна.

   Селектор бьёт по ПРЯМОМУ ребёнку #content, то есть по блоку,
   поставленному шорткодом самостоятельно. Там, где он ещё внутри
   Elementor (/test-pdf-form-widget/), он лежит глубже, и правило
   до него не достаёт.

   Значения те же, что у ленты записей под ним (`.post__main` в main.css:
   48px, 20px ниже 1200 и 16px ниже 768) — чтобы края блока и карточек
   стояли на одной вертикали. Менять только парой, иначе края разъедутся.
   Вертикальные поля свои: между блоками на шаблоне нет ничего, кроме
   того, что приносят они сами. */
#content > .pdf-form-widget {
    /* ШИРИНА СБРАСЫВАЕТСЯ В auto, и без этого поля бессмысленны:
       в основном правиле у блока `width: 100%`, а поля прибавляются
       к ширине, а не вычитаются из неё. Блок выходил «сто процентов
       плюс 96px» и уезжал за правый край окна. При `auto` он занимает
       то, что осталось от полосы за вычетом полей. */
    width: auto;
    margin: 3rem;
}

@media (max-width: 1199px) {
    #content > .pdf-form-widget {
        margin: 2rem 1.25rem;
    }
}

@media (max-width: 767px) {
    #content > .pdf-form-widget {
        margin: 1.5rem 1rem;
    }
}

/* ТЕЛЕФОН И ПЛАНШЕТ: БЛОК В ОДИН ЭКРАН.
   Колонка в столбик складывает высоты формы и картинки, и вместе они
   уезжали за нижний край телефона. Значения выше в этом же медиа-запросе
   (отступы колонки, заголовок, отступ под описанием) уже ужаты; здесь —
   то, у чего своего мобильного значения не было и что приезжало
   с широкого экрана.

   Картинка ограничена долей ВЫСОТЫ ОКНА, а не шириной: ширина блока
   на телефоне почти равна ширине экрана, и высота картинки из неё
   получалась больше трети экрана при любом кегле. `contain` не даёт
   пропорциям поехать, свободное место по бокам — прозрачный фон
   буклета, шва не видно. */
@media (max-width: 1024.98px) {
    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form input[type="email"] {
        margin-bottom: 1.25rem;
    }

    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form input[type="submit"] {
        padding: 0.875rem 0.625rem;
    }

    .pdf-form-widget .pdf-form-widget__form .pdf-form-widget__form__shortcode .wpcf7-form .consent-container {
        margin-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .pdf-form-widget .pdf-form-widget__preview-image img {
        /* Доля высоты окна, а не ширины блока. Второе объявление —
           для браузеров, знающих `svh`: на телефоне `vh` меряет окно
           БЕЗ адресной строки, то есть больше видимого, и картинка
           вылезала бы ровно на её высоту. */
        max-height: 32vh;
        max-height: 32svh;
        object-fit: contain;
    }
}