/* ============================================================
   ApresMeet — Waitlist page styles (Phase 1 redesign)
   ============================================================ */

/* ── Remove pre-body spacer and menu gaps ─────────────────── */
#div_pre_body_main { margin-top: 0 !important; height: 0 !important; padding: 0 !important; line-height: 0 !important; }
#div_menu_outer    { padding: 0; margin: 0; }
#div_menu_outer .row { margin: 0; }
#div_menu_outer .col { padding: 0; }

/* ── Eliminate the strip ──────────────────────────────────── */
body.am-wl-active {
  background-color: var(--am-navy) !important;
}

/* ── Suppress footer top margin on waitlist ───────────────── */
.am-wl-page ~ footer.am-footer { margin-top: 0; }

/* ── Page wrapper ────────────────────────────────────────── */
.am-wl-page {
  flex: 1 0 auto;
}

/* ── Hero section ────────────────────────────────────────── */
.am-wl-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 56px; /* clear fixed navbar */
}

.am-wl-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   LEFT PANEL — black surround + contained media frame
   ═══════════════════════════════════════════════════════════ */
.am-wl-left {
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0;
}

/* ── Below frame zone — trust line on black surround ── */
.am-wl-below-frame {
  padding: .75rem 0 .25rem;
  padding-left: calc(1.25rem + 14%); /* frame padding + same shift as mid-content */
}

.am-media-frame {
  position: relative;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.am-media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.am-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.am-media-video.am-video-ready { opacity: 1; }

.am-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,27,42,0.72) 0%,
    rgba(13,27,42,0.10) 35%,
    rgba(13,27,42,0.10) 60%,
    rgba(13,27,42,0.68) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.am-wl-left__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  padding: 2.25rem 2rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Sub-copy + bullets — fills remaining space, shifted right, nudged down */
.am-wl-mid-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 14%;
  padding-top: 2rem;
}

/* ── Kicker label ────────────────────────────────────────── */
.am-wl-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-teal);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

.am-wl-kicker::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--am-teal);
  flex-shrink: 0;
}

/* ── Hero headline — overlaid near top of image ── */
.am-wl-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 42px;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}

.am-wl-h1 em {
  color: var(--am-teal);
  font-style: italic;
}

/* ── Sub-copy ────────────────────────────────────────────── */
.am-wl-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  line-height: 1.80;
  max-width: 400px;
  margin: 0 auto 1.5rem; /* auto centres within the centred content block */
}

/* ── Feature list ────────────────────────────────────────── */
.am-wl-features {
  display: inline-flex; /* shrink-wrap so bullets centre as a group */
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
  text-align: left; /* bullet text left-aligned within the centred group */
}

.am-wl-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

/* Dark-bg check circle */
.am-feature-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,196,154,.18);
  border: .5px solid rgba(0,196,154,.50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Trust line ──────────────────────────────────────────── */
.am-wl-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.48);
}

.am-wl-trust--mobile  { display: none; }
.am-wl-trust--desktop { display: inline; }

@media (max-width: 767px) {
  .am-wl-trust--desktop { display: none; }
  .am-wl-trust--mobile  { display: inline; }
}

.am-trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--am-teal);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   SHARED INPUT STYLES
   ═══════════════════════════════════════════════════════════ */
.am-inp-wrap {
  position: relative;
  margin-bottom: .875rem;
}

.am-inp-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--am-slate);
  transition: color .15s;
}

.am-inp-wrap:focus-within .am-inp-icon { color: var(--am-navy); }

.am-inp {
  width: 100%;
  border: 1.5px solid #94a3b8;
  border-radius: 10px;
  padding: 12px 14px 12px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--am-navy);
  outline: none;
  background: var(--am-white);
  transition: border-color .15s;
}

.am-inp::placeholder { color: #CBD5E1; }
.am-inp:focus        { border-color: var(--am-teal); }

.am-sep {
  border: none;
  border-top: .5px solid var(--am-slate-200);
  margin: .875rem 0;
}

/* ═══════════════════════════════════════════════════════════
   RIGHT PANEL — white form card
   ═══════════════════════════════════════════════════════════ */
.am-wl-right {
  background: var(--am-white);
  border-left: .5px solid var(--am-slate-200);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.am-wl-card {
  width: 100%;
  max-width: 400px;
  margin: 0;
}

.am-wl-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--am-navy);
  margin-bottom: .35rem;
}

.am-wl-card-sub {
  font-size: 13px;
  color: var(--am-slate);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* ── City selector ───────────────────────────────────────── */
.am-wl-city-section {
  margin-bottom: 1rem;
}

.am-wl-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--am-navy);
  margin-bottom: .6rem;
}

.am-wl-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.am-wl-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  border: 1.5px solid var(--am-slate-200);
  background: var(--am-white);
  color: var(--am-slate);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, border-color .15s, color .15s;
}

.am-wl-city-chip--active {
  background: var(--am-navy);
  color: #fff;
  border-color: var(--am-navy);
}

.am-wl-city-chip--active .am-city-dot--dim {
  background: var(--am-teal);
}

.am-city-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--am-teal);
  flex-shrink: 0;
}

.am-city-dot--dim {
  background: var(--am-slate-200);
}

.am-wl-city-note {
  font-size: 11px;
  color: var(--am-slate);
  margin-top: .6rem;
  font-style: italic;
}

/* ── Checkbox row ────────────────────────────────────────── */
.am-wl-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  margin-bottom: .5rem;
}

.am-wl-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--am-slate-200);
  background: var(--am-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
}

.am-wl-checkbox--on {
  background: var(--am-navy);
  border-color: var(--am-navy);
}

.am-wl-check-label {
  font-size: 13px;
  color: var(--am-slate);
  line-height: 1.6;
}

/* ── Submit button ───────────────────────────────────────── */
.am-wl-btn-submit {
  width: 100%;
  background: var(--am-teal);
  color: var(--am-navy);
  border: none;
  border-radius: 100px;
  padding: 13px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, opacity .15s;
  margin-bottom: .875rem;
}

.am-wl-btn-submit:disabled {
  opacity: .4;
  cursor: default;
}

.am-wl-btn-submit:not(:disabled):hover {
  background: var(--am-teal-mid);
}

/* ── Inline alert — always present in DOM, toggled via opacity only.
   Fixed height means zero layout shift (no wobble) on show/hide.     */
.am-wl-alert {
  height: 36px;                        /* always occupies this space */
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12.5px;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: .625rem;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  overflow: hidden;
}

.am-wl-alert--error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
  opacity: 1;
  pointer-events: auto;
}

.am-wl-legal {
  font-size: 11px;
  color: var(--am-slate);
  text-align: center;
  line-height: 1.65;
}

.am-wl-legal a {
  color: var(--am-slate);
  text-decoration: underline;
}

/* ── Confirmation state ──────────────────────────────────── */
.am-wl-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--am-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.am-wl-confirm-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--am-navy);
  text-align: center;
  margin-bottom: .5rem;
}

.am-wl-confirm-sub {
  font-size: 13px;
  color: var(--am-slate);
  text-align: center;
  line-height: 1.65;
  margin-bottom: .25rem;
}

.am-wl-confirm-sub strong,
.am-wl-confirm-count strong { color: var(--am-navy); }

.am-wl-confirm-count {
  font-size: 12px;
  color: var(--am-slate);
  text-align: center;
  margin-bottom: 1.25rem;
}

/* ── Share section ───────────────────────────────────────── */
.am-wl-share-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--am-navy);
  margin-bottom: .35rem;
}

.am-wl-share-sub {
  font-size: 12px;
  color: var(--am-slate);
  line-height: 1.6;
  margin-bottom: .875rem;
}

.am-wl-share-url {
  font-size: 12px;
  color: var(--am-teal-mid);
  background: var(--am-slate-100);
  border: .5px solid var(--am-slate-200);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: .75rem;
}

.am-wl-share-url-text {
  color: var(--am-teal-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.am-wl-copy-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--am-navy);
  background: var(--am-white);
  border: .5px solid var(--am-slate-200);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.am-wl-share-actions {
  display: flex;
  gap: 8px;
}

.am-wl-share-btn {
  flex: 1;
  font-size: 18px;
  border-radius: 8px;
  padding: 10px 8px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  border: none;
  transition: filter .15s, opacity .15s;
}

.am-wl-share-btn:hover { filter: brightness(1.12); opacity: .92; text-decoration: none; }

/* ── Per-platform brand colours ── */
/* Email — neutral */
.am-wl-share-btn--email {
  background: var(--am-slate-100);
  color: var(--am-navy);
  border: .5px solid var(--am-slate-200);
}
.am-wl-share-btn--email:hover { color: var(--am-navy); filter: none; background: var(--am-slate-200); }

/* LinkedIn — #0A66C2 */
.am-wl-share-btn--linkedin {
  background: #0A66C2;
  color: #fff;
}

/* X / Twitter — #000 */
.am-wl-share-btn--x {
  background: #000;
  color: #fff;
}

/* Instagram — brand gradient */
.am-wl-share-btn--instagram {
  background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF);
  color: #fff;
}

/* Native share — neutral */
.am-wl-share-btn--share {
  background: var(--am-slate-100);
  color: var(--am-navy);
  border: .5px solid var(--am-slate-200);
}
.am-wl-share-btn--share:hover { color: var(--am-navy); filter: none; background: var(--am-slate-200); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (992px – 1199px) ─────────────────────────────── */
@media (max-width: 1199px) {
  .am-wl-left__content {
    max-width: 380px;
    padding: 2.5rem 3rem 2.5rem 2.5rem;
  }

  .am-wl-h1 { font-size: 40px; }

  .am-wl-right {
    padding: 2.5rem 2rem;
  }
}

/* ── Mobile (< 992px) ───────────────────────────────────── */
@media (max-width: 991px) {
  .am-wl-hero {
    min-height: auto;
  }

  .am-wl-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .am-wl-left {
    height: auto;
    padding: 1rem;
  }

  .am-wl-above-frame { padding: .5rem .25rem .625rem; }
  .am-wl-below-frame { padding: .5rem .25rem .25rem; }

  .am-media-frame {
    border-radius: 14px;
    height: 240px;
  }

  .am-media-scrim {
    background: linear-gradient(
      to bottom,
      rgba(13,27,42,0.08) 0%,
      rgba(13,27,42,0.65) 100%
    );
  }

  .am-wl-left__content {
    padding: 1rem 1.25rem;
  }

  /* Hide sub-copy and bullets on mobile — frame is compact */
  .am-wl-features { display: none; }
  .am-wl-sub      { display: none; }

  .am-wl-right {
    border-left: none;
    border-top: .5px solid var(--am-slate-200);
    padding: 2rem 1.5rem;
    align-items: stretch;
  }

  .am-wl-card { max-width: 100%; }

  .am-wl-h1 { font-size: 34px; }
}

/* ── Small mobile (< 576px) ─────────────────────────────── */
@media (max-width: 575px) {
  .am-wl-left {
    padding: .75rem;
  }

  .am-media-frame { height: 200px; }

  .am-wl-right { padding: 1.5rem 1.25rem; }

  .am-wl-h1 { font-size: 28px; }
}