/* =========================================================================
   Zip Water — Material-style Contact Form 7 (stock CF7, no plugin required)
   Brand red: #DA1F27  •  Font: Barlow
   Scope: everything is prefixed with .wpcf7 so it ONLY touches Contact Form 7
   forms and never WooCommerce / other site forms.
   Works with CSS alone (static labels). Add the companion JS for the
   animated floating-label effect (adds the .mfl-ready class to the form).
   ========================================================================= */

:root {
  --zw-red: #DA1F27;
  --zw-red-dark: #b3161d;
  --zw-ink: #1f2937;      /* field text            */
  --zw-label: #6b7280;    /* resting label / hint  */
  --zw-line: #9aa1ab;     /* idle underline        */
  --zw-line-hover: #4b5563;
  --zw-error: #b00020;    /* Material error red     */
  --zw-radius: 4px 4px 0 0;
}

/* ---- Layout & rhythm --------------------------------------------------- */
.wpcf7 .wpcf7-form {
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  color: var(--zw-ink);
  max-width: 640px;
}
.wpcf7 .wpcf7-form p {
  margin: 0 0 26px;
}

/* Two-column rows carried over from the old Material markup
   ([md-form] used <div class="two"><div class="two-items">…</div></div>).
   Kept as-is in the template; styled here so side-by-side fields survive. */
.wpcf7 .wpcf7-form .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.wpcf7 .wpcf7-form .two > .two-items { min-width: 0; }
@media (max-width: 600px) {
  .wpcf7 .wpcf7-form .two { grid-template-columns: 1fr; gap: 0; }
}

/* Make the wrapping <label> stack cleanly above its field (CSS-only mode) */
.wpcf7 .wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--zw-label);
  line-height: 1.4;
}

/* The control wrapper CF7 outputs around each field */
.wpcf7 .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  margin-top: 4px;
}

/* ---- Text, email, tel, url, number, select, textarea ------------------- */
.wpcf7 .wpcf7-form input.wpcf7-text,
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form select.wpcf7-select,
.wpcf7 .wpcf7-form textarea.wpcf7-textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 2px 8px;
  font-family: inherit;
  font-size: 16px;
  color: var(--zw-ink);
  background: #f6f7f9;              /* subtle Material "filled" tint */
  border: none;
  border-bottom: 1px solid var(--zw-line);
  border-radius: var(--zw-radius);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  outline: none;
}

.wpcf7 .wpcf7-form textarea.wpcf7-textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

/* Custom dropdown arrow for the select */
.wpcf7 .wpcf7-form select.wpcf7-select {
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--zw-label) 50%),
    linear-gradient(135deg, var(--zw-label) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Hover */
.wpcf7 .wpcf7-form input:hover,
.wpcf7 .wpcf7-form select:hover,
.wpcf7 .wpcf7-form textarea:hover {
  border-bottom-color: var(--zw-line-hover);
  background: #f0f2f5;
}

/* Focus — brand-red underline (Material style) */
.wpcf7 .wpcf7-form input:focus,
.wpcf7 .wpcf7-form select:focus,
.wpcf7 .wpcf7-form textarea:focus {
  border-bottom-color: var(--zw-red);
  box-shadow: inset 0 -1px 0 0 var(--zw-red);   /* fakes the 2px active line */
  background: #f0f2f5;
}

/* Placeholder */
.wpcf7 .wpcf7-form ::placeholder { color: #9aa1ab; opacity: 1; }

/* ---- Checkbox (consent) ------------------------------------------------ */
.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; display: block; }
.wpcf7 .wpcf7-form .wpcf7-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--zw-ink);
  cursor: pointer;
}
.wpcf7 .wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--zw-line);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.wpcf7 .wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked {
  background: var(--zw-red);
  border-color: var(--zw-red);
}
.wpcf7 .wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 4px; height: 9px;
  margin: 1px 0 0 5px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- Submit button (Material contained button) ------------------------- */
.wpcf7 .wpcf7-form input.wpcf7-submit,
.wpcf7 .wpcf7-form button.wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin-top: 6px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--zw-red);
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.24);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.wpcf7 .wpcf7-form input.wpcf7-submit:hover,
.wpcf7 .wpcf7-form button.wpcf7-submit:hover {
  background: var(--zw-red-dark);
  box-shadow: 0 3px 6px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.24);
}
.wpcf7 .wpcf7-form input.wpcf7-submit:active,
.wpcf7 .wpcf7-form button.wpcf7-submit:active { transform: translateY(1px); }
.wpcf7 .wpcf7-form input.wpcf7-submit:disabled { opacity: .55; cursor: default; }

/* ---- CF7 validation & response messages -------------------------------- */
.wpcf7 .wpcf7-form .wpcf7-not-valid {
  border-bottom-color: var(--zw-error) !important;
  box-shadow: inset 0 -1px 0 0 var(--zw-error);
}
.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  position: relative;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--zw-error);
}
.wpcf7 .wpcf7-form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border: 1px solid var(--zw-error);
  background: #fdecee;
  color: var(--zw-error);
}
.wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #2e7d32;
  background: #edf7ed;
  color: #2e7d32;
}

/* CF7 spinner colour */
.wpcf7 .wpcf7-spinner { background-color: var(--zw-red); }

/* =========================================================================
   FLOATING LABELS — only active when the companion JS adds .mfl-ready
   (Without the JS, the rules above already give a clean stacked layout.)
   ========================================================================= */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field {
  position: relative;
  padding-top: 18px;               /* room for the floated label */
}
/* Hide the original wrapping-label text once JS has taken over */
.wpcf7 .wpcf7-form.mfl-ready label.mfl-host { color: transparent; font-size: 0; line-height: 0; }

.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label {
  position: absolute;
  left: 2px;
  top: 30px;                       /* resting: sits on the input */
  font-size: 16px;
  font-weight: 400;
  color: var(--zw-label);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .16s ease, color .16s ease;
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label .mfl-req { color: var(--zw-red); margin-left: 2px; }

/* Floated state (focused OR filled) */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-focused .mfl-label,
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-filled .mfl-label {
  transform: translateY(-26px) scale(.78);
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-focused .mfl-label { color: var(--zw-red); }

/* Animated 2px underline that grows from the centre on focus */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--zw-red);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .18s ease;
  pointer-events: none;
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-focused .mfl-line { transform: scaleX(1); }
/* On error, use the input's own red underline (box-shadow) rather than the 2px
   overlay line, so the validation message never gets struck through. */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.has-error .mfl-line { transform: scaleX(0); }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.has-error.is-focused .mfl-line { background: var(--zw-error); transform: scaleX(1); }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.has-error .mfl-label { color: var(--zw-error); }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .wpcf7-not-valid-tip { margin-top: 12px; }

/* In floating mode the textarea needs a touch more top room */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field textarea.wpcf7-textarea { padding-top: 10px; }

/* Responsive */
@media (max-width: 600px) {
  .wpcf7 .wpcf7-form input.wpcf7-text,
  .wpcf7 .wpcf7-form input[type="email"],
  .wpcf7 .wpcf7-form input[type="tel"],
  .wpcf7 .wpcf7-form select.wpcf7-select,
  .wpcf7 .wpcf7-form textarea.wpcf7-textarea { font-size: 16px; } /* keeps iOS from zooming */
  .wpcf7 .wpcf7-form input.wpcf7-submit { width: 100%; }
}

/* =========================================================================
   Zip Contact7 Design — additions on top of the handover CSS.
   Everything above this line is the provided, screenshot-tested stylesheet,
   unchanged. Everything below covers markup the original file did not:
     • the consent box (CF7 emits .wpcf7-acceptance, not .wpcf7-checkbox)
     • radio groups (the original file has no radio rules at all)
     • the .three / pop-one-item-* layout classes used in the real templates
   All rules stay scoped under .wpcf7 so nothing leaks to WooCommerce/other forms.
   ========================================================================= */

/* ---- Consent box: mirror the .wpcf7-checkbox rules onto .wpcf7-acceptance -- */
.wpcf7 .wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.wpcf7 .wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--zw-ink);
  cursor: pointer;
}
.wpcf7 .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label a { color: var(--zw-red); text-decoration: underline; }
.wpcf7 .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--zw-line);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.wpcf7 .wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked {
  background: var(--zw-red);
  border-color: var(--zw-red);
}
.wpcf7 .wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 4px; height: 9px;
  margin: 1px 0 0 5px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Consent text shown when CF7 markup is unexpected (fallback path in the shim) */
.wpcf7 .wpcf7-form .zcd-consent-text { display: block; margin-top: 8px; font-size: 14px; color: var(--zw-ink); }

/* ---- Radio groups (the [radio] inside [md-radio]) ---------------------- */
.wpcf7 .wpcf7-form .wpcf7-radio .wpcf7-list-item { margin: 0 20px 6px 0; }
.wpcf7 .wpcf7-form .zcd-choice--inline .wpcf7-radio .wpcf7-list-item { display: inline-flex; align-items: center; }
.wpcf7 .wpcf7-form .zcd-choice--stacked .wpcf7-radio .wpcf7-list-item { display: flex; align-items: center; margin-right: 0; }
.wpcf7 .wpcf7-form .wpcf7-radio label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zw-ink); cursor: pointer; }
.wpcf7 .wpcf7-form .wpcf7-radio input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--zw-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
.wpcf7 .wpcf7-form .wpcf7-radio input[type="radio"]:checked { border-color: var(--zw-red); }
.wpcf7 .wpcf7-form .wpcf7-radio input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 10px; height: 10px;
  margin: 2px;
  border-radius: 50%;
  background: var(--zw-red);
}
.wpcf7 .wpcf7-form .zcd-choice { display: block; margin: 0 0 26px; }

/* ---- Three-column rows (mirror the provided .two grid) ----------------- */
.wpcf7 .wpcf7-form .three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 28px;
}
.wpcf7 .wpcf7-form .three > .three-items { min-width: 0; }
/* Generalise the provided rule so grid children other than .two-items don't overflow */
.wpcf7 .wpcf7-form .two > * { min-width: 0; }

/* ---- Layout wrappers used around submit / consent in some templates ---- */
.wpcf7 .wpcf7-form .pop-one-item-accept { margin: 0 0 26px; }
.wpcf7 .wpcf7-form .pop-one-item-middle,
.wpcf7 .wpcf7-form .pop-one-item-button,
.wpcf7 .wpcf7-form .pop-one-item-button-m { display: block; }

@media (max-width: 600px) {
  .wpcf7 .wpcf7-form .three { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Fixes after testing against CF7 5.3.2 + the live sites ------------- */

/* CF7 injects .wpcf7-not-valid-tip inside the control wrap, which sits inside
   the visually-hidden host label (line-height:0). Without this reset the tip
   inherits line-height 0, occupies no layout height, and its text overlaps the
   next row — seen on zipwater.id. */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field { line-height: 1.4; }

/* Parity with the pre-existing look (bare underline on white, no filled tint;
   verified against zipwater.co.in which still runs the old plugin). */
.wpcf7 .wpcf7-form input.wpcf7-text,
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form select.wpcf7-select {
  background-color: transparent;
}
.wpcf7 .wpcf7-form input:hover,
.wpcf7 .wpcf7-form input:focus,
.wpcf7 .wpcf7-form select:hover,
.wpcf7 .wpcf7-form select:focus {
  background-color: transparent;
}

/* The old look gives the comments box a full thin border, not a filled tint. */
.wpcf7 .wpcf7-form textarea.wpcf7-textarea {
  background: #fff;
  border: 1px solid #d4d8dd;
  border-radius: 0;
}
.wpcf7 .wpcf7-form textarea.wpcf7-textarea:hover { background: #fff; border-color: var(--zw-line-hover); }
.wpcf7 .wpcf7-form textarea.wpcf7-textarea:focus { background: #fff; border-color: var(--zw-red); box-shadow: none; }

/* The forms inherit the site's font (Open Sans on some sites, Barlow on
   others). Set via the zcd_font_family filter when a site needs an override. */
.wpcf7 .wpcf7-form { font-family: var(--zw-font, inherit); }

/* Old look: the required asterisk matches the label colour. */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label .mfl-req { color: inherit; }

/* ---- Static labels (v1.0.2) --------------------------------------------- */
/* The old plugin rendered labels statically above the line
   (cf7md-label--static) — it never rested them on the input. Do the same:
   put the label in normal flow above the field. This also survives themes
   that narrow the field/wrap width (zipwater.id), where an absolutely
   positioned label wraps onto the input and looks struck through. */
.wpcf7 .wpcf7-form.mfl-ready .mfl-field { padding-top: 0; }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label {
  position: static;
  display: block;
  transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.4;
  margin: 0 0 4px;
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-focused .mfl-label,
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-filled .mfl-label {
  transform: none;
}

/* The old look never faded the submit button while the consent box was
   unchecked (CF7 disables it until accepted) — keep it full colour. */
.wpcf7 .wpcf7-form input.wpcf7-submit:disabled,
.wpcf7 .wpcf7-form button.wpcf7-submit:disabled {
  opacity: 1;
  cursor: not-allowed;
}

/* ---- v1.0.3: neutralise leftover site CSS + match the reference look ---- */

/* The sites still carry helper CSS written for the OLD plugin's markup:
   .two-items{width:49%} (halves every field inside the grid cell),
   .zipselect::after (draws a second dropdown arrow), and
   .two-items.zipselect{line-height:0}. Neutralise all three. */
.wpcf7 .wpcf7-form .two > .two-items,
.wpcf7 .wpcf7-form .three > .three-items { width: auto; float: none; }
.wpcf7 .wpcf7-form .zipselect::after { display: none !important; }
.wpcf7 .wpcf7-form .two-items.zipselect { line-height: 1.4; }

/* Compact fields: the label sits tight above the line (reference: the live
   zipwater.co.in look). The tall 12px/8px padding came from the handover CSS. */
.wpcf7 .wpcf7-form input.wpcf7-text,
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form select.wpcf7-select {
  padding: 2px 2px 6px;
}
.wpcf7 .wpcf7-form textarea.wpcf7-textarea {
  height: 72px;
  min-height: 72px;
  padding: 8px 10px;
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

/* Row rhythm: on the live sites the fields inside .two/.three cells are not
   wrapped in <p> (autop strips them next to the divs), so the spacing must
   come from the row containers themselves. */
.wpcf7 .wpcf7-form .two,
.wpcf7 .wpcf7-form .three { margin: 0 0 24px; }
.wpcf7 .wpcf7-form .two .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-form .three .wpcf7-form-control-wrap { margin-top: 2px; }

/* ---- v1.0.4: the old plugin's exact type scale -------------------------- */
/* Taken from cf7-material-design.css: base 18px Roboto (#cf7md-form
   .cf7md-item{font-size:18px;line-height:1.25}), static labels .75em,
   consent + button .77779em, button weight 500 / letter-spacing .08929em. */
.wpcf7 .wpcf7-form {
  font-family: var(--zw-font, Roboto, "Open Sans", Arial, Helvetica, sans-serif);
  font-size: 18px;
  line-height: 1.25;
}
.wpcf7 .wpcf7-form input.wpcf7-text,
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form textarea.wpcf7-textarea {
  font-size: 18px;
}
.wpcf7 .wpcf7-form select.wpcf7-select { font-size: 17px; }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field .mfl-label {
  font-size: 13.5px;             /* .75em of the 18px base, like .cf7md-label--static */
  letter-spacing: .01em;
  color: rgba(0, 0, 0, .38);     /* the mdc hint colour the old labels used */
}
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.is-focused .mfl-label { color: var(--zw-red); }
.wpcf7 .wpcf7-form.mfl-ready .mfl-field.has-error .mfl-label { color: var(--zw-error); }
.wpcf7 .wpcf7-form .wpcf7-not-valid-tip { font-size: 13.5px; }
.wpcf7 .wpcf7-form .wpcf7-acceptance label,
.wpcf7 .wpcf7-form .wpcf7-checkbox label,
.wpcf7 .wpcf7-form .wpcf7-radio label { font-size: 14px; }
.wpcf7 .wpcf7-form input.wpcf7-submit,
.wpcf7 .wpcf7-form button.wpcf7-submit {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08929em;
  padding: 10px 22px;
}
/* Consent line inherits the surrounding text colour (the sites style it grey). */
.wpcf7 .wpcf7-form .wpcf7-acceptance label { color: inherit; }

/* ---- v1.0.5: response message visibility on CF7 5.4+ -------------------- */
/* The unicon theme hides .wpcf7-response-output{display:none} and re-shows it
   via CF7 4.x-era state classes (div.wpcf7-mail-sent-ok etc.) that CF7 removed
   in 5.4 — so on CF7 6.x no success/error banner ever appears. Re-show it for
   the form states CF7 actually uses now; form.init stays hidden via CF7 core. */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  display: block;
}