/* MyCabin Leads integration seam for the Mārupe waitlist capture form
   (success-state UX patch). Mārupe/Homes-with-Plot is an ordinary Page
   imported from page-packs/homes-with-plot-clean/, which still owns
   this form's base visual design in its own frontend.css; this file
   adds only the same invisible/functional pieces every other
   surface's own seam adds — a hidden honeypot, a status-message
   region, and the submit button's own success animation. Selectors
   intentionally match page-packs/homes-with-plot-clean/frontend.css's
   own rules for this form; keep the two in sync by hand if either
   changes. Full-width dark pill contracts symmetrically to a centered
   dark circle. */
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn {
  position: relative;
  transition: background .25s, color .25s, width .35s ease, border-radius .35s ease, padding .35s ease;
}
/* 0.2.5 shape fix: the Page Pack's own base .pp-btn rule sets a fixed
   `height:40px` (every pill button on this page) which this success
   state never overrode — only `width` was set to 44px, so the
   "circle" actually rendered 44px x 40px, a visible oval. Height must
   match width explicitly; aspect-ratio is a belt-and-braces guard.
   max-width/max-height are ALSO required, not just belt-and-braces:
   live-verified that plain `width`/`height` alone are unreliable here
   specifically because lead-form-base.js's setSuccessButtonState()
   locks the button's CURRENT rendered width as an inline style
   (`button.style.width = ...px`) immediately before this attribute is
   added — on this flex-column item, a `width` cascade change arriving
   right after that inline write does not always re-resolve reliably
   (a real, reproducible Chromium flex/transition quirk, not a
   specificity/!important problem — confirmed via direct rule/priority
   inspection). `max-width`/`max-height` are resolved through a
   different layout code path and reliably clamp the box to 44x44
   regardless. border-radius itself needs no equivalent fix: on a
   square (width==height) box, the existing pill-radius token and an
   explicit 50% render identically — the circle was always visually
   correct once the box is truly square; only the box's own squareness
   needed hardening. */
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn[data-mcl-state="success"] {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 50% !important;
  align-self: center;
  background: var(--pp-ink) !important;
  color: var(--pp-bone) !important;
  cursor: default;
}
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn .mcl-btn-label,
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn .mcl-btn-check {
  transition: opacity .25s ease;
}
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn .mcl-btn-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn[data-mcl-state="success"] .mcl-btn-label { opacity: 0; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn[data-mcl-state="success"] .mcl-btn-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn { transition: background .25s, color .25s; }
  .pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn .mcl-btn-label,
  .pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn .mcl-btn-check { transition: none; }
}

.pp-homes-with-plot-clean .mcl-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pp-homes-with-plot-clean .mcl-form-message[data-mcl-state="error"] { color: #b3261e; }
.pp-homes-with-plot-clean .mcl-form-message[data-mcl-state="success"] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}