/* Stili personalizzati aggiuntivi per Tailwind CSS */

/* Stili per i filtri eventi */
.filter-btn.active {
    @apply bg-primary text-white;
}

.filter-btn:not(.active):hover {
    @apply bg-gray-100;
}

/* Stili per le card */
.event-card, .reward-card {
    @apply border border-gray-200;
}

/* Stili per le notifiche */
.notification {
    @apply fixed bottom-5 left-5 z-50 max-w-sm p-4 text-sm font-semibold text-white border border-gray-200;
}

.notification.info {
    @apply bg-blue-600;
}

.notification.success {
    @apply bg-green-600;
}

.notification.warning {
    @apply bg-yellow-600;
}

.notification.error {
    @apply bg-red-600;
}

/* Stili per il modal */
.modal-overlay {
    @apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;
}

.modal-content {
    @apply bg-white p-8 text-center max-w-md mx-5 border border-gray-200;
}

/* Focus states per accessibilità */
button:focus,
a:focus {
    @apply outline-none ring-2 ring-primary ring-offset-2;
}

/* Miglioramenti per la tipografia */
.text-balance {
    text-wrap: balance;
}

/* Stili per gli stati di caricamento dei bottoni */
.btn-loading {
    @apply relative text-transparent;
}

.btn-loading::after {
    @apply absolute w-4 h-4 top-1/2 left-1/2 -ml-2 -mt-2 border-2 border-white rounded-full border-t-transparent;
    content: '';
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* Responsive utilities aggiuntive */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}