/* Payment Landing Page Enhancements */

/* Input focus effects */
#checkout-form input:focus {
    outline: none;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Button hover effect */
#checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

#checkout-button:active {
    transform: translateY(0);
}

#checkout-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* Pricing card animation on scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricing-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Feature list item animation */
.pricing-card ul li {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.pricing-card ul li:nth-child(1) { animation-delay: 0.1s; }
.pricing-card ul li:nth-child(2) { animation-delay: 0.2s; }
.pricing-card ul li:nth-child(3) { animation-delay: 0.3s; }
.pricing-card ul li:nth-child(4) { animation-delay: 0.4s; }
.pricing-card ul li:nth-child(5) { animation-delay: 0.5s; }



/* Smooth transitions for all interactive elements */
#checkout-form input,
#checkout-button {
    transition: all 0.3s ease !important;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#checkout-button.loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pricing-card {
        padding: 2rem 1.5rem !important;
    }
    
    .price {
        font-size: 3rem !important;
    }
}

/* Success/Error message animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#loading-message,
#error-message {
    animation: slideDown 0.4s ease-out;
}