/* =============================================================
   Hey Rafi Webinar Funnel — LIGHT MODE OVERRIDES
   Load AFTER style.css to flip every token to the light palette.
   All structure, spacing, and component styles stay in style.css.
   ============================================================= */

/* ─── Re-map design tokens ───────────────────────────────────── */
:root {
  /* Canvas & surfaces */
  --color-bg:          #F8F9FA;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #F1F3F5;
  --color-border:      rgba(0,0,0,0.07);
  --color-border-med:  rgba(0,0,0,0.12);

  /* Accent — keep mint but richer on light bg */
  --color-accent:      #059669;          /* emerald-600 — readable on white */
  --color-accent-dim:  rgba(5,150,105,0.09);
  --color-accent-glow: rgba(5,150,105,0.18);

  /* Text */
  --color-text-primary:   #0F172A;       /* slate-900 */
  --color-text-secondary: #475569;       /* slate-600 */
  --color-text-muted:     #94A3B8;       /* slate-400 */

  /* Shadows — softer on light */
  --shadow-glow: 0 0 40px rgba(5,150,105,0.12);
  --shadow-card: 0 2px 24px rgba(0,0,0,0.08);
}

/* ─── Body ───────────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  background: rgba(248,249,250,0.92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Ticker ─────────────────────────────────────────────────── */
.ticker-wrap {
  background: var(--color-bg);
  border-top-color: var(--color-border);
  border-bottom-color: var(--color-border);
}

.ticker-inner span {
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(0,0,0,0.22);
}

.ticker-inner span.accent {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--color-accent);
}

/* ─── Hero arc — lighter opacity on white ───────────────────── */
.hero__arc,
.page-hero__arc {
  opacity: 0.25;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card,
.speaker-card,
.bty-card,
.next-step-card,
.prep-card,
.why-card,
.stat-box {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.05);
}

.card:hover,
.speaker-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--color-border-med);
}

/* ─── Registration box ───────────────────────────────────────── */
.reg-box {
  background: var(--color-surface);
  border-color: var(--color-border-med);
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
}

/* ─── Form inputs ────────────────────────────────────────────── */
.form-input {
  background: var(--color-surface-2);
  border-color: var(--color-border-med);
  color: var(--color-text-primary);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
  background: #fff;
}

/* ─── Primary button — dark text on mint ────────────────────── */
.btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-accent-dim);
}

.btn--primary:hover {
  background: #047857;
  box-shadow: var(--shadow-glow);
}

.btn--outline {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover {
  background: var(--color-accent-dim);
}

.btn--ghost {
  color: var(--color-text-secondary);
  border-color: var(--color-border-med);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Pills / Tags ───────────────────────────────────────────── */
.pill {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Confirm icon ───────────────────────────────────────────── */
.confirm-icon {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Journey banner (confirmation-call) ─────────────────────── */
.journey-banner {
  background: linear-gradient(135deg, rgba(5,150,105,0.06) 0%, rgba(56,189,248,0.04) 50%, rgba(129,140,248,0.04) 100%);
  border-color: rgba(5,150,105,0.18);
}

.journey-banner::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(5,150,105,0.08), transparent 70%);
}

.journey-banner__icon {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Step circles ───────────────────────────────────────────── */
.step__circle {
  background: var(--color-surface);
  border-color: var(--color-border-med);
  color: var(--color-text-muted);
}

.step--active .step__circle {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.step--done .step__circle {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.step-connector {
  background: var(--color-border-med);
}

.step-connector--done {
  background: var(--color-accent);
}

/* ─── Avatar placeholders ────────────────────────────────────── */
.avatar-placeholder {
  background: var(--color-surface-2);
  border-color: var(--color-border-med);
  color: var(--color-text-muted);
}

/* ─── Meta items ─────────────────────────────────────────────── */
.meta-item {
  color: var(--color-text-secondary);
}

.meta-item strong {
  color: var(--color-text-primary);
}

/* ─── BTY section ────────────────────────────────────────────── */
.bty-section {
  background: var(--color-surface-2);
  border-top-color: var(--color-border);
  border-bottom-color: var(--color-border);
}

.bty-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.bty-card__icon {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* ─── Event & call detail cards ──────────────────────────────── */
.event-card,
.call-detail-card {
  background: var(--color-surface);
  border-color: var(--color-border-med);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

.event-card__row,
.call-detail-row {
  border-bottom-color: var(--color-border);
}

.event-card__icon,
.call-detail-icon {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.event-card__label,
.call-detail-label {
  color: var(--color-text-muted);
}

/* ─── CTA band (confirmation-webinar) ───────────────────────── */
.cta-band {
  background: var(--color-surface);
  border-color: var(--color-border-med);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

/* ─── Calendly wrapper ───────────────────────────────────────── */
.cal-wrapper {
  background: var(--color-surface);
  border-color: var(--color-border-med);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

.cal-header {
  border-bottom-color: var(--color-border);
}

.cal-placeholder__icon {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Webinar remind block ───────────────────────────────────── */
.webinar-remind {
  background: var(--color-surface);
  border-color: var(--color-border-med);
}

/* ─── Trust items (schedule-call) ───────────────────────────── */
.trust-item__icon {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* ─── Why cards (schedule-call) ─────────────────────────────── */
.why-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ─── Next step num circles ──────────────────────────────────── */
.next-step-card__num,
.prep-card__num {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Confirm badge ──────────────────────────────────────────── */
.confirm-badge {
  background: var(--color-accent-dim);
  border-color: rgba(5,150,105,0.25);
  color: var(--color-accent);
}

/* ─── Share buttons ──────────────────────────────────────────── */
.share-btn {
  border-color: var(--color-border-med);
  color: var(--color-text-secondary);
}

.share-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top-color: var(--color-border);
  background: var(--color-surface);
}

/* ─── Divider ────────────────────────────────────────────────── */
.divider {
  background: var(--color-border);
}

/* ─── Stat boxes ─────────────────────────────────────────────── */
.stat-box {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.stat-box__value {
  color: var(--color-accent);
}

/* ─── Bullet icons ───────────────────────────────────────────── */
.bullet-icon {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* ─── Speaker card role label ────────────────────────────────── */
.speaker-card__role {
  color: var(--color-accent);
}

/* ─── BTY logo row + label ───────────────────────────────────── */
.bty-label {
  color: var(--color-text-muted);
}

/* ─── Form note ──────────────────────────────────────────────── */
.form-note {
  color: var(--color-text-muted);
}

/* ─── Hosted-by row ──────────────────────────────────────────── */
.hosted-by {
  color: var(--color-text-muted);
}

/* ─── Arc SVG gradient divider ───────────────────────────────── */
/* The inline SVG on confirmation pages uses fixed stop-colors;
   override the wrapping div's opacity so it reads on white */
[style*="height:60px"][style*="overflow:hidden"] {
  opacity: 0.2 !important;
}