/* Subscribe popover, ported verbatim from events.run.world (runevents-landing
   shared/styles/run-events.css) so the flow + UI match exactly. Only the rules
   the popover Subscribe component uses are included, plus the semantic CSS vars
   it depends on that run.css doesn't already define. Scoped to the component's
   own classes so it never touches the rest of the creators page. */

:root {
  /* Semantic tokens used by the popover (gray-*/accent/font-* already live in run.css). */
  --accent: var(--orbit-blue);
  --text: var(--gray-0);
  --text-secondary: var(--gray-2);
  --text-muted: var(--gray-6);
  --border: var(--gray-9);
  --bg-elevated: var(--gray-10);
  --bg-overlay: var(--gray-11);
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-floating: 0 24px 48px rgba(0,0,0,.5);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.subscribe-wrap .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 150ms ease, background 200ms ease, border-color 200ms ease;
}
.subscribe-wrap .btn:hover { transform: translateY(-1px); }
.subscribe-wrap .btn--primary { background: var(--orbit-blue); color: var(--gray-12); font-weight: 600; }
.subscribe-wrap .btn--primary:hover { filter: brightness(1.06); }
.subscribe-wrap .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.subscribe-wrap .btn--ghost:hover { border-color: var(--gray-7); }
.subscribe-wrap .btn--quiet { background: rgba(255,255,255,.04); color: var(--text); }
.subscribe-wrap .btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.subscribe-wrap .btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.subscribe-wrap .btn--full { width: 100%; }
.subscribe-wrap .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.subscribe-wrap .btn svg { flex-shrink: 0; }

/* ─── Subscribe popover ──────────────────────────────────────────────────── */
.subscribe-wrap { position: relative; }
.subscribe-wrap .popover {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; z-index: 60; box-shadow: var(--shadow-floating);
  text-align: left;
}
.subscribe-wrap .popover[hidden] { display: none; }
.subscribe-wrap .popover-kicker {
  color: var(--accent); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px;
}
.subscribe-wrap .popover-kicker::before { content:''; width: 18px; height: 1px; background: currentColor; }
.subscribe-wrap .popover-h { font-size: 15px; color: var(--text); font-weight: 600; margin: 0 0 6px; }
.subscribe-wrap .popover-p { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 0 0 14px; }
.subscribe-wrap .popover-input {
  width: 100%; height: 40px; padding: 0 12px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  /* 16px keeps iOS from auto-zooming (and shifting the page) on focus. */
  font-family: var(--font-sans); font-size: 16px; outline: none;
  transition: border-color 150ms;
}
.subscribe-wrap .popover-input:focus { border-color: var(--accent); }
.subscribe-wrap .popover-input.is-error { border-color: var(--crash-red); }
.subscribe-wrap .popover-error { margin-top: 6px; font-size: 12px; color: var(--crash-red); }
.subscribe-wrap .consent { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; cursor: pointer; }
.subscribe-wrap .consent-box { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.subscribe-wrap .consent-label { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.subscribe-wrap .consent.is-error .consent-label { color: var(--crash-red); }
.subscribe-wrap .popover-actions { display: flex; gap: 8px; margin-top: 14px; }
.subscribe-wrap .popover-foot { margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.subscribe-wrap .popover-foot a { color: var(--accent); }
.subscribe-wrap .popover-success-kicker {
  color: var(--flux-green); font-size: 11px; font-family: var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.subscribe-wrap .popover-success-email { font-size: 14px; color: var(--text); font-weight: 600; line-height: 1.35; }

@media (max-width: 520px) {
  /* On narrow screens, anchor the popover to the left edge so it never opens
     off-screen or gets crushed to the button's width. */
  .subscribe-wrap .popover { left: auto; right: 0; width: min(340px, calc(100vw - 32px)); }
}