/* redeem.css — Redeem-a-gift page: code/QR input + status card states. */

.redeem-main{padding:24px 28px 88px}
.redeem-wrap{max-width:640px;margin:0 auto;padding-top:24px}
.redeem-wrap h1{margin-bottom:12px}
.redeem-wrap .lede{margin-bottom:28px}
.redeem-form{display:flex;flex-direction:column;gap:16px}
.redeem-form textarea{min-height:120px;font-family:var(--mono);font-size:15px}
.redeem-actions{display:flex;gap:12px;flex-wrap:wrap}

.cam-box{position:relative;border:2px solid var(--orange-deep);border-radius:var(--radius);overflow:hidden;margin-top:16px;background:#000}
.cam-box video{display:block;width:100%;max-height:420px;object-fit:cover}
.cam-box .btn{position:absolute;bottom:12px;left:50%;transform:translateX(-50%)}

.status-card{
  margin-top:28px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);
}
.status-card h2{margin-bottom:8px}
.status-card p{color:var(--ink-soft);margin-bottom:12px}
.status-card .stamp{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);
  border-radius:999px;padding:4px 14px;margin-bottom:16px;
}
.status-card dl{margin:16px 0}
.status-card dt{font-weight:600;font-size:14px;color:var(--ink-soft);margin-top:12px}
.status-card dd{margin-top:2px}
.status-card label{display:block;margin-top:20px}
.refund-panel{margin-top:24px}
.refund-panel summary{cursor:pointer;font-weight:600;color:var(--ink-soft)}
.refund-panel input{margin-top:8px}

/* Live timelock meter (redeem "sealed" state) */
.lock-meter{margin:18px 0 12px}
.lock-bar{
  height:10px;border-radius:999px;background:var(--cream);
  border:1px solid var(--line);overflow:hidden;
}
.lock-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--orange-hover),var(--orange));
  transition:width .6s ease;
}
.lock-line{margin:0;font-family:var(--mono);font-size:13.5px;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){ .lock-fill{transition:none} }

/* redeem 2-step variant */
.redeem-steps{margin-top:56px;background:var(--cream);border-radius:var(--radius);padding:40px}
.redeem-steps .steps{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .redeem-steps .steps{grid-template-columns:1fr}
}