/* CONTACT FORM 7 UNIVERSAL STYLING */
.wpcf7 form {
  max-width: 800px; margin: 0 auto;
    font-family: "Poppins","Barlow Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.wpcf7 form table { width:100%; border-collapse:collapse; margin:0 auto; table-layout:fixed; }
.wpcf7 form td { padding:5px; vertical-align:middle; }
.wpcf7 form label { font-weight:bold; color:#333; display:inline-block; font-family: inherit; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select, .wpcf7 textarea{
  width:100%; padding:10px; font-size:15px; border:1px solid #ccc; border-radius:4px;
  color:#333; background-color:#fff; box-sizing:border-box; max-width:100%; font-family: inherit;
}
@media (min-width:1025px){
  .wpcf7 form tr td:first-child{ width:240px; white-space:nowrap; vertical-align:middle; }
  .wpcf7 form tr td:last-child{ width:auto; }
  .wpcf7 form input[type="text"],
  .wpcf7 form input[type="email"],
  .wpcf7 form input[type="tel"],
  .wpcf7 form input[type="date"],
  .wpcf7 select, .wpcf7 textarea{ width:400px; }
}
@media (max-width:768px){
  .wpcf7 form table, .wpcf7 form tr, .wpcf7 form td{
    display:block; width:100%; margin:0 auto; text-align:left;
  }
  .wpcf7 form td{ padding:0; margin-bottom:14px; }
  .wpcf7 form label{ display:block; margin-bottom:6px; }
  .wpcf7 form input, .wpcf7 form select, .wpcf7 form textarea{
    margin-top:0; margin-bottom:0;
  }
}

/* CHECKBOXES AND RADIO BUTTONS */
.wpcf7-checkbox, .wpcf7-radio{
  display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:5px; align-items:center;
}
.wpcf7-checkbox .wpcf7-list-item, .wpcf7-radio .wpcf7-list-item{
  width:48%; display:flex; align-items:center; margin-bottom:4px;
}
.wpcf7-checkbox input[type="checkbox"], .wpcf7-radio input[type="radio"]{ margin-right:5px; }
.wpcf7-list-item-label{ margin-left:6px; position:relative; top:-2px; display:inline-block; white-space:nowrap; }
@media (max-width:768px){
  .wpcf7-checkbox, .wpcf7-radio{ flex-direction:column; align-items:flex-start; }
  .wpcf7-checkbox .wpcf7-list-item, .wpcf7-radio .wpcf7-list-item{ width:100%; }
}

/* SUBMIT BUTTON (legacy block kept for parity) */
.wpcf7 input[type="submit"]{
  background-color:#33ccff; color:#fff; font-size:16px; padding:12px 24px; border-radius:6px;
  text-decoration:none; cursor:pointer; transition:background-color .3s ease, transform .2s ease;
}
.wpcf7 input[type="submit"]:hover{ background-color:#222; transform:scale(1.0); }
.wpcf7 input[type="submit"]:active{ background-color:#33ccff; transform:scale(1.02); }

/* LABEL ENHANCEMENTS */
.wpcf7 form .required-label::before{ content:"* "; color:red; font-weight:bold; }
.wpcf7 form .optional-label::before{ content:""; display:inline-block; width:9px; }

/* CAPTCHA & MISC UTILITIES */
.required-note-row em{ font-size:14px; color:#333; display:block; text-align:center; }
.required-note-row em::before{ content:"* "; color:red; font-weight:bold; }
.cf7ic-row{ text-align:center; }
.cf7ic-wrapper{ display:flex; justify-content:center; align-items:center; width:100%; margin:10px 20px; }
/* .cf7ic-wrapper img, .cf7ic-wrapper input{ margin:0 5px; } */
.captcha-cell{ text-align:center !important; padding-top:40px; }
.cf7ic-row .cf7ic{ justify-content:center !important; }

/* UNIVERSAL BUTTON (newer block that overrides where both apply) */
.universal-button, .wpcf7 input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--btn-bg,#00ccff); color: var(--btn-text,#fff);
  padding: var(--btn-padding,12px 28px); border-radius: var(--btn-radius,50px);
  border:2px solid var(--btn-border,#00ccff);
  box-shadow: var(--btn-shadow,0 4px 8px rgba(0,0,0,.2));
  font-size: var(--btn-font-size,1rem); font-weight: var(--btn-font-weight,600);
  letter-spacing: var(--btn-letter-spacing,0);
  font-family: inherit; text-decoration:none; cursor:pointer;
  transition: all .3s ease; line-height:1.2; width:auto; max-width:none;
}
.universal-button:hover, .wpcf7 input[type="submit"]:hover{
  background: var(--btn-bg-hover,#000) !important; color: var(--btn-text-hover,#00ccff) !important;
  border-color: var(--btn-border,#00ccff);
  box-shadow: var(--btn-shadow-hover,0 6px 12px rgba(0,0,0,.3)); transform:none;
}
.universal-button.block{ display:block; width:fit-content; margin:0 auto; }
.universal-button i, .wpcf7 input[type="submit"] i{ font-size:1.1em; }

/* CF7 wrapper & spinner centering + icon support */
.wpcf7 .wpcf7-submit-wrap{ display:block; width:fit-content; margin:0 auto; position:relative; }
.wpcf7 .wpcf7-submit-wrap .wpcf7-spinner{
  position:absolute; top:50%; left:100%; transform:translate(8px,-50%); pointer-events:none; margin:0;
}
.wpcf7 .wpcf7-submit-wrap > input[type="submit"]{ display:inline-flex; margin:0; line-height:1; }
.wpcf7 .wpcf7-submit-wrap::before{ content:none; }
.wpcf7 .wpcf7-submit-wrap[class*="wpi-"] > input[type="submit"]{ padding-left:46px; }
/* Default paper-plane icon for any CF7 submit wrap */
.wpcf7 .wpcf7-submit-wrap::before{
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free";
  font-weight:900;
  content:"\f1d8"; /* paper-plane */
  position:absolute; left:21px; top:50%; transform:translateY(-50%);
  font-size:1.05em; color:var(--btn-text,#fff); pointer-events:none;
}

.wpcf7 .wpcf7-submit-wrap:hover::before,
.wpcf7 .wpcf7-submit-wrap:focus-within::before{ color:var(--btn-text-hover,#00ccff); }

/* Per-form icon variations (override default) */
.wpcf7 .wpcf7-submit-wrap.wpi-envelope::before     { content:"\f0e0" !important; } /* envelope */
.wpcf7 .wpcf7-submit-wrap.wpi-drone::before        { content:"\f85f" !important; } /* drone (solid) */
.wpcf7 .wpcf7-submit-wrap.wpi-check::before        { content:"\f00c" !important; } /* check */
.wpcf7 .wpcf7-submit-wrap.wpi-clipboard::before    { content:"\f46d" !important; } /* clipboard-list */
.wpcf7 .wpcf7-submit-wrap.wpi-construction::before { content:"\f807" !important; } /* hard-hat */
.wpcf7 .wpcf7-submit-wrap.wpi-tower::before        { content:"\f519" !important; } /* broadcast-tower */
.wpcf7 .wpcf7-submit-wrap.wpi-insurance::before    { content:"\f3ed" !important; } /* file-invoice */
.wpcf7 .wpcf7-submit-wrap.wpi-roofing::before      { content:"\f5ba" !important; } /* house-damage */
.wpcf7 .wpcf7-submit-wrap.wpi-tree::before         { content:"\f1bb" !important; } /* tree */
.wpcf7 .wpcf7-submit-wrap.wpi-trees::before        { content:"\f724" !important; } /* trees */
.wpcf7 .wpcf7-submit-wrap.wpi-mapping::before      { content:"\f5a0" !important; } /* draw-polygon */
.wpcf7 .wpcf7-submit-wrap.wpi-video::before        { content:"\f03d" !important; } /* video camera */


/* === CF7 invalid look: black border + cyan tint + cyan text (ASCII only) === */

/* Inline tip stays visible and cyan */
.wpcf7 form .wpcf7-not-valid-tip{
  display:block !important;
  color:#00ccff !important;
  margin-top:6px;
  font-size:0.95em;
}

/* Invalid field visuals */
.wpcf7 form .wpcf7-not-valid,
.wpcf7 form [aria-invalid="true"]{
  /* keep the cyan halo from earlier */
  outline:2px solid rgba(0,204,255,0.30);
  box-shadow:0 0 0 3px rgba(0,204,255,0.12);

  /* your requested changes */
  border-color:#000000 !important;                /* black border */
  background-color:rgba(0,204,255,0.12) !important;/* cyan fill (soft) */
  color:#00ccff !important;                       /* field text cyan */
  caret-color:#00ccff !important;                 /* cursor cyan */
}

/* Placeholder color while invalid */
.wpcf7 form .wpcf7-not-valid::placeholder,
.wpcf7 form [aria-invalid="true"]::placeholder{
  color:#00ccff !important;
  opacity:0.85;
}

/* Row label goes cyan while row is invalid */
.quote-form-table tr.df-invalid > td:first-child label,
.wpcf7 form .df-invalid label{
  color:#00ccff !important;
}

/* When user has filled the field (tentative local validity), restore neutral look */
.wpcf7 form .df-tentative-valid{
  background-color:#ffffff !important;
  color:#333333 !important;
  outline:none !important;
  box-shadow:none !important;
  border-color:#cccccc !important;
}
.wpcf7 form .df-tentative-valid::placeholder{ color:#999999 !important; }

/* Scroll margin so focus lands below sticky header */
.wpcf7 form .wpcf7-not-valid,
.wpcf7 form [aria-invalid="true"]{

/* === CF7 Invalid States — black border, cyan fill/text + halo (ASCII only) === */
:root { --df-cyan: #00ccff; }

/* Label goes cyan while the row is invalid */
.wpcf7 form tr.df-invalid label,
.wpcf7 form .df-invalid label {
  color: var(--df-cyan) !important;
}

/* Inputs marked invalid: handle all three signals (row, class, aria) */
.wpcf7 form tr.df-invalid input,
.wpcf7 form tr.df-invalid select,
.wpcf7 form tr.df-invalid textarea,
.wpcf7 form .wpcf7-not-valid,
.wpcf7 form [aria-invalid="true"] {
  background-color: rgba(0, 204, 255, 0.12) !important;  /* cyan fill */
  border: 2px solid #000 !important;                      /* black border */
  color: var(--df-cyan) !important;                       /* cyan text */
  box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.25) !important; /* cyan halo */
  outline: none !important;
}

/* Keep the halo when focused; border stays black */
.wpcf7 form tr.df-invalid input:focus,
.wpcf7 form tr.df-invalid select:focus,
.wpcf7 form tr.df-invalid textarea:focus,
.wpcf7 form .wpcf7-not-valid:focus,
.wpcf7 form [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(0, 204, 255, 0.35) !important;
}

/* Placeholder tint while invalid */
.wpcf7 form tr.df-invalid input::placeholder,
.wpcf7 form tr.df-invalid textarea::placeholder,
.wpcf7 form .wpcf7-not-valid::placeholder,
.wpcf7 form [aria-invalid="true"]::placeholder {
  color: #33d6ff; opacity: 1;
}

/* Autofill override on invalid (Chrome) */
.wpcf7 form tr.df-invalid input:-webkit-autofill,
.wpcf7 form .wpcf7-not-valid:-webkit-autofill,
.wpcf7 form [aria-invalid="true"]:-webkit-autofill {
  -webkit-text-fill-color: var(--df-cyan) !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0, 204, 255, 0.12) inset !important;
  border: 2px solid #000 !important;
}

/* Revert visuals as the user fixes the field (forms.js adds .df-tentative-valid) */
.wpcf7 form input.df-tentative-valid,
.wpcf7 form select.df-tentative-valid,
.wpcf7 form textarea.df-tentative-valid {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
}

/* CF7 tip bubble on cyan background: readable black text */
.wpcf7-not-valid-tip {
  color: #000 !important;
  background: rgba(0, 204, 255, 0.18);
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: 6px;
  display: inline-block;
}

/* High-specificity fallback inside section-wrapper if theme wins */
.section-wrapper .wpcf7 form tr.df-invalid input,
.section-wrapper .wpcf7 form tr.df-invalid select,
.section-wrapper .wpcf7 form tr.df-invalid textarea {
  background-color: rgba(0, 204, 255, 0.12) !important;
  border: 2px solid #000 !important;
  color: var(--df-cyan) !important;
}

  scroll-margin-top:120px;
}


/* === DF CF7 invalid visuals (ASCII only) === */
:root { --df-cyan: #00ccff; }

/* Labels turn cyan while the row or the control is invalid */
.wpcf7 form .df-label-invalid,
.wpcf7 form tr.df-row-invalid > td:first-child > label {
  color: var(--df-cyan) !important;
}

/* Invalid text/select/textarea (not check/radio): white bg, black border, cyan text, cyan halo */
.wpcf7 form .df-field-invalid:not([type="checkbox"]):not([type="radio"]),
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"],
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea).wpcf7-not-valid {
  background-color: #ffffff !important;          /* no cyan fill */
  border: 2px solid #000000 !important;          /* black border */
  color: var(--df-cyan) !important;              /* cyan text */
  box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.25) !important; /* halo */
  outline: none !important;
}

/* Focused invalid field: slightly stronger halo */
.wpcf7 form .df-field-invalid:focus {
  box-shadow: 0 0 0 4px rgba(0, 204, 255, 0.35) !important;
}

/* Checkbox/radio: color the option labels while invalid */
.wpcf7 form tr.df-row-invalid .wpcf7-list-item-label,
.wpcf7 form input[type="checkbox"][aria-invalid="true"] + .wpcf7-list-item-label,
.wpcf7 form input[type="radio"][aria-invalid="true"] + .wpcf7-list-item-label,
.wpcf7 form .wpcf7-not-valid + .wpcf7-list-item-label {
  color: var(--df-cyan) !important;
}

/* When user fixes the field, revert to normal (your base styles apply) */
.wpcf7 form :is(input, select, textarea):not(.df-field-invalid) {
  box-shadow: none;
}

/* === DF CF7 invalid UX (ASCII only) === */
:root { --df-cyan: #00ccff; }

/* Ensure CF7 inline tip is visible and placed under the field */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  visibility: visible !important;
  margin-top: 6px;
  font-size: 0.92rem;
  color: #000000; /* keep tip text black per your request */
  background: transparent; /* no cyan block behind the message */
  padding: 0;
  border: 0;
}

/* Labels turn cyan while invalid */
.wpcf7 form .df-label-invalid,
.wpcf7 form tr.df-row-invalid > td:first-child > label,
.wpcf7 form tr.df-row-invalid .wpcf7-list-item-label {
  color: var(--df-cyan) !important;
}

/* Invalid fields: white bg, black border, cyan text, cyan halo */
.wpcf7 form .df-field-invalid:not([type="checkbox"]):not([type="radio"]),
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"],
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea).wpcf7-not-valid {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  color: var(--df-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.25) !important;
  outline: none !important;
}

/* Stronger halo on focus */
.wpcf7 form .df-field-invalid:focus {
  box-shadow: 0 0 0 4px rgba(0, 204, 255, 0.35) !important;
}

/* Placeholder text becomes cyan while invalid (cross-browser) */
.wpcf7 form .df-field-invalid::placeholder { color: var(--df-cyan) !important; opacity: 1; }
.wpcf7 form .df-field-invalid::-webkit-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid::-moz-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid:-ms-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid::-ms-input-placeholder { color: var(--df-cyan) !important; }

/* When corrected, revert to normal (your base styles apply) */
.wpcf7 form :is(input, select, textarea):not(.df-field-invalid) { box-shadow: none; }

/* === DF CF7 invalid UX v2 (ASCII only) === */
:root { --df-cyan: #00ccff; }

/* Keep CF7's tip visible under the field; do not highlight it */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  visibility: visible !important;
  margin-top: 6px;
  font-size: 0.92rem;
  color: #000000;
  background: transparent;
  padding: 0;
  border: 0;
}

/* Labels turn cyan while their row/field is invalid */
.wpcf7 form label.df-label-invalid,
.wpcf7 form tr.df-row-invalid > td:first-child > label,
.wpcf7 form tr.df-row-invalid .wpcf7-list-item-label {
  color: var(--df-cyan) !important;
}

/* Invalid fields: cyan fill, 2px black border, cyan text, no halo */
.wpcf7 form .df-field-invalid:not([type="checkbox"]):not([type="radio"]),
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"],
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea).wpcf7-not-valid {
  background-color: #e6fbff !important; /* light cyan inside the box */
  border: 2px solid #000000 !important;  /* 2px black border */
  color: var(--df-cyan) !important;      /* input text cyan */
  box-shadow: none !important;           /* remove halo */
  outline: none !important;
}

/* Stronger border only while focused (still no halo) */
.wpcf7 form .df-field-invalid:focus {
  border-color: #000000 !important;
  box-shadow: none !important;
}

/* Placeholder text becomes cyan while invalid (cross-browser) */
.wpcf7 form .df-field-invalid::placeholder { color: var(--df-cyan) !important; opacity: 1; }
.wpcf7 form .df-field-invalid::-webkit-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid::-moz-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid:-ms-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form .df-field-invalid::-ms-input-placeholder { color: var(--df-cyan) !important; }

/* Once valid, revert to normal */
.wpcf7 form :is(input, select, textarea):not(.df-field-invalid) {
  box-shadow: none !important;
}

/* === DF CF7 invalid UX v3 (ASCII only) === */
:root { --df-cyan: #00ccff; --df-radius: 6px; }

/* 1) LABEL -> CYAN when the row contains an invalid control */
.wpcf7 form tr:has(:is(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"])) > td:first-child > label,
.wpcf7 form p:has(:is(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"])) > label,
.wpcf7 form div:has(:is(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"])) > label {
  color: var(--df-cyan) !important;
}

/* If the invalid thing is a checkbox/radio group, tint its item labels too */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox:has(input[aria-invalid="true"]) .wpcf7-list-item-label,
.wpcf7 .wpcf7-form-control.wpcf7-radio:has(input[aria-invalid="true"])   .wpcf7-list-item-label {
  color: var(--df-cyan) !important;
}

/* 2) CF7 inline tip: always visible, under the field (no cyan background) */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  visibility: visible !important;
  margin-top: 6px;
  font-size: 0.92rem;
  color: #000000;
  background: transparent;
  padding: 0;
  border: 0;
}

/* 3a) TEXT/SELECT/TEXTAREA invalid: cyan fill, 2px black border, rounded */
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"],
.wpcf7 form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea).wpcf7-not-valid {
  background-color: #e6fbff !important;
  border: 2px solid #000000 !important;
  border-radius: var(--df-radius) !important;
  color: var(--df-cyan) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3b) CHECKBOX/RADIO group invalid: same border/rounding + top padding */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox:has(input[aria-invalid="true"]),
.wpcf7 .wpcf7-form-control.wpcf7-radio:has(input[aria-invalid="true"]) {
  background-color: #e6fbff !important;
  border: 2px solid #000000 !important;
  border-radius: var(--df-radius) !important;   /* fix square corners */
  padding: 10px 12px 10px 12px !important;      /* add comfortable top padding */
  box-shadow: none !important;
  box-sizing: border-box;
  /* keep your existing flex layout from forms.css */
}

/* keep items from hugging the top edge; gentle vertical rhythm */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-form-control.wpcf7-radio   .wpcf7-list-item {
  margin: 4px 16px 4px 0;
}

/* placeholders cyan while invalid (cross-browser) */
.wpcf7 form :is(input, textarea)[aria-invalid="true"]::placeholder { color: var(--df-cyan) !important; opacity: 1; }
.wpcf7 form :is(input, textarea)[aria-invalid="true"]::-webkit-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form :is(input, textarea)[aria-invalid="true"]::-moz-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form :is(input, textarea)[aria-invalid="true"]:-ms-input-placeholder { color: var(--df-cyan) !important; }
.wpcf7 form :is(input, textarea)[aria-invalid="true"]::-ms-input-placeholder { color: var(--df-cyan) !important; }

/* === DF CF7 invalid UX styles (ASCII only) === */
:root { --df-cyan: #00ccff; --df-radius: 6px; }

/* Input/select/textarea when invalid */
.wpcf7 .df-invalid {
  background-color: #e6fbff !important;  /* cyan fill inside the box */
  border: 2px solid #000000 !important;   /* 2px black border */
  border-radius: var(--df-radius) !important;
  color: var(--df-cyan) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Turn the label cyan when the row is invalid (tables or block rows) */
.wpcf7 tr.df-row-invalid > td:first-child > label,
.wpcf7 p.df-row-invalid > label,
.wpcf7 .df-row-invalid > label {
  color: var(--df-cyan) !important;
}

/* Checkbox/radio group frame when invalid */
.wpcf7 .df-invalid-group {
  background-color: #e6fbff !important;
  border: 2px solid #000000 !important;
  border-radius: var(--df-radius) !important;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

/* Add a little breathing room for each checkbox/radio item */
.wpcf7 .df-invalid-group .wpcf7-list-item { margin: 4px 16px 4px 0 !important; }

/* CF7 inline tip: show it and keep it simple under the field */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  visibility: visible !important;
  margin-top: 6px;
  font-size: 0.92rem;
  color: #000000;
  background: transparent;
  padding: 0;
  border: 0;
}

/* Placeholder color while invalid */
.wpcf7 .df-invalid::placeholder { color: var(--df-cyan) !important; opacity: 1; }

/* === CF7 checkbox/radio group box (ASCII only) === */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox,
.wpcf7 .wpcf7-form-control.wpcf7-radio {
  /* container box */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 18px;
  padding: 12px 14px;
  border: 2px solid #000000;
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
}

/* two columns on desktop, full width on small screens */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 4px 0;
  width: 48% !important; /* keep two-up at larger sizes */
}
@media (max-width: 768px) {
  .wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
  .wpcf7 .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
    width: 100% !important;
  }
}

/* tidy label text wrapping inside each list item */
.wpcf7 .wpcf7-list-item-label {
  white-space: normal;
  line-height: 1.25;
}

/* make sure the actual inputs don’t get cramped */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"],
.wpcf7 .wpcf7-form-control.wpcf7-radio input[type="radio"] {
  flex: 0 0 auto;
}

/* CF7 checkbox/radio group box — widened text + exclude CAPTCHA (ASCII only) */

/* Normal state: 1px light gray, rounded, padded, same width behavior.
   Exclude CAPTCHA wrappers and acceptance fields. */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox:not(.cf7ic):not(.cf7ic-wrapper):not(.wpcf7-acceptance),
.wpcf7 .wpcf7-form-control.wpcf7-radio:not(.cf7ic):not(.cf7ic-wrapper):not(.wpcf7-acceptance) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 18px;
  padding: 12px 14px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Match desktop control width (inputs are 400px at >=1025px) */
@media (min-width: 1025px) {
  .wpcf7 .wpcf7-form-control.wpcf7-checkbox:not(.cf7ic):not(.cf7ic-wrapper):not(.wpcf7-acceptance),
  .wpcf7 .wpcf7-form-control.wpcf7-radio:not(.cf7ic):not(.cf7ic-wrapper):not(.wpcf7-acceptance) {
    width: 400px;
    max-width: 400px;
  }
}

/* W I D E N   T E X T: one item per line on desktop (roughly 2x chars before wrap) */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-form-control.wpcf7-radio    .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 4px 0;
  width: 100% !important;   /* was 48% — now full width for longer labels */
}

/* Mobile already stacks; keep it explicit */
@media (max-width: 768px) {
  .wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
  .wpcf7 .wpcf7-form-control.wpcf7-radio    .wpcf7-list-item {
    width: 100% !important;
  }
}

/* Labels wrap cleanly and can span the full row */
.wpcf7 .wpcf7-list-item-label {
  white-space: normal;
  line-height: 1.25;
  flex: 1 1 auto;
}

/* Keep inputs from shrinking */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"],
.wpcf7 .wpcf7-form-control.wpcf7-radio    input[type="radio"] {
  flex: 0 0 auto;
}

/* Invalid state only: 2px black border (matches other fields) */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox[aria-invalid="true"],
.wpcf7 .wpcf7-form-control.wpcf7-radio[aria-invalid="true"] {
  border: 2px solid #000000;
}

/* Hard exclude CAPTCHA block from any box styling (safety net) */
.wpcf7 .cf7ic-wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ==== CF7 Image CAPTCHA — hard exclude from boxed styling (ASCII only) ==== */

/* Nuke borders/rounding/background/shadows just inside the CAPTCHA row */
.wpcf7 .cf7ic-row,
.wpcf7 .cf7ic-row td,
.wpcf7 .cf7ic-row .cf7ic-wrapper,
.wpcf7 .cf7ic-row .cf7ic,
.wpcf7 .cf7ic-row * {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep spacing and centering for the CAPTCHA controls */
.wpcf7 .cf7ic-row .cf7ic-wrapper {
  margin: 10px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Safety: make sure our checkbox/radio boxes never grab the CAPTCHA */
.wpcf7 .cf7ic-row .wpcf7-form-control.wpcf7-checkbox,
.wpcf7 .cf7ic-row .wpcf7-form-control.wpcf7-radio {
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* ===== CF7 invalid state (class-based, no browser "glow") ===== */
:root { --df-cyan: #00ccff; }

.wpcf7 .df-invalid-control,
.wpcf7 .wpcf7-not-valid {
  border: 2px solid #000 !important;
  background: rgba(0,204,255,0.12) !important; /* cyan fill inside */
  color: var(--df-cyan) !important;
  outline: none !important;
  box-shadow: none !important; /* kill outer glow */
}

/* Placeholders turn cyan when invalid */
.wpcf7 .df-invalid-control::placeholder,
.wpcf7 .wpcf7-not-valid::placeholder {
  color: var(--df-cyan) !important;
}

/* Row label switches to cyan when any control in the row is invalid */
.wpcf7 table.quote-form-table tr.df-invalid-row > td:first-child label {
  color: var(--df-cyan) !important;
}

/* Checkbox/Radio group: normal boxed look already set elsewhere.
   When invalid, bump border to 2px + cyan fill to match inputs. */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox.df-boxed.df-invalid-group,
.wpcf7 .wpcf7-form-control.wpcf7-radio.df-boxed.df-invalid-group {
  border: 2px solid #000 !important;
  background: rgba(0,204,255,0.12) !important;
  box-shadow: none !important;
}

/* Keep rounded corners on checkbox/radio box in all states */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox.df-boxed,
.wpcf7 .wpcf7-form-control.wpcf7-radio.df-boxed {
  border-radius: 6px !important;
}

/* Give first checkbox item a little breathing room from the top */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox.df-boxed .wpcf7-list-item:first-child,
.wpcf7 .wpcf7-form-control.wpcf7-radio.df-boxed .wpcf7-list-item:first-child {
  margin-top: 4px !important;
}

/* Ensure the CF7 inline tip still shows and is readable */
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #cc0000;
  font-size: 0.95rem;
}

/* CAPTCHA hard-exclude stays (no borders/rounding here) */
.wpcf7 .cf7ic-row,
.wpcf7 .cf7ic-row td,
.wpcf7 .cf7ic-row .cf7ic-wrapper,
.wpcf7 .cf7ic-row .cf7ic,
.wpcf7 .cf7ic-row * {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.wpcf7 .cf7ic-row .cf7ic-wrapper {
  margin: 10px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ===== CF7 Chrome fallback: style purely from CF7's .wpcf7-not-valid ===== */
:root { --df-cyan: #00ccff; }

/* Labels: turn cyan if the row contains any invalid control */
.wpcf7 table.quote-form-table tr:has(.wpcf7-not-valid) > td:first-child label {
  color: var(--df-cyan) !important;
}

/* Inputs/selects/textareas: ensure 2px black border + cyan fill when invalid */
.wpcf7 .wpcf7-not-valid {
  border: 2px solid #000 !important;
  background: rgba(0,204,255,0.12) !important;
  color: var(--df-cyan) !important;
  box-shadow: none !important;
  outline: none !important;
}
.wpcf7 .wpcf7-not-valid::placeholder { color: var(--df-cyan) !important; }

/* Checkbox group: if any checkbox inside is invalid, style the group box */
.wpcf7 .wpcf7-form-control-wrap:has(input.wpcf7-not-valid)
  .wpcf7-form-control.wpcf7-checkbox.df-boxed {
  border: 2px solid #000 !important;
  background: rgba(0,204,255,0.12) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

/* Keep CF7 tip visible and readable */
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #cc0000; font-size: .95rem; }

/* CAPTCHA exclusion stays clean */
.wpcf7 .cf7ic-row,
.wpcf7 .cf7ic-row * {
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; padding: 0 !important;
}
.wpcf7 .cf7ic-row .cf7ic-wrapper { margin: 10px 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; }

/* ===== Label vertical centering in CF7 table layouts ===== */
.wpcf7 form .quote-form-table td:first-child { 
  vertical-align: middle !important;
}
.wpcf7 form .quote-form-table td:first-child label {
  display: flex;              /* centers text vertically next to taller inputs */
  align-items: center;
  line-height: 1.2;
  margin: 0;
}

/* THIS FIXES THE CAPCHA ICONS -- Give each icon label its spacing via padding instead of margins */
.cf7ic-row .cf7ic-wrapper label,
.cf7ic-row .cf7ic label,
.cf7ic-row .cf7ic .cf7ic-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 20px 15px !important; /* ~30px horizontal spacing total */
  box-sizing: content-box;
}


/* CF7 image captcha: hover/click => cyan tint (ASCII only) */

/* Smooth change on hover/selection */
.cf7ic-row .cf7ic-wrapper label img,
.cf7ic-row .cf7ic label img {
  transition: filter .15s ease;
}

/* Hover = cyan */
.cf7ic-row .cf7ic-wrapper label:hover img,
.cf7ic-row .cf7ic label:hover img {
  /* cyan filter */
  filter: invert(53%) sepia(94%) saturate(4300%) hue-rotate(167deg) brightness(101%) contrast(102%);
}

/* Selected (checked) = cyan */
.cf7ic-row .cf7ic-wrapper label input:checked + img,
.cf7ic-row .cf7ic-wrapper label input:checked ~ img,
.cf7ic-row .cf7ic label input:checked + img,
.cf7ic-row .cf7ic label input:checked ~ img,
.cf7ic-row .cf7ic-wrapper label:has(input:checked) img,
.cf7ic-row .cf7ic label:has(input:checked) img {
  filter: invert(53%) sepia(94%) saturate(4300%) hue-rotate(167deg) brightness(101%) contrast(102%);
}

/* Optional: if the captcha uses inline SVG instead of IMG */
.cf7ic-row .cf7ic-wrapper label:hover svg *,
.cf7ic-row .cf7ic label:hover svg * {
  fill: #00ccff; stroke: #00ccff;
}
.cf7ic-row .cf7ic-wrapper label:has(input:checked) svg *,
.cf7ic-row .cf7ic label:has(input:checked) svg * {
  fill: #00ccff; stroke: #00ccff;
}

/* =======================================================================
   COMMENTS — brand typography + sizing (scoped to native WP comment form)
   File: forms.css   Version: df-forms v1.4 (2025-11-05)
   Purpose: Enforce Barlow Condensed (labels/title) + Poppins (body)
   Notes: Does NOT affect CF7 (.wpcf7) forms
   ======================================================================= */

/* --- FONT FAMILY + SIZE VARIABLES --- */
:root{
  --df-font-head: "Barlow Condensed","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --df-font-body: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;

  --df-comments-body:   1.10rem;  /* base text in the form */
  --df-comments-label:  1.10rem;  /* labels + reply title */
  --df-comments-input:  1.10rem;  /* input/textarea text */
  --df-comments-button: 1.10rem;  /* submit button text */
  --df-comments-line:   1.5;      /* line-height */
}

/* Base: ensure Poppins applies and sizing sticks */
#commentform,
.entry-content .comment-form,
.comments-area .comment-form{
  font-family: var(--df-font-body) !important;
  font-size: var(--df-comments-body) !important;
  line-height: var(--df-comments-line) !important;
}

/* Paragraphs / helper text */
#commentform p,
.entry-content .comment-form p,
.comments-area .comment-form p,
#commentform .comment-notes,
.entry-content .comment-form .comment-notes,
.comments-area .comment-form .comment-notes,
#commentform .required-field-message,
.entry-content .comment-form .required-field-message,
.comments-area .comment-form .required-field-message{
  font-family: var(--df-font-body) !important;
  font-size: var(--df-comments-body) !important;
  line-height: var(--df-comments-line) !important;
  font-weight: 400;
}

/* Labels + reply title */
#commentform label,
.entry-content .comment-form label,
.comments-area .comment-form label,
.comments-area .comment-reply-title{
  font-family: var(--df-font-head) !important;
  font-size: var(--df-comments-label) !important;
  letter-spacing: .02em;
  font-weight: 600;
}

/* Inputs / textarea (explicit so UA defaults can’t flip to serif) */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform input[type="search"],
#commentform input[type="tel"],
#commentform input[type="number"],
#commentform textarea,
.entry-content .comment-form input[type="text"],
.entry-content .comment-form input[type="email"],
.entry-content .comment-form input[type="url"],
.entry-content .comment-form input[type="search"],
.entry-content .comment-form input[type="tel"],
.entry-content .comment-form input[type="number"],
.entry-content .comment-form textarea,
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form input[type="search"],
.comments-area .comment-form input[type="tel"],
.comments-area .comment-form input[type="number"],
.comments-area .comment-form textarea{
  font-family: var(--df-font-body) !important;
  font-size: var(--df-comments-input) !important;
  line-height: var(--df-comments-line) !important;
  font-weight: 400;
}

/* Placeholder typography */
#commentform input::placeholder,
#commentform textarea::placeholder,
.entry-content .comment-form input::placeholder,
.entry-content .comment-form textarea::placeholder,
.comments-area .comment-form input::placeholder,
.comments-area .comment-form textarea::placeholder{
  font-family: var(--df-font-body) !important;
  font-size: var(--df-comments-input) !important;
  opacity: .85;
}

/* Submit button (input#submit.submit) */
#commentform .form-submit .submit,
.entry-content .comment-form .form-submit .submit,
.comments-area .comment-form .form-submit .submit,
#commentform input[type="submit"]{
  font-family: var(--df-font-body) !important;
  font-size: var(--df-comments-button) !important;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Safety: icons inside comment form keep FA font */
#commentform i[class*="fa-"],
.entry-content .comment-form i[class*="fa-"],
.comments-area .comment-form i[class*="fa-"]{
  font-family: "Font Awesome 6 Pro","Font Awesome 6 Free" !important;
}

/* Optional: slight scale up on large screens */
@media (min-width: 1024px){
  :root{
    --df-comments-body:   1.18rem;
    --df-comments-label:  1.28rem;
    --df-comments-input:  1.18rem;
    --df-comments-button: 1.18rem;
  }
}