/* ============================================================
   Signature Homeworx — Zip Checker widget.
   Brand tokens below; every adjustable value arrives as a
   --shxzc-* custom property written onto the wrapper by
   Elementor-generated CSS from the widget controls.
   ============================================================ */
.shx-zc {
  --shxzc-navy: #0D0040;
  --shxzc-navy-hover: #251a5e;
  --shxzc-gold: #fbbc04;
  --shxzc-font: 'Outfit', system-ui, sans-serif;

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

.shx-zc .visually-hidden,
.shx-zc__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.shx-zc__subtext {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--shxzc-subtext-color, #71717f);
}

.shx-zc__field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
}

.shx-zc__input {
  flex: 1 1 160px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--shxzc-input-text, var(--shxzc-navy));
  background: var(--shxzc-input-bg, #ffffff);
  border: 1px solid var(--shxzc-input-border, #d8d7e2);
  border-radius: var(--shxzc-input-radius, 8px);
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shx-zc__input:focus {
  outline: none;
  border-color: var(--shxzc-input-focus, var(--shxzc-navy));
  box-shadow: 0 0 0 3px var(--shxzc-input-focus, rgba(13, 0, 64, 0.15));
}

.shx-zc__submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 22px;
  background: var(--shxzc-btn-bg, var(--shxzc-navy));
  color: var(--shxzc-btn-text, #ffffff);
  border-radius: var(--shxzc-btn-radius, 8px);
  transition: background 0.18s ease, color 0.18s ease;
}
.shx-zc__submit:hover {
  background: var(--shxzc-btn-bg-hover, var(--shxzc-navy-hover));
  color: var(--shxzc-btn-text-hover, #ffffff);
}
.shx-zc__submit:focus-visible {
  outline: 3px solid var(--shxzc-navy);
  outline-offset: 2px;
}

.shx-zc__error {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #b3261e;
}
.shx-zc__error[hidden] { display: none; }

.shx-zc__result { margin-top: 20px; }
.shx-zc__state[hidden] { display: none; }

.shx-zc__result.is-revealing .shx-zc__state:not([hidden]) {
  animation: shxzc-reveal 320ms ease;
}
@keyframes shxzc-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.shx-zc__message {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--shxzc-result-color, #3d3d46);
}

/* Desktop-first emphasis: the phone number is the prominent element,
   the Call Now button is a smaller, secondary link. Flipped below 768px. */
.shx-zc__phone {
  display: block;
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 800;
  text-decoration: none;
  color: var(--shxzc-phone-color, var(--shxzc-navy));
}
.shx-zc__phone:hover { text-decoration: underline; }
.shx-zc__phone:focus-visible {
  outline: 3px solid var(--shxzc-navy);
  outline-offset: 2px;
}

.shx-zc__cta {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 22px;
  background: var(--shxzc-cta-bg, var(--shxzc-gold));
  color: var(--shxzc-cta-text, var(--shxzc-navy));
  border-radius: var(--shxzc-cta-radius, 999px);
  transition: background 0.18s ease, color 0.18s ease;
}
.shx-zc__cta:hover {
  background: var(--shxzc-cta-bg-hover, #e0a800);
  color: var(--shxzc-cta-text-hover, var(--shxzc-navy));
}
.shx-zc__cta:focus-visible {
  outline: 3px solid var(--shxzc-navy);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .shx-zc__phone {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
  }
  .shx-zc__cta {
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shx-zc__result.is-revealing .shx-zc__state:not([hidden]) { animation: none; }
  .shx-zc__input,
  .shx-zc__submit,
  .shx-zc__cta { transition: none; }
}