/* ============================================
   Modal Contact Form 7 Integration
   Адаптація CF7 до існуючих стилів з ui/css/forms.css
   ВАЖЛИВО: Використовуємо ТІЛЬКИ класи з верстки
   ============================================ */

/* Form wrapper - hidden by default, shown by JS */
.modal .modal__form-wrapper {
  display: none;
}

.modal .modal__form-wrapper[style*="display: block"] {
  display: block !important;
}

/* No form fallback message */
.modal .modal__no-form {
  padding: 24px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  text-align: center;
}

.modal .modal__no-form p {
  margin: 8px 0;
  color: var(--text-primary);
}

.modal .modal__no-form strong {
  color: #856404;
}

/* ============================================
   CF7 Form Structure
   Використовуємо класи з forms.css
   ============================================ */

.modal .modal__form .wpcf7 {
  width: 100%;
}

.modal .modal__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================
   CF7 Response Messages - ПРИХОВУЄМО
   ============================================ */

/* Приховуємо стандартні CF7 повідомлення про помилки/успіх */
.modal .modal__form .wpcf7-response-output {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================
   CF7 Validation - використовуємо .input--error
   ============================================ */

/* ВАЖЛИВО: Приховуємо стандартні CF7 повідомлення з максимальною специфічністю */
.modal .modal__form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Показуємо наші кастомні повідомлення при помилці */
.modal .modal__form .input:has(.wpcf7-not-valid) .input__error {
  display: block !important;
}

.modal .modal__form .input-phone:has(.wpcf7-not-valid) .input-phone__error {
  display: block !important;
}

/* Додаємо червону рамку до невалідних полів */
.modal .modal__form .wpcf7-not-valid {
  border-color: var(--color-error) !important;
}

/* Червона рамка для input-phone wrapper */
.modal .modal__form .input-phone:has(.wpcf7-not-valid) .input-phone__wrapper {
  border-color: var(--color-error) !important;
}

/* ============================================
   CF7 Spinner - приховуємо
   ============================================ */

.modal .modal__form .wpcf7-spinner {
  display: none !important;
}

/* ============================================
   Loading State - використовуємо opacity
   ============================================ */

.modal .modal__form .wpcf7-form.submitting input[type="submit"],
.modal .modal__form .wpcf7-form.submitting button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================
   CF7 List Items (radio, checkbox)
   ============================================ */

.modal .modal__form .wpcf7-list-item {
  margin: 0;
}

.modal .modal__form .wpcf7-list-item-label {
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================
   Скидаємо CF7 стандартні стилі
   ============================================ */

.modal .modal__form p {
  margin: 0;
}

.modal .modal__form br {
  display: none;
}

/* ============================================
   Success Message (з верстки)
   ============================================ */

.modal__success {
  display: none;
  text-align: left;
  padding: 40px 20px;
}

.modal__success--visible {
  display: block;
}

.modal__success-title {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--color-gray-20);
  margin-bottom: 12px;
}

.modal__success-text {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--color-gray-30);
}

/* ============================================
   ВАЖЛИВО: Всі інші стилі беруться з:
   - ui/css/forms.css (.input, .input-phone, .input-dropdown, .checkbox)
   - ui/css/buttons.css (.btn)
   
   CF7 форма повинна використовувати ці класи!
   ============================================ */