/* ============================================================
 * reservation-flow.css — Free Reservation-tier RSVP flow
 * Offline Comedy · terminal/CRT design language
 * Per design_handoff_free_reservation_flow. Reuses oc-terminal.css
 * tokens + inline-purchase.css's .ip-consent-*/.ip-detail-* classes
 * (ConsentCheckbox / DetailRow equivalents) rather than redefining them.
 * ============================================================ */

.rf-root { font-family: var(--font-mono, monospace); }
.rf-loading { font-size: 12px; color: var(--green-dim); }

/* ── Guest visualizer (social proof, NOT a scarcity meter) ────── */
.rf-visualizer {
  border-bottom: 1px solid var(--green-dark);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.rf-visualizer-count {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 11px;
}
.rf-count-num {
  font-family: 'VT323', var(--font-mono, monospace);
  font-size: 2.4rem;
  line-height: .8;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow);
}
.rf-count-label { font-size: 13px; color: var(--green-dim); }
.rf-you-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gold);
  align-self: flex-end;
  margin-bottom: 2px;
}
.rf-dot-grid { display: flex; gap: 5px; flex-wrap: wrap; }
.rf-dot {
  width: 15px; height: 15px;
  border-radius: 1px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}
.rf-dot-you {
  background: var(--gold);
  animation: rf-you-pop .35s steps(4) both, rf-you-glow 2.2s .35s infinite;
}
@keyframes rf-you-pop {
  0%   { transform: scale(.2); opacity: 0; }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rf-you-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,215,0,.5); }
  50%      { box-shadow: 0 0 16px rgba(255,215,0,.95); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-dot-you { animation: none; box-shadow: 0 0 10px rgba(255,215,0,.7); }
}

/* ── Idle state ───────────────────────────────────────────────── */
.rf-reserve-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--green-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rf-identity {
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 12px;
}
.rf-identity-label,
.rf-identity-note { color: var(--green-dim); }
.rf-identity-val { color: var(--off-white); }
.rf-footnote {
  text-align: center;
  font-size: 11px;
  color: var(--green-dim);
  margin-top: 11px;
}

/* ── Text links ───────────────────────────────────────────────── */
.rf-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--green-dim);
  padding: 6px 0;
}
.rf-link:hover { color: var(--green); }
.rf-link-center { display: block; text-align: center; margin-top: 14px; width: 100%; }
.rf-link-release { display: block; margin-top: 14px; }
.rf-link-release:hover { color: var(--red); }

/* ── CTA sizing (base look already in crt-buttons.css) ───────── */
.rf-cta { margin-top: 14px; }

/* ── Guest identification (B2) ───────────────────────────────── */
.rf-identify-summary { font-size: 1.05rem; color: var(--green); margin-bottom: 2px; }
.rf-identify-meta { font-size: 12px; color: var(--green-dim); margin-bottom: 18px; }
.rf-divider { border-top: 1px solid var(--green-dark); padding-top: 18px; }
.rf-prompt { font-size: 14px; color: var(--green); margin-bottom: 8px; }
.rf-prompt-em { letter-spacing: .12em; }
.rf-field-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rf-field-prefix { color: var(--green); font-size: 1.05rem; }
.rf-field-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--green-dark);
  color: var(--green);
  font-family: var(--font-mono, monospace);
  font-size: 1.05rem;
  padding: 6px 0;
}
.rf-field-input:focus { outline: none; border-color: var(--green-dim); }
.rf-hint { font-size: 13px; color: var(--green-mid); margin-left: 24px; margin-bottom: 16px; }
.rf-hint-dim { color: var(--green-dim); }
.rf-consent-block { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.rf-free-note { font-size: 11px; line-height: 1.65; color: var(--green-mid); margin: 14px 0; }
.rf-flow-err {
  font-size: 11px;
  color: var(--red);
  min-height: 1em;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255,68,68,.5);
}

/* ── Confirmed state (A2/B3) ──────────────────────────────────── */
.rf-boot-lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 15px; font-size: 12px; }
.rf-boot-line { color: var(--green-dim); }
.rf-boot-ok { color: var(--green); }
.rf-held-head {
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: .1em;
  text-shadow: 0 0 10px var(--glow-gold);
  margin-bottom: 18px;
}
.rf-card {
  border: 1px solid var(--green-dark);
  border-radius: 3px;
  background: var(--tile-bg);
  padding: 16px 17px;
  margin-bottom: 16px;
}
.rf-card-title { font-size: 14px; color: var(--green); margin-bottom: 8px; }
.rf-card-note { font-size: 11px; color: var(--green-dim); margin-top: 8px; }

.rf-share-label { font-size: 10px; letter-spacing: .12em; color: var(--green-dim); margin-bottom: 8px; text-transform: uppercase; }
.rf-share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.rf-share-url {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--green-dark);
  background: var(--input-bg);
  border-radius: 3px;
  padding: 12px 13px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}
.rf-share-row .crt-cta {
  width: auto;
  font-size: 13px;
  padding: 13px 14px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.rf-share-note { font-size: 11px; color: var(--green-dim); margin-top: 8px; }
.rf-share-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.rf-share-link { text-decoration: none; padding: 0; }