/* Advanced Styling as requested */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2B9720;
    color: #ffffff;
    border-radius: 8px; /* specific ask */
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #227819; /* Darker */
    box-shadow: 0 4px 10px rgba(43, 151, 32, 0.2); /* Subtle shadow */
    transform: translateY(-2px);
}

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* Skeleton animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #f4f4f4 8%, #e0e0e0 18%, #f4f4f4 33%);
    background-size: 1000px 100%;
}

/* Flying item to cart animation */
.flying-item {
    position: fixed;
    z-index: 9999;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Modal Open state classes */
.modal-open { opacity: 1 !important; pointer-events: auto !important; }
.modal-open #modalContent { transform: scale(1) !important; }

/* Toast animations */
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
.toast-enter { animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.toast-leave { animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }