/* ============================================================
   GOHIGHLEVEL FORMS AND THE ESTIMATE POPUP
   The forms are GHL iframes. They carry a class rather than an inline
   style; GHL's own script sets their height once the form has loaded.
   An on-page frame has no floor: until the form is ready GHL holds it
   off screen, so a floor reserves nothing, and afterwards it would
   leave empty space under a form shorter than the floor.
   ============================================================ */
.ghl-embed{display:block;width:100%;height:100%;border:0;border-radius:3px;background:transparent}
.form-card .ghl-embed{max-width:900px;margin:0 auto}

/* ---- the popup ----
   Closed, the panel is transparent and takes no clicks. It is deliberately
   not hidden with visibility or display: the GHL iframe sets
   visibility:visible on itself, so hiding the wrapper that way leaves the
   form showing through, and display:none would lose the fade. */
.fpop{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.fpop.is-open{opacity:1;pointer-events:auto}
/* GoHighLevel's script writes pointer-events:auto straight onto its iframe once
   the form has loaded. A child turning pointer events back on overrides the
   wrapper, so a closed popup would sit over the middle of the page as an
   invisible sheet that swallows every click. Nothing inside a closed popup
   takes a pointer, and the rule is !important because it has to beat an inline
   style we do not control. */
.fpop:not(.is-open),
.fpop:not(.is-open) *{pointer-events:none!important}

.fpop-back{position:absolute;inset:0;background:rgba(4,34,61,.72)}

/* The panel holds its own height from the first frame. GHL's script gives
   the iframe its height once the form is ready and starts it at nothing, so
   without a floor the panel would open as a sliver and then jump. */
.fpop-card{position:relative;display:flex;flex-direction:column;width:min(560px,100%);
  min-height:min(640px,calc(100vh - 48px));max-height:calc(100vh - 48px);
  background:#fff;border-radius:var(--r);box-shadow:0 30px 90px rgba(4,34,61,.4);
  transform:translateY(16px) scale(.985);transition:transform .22s ease;overflow:hidden}
.fpop.is-open .fpop-card{transform:none}

.fpop-x{position:absolute;top:12px;right:14px;z-index:2;display:grid;place-items:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--cream-2);
  color:var(--navy);font-size:26px;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease}
.fpop-x:hover,.fpop-x:focus-visible{background:var(--navy);color:#fff}
.fpop-x:focus-visible{outline:2px solid var(--sand);outline-offset:2px}

.fpop-head{padding:28px 64px 0 30px}
.fpop-title{margin:0;color:var(--ink);font-size:1.6rem;line-height:1.2}
.fpop-text{margin:8px 0 0;color:var(--body);font-size:.98rem;line-height:1.55}

/* GHL's script resizes the iframe to the form's height, which on a short
   screen is taller than the panel, so the panel scrolls rather than clipping
   the last field and the button out of reach. */
.fpop-body{flex:1 1 auto;min-height:0;padding:16px 20px 20px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fpop-body .ghl-embed{min-height:520px}

@media (max-width:620px){
  .fpop{padding:12px}
  .fpop-card{width:100%;min-height:min(560px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);border-radius:18px}
  .fpop-head{padding:24px 56px 0 20px}
  .fpop-title{font-size:1.35rem}
  .fpop-body{padding:12px 12px 14px}
  .fpop-body .ghl-embed{min-height:460px}
}

@media (prefers-reduced-motion:reduce){
  .fpop,.fpop-card{transition:none}
}

/* While the popup is open the page behind it does not scroll. */
html.fpop-lock,html.fpop-lock body{overflow:hidden}