/*─────────────────────────────────────────────────────────────*/
/* Velvet Ear — Contact Form 7 Card Styling in Divi Footer     */
/*─────────────────────────────────────────────────────────────*/

/* Main Variables */
:root {
  /* Field Padding */
  --ve-cf7-field-padding:        0.8em 1em;
  --ve-cf7-field-padding-mobile: 0.64em 1em;

  /* Response Output Styling */
  --ve-cf7-response-fw:          500;   /* Font weight (400=normal, 500=medium, 600=semibold) */
  --ve-cf7-response-bw:          2.5px; /* Border width for response box */
}

/* Contact form container/card styling */
.wpcf7 {
  background: #e9e9e9;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(40,40,20,0.10);
  padding: 2.25rem 2.25rem 2.5rem 2.25rem;
  max-width: 600px;
  margin: 0 auto;
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

/* Responsive: smaller padding on mobile */
@media (max-width: 600px) {
  .wpcf7 {
    padding: 1.2rem 0.7rem 1.7rem 0.7rem;
    max-width: 98vw;
  }
}

/* Field groups (labels + input) */
.wpcf7-form > p {
  margin: 0 0 1.3rem 0;
  padding: 0;
}

/* Labels */
.wpcf7-form label {
  display: block;
  font-weight: 500;
  color: #5b5b4d;
  margin-bottom: 0.33em;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

/* Inputs, email, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  background: #cecece;
  border: 1.5px solid #eceadd;
  border-radius: .5em;
  padding: var(--ve-cf7-field-padding);
  margin: 0;
  font-size: 1.2rem;
  color: #3c3c2c;
  font-family: inherit;
  box-sizing: border-box;
  transition: border 0.18s;
}

/* Use smaller padding on mobile */
@media (max-width: 600px) {
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea {
    padding: var(--ve-cf7-field-padding-mobile);
  }
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  border-color: #bb3d43;
  outline: none;
}

/* Remove textarea resize handle */
.wpcf7-form textarea {
  min-height: 6em;
  resize: none;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
  width: 100%;
  display: block;
  margin: 1.7rem 0 0 0;
  font-size: 1.22rem;
  padding: 0.8em 0;
  border-radius: 2em;
  background: #4a6c91;
  color: #fff;
  font-weight: 550;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px 0 rgba(40,40,20,0.06);
  transition: background 0.18s, box-shadow 0.16s;
  letter-spacing: 0.03em;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
  background: #5b7c9e;
  box-shadow: 0 2px 14px 0 rgba(91,48,67,0.13);
}

/* Optional: Remove gap below form */
.wpcf7-form {
  margin-bottom: 0 !important;
}

/* Responsive tweaks on mobile */
@media (max-width: 600px) {
  .wpcf7 {
    padding: 2rem 0.9rem 1.1rem 0.9rem; /* card edge to fields */
  }
  .wpcf7-form > p {
    margin-bottom: 0.7rem;  /* vertical space between fields */
  }
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form textarea {
    padding: 0.7em 1em !important; /* inside field padding */
  }
}

/* ───── Make footer contact‑form card span full column width ───── */
footer .wpcf7 {
  width: 100%!important;
  max-width: 100%!important;   /* remove 600‑px cap        */
  margin: 0!important;         /* kill auto left/right gap */
}

/*─────────────────────────────────────────────────────────────*/
/* Contact Form 7 Response Message Styling (Success & Error)   */
/*─────────────────────────────────────────────────────────────*/

.wpcf7-response-output {
  font-weight: var(--ve-cf7-response-fw);
  border-width: var(--ve-cf7-response-bw);
  border-style: solid;
  padding: 1.1em 1.5em;
  border-radius: .5em;
  font-size: 1.1em;
  margin-top: 0rem;
  text-align: center;   /* ← THIS centers the text! */
}
/* Remove space above response box */
.wpcf7 .wpcf7-response-output {
  margin-top: 0 !important;
}

/* Remove margin from the <p> containing the button */
.wpcf7-form > p {
  margin-bottom: 0 !important;
}

.ve-cf7-overlay-spinner {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(60,60,60,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ve-cf7-spinner {
  width: 64px;
  height: 64px;
  border: 7px solid #e1e5ea;
  border-top: 7px solid #4a6c91;
  border-radius: 50%;
  animation: ve-woospin 0.7s linear infinite;
  background: none;
}
@keyframes ve-woospin {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* Completely hide the default CF7 spinner inside forms */
.wpcf7-spinner {
  display: none !important;
}

.wpcf7-form input[type="submit"] {
  margin-top: 0 !important;        /* No space above */
  margin-bottom: 1.5rem !important;/* Only space below */
}
.wpcf7-response-output {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}