.contact-wrapper label {
  display: block;
  margin-bottom: 6px;
  margin-top: 14px;
  font-size: var(--e-global-typography-secondary-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  color: var(--e-global-color-primary);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-field textarea {
  height: 140px;
  resize: none;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: #0d3b66;
  box-shadow: 0 0 0 3px rgba(13, 59, 102, 0.08);
}

.contact-submit {
  margin-top: 20px;
}

.contact-submit input[type="submit"] {
  width: 100%;
  background-color: var(--tg-primary-color);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.contact-submit input[type="submit"]:hover {
  background-color: #0b2f52;
}

/* ─── CF7 Validation Styles ─────────────────────────────────── */

/* Invalid field styling */
.contact-form-section .wpcf7-not-valid {
  border-color: #e53935 !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1) !important;
}

.contact-form-section .wpcf7-not-valid:focus {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2) !important;
}

/* Error message styling */
.contact-form-section .wpcf7-not-valid-tip {
  display: block;
  color: #e53935;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 500;
  animation: cf7ErrorSlideIn 0.3s ease;
}

/* Overall form response messages */
.contact-form-section .wpcf7-response-output {
  margin-top: 20px !important;
  padding: 15px !important;
  border-radius: 8px !important;
  font-size: 14px;
  text-align: center;
}

.contact-form-section .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-section .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-section .wpcf7 form.payment-required .wpcf7-response-output {
  background: #ffebee !important;
  color: #c62828 !important;
  border: 1px solid #ffcdd2 !important;
}

.contact-form-section .wpcf7 form.sent .wpcf7-response-output {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border: 1px solid #c8e6c9 !important;
}

.contact-form-section .wpcf7 form.failed .wpcf7-response-output,
.contact-form-section .wpcf7 form.aborted .wpcf7-response-output {
  background: #fff3e0 !important;
  color: #e65100 !important;
  border: 1px solid #ffe0b2 !important;
}

/* Hide the ugly default spinner during submission */
.contact-form-section .wpcf7-spinner {
  margin: 10px auto 0;
  display: block;
}

@keyframes cf7ErrorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}