/* Styles Contact Form 7's own response/validation markup so the real,
   functional contact form still reads as part of this design system — the
   field/row/label markup itself is authored directly in the CF7 form's
   "Form" tab using the site's existing .contact-form-fields/.contact-row/
   .contact-field classes, so only CF7's own generated elements need bridging
   here (response box, per-field validation tips, submit spinner). */

.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.wpcf7 .hidden-fields-container {
  display: none;
}

.wpcf7-response-output {
  display: block;
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  text-align: center;
  border-radius: 12px;
  font-family: "Rajdhani", sans-serif;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: rgba(61, 255, 122, 0.08);
  border: 1px solid rgba(61, 255, 122, 0.4);
  color: var(--text);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: rgba(255, 93, 93, 0.08);
  border: 1px solid rgba(255, 93, 93, 0.45);
  color: #ffb3b3;
}

.wpcf7-form.sent .contact-form-fields {
  opacity: 0.55;
  pointer-events: none;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #ff8a8a;
}

.wpcf7-form-control.wpcf7-not-valid {
  border-color: #ff5d5d !important;
}

.wpcf7-spinner {
  margin: 0 0 0 0.6rem;
  vertical-align: middle;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
}

/* Smaller message box than components.css's default 120px min-height. */
.contact-field textarea {
  min-height: 90px;
}

/* The 📞 "telephone receiver" emoji (U+1F4DE) renders as a washed-out
   outline glyph instead of full color on some Windows/browser font builds
   — identical to the original source HTML, but visibly broken there too.
   Swapped for an inline SVG so the phone icon renders consistently, while
   the working ✉️/📍 emoji next to it are left untouched. */
.contact-info-icon--svg {
  display: inline-flex;
  justify-content: center;
  color: var(--text);
}