---

function changeQuantity(id, delta) {
    const item = cart.find(i => Number(i.id) === Number(id));
    if (item) {
        item.quantity += delta;
        if (item.quantity <= 0) {
            cart = cart.filter(i => Number(i.id) !== Number(id));
        }
        if (typeof saveAndRefresh === 'function') {
            saveAndRefresh();
        } else {
            localStorage.setItem('moto_cart', JSON.stringify(cart));
            updateCart();
        }
    }
}

function saveAndRefresh() {
    localStorage.setItem('moto_cart', JSON.stringify(cart));
    updateCart();
}

function updateCart() {
    const itemsContainer = document.getElementById('cart-items');
    const countBadge = document.getElementById('cart-count');
    const totalContainer = document.getElementById('cart-total');
    const checkoutBtn = document.getElementById('checkout-btn');

    if (!itemsContainer) return;

    itemsContainer.innerHTML = '';
    let total = 0;
    let count = 0;

    cart.forEach(item => {
        total += item.price * item.quantity;
        count += item.quantity;

        const row = document.createElement('div');
        row.className = 'flex items-center justify-between bg-slate-900 p-4 rounded-xl border border-slate-800/40 mb-2';
        
        row.innerHTML = `
            <div class="flex-1 min-w-0 pr-2">
                <h4 class="text-white font-bold text-sm truncate">${item.name}</h4>
                <p class="text-amber-500 text-xs mt-1">${(item.price * item.quantity).toLocaleString()} ₽</p>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" onclick="changeQuantity(${item.id}, -1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded hover:text-white transition font-bold cursor-pointer">-</button>
                <span class="text-sm font-bold text-white min-w-[16px] text-center">${item.quantity}</span>
                <button type="button" onclick="changeQuantity(${item.id}, 1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded hover:text-white transition font-bold cursor-pointer">+</button>
            </div>
        `;
        itemsContainer.appendChild(row);
    });

    if (countBadge) countBadge.innerText = count;
    if (totalContainer) totalContainer.innerText = total.toLocaleString() + ' ₽';
    if (checkoutBtn) checkoutBtn.disabled = cart.length === 0;
}

function openCheckout() {
    if (typeof toggleCart === 'function') {
        toggleCart();
    }
    
    let modal = document.getElementById('checkout-modal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'checkout-modal';
        document.body.appendChild(modal);
    }
    
    modal.className = "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4 text-slate-100 font-sans";

    let finalCount = 0;
    let finalPrice = 0;
    
    cart.forEach(item => {
        finalCount += item.quantity;
        finalPrice += item.price * item.quantity;
    });

    modal.innerHTML = `
        <div class="bg-slate-900 border border-slate-800 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl">
            <div class="bg-slate-950 px-6 py-4 border-b border-slate-800 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-file-invoice-dollar text-amber-500 text-xl"></i>
                    <h2 class="text-xl font-black text-white uppercase tracking-tight">Оформление предзаказа</h2>
                </div>
                <button type="button" onclick="closeCheckoutModal()" class="text-slate-400 hover:text-white transition cursor-pointer text-xl p-1">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <form id="checkout-form" onsubmit="submitOrder(event)" class="p-6 space-y-4">
                <div class="bg-slate-950 p-4 rounded-xl border border-slate-800/50 text-sm">
                    <div class="flex justify-between mb-1">
                        <span class="text-slate-400">Выбрано товаров:</span>
                        <span class="text-white font-bold">${finalCount} шт.</span>
                    </div>
                    <div class="flex justify-between items-center border-t border-slate-800/60 pt-2 mt-2">
                        <span class="text-slate-400 font-bold">Итого к оплате:</span>
                        <span class="text-amber-500 font-black text-lg">${finalPrice.toLocaleString()} ₽</span>
                    </div>
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5 tracking-wider">Ваше имя *</label>
                    <input type="text" required placeholder="Иван Иванов" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition">
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5 tracking-wider">Номер телефона *</label>
                    <input type="tel" required placeholder="+7 (999) 000-00-00" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition">
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5 tracking-wider">Адрес доставки *</label>
                    <input type="text" required placeholder="г. Мариинск, ул. Ленина, д. 45" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition">
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5 tracking-wider">Способ оплаты *</label>
                    <select required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition cursor-pointer">
                        <option value="" disabled selected>Выберите способ оплаты...</option>
                        <option value="card">Банковской картой онлайн</option>
                        <option value="sbp">Система быстрых платежей (СБП)</option>
                        <option value="credit">Оформление в мотокредит</option>
                        <option value="cash">При получении в шоуруме</option>
                    </select>
                </div>

                <div class="pt-2">
                    <label class="flex items-start gap-3 cursor-pointer group select-none">
                        <input type="checkbox" required class="mt-1 accent-amber-500 h-4 w-4 rounded border-slate-800 bg-slate-950 text-amber-500 cursor-pointer">
                        <span class="text-xs text-slate-400 group-hover:text-slate-300 transition leading-relaxed">
                            Я даю согласие на обработку моих персональных данных в соответствии с Федеральным законом № 152-ФЗ и соглашаюсь с условиями публичной оферты.
                        </span>
                    </label>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 py-3.5 rounded-xl font-black uppercase tracking-wider text-sm transition cursor-pointer shadow-lg shadow-amber-500/10">
                        Подтвердить предзаказ
                    </button>
                </div>
            </form>
        </div>
    `;
    modal.classList.remove('hidden');
}

function closeCheckoutModal() {
    const modal = document.getElementById('checkout-modal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

function submitOrder(event) {
    if (event) event.preventDefault();
    alert('Успешно! Ваш предзаказ принят. Наш менеджер свяжется с вами для подтверждения адреса доставки.');
    cart = [];
    saveAndRefresh();
    closeCheckoutModal();
}