/* Redeem page — inherits tokens from styles.css */

.redeem-wrap { padding-block: clamp(40px, 7vw, 84px) clamp(56px, 8vw, 100px); position: relative; overflow: hidden; }
.redeem-wrap .hero__grid { mask-image: radial-gradient(110% 80% at 30% 10%, black, transparent 70%); -webkit-mask-image: radial-gradient(110% 80% at 30% 10%, black, transparent 70%); }

.redeem-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start;
}

/* Left rail */
.redeem-aside h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; margin-top: 16px; letter-spacing: -0.03em; }
.redeem-aside .lede { margin-top: 18px; }
.redeem-facts { margin-top: 30px; display: grid; gap: 14px; }
.redeem-fact { display: flex; gap: 13px; align-items: flex-start; }
.redeem-fact svg { flex: none; width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.redeem-fact b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.redeem-fact span { color: var(--muted); font-size: 0.94rem; }

/* Card */
.redeem-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: clamp(24px, 3vw, 36px); position: relative;
}
.redeem-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.redeem-card__head .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.redeem-card__head h2 { font-size: 1.32rem; letter-spacing: -0.02em; }
.redeem-card__head p { font-size: 0.9rem; color: var(--muted); }

.field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.code-input {
  width: 100%; height: 58px; border: 1.5px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--bg); padding-inline: 18px; font-size: 1.14rem; font-weight: 600;
  letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.code-input::placeholder { color: var(--faint); letter-spacing: 0.1em; font-weight: 500; }
.code-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); background: var(--surface); }
.redeem-card[data-state="error"] .code-input { border-color: var(--err); box-shadow: 0 0 0 4px oklch(58% 0.18 26 / 0.16); }

.redeem-submit { margin-top: 18px; }
.redeem-submit .btn { height: 54px; font-size: 1.02rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; pointer-events: none; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid oklch(100% 0 0 / 0.4); border-top-color: white; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-msg { display: none; margin-top: 14px; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600; padding: 12px 14px; border-radius: var(--radius-sm); }
.redeem-card[data-state="error"] .form-msg { display: flex; color: var(--err); background: var(--err-tint); }
.form-msg svg { flex: none; }

.hint { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--hairline); font-size: 0.85rem; color: var(--muted); }
.hint b { color: var(--ink-soft); font-weight: 700; }
.hint .codes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.hint .codes button {
  border: 1px solid var(--hairline); background: var(--bg); color: var(--ink-soft);
  border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .15s ease;
  font-variant-numeric: tabular-nums;
}
.hint .codes button:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

/* Result view */
.rc-form { display: block; }
.rc-result { display: none; }
.redeem-card[data-state="success"] .rc-form { display: none; }
.redeem-card[data-state="success"] .rc-result { display: block; animation: rise .5s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.result-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--ok); background: var(--ok-tint); padding: 7px 13px; border-radius: 999px; }
.result-product { display: flex; align-items: center; gap: 16px; margin: 20px 0 22px; }
.result-product .pic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex: none; color: white; }
.result-product h3 { font-size: 1.24rem; letter-spacing: -0.02em; }
.result-product span { font-size: 0.9rem; color: var(--muted); }

.keybox { background: var(--bg-sunk); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px 18px; }
.keybox label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 700; }
.keybox__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.keyval {
  flex: 1; font-family: "Hanken Grotesk", monospace; font-weight: 700; font-size: 1.06rem;
  letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums;
  transition: filter .2s ease; word-break: break-all;
}
.keyval[data-revealed="false"] { filter: blur(6px); user-select: none; }
.keybox__actions { display: flex; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn.copied { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }

.result-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.result-note { margin-top: 16px; font-size: 0.86rem; color: var(--muted); }

@media (max-width: 900px) {
  .redeem-inner { grid-template-columns: 1fr; }
  .redeem-aside { max-width: 560px; }
}