/**
 * Сравнение с прототипом (ContactsSection, DesignersSection, CustomerReviews, OurSpecialists + index.css .modal):
 * 1) Модалка рендерится в footer вне .designers / .reviews / .specialists — дублируем их CSS-переменные на .modal.*
 * 2) В index.css прототипа `.modal p { font-size: 14px; margin: 20px 0 }` ломало отступы dialog-label (8px) и dialog-lead (18px)
 * 3) В CF7 `wpcf7_autop` отключён в плагине, чтобы не добавлялись <p>/<br> вокруг полей и в сетке 2 колонки
 * 4) Высота textarea в модалках в прототипе — от rows=5 (~132px), не фиксированные 112px
 */

/* --- Переменные секций на контейнере модалки --- */
.modal.designers__dialog {
  --des-terracotta: #c85e3d;
  --des-copper: #a76e4d;
  --des-graphite: #202321;
  --des-light: #f5f1e9;
  --des-milk: #fcfbf8;
  --des-muted: #d9d3c8;
  color: var(--des-graphite);
  max-width: 680px;
}

.modal.reviews__dialog {
  --reviews-terracotta: #c85e3d;
  --reviews-copper: #a76e4d;
  --reviews-graphite: #202321;
  --reviews-text: #242524;
  --reviews-milk: #f5f1e9;
  --reviews-surface: #fcfbf8;
  --reviews-border: #d9d3c8;
  color: var(--reviews-text);
  max-width: 680px;
}

.modal.specialists__dialog {
  --spec-terracotta: #c85e3d;
  --spec-copper: #a76e4d;
  --spec-graphite: #202321;
  --spec-light: #f5f1e9;
  --spec-milk: #fcfbf8;
  --spec-muted: #d9d3c8;
  color: var(--spec-graphite);
  max-width: 680px;
}

/* Перебиваем `.modal p { margin: 20px 0; font-size: 14px }` из landing.css */
.modal.designers__dialog .designers__dialog-label,
.modal.reviews__dialog .reviews__dialog-label,
.modal.specialists__dialog .specialists__dialog-label {
  margin: 0 0 8px;
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.modal.designers__dialog .designers__dialog-label {
  color: var(--des-terracotta);
}

.modal.reviews__dialog .reviews__dialog-label {
  color: var(--reviews-terracotta);
}

.modal.specialists__dialog .specialists__dialog-label {
  color: var(--spec-terracotta);
}

.modal.designers__dialog .designers__dialog-lead,
.modal.reviews__dialog .reviews__dialog-lead,
.modal.specialists__dialog .specialists__dialog-lead {
  margin: 0 0 18px;
  color: var(--text, #242524);
  font: 400 15px/1.55 Manrope, sans-serif;
}

.modal.designers__dialog h2,
.modal.reviews__dialog h2,
.modal.specialists__dialog h2 {
  margin: 0 0 12px;
  font-size: 32px;
}

/* --- Сброс CF7 --- */
.teplozver-cf7 .wpcf7,
.teplozver-cf7 .wpcf7-form {
  margin: 0;
}

.teplozver-cf7 .wpcf7-form > p {
  margin: 0;
}

.teplozver-cf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.teplozver-cf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #b85538;
  font: 500 12px/1.35 Manrope, sans-serif;
}

.teplozver-cf7 .wpcf7-response-output {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  border-width: 1px !important;
  border-radius: 10px !important;
  font: 400 13px/1.45 Manrope, sans-serif !important;
}

.teplozver-cf7 .wpcf7-spinner {
  position: absolute;
  margin: 0 0 0 8px;
}

.teplozver-cf7 .wpcf7-form-control.wpcf7-not-valid {
  border-color: rgb(184 85 56 / 0.85) !important;
}

/* Контакты: скрытый input внутри .contacts__file-btn — обёртка CF7 тоже прячется */
.contacts__file-btn .wpcf7-form-control-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

button.works__attach {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* Hero modals: choice cards instead of radio circles */
.modal.designers__dialog .hero-dialog__choices {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.modal.designers__dialog .hero-dialog__choices legend {
  margin: 0 0 10px;
  padding: 0;
  color: #202321;
  font: 600 13px/1.3 Manrope, sans-serif;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-form-control-wrap {
  display: block;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-list-item {
  display: block;
  margin: 0;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-list-item label {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 108px;
  margin: 0;
  padding: 16px 16px 14px;
  border: 1.5px solid #d9d3c8;
  border-radius: 18px;
  background: #fcfbf8;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-list-item label:hover {
  border-color: rgb(167 110 77 / 0.55);
  box-shadow: 0 10px 24px rgb(32 35 33 / 0.06);
}

.modal.designers__dialog .hero-dialog__choices input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal.designers__dialog .hero-dialog__choices label::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d9d3c8;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.modal.designers__dialog .hero-dialog__choices label:has(input:checked) {
  border-color: #c85e3d;
  background: #fff6f1;
  box-shadow: 0 12px 28px rgb(200 94 61 / 0.14);
}

.modal.designers__dialog .hero-dialog__choices label:has(input:checked)::after {
  border-color: #c85e3d;
  background: #c85e3d;
  box-shadow: inset 0 0 0 3.5px #fff;
}

.modal.designers__dialog .hero-dialog__choices label:focus-within {
  outline: 2px solid rgb(200 94 61 / 0.4);
  outline-offset: 2px;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-list-item-label {
  color: #202321;
  font: 600 16px/1.25 Manrope, sans-serif;
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-list-item-label::after {
  display: block;
  margin-top: 6px;
  color: rgb(36 37 36 / 0.62);
  font: 500 13px/1.35 Manrope, sans-serif;
}

.modal.designers__dialog .hero-dialog__choices--for .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after {
  content: "Примеры для готового дома";
}

.modal.designers__dialog .hero-dialog__choices--for .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after {
  content: "Решения до начала работ";
}

.modal.designers__dialog .hero-dialog__choices--for .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::after {
  content: "Подборка для интерьера";
}

.modal.designers__dialog .hero-dialog__choices--level .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after {
  content: "Базовое оборудование";
}

.modal.designers__dialog .hero-dialog__choices--level .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after {
  content: "Оптимальный баланс";
}

.modal.designers__dialog .hero-dialog__choices--level .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::after {
  content: "Максимум комфорта";
}

.modal.designers__dialog .hero-dialog__choices .wpcf7-not-valid-tip {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .modal.designers__dialog .hero-dialog__choices .wpcf7-radio {
    grid-template-columns: 1fr;
  }

  .modal.designers__dialog .hero-dialog__choices .wpcf7-list-item label {
    min-height: 0;
  }
}