/* 777 Voucher Redemption – Sin City Seats */
/* Matches SCS design system: neon cyan accent, dark UI */

.voucher-page {
    --voucher-accent: var(--color-neon-cyan, #00ffff);
    --voucher-accent-rgb: 0, 255, 255;
    --voucher-accent-muted: rgba(0, 255, 255, 0.15);
    --voucher-accent-border: rgba(0, 255, 255, 0.4);
}

/* ----- Flow header: 777 logo + step progress ----- */
.voucher-flow-header {
    text-align: center;
    margin-bottom: var(--space-xl, 32px);
    padding: 0 var(--space-md, 16px);
}

.voucher-flow-logo-link {
    display: inline-block;
    margin-bottom: var(--space-sm, 12px);
    border-radius: var(--radius-sm, 4px);
}

.voucher-flow-logo-link:focus-visible {
    outline: 2px solid var(--voucher-accent);
    outline-offset: 4px;
}

.voucher-flow-logo {
    height: 100px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    display: block;
}

@media (min-width: 480px) {
    .voucher-flow-logo {
        height: 130px;
        max-width: 460px;
    }
}

.voucher-flow-tagline {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #aaa);
    margin: 0 0 var(--space-md, 16px);
    letter-spacing: 0.02em;
}

.voucher-step-progress {
    margin-top: var(--space-sm, 12px);
}

.voucher-step-text {
    display: block;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-light-gray, #888);
    margin-bottom: 8px;
}

.voucher-step-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.voucher-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-mid-gray, #333);
    transition: background 0.2s ease;
}

.voucher-step-dot--active {
    background: var(--voucher-accent);
    box-shadow: 0 0 8px rgba(var(--voucher-accent-rgb), 0.5);
}

/* ----- Flow footer: help line at bottom of page ----- */
.voucher-flow-footer {
    text-align: center;
    padding: var(--space-md, 16px) var(--space-md, 16px) calc(var(--space-md, 16px) + env(safe-area-inset-bottom));
    background: rgba(10, 10, 10, 0.96);
    border-top: 1px solid var(--color-mid-gray, #333);
    margin-top: var(--space-2xl, 48px);
}

.voucher-flow-footer-text {
    margin: 0;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #aaa);
}

.voucher-flow-footer-phone {
    color: var(--voucher-accent);
    font-weight: 700;
    text-decoration: none;
}


/* ----- Container & card ----- */
.voucher-container {
    max-width: 520px;
    margin: 0 auto;
    padding: var(--space-xl, 32px) var(--space-md, 16px) var(--space-2xl, 48px);
}

.voucher-card {
    background: var(--color-dark-gray, #111);
    border: 1px solid var(--color-mid-gray, #333);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-xl, 32px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.voucher-card-success {
    border-color: rgba(0, 255, 100, 0.3);
}

.voucher-title {
    font-size: var(--font-size-2xl, 24px);
    margin-bottom: var(--space-md, 16px);
    text-align: center;
}

/* Keep long titles (e.g. "Redeem Your Show Voucher") on one line */
.voucher-title--single-line {
    white-space: nowrap;
    font-size: clamp(0.75rem, 3.2vw, 1.15rem);
}

/* Confirmation: "✓ Reservation Complete!" – shrink to fit one line, green checkmark */
.voucher-title--confirmation {
    white-space: nowrap;
    font-size: clamp(0.7rem, 2.8vw, 1.05rem);
}
.voucher-title-check {
    color: #28a745;
}

.voucher-intro,
.voucher-intro-sub {
    margin-bottom: var(--space-sm, 12px);
    color: var(--color-light-gray, #aaa);
}

.voucher-intro--success {
    color: #28a745;
    font-weight: 700;
}

.voucher-form {
    margin-top: var(--space-lg, 24px);
}

/* Step 1 (index): center intro, voucher code label, and hint */
.voucher-step-1 .voucher-intro {
    text-align: center;
}

.voucher-step-1 .voucher-field label,
.voucher-step-1 .voucher-code-label-instruction,
.voucher-step-1 .voucher-code-label-field {
    text-align: center;
}

.voucher-step-1 .voucher-hint {
    text-align: center;
}

.voucher-step-1 .voucher-field input {
    text-align: center;
    font-weight: 700;
    color: #000;
    background: #fff;
}

.voucher-step-1 .voucher-field input::placeholder {
    color: #999;
    font-weight: 400;
    font-style: italic;
}

/* Step 2 (group size): tightened, centered */
.voucher-step-2 .voucher-container {
    padding: var(--space-lg, 24px) var(--space-md, 16px) var(--space-2xl, 48px);
}

.voucher-step-2 .voucher-flow-header {
    margin-bottom: var(--space-lg, 24px);
}

.voucher-step-2 .voucher-card {
    padding: var(--space-lg, 24px);
}

.voucher-step-3 .voucher-intro--success {
    text-align: center;
}

.voucher-step-6-header {
    text-align: center;
    margin-bottom: var(--space-xs, 8px);
}

.voucher-step-6-summary {
    text-align: center;
    margin: 0 0 var(--space-xs, 8px);
    font-size: var(--font-size-sm, 14px);
    font-weight: 700;
    color: var(--color-light-gray, #aaa);
}

.voucher-step-6-summary:last-of-type {
    margin-bottom: var(--space-md, 16px);
}

.voucher-hold-timer {
    text-align: center;
    margin-bottom: var(--space-md, 16px);
    padding: var(--space-sm, 12px) var(--space-md, 16px);
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    font-size: var(--font-size-sm, 14px);
}
.voucher-hold-timer-label { margin-right: 0.35em; }
.voucher-hold-timer-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.voucher-hold-timer a { text-decoration: underline; }

.voucher-step-2 .voucher-intro,
.voucher-step-2 .voucher-intro-sub {
    text-align: center;
    margin-bottom: var(--space-xs, 8px);
}

.voucher-step-2 .voucher-title {
    margin-bottom: var(--space-sm, 12px);
    line-height: 1 !important;
}

.voucher-step-2 .voucher-form {
    margin-top: var(--space-md, 16px);
}

.voucher-step-2 .voucher-group-options {
    gap: 4px;
    max-width: 320px;
    margin: 0 auto;
}

.voucher-one-per-person {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-light-gray, #888);
    text-align: center;
    margin: var(--space-sm, 12px) 0 0;
}

.voucher-step-2 .voucher-radio-card {
    padding: var(--space-sm, 12px) var(--space-md, 16px);
    text-align: center;
}

.voucher-step-2 .voucher-radio-card input {
    margin-right: 8px;
}

.voucher-step-2 .voucher-actions {
    margin-top: var(--space-md, 16px);
}

.voucher-field {
    margin-bottom: var(--space-md, 16px);
}

.voucher-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: var(--font-size-sm, 14px);
}

.voucher-code-label-instruction {
    display: block;
    color: #e0e0e0;
    font-weight: 600;
    margin-bottom: 4px;
}

.voucher-code-label-field {
    display: block;
    color: #dc3545;
    font-weight: 700;
}

.voucher-field input {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-base, 16px);
    border: 1px solid var(--color-mid-gray, #333);
    border-radius: var(--radius-md, 8px);
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    min-height: 48px;
}

.voucher-field input:focus {
    outline: none;
    border-color: var(--voucher-accent);
    box-shadow: 0 0 0 2px var(--voucher-accent-muted);
}

.voucher-hint {
    display: block;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-light-gray, #888);
    margin-top: 4px;
}

.voucher-tips {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-mid-gray, #444);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md, 16px);
    margin: var(--space-md, 16px) 0;
    font-size: var(--font-size-sm, 14px);
    color: #212529;
}

.voucher-tips p {
    margin: 0 0 0.5em;
    color: #212529;
}

.voucher-tips p:last-child {
    margin-bottom: 0;
}

.voucher-tips-check {
    color: #28a745;
    font-weight: 700;
    margin-right: 0.35em;
}

.voucher-tips ul {
    margin: 8px 0 0 1rem;
}

.voucher-alert {
    padding: var(--space-md, 16px);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--space-md, 16px);
}

.voucher-alert-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #f8a0a8;
}

.voucher-btn {
    display: inline-block;
    padding: 14px 24px;
    font-size: var(--font-size-base, 16px);
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-decoration: none;
    border: none;
    min-height: 48px;
    line-height: 1.25;
}

.voucher-btn-primary {
    background: var(--voucher-accent);
    color: #000;
}

.voucher-btn-primary:hover {
    background: #33ffff;
    box-shadow: 0 0 12px rgba(var(--voucher-accent-rgb), 0.4);
}

.voucher-btn-secondary {
    background: transparent;
    color: var(--voucher-accent);
    border: 1px solid var(--voucher-accent);
}

.voucher-btn-secondary:hover {
    background: var(--voucher-accent-muted);
}

.voucher-btn-outline {
    background: transparent;
    color: var(--voucher-accent);
    border: 1px solid var(--voucher-accent);
}

.voucher-btn-outline:hover {
    background: var(--voucher-accent-muted);
}

.voucher-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-md, 16px);
    margin-top: var(--space-lg, 24px);
    justify-content: space-between;
    align-items: center;
}

.voucher-actions .voucher-btn-primary { order: 1; }
.voucher-actions .voucher-btn-secondary { order: 0; }

.voucher-divider {
    height: 1px;
    background: var(--color-mid-gray, #333);
    margin: var(--space-lg, 24px) 0;
}

.voucher-browse {
    margin-bottom: 8px;
    color: var(--color-light-gray, #888);
}

.voucher-link {
    color: var(--voucher-accent);
    font-weight: 600;
}

.voucher-link:hover {
    text-decoration: underline;
}

/* Group size */
.voucher-group-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.voucher-radio-card {
    display: block;
    padding: var(--space-md, 16px);
    border: 1px solid var(--color-mid-gray, #333);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
}

.voucher-radio-card input {
    margin-right: 10px;
    vertical-align: middle;
}

.voucher-radio-card:has(input:checked) {
    border-color: var(--voucher-accent);
    background: var(--voucher-accent-muted);
}

.voucher-radio-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ----- Upgrade page (sell / upsell) ----- */
.voucher-container--upgrade .voucher-card--upgrade {
    max-width: 560px;
    margin: 0 auto;
}

.voucher-title--upgrade {
    font-size: var(--font-size-xl, 20px);
    text-align: center;
    margin-bottom: 0.5rem;
}

.voucher-upgrade-lead {
    text-align: center;
    color: var(--color-light-gray, #aaa);
    margin-bottom: var(--space-lg, 24px);
    font-size: var(--font-size-base, 16px);
}

.voucher-upgrade-summary-card {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(226, 0, 255, 0.06) 100%);
    border: 1px solid var(--voucher-accent-border);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-lg, 24px);
    margin-bottom: var(--space-xl, 32px);
}

.voucher-upgrade-summary-heading {
    font-size: var(--font-size-xs, 12px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--voucher-accent);
    margin-bottom: var(--space-sm, 12px);
}

.voucher-upgrade-summary-show {
    font-size: var(--font-size-lg, 18px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.voucher-upgrade-summary-row {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #bbb);
}

.voucher-upgrade-summary-venue {
    color: var(--color-light-gray, #888);
}

.voucher-upgrade-summary-tickets {
    margin-top: var(--space-sm, 12px);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--voucher-accent);
}

.voucher-upgrade-seating {
    margin-bottom: var(--space-lg, 24px);
}

.voucher-upgrade-seating-title {
    font-size: var(--font-size-lg, 18px);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.voucher-upgrade-seating-intro {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #aaa);
    margin-bottom: var(--space-md, 16px);
}

.voucher-upgrade-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.voucher-upgrade-tier {
    display: block;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 2px solid var(--color-mid-gray, #333);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.voucher-upgrade-tier--selected {
    border-color: var(--voucher-accent);
    background: var(--voucher-accent-muted);
    box-shadow: 0 0 16px rgba(var(--voucher-accent-rgb), 0.15);
}

.voucher-upgrade-tier--selected .voucher-upgrade-tier-name {
    color: #fff;
}

.voucher-upgrade-tier input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.voucher-upgrade-tier-inner {
    display: block;
    padding: var(--space-md, 16px) var(--space-lg, 20px);
}

.voucher-upgrade-tier--selected {
    cursor: default;
}

.voucher-upgrade-tier-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--voucher-accent);
    color: #000;
    margin-bottom: 8px;
}

.voucher-upgrade-tier-badge--free {
    background: rgba(255, 255, 255, 0.15);
    color: #b8e986;
    border: 1px solid rgba(184, 233, 134, 0.4);
}

.voucher-upgrade-tier-badge--soon {
    background: var(--color-mid-gray, #444);
    color: var(--color-light-gray, #aaa);
}

.voucher-upgrade-tier-badge--paid {
    background: #FFD700;
    color: #000;
}

.voucher-upgrade-tier-per {
    font-weight: 500;
    opacity: 0.9;
}

.voucher-upgrade-tier-name {
    display: block;
    font-size: var(--font-size-base, 16px);
    font-weight: 700;
    color: var(--color-light-gray, #ccc);
    margin-bottom: 2px;
}

.voucher-upgrade-tier-desc {
    display: block;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #888);
}

.voucher-upgrade-tier--locked .voucher-upgrade-tier-desc {
    color: var(--color-light-gray, #666);
}

.voucher-upgrade-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-md, 16px) 0;
    margin: var(--space-lg, 24px) 0 var(--space-sm, 12px);
    border-top: 1px solid var(--color-mid-gray, #333);
}

.voucher-upgrade-total-label {
    font-size: var(--font-size-base, 16px);
    color: var(--color-light-gray, #aaa);
}

.voucher-upgrade-total-amount {
    font-size: var(--font-size-xl, 20px);
    font-weight: 700;
    color: var(--voucher-accent);
}

.voucher-upgrade-trust {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #666);
    text-align: center;
    margin-bottom: var(--space-lg, 24px);
}

.voucher-actions--upgrade {
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.voucher-actions--upgrade .voucher-btn-primary {
    order: 1;
    width: 100%;
    min-height: 52px;
}

.voucher-actions--upgrade .voucher-btn-secondary {
    order: 0;
}

.voucher-additional-codes .voucher-field {
    margin-bottom: 12px;
}

.voucher-additional-codes-visible {
    display: block;
    margin-top: var(--space-lg, 24px);
    padding-top: var(--space-lg, 24px);
    border-top: 1px solid var(--color-mid-gray, #333);
}

.voucher-step-heading {
    font-size: var(--font-size-lg, 18px);
    margin-bottom: var(--space-sm, 12px);
    font-weight: 600;
}

/* ----- Select date page (mobile-first) – varied colors ----- */
.voucher-page-select-date .voucher-card {
    padding: var(--space-lg, 24px);
    background: linear-gradient(180deg, #0f1215 0%, #0a0c0e 100%);
    border-color: #2a2d35;
}

@media (min-width: 480px) {
    .voucher-page-select-date .voucher-card {
        padding: var(--space-xl, 32px);
    }
}

.voucher-container--date {
    max-width: 440px;
}

.voucher-page-select-date .voucher-intro--lead {
    color: #b8bcc4;
}

.voucher-quick-dates {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-lg, 24px);
}

.voucher-quick-btn {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 16px 20px;
    font-size: var(--font-size-lg, 18px);
    font-weight: 600;
    color: #000;
    background: var(--voucher-accent);
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.voucher-quick-btn:nth-child(1) {
    background: var(--voucher-accent);
    color: #000;
}
.voucher-quick-btn:nth-child(1):hover {
    background: #33ffff;
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.45);
}

.voucher-quick-btn:nth-child(2) {
    background: rgba(255, 0, 255, 0.2);
    color: var(--color-neon-pink, #ff00ff);
    border: 1px solid rgba(255, 0, 255, 0.5);
}
.voucher-quick-btn:nth-child(2):hover {
    background: rgba(255, 0, 255, 0.35);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
}

.voucher-quick-btn:nth-child(3) {
    background: rgba(255, 255, 0, 0.15);
    color: var(--color-neon-yellow, #ffff00);
    border: 1px solid rgba(255, 255, 0, 0.45);
}
.voucher-quick-btn:nth-child(3):hover {
    background: rgba(255, 255, 0, 0.28);
    box-shadow: 0 0 12px rgba(255, 255, 0, 0.25);
}

.voucher-quick-btn:active {
    transform: scale(0.98);
}

.voucher-quick-btn .voucher-quick-label {
    display: block;
}

.voucher-date-custom {
    margin-top: var(--space-sm, 12px);
}

.voucher-btn--full {
    width: 100%;
    justify-content: center;
}

.voucher-intro--lead {
    font-size: var(--font-size-base, 16px);
    line-height: 1.5;
    margin-bottom: var(--space-lg, 24px);
    color: var(--color-light-gray, #bbb);
}

.voucher-date-window {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    margin-bottom: var(--space-xl, 32px);
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.08) 0%, rgba(255, 200, 100, 0.06) 100%);
    border: 1px solid rgba(255, 255, 0, 0.25);
    border-radius: var(--radius-md, 8px);
    text-align: center;
}

.voucher-date-window-label {
    font-size: var(--font-size-sm, 14px);
    color: #a0a0a8;
}

.voucher-date-window-value {
    font-size: var(--font-size-lg, 18px);
    color: var(--color-neon-yellow, #ffcc00);
}

.voucher-form-dates {
    margin-top: 0;
}

.voucher-form-dates .voucher-field,
.voucher-date-block {
    margin-bottom: var(--space-lg, 24px);
}

.voucher-date-block-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--font-size-base, 16px);
    color: var(--color-white, #fff);
}

.voucher-optional {
    font-weight: 400;
    color: var(--color-light-gray, #888);
    font-size: var(--font-size-sm, 14px);
}

.voucher-input-date {
    width: 100%;
    padding: 16px 18px;
    font-size: var(--font-size-lg, 18px);
    border: 2px solid var(--color-mid-gray, #333);
    border-radius: var(--radius-md, 8px);
    background: rgba(0, 0, 0, 0.4);
    color: var(--color-white, #fff);
    min-height: 56px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.voucher-input-date:hover {
    border-color: var(--color-light-gray, #555);
}

.voucher-input-date:focus {
    outline: none;
    border-color: var(--voucher-accent);
    box-shadow: 0 0 0 3px var(--voucher-accent-muted);
}

.voucher-date-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #888);
}

.voucher-date-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md, 16px);
    margin: var(--space-lg, 24px) 0;
}

.voucher-date-divider::before,
.voucher-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-mid-gray, #333), transparent);
}

.voucher-page-select-date .voucher-date-divider::before {
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.25), transparent);
}
.voucher-page-select-date .voucher-date-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 0, 0.2), transparent);
}

.voucher-date-divider span {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #888);
    white-space: nowrap;
}

.voucher-page-select-date .voucher-date-divider span {
    color: #b0b4bc;
}

/* ----- Calendar grid (tap-to-select dates) ----- */
.voucher-calendar-wrap {
    margin-top: var(--space-md, 16px);
    padding: var(--space-lg, 24px);
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: var(--radius-lg, 12px);
}

.voucher-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-md, 16px);
}

.voucher-calendar-prev,
.voucher-calendar-next {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--voucher-accent);
    background: transparent;
    border: 1px solid var(--voucher-accent-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.voucher-calendar-prev:hover:not(:disabled),
.voucher-calendar-next:hover:not(:disabled) {
    background: var(--voucher-accent-muted);
}

.voucher-calendar-prev:disabled,
.voucher-calendar-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.voucher-calendar-month {
    font-size: var(--font-size-lg, 18px);
    font-weight: 600;
    margin: 0;
    color: var(--voucher-accent);
}

.voucher-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    text-align: center;
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: #8890a0;
}

.voucher-calendar-weekdays span {
    padding: 4px 0;
}

.voucher-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: var(--space-md, 16px);
}

.voucher-calendar-day {
    min-height: 44px;
    padding: 8px;
    font-size: var(--font-size-base, 16px);
    font-weight: 500;
    color: #e0e4ea;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.voucher-calendar-day:hover:not(:disabled) {
    background: var(--voucher-accent-muted);
    border-color: var(--voucher-accent-border);
    color: var(--voucher-accent);
}

.voucher-calendar-day--selected {
    background: var(--voucher-accent);
    color: #000;
    border-color: var(--voucher-accent);
}

.voucher-calendar-day--selected:hover:not(:disabled) {
    background: #33ffff;
    border-color: #33ffff;
    color: #000;
}

.voucher-calendar-day--empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.voucher-calendar-day--disabled {
    color: #4a4d55;
    background: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
    border-color: transparent;
}

.voucher-calendar-hint {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #aaa);
    margin-bottom: var(--space-md, 16px);
    min-height: 1.5em;
}

.voucher-page-select-date .voucher-calendar-hint {
    color: #b8e0b8;
}

.voucher-calendar-submit {
    margin-bottom: 0;
}

.voucher-actions--date {
    margin-top: var(--space-xl, 32px);
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.voucher-actions--date .voucher-btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    padding: 16px 20px;
}

.voucher-btn--primary-large {
    min-height: 52px;
    padding: 18px 24px;
    font-size: var(--font-size-lg, 18px);
}

.voucher-page-select-date .voucher-btn {
    min-height: 48px;
}

.voucher-label-optional {
    font-weight: 400;
    color: var(--color-light-gray, #888);
    font-size: var(--font-size-sm, 14px);
}

/* Show selection – sticky summary + compact list */
.voucher-container--show-selection .voucher-card {
    padding-top: 0;
}

.voucher-show-selection-header {
    margin-bottom: var(--space-lg, 24px);
    text-align: center;
}

.voucher-show-selection-header .voucher-intro--success {
    text-align: center;
}

.voucher-show-selection-summary {
    margin: 0 0 var(--space-xs, 4px);
    font-size: var(--font-size-base, 16px);
    color: var(--color-light-gray, #aaa);
}

.voucher-ticket-count {
    color: var(--voucher-accent);
    font-weight: 700;
}

.voucher-show-selection-title {
    font-size: var(--font-size-lg, 18px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--space-md, 16px) 0 0;
    color: var(--color-white, #fff);
}

.voucher-show-selection-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(8px);
    padding: var(--space-md, 16px) 0 var(--space-sm, 12px);
    margin: 0 calc(-1 * var(--space-md, 16px)) var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
    padding-left: var(--space-md, 16px);
    padding-right: var(--space-md, 16px);
    border-bottom: 1px solid var(--color-mid-gray, #333);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.voucher-title--compact {
    font-size: var(--font-size-lg, 18px);
    margin-bottom: 4px;
}

.voucher-intro--compact {
    font-size: var(--font-size-sm, 14px);
    margin: 0;
    color: var(--color-light-gray, #aaa);
}

/* Show selection – SCS home page format: same grid and card structure for all cards */
.voucher-container--show-selection .voucher-shows-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .voucher-container--show-selection .voucher-shows-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

.voucher-container--show-selection .show-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.voucher-container--show-selection .show-card-link:hover .card-button {
    background: var(--voucher-accent, #00E5FF);
    color: #000;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

.voucher-container--show-selection .show-card-link:hover .card-button .card-button-icon {
    color: #000;
}

.voucher-container--show-selection .show-card:hover {
    transform: translateY(-8px);
    border-color: var(--voucher-accent, #00E5FF);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.voucher-container--show-selection .show-card > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    display: block;
}

.voucher-container--show-selection .show-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #252530 0%, #1a1a24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.voucher-container--show-selection .card-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.voucher-container--show-selection .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: -0.05rem;
    text-align: center;
}

.voucher-container--show-selection .card-venue {
    font-size: 0.875rem;
    color: #9fa0ad;
}

.voucher-container--show-selection .card-description {
    font-size: 0.875rem;
    color: #d0d0da;
    line-height: 1.4;
    flex: 1;
}

.voucher-container--show-selection .card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 2px solid var(--voucher-accent, #00E5FF);
    color: var(--voucher-accent, #00E5FF);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    margin-top: auto;
}

.voucher-container--show-selection .card-button-icon {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-left: 0.4rem;
    color: inherit;
}

@media (max-width: 639px) {
    .voucher-container--show-selection .show-card > img,
    .voucher-container--show-selection .show-card-img-placeholder {
        aspect-ratio: 16 / 10;
    }

    .voucher-container--show-selection .card-title {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .voucher-container--show-selection .card-content {
        padding: 1rem 1.25rem 1.25rem;
    }
}

.voucher-perf-loading {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #888);
    margin: 0;
}

.voucher-performances {
    margin-top: var(--space-sm, 12px);
    padding-top: var(--space-sm, 12px);
    border-top: 1px solid var(--color-mid-gray, #333);
}

.voucher-perf-more-wrap {
    list-style: none;
    margin-top: var(--space-xs, 8px);
}

.voucher-perf-more-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--font-size-sm, 14px);
    color: var(--voucher-accent);
    background: transparent;
    border: 1px dashed var(--voucher-accent-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.voucher-perf-more-btn:hover {
    background: var(--voucher-accent-muted);
    border-style: solid;
}

.voucher-perf-heading {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--color-light-gray, #aaa);
    margin-bottom: var(--space-sm, 12px);
}

.voucher-perf-empty {
    color: var(--color-light-gray, #888);
    font-size: var(--font-size-sm, 14px);
    margin: 0;
}

.voucher-perf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.voucher-perf-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: var(--voucher-accent-muted);
    border: 1px solid var(--voucher-accent-border);
    border-radius: var(--radius-md, 8px);
    color: var(--voucher-accent);
    cursor: pointer;
    font-size: var(--font-size-base, 16px);
    transition: background 0.2s, border-color 0.2s;
}

.voucher-perf-btn:hover {
    background: rgba(var(--voucher-accent-rgb), 0.2);
    border-color: var(--voucher-accent);
}

.voucher-perf-date {
    font-weight: 500;
}

.voucher-perf-select {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--voucher-accent);
}

/* Show card: primary CTA to choose date & time (mobile-friendly) */
.voucher-show-choose-btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    min-height: 48px;
    line-height: 1.2;
    padding: 14px 18px;
}

/* Step 5: Choose date & time (one show) – show graphic + list */
.voucher-page-choose-datetime .voucher-card {
    max-width: 100%;
}

.voucher-choose-datetime-header {
    margin-bottom: var(--space-lg, 24px);
    text-align: center;
}

.voucher-choose-datetime-image {
    width: 100%;
    max-width: 420px;
    margin: 0 auto var(--space-md, 16px);
    aspect-ratio: 16/10;
    background: var(--color-mid-gray, #333);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.voucher-choose-datetime-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voucher-show-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--color-mid-gray, #333);
}

.voucher-choose-datetime-show-title {
    font-size: var(--font-size-xl, 20px);
    font-weight: 700;
    margin: 0 0 var(--space-sm, 12px);
    color: var(--color-white, #fff);
}

.voucher-choose-datetime-summary {
    margin-bottom: 0;
}

.voucher-choose-datetime-hint {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-light-gray, #aaa);
    margin-bottom: var(--space-md, 16px);
}

.voucher-choose-datetime-list {
    list-style: none;
    margin: 0 0 var(--space-xl, 32px);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.voucher-choose-datetime-form {
    margin: 0;
}

.voucher-choose-datetime-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 16px 20px;
    text-align: left;
    font-size: var(--font-size-base, 16px);
    font-weight: 500;
    color: #111;
    background: #fff;
    border: 1px solid var(--color-mid-gray, #333);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.voucher-choose-datetime-btn:hover {
    background: #f5f5f5;
    border-color: var(--voucher-accent);
}

.voucher-choose-datetime-label {
    flex: 1;
    min-width: 0;
}

.voucher-choose-datetime-select {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    flex-shrink: 0;
    color: var(--voucher-accent);
}

.voucher-actions--choose-datetime {
    margin-top: 0;
}

.voucher-actions--choose-datetime .voucher-btn--full {
    min-height: 48px;
}

/* Summary & confirmation */
.voucher-summary {
    background: rgba(255, 255, 255, 0.04);
    padding: var(--space-md, 16px);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--space-md, 16px);
}

.voucher-summary ul {
    margin: 8px 0 0 1rem;
}

/* Confirmation page: improve readability – larger, higher-contrast text */
.voucher-summary--confirmation p,
.voucher-confirmation .voucher-summary p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e8eaed;
    margin-bottom: 0.5em;
}

.voucher-confirmation-number {
    font-size: var(--font-size-lg, 18px);
    margin-bottom: var(--space-md, 16px);
    text-align: center;
    color: #e8eaed;
}

.voucher-email-sent {
    margin-bottom: var(--space-md, 16px);
    font-size: 1rem;
    color: #e8eaed;
}

.voucher-venue-address {
    margin: var(--space-sm, 12px) 0;
    font-size: 1rem;
    color: #e8eaed;
}

.voucher-venue-maps-link {
    display: inline-block;
    margin-left: 0.5em;
    color: var(--voucher-accent);
    font-weight: 600;
}

.voucher-venue-maps-link:hover {
    text-decoration: underline;
}

.voucher-contact {
    margin-top: var(--space-md, 16px);
    font-size: 1rem;
    color: #e8eaed;
}

.voucher-contact a {
    color: var(--voucher-accent);
}

.voucher-see-more {
    margin-top: var(--space-lg, 24px);
    text-align: center;
}

.voucher-see-more .voucher-link {
    font-size: 1.1rem;
}