/* ============================================================
   Signature Homeworx — Contact Form widget.
   Brand tokens below; every adjustable value arrives as a
   --shxcf-* custom property written onto the wrapper by
   Elementor-generated CSS from the widget controls. Group controls
   (box-shadow, typography) are applied natively by Elementor
   directly onto the targeted selector instead of through a
   custom property.
   ============================================================ */
.shx-cf {
  --shxcf-navy: #0D0040;
  --shxcf-blue: #3D68D9;
  --shxcf-blue-hover: #2F52B8;
  --shxcf-font: 'Outfit', system-ui, sans-serif;

  /* internal-only tokens (not exposed as Elementor controls) */
  --shxcf-line: #d8d7e2;
  --shxcf-muted: #71717f;
  --shxcf-error: #b3261e;

  display: block;
  max-width: 640px;
  margin: 0 auto;
  background: var(--shxcf-card-bg, #ffffff);
  border-radius: var(--shxcf-card-radius, 16px);
  padding: var(--shxcf-card-padding, 32px 32px 36px);
  font-family: var(--shxcf-font);
}
.shx-cf, .shx-cf * { box-sizing: border-box; }

.shx-cf__headline {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--shxcf-headline-color, var(--shxcf-navy));
}

.shx-cf__subtext {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--shxcf-muted);
}

.shx-cf__region { display: block; }

.shx-cf__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-bottom: 4px;
}
.shx-cf__field--full { grid-column: 1 / -1; }

.shx-cf__field { text-align: left; }

.shx-cf__label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--shxcf-label-color, var(--shxcf-navy));
}

.shx-cf__input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--shxcf-input-text, var(--shxcf-navy));
  background: var(--shxcf-input-bg, #ffffff);
  border: 1px solid var(--shxcf-input-border, var(--shxcf-line));
  border-radius: var(--shxcf-input-radius, 8px);
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shx-cf__textarea {
  resize: vertical;
  min-height: 120px;
}
.shx-cf__input:focus {
  outline: none;
  border-color: var(--shxcf-input-focus, var(--shxcf-blue));
  box-shadow: 0 0 0 3px var(--shxcf-input-focus, rgba(61, 104, 217, 0.18));
}
.shx-cf__input[aria-invalid="true"] {
  border-color: var(--shxcf-error);
}

.shx-cf__error {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--shxcf-error);
  text-align: left;
}
.shx-cf__error[hidden] { display: none; }
.shx-cf__form-error { text-align: center; margin: 14px 0 0; }

.shx-cf__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.shx-cf__submit {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 15px;
  background: var(--shxcf-btn-bg, var(--shxcf-blue));
  color: var(--shxcf-btn-text, #ffffff);
  border-radius: var(--shxcf-btn-radius, 8px);
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.shx-cf__submit:hover:not(:disabled) {
  background: var(--shxcf-btn-bg-hover, var(--shxcf-blue-hover));
  color: var(--shxcf-btn-text-hover, #ffffff);
}
.shx-cf__submit:active:not(:disabled) { transform: scale(.985); }
.shx-cf__submit:disabled { opacity: .75; cursor: not-allowed; }
.shx-cf__submit:focus-visible {
  outline: 3px solid var(--shxcf-input-focus, var(--shxcf-blue));
  outline-offset: 2px;
}

.shx-cf__success { text-align: center; }
.shx-cf__success-headline {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--shxcf-success-color, var(--shxcf-navy));
}
.shx-cf__success-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--shxcf-success-color, var(--shxcf-navy));
}

@media (prefers-reduced-motion: reduce) {
  .shx-cf__submit { transition: none; }
}

@media (max-width: 560px) {
  .shx-cf { padding: 24px 20px 28px; }
  .shx-cf__grid { grid-template-columns: 1fr; }
}