/* ==========================================================================
   Pasa Musik — Infolettre / Newsletter popup
   A PASA-branded presentation layer around the official HighLevel form.
   Same visual language as the rest of the site: Comfortaa, #047391 / #EF4424,
   square corners, the teal-to-red accent bar.

   Class names are doubled (.pm-nl.pm-nl) so the rules win against the
   Elementor / Astra stylesheets without resorting to !important.
   ========================================================================== */

.pm-nl.pm-nl,
.pm-nl.pm-nl *{box-sizing:border-box}

/* --- tokens --------------------------------------------------------------- */
.pm-nl.pm-nl{
  --pm-teal:#047391;
  --pm-red:#EF4424;
  --pm-ink:#0b2530;
  --pm-body:#4a4a4a;
  --pm-muted:#6f6f6f;
  --pm-line:#e2e8eb;
  font-family:"Comfortaa",sans-serif;
}

/* --- overlay -------------------------------------------------------------- */
.pm-nl.pm-nl{
  position:fixed;inset:0;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  padding:28px 24px;
  background:rgba(6,30,39,.55);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:pm-nl-fade .26s ease both;
}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .pm-nl.pm-nl{
    background:rgba(6,30,39,.45);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
}
.pm-nl.pm-nl[hidden]{display:none}
@keyframes pm-nl-fade{from{opacity:0}to{opacity:1}}

/* --- dialog --------------------------------------------------------------- */
.pm-nl__dialog.pm-nl__dialog{
  position:relative;width:100%;max-width:560px;margin:auto;
  background:#fff;border:1px solid var(--pm-line);border-radius:0;
  box-shadow:0 24px 64px rgba(4,37,48,.22);
  padding:44px 44px 34px;
  animation:pm-nl-rise .3s cubic-bezier(.22,.8,.3,1) both;
}
.pm-nl__dialog.pm-nl__dialog::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--pm-teal),var(--pm-red));
}
.pm-nl__dialog.pm-nl__dialog:focus{outline:none}
@keyframes pm-nl-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --- close ---------------------------------------------------------------- */
.pm-nl__close.pm-nl__close{
  position:absolute;top:12px;right:12px;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;min-width:0;min-height:0;
  background:transparent;border:0;border-radius:0;
  color:var(--pm-muted);cursor:pointer;line-height:0;
  transition:color .25s,background-color .25s;
}
.pm-nl__close.pm-nl__close:hover{color:var(--pm-ink);background:#f4f8f9}
.pm-nl__close.pm-nl__close svg{display:block;width:18px;height:18px;flex:0 0 auto}

/* --- header --------------------------------------------------------------- */
.pm-nl__head.pm-nl__head{text-align:center;margin:0 0 26px}
.pm-nl__logo.pm-nl__logo{
  display:block;width:auto;height:58px;margin:0 auto 22px;
}
.pm-nl__title.pm-nl__title{
  margin:0 0 12px;font-family:"Comfortaa",sans-serif;font-weight:700;
  font-size:26px;line-height:1.25;letter-spacing:-.2px;color:var(--pm-ink);
}
.pm-nl__lead.pm-nl__lead{
  margin:0 auto;font-family:"Comfortaa",sans-serif;font-weight:400;
  font-size:14.5px;line-height:1.72;color:var(--pm-body);max-width:42ch;
}

/* --- HighLevel form host -------------------------------------------------- */
.pm-nl__formwrap.pm-nl__formwrap{position:relative;width:100%;min-height:200px}
.pm-nl__frame.pm-nl__frame{
  display:block;width:100%;min-height:430px;border:0;border-radius:0;
  background:transparent;overflow:hidden;
}
/* visibility rather than opacity, so the form is not reachable by keyboard
   while it is still covered by the skeleton — and unlike display:none it
   keeps its layout box, so the form inside still measures itself correctly */
.pm-nl__frame.pm-nl__frame[data-pm-ready="0"]{visibility:hidden;opacity:0}
.pm-nl__frame.pm-nl__frame[data-pm-ready="1"]{visibility:visible;opacity:1;transition:opacity .3s ease}

/* skeleton shown until the HighLevel iframe reports it is ready */
.pm-nl__loading.pm-nl__loading{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:16px;pointer-events:none;
}
.pm-nl__loading.pm-nl__loading[hidden]{display:none}
.pm-nl__bar.pm-nl__bar{
  display:block;height:46px;background:#f1f5f7;border:1px solid #e8eef0;
  animation:pm-nl-pulse 1.5s ease-in-out infinite;
}
.pm-nl__bar.pm-nl__bar:last-child{height:46px;background:#eef3f5}
@keyframes pm-nl-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.pm-nl__srstatus.pm-nl__srstatus{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;margin:-1px;padding:0;border:0;
}

/* fallback shown when the HighLevel form cannot be reached */
.pm-nl__fallback.pm-nl__fallback{
  margin:0;padding:26px 22px;text-align:center;
  border:1px dashed #cfd9de;background:#fafcfd;
  font-family:"Comfortaa",sans-serif;font-size:14px;line-height:1.7;color:var(--pm-body);
}
.pm-nl__fallback.pm-nl__fallback a{color:var(--pm-teal);text-decoration:underline;text-underline-offset:2px}

/* --- footnote ------------------------------------------------------------- */
.pm-nl__note.pm-nl__note{
  margin:18px 0 0;text-align:center;
  font-family:"Comfortaa",sans-serif;font-weight:400;font-size:12.5px;
  line-height:1.65;color:var(--pm-muted);
}

/* --- focus ---------------------------------------------------------------- */
.pm-nl.pm-nl :focus-visible{outline:2px solid var(--pm-teal);outline-offset:3px}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:640px){
  .pm-nl.pm-nl{padding:16px;align-items:flex-start}
  .pm-nl__dialog.pm-nl__dialog{
    max-width:none;width:calc(100% - 0px);
    padding:34px 22px 26px;
  }
  .pm-nl__logo.pm-nl__logo{height:46px;margin-bottom:18px}
  .pm-nl__title.pm-nl__title{font-size:21px}
  .pm-nl__lead.pm-nl__lead{font-size:14px}
  .pm-nl__head.pm-nl__head{margin-bottom:22px}
  .pm-nl__close.pm-nl__close{top:8px;right:8px}
}
@media (max-width:360px){
  .pm-nl.pm-nl{padding:12px}
  .pm-nl__dialog.pm-nl__dialog{padding:30px 16px 22px}
  .pm-nl__title.pm-nl__title{font-size:19px}
  .pm-nl__logo.pm-nl__logo{height:40px}
}
/* short viewports (mobile landscape, open keyboard) */
@media (max-height:620px){
  .pm-nl.pm-nl{align-items:flex-start}
  .pm-nl__dialog.pm-nl__dialog{padding-top:30px}
  .pm-nl__logo.pm-nl__logo{height:40px;margin-bottom:14px}
  .pm-nl__head.pm-nl__head{margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  .pm-nl.pm-nl,.pm-nl__dialog.pm-nl__dialog{animation:none}
  .pm-nl__bar.pm-nl__bar{animation:none}
  .pm-nl__close.pm-nl__close,.pm-nl__frame.pm-nl__frame{transition:none}
}

/* --- newsletter link rendered beside the footer cookie link --------------- */
.pm-nl-link.pm-nl-link{
  display:inline;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;
}
.pm-nl-link.pm-nl-link:hover{color:#EF4424}
.pm-nl-link.pm-nl-link:focus-visible{outline:2px solid #047391;outline-offset:2px}