/* Zona Mística — cards bloqueados (teaser) + checkout embutido do relatório
   pago, compartilhado entre jogos. Espera as CSS vars --zm-card/--zm-text/
   --zm-gold/--zm-muted/--zm-sage/--zm-terra já declaradas em :root por
   qualquer game.css (todas usam os mesmos valores). */

/* ── Bloqueado (teaser visível, conteúdo real só no relatório pago) ── */
.zm-locked-card {
  border-style: dashed;
  border-color: rgba(201,150,86,.35);
}
.zm-lock-badge {
  background: rgba(193,80,46,.18); color: var(--zm-terra);
  font-size: .62rem; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.zm-locked-desc {
  font-size: .95rem; color: var(--zm-muted); line-height: 1.7;
  margin: 4px 0 18px;
}
.zm-unlock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(201,150,86,.12) !important; color: var(--zm-gold) !important;
  border: 1px solid rgba(201,150,86,.45) !important; border-radius: 8px;
  padding: 11px 20px; font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important; font-weight: 600 !important;
  cursor: pointer; transition: background .2s, transform .1s;
}
.zm-unlock-btn:hover  { background: rgba(201,150,86,.22) !important; }
.zm-unlock-btn:active { transform: scale(.98); }

/* ── Checkout embutido (compra do relatório) ── */
.zm-checkout-loading, .zm-checkout-success { font-size: .95rem; color: var(--zm-muted); margin: 8px 0 0; }
.zm-checkout-success { color: var(--zm-sage); font-weight: 600; }
.zm-checkout-error { color: var(--zm-terra); font-size: .9rem; margin: 10px 0 0; }

.zm-auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; justify-content: center; }
.zm-auth-tab {
  background: rgba(255,255,255,.05) !important; color: var(--zm-muted) !important;
  border: 1px solid rgba(201,150,86,.2) !important; border-radius: 8px;
  padding: 8px 16px; font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important; font-weight: 600 !important; cursor: pointer;
  box-shadow: none !important;
}
.zm-auth-tab-active { background: rgba(201,150,86,.15) !important; color: var(--zm-gold) !important; border-color: var(--zm-gold) !important; }

.zm-auth-form, .zm-card-fields { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 6px; }
.zm-auth-form input, .zm-card-fields input, .zm-card-fields select, .zm-card-field {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,150,86,.2);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--zm-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .95rem !important;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  height: 46px;
}
.zm-auth-form input:focus, .zm-card-fields input:focus, .zm-card-fields select:focus { border-color: var(--zm-gold); }
.zm-card-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#zm-pay-wallet, #zm-pay-saved-card { margin: 4px 6px; }

.zm-payment-alt { display: flex; gap: 16px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.zm-payment-link {
  background: none !important; border: none !important; box-shadow: none !important;
  color: var(--zm-sage) !important; font-size: .85rem !important; text-decoration: underline;
  cursor: pointer; padding: 4px !important;
}
.zm-pix-panel { text-align: center; margin-top: 10px; }
.zm-pix-qr { max-width: 220px; margin: 10px auto; border-radius: 8px; }