/**
 * Estilo do Contact Form 7 na área Contato (HTML injetado no React).
 * Depende dos wrappers .instituto-cf7-* no modelo do formulário.
 */

.instituto-cf7-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.instituto-cf7-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .instituto-cf7-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.instituto-cf7-field {
  margin: 0;
}

.instituto-cf7-label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.4;
}

/* CF7 envolve o campo em span */
.instituto-cf7-field .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0;
}

.instituto-cf7-input,
.instituto-cf7-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.instituto-cf7-input::placeholder,
.instituto-cf7-textarea::placeholder {
  color: #94a3b8;
}

.instituto-cf7-input:hover,
.instituto-cf7-textarea:hover {
  border-color: #94a3b8;
}

.instituto-cf7-input:focus,
.instituto-cf7-textarea:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.instituto-cf7-textarea {
  min-height: 8rem;
  resize: vertical;
}

.instituto-cf7-actions {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.instituto-cf7-fields input[type="submit"].instituto-cf7-submit,
.instituto-cf7-submit.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff !important;
  background: #0d9488 !important;
  border: none !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.instituto-cf7-fields input[type="submit"].instituto-cf7-submit:hover,
.instituto-cf7-submit.wpcf7-submit:hover {
  background: #0f766e !important;
}

.instituto-cf7-fields input[type="submit"].instituto-cf7-submit:active,
.instituto-cf7-submit.wpcf7-submit:active {
  transform: translateY(1px);
}

/* Mensagens de resposta CF7 */
.instituto-cf7-fields .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.instituto-cf7-fields .wpcf7-mail-sent-ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.instituto-cf7-fields .wpcf7-validation-errors,
.instituto-cf7-fields .wpcf7-mail-sent-ng {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.instituto-cf7-fields span.wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #b91c1c;
  margin-top: 0.25rem;
}

.instituto-cf7-fields .wpcf7-not-valid {
  border-color: #f87171 !important;
}