/* The redeem page (public/redeem.html, js/redeem.js). Soft Clay tokens only —
   see base.css. One card, one step showing at a time. */
.rdm-card { max-width: 460px; }
.rdm-step[hidden], .rdm-plan[hidden], .rdm-add[hidden] { display: none; }
.rdm-lab { display: block; font-family: "Baloo 2", sans-serif; font-size: 14px; font-weight: 800; color: var(--tl-head);
  letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 8px; }
.rdm-center { text-align: center; font-family: "Nunito", sans-serif; line-height: 1.6; color: var(--tl-ink-soft); }
.rdm-small { font-size: 13.5px; }
.rdm-wide { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 12px; }
.rdm-hint { margin: 6px 0 0; font-size: 13px; color: var(--tl-muted); font-family: "Nunito", sans-serif; }
.rdm-msg { min-height: 18px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--tl-danger);
  font-family: "Nunito", sans-serif; line-height: 1.5; }
.rdm-msg.ok { color: var(--tl-teal-text); }

/* The code box: big, spaced digits, the number keypad on a phone. Sized so the
   grouped 19 characters fit a 320px screen without scrolling sideways. */
.auth-card input.rdm-input { width: 100%; box-sizing: border-box; font-size: clamp(15px, 4.6vw, 24px);
  font-weight: 800; letter-spacing: .06em; text-align: center; font-variant-numeric: tabular-nums;
  padding: 12px 6px; }
@media (max-width: 360px) { .auth-card input.rdm-input { letter-spacing: .02em; padding: 12px 2px; } }
.auth-card input.rdm-input.rdm-input-sm { font-size: 16px; letter-spacing: 0; text-align: left; padding: 10px 12px; }
.auth-card input.rdm-input[aria-invalid="true"] { border-color: var(--tl-danger); }

/* What the card is for */
.rdm-plan { margin: 14px 0 4px; padding: 14px 16px; border-radius: 16px; background: var(--tl-surface-2);
  font-family: "Nunito", sans-serif; }
.rdm-plan-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-muted); }
.rdm-plan-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; color: var(--tl-ink); margin: 2px 0 6px; }
.rdm-plan-list { margin: 0; padding-left: 20px; line-height: 1.6; color: var(--tl-ink-soft); font-size: 14.5px; }
.rdm-plan-foot { margin-top: 8px; font-size: 13px; color: var(--tl-muted); }
.rdm-plan-foot a { color: var(--tl-orange-text); font-weight: 700; }

/* Choosing the child: a column of tappable cards. */
.rdm-kids { display: grid; gap: 8px; }
.rdm-kid { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; text-align: left;
  border: 0; border-radius: 16px; padding: 10px 14px; font: inherit; cursor: pointer; color: var(--tl-ink);
  background: linear-gradient(180deg, #FFFDF7, var(--tl-surface-b)); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--tl-ledge, #D5C29D); }
.rdm-kid[aria-checked="true"] { background: linear-gradient(180deg, #FFF6E2, #F6E4C2);
  box-shadow: inset 0 0 0 2.5px var(--tl-orange), 0 4px 0 #D5B57E; }
.rdm-kid .rdm-av { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; font-size: 26px; }
.rdm-kid .rdm-av img { width: 40px; height: 40px; object-fit: contain; }
.rdm-kid .rdm-kn { font-weight: 800; font-size: 16px; }
.rdm-kid .rdm-ks { display: block; font-size: 12.5px; color: var(--tl-muted); font-weight: 600; }
.rdm-add-toggle { margin-top: 10px; }
.rdm-add { margin-top: 6px; }
.rdm-ages { display: flex; flex-wrap: wrap; gap: 8px; }
.rdm-age { border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #FFFDF7, var(--tl-surface-b)); color: var(--tl-ink);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--tl-ledge, #D5C29D); }
.rdm-age[aria-checked="true"] { background: linear-gradient(180deg, #FFF6E2, #F6E4C2);
  box-shadow: inset 0 0 0 2.5px var(--tl-orange), 0 4px 0 #D5B57E; }

.rdm-confirm { font-family: "Nunito", sans-serif; font-size: 16px; line-height: 1.6; color: var(--tl-ink);
  background: var(--tl-teal-tint); border-radius: 16px; padding: 14px 16px; margin-top: 14px; }
.rdm-confirm small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--tl-ink-soft); }

.rdm-help { margin: 20px 0 0; text-align: center; font-size: 12.5px; color: var(--tl-muted); line-height: 1.6;
  font-family: "Nunito", sans-serif; }
.rdm-help a { color: var(--tl-orange-text); }

/* Done: a short burst of confetti, CSS only, gone after a second and a half. */
.rdm-done { position: relative; overflow: hidden; padding-top: 6px; }
.rdm-done-h { text-align: center; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 24px; color: var(--tl-head-warm); margin-top: 8px; }
.rdm-confetti { position: absolute; inset: 0; pointer-events: none; }
/* The redemption's order ID (TLR-…), selectable in one tap for copying. */
.rdm-order[hidden] { display: none; }
.rdm-order { text-align: center; margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: var(--tl-surface-2);
  font-family: "Nunito", sans-serif; }
.rdm-order-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-muted); }
.rdm-order-v { font-size: 20px; font-weight: 800; color: var(--tl-ink); letter-spacing: .04em; user-select: all; }
.rdm-order-n { font-size: 12.5px; color: var(--tl-muted); margin-top: 2px; }
.rdm-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: rdm-fall 1.6s ease-in forwards; }
@keyframes rdm-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(260px) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rdm-confetti i { animation: none; display: none; } }

/* A website gift, opened ([CARD-21]): the gifter's card in its occasion's colours
   (js/gift-themes.js sets the background and the word colours). */
.rdm-gift[hidden], .rdm-thanks[hidden], #rdm-picks-wrap[hidden] { display: none; }
.rdm-gift { margin: 14px 0 4px; padding: 18px 16px; border-radius: 18px; text-align: center; font-family: "Nunito", sans-serif;
  animation: rdm-pop .45s ease-out both; }
.rdm-gift-k { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rdm-gift-e { font-size: 34px; line-height: 1.1; margin-top: 6px; }
.rdm-gift-g { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; }
.rdm-gift-to { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; }
.rdm-gift-m { font-style: italic; font-size: 15px; line-height: 1.55; margin-top: 8px; }
.rdm-gift-f { font-weight: 800; font-size: 14.5px; margin-top: 6px; }
@keyframes rdm-pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Picking the subject(s) of a 1- or 3-subject code ([CARD-22]). */
.rdm-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.rdm-pick { border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #FFFDF7, var(--tl-surface-b)); color: var(--tl-ink);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--tl-ledge, #D5C29D); }
.rdm-pick[aria-pressed="true"] { background: linear-gradient(180deg, #FFF6E2, #F6E4C2);
  box-shadow: inset 0 0 0 2.5px var(--tl-orange), 0 4px 0 #D5B57E; }
.rdm-pick:disabled { opacity: .45; cursor: default; }

/* Done: Tani, a cheer, and what to do first ([CARD-20]). */
.rdm-tani { display: block; width: 96px; height: 96px; margin: 4px auto 0; object-fit: contain;
  animation: rdm-hop 1.1s ease-in-out 2; }
@keyframes rdm-hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.rdm-done-h { font-size: 27px; line-height: 1.2; }
.rdm-done-p { font-size: 16px; margin: 6px 0 0; }
.rdm-adv { margin: 16px 0 4px; padding: 14px 16px; border-radius: 16px; background: var(--tl-teal-tint); font-family: "Nunito", sans-serif; }
.rdm-adv-h { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 17px; color: var(--tl-ink); margin-bottom: 6px; }
.rdm-adv-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; font-size: 14.5px; line-height: 1.45; color: var(--tl-ink-soft); }
.rdm-adv-row span { font-size: 24px; line-height: 1.1; flex: 0 0 auto; }
.rdm-adv-row b { color: var(--tl-ink); }
.rdm-tip { margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #FFF4D6; font-size: 13.5px; line-height: 1.5; color: var(--tl-ink); }
.rdm-thanks { margin: 14px 0 4px; padding: 14px 16px; border-radius: 16px; background: #FFF1F5; font-family: "Nunito", sans-serif; }
.rdm-thanks-h { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 17px; color: var(--tl-ink); }
.rdm-thanks-h small { display: block; font-family: "Nunito", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--tl-ink-soft); }
.rdm-thanks-note, .rdm-thanks-name { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 15px; color: var(--tl-ink);
  background: #FFFFFF; border: 2px solid #F3CFDB; border-radius: 12px; padding: 9px 12px; }
.rdm-thanks-note { resize: vertical; }
@media (prefers-reduced-motion: reduce) { .rdm-tani, .rdm-gift { animation: none; } }