.dark {
            color-scheme: dark;
        }

        .theme-transition {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cart-item {
            transition: all 0.3s ease;
        }

        .cart-item:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .quantity-btn {
            transition: all 0.2s ease;
        }

        .quantity-btn:active {
            transform: scale(0.9);
        }

        .remove-btn {
            transition: all 0.3s ease;
        }

        .remove-btn:hover {
            transform: rotate(90deg);
        }
.dark {
            color-scheme: dark;
        }

        .theme-transition {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .delivery-option {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .delivery-option.selected {
            border-color: #667eea;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }

        .delivery-option:hover {
            border-color: #667eea;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .product-item {
            transition: all 0.3s ease;
        }

        .product-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
 .dark {
            color-scheme: dark;
        }

        input[type="radio"]:checked + label {
            border-color: #667eea;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }

        input[type="radio"]:checked + label .radio-dot {
            background-color: #667eea;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
 .theme-transition {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes checkmark {
            0% {
                stroke-dashoffset: 100;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes scaleIn {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .success-checkmark {
            animation: scaleIn 0.5s ease-out;
        }

        .checkmark-path {
            stroke-dasharray: 100;
            animation: checkmark 0.5s ease-out 0.3s forwards;
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        .delay-1 { animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; }
        .delay-2 { animation-delay: 0.4s; opacity: 0; animation-fill-mode: forwards; }
        .delay-3 { animation-delay: 0.6s; opacity: 0; animation-fill-mode: forwards; }
        .delay-4 { animation-delay: 0.8s; opacity: 0; animation-fill-mode: forwards; }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #667eea;
            position: absolute;
            animation: confetti-fall 3s linear infinite;
        }

        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
.alert.alert-danger {
    background: #ffbdbd;
    border: 1px solid #9f0000;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.alert.alert-danger ul li {
    list-style: nu;
    color: #ab0000;
}
.alert.alert-danger ul {
    padding: 0 0 0 20px;
}