/* ===========================================================================
   BAHAY LIWANAG — LEAD SIGNUP POPUP
   Reuses the canonical design tokens defined on :root by each page's inline
   <style> (--ivory, --forest, --terracotta, --serif, --sans, --line, --ease).
   Fallback values are provided so the popup still renders if loaded alone.
   =========================================================================== */

.bl-lp-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(36,61,48,.55);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease,cubic-bezier(.22,.61,.36,1)),visibility .3s;
}
.bl-lp-overlay.is-open{opacity:1;visibility:visible}

.bl-lp-dialog{
  position:relative;
  width:min(580px,100%);
  max-height:calc(100svh - 48px);
  overflow-y:auto;
  background:var(--ivory,#F8F5F0);
  color:var(--charcoal,#2A2A2A);
  border:1px solid var(--line,rgba(42,42,42,.14));
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.32);
  padding:clamp(28px,5vw,52px);
  transform:translateY(18px) scale(.985);
  transition:transform .35s var(--ease,cubic-bezier(.22,.61,.36,1));
  font-family:var(--sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.bl-lp-overlay.is-open .bl-lp-dialog{transform:none}

/* ---- close button ---- */
.bl-lp-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:50%;
  cursor:pointer;
  color:var(--charcoal-soft,#54514B);
  font-size:1.4rem;
  line-height:1;
  transition:color .25s var(--ease,ease),background .25s var(--ease,ease),border-color .25s var(--ease,ease);
}
.bl-lp-close:hover{color:var(--terracotta,#C86B4A);background:rgba(200,107,74,.08)}
.bl-lp-close:focus-visible{outline:2px solid var(--terracotta,#C86B4A);outline-offset:2px}

/* ---- eyebrow ---- */
.bl-lp-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta,#C86B4A);
  margin-bottom:16px;
  padding-right:32px;
}
.bl-lp-capiz{
  display:inline-grid;
  grid-template-columns:repeat(3,5px);
  grid-template-rows:repeat(3,5px);
  gap:2px;
  flex:none;
}
.bl-lp-capiz i{background:var(--terracotta,#C86B4A);opacity:.85;display:block}

/* ---- text ---- */
.bl-lp-title{
  font-family:var(--serif,"Playfair Display",Georgia,serif);
  font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.15rem);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--forest,#2F4F3E);
  margin:0 0 14px;
}
.bl-lp-title em{font-style:normal;color:var(--terracotta,#C86B4A)}

.bl-lp-desc{
  font-size:.98rem;
  line-height:1.6;
  color:var(--charcoal-soft,#54514B);
  margin:0 0 24px;
  max-width:46ch;
}

/* ---- form area ---- */
.bl-lp-form{
  position:relative;
  border-top:1px solid var(--line,rgba(42,42,42,.14));
  padding-top:22px;
}
.bl-lp-form iframe{
  width:100%;
  min-height:435px;
  border:none;
  border-radius:8px;
  display:block;
}

/* ---- branded loading state (shown until the GHL iframe loads) ---- */
.bl-lp-loading{
  position:absolute;
  inset:22px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--ivory,#F8F5F0);
  color:var(--charcoal-soft,#54514B);
  font-size:.9rem;
  letter-spacing:.02em;
}

/* ---- mobile ---- */
@media (max-width:600px){
  .bl-lp-overlay{padding:14px}
  .bl-lp-dialog{
    width:100%;
    max-height:calc(100svh - 28px);
    padding:26px 20px 24px;
  }
  .bl-lp-eyebrow{font-size:.68rem;letter-spacing:.18em}
  .bl-lp-close{top:8px;right:8px}
  .bl-lp-form iframe{min-height:470px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .bl-lp-overlay,
  .bl-lp-dialog{transition:none}
  .bl-lp-dialog{transform:none}
}