/* ═══════════════════════════════════════════════════════════════
   join.css
   BrandMentions Join (join.php) — email-only signup (A/B variant of
   signup.php). The page shares signup-trial-redesign.css, so the header,
   card, inputs, CTA, callouts, right panel and "trusted by" row are the
   signup.php ones. This file only adds what signup.php does not have:
   the step container, the CTA loader, the emailed-code step and the
   inline checkout / post-submit area. Everything is scoped to body.ca-page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Step container ── */
.ca-page .ca-form-panel {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* The email step is short and the card takes its height from the right
   panel: center the form vertically on desktop. */
@media (min-width: 861px) {
  .ca-page .sv2-left {
    justify-content: center;
  }
}

/* A shorter card than signup.php: tighter right panel (about 60px less). */
@media (min-width: 861px) {
  .ca-page .sv2-right {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .ca-page .sv2-testimonial {
    margin-bottom: 24px;
  }

  /* With the tighter padding the dot grid would sit on the quote: drop it */
  .ca-page .sv2-dot-grid {
    display: none;
  }
}

.ca-page .ca-step {
  width: 100%;
  animation: ca-stepIn 260ms ease-out both;
}

.ca-page .ca-step[hidden] {
  display: none !important;
}

@keyframes ca-stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shake on failed code submit (register_form.sv2-shake comes from signup css) */
.ca-page #verify_form.sv2-shake {
  animation: sv2-shake 400ms ease;
}

/* ── CTA loader (Create My Account / Verifying…) ── */
.ca-page .ca-btn .ca-btn-loader {
  display: none;
  align-items: center;
  gap: 9px;
}

.ca-page .ca-btn .ca-btn-loader svg {
  animation: sv2-spin 700ms linear infinite;
}

.ca-page .ca-btn.is-loading .ca-btn-label,
.ca-page .ca-btn.is-loading .ca-btn-arrow {
  display: none;
}

.ca-page .ca-btn.is-loading .ca-btn-loader {
  display: flex;
}

/* ── Step 2: emailed verification code (existing inactive accounts) ── */
.ca-page .ca-step-code h2 {
  margin: 0 0 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: #1A1C2E;
}

.ca-page .ca-sent-to {
  margin: 0 0 22px;
  color: #6B6F96;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.ca-page .ca-sent-to strong {
  color: #1A1C2E;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ca-page .ca-inline-link {
  padding: 0;
  background: none;
  border: 0;
  color: #5B4FC4;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 150ms;
  -webkit-appearance: none;
  appearance: none;
}

.ca-page .ca-inline-link:hover {
  color: #4A3FB0;
}

.ca-page .ca-inline-link:disabled {
  color: #A8ADCC;
  text-decoration: none;
  cursor: default;
}

.ca-page .ca-sent-to .ca-inline-link {
  margin-left: 6px;
}

.ca-page .ca-otp {
  display: flex;
  gap: 12px;
  width: 100%;
}

.ca-page .ca-otp-slot {
  flex: 1 1 0;
  min-width: 0;
  height: 76px;
  padding: 0;
  margin: 0;
  color: #1A1C2E;
  background: #fff;
  border: 1.5px solid #C8CBDF;
  border-radius: 11px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  caret-color: #5B4FC4;
  outline: 0;
  transition: border-color 150ms, box-shadow 150ms;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.ca-page .ca-otp-slot::-webkit-outer-spin-button,
.ca-page .ca-otp-slot::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ca-page .ca-otp-slot:hover:not(:focus) {
  border-color: #9DA3C8;
}

.ca-page .ca-otp-slot:focus {
  border-color: #5B4FC4;
  box-shadow: 0 0 0 3px rgba(91, 79, 196, .12);
}

.ca-page .ca-otp-slot::selection {
  color: #fff;
  background: #5B4FC4;
}

.ca-page .ca-otp.is-invalid .ca-otp-slot {
  border-color: #ef4444;
}

.ca-page .ca-otp.is-invalid .ca-otp-slot:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.ca-page .ca-resend-row {
  margin: 18px 0 0;
  text-align: center;
  color: #7A80A8;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
}

.ca-page .ca-resend-row .ca-inline-link {
  margin-left: 4px;
}

.ca-page .ca-spam-note {
  margin: 4px 0 0;
  text-align: center;
  color: #A8ADCC;
  font-size: 12px;
}

/* ── Inline Paddle checkout / post-submit states ──
   JS adds .is-finished (steps + terms hidden) and .is-checkout (Paddle
   iframe visible) on .ca-form-panel; the "Almost there!" / "Check your
   email" cards use #register_loading_container from the signup css. */
.ca-page .ca-form-panel .checkout-container {
  display: none;
  width: 100%;
}

.ca-page .ca-form-panel.is-finished .ca-step,
.ca-page .ca-form-panel.is-finished .sv2-terms {
  display: none !important;
}

.ca-page .ca-form-panel.is-checkout .checkout-container {
  display: block;
  min-height: 830px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ca-page .ca-step,
  .ca-page .ca-btn .ca-btn-loader svg {
    animation: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ca-page .ca-step-code h2 {
    font-size: 23px;
  }

  .ca-page .ca-otp-slot {
    height: 64px;
    font-size: 28px;
  }
}

@media (max-width: 400px) {
  .ca-page .ca-otp {
    gap: 8px;
  }
}