/* ═══════════════════════════════════════════════════════════════
   Redeem Code page

   Deliberately self-contained: this page has one job and one card on it,
   so it borrows nothing from shrinkage-calculator.css or the tutorial
   styles, both of which are conditionally enqueued elsewhere.
   ═══════════════════════════════════════════════════════════════ */

/* The hero lives inside .site-main, which would add the global
   body:not(.home) .site-main nav offset (72px) on top of the hero's own nav
   clearance, exposing a cream band above it. The hero clears the nav itself, so
   cancel the wrapper offset here. */
body:not(.home) .site-main.mwp-redeem-page {
  padding-top: 0;
}

.mwp-redeem-hero {
  padding-top: calc(72px + var(--space-2xl));
  padding-bottom: calc(var(--space-xl) + 90px);
  text-align: center;
  background: var(--color-charcoal);
}

.mwp-redeem-hero .page-title {
  color: var(--color-warm-white);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.mwp-redeem-hero p {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--color-light-gray);
  font-size: 1.05rem;
  font-weight: 300;
}

/* Same overlap move as the tutorial pages and the calculator: the hero carries
   an extra 90px of bottom padding and the card is pulled back up over it. */
.mwp-redeem-wrap {
  position: relative;
  z-index: 3;
  margin-top: -90px;
  padding-bottom: var(--space-2xl);
}

.mwp-redeem-card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-warm-white);
  text-align: center;
  box-shadow:
    0 2px 4px rgba(46, 42, 38, 0.06),
    0 18px 40px -10px rgba(46, 42, 38, 0.22),
    0 48px 80px -32px rgba(46, 42, 38, 0.28);
}

/* ── Form ───────────────────────────────── */

.mwp-redeem-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.mwp-redeem-form input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-sand);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 1.35rem;
  /* Digits only, so tabular figures keep a mistyped number easy to scan back
     over. Letter-spacing for the same reason — these are read one at a time. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: center;
}

.mwp-redeem-form input:focus {
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(196, 112, 75, 0.15);
}

.mwp-redeem-hint {
  margin: var(--space-sm) 0 var(--space-md);
  color: var(--color-warm-gray);
  font-size: 0.85rem;
  line-height: 1.6;
}

.mwp-redeem-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.8rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-terracotta);
  color: #fff;
  font-family: VolumeTCSans-RusticSolid, sans-serif;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.mwp-redeem-btn:hover {
  background: var(--color-terracotta-light);
  box-shadow: 0 2px 8px rgba(196, 112, 75, 0.15);
  transform: translateY(-1px);
}

.mwp-redeem-foot {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-sand);
  color: var(--color-warm-gray);
  font-size: 0.85rem;
}

/* ── Errors ───────────────────────────────── */

.mwp-redeem-error {
  margin-bottom: var(--space-md);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(196, 112, 75, 0.1);
  color: var(--color-clay);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}

/* ── Success ───────────────────────────────── */

.mwp-redeem-eyebrow {
  color: var(--color-terracotta);
  font-family: VolumeTCSans-RusticSolid, sans-serif;
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.mwp-redeem-lead {
  color: var(--color-warm-gray);
  font-size: 0.95rem;
}

.mwp-redeem-code {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-sm);
  border: 2px dashed var(--color-sand);
  border-radius: var(--radius-md);
  background: var(--color-cream);
  color: var(--color-charcoal);
  /* Monospace so O/0 and similar pairs stay distinguishable — the code alphabet
     already excludes the worst offenders, but this is free insurance for anyone
     copying it onto paper. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  word-break: break-all;
}

/* ── Save / copy / print actions ─────────────── */

.mwp-redeem-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin: 0 0 var(--space-md);
}

.mwp-redeem-btn--ghost {
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--color-sand);
  background: transparent;
  color: var(--color-charcoal);
  font-size: 0.95rem;
}

.mwp-redeem-btn--ghost:hover {
  background: var(--color-cream);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  box-shadow: none;
}

.mwp-redeem-btn--ghost.is-copied {
  border-color: var(--color-sage);
  color: var(--color-sage);
  background: var(--color-sage-light);
}

.mwp-redeem-ico {
  flex: 0 0 auto;
}

.mwp-redeem-note {
  color: var(--color-warm-gray);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ── Print: just the code + how-to, none of the site chrome ─────── */

@media print {
  .nav,
  .footer,
  .mwp-redeem-hero,
  .mwp-redeem-actions,
  .mwp-redeem-links {
    display: none !important;
  }

  .mwp-redeem-wrap {
    margin-top: 0;
    padding: 0;
  }

  .mwp-redeem-card {
    max-width: none;
    box-shadow: none;
    border: none;
  }

  .mwp-redeem-code {
    border-color: #999;
  }
}

.mwp-redeem-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  margin-top: var(--space-md);
}

@media (max-width: 640px) {
  .mwp-redeem-hero {
    padding-top: calc(72px + var(--space-xl));
    padding-bottom: calc(var(--space-lg) + 70px);
  }

  .mwp-redeem-wrap {
    margin-top: -70px;
  }

  .mwp-redeem-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
}

/* ============================================================
   Channel toggle — Etsy vs website (CSS-only, no JS)
   Two hidden radios drive which panel shows and which segment
   reads active; the server pre-checks one so a failed submit
   returns to the right tab.
   ============================================================ */
.mwp-redeem-src .mwp-src-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mwp-redeem-segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-md);
  background: var(--color-sand);
  border-radius: var(--radius-pill);
}

.mwp-redeem-seg {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mwp-redeem-seg:hover {
  color: var(--color-charcoal);
}

/* Active segment follows the checked radio */
#mwp-src-etsy:checked ~ .mwp-redeem-segmented label[for="mwp-src-etsy"],
#mwp-src-web:checked ~ .mwp-redeem-segmented label[for="mwp-src-web"] {
  background: var(--color-warm-white);
  color: var(--color-clay);
  box-shadow: 0 2px 8px rgba(46, 42, 38, 0.08);
}

/* Panel visibility follows the checked radio */
.mwp-src-panel {
  display: none;
}

#mwp-src-etsy:checked ~ .mwp-src-panel[data-src="etsy"],
#mwp-src-web:checked ~ .mwp-src-panel[data-src="web"] {
  display: block;
}