/* ATB Join Popup — single-panel form modal.
 *
 * All rules scoped under #atb-join-popup to prevent leaking into the
 * host opp landing page. The popup is hidden by default; opp.php JS
 * removes the .hidden class to reveal it.
 *
 * Previously a two-column split (narrative + form). Dropped 2026-05-17
 * — too much reading, slowed conversion. Now form-only with a punchy
 * one-line headline + 3 dense benefit bullets above the email field.
 */

#atb-join-popup{
  position:fixed;inset:0;z-index:100;
  display:none;
}
#atb-join-popup.hidden{display:none}
#atb-join-popup:not(.hidden){display:block}

/* ============== SCRIM ============== */
#atb-join-popup .atb-jp-scrim{
  position:fixed;inset:0;
  background:rgba(6,40,24,0.42);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  backdrop-filter:blur(6px) saturate(160%);
  z-index:50;
  display:grid;place-items:center;
  padding:24px;
  overflow:auto;
  animation:atb-jp-scrim-in .35s ease-out;
}
@keyframes atb-jp-scrim-in{from{opacity:0}to{opacity:1}}

/* ============== MODAL ============== */
#atb-join-popup .atb-jp-modal{
  width:100%;max-width:480px;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(11,36,25,.45),
             0 12px 30px -10px rgba(11,36,25,.18),
             inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
  animation:atb-jp-modal-in .45s cubic-bezier(.2,.8,.3,1.05) both;
  border:1px solid rgba(255,255,255,.7);
  font-family:'Geist','Inter',system-ui,sans-serif;
  color:var(--ink,#0b2419);
}
@keyframes atb-jp-modal-in{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============== CLOSE BUTTON ============== */
#atb-join-popup .atb-jp-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ink-mute,#5f6d62);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s, color .15s, transform .15s;
  z-index:5;
  padding:0;
}
#atb-join-popup .atb-jp-close:hover{
  background:#fff;color:var(--ink,#0b2419);transform:rotate(90deg);
}
#atb-join-popup .atb-jp-close svg{width:14px;height:14px}

/* ============== TWO-STEP CONTAINER ==============
 * Each step lives in its own .atb-jp-step panel. Only the panel whose
 * data-step matches data-current-step on the popup root is visible.
 * Sliding transition adds a 220ms translate+fade between steps.
 */
#atb-join-popup .atb-jp-step{
  display:none;
  opacity:0;
  transform:translateX(12px);
  transition:opacity .22s ease, transform .22s ease;
}
#atb-join-popup[data-current-step="1"] .atb-jp-step[data-step="1"],
#atb-join-popup[data-current-step="2"] .atb-jp-step[data-step="2"],
#atb-join-popup[data-current-step="3"] .atb-jp-step[data-step="3"]{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* Trigger the enter-animation. */
  animation:atb-jp-step-in .28s ease forwards;
}
@keyframes atb-jp-step-in{
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:translateX(0)}
}

/* Inline check glyph used in the step-2 logged-out headline */
#atb-join-popup .atb-jp-check-inline{
  color:#2f8a52;font-weight:700;margin-right:4px;
}

/* Step 2 lede (italic-ish, smaller than the headline, comfortable
 * reading width). */
#atb-join-popup .atb-jp-step2-lede{
  font-family:'Newsreader','Geist',serif;
  font-size:14.5px;line-height:1.5;color:#3a4a40;
  margin:0;
}
#atb-join-popup .atb-jp-step2-lede b{color:#0b2419;font-weight:600}

/* Hint pill under the affiliate-ID input (shows extracted ID after paste). */
#atb-join-popup .atb-jp-step2-hint{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11.5px;color:#2f8a52;
  margin:4px 2px 0;letter-spacing:0.02em;font-weight:500;
}

/* "I signed up through this link" confirmation checkbox — sits under
 * the affiliate-ID input. Defaults to checked since the user reached
 * the popup by clicking a Join CTA. Unchecking flips the server-side
 * joined_via from sponsor_link to direct_paste so admin can later
 * verify alignment. */
#atb-join-popup .atb-jp-confirm{
  display:flex;align-items:flex-start;gap:8px;
  margin:6px 2px 0;
  font-family:'Geist',system-ui,sans-serif;
  font-size:12.5px;line-height:1.4;color:#3a4a40;
  cursor:pointer;
}
#atb-join-popup .atb-jp-confirm input[type="checkbox"]{
  appearance:auto;
  margin-top:2px;flex:0 0 14px;
  accent-color:#0b3d2e;
  cursor:pointer;
}
#atb-join-popup .atb-jp-confirm-text{flex:1;user-select:none}

/* Inline form-error pill — used by both step1 and step2. */
#atb-join-popup .atb-jp-form-error{
  font-family:'Geist',system-ui,sans-serif;
  font-size:12.5px;line-height:1.4;color:#a63a3a;
  background:#fef0ed;border:1px solid rgba(166,58,58,.22);
  border-radius:10px;padding:8px 12px;margin:2px 0;
}

/* ============== FORM PANEL ============== */
#atb-join-popup .atb-jp-panel-right{
  padding:32px 32px 22px;
  background:#fff;
  position:relative;
}
#atb-join-popup .atb-jp-opp-echo{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  padding:6px 12px 6px 6px;
  background:#f5f1e6;
  border:1px solid rgba(11,36,25,0.08);
  border-radius:99px;
}
#atb-join-popup .atb-jp-opp-echo .lg{
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#004b3b,#0b3d2e);
  color:#fff;display:grid;place-items:center;
  font-family:'Newsreader',serif;font-size:13px;font-style:italic;font-weight:500;
  flex:0 0 auto;
}
#atb-join-popup .atb-jp-opp-echo .tx{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10px;color:#5f6d62;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
}
#atb-join-popup .atb-jp-opp-echo .tx b{color:#0b2419;font-weight:600}

#atb-join-popup .atb-jp-h3{
  font-family:'Newsreader',serif;
  font-weight:500;
  font-size:24px;
  letter-spacing:-0.018em;
  line-height:1.15;
  margin:0;
  color:#0b2419;
  text-wrap:balance;
}
#atb-join-popup .atb-jp-h3 em{font-style:italic;color:#0b3d2e;font-weight:500}

/* ============== BENEFITS ============== */
#atb-join-popup .atb-jp-benefits{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:10px;margin:2px 0 4px;
}
#atb-join-popup .atb-jp-benefits .b{
  display:flex;align-items:flex-start;gap:11px;
  font-size:13.5px;
  line-height:1.45;
  color:#3a4a40;
  letter-spacing:-0.005em;
}
#atb-join-popup .atb-jp-benefits .b .ck{
  width:18px;height:18px;border-radius:50%;
  background:#e5efe8;
  color:#0b3d2e;
  display:grid;place-items:center;
  flex:0 0 auto;margin-top:1px;
  border:1px solid rgba(0,75,59,.18);
}
#atb-join-popup .atb-jp-benefits .b .ck svg{width:9px;height:9px}
#atb-join-popup .atb-jp-benefits .b b{color:#0b2419;font-weight:600}

/* ============== FORM ============== */
#atb-join-popup .atb-jp-form{
  display:flex;flex-direction:column;gap:10px;margin-top:4px;
}
#atb-join-popup .atb-jp-field{
  position:relative;
  display:flex;align-items:center;
  background:#fff;
  border:1.5px solid rgba(11,36,25,0.16);
  border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
#atb-join-popup .atb-jp-field:focus-within{
  border-color:#0b3d2e;
  box-shadow:0 0 0 3px rgba(201,169,97,.28);
}
#atb-join-popup .atb-jp-field .pre{
  padding:0 10px 0 14px;color:#5f6d62;
  display:grid;place-items:center;
}
#atb-join-popup .atb-jp-field .pre svg{width:16px;height:16px}
#atb-join-popup .atb-jp-field input{
  flex:1;min-width:0;
  border:none;outline:none;background:transparent;
  padding:14px 14px 14px 0;
  font-family:inherit;font-size:14.5px;color:#0b2419;font-weight:500;
  letter-spacing:-0.005em;
  -webkit-appearance:none;appearance:none;
  border-radius:0;
  box-shadow:none;
}
#atb-join-popup .atb-jp-field input:focus,
#atb-join-popup .atb-jp-field input:focus-visible{
  outline:none;
  box-shadow:none;
}
#atb-join-popup .atb-jp-field input::placeholder{color:#8a948a;font-weight:400}

/* Cloudflare Turnstile container — invisible mode renders a 0-size
 * iframe and only shows a challenge in a popup if CF flags the
 * request. Clamp the container to 0 so the "Success!" badge (only
 * rendered in managed/flexible modes) can't push form layout. */
#atb-join-popup .cf-turnstile{
  height:0;
  overflow:hidden;
  margin:0;
}

/* ============== CTA ============== */
#atb-join-popup .atb-jp-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,#004b3b 0%,#0b3d2e 100%);
  color:#fff;
  border:1px solid rgba(0,75,59,.5);
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(0,75,59,.55),
             inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .2s, background .2s;
  text-align:center;
  width:100%;
}
#atb-join-popup .atb-jp-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px -12px rgba(0,75,59,.6),
             inset 0 1px 0 rgba(255,255,255,.18);
}
#atb-join-popup .atb-jp-cta .opp-name{color:#fff;font-weight:600}
#atb-join-popup .atb-jp-cta .arr{transition:transform .15s;width:14px;height:14px;flex:0 0 auto}
#atb-join-popup .atb-jp-cta:hover .arr{transform:translateX(3px)}

/* ============== TRUST + NAME LINE ============== */
#atb-join-popup .atb-jp-trust{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10px;color:#5f6d62;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
  margin-top:2px;
}
#atb-join-popup .atb-jp-trust .sep{opacity:.4}
#atb-join-popup .atb-jp-trust .ck{
  color:#2f8a52;display:inline-flex;align-items:center;gap:5px;font-weight:500;
}
#atb-join-popup .atb-jp-trust .ck::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#50c878;
}
#atb-join-popup .atb-jp-nameline{
  font-size:11.5px;color:#5f6d62;text-align:center;
  margin:0;line-height:1.5;
}

/* ============== SKIP LINK ============== */
#atb-join-popup .atb-jp-skip{
  text-align:center;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid rgba(11,36,25,0.08);
}
#atb-join-popup .atb-jp-skip a{
  font-family:'Newsreader',serif;
  font-style:italic;
  font-size:13.5px;
  color:#5f6d62;
  letter-spacing:-0.005em;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
#atb-join-popup .atb-jp-skip a:hover{
  color:#0b2419;
  border-bottom-color:rgba(11,36,25,0.16);
}

/* ============== MOBILE ============== */
@media (max-width:720px){
  #atb-join-popup .atb-jp-panel-right{
    padding:24px 22px 18px;
    gap:14px;
  }
  #atb-join-popup .atb-jp-h3{font-size:20px}
  #atb-join-popup .atb-jp-scrim{
    padding:14px;
    align-items:flex-start;
    padding-top:24px;
  }
  /* Smaller close button hit area on mobile */
  #atb-join-popup .atb-jp-close{top:10px;right:10px}
}

@media (max-width:420px){
  #atb-join-popup .atb-jp-h3{font-size:18px}
  #atb-join-popup .atb-jp-panel-right{padding:20px 18px 16px}
}