/* Patrick's Asphalt Paving — post-migration additions (form UX, ALTCHA, mobile fixes) */

/* ---- ALTCHA widget: self-contained theme so the label stays readable on any
   background (the widget defaults its text to currentColor). ---- */
altcha-widget {
  display: block;
  margin: 0 0 16px;
  max-width: 260px;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #1a1a1a;
  --altcha-color-active: #1a1a1a;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 8px;
}
altcha-widget,
.quote__form altcha-widget {
  color: #1a1a1a;
}

/* ---- Success message: real green confirmation box (replaces the form). ---- */
.quote__form-success.w-form-done,
.w-form-done {
  display: none;
  background: #e7f7ec;
  border: 1.5px solid #1a7f37;
  color: #0f5132;
  border-radius: 12px;
  padding: 24px 22px;
  text-align: center;
  font-weight: 600;
}

/* Error box: keep it clearly red (template default is low-contrast). */
.quote__form-error.w-form-fail,
.w-form-fail {
  background: #fdecea;
  border: 1.5px solid #b42318;
  color: #b42318;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  font-weight: 600;
}

/* ---- iOS: inputs under 16px trigger auto-zoom (the template drops them to
   14px at mobile widths). Keep every form control at 16px minimum. ---- */
@media screen and (max-width: 767px) {
  .quote__form-input,
  .quote__form-submit,
  input.w-input,
  textarea.w-input {
    font-size: 16px !important;
  }
}

/* ---- Elfsight reviews: give the reviews-page widget room while it boots so
   the footer doesn't jump. Applied via a wrapper class set at build time
   (reviews page only — never the home carousel). ---- */
.reviews-widget-boot {
  min-height: 480px;
}

/* ---- Reviews loading state ----
   Elfsight boots via a serial third-party chain (platform.js → config → bundle
   → data → icons), ~2-3s that no site can shortcut. While the container is still
   empty, show a spinner so the section never reads as blank/broken. The `:empty`
   selector self-clears the instant Elfsight injects its rendered content — pure
   CSS, no JS, no risk of hiding the real widget. Modest min-height so it works
   for both the full reviews page and the shorter home carousel without a big gap
   (once loaded, `:empty` no longer matches, so this height is released). */
[class*="elfsight-app-"]:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  position: relative;
}
[class*="elfsight-app-"]:empty::after {
  content: "";
  width: 34px;
  height: 34px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--secondary, #1a1a1a);
  border-radius: 50%;
  animation: reviews-spin 0.8s linear infinite;
}
@keyframes reviews-spin {
  to { transform: rotate(360deg); }
}

/* ---- Pagination nav spacing for the static Previous/Next controls. ---- */
.w-pagination-wrapper {
  grid-column-gap: 12px;
}

/* ---- Service-areas live search box (hub page) ----
   Sits on the section's dark background. 16px font + border-color-only focus
   (no box-shadow spread) so it doesn't trigger iOS zoom or horizontal scroll. */
.area-search {
  max-width: 520px;
  margin: 0 auto 2rem;
}
.area-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1.1rem;
  font-size: 16px;
  line-height: 1.4;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #1a1a1a;
  transition: border-color 0.2s ease;
}
.area-search__input::placeholder {
  color: #6b7280;
}
.area-search__input:focus {
  border-color: var(--primary, #fcf11b);
}
.area-search__empty {
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  opacity: 0.92;
}
.area-search__empty[hidden] {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}