/* QABash Intelligence Newsletter — front-end capture forms.
   Modern, glassy, dark-mode-first. Inspired by Morning Brew / Lenny's. */

.qnl-form{
  --qnl-accent:#6366f1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box; max-width:560px; width:100%;
}
.qnl-form *{box-sizing:border-box}

.qnl-theme-dark{color:#e6e6ea}
.qnl-theme-light{color:#0b0b0f}

.qnl-variant-card{
  padding:28px; border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.qnl-theme-light.qnl-variant-card{
  background:rgba(0,0,0,.025); border-color:rgba(0,0,0,.08);
}

.qnl-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#9b9bab; margin-bottom:14px;
}
.qnl-dot{width:6px;height:6px;border-radius:50%;background:var(--qnl-accent);box-shadow:0 0 0 4px rgba(99,102,241,.18)}

.qnl-heading{font-size:24px;line-height:1.2;letter-spacing:-.025em;margin:0 0 8px;font-weight:800}
.qnl-sub{font-size:15px;line-height:1.6;margin:0 0 18px;color:#a6a6b3}
.qnl-theme-light .qnl-sub{color:#52525b}

.qnl-row{display:flex;gap:8px;background:#fff;border-radius:14px;padding:6px;border:1px solid rgba(0,0,0,.06)}
.qnl-row input[type=email]{
  flex:1;border:0;outline:0;background:transparent;
  padding:12px 14px;font-size:15px;color:#0b0b0f;min-width:0;
}
.qnl-row button{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:0;cursor:pointer;border-radius:10px;
  background:#0b0b0f;color:#fff;font-weight:700;font-size:15px;padding:12px 20px;
  transition:transform .12s,opacity .12s;
}
.qnl-row button:hover{transform:translateX(1px)}
.qnl-row button:disabled{opacity:.55;cursor:progress}
.qnl-arrow{transition:transform .15s}
.qnl-row button:hover .qnl-arrow{transform:translateX(3px)}

.qnl-consent{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12px;line-height:1.5;color:#9b9bab;cursor:pointer}
.qnl-consent input{margin-top:2px;accent-color:var(--qnl-accent)}

.qnl-meta{margin-top:12px;font-size:12px;color:#8a8a98}
.qnl-check{color:#10b981;font-weight:700}

.qnl-msg{margin-top:12px;font-size:14px;min-height:1px}
.qnl-msg.is-error{color:#f87171}
.qnl-msg.is-success{color:#34d399}

/* ── Floating variants ───────────────────────────────────────── */
.qnl-float{position:fixed;z-index:99999}
.qnl-float .qnl-form{max-width:none}
.qnl-close{
  position:absolute;top:10px;right:12px;z-index:2;border:0;background:transparent;
  color:#9b9bab;font-size:24px;line-height:1;cursor:pointer;padding:4px;
}
.qnl-close:hover{color:#fff}

.qnl-float-popup{
  inset:0;display:grid;place-items:center;background:rgba(4,4,8,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:20px;
}
.qnl-float-popup .qnl-variant-card{
  position:relative;max-width:440px;width:100%;
  background:#101016;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:qnl-pop .25s ease;
}
.qnl-float-exit{inset:0;display:grid;place-items:center;background:rgba(4,4,8,.6);padding:20px}
.qnl-float-exit .qnl-variant-card{position:relative;max-width:440px;width:100%;background:#101016;border:1px solid rgba(255,255,255,.1)}

.qnl-float-slidein{
  right:24px;bottom:24px;max-width:380px;
}
.qnl-float-slidein .qnl-variant-card{
  position:relative;background:#101016;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.5);animation:qnl-slide .3s ease;
}

.qnl-float-bar{
  left:0;right:0;bottom:0;background:#0b0b0f;border-top:1px solid rgba(255,255,255,.1);
  padding:14px 20px;
}
.qnl-float-bar .qnl-form{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:16px}
.qnl-float-bar .qnl-tag,.qnl-float-bar .qnl-sub,.qnl-float-bar .qnl-meta{display:none}
.qnl-float-bar .qnl-heading{font-size:16px;margin:0;flex:0 0 auto}
.qnl-float-bar .qnl-row{flex:1;min-width:240px}
.qnl-float-bar .qnl-close{position:static;margin-left:auto}

@keyframes qnl-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes qnl-slide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .qnl-row{flex-direction:column}
  .qnl-row button{justify-content:center}
  .qnl-float-bar .qnl-form{flex-direction:column;align-items:stretch}
}