/* ymno.by — оформление форм заказа CF7
   159 «Форма заказа» (большая) и 226 «Узнать стоимость работ» (короткая).
   Только CSS, разметка CF7 не трогается. Подключать ПОСЛЕ styles/style.css.

   ВАЖНО про специфичность. В теме форма стилизуется через id, например
   #rsform_7_page_0 .formField input.rsform-input-box (1,2,1). Любое правило
   на одних классах проигрывает такому селектору независимо от порядка
   подключения. Поэтому здесь всё, что спорит с темой, идёт с тем же
   id-префиксом: при равной специфичности выигрывает файл, подключённый позже.

   Что именно перебиваем в styles/style.css:
     249  #rsform_7_page_0                              фон #7d89cd, padding 25/15/0
     252  #rsform_7_page_0 .d-tbl-cell                  padding 0 15px
     253  #rsform_7_page_0 .d-tbl-cell > div            margin-bottom 15px, min-height 55px
     255  ... input.rsform-input-box                    фон #e0e0fd, внутренняя тень
     256  #rsform_7_page_0 .formField textarea          height 85px
     257  #rsform_7_page_0 .formField select            margin-bottom 15px
     258  ... .rsform-block-type-of-work:before         синяя стрелка селекта
     259  #type_of_work                                 height 34px
   Плюс bootstrap.css: .col-lg-6 { flex:0 0 50%; max-width:50%; padding:0 15px }
   и на кнопке в теме стоят width:167px!important, color:#000!important.

   Скоуп: подключается из functions.php только на страницах под /regions/.
   Для раскатки на весь сайт снять условие в ymno_regions_form_styles(). */


/* ═══════════════ 1. Коробка ═══════════════ */

#rsform_7_page_0,
[id^="wpcf7-f226-"] form.wpcf7-form {
  background: #5361b3;
  border: 1px solid #6b78c9;
  border-radius: 8px;
  padding: 20px 20px 30px;
  display: block;
  width: auto;
  vertical-align: baseline;
  font-family: 'PT Sans', Arial, sans-serif;
}

[id^="wpcf7-f226-"] .h3-form-black {
  color: #fff;
  font: 700 18px 'PT Sans', Arial, sans-serif;
  margin: 0 0 14px;
}


/* ═══════════════ 2. Сетка ═══════════════ */

/* Большая форма. Ячейки растворяем и раскладываем поля сами: поле
   комментария занимает высоту двух полей, поэтому слева нет пустоты. */
#rsform_7_page_0 .d-tbl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
#rsform_7_page_0 .d-tbl-cell { display: contents; }

/* снимаем margin-bottom:15px и min-height:55px из темы — это они делали дыры */
#rsform_7_page_0 .d-tbl-cell > div { margin-bottom: 0; min-height: 0; }

#rsform_7_page_0 .rsform-block-type-of-work { grid-column: 1; grid-row: 1; }
#rsform_7_page_0 .rsform-block-school       { grid-column: 1; grid-row: 2; }
#rsform_7_page_0 .rsform-block-work-theme   { grid-column: 1; grid-row: 3; }
#rsform_7_page_0 .rsform-block-email        { grid-column: 1; grid-row: 4; }
#rsform_7_page_0 .rsform-block-additional   { grid-column: 2; grid-row: 1 / 3; display: block; }
#rsform_7_page_0 .rsform-block-name         { grid-column: 2; grid-row: 3; }
#rsform_7_page_0 .rsform-block-phone        { grid-column: 2; grid-row: 4; }
#rsform_7_page_0 .rsform-block-submit       { grid-column: 1 / -1; }

/* Короткая форма. .row и .col-lg-6 это бутстрап: колонка получает
   flex:0 0 50% и max-width:50%, из-за чего форма занимала половину ширины. */
[id^="wpcf7-f226-"] .row { display: block; margin: 0; }
[id^="wpcf7-f226-"] .col-lg-6 {
  flex: none;
  max-width: none;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
[id^="wpcf7-f226-"] .rsform-block-ok { grid-column: 1 / -1; }

.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .formField br { display: none; }


/* ═══════════════ 3. Подписи полей ═══════════════ */

/* Это голые текстовые узлы в обёртке поля, поэтому красим саму обёртку. */
#rsform_7_page_0 .rsform-block-type-of-work,
[id^="wpcf7-f226-"] .rsform-block-rab,
[id^="wpcf7-f226-"] .rsform-block-tel {
  color: #fff;
  font: 700 13px/1.3 'PT Sans', Arial, sans-serif;
}

/* тема рисует стрелку селекта псевдоэлементом, теперь она в фоне самого поля */
#rsform_7_page_0 .rsform-block-type-of-work:before { content: none; display: none; }


/* ═══════════════ 4. Поля ═══════════════ */

#rsform_7_page_0 .formField input.rsform-input-box,
#rsform_7_page_0 .formField select,
#rsform_7_page_0 .formField textarea,
[id^="wpcf7-f226-"] .formField input.rsform-input-box {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  padding: 0 13px;
  margin: 0;
  font: 400 14px/1.4 'PT Sans', Arial, sans-serif;
  color: #20233a;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

/* поля с подписью сверху отодвигаем от неё */
#rsform_7_page_0 select#type_of_work,
[id^="wpcf7-f226-"] .formField input.rsform-input-box { margin: 6px 0 0; }

/* у темы #type_of_work { height: 34px } — перебиваем через тот же id */
#rsform_7_page_0 select#type_of_work { height: 42px; }

#rsform_7_page_0 .formField select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2320233a' stroke-width='1.9' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* Поле комментария. Тут два подвоха: у CF7 стоит rows="10", у темы height:85px.
   Растягивание флексом или height:100% не помогает — собственная высота поля
   при rows="10" около 250px, и она всё равно распирает строки сетки.
   Поэтому высота задаётся явно и равна двум полям с промежутком:
   подпись 17 + отступ 6 + селект 42 + промежуток 12 + поле 42 = 119px. */
#rsform_7_page_0 .rsform-block-additional .wpcf7-form-control-wrap { display: block; height: 100%; }
#rsform_7_page_0 .formField textarea {
  height: 119px;
  min-height: 0;
  padding: 11px 13px;
  line-height: 1.5;
  resize: vertical;
}

#rsform_7_page_0 .formField input.rsform-input-box:focus,
#rsform_7_page_0 .formField select:focus,
#rsform_7_page_0 .formField textarea:focus,
[id^="wpcf7-f226-"] .formField input.rsform-input-box:focus {
  outline: none;
  border-color: #ffd21e;
  box-shadow: 0 0 0 3px rgba(255, 210, 30, .4);
}

#rsform_7_page_0 .formField ::placeholder,
[id^="wpcf7-f226-"] .formField ::placeholder { color: #6c7288; opacity: 1; }


/* ═══════════════ 5. Нижняя строка: согласие, кнопка, файл ═══════════════ */

#rsform_7_page_0 .rsform-block-submit,
[id^="wpcf7-f226-"] .rsform-block-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 18px;
  margin-top: 8px;
}

/* CF7 прогоняет форму через wpautop и заворачивает кнопку с файлом в <p>.
   Без display:contents флекс применяется к абзацу, а кнопка и файл
   остаются inline внутри него и встают на разные строки. */
#rsform_7_page_0 .rsform-block-submit > p,
[id^="wpcf7-f226-"] .rsform-block-ok > p { display: contents; }

/* согласие. !important обязателен: у блока инлайновый style="" */
.wpcf7 .ymno-consent {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #e7eaf9 !important;
}
.wpcf7 .ymno-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.wpcf7 .wpcf7-acceptance input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 15px; height: 15px; margin: 1px 0 0;
  border: 1px solid #fff; border-radius: 3px;
  background: transparent; cursor: pointer;
}
.wpcf7 .wpcf7-acceptance input[type=checkbox]:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5L4 7.5 10 1' stroke='%234352a9' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center no-repeat;
}

/* Кнопка. Селектор ОБЯЗАН включать #submit: у формы 159 кнопка одновременно
   id="submit" и class="rsform-submit-button", а тема бьёт по input#submit
   с width:167px!important, color:#000!important, border:none!important. */
.wpcf7 input#submit,
.wpcf7 input.rsform-submit-button {
  width: auto !important;
  min-width: 210px;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 34px;
  margin: 0 !important;
  float: none !important;
  background: #ffd21e !important;
  color: #20233a !important;
  border: none !important;
  border-bottom: 3px solid #d9a800 !important;
  border-radius: 6px;
  box-shadow: none !important;
  font: 700 16px 'PT Sans', Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s;
}
.wpcf7 input#submit:hover,
.wpcf7 input.rsform-submit-button:hover { background: #ffe15c !important; }

/* Файл. Обёртка поля становится флекс-элементом рядом с кнопкой,
   селектор по data-name, чтобы не задеть обёртку чекбокса согласия. */
.wpcf7 .wpcf7-form-control-wrap[data-name^="file"] { flex: 1; min-width: 210px; }
.wpcf7 input[type=file] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  font: 400 12px 'PT Sans', Arial, sans-serif;
  color: #e7eaf9;
}
.wpcf7 input[type=file]::file-selector-button {
  font: 700 12px 'PT Sans', Arial, sans-serif;
  color: #fff;
  background: #46539f;
  border: 1px solid #7d89d6;
  border-radius: 5px;
  padding: 9px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: background .15s;
}
.wpcf7 input[type=file]::file-selector-button:hover { background: #3d4a94; }


/* ═══════════════ 6. Сообщения об ошибках ═══════════════ */

/* Подсказка у поля. Лежит внутри синей коробки в обеих формах,
   поэтому светлая. Красная по смыслу, но достаточно светлая, чтобы читаться. */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.4 'PT Sans', Arial, sans-serif;
  color: #ffe0e0;
}
.wpcf7 .formField .wpcf7-form-control.wpcf7-not-valid {
  border-color: #ffaeae;
  box-shadow: 0 0 0 3px rgba(255, 138, 138, .35);
}

/* Итоговое сообщение формы.
   У большой формы CF7 выводит его ПОСЛЕ блока #rsform_7_page_0, то есть
   на белом фоне страницы. У короткой сама форма и есть коробка, поэтому
   сообщение оказывается на синем. Отсюда разные цвета. */
.wpcf7 .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #d9a800 !important;
  border-radius: 6px;
  font: 400 13px/1.45 'PT Sans', Arial, sans-serif;
}
[id^="wpcf7-f159-"] .wpcf7-response-output { color: #20233a; background: #fff8dd; }
[id^="wpcf7-f226-"] .wpcf7-response-output {
  color: #fff;
  background: rgba(0, 0, 0, .2);
  border-color: #ffd21e !important;
}
[id^="wpcf7-f226-"] form.sent .wpcf7-response-output { border-color: #9ae6b8 !important; }


/* ═══════════════ 7. Мобильная раскладка ═══════════════ */

@media (max-width: 640px) {
  #rsform_7_page_0,
  [id^="wpcf7-f226-"] form.wpcf7-form { padding: 16px 16px 22px; }

  #rsform_7_page_0 .d-tbl-row,
  [id^="wpcf7-f226-"] .col-lg-6 { grid-template-columns: 1fr; }

  #rsform_7_page_0 .rsform-block-type-of-work,
  #rsform_7_page_0 .rsform-block-school,
  #rsform_7_page_0 .rsform-block-work-theme,
  #rsform_7_page_0 .rsform-block-email,
  #rsform_7_page_0 .rsform-block-additional,
  #rsform_7_page_0 .rsform-block-name,
  #rsform_7_page_0 .rsform-block-phone,
  #rsform_7_page_0 .rsform-block-submit { grid-column: 1; grid-row: auto; }

  #rsform_7_page_0 .formField textarea { height: 96px; }

  .wpcf7 input#submit,
  .wpcf7 input.rsform-submit-button { width: 100% !important; min-width: 0; }
  .wpcf7 .wpcf7-form-control-wrap[data-name^="file"] { flex: 1 0 100%; }
}