/* Event Check-In System - Minimal Custom Styles */
/* Основные стили обеспечиваются Tailwind CSS */

/* Дополнительные утилиты для QR reader */
#qr-reader video {
    border-radius: 0.75rem;
}

/* Модальное окно */
#scan-result-modal .bg-white {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-out;
}

#scan-result-modal .bg-white.scale-100 {
    transform: scale(1);
}

#scan-result-modal .bg-white.opacity-100 {
    opacity: 1;
}

/* Стили для печати QR кода */
@media print {
    body * {
        visibility: hidden;
    }
    
    #event-checkin-success,
    #event-checkin-success * {
        visibility: visible;
    }
    
    #event-checkin-success {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 40px;
    }
    
    #event-checkin-success button {
        display: none;
    }
    
    #qr-code-display img {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Анимации для плавных переходов */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Скрытие элементов с анимацией */
.hidden {
    display: none;
}

/* Анимация для уведомлений */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out;
}

/* Анимация спиннера */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}