/* Reward Categories */
.reward-categories {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reward-categories::-webkit-scrollbar {
    display: none;
}

.category-btn {
    @apply px-6 py-2 rounded-full text-sm font-medium transition-all duration-200;
    @apply text-gray-600 hover:text-purple-600 hover:bg-purple-50;
    white-space: nowrap;
}

.category-btn.active {
    @apply bg-purple-600 text-white hover:text-white hover:bg-purple-700;
}

/* Featured Reward */
.featured-reward {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

.featured-reward:hover {
    transform: translateY(-4px);
}

/* Reward Cards */
.reward-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300;
    transform: translateY(0);
}

.reward-card:hover {
    transform: translateY(-4px);
    @apply shadow-xl;
}

.reward-image {
    @apply h-48 w-full object-cover transition-transform duration-300;
}

.reward-card:hover .reward-image {
    transform: scale(1.05);
}

/* Points Badge */
.points-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    @apply bg-purple-100 text-purple-800;
}

.points-badge.affordable {
    @apply bg-green-100 text-green-800;
}

.points-badge.expensive {
    @apply bg-red-100 text-red-800;
}

/* Redemption History */
.history-item {
    @apply px-6 py-4 bg-white transition-colors duration-200;
}

.history-item:hover {
    @apply bg-gray-50;
}

.history-status {
    @apply px-2 py-1 text-xs font-medium rounded-full;
}

.history-status.completed {
    @apply bg-green-100 text-green-800;
}

.history-status.pending {
    @apply bg-yellow-100 text-yellow-800;
}

.history-status.expired {
    @apply bg-red-100 text-red-800;
}

/* Modal Animation */
.modal-enter {
    animation: modalEnter 0.3s ease-out forwards;
}

.modal-leave {
    animation: modalLeave 0.3s ease-out forwards;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalLeave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Reward Timer */
.reward-timer {
    font-variant-numeric: tabular-nums;
}

/* Confetti Animation */
@keyframes confetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confetti 5s ease-in-out infinite;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .featured-reward {
        text-align: center;
    }
    
    .reward-card .reward-image {
        height: 200px;
    }
}