/* ============================================
   REWARD POPUP — Tier-unlock / Level-up claim
   ============================================
   Shown after a purchase, when a Tier or Level the person just hit still
   needs a tap before it pays out (see js/utils/reward-popup.js). This can
   appear on top of the purchase's own success-overlay — detection fires
   ~1.8s after purchase, often before the receipt is dismissed — so it
   reuses the app's real modal-backdrop pattern (bottom-anchored on
   phones, centered from 640px up — see .modal-backdrop in wallet.css)
   rather than an always-centered box, and sits above both success-overlay
   (--z-modal) and toast (--z-toast).

   Colors deliberately match, not invent: an unlocked-but-unclaimed TIER
   uses the same neutral inverted badge as .tier-card__badge--unlocked in
   the Tiers tab (rewards-refit.css) — green there is reserved for AFTER
   something is claimed. An unopened LEVEL reward uses the same success
   green as .rewards-tray__icon, which already shows unopened Level
   rewards that way. Both use the same `gift` icon the Tiers tab already
   uses for "reward ready to claim" (tier-card badge, claim banner,
   rewards tray) — not a new icon, so this popup reads as the same
   feature as the Tiers tab, not a different one. */

.reward-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-top);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.reward-popup-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
@media (min-width: 640px) {
  .reward-popup-overlay { align-items: center; }
}

.reward-popup {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-lg) var(--card-padding) var(--space-xl);
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform var(--transition-spring);
}
.reward-popup-overlay.is-open .reward-popup {
  transform: translateY(0);
}
@media (min-width: 640px) {
  .reward-popup { border-radius: var(--radius-lg); }
}

.reward-popup__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
}
.reward-popup__close:hover { color: var(--text-primary); }

/* ─── Header ─────────────────────────────── */
.reward-popup__header { text-align: center; margin-bottom: var(--space-lg); }

.reward-popup__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-primary);
  color: var(--text-inverse);
}
.reward-popup--level .reward-popup__badge {
  background: var(--success);
  color: var(--text-inverse);
}
.reward-popup--multi .reward-popup__badge {
  width: 44px;
  height: 44px;
}

.reward-popup__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.reward-popup__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  padding: 0 var(--space-sm);
}

/* ─── Single-reward layout ───────────────────
   The one case where the claim animation gets the full stage: the header
   badge shakes and dissolves, and the reward amount drops in with a
   bounce where it left off. */
.reward-popup__single-body { text-align: center; }

.reward-popup__amount {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  min-height: 1.2em;
  margin-bottom: 2px;
  opacity: 0;
  transform: translateY(-16px);
}
.reward-popup__amount.is-visible {
  animation: reward-drop-bounce 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.reward-popup__expiry {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.reward-popup__confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.reward-popup__confirm.is-visible {
  opacity: 1;
  height: auto;
  margin-top: var(--space-sm);
  transition: opacity var(--transition-normal);
}

/* ─── Multi-reward layout ─────────────────────
   Compact rows, same claim-button convention as the Tiers tab
   (tier-card__claim-btn) so a card still open in the Tiers panel and one
   shown here never read as two different features. */
.reward-popup__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.reward-popup__item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.reward-popup__item.is-confirmed {
  border-color: var(--success);
  background: var(--success-glow);
}

.reward-popup__item-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.reward-popup__item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-primary);
  color: var(--text-inverse);
}
.reward-popup--level .reward-popup__item-icon,
.reward-popup__item.is-confirmed .reward-popup__item-icon {
  background: var(--success);
}

.reward-popup__item-body { flex: 1; min-width: 0; }
.reward-popup__item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--text-primary);
}
.reward-popup__item-expiry {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 1px;
}

.reward-popup__item-claim {
  width: 100%;
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--text-primary);
  color: var(--text-inverse);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.reward-popup__item-claim:hover:not(:disabled) { opacity: 0.85; }
.reward-popup__item-claim:disabled { opacity: 0.6; cursor: not-allowed; }

.reward-popup__item-confirm {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-sm);
  color: var(--success);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.reward-popup__item.is-confirmed .reward-popup__item-claim { display: none; }
.reward-popup__item.is-confirmed .reward-popup__item-confirm { display: flex; }

.reward-popup__item-error {
  margin-top: var(--space-sm);
  color: var(--danger);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ─── Footer ─────────────────────────────── */
.reward-popup__footer { margin-top: var(--space-sm); }

/* ─── Claim animation ────────────────────────
   Shared by the header badge (single layout) and each item icon (multi
   layout) — both are just circular icon containers, so the same shake/
   dissolve keyframes work at either size. Reduced-motion users get this
   for free: reset.css already collapses every animation-duration to
   0.01ms globally, so these still fire (and their animationend listeners
   still resolve) — just close to instantly. */
.is-shaking { animation: reward-shake 400ms ease; }
.is-dissolving { animation: reward-dissolve 300ms ease forwards; }

@keyframes reward-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes reward-dissolve {
  to { opacity: 0.25; transform: scale(0.85); }
}
@keyframes reward-drop-bounce {
  to { opacity: 1; transform: translateY(0); }
}