/**
 * 777 Voucher – Senior-friendly mobile design
 * Target: 60–75, small screens, low vision, large touch targets
 * Warm colors, light background, 20px+ text, 70px buttons
 */

/* Design system */
.voucher-page {
    --senior-primary: #FF6B35;
    --senior-primary-light: #FF8C5A;
    --senior-success: #28A745;
    --senior-success-light: #34CE57;
    --senior-accent: #FFD700;
    --senior-bg: #FFFFFF;
    --senior-card-bg: #F8F9FA;
    --senior-text: #212529;
    --senior-text-muted: #6C757D;
    --senior-border: #DEE2E6;
    --senior-font-xs: 18px;
    --senior-font-sm: 20px;
    --senior-font-base: 22px;
    --senior-font-lg: 24px;
    --senior-font-xl: 28px;
    --senior-font-2xl: 32px;
    --senior-line: 1.8;
    --senior-space-sm: 12px;
    --senior-space-md: 16px;
    --senior-space-lg: 24px;
    --senior-space-xl: 32px;
    --senior-space-2xl: 48px;
    --senior-btn-height: 70px;
    --senior-btn-height-sm: 60px;
    --senior-input-height: 70px;
    --senior-touch-min: 48px;
}

/* Base: light background, dark text, generous spacing */
.voucher-page .voucher-container,
.voucher-page .voucher-card,
.voucher-page .voucher-upgrade-page {
    background: var(--senior-bg);
    color: var(--senior-text);
}

.voucher-page .voucher-card {
    border: 2px solid var(--senior-border);
    border-radius: 16px;
    padding: var(--senior-space-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.voucher-page .voucher-title,
.voucher-page .voucher-celebration-header {
    font-size: var(--senior-font-2xl);
    font-weight: 700;
    color: var(--senior-text);
    line-height: var(--senior-line);
    margin-bottom: var(--senior-space-lg);
}

.voucher-step-2 .voucher-title {
    line-height: 1 !important;
}

.voucher-page .voucher-intro,
.voucher-page .voucher-intro-sub {
    font-size: var(--senior-font-sm);
    line-height: var(--senior-line);
    color: var(--senior-text);
    margin-bottom: var(--senior-space-md);
}

.voucher-page .voucher-intro strong {
    color: var(--senior-text);
}

.voucher-page .voucher-step-label {
    font-size: var(--senior-font-xs);
    color: var(--senior-text-muted);
    margin-bottom: var(--senior-space-md);
}

.voucher-page .voucher-intro--success {
    color: var(--senior-success);
    font-weight: 700;
    margin-bottom: var(--senior-space-md);
}

.voucher-page .voucher-tip-box,
.voucher-page .voucher-tips {
    background: var(--senior-card-bg);
    border: 1px solid var(--senior-border);
    border-radius: 12px;
    padding: var(--senior-space-md) var(--senior-space-lg);
    margin-bottom: var(--senior-space-lg);
    font-size: var(--senior-font-xs);
    line-height: var(--senior-line);
    color: var(--senior-text);
}

.voucher-page .voucher-tips p {
    color: var(--senior-text);
}

.voucher-page .voucher-tips-check {
    color: var(--senior-success);
}

.voucher-page .voucher-hint {
    font-size: var(--senior-font-xs);
    color: var(--senior-text-muted);
    display: block;
    margin-top: var(--senior-space-sm);
}

/* Step indicator: simple text only (no dots – confusing for seniors) */
.voucher-page .voucher-step-text {
    font-size: var(--senior-font-sm);
    color: var(--senior-text-muted);
}

.voucher-page .voucher-step-dots {
    display: none;
}

.voucher-page .voucher-title--single-line {
    font-size: clamp(0.9rem, 3.5vw, 1.35rem) !important;
}

.voucher-page .voucher-title--confirmation {
    font-size: clamp(0.85rem, 3vw, 1.2rem) !important;
}
.voucher-page .voucher-title-check {
    color: var(--senior-success, #28a745);
}

.voucher-page .voucher-flow-tagline {
    font-size: var(--senior-font-base);
    color: var(--senior-text-muted);
}

/* Larger logo throughout the flow */
.voucher-page .voucher-flow-logo {
    height: 110px;
    max-width: 380px;
}

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

/* Footer: help line at bottom – light bar, huge tappable number */
.voucher-page .voucher-flow-footer {
    background: var(--senior-card-bg);
    border-top: 2px solid var(--senior-border);
    padding: var(--senior-space-lg) var(--senior-space-md) calc(var(--senior-space-lg) + env(safe-area-inset-bottom));
}

.voucher-page .voucher-flow-footer-text {
    margin: 0;
    font-size: var(--senior-font-sm);
    color: var(--senior-text-muted);
}

.voucher-page .voucher-flow-footer-phone {
    font-size: var(--senior-font-xl);
    font-weight: 700;
    color: var(--senior-primary);
    text-decoration: none;
}

/* Primary button: warm orange, 70px */
.voucher-page .voucher-btn-primary,
.voucher-page .voucher-cta-button {
    min-height: var(--senior-btn-height);
    font-size: var(--senior-font-base) !important;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    width: 100%;
    background: linear-gradient(135deg, var(--senior-primary), var(--senior-primary-light)) !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
    padding: var(--senior-space-md) var(--senior-space-lg);
}

.voucher-page .voucher-btn-primary:hover,
.voucher-page .voucher-cta-button:hover {
    background: linear-gradient(135deg, var(--senior-primary-light), var(--senior-primary)) !important;
    color: #FFFFFF !important;
}

/* Success button (free tickets) */
.voucher-page .voucher-cta-button:not(.voucher-cta-button--paid) {
    background: linear-gradient(135deg, var(--senior-success), var(--senior-success-light)) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

/* Secondary / Back */
.voucher-page .voucher-btn-secondary,
.voucher-page .voucher-upgrade-back {
    min-height: var(--senior-btn-height-sm);
    font-size: var(--senior-font-sm) !important;
    font-weight: 700;
    border: 3px solid var(--senior-text-muted);
    color: var(--senior-text-muted) !important;
    background: transparent !important;
    border-radius: 12px;
    padding: var(--senior-space-md);
}

/* Inputs: 70px tall, 22px text */
.voucher-page input[type="text"],
.voucher-page input[type="email"],
.voucher-page input[type="tel"],
.voucher-page input[type="number"] {
    min-height: var(--senior-input-height);
    font-size: 22px !important;
    padding: 16px 20px;
    border: 3px solid var(--senior-border);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--senior-text);
}

.voucher-page input:focus {
    border-color: var(--senior-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
}

.voucher-page label {
    font-size: var(--senior-font-sm);
    font-weight: 700;
    margin-bottom: var(--senior-space-sm);
    display: block;
    color: var(--senior-text);
}

.voucher-page .voucher-code-label-instruction {
    color: #212529;
}

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

/* Help / phone in confirmation card etc. */
.voucher-page .voucher-help-phone,
.voucher-page .voucher-contact a {
    font-size: var(--senior-font-lg);
    font-weight: 700;
    color: var(--senior-primary);
    text-decoration: none;
}

/* Confirmation page: ensure dark text on light senior theme */
.voucher-page .voucher-summary--confirmation p,
.voucher-page .voucher-confirmation .voucher-summary p,
.voucher-page .voucher-confirmation-number,
.voucher-page .voucher-email-sent,
.voucher-page .voucher-venue-address,
.voucher-page .voucher-contact {
    color: var(--senior-text);
}

.voucher-page .voucher-summary--confirmation p {
    font-size: var(--senior-font-sm);
}

/* Group size options: 70px tall each */
.voucher-page .voucher-radio-card,
.voucher-page .voucher-group-options label {
    min-height: var(--senior-btn-height);
    padding: var(--senior-space-md) var(--senior-space-lg);
    font-size: var(--senior-font-base);
    font-weight: 700;
    border: 3px solid var(--senior-border);
    border-radius: 12px;
    margin-bottom: var(--senior-space-md);
    display: flex;
    align-items: center;
    gap: var(--senior-space-md);
}

.voucher-step-2 .voucher-group-options label {
    margin-bottom: var(--senior-space-sm);
    justify-content: center;
}

.voucher-page .voucher-one-per-person {
    font-size: var(--senior-font-xs);
    color: var(--senior-text-muted);
}

.voucher-page .voucher-radio-card:has(input:checked),
.voucher-page .voucher-group-options label:has(input:checked) {
    border-color: var(--senior-primary);
    background: rgba(255, 107, 53, 0.08);
}

/* Alerts: friendly, high contrast */
.voucher-page .voucher-alert {
    font-size: var(--senior-font-sm);
    padding: var(--senior-space-lg);
    border-radius: 12px;
    margin-bottom: var(--senior-space-lg);
}

.voucher-page .voucher-alert-error {
    background: #FFF5F5;
    border: 2px solid #dc3545;
    color: #721c24;
}

/* Upgrade page senior overrides */
.voucher-page .voucher-reservation-summary,
.voucher-page .voucher-upgrade-card {
    background: var(--senior-card-bg);
    border: 2px solid var(--senior-border);
    color: var(--senior-text);
}

.voucher-page .voucher-reservation-summary-heading,
.voucher-page .voucher-upgrade-section-header {
    color: var(--senior-text);
}

.voucher-page .voucher-reservation-free,
.voucher-page .voucher-reservation-check {
    color: var(--senior-success);
}

.voucher-page .voucher-upgrade-card--selected {
    border-color: var(--senior-success);
    background: rgba(40, 167, 69, 0.08);
}

.voucher-page .voucher-upgrade-card-title,
.voucher-page .voucher-reservation-show {
    color: var(--senior-text);
}

.voucher-page .voucher-upgrade-card-price:not(.voucher-upgrade-card-price--free) {
    background: rgba(255, 215, 0, 0.2);
    border-color: var(--senior-accent);
    color: #856404;
}

.voucher-page .voucher-upgrade-card-price--free {
    background: rgba(40, 167, 69, 0.15);
    border-color: var(--senior-success);
    color: #155724;
}

.voucher-page .voucher-upgrade-card-cta {
    border-color: var(--senior-accent);
    color: #856404;
    min-height: var(--senior-btn-height-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Confirmation page */
.voucher-page .voucher-trust-indicators span {
    color: var(--senior-success);
}

/* Spacing between sections */
.voucher-page .voucher-form .voucher-field {
    margin-bottom: var(--senior-space-lg);
}

.voucher-page .voucher-actions {
    gap: var(--senior-space-md);
    margin-top: var(--senior-space-xl);
}

/* Divider */
.voucher-page .voucher-upgrade-divider,
.voucher-page .voucher-divider {
    border-color: var(--senior-border);
    margin: var(--senior-space-xl) 0;
}

/* Show selection: sticky summary must be readable (light bg, dark text) */
.voucher-page .voucher-show-selection-header .voucher-show-selection-summary {
    font-size: var(--senior-font-base);
    color: var(--senior-text);
}

.voucher-page .voucher-show-selection-header .voucher-ticket-count {
    color: var(--senior-primary);
}

.voucher-page .voucher-show-selection-header .voucher-show-selection-title {
    font-size: var(--senior-font-lg);
    color: var(--senior-text);
}

.voucher-page .voucher-show-selection-sticky {
    background: var(--senior-card-bg);
    border-bottom: 2px solid var(--senior-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.voucher-page .voucher-show-selection-sticky .voucher-title--compact,
.voucher-page .voucher-show-selection-sticky .voucher-title {
    color: var(--senior-text);
    font-size: var(--senior-font-lg);
}

.voucher-page .voucher-show-selection-sticky .voucher-intro--compact,
.voucher-page .voucher-show-selection-sticky .voucher-intro {
    color: var(--senior-text);
    font-size: var(--senior-font-sm);
}

.voucher-page .voucher-show-selection-sticky .voucher-intro--compact strong,
.voucher-page .voucher-show-selection-sticky .voucher-intro strong {
    color: var(--senior-text);
}

.voucher-page .voucher-choose-datetime-show-title {
    color: var(--senior-text);
}

.voucher-page .voucher-choose-datetime-btn {
    background: var(--senior-card-bg);
    color: var(--senior-text);
    border: 2px solid var(--senior-border);
}

.voucher-page .voucher-choose-datetime-btn:hover {
    background: rgba(255, 107, 53, 0.08);
    border-color: var(--senior-primary);
}

.voucher-page .voucher-choose-datetime-select {
    color: var(--senior-primary);
}