/* Layout */
.cf7-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.cf7-col { flex: 1; }

/* Fields (shared) */
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: all .2s;
  box-sizing: border-box;
}

/* Uniform height for all single-line fields */
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select {
  height: 48px;          /* matches visuals of the text inputs */
  line-height: 24px;     /* keeps text vertically centered */
}

/* Focus */
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #0073e6;
  box-shadow: 0 0 0 2px rgba(0,115,230,.15);
  outline: 0;
}

/* Labels */
.wpcf7 label {
  display: block;
  margin-bottom: 5px;
  font: 600 14px/1.3 sans-serif;
  color: #333;
}

/* Submit row + spinner */
.cf7-submit { position: relative; }
.cf7-submit p { margin: 0; }
.cf7-submit .wpcf7-spinner {
  position: absolute !important;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* Button (no size change on hover) */
.cf7-submit input[type=submit] {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 52px;
  padding: 0 30px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, #0073e6, #005bb5);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: background .25s, filter .25s;
}
.cf7-submit input[type=submit]:hover {
  background: linear-gradient(135deg, #005bb5, #003d80);
  filter: brightness(.98);
}
.cf7-submit input[type=submit]:active { filter: brightness(.95); }

/* Dropdown arrow */
.wpcf7 select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* extra right padding so text doesn't overlap the arrow */
  padding-right: 42px;

  /* move arrow a bit left and center vertically */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 16px center;
  background-size: 12px;
}

/* iOS/Safari line-height quirk fix */
@supports (-webkit-touch-callout: none) {
  .wpcf7 select { line-height: normal; }
}

/* === CF7 submit button: add animation, keep existing look === */

/* Add motion but keep your current gradients/sizing */
.cf7-submit input[type=submit]{
  /* keep your existing properties; only add these: */
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 24px -12px rgba(13,83,197,.55); /* subtle depth */
  color:#fff !important;          /* pin text color */
  -webkit-text-fill-color:#fff;   /* Safari text pin */
}

/* Keep text visible on all states (override theme/link styles) */
.cf7-submit input[type=submit]:link,
.cf7-submit input[type=submit]:visited,
.cf7-submit input[type=submit]:hover,
.cf7-submit input[type=submit]:focus,
.cf7-submit input[type=submit]:active{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  text-decoration:none;
}

/* Hover: gentle lift & glow (keeps your gradient) */
.cf7-submit input[type=submit]:hover{
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.03);
  box-shadow: 0 16px 28px -12px rgba(13,83,197,.6);
}

/* Press: subtle push-in */
.cf7-submit input[type=submit]:active{
  transform: translateY(0) scale(0.97);
  box-shadow: 0 8px 18px -10px rgba(13,83,197,.55);
  filter: brightness(.98);
}

/* Keep spinner anchored while button moves (unchanged from yours) */
.cf7-submit{ position: relative; }
.cf7-submit .wpcf7-spinner{
  position: absolute !important;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* === CF7 error handling: red border instead of error text === */

/* Hide the default error messages */
.wpcf7-not-valid-tip {
  display: none !important;
}

/* Style invalid fields */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border: 2px solid #e60000 !important;
  box-shadow: 0 0 0 2px rgba(230,0,0,0.15);
}

/* Optional: animate to make it clearer */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  transition: border-color .2s, box-shadow .2s;
}

/* Remove red highlight once field is focused */
.wpcf7 input.wpcf7-not-valid:focus,
.wpcf7 select.wpcf7-not-valid:focus,
.wpcf7 textarea.wpcf7-not-valid:focus {
  border: 2px solid #0073e6 !important;       /* your normal focus blue */
  box-shadow: 0 0 0 2px rgba(0,115,230,.15);  /* match your focus glow */
}

/* === CF7 submit button: match CTA (solid color, no gradient swapping) === */
.cf7-submit input[type=submit]{
  /* lock solid background + radius to match CTA */
  background:#0D53C5 !important;
  border-radius:12px;

  /* keep text pinned white on all states */
  color:#fff !important;
  -webkit-text-fill-color:#fff;

  /* replace earlier transition (remove background anim flicker) */
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;

  /* depth like CTA */
  box-shadow:0 12px 24px -12px rgba(13,83,197,.55);
}

/* keep same solid background on all states (kills gradient overrides) */
.cf7-submit input[type=submit]:hover,
.cf7-submit input[type=submit]:focus,
.cf7-submit input[type=submit]:active{
  background:#0D53C5 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  text-decoration:none;
}

/* Hover: gentle lift + glow */
.cf7-submit input[type=submit]:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05);
  box-shadow:0 16px 28px -12px rgba(13,83,197,.6);
}

/* Pressed: slight push-in */
.cf7-submit input[type=submit]:active{
  transform:translateY(0) scale(0.97);
  filter:brightness(.98);
  box-shadow:0 8px 18px -10px rgba(13,83,197,.55);
}

/* Mobile: force all CF7 fields into one column */
@media (max-width: 767px) {
  .cf7-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .cf7-col {
    width: 100%;
    flex: 0 0 100%;
  }

  .wpcf7 label {
    margin-bottom: 12px;
  }

  .cf7-submit {
    margin-top: 8px;
  }
}