/* vouchers.css — voucher cards, the gold foil, the counter view and the countdown tiles.
   Transform owners: .vc-card = none · .vc-codes = reveal (develop) · .vc-foil-shine = shimmer. */

.vc-center { gap: 16px; }
.vc-opening { font-size: 18px; font-weight: 500; text-shadow: var(--text-shadow); animation: pulse 1.6s var(--ease-pulse) infinite; }
.vc-summary { padding: 6px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #6b4a00; font-size: 15px; font-weight: 700; }
.vc-secret { max-width: 34ch; font-size: 19px; font-style: italic; text-align: center; text-shadow: var(--text-shadow); }
.vc-list { display: flex; flex-direction: column; gap: 14px; width: min(92vw, 440px); }
.vc-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 18px 16px; border-radius: 18px;
  background: linear-gradient(#fffdf9, #fff3ea); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.vc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vc-title { font-size: 22px; font-weight: 600; }
.vc-amount { padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #6b4a00; font-weight: 700; font-size: 15px; white-space: nowrap; }
.vc-detail { font-size: 15px; color: var(--ink-soft); }
.vc-perf { height: 0; border-top: 2px dashed rgba(122, 18, 51, .18); margin: 2px -4px; }
.vc-foil {
  position: relative; overflow: hidden;
  width: 100%; min-height: 64px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #c99a3b, var(--gold) 35%, var(--gold-hi) 50%, var(--gold) 65%, #c99a3b);
  color: #5a3d00; font-size: 17px; font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 4px 10px rgba(120, 80, 0, .25);
  touch-action: manipulation;
}
.vc-foil-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.vc-foil-text { position: relative; }
.vc-codes { display: flex; flex-direction: column; gap: 8px; }
.vc-codes.is-in { animation: develop 1.1s ease-out both; }
.vc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(233, 30, 99, .07); }
.vc-label { min-width: 40px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-700); }
.vc-code {
  flex: 1; font: 600 20px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: #3d0a1d; word-break: break-all;
  -webkit-user-select: all; user-select: all; -webkit-touch-callout: default;
}
.vc-copy { min-width: 64px; min-height: 40px; padding: 0 12px; border: 1.5px solid rgba(122, 18, 51, .25); border-radius: 999px; background: #fff; color: var(--rose-700); font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.vc-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.vc-exp.is-expired { color: #b00020; text-decoration: line-through; }
.vc-chip { padding: 2px 10px; border-radius: 999px; background: #ffe1e8; color: #b00020; font-size: 12px; font-weight: 700; }
.vc-how { font-size: 15px; color: var(--ink); }
.vc-how summary { cursor: pointer; font-weight: 600; color: var(--rose-700); min-height: 32px; }
.vc-how p { margin-top: 6px; line-height: 1.5; white-space: pre-line; }
.vc-book { align-self: flex-start; color: var(--rose-700); border-color: rgba(122, 18, 51, .3); }
.vc-counter-btn { align-self: flex-start; padding-left: 0; color: var(--rose-700); }
.vc-tip { max-width: 34ch; font-size: 15px; font-weight: 500; text-align: center; text-shadow: var(--text-shadow); }

/* the counter view: big, high-contrast, one screenshot */
.vc-counter {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: calc(24px + var(--sat)) 20px calc(24px + var(--sab));
  background: #fff; color: #1d0710; text-align: center;
}
.vc-counter-title { font: 700 22px/1.3 var(--font-love); margin-bottom: 14px; }
.vc-counter-label { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a1238; margin-top: 10px; }
.vc-counter-code { font: 700 32px/1.25 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; word-break: break-all; -webkit-user-select: all; user-select: all; }
.vc-counter-exp { margin-top: 14px; font-size: 15px; color: #555; }
.vc-counter-close { margin-top: 26px; min-width: 160px; }

/* countdown */
.vc-count { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: min(92vw, 440px); }
.vc-count-title { font-size: 15px; font-weight: 700; color: var(--rose-700); }
.vc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.vc-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; background: linear-gradient(135deg, #ff5a82, #E91E63 60%, #C2185B); color: #fff; }
.vc-num { font: 700 26px/1.1 var(--font-love); font-variant-numeric: tabular-nums; }
.vc-unit { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.vc-count-msg { font-size: 20px; font-weight: 600; color: var(--ink); }
.vc-count-teaser { font-size: 14px; color: var(--ink-soft); }

.vc-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(92vw, 360px); text-align: center; }
.vc-foot-text { font-size: 16px; font-weight: 500; text-shadow: var(--text-shadow); }
.vc-tell { width: 100%; }
.vc-retry { margin-top: 30px; }

@media (max-width: 350px) { .vc-code { font-size: 17px; } .vc-num { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .vc-foil-shine, .vc-opening { animation: none; } .vc-codes.is-in { animation: fadeIn .3s ease both !important; animation-duration: .3s !important; } }