/* Donation Cart System */

.donation-card {
    @apply transition-all duration-300 cursor-pointer;
}

.donation-card:hover {
    @apply -translate-y-2 shadow-xl;
}

.donation-card.selected {
    @apply ring-2 ring-blue-500 shadow-xl;
}

.custom-amount-input {
    @apply transition-all duration-300;
}

.custom-amount-input:focus {
    @apply ring-2 ring-blue-500;
}

.cart-item {
    @apply flex items-center justify-between p-4 bg-blue-50 rounded-xl mb-3 animate-slide-in;
}

.cart-item-remove {
    @apply w-8 h-8 rounded-full bg-red-500/20 text-red-600 flex items-center justify-center hover:bg-red-500/40 transition-colors duration-200 cursor-pointer;
}

.total-box {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 p-6 rounded-2xl text-white shadow-xl sticky top-20;
}

.total-amount {
    @apply text-3xl font-bold;
}

.payment-method-btn {
    @apply w-full p-4 rounded-xl border-2 border-gray-200 transition-all duration-300 text-left font-semibold text-gray-700 flex items-center gap-3;
}

.payment-method-btn:hover {
    @apply border-blue-500 bg-blue-50;
}

.payment-method-btn.selected {
    @apply border-blue-600 bg-blue-100 text-blue-900;
}

/* Project Option Button - Active State */
.project-option-btn.active {
    @apply border-blue-500 bg-blue-50 shadow-md;
}

.payment-icon {
    @apply text-2xl;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

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

@keyframes pulse-ring {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

.pulse-ring {
    animation: pulse-ring 2s infinite;
}

.donation-presets {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4 mb-8;
}

.donation-amount-card {
    @apply p-4 rounded-xl border-2 border-gray-200 text-center transition-all duration-300 cursor-pointer;
}

.donation-amount-card:hover {
    @apply border-blue-500 shadow-lg;
}

.donation-amount-card.active {
    @apply border-blue-600 bg-blue-50 shadow-xl;
}

.donation-amount-card .amount {
    @apply text-2xl font-bold text-gray-900 mb-1;
}

.donation-amount-card .label {
    @apply text-xs text-gray-600;
}

/* Project Options */
.project-options {
    @apply animate-fade-in-up;
}

.project-option-btn {
    @apply transition-all duration-300 transform hover:scale-105;
}

.project-option-btn.active {
    @apply border-blue-600 bg-blue-100 border-2;
}

.project-option-btn:not(.active):hover {
    @apply border-blue-500 bg-blue-50;
}

/* Summary Card */
.summary-card {
    @apply bg-white rounded-2xl p-6 shadow-lg border border-gray-100;
}

.summary-item {
    @apply flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0;
}

.summary-label {
    @apply text-gray-600;
}

.summary-value {
    @apply font-semibold text-gray-900;
}

.summary-total {
    @apply flex justify-between items-center py-4 bg-blue-50 px-4 rounded-xl mt-4;
}

.summary-total-label {
    @apply text-lg font-bold text-gray-900;
}

.summary-total-amount {
    @apply text-2xl font-bold text-blue-600;
}

/* Responsive */
@media (max-width: 768px) {
    .total-box {
        @apply sticky static;
    }
    
    .donation-presets {
        @apply grid-cols-2;
    }
}

/* Fade in animation for project options */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out;
}

/* Tailwind safelist for dynamic colors */
/* These colors are used dynamically and need to be in safelist */
/*
    cyan: bg-cyan-50, text-cyan-600
    indigo: bg-indigo-50, text-indigo-600
    rose: bg-rose-50, text-rose-600
    orange: bg-orange-50, text-orange-600
    emerald: bg-emerald-50, text-emerald-600
*/