/* assets/style.css */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Enhanced Input Visibility */
.input-premium {
    transition: all 0.2s ease;
    border: 1px solid #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.input-premium:focus {
    outline: none; 
    border-color: #1e3a8a; 
    background-color: #fff; 
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
}
.input-premium:not(:placeholder-shown) {
    border-color: #94a3b8; 
    background-color: #fff;
}

/* Validation Error Style */
.input-error {
    border-color: #ef4444 !important; 
    background-color: #fef2f2 !important; 
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Chrome autofill fix */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    border: 1px solid #cbd5e1 !important;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Stepper Logic */
.step-indicator.active div:first-child { background-color: #1e3a8a; color: white; border-color: #1e3a8a; box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2); }
.step-indicator.active span { color: #1e3a8a !important; }
.step-indicator.completed div:first-child { background-color: #d4af37; color: white; border-color: #d4af37; content: "✓"; }

/* Grid Button Compact & Stylish */
.donation-option + div {
    transition: all 0.2s ease;
    border-width: 1px;
    background-color: #ffffff;
}
.donation-option + div:hover {
    border-color: #1e3a8a;
    background-color: #f8fafc;
}
.donation-option:checked + div {
    background-color: #1e3a8a; 
    border-color: #1e3a8a; 
    color: white !important;
    transform: translateY(-2px); 
    box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.3);
}
.donation-option:checked + div * { color: white !important; }

/* Image Oval Mask for Raffle */
.img-oval {
    border-radius: 50%;
}

/* Stripe */
.StripeElement { width: 100%; padding: 10px; }

/* Loader */
.loader {
    border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 2px solid white;
    width: 16px; height: 16px; animation: spin 0.8s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes slideDown { from { opacity: 0; height: 0; } to { opacity: 1; height: auto; } }
.animate-slide-down { animation: slideDown 0.3s ease-out forwards; }

/* Slider Contribution Mobile Fixes */
.slider-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.slider-container::-webkit-scrollbar {
    display: none;
}

/* Glassmorphism utilities */
.backdrop-blur-md { backdrop-filter: blur(12px); }

/* --- NEW CONTRIBUTION CARDS STYLES --- */
.contribution-card .active-ring {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the card has the 'active' class (added by JS), we style the inner part and the ring */
.contribution-card.active .contribution-card-inner {
    border-color: #d4af37;
    background: linear-gradient(to bottom, #fffaf0, #ffffff); /* Subtle gold tint */
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.15), 0 10px 10px -5px rgba(212, 175, 55, 0.04);
}


/* Change button style when active */
.contribution-card.active .card-btn-label {
    background-color: #d4af37;
    border-color: #d4af37;
    color: white;
}