/* ============================================
   Система-Інвест — Попап «Залишити заявку».
   Тема-специфічний компонент (у статиці-еталоні відсутній).
   Форма — в один стовпчик; стилі інпутів як у формі футера (.footer-form).
   ============================================ */

body.si-modal-open { overflow: hidden; }

.si-modal[hidden] { display: none; }
.si-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.si-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 18, 36, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.si-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--color-navy); color: #fff;
  border-radius: 16px; padding: 36px 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.si-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.si-modal-close:hover { background: rgba(255, 255, 255, 0.22); }
.si-modal-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; margin: 0 0 8px; padding-right: 30px;
}
.si-modal-sub { font-size: 15px; opacity: 0.82; margin: 0 0 24px; }

/* Форма (один стовпчик) — інпути як у футері */
.si-modal-form input[type="text"],
.si-modal-form input[type="email"],
.si-modal-form input[type="tel"],
.si-modal-form textarea {
  background: #fff; border: none; border-radius: 6px;
  padding: 0 16px; height: 46px; width: 100%;
  font-family: var(--font-body); font-size: 14px; color: var(--color-navy);
  margin-bottom: 12px;
}
/* Фіксована висота як у футері (CF7 rows="10" інакше роздуває поле) */
.si-modal-form textarea { height: 106px; min-height: 0; padding: 14px 16px; resize: vertical; }
.si-modal-form input::placeholder,
.si-modal-form textarea::placeholder { color: rgba(0, 35, 67, 0.45); }
.si-modal-form input:focus,
.si-modal-form textarea:focus { outline: 2px solid var(--color-teal); }
.si-modal-form .btn,
.si-modal-form .wpcf7-submit { width: 100%; margin-top: 6px; }

/* CF7-повідомлення/помилки */
.si-modal-form .wpcf7-response-output {
  color: #fff; font-size: 13px; line-height: 1.4;
  margin: 14px 0 0; padding: 10px 14px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.si-modal-form .wpcf7-not-valid-tip { color: #ffb4b4; font-size: 12px; margin-top: -6px; margin-bottom: 8px; }
.si-modal-form .wpcf7-spinner { margin: 8px auto 0; display: block; }
.si-demo-note { font-size: 12px; opacity: 0.6; margin: 14px 0 0; line-height: 1.4; }
.si-demo-note code { background: rgba(255,255,255,0.12); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 560px) {
  .si-modal-card { padding: 30px 22px; }
}

/* ---- Форма футера через CF7 (сумісність) ----
   Контроли CF7 обгорнуті в span.wpcf7-form-control-wrap; наші .ff-* — на span-обгортках
   у CF7-шаблоні (з них grid-area). Демо-форма футера теж використовує span.ff-*. */
.footer-form > span { display: block; }
.footer-form .ff-message,
.footer-form .ff-message .wpcf7-form-control-wrap { height: 100%; }
.footer-form .wpcf7-form-control-wrap { display: block; width: 100%; }
/* Ряди — AUTO (щоб CF7-повідомлення про помилки під полями показувались, а не
   клипались). Проблема rows="10" вирішується фіксацією ВИСОТИ САМОГО textarea:
   на десктопі = email+gap+phone (106px) → поля вирівняні, textarea не роздуває ряди;
   при помилці ряд поля просто підростає під підказку. Мобайл — звичайна висота. */
.footer-form textarea { resize: vertical; }
@media (min-width: 641px) {
  .footer-form textarea { height: 106px; min-height: 0; }
}
@media (max-width: 640px) {
  .footer-form textarea { height: auto; min-height: 120px; }
}
/* Стійкість до CF7-autop: якщо кожен рядок загорнуто в <p>, розкриваємо його
   (display:contents), щоб .ff-* лишались grid-дітьми й сітка не «пливла»; авто-<br> геть. */
.footer-form p { display: contents; margin: 0; }
.footer-form br { display: none; }
/* CF7 рендерить сабміт як <input type="submit"> → .footer-form input{width:100%} його
   розтягує. Скидаємо ширину + teal (як btn-primary) + притискаємо праворуч. */
.footer-form input[type="submit"],
.footer-form .wpcf7-submit {
  width: auto; grid-area: btn; justify-self: end; align-self: start;
  background: var(--color-teal); color: #fff;
  /* [footer] як усі кнопки (.btn): 48px висота, 16px шрифт (було успадковано 46/14 з input) */
  height: 48px; padding-left: 40px; padding-right: 40px;
  border: none; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
}
.footer-form input[type="submit"]:hover,
.footer-form .wpcf7-submit:hover { background: #017885; }
.footer-form .wpcf7-not-valid-tip { color: #ffb4b4; font-size: 12px; margin-top: 4px; }
.footer-form .wpcf7-response-output {
  grid-column: 1 / -1; color: #fff; font-size: 13px; line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; padding: 8px 12px; margin: 6px 0 0;
}
/* Спінер — в область кнопки (ліворуч від неї), щоб не створював порожній ряд знизу. */
.footer-form .wpcf7-spinner { grid-area: btn; justify-self: start; align-self: center; margin: 0; }