/* ============================================================================
   Quest redemption portal - public voucher pages (/voucher, /v/{number}).
   Standalone by design: these anonymous, customer-facing pages never load the
   back-office CSS. Mobile-first; the card is the digital twin of the printed
   slip (perforation tear-line between the document half and the action half).
   Brand: Quest indigo #292b80. Money is always tabular-nums.
   ========================================================================== */

:root {
    --qp-primary: #292b80;
    --qp-primary-press: #212368;
    --qp-primary-tint: #e8e8f6;
    --qp-canvas: #f4f4fb;
    --qp-surface: #ffffff;
    --qp-ink: #0f172a;
    --qp-ink-2: #475569;
    --qp-muted: #94a3b8;
    --qp-border: #e3e8ee;
    --qp-border-strong: #cbd5e1;
    --qp-ok: #16a34a;
    --qp-ok-bg: #dcfce7;
    --qp-ok-ink: #14713a;
    --qp-warn-bg: #fef3c7;
    --qp-warn-ink: #92400e;
    --qp-bad: #b91c1c;
    --qp-bad-bg: #fee2e2;
    --qp-font: "Overpass", -apple-system, "Segoe UI", Roboto, sans-serif;
    --qp-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
    --qp-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.vp-body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--qp-canvas);
    border-top: 4px solid var(--qp-primary);
    color: var(--qp-ink);
    font-family: var(--qp-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---- Shell ---------------------------------------------------------------- */

.vp-top {
    display: flex;
    justify-content: center;
    padding: 24px 16px 8px;
}

.vp-top-logo {
    height: 40px;
    width: auto;
}

.vp-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 16px 24px;
}

.vp-foot {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--qp-muted);
}

/* ---- Card / ticket --------------------------------------------------------- */

.vp-card {
    width: 100%;
    max-width: 26rem;
    background: var(--qp-surface);
    border-radius: 16px;
    box-shadow: var(--qp-shadow);
    padding: 28px 22px;
    margin-top: 8px;
}

.vp-card-center { text-align: center; }

.vp-tear {
    position: relative;
    margin: 22px -22px;
    border-top: 2px dashed var(--qp-border-strong);
}

.vp-tear::before,
.vp-tear::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--qp-canvas);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.vp-tear::before { left: -9px; }
.vp-tear::after { right: -9px; }

/* ---- Type ------------------------------------------------------------------ */

.vp-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--qp-primary);
}

.vp-h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.vp-h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.vp-store {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vp-lead {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--qp-ink-2);
}

.vp-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--qp-ink-2);
}

.vp-money,
.vp-amount-val,
.vp-confirm-phone,
.vp-serial {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---- Amount (the hero) ------------------------------------------------------ */

.vp-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 10px;
}

.vp-amount-cur {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--qp-ink-2);
}

.vp-amount-val {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* ---- Status chip ------------------------------------------------------------ */

.vp-chip-row {
    margin: 0 0 4px;
    text-align: center;
}

.vp-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.vp-chip-ok      { background: var(--qp-ok-bg);        color: var(--qp-ok-ink); }
.vp-chip-busy    { background: var(--qp-warn-bg);      color: var(--qp-warn-ink); }
.vp-chip-done    { background: var(--qp-primary-tint); color: var(--qp-primary); }
.vp-chip-neutral { background: #eef1f5;                color: var(--qp-ink-2); }

/* ---- Meta rows --------------------------------------------------------------- */

.vp-meta {
    margin: 18px 0 0;
    border-top: 1px solid var(--qp-border);
}

.vp-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--qp-border);
}

.vp-meta dt {
    margin: 0;
    font-size: 12px;
    color: var(--qp-muted);
    white-space: nowrap;
}

.vp-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

.vp-serial {
    font-family: var(--qp-mono);
    font-size: 13px;
    letter-spacing: .05em;
}

/* ---- Forms -------------------------------------------------------------------- */

.vp-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
}

.vp-field { margin: 0 0 16px; }

.vp-input {
    width: 100%;
    padding: 14px;
    font-family: var(--qp-font);
    font-size: 16px; /* >=16px keeps iOS from zooming the viewport on focus */
    color: var(--qp-ink);
    background: var(--qp-surface);
    border: 1.5px solid var(--qp-border-strong);
    border-radius: 10px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.vp-input:focus-visible {
    border-color: var(--qp-primary);
    box-shadow: 0 0 0 3px rgba(41, 43, 128, .18);
}

.vp-input:disabled { background: var(--qp-canvas); color: var(--qp-ink-2); }

.vp-input-serial {
    font-family: var(--qp-mono);
    font-size: 17px;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.vp-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--qp-muted);
}

.vp-hint-ok { color: var(--qp-ink); font-weight: 500; }
.vp-hint-bad { color: var(--qp-bad); }

.vp-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    background: var(--qp-warn-bg);
    color: var(--qp-warn-ink);
}

/* ---- Wallet picker --------------------------------------------------------------- */

.vp-wallets {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    border: none;
}

.vp-wallet {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px;
    border: 1.5px solid var(--qp-border-strong);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.vp-wallet input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.vp-wallet-name {
    font-size: 15px;
    font-weight: 500;
}

.vp-wallet-check {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--qp-border-strong);
    transition: border-color .12s ease, background-color .12s ease;
}

.vp-wallet input:checked ~ .vp-wallet-check {
    border-color: var(--qp-primary);
    background: var(--qp-primary);
    box-shadow: inset 0 0 0 4px var(--qp-surface);
}

.vp-wallet input:checked ~ .vp-wallet-name { font-weight: 600; }

.vp-wallet input:focus-visible ~ .vp-wallet-check {
    outline: 3px solid rgba(41, 43, 128, .18);
    outline-offset: 2px;
}

.vp-wallet:has(input:checked) {
    border-color: var(--qp-primary);
    background: var(--qp-primary-tint);
}

.vp-wallet:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(41, 43, 128, .18);
}

/* ---- Buttons ----------------------------------------------------------------------- */

.vp-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background: var(--qp-primary);
    color: #fff;
    font-family: var(--qp-font);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s ease;
}

.vp-btn:active { background: var(--qp-primary-press); }

.vp-btn:focus-visible {
    outline: 3px solid rgba(41, 43, 128, .35);
    outline-offset: 2px;
}

.vp-btn:disabled {
    opacity: .65;
    cursor: default;
}

.vp-btn-ghost {
    margin-top: 10px;
    background: transparent;
    color: var(--qp-primary);
    border: 1.5px solid var(--qp-border-strong);
}

.vp-btn-ghost:active { background: var(--qp-primary-tint); }

/* ---- Confirm / result ---------------------------------------------------------------- */

.vp-confirm-phone {
    margin: 18px 0 6px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
}

.vp-terminal p { margin: 0 0 6px; font-size: 14px; color: var(--qp-ink-2); }
.vp-terminal p:first-child { color: var(--qp-ink); font-weight: 500; }

.vp-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 4px auto 16px;
    border-radius: 50%;
}

.vp-result-icon svg { width: 28px; height: 28px; }

.vp-result-icon-ok      { background: var(--qp-ok-bg);        color: var(--qp-ok); }
.vp-result-icon-busy    { background: var(--qp-warn-bg);      color: var(--qp-warn-ink); }
.vp-result-icon-bad     { background: var(--qp-bad-bg);       color: var(--qp-bad); }
.vp-result-icon-neutral { background: var(--qp-primary-tint); color: var(--qp-primary); }

.vp-card-center .vp-meta { text-align: left; }

/* ---- Larger screens -------------------------------------------------------------------- */

@media (min-width: 480px) {
    .vp-main { padding-top: 32px; }
    .vp-card { padding: 32px 28px; }
    .vp-tear { margin-left: -28px; margin-right: -28px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}