/* ============================================================================
   VoucherTicket — the arrival screen a voucher link raises.

   Reuses the invitation ticket's object and stage wholesale (invite-ticket.css)
   so a voucher and an invitation read as two tickets from one printer. Only
   what is specific to a voucher lives here: the reward list and the second,
   quieter action.
   ========================================================================== */

.voucher-ticket-grants {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(3px, 0.8vmin, 6px);
    color: #cdb6ff;
    font-size: clamp(12px, 1.9vmin, 17px);
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 0 18px rgba(168, 132, 255, 0.32);
}

.voucher-ticket-error {
    margin: 0;
    min-height: 1.35em;
    color: #ff9d9d;
    font-size: clamp(11px, 1.6vmin, 14px);
    font-weight: 700;
    line-height: 1.35;
}

.voucher-ticket-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.6vmin, 16px);
    flex-wrap: wrap;
}

.voucher-ticket-later {
    min-height: var(--mf-touch, 44px);
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(238, 219, 241, 0.72);
    font: inherit;
    font-size: clamp(12px, 1.8vmin, 15px);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.voucher-ticket-later:hover,
.voucher-ticket-later:focus-visible {
    color: #fff1be;
    outline: none;
}

.voucher-ticket-later:focus-visible {
    outline: 2px solid rgba(200, 178, 255, 0.9);
    outline-offset: 3px;
}

@media (orientation: landscape) and (max-height: 560px) {
    .voucher-ticket-grants {
        gap: 2px;
        font-size: clamp(11px, 3.4svh, 14px);
    }
}