.ticket-scan-page {
    .scanner-result-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: $body-bg;
        color: $body-color;
        overflow-y: auto;
        padding: 0;
    
        [data-bs-theme="dark"] & {
            background: $body-bg-dark;
            color: $body-color-dark;
        }
    }
    
    .scanner-event-header {
        color: $white;
        font-size: 2.2rem;
        font-weight: 700;
        text-align: center;
        padding: 2rem 1rem 1.5rem 1rem;
        border-radius: 0 0 24px 24px;
    }
    
    .scanner-ticket-block {
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .scanner-ticket-badge {
        display: inline-block;
        background: $dark;
        color: $white;
        border-radius: 16px;
        padding: 0.4em 1.5em;
        font-size: 1.3rem;
        font-weight: 600;
    
        [data-bs-theme="dark"] & {
            background: $dark-dark;
            color: $body-bg-dark;
        }
    }
    
    .scanner-attendee-list {
        margin-top: 1.2rem;
        margin-bottom: 1.2rem;
        display: inline-block;
        text-align: center;
    }
    
    .scanner-attendee-name {
        font-size: 2rem;
        font-weight: 600;
        text-align: left;
        color: $body-color;
    
        [data-bs-theme="dark"] & {
            color: $body-color-dark;
        }
    }
    
    .scanner-attendee-checkin {
        font-size: 1.2rem;
        color: $gray-600;
        margin-top: 0.3rem;
        font-weight: 400;
    
        [data-bs-theme="dark"] & {
            color: $gray-300-dark;
        }
    
        i {
            margin-right: 0.5rem;
            color: $gray-500;
    
            [data-bs-theme="dark"] & {
                color: $gray-400-dark;
            }
        }
    }
    
    .scanner-customer-block {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .scanner-customer-badge {
        display: inline-block;
        background: $light-secondary;
        color: $body-color;
        border-radius: 12px;
        padding: 0.3em 1.2em;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.7rem;
    
        [data-bs-theme="dark"] & {
            background: $dark-secondary;
            color: $body-color-dark;
        }
    }
    
    .scanner-customer-name {
        font-size: 1.3rem;
        font-weight: 500;
        color: $body-color;
    
        [data-bs-theme="dark"] & {
            color: $body-color-dark;
        }
    }
    
    .scanner-customer-email {
        font-size: 1.1rem;
        color: $gray-600;
        margin-bottom: 0.2em;
    
        [data-bs-theme="dark"] & {
            color: $gray-300-dark;
        }
    }
    
    .scanner-checkin-status-bar {
        background: $secondary;
        color: $white;
        border-radius: 16px;
        padding: 1.2rem 0.5rem 0.7rem 0.5rem;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        position: fixed;
        left: 5vw;
        right: 5vw;
        bottom: 3vw;
        margin: 0 auto;
        box-shadow: $box-shadow-smooth-md;
        display: flex;
        flex-direction: column;
        align-items: center;
    
        [data-bs-theme="dark"] & {
            background: $dark-secondary;
            box-shadow: $box-shadow-dark;
        }
    }
    
    .scanner-checkin-status-text {
        font-size: 1.3em;
        font-weight: 700;
        margin-bottom: 0.2em;
    }
    
    .scanner-checkin-time {
        font-size: 1.1em;
        font-weight: 400;
        letter-spacing: 0.5px;
    }
    
    .scanner-error-message {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 2rem;
        font-weight: bold;
        color: $danger;
    
        [data-bs-theme="dark"] & {
            color: $dark-danger;
        }
    }
    
    // Check-in mode toggle buttons - ensure white text when selected
    #scan-mode-toggle {
        .btn-check:checked + .btn-outline-primary {
            color: $white !important;
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
    
            i {
                color: $white !important;
            }
    
            &:hover {
                color: $white !important;
                background-color: var(--bs-primary) !important;
                border-color: var(--bs-primary) !important;
            }
        }
    }
    
    @media (max-width: 768px) {
        .scanner-attendee-name {
            font-size: 1.2rem;
        }
        .scanner-event-header {
            font-size: 1.5rem;
        }
    }
    
    .qrcode-stream-camera {
        border-radius: $border-radius !important;
    }
}