/* === ROOT CONTAINER === */
#nl-popup.hidden { display: none; }
#nl-popup { position: fixed; inset: 0; z-index: 999999; }

/* === BACKDROP (50%) === */
#nl-popup .nlp-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--surface-primary) 50%, transparent);
  z-index: 999998;
}

/* === DIALOG BOX === */
#nl-popup .nlp-dialog {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 500px; min-height: 300px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-dialog);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-sizing: border-box;
  padding: 0; overflow: visible;
  z-index: 999999;
}


#nl-popup .nlp-inner {
  position: relative;
  width: 100%;
  padding: 35px 25px 25px; /* 45 top, 25 right/left */
  box-sizing: border-box;
}


#nl-popup .nlp-close {
  all: unset;
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 28px; line-height: 1;
  color: var(--text-primary); cursor: pointer; background: transparent;
  z-index: 1; box-sizing: content-box;
  padding-top: 40px;
  padding-right: 25px;
}

/* === TITLE === */
#nl-popup .nlp-title {
  font-family: var(--font-special);
  /* h3 inherits Astra's 600 weight unless we explicitly restore Tangerine 400. */
  font-weight: 400;
  font-synthesis: none;
  font-size: 31px; color: var(--text-primary);
  margin: 0 0 25px; text-align: center;
}

/* === DESCRIPTION === */
#nl-popup .nlp-sub {
  font-family: var(--font-body);
  font-size: 9px; color: var(--text-primary); text-align: center;
  max-width: 360px; line-height: 1.7; margin: 0 auto 30px;
}


#nl-popup #nlp-form {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* === EMAIL INPUT === */
#nl-popup input[type="email"]{
  width: 230px; background: transparent; border: none; border-bottom: 1px solid var(--text-primary);
  font-family: var(--font-body); font-size: 8px; color: var(--text-primary); text-align: left;
  outline: none; padding: 4px 0; margin-bottom: 15px;
}
#nl-popup input::placeholder{
  color:var(--text-primary); font-family:var(--font-body); font-size:8px; text-align:left;
}

/* === BUTTON === */
#nl-popup .nlp-btn{
  -webkit-appearance:none; appearance:none; border:0; padding:0;
  width:230px; height:27px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--text-primary); color: var(--text-inverse); font-family:var(--font-heading); font-size:11px;
  font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:1px; line-height:1; margin:0 auto; cursor:pointer;
  z-index: 1000000;
}
#nl-popup .nlp-btn:hover{ opacity:.9; }

/* === MESSAGE === */
#nl-popup .nlp-msg{ margin-top:10px; font-size:11px; text-align:center; }
#nl-popup .nlp-msg.ok{ color:var(--status-success); }  #nl-popup .nlp-msg.err{ color:var(--status-error); }

/* === MOBILE === */
@media (max-width:480px){
  #nl-popup .nlp-dialog{ width:90vw; min-height:unset; }
  /* Keep the computed input font at 16px to prevent iOS Safari auto-zoom,
     then scale the field to the intended 11px visual size. */
  #nl-popup .nlp-email-field{
    --nlp-mobile-input-scale: 0.6875;
    width:230px;
    height:28px;
    display:flex;
    align-items:center;
    margin-bottom:15px;
    overflow:hidden;
    border-bottom:1px solid var(--text-primary);
  }
  #nl-popup .nlp-email-field input[type="email"]{
    width:calc(100% / var(--nlp-mobile-input-scale));
    max-width:none;
    margin:0;
    padding:4px 0;
    box-sizing:border-box;
    border:0;
    font-size:16px;
    transform:scale(var(--nlp-mobile-input-scale));
    transform-origin:left center;
  }
  #nl-popup .nlp-email-field input::placeholder{
    font-size:11.64px;
  }
}