/* ═══════════════════════════════════════════════════════════
   Anima Test — Closed Beta styles (D-011)
   Ribbon · courtesy fork state · redeem/waitlist modals ·
   feedback exchange · share cards. Mobile-first, token-driven.
   ═══════════════════════════════════════════════════════════ */

/* ── Invite ribbon: real numbered scarcity, quiet after 6s ── */
.beta-ribbon {
  position: fixed;
  top: 72px;
  right: 12px;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-light);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-gold-dark);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.beta-ribbon.visible { opacity: 1; transform: translateY(0); }
.beta-ribbon.dimmed  { opacity: 0.6; }
.beta-ribbon__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold-glow);
  flex-shrink: 0;
}

/* ── Active (green): valid, not yet redeemed — scarcity + urgency ── */
.beta-ribbon--active {
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.55);
  background: linear-gradient(180deg, rgba(16,32,26,0.96), rgba(12,20,17,0.96));
}
.beta-ribbon--active .beta-ribbon__dot {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: beta-ribbon-pulse 2s infinite;
}
@keyframes beta-ribbon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── Used / expired (red): clear, kind recovery path — clickable ── */
.beta-ribbon--used,
.beta-ribbon--expired {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
  background: linear-gradient(180deg, rgba(38,18,18,0.96), rgba(24,12,12,0.96));
  pointer-events: auto;
  cursor: pointer;
}
.beta-ribbon--used .beta-ribbon__dot,
.beta-ribbon--expired .beta-ribbon__dot {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}
.beta-ribbon--used u,
.beta-ribbon--expired u { color: #fecaca; text-underline-offset: 2px; }
.beta-ribbon--used:hover,
.beta-ribbon--expired:hover { border-color: rgba(248, 113, 113, 0.85); }

/* ── Courtesy state on the pocket card ── */
.tier-card__price s {
  opacity: 0.45;
  text-decoration-thickness: 2px;
}
.beta-courtesy-chip {
  display: inline-block;
  margin: 0.2rem 0 0.4rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-void);
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

/* ── Modal chrome (redeem + waitlist) ── */
.beta-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.beta-modal-overlay.active { opacity: 1; }
.beta-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.beta-modal__close {
  position: absolute;
  top: 0.7rem; right: 0.8rem;
  background: none;
  border: none;
  color: var(--color-text-primary);
  opacity: 0.6;
  font-size: 1rem;
  cursor: pointer;
}
.beta-modal__close:hover { opacity: 1; }
.beta-modal__title { margin: 0.4rem 0 0.75rem; }
.beta-modal__note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 1rem;
}
.beta-modal__price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.beta-modal__price-old {
  font-size: 1.1rem;
  text-decoration: line-through;
  opacity: 0.5;
}
.beta-modal__price-new {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-gold);
}
.beta-modal__code-line {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}
.beta-modal__cta { width: 100%; }
.beta-modal__disclaimer {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  opacity: 0.65;
}
.beta-modal__disclaimer.beta-error { color: #f87171; opacity: 1; }
.beta-modal__processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 0.5rem;
}
.beta-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: beta-spin 0.8s linear infinite;
}
@keyframes beta-spin { to { transform: rotate(360deg); } }
.beta-modal__success { padding: 0.75rem 0 0.25rem; }
.beta-modal__success-icon {
  font-size: 1.8rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

/* ── Inputs ── */
.beta-input {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.beta-input:focus {
  outline: none;
  border-color: var(--color-gold-dark);
}
.beta-input--error { border-color: #f87171; }
.beta-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
}
.beta-textarea:focus { outline: none; border-color: var(--color-gold-dark); }

/* ── Feedback exchange (inside the golden upsell) ── */
.beta-feedback {
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.beta-feedback__title { margin-bottom: 0.4rem; }
.beta-feedback__intro {
  font-size: 0.88rem;
  opacity: 0.8;
  margin-bottom: 1.25rem;
}
.beta-q { margin-bottom: 1.25rem; }
.beta-q__label {
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}
.beta-q--optional .beta-q__label { opacity: 0.85; }
.beta-nps, .beta-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.beta-nps__btn, .beta-scale__btn {
  min-width: 2.2rem;
  height: 2.2rem;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.beta-scale__btn { min-width: 2.8rem; }
.beta-nps__btn:hover, .beta-scale__btn:hover { border-color: var(--color-gold-dark); }
.beta-nps__btn.selected, .beta-scale__btn.selected {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-void);
  font-weight: 700;
}
.beta-scale__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  opacity: 0.6;
}
.beta-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.beta-checkbox input { margin-top: 0.2rem; accent-color: var(--color-gold); }
.beta-feedback__submit { width: 100%; margin-top: 0.25rem; }
.beta-feedback__error {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #f87171;
}
.beta-feedback__success { text-align: center; padding: 0.5rem 0; }
.beta-feedback__success .btn { margin-top: 1.1rem; }

/* ── Share cards ── */
.beta-share__lead {
  font-size: 0.88rem;
  opacity: 0.85;
  margin: 1rem 0 0.6rem;
}
.beta-share__codes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.beta-share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface-raised);
  border: 1px dashed var(--color-gold-dark);
  border-radius: var(--radius-md);
}
.beta-share-card__code {
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color-gold-light);
}
.beta-share-card__actions { display: flex; gap: 0.4rem; }
.beta-share--dossier {
  margin: 2.5rem auto 1rem;
  max-width: 560px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.beta-share--dossier h4 { margin-bottom: 0.9rem; }

@media (max-width: 480px) {
  /* 96px clears the mobile navbar even when the brand wraps to two lines
     (at 64px the ribbon sat on top of the "Refazer Exploração" button). */
  .beta-ribbon { top: 96px; right: 8px; font-size: 0.72rem; }
  .beta-nps__btn { min-width: 2rem; height: 2rem; }
}