<?php 

require "connection.php";
                $userId = 1;

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ═══ SEO META TAGS — Auto-generated by seo-optimize.js ═══ -->
    <title>Dropti Zeylona</title>
    <meta name="description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta name="keywords" content="Ceylon tea, organic tea, Sri Lanka tea">
    <meta name="author" content="Dropti Zeylona">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#1A3021">
    <link rel="canonical" href="http://localhost/dropti_zeylona_up/pages/cart1.php">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://localhost/dropti_zeylona_up/pages/cart1.php">
    <meta property="og:title" content="Dropti Zeylona">
    <meta property="og:description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta property="og:image" content="http://localhost/dropti_zeylona_up/pages/dropti2.png">
    <meta property="og:site_name" content="Dropti Zeylona">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Dropti Zeylona">
    <meta name="twitter:description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta name="twitter:image" content="http://localhost/dropti_zeylona_up/pages/dropti2.png">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "http://localhost/dropti_zeylona_up/pages/#organization",
      "name": "Dropti Zeylona",
      "url": "http://localhost/dropti_zeylona_up/pages",
      "logo": {
        "@type": "ImageObject",
        "url": "http://localhost/dropti_zeylona_up/pages/dropti2.png"
      },
      "email": "info@droptiZeylona.com",
      "sameAs": [
        "https://www.instagram.com/droptiZeylona",
        "https://www.facebook.com/droptiZeylona"
      ]
    },
    {
      "@type": "WebPage",
      "@id": "http://localhost/dropti_zeylona_up/pages/cart1.php",
      "url": "http://localhost/dropti_zeylona_up/pages/cart1.php",
      "name": "Dropti Zeylona",
      "description": "Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.",
      "isPartOf": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#website"
      },
      "publisher": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#organization"
      },
      "inLanguage": "en-US",
      "image": "http://localhost/dropti_zeylona_up/pages/dropti2.png"
    }
  ]
}
    </script>
    <!-- ═════════════════════════════════════════════════════ -->
    
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdn.tailwindcss.com"></script>

    <link href="test.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-blue: #1e88e5;
            --secondary-blue: #64b5f6;
            --dark-blue: #0d47a1;
            --light-blue: #bbdefb;
            --white: #ffffff;
            --gray: #f5f5f5;
            --dark-gray: #757575;
        }

        /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        } */

        body {
            background-color: var(--gray);
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

     */

        .cart-icon {
            position: relative;
            cursor: pointer;
        }

        .cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--dark-blue);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }

        .page-title {
            margin: 2rem 0;
            color: var(--dark-blue);
            text-align: center;
            font-size: 2rem;
        }

        .cart-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }

        .cart-items {
            background-color: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .cart-summary {
            background-color: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            height: fit-content;
        }

        .cart-item {
            display: grid;
            grid-template-columns: 100px 2fr 1fr 1fr;
            gap: 20px;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--light-blue);
            animation: fadeIn 0.5s ease;
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .item-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

        .item-image:hover {
            transform: scale(1.05);
        }

        .item-details h3 {
            margin-bottom: 5px;
            color: var(--dark-blue);
        }

        .item-details p {
            color: var(--dark-gray);
            margin-bottom: 5px;
        }

        .item-price {
            font-weight: bold;
            color: var(--dark-blue);
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .quantity-btn {
            background-color: var(--light-blue);
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quantity-btn:hover {
            background-color: var(--secondary-blue);
            color: var(--white);
        }

        .quantity {
            font-weight: bold;
        }

        .remove-btn {
            color: red;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 1rem;
            transition: transform 0.3s ease;
        }

        .remove-btn:hover {
            transform: scale(1.2);
        }

        .summary-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--dark-blue);
        }

        .summary-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .summary-total {
            font-weight: bold;
            font-size: 1.2rem;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--light-blue);
        }

        .checkout-btn {
            background-color: var(--primary-blue);
            color: var(--white);
            border: none;
            padding: 15px;
            border-radius: 5px;
            width: 100%;
            margin-top: 20px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .checkout-btn:hover {
            background-color: var(--dark-blue);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
        }

        .continue-shopping {
            display: block;
            text-align: center;
            margin-top: 10px;
            color: var(--primary-blue);
            text-decoration: none;
        }

        .continue-shopping:hover {
            text-decoration: underline;
        }

        .empty-cart {
            text-align: center;
            padding: 40px;
        }

        .empty-cart i {
            font-size: 5rem;
            color: var(--light-blue);
            margin-bottom: 20px;
        }

        .empty-cart p {
            margin-bottom: 20px;
            color: var(--dark-gray);
        }

        .btn-shop-now {
            background-color: var(--primary-blue);
            color: var(--white);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-shop-now:hover {
            background-color: var(--dark-blue);
        }

        .coupon-input {
            display: flex;
            margin-top: 20px;
            gap: 10px;
        }

        .coupon-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--light-blue);
            border-radius: 5px;
        }

        .coupon-input button {
            background-color: var(--secondary-blue);
            color: var(--white);
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .coupon-input button:hover {
            background-color: var(--primary-blue);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .pulse {
            animation: pulse 1s infinite;
        }

        @media (max-width: 768px) {
            .cart-container {
                grid-template-columns: 1fr;
            }

            .cart-item {
                grid-template-columns: 80px 1fr;
                grid-template-rows: auto auto;
                gap: 10px;
                padding: 10px 0;
            }

            .item-image {
                grid-row: span 2;
                width: 80px;
                height: 80px;
            }

            .item-details {
                grid-column: 2;
            }

            .item-actions {
                grid-column: span 2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
            }

            .quantity-selector {
                order: 1;
            }

            .item-price {
                order: 2;
            }
        }

    </style>

    
  <style>
/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* Navbar Container */
#mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.7); /* semi-transparent */
    backdrop-filter: blur(10px);
    transition: all 0.5s ease;
}

/* Inner Container */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

/* Logo */
.logo img {
    height: 40px;
    width: auto;
}

/* Desktop Menu */
.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #d1d5db; /* gray-300 */
    font-weight: 500;
    transition: color 0.3s;
    padding-bottom: 4px;
}

.nav-links a:hover {
    color: #f87171; /* red-400 */
}

.nav-links a.active {
    color: #ef4444; /* red-500 */
    border-bottom: 2px solid #ef4444;
}

/* CTA Button */
.cta-btn {
    background-color: #ef4444;
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    animation: bounceSlow 2s infinite;
}

.cta-btn:hover {
    background-color: #dc2626;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Bounce Animation */
@keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #d1d5db;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: rgba(0,0,0,0.9);
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .nav-links.show {
        display: flex;
    }

    .cta-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }
}
</style>
</head>
<body style="background-color: #000000ff;">

<nav id="mainNav">  

            <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&display=swap" rel="stylesheet">
            <div class="top-bar-container" style="background-color:#fff; color:black; font-weight:bold; height:40px; overflow:hidden; position:relative; text-align:center;"> 
                <div class="top-bar-texts" style="position:absolute; top:0; width:100%;">
                    <div class="top-bar-item">Free Shipping on all orders above $99!</div>
                    <div class="top-bar-item" style="background-color: #000; color: #ffc60bff;">New User 20% OFF!</div>
                    <div class="top-bar-item">Indulge in Pure Relaxation & Luxury With Ceylon Zeylona</div>
                    <div class="top-bar-item" style="background-color: #000; color: #ffc60bff;">Pure Ceylon Luxury HandMade Teas !
                    </div>
                </div>
            </div> 
                
                <style> 
                    .top-bar-item { 
                        height: 40px; 
                        line-height: 40px; 
                        font-size:16px; 
                        font-family: 'Cormorant Garamond', serif; 
                        font-style: italic; 
                        letter-spacing: 0.5px; 
                    } 

                    .top-bar-texts { 
                        animation: vertical-scroll 6s linear infinite; 
                    } 
                    
                    @keyframes vertical-scroll {
                    0%   { transform: translateY(0); }
                    20%  { transform: translateY(0); }
                    30%  { transform: translateY(-40px); }
                    50%  { transform: translateY(-40px); }
                    55%  { transform: translateY(-80px); }
                    70%  { transform: translateY(-80px); }
                    75%  { transform: translateY(-120px); }
                    90%  { transform: translateY(-120px); }
                    100% { transform: translateY(0); }
                    }

                </style>

                <div class="nav-container">
                    <!-- Logo -->
                    <div class="logo">
                        <img src="dropti2.png" alt="SkyLab Logo" style="height: 60px; width: 127px;">
                    </div>

                    <!-- Desktop Links -->
                    <div class="nav-links" id="navLinks">
                        <a href="shop.php">Shop</a>
                        <a href="tea_academy.html">Academy</a>
                        <a href="homepage.html" class="active">Home</a>
                        <a href="blog.html">Blog</a>
                        <a href="about.html">About</a>
                        <a href="cart1.php">Cart</a>

                        <!-- <a href="about.php">About</a> -->
                    </div>

                    <!-- CTA Button -->
                    <!-- <button class="cta-btn"> <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        Create your own Tea
                    </svg></button> -->

                    <style>
                        .own_blend {
                            display: inline-flex;
                            justify-content: center;
                            align-items: center;
                            color: #fff;
                            padding: 5px;
                            width: 185px;
                            height: 40px;
                            border: 1px solid #500331ff;
                            border-radius: 10px;
                            font-weight: 600;
                            position: relative;
                            overflow: hidden;
                            cursor: pointer;
                            transition: transform 0.3s ease, box-shadow 0.4s ease;
                            box-shadow: 0 2px 10px rgba(255, 204, 35, 0.2);
                        }

                        /* Hover transform + shadow */
                        .own_blend:hover {
                            transform: translateY(-3px) scale(1.03);
                            /* box-shadow: 0 5px 22px rgba(255, 204, 35, 0.6), 0 0 12px rgba(255, 202, 27, 0.98) */
                        }

                        /* gold fill layer */
                        .own_blend::before {
                            content: "";
                            position: absolute;
                            top: 100%;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, #c50159ff, #ec016bff, #f5509aff);
                            transition: top 0.5s ease-in-out;
                            border-radius: 10px;
                            z-index: 0;
                            pointer-events: none;
                            mix-blend-mode: lighten; /* ensures text stays visible */
                        }


                        /* fill animation */
                        .own_blend:hover::before {
                            top: 0;
                        }

                        /* text stays on top */
                        .own_blend span {
                            position: relative;
                            z-index: 1;
                            color: #fff; /* always white */
                            transition: color 0.3s ease;
                        }

                            /* medium devices (≤768px) */
                            @media (max-width: 768px) {
                                button.own_blend {
                                    padding: 8px 16px;
                                    font-size: 2px;
                                    width: 125px;
                                    height: 35px;
                                    border: 1px solid #ffcc23ff;
                                    border-radius: 10px;
                                }
                            }

                            /* small devices (≤480px) */
                            @media (max-width: 480px) {
                                button.own_blend {
                                    padding: 6px 12px;
                                    font-size: 12px;
                                }
                            }
                    </style>

                    <!-- <button class="own_blend">Create your own Tea blend</button> -->

                    <a id="btnDiv" class="own_blend">Make My Blend!</a>

                    <script>
                        const btnDiv = document.querySelector('#btnDiv'); 

                        if(window.innerWidth >= 1024){
                            btnDiv.style.display = 'inline-flex';
                        }else{
                            btnDiv.style.display = 'none';
                        }
                    </script>


                    <!-- <button class="hidden sm:hidden md:hidden">Login</button> -->

                    <div class="nav-icons">
                        <!-- Search -->
                        <div class="icon">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                        </div>

                        <!-- Heart -->
                        <!-- <div class="icon">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"></path>
                            </svg>
                        </div> -->

                        <!-- Cart with badge -->
                        <a href="cart1.php">
                            <div class="icon cart cursor-pointer">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="9" cy="21" r="1"></circle>
                                    <circle cx="20" cy="21" r="1"></circle>
                                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                                </svg>

                                <span class="badge">3</span>
                            </div>
                        </a>


                        <!-- User -->
                        <a href="user.php">
                            <div class="icon">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M20 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M4 21v-2a4 4 0 0 1 3-3.87"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
                        </a>
                    </div>

                    <button class="mobile-menu-btn" id="mobileBtn">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>

                </div>           

                <style>
                    .nav-icons {
                        display: flex;
                        gap: 25px;
                        align-items: center;
                    }

                    .icon {
                        position: relative;
                        cursor: pointer;
                    }

                    .cart .badge {
                        position: absolute;
                        top: -6px;
                        right: -10px;
                        background: #e1a100ff;
                        color: white;
                        font-size: 10px;
                        padding: 2px 5px;
                        border-radius: 50%;
                    }

                </style>

            </nav>


        <script>
            // Mobile Menu Toggle
            const mobileBtn = document.getElementById('mobileBtn');
            const navLinks = document.getElementById('navLinks');

            mobileBtn.addEventListener('click', () => {
                navLinks.classList.toggle('show');
            });
        </script> 
        

        <style>
            :root {
                --primary-blue: #1e88e5;
                --secondary-blue: #64b5f6;
                --dark-blue: #0d47a1;
                --light-blue: #bbdefb;
                --white: #ffffff;
                --gray: #f5f5f5;
                --dark-gray: #757575;
            }

            .cart-icon {
                position: relative;
                cursor: pointer;
            }

            .cart-count {
                position: absolute;
                top: -10px;
                right: -10px;
                background-color: var(--dark-blue);
                color: white;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .page-title {
                margin: 2rem 0;
                color: var(--dark-blue);
                text-align: center;
                font-size: 2rem;
            }

            .cart-container {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 20px;
            }

            .cart-items {
                background-color: var(--white);
                border-radius: 10px;
                padding: 20px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            }

            .cart-summary {
                background-color: var(--white);
                border-radius: 10px;
                padding: 20px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                height: fit-content;
            }

            .cart-item {
                display: grid;
                grid-template-columns: 100px 2fr 1fr 1fr;
                gap: 20px;
                align-items: center;
                padding: 15px 0;
                border-bottom: 1px solid var(--light-blue);
                animation: fadeIn 0.5s ease;
            }

            .cart-item:last-child {
                border-bottom: none;
            }

            .item-image {
                width: 100px;
                height: 100px;
                object-fit: cover;
                border-radius: 5px;
                transition: transform 0.3s ease;
            }

            .item-image:hover {
                transform: scale(1.05);
            }

            .item-details h3 {
                margin-bottom: 5px;
                color: var(--dark-blue);
            }

            .item-details p {
                color: var(--dark-gray);
                margin-bottom: 5px;
            }

            .item-price {
                font-weight: bold;
                color: var(--dark-blue);
            }

            .quantity-selector {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .quantity-btn {
                background-color: var(--light-blue);
                border: none;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .quantity-btn:hover {
                background-color: var(--secondary-blue);
                color: var(--white);
            }

            .quantity {
                font-weight: bold;
            }

            .remove-btn {
                color: red;
                cursor: pointer;
                background: none;
                border: none;
                font-size: 1rem;
                transition: transform 0.3s ease;
            }

            .remove-btn:hover {
                transform: scale(1.2);
            }

            .summary-title {
                font-size: 1.5rem;
                margin-bottom: 20px;
                color: var(--dark-blue);
            }

            .summary-line {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
            }

            .summary-total {
                font-weight: bold;
                font-size: 1.2rem;
                margin-top: 20px;
                padding-top: 20px;
                border-top: 1px solid var(--light-blue);
            }

            .checkout-btn {
                background-color: var(--primary-blue);
                color: var(--white);
                border: none;
                padding: 15px;
                border-radius: 5px;
                width: 100%;
                margin-top: 20px;
                font-size: 1rem;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

            .checkout-btn:hover {
                background-color: var(--dark-blue);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
            }

            .continue-shopping {
                display: block;
                text-align: center;
                margin-top: 10px;
                color: var(--primary-blue);
                text-decoration: none;
            }

            .continue-shopping:hover {
                text-decoration: underline;
            }

            .empty-cart {
                text-align: center;
                padding: 40px;
            }

            .empty-cart i {
                font-size: 5rem;
                color: var(--light-blue);
                margin-bottom: 20px;
            }

            .empty-cart p {
                margin-bottom: 20px;
                color: var(--dark-gray);
            }

            .btn-shop-now {
                background-color: var(--primary-blue);
                color: var(--white);
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-shop-now:hover {
                background-color: var(--dark-blue);
            }

            .coupon-input {
                display: flex;
                margin-top: 20px;
                gap: 10px;
            }

            .coupon-input input {
                flex: 1;
                padding: 10px;
                border: 1px solid var(--light-blue);
                border-radius: 5px;
            }

            .coupon-input button {
                background-color: var(--secondary-blue);
                color: var(--white);
                border: none;
                padding: 10px 15px;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .coupon-input button:hover {
                background-color: var(--primary-blue);
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.05);
                }

                100% {
                    transform: scale(1);
                }
            }

            .pulse {
                animation: pulse 1s infinite;
            }

            @media (max-width: 768px) {
                .cart-container {
                    grid-template-columns: 1fr;
                }

                .cart-item {
                    grid-template-columns: 80px 1fr;
                    grid-template-rows: auto auto;
                    gap: 10px;
                    padding: 10px 0;
                }

                .item-image {
                    grid-row: span 2;
                    width: 80px;
                    height: 80px;
                }

                .item-details {
                    grid-column: 2;
                    font-size: 12px;

                }

                .item-price{
                    font-size:  12px;
                }

                .remove-btn{
                    height: 15px;
                    width: 15px;
                }

                .quantity-btn{
                    height: 15px;
                    width: 15px;
                }

                .item-actions {
                    grid-column: span 2;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                }

                .quantity-selector {
                    order: 1;
                }

                .item-price {
                    order: 2;
                }
            }

            

        </style>
    </head>

    <body style="background: #110000; zoom:90%;">
       
        <!-- Header -->
   
<br><br>

        <div class="container">
            <!-- <h3 class="page-title">Your Shopping Cart</h3> -->
            <br>
            <div class="cart-container">
                <div class="cart-items" style="background-color: #000000;">
                    <!-- Cart items will be listed here -->
                <?php 
                    // $cart_rss = Database::search("SELECT *
                    //     FROM cart
                    //     INNER JOIN weight ON cart.weight_weight_id = weight.weight_id
                    //     INNER JOIN product ON cart.product_product_id = product.product_id");
                    // $cart_nums = $cart_rss->num_rows;
                ?>
                <?php 
                    // for($z=0; $z<$cart_num; $z++){
                    //     $cart_datas = $cart_rs->fetch_assoc();
                ?>

                    <!--<div class="cart-item" id="desktop-cart-card">
                        <img src="Addaheading_18.png" alt="Product 1" class="item-image">
                        <div class="item-details">
                            <h5 style="color: #ffd979ff;"><?php echo $cart_data['product_name']; ?></h5>
                            <p style="color: white;">Weight: <?php echo $cart_data['weight_name']; ?> | Brand: Zeylona</p>
                        </div>
                        <div class="quantity-selector">
                            <button class="quantity-btn dec-btn"><i class="fas fa-minus"></i></button>
                            <span class="quantity" style="color: white;"><?php echo $cart_data['cart_qty']; ?></span>
                            <button class="quantity-btn inc-btn"><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="item-price" style="color: #f0c14aff;">$<?php echo $cart_data['cart_price']; ?>   &nbsp; &nbsp; &nbsp;
                            <button class="remove-btn"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                <?php
                    // }
                ?> -->

                <?php 
                // $userId = 1;
                $cart_rs = Database::search("
                    SELECT cart.*, product.product_name, weight.weight_name , weight.price , weight.offer_price ,weight.shipping_fee
                    FROM cart
                    INNER JOIN product ON cart.product_product_id = product.product_id
                    INNER JOIN weight ON cart.weight_weight_id = weight.weight_id
                    WHERE cart.user_id = '$userId'
                ");
                $cart_num = $cart_rs->num_rows;

                $totalItems = 0;
                $subtotal = 0;
                $realprice = 0;
                $tax = $subtotal * 0.05;
                $shippingFee = 0;
                $totalWeight = 0;
                $discount = 0;

                for($z=0; $z<$cart_num; $z++){
                    $cart_data = $cart_rs->fetch_assoc();
                    // $cart_Id = $cart_data['cart_id']; 
                    $quantity = $cart_data['cart_qty'];
                    $price = $cart_data['cart_price'];

                    $totalItems += $quantity;
                    $subtotal += $price;
                    $realpriceForQty = $cart_data['price'] * $quantity;
                    $grandTotal = $subtotal;
                    $shippingFee += $cart_data['shipping_fee'];
                    $totalWeight1 = $cart_data['weight_name'] * $quantity;
                    $totalWeight += $totalWeight1;

                    $discount += $realpriceForQty - $subtotal; 

                ?>

                    <div class="cart-item" id="desktop-cart-card">
                        <img src="Addaheading_18.png" alt="Product 1" class="item-image">
                        <div class="item-details">
                            <h5 style="color: #ffd979ff;"><?php echo $cart_data['product_name']; ?></h5>
                            <p style="color: white;">Weight: <?php echo $cart_data['weight_name']; ?> | Brand: Zeylona</p>
                        </div>

                        <!-- <div class="quantity-selector" data-price="<?php echo $cart_data['offer_price']; ?>">
                            <div class="flex items-center border border-primary-light rounded-lg">
                                <button onclick="decreaseQuantity(this)">-</button>

                                <span class="quantity">
                                    <?php echo $cart_data['cart_qty']; ?>
                                </span>

                                <button onclick="increaseQuantity(this)">+</button>
                            </div>
                        </div> -->

                        <div class="quantity-selector" data-price="<?php echo $cart_data['offer_price']; ?>" > 
                            <div class="flex items-center border border-primary-light rounded-lg" > 
                                <button class="px-4 py-2" onclick="decreaseQuantity(this)">-</button> 
                                <span class="px-4 py-2 font-medium quantity"> 
                                    <?php echo $cart_data['cart_qty']; ?> 
                                </span> 
                                    <button class="px-4 py-2" onclick="increaseQuantity(this)">+</button> 
                            </div> 
                        </div>

                        <div class="item-price" style="color:#f0c14aff;">
                            $
                            <span class="price">
                                <?php echo number_format($cart_data['offer_price'] * $cart_data['cart_qty'], 2); ?>
                            </span>
                            <button class="remove-btn" style="padding-left: 30px;"><i class="fas fa-trash"></i></button>
                        </div>

                        <script>

                            function increaseQuantity(btn) {
                                const box = btn.closest('.quantity-selector');
                                const qtyEl = box.querySelector('.quantity');
                                const priceEl = box.nextElementSibling.querySelector('.price');

                                let qty = parseInt(qtyEl.textContent);
                                let unitPrice = parseFloat(box.dataset.price);

                                qty++;
                                qtyEl.textContent = qty;
                                priceEl.textContent = (qty * unitPrice).toFixed(2);

                                updateCartDB(qty, unitPrice);

                            }


                            function decreaseQuantity(btn) {
                                const box = btn.closest('.quantity-selector');
                                const qtyEl = box.querySelector('.quantity');
                                const priceEl = box.nextElementSibling.querySelector('.price');

                                let qty = parseInt(qtyEl.textContent);
                                let unitPrice = parseFloat(box.dataset.price);

                                if (qty > 1) {
                                    qty--;
                                    qtyEl.textContent = qty;
                                    priceEl.textContent = (qty * unitPrice).toFixed(2);
                                    updateCartDB(qty, unitPrice);
                                }
                            }

                            function updateCartDB(qty, unitPrice) {
                                let cartId = "<?php echo $cart_data['cart_id'] ?>";
                                // let cartId = btn.closest('.quantity-selector').dataset.cart;
                                alert("Cart ID: " + cartId);
                                alert("Qty: " + qty);
                                alert("Unit Price: " + unitPrice);
                            }

                        </script>

                        <!-- <div class="item-price" style="color: #f0c14aff;">$<?php echo "$new_cart_price" ?>   &nbsp; &nbsp; &nbsp;
                            <button class="remove-btn"><i class="fas fa-trash"></i></button>
                        </div> -->
                    </div>

                <?php
                } // end for loop
                ?>

                
<div class="summary">
    <p>Subtotal: $<span id="subtotal">0</span></p>
    <p>Total Qty: <span id="totalQty">0</span></p>
</div>
                    <!-- <script>
                        const card = document.getElementById("mobile-cart-card");
                        // const card2 = document.getElementById("desktop-cart-card");

                        if (window.innerWidth <= 768) {
                        // card.style.display = "done";   // mobile 
                        card2.style.display = "none";
                        } else {
                        // card.style.display = "none";   // desktop 
                        card2.style.display = "done";
                        }
                    </script> -->


                    <!-- <div class="cart-item">
                        <img src="img/product3.jpg" alt="Product 1" class="item-image">
                        <div class="item-details">
                            <h5>Premium Bluetooth Headphones</h5>
                            <p>Color: Black | Brand: SoundMax</p>
                        </div>
                        <div class="quantity-selector">
                            <button class="quantity-btn dec-btn"><i class="fas fa-minus"></i></button>
                            <span class="quantity">1</span>
                            <button class="quantity-btn inc-btn"><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="item-price">$129.99</div>
                        <button class="remove-btn"><i class="fas fa-trash"></i></button>
                    </div>

                    <div class="cart-item">
                        <img src="img/product4.jpg" alt="Product 2" class="item-image">
                        <div class="item-details">
                            <h5>Wireless Charging Pad</h5>
                            <p>Color: White | Brand: TechCharge</p>
                        </div>
                        <div class="quantity-selector">
                            <button class="quantity-btn dec-btn"><i class="fas fa-minus"></i></button>
                            <span class="quantity">2</span>
                            <button class="quantity-btn inc-btn"><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="item-price">$49.99</div>
                        <button class="remove-btn"><i class="fas fa-trash"></i></button>
                    </div>

                    <div class="cart-item">
                        <img src="dropti.jpg" alt="Product 3" class="item-image">
                        <div class="item-details">
                            <h5>Smart Watch Pro Series</h5>
                            <p>Color: Blue | Brand: TimeSync</p>
                        </div>
                        <div class="quantity-selector">
                            <button class="quantity-btn dec-btn"><i class="fas fa-minus" onclick="chekOut();"></i></button>
                            <span class="quantity">1</span>
                            <button class="quantity-btn inc-btn" onclick="chekOut();"><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="item-price">$199.99</div>
                        <button class="remove-btn" onclick="chekOut();"><i class="fas fa-trash"></i></button>
                    </div> -->
                </div>

                    
                <!-- //card address  -->
                <!-- <div class="cart-summary" style="background-color: #e7ecf3;">
                    <h2 class="summary-title">Delivery Address</h2>
                    <div class="summary-line">
                        <span>Subtotal (4 items)</span>
                        <span>$429.96</span>
                    </div>
                    <div class="summary-line">
                        <span>Shipping</span>
                        <span>$9.99</span>
                    </div>
                    <div class="summary-line">
                        <span>Tax</span>
                        <span>$34.40</span>
                    </div>
                    <div class="summary-line summary-total">
                        <span>Total</span>
                        <span>$474.35</span>
                    </div>
                    <a href="#" class="continue-shopping text-danger" onclick="chekOut();">Edit Address</a>


                    <hr> -->

                <!-- //card payments  -->
        <style>
            .cart-right {
                display: flex;
                flex-direction: column;
                gap: 20px;
                position: sticky;
                top: 20px;
            }

            .address-card, .summary-card {
                background: rgba(255,255,255,0.03);
                padding: 20px;
                border-radius: 12px;
                border: 1px solid rgba(212,175,55,0.1);
            }

            .card-title {
                font-size: 1.1rem;
                color: #d4af37;
                margin-bottom: 15px;
            }

            .addr-option {
                padding: 12px;
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 10px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 10px;
                cursor: pointer;
            }

            .addr-option.selected {
                border-color: #d4af37;
                background: rgba(212,175,55,0.1);
            }

            .btn-add-addr {
                width: 100%;
                padding: 12px;
                background: rgba(212,175,55,0.1);
                border: 1px dashed #d4af37;
                color: #d4af37;
                border-radius: 10px;
                cursor: pointer;
            }

            .voucher-box {
                display: flex;
                gap: 10px;
                margin-bottom: 15px;
            }

            .voucher-box input {
                flex: 1;
                padding: 10px;
                border-radius: 8px;
                border: 1px solid rgba(255,255,255,0.1);
                background: rgba(0,0,0,0.1);
                color: #fff;
            }

            .btn-apply {
                padding: 10px 15px;
                background: #d4af37;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-weight: bold;
            }

            .summary-line {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
            }

            .summary-line.total {
                font-size: 1.5rem;
                font-weight: bold;
                color: #d4af37;
                border-top: 2px solid rgba(212,175,55,0.3);
                padding-top: 10px;
                margin-top: 10px;
            }

            .btn-checkout {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg,#d4af37,#c4941f);
                border: none;
                border-radius: 12px;
                color: #000;
                font-weight: bold;
                cursor: pointer;
            }

            .btn-checkout:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px rgba(212,175,55,0.3);
            }

            .secure-note {
                text-align: center;
                color: #888;
                font-size: 0.8rem;
                margin-top: 10px;
            }

            /* RESPONSIVE */
            @media (max-width: 768px) {
                .cart-container {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .cart-card {
                    grid-template-columns: 1fr;
                    gap: 10px;
                    padding: 15px;
                }

                .cart-img {
                    width: 100%;
                    height: 200px;
                }

                .cart-info {
                    text-align: center;
                }

                .cart-qty {
                    flex-direction: row;
                    justify-content: center;
                    gap: 12px;
                }

                .cart-actions {
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                }

                .address-card, .summary-card {
                    padding: 15px;
                }
            }
        </style>

        <!-- RIGHT: Summary -->
                <div class="cart-right">
                    <div class="address-card">
                        <h2 class="card-title">Delivery Address</h2>

                        <?php

                        $user_rs = Database::search("SELECT *
                        FROM address
                        INNER JOIN user ON address.user_id = user.id WHERE user_id = $userId");
                        
                        $user_nums = $user_rs->num_rows; 

                        if (!$user_nums == 0) {
                        ?>
                        <?php 
                            for($z=0; $z<$user_nums; $z++){
                            $user_data = $user_rs->fetch_assoc();
                        ?>
                            <div class="addr-option selected">
                                <input type="radio" name="addr" id="addr1" checked>
                                <label for="addr1" style="color: wheat;">
                                    <strong style="color: white;"><?php echo $user_data['address_type']; ?></strong><br>
                                    <?php echo $user_data['address_line_1']; ?>,<?php echo $user_data['address_line_2']; ?><br>
                                    <?php echo $user_data['country']; ?>, <?php echo $user_data['postal_code']; ?>
                                </label>
                            </div>
                        <?php } ?>    
                            <!-- <div class="addr-option">
                                <input type="radio" name="addr" id="addr2">
                                <label for="addr2">
                                    <strong>Office</strong><br>
                                    456 Business Plaza, Suite 200<br>
                                    New York, NY 10002
                                </label>
                            </div> -->
                        <?php
                        }
                        
                        
                        ?>




            <!-- Add Address Modal Overlay -->
            <div id="addressModal"
                class="fixed inset-0 bg-black/50 hidden z-50 sm:items-center sm:justify-center">

                <!-- Modal Box -->
                <div
                class="bg-white w-full sm:max-w-lg sm:rounded-2xl
                        fixed bottom-0 sm:static
                        rounded-t-3xl sm:rounded-t-2xl
                        p-5 sm:p-6
                        animate-slide-up">

                <!-- Drag Handle (Mobile) -->
                <div class="sm:hidden w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-4"></div>

                <!-- Header -->
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg sm:text-xl font-semibold">Add New Address</h2>
                    <button onclick="closeAddressModal()"
                    class="text-gray-400 hover:text-black text-2xl leading-none">
                    &times;
                    </button>
                </div>

                <!-- Form -->
                <form class="space-y-3 text-sm">

                    <input type="text" placeholder="Full Name" id="FName"
                    class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-black outline-none">

                    <select id="Country" class="w-full border rounded-lg px-4 py-3 mb-3">
                        <option value="" data-code="">Select Country</option>

                        <option value="AF" data-code="+93">Afghanistan (+93)</option>
                        <option value="AL" data-code="+355">Albania (+355)</option>
                        <option value="DZ" data-code="+213">Algeria (+213)</option>
                        <option value="AR" data-code="+54">Argentina (+54)</option>
                        <option value="AU" data-code="+61">Australia (+61)</option>
                        <option value="AT" data-code="+43">Austria (+43)</option>
                        <option value="BD" data-code="+880">Bangladesh (+880)</option>
                        <option value="BE" data-code="+32">Belgium (+32)</option>
                        <option value="BR" data-code="+55">Brazil (+55)</option>
                        <option value="CA" data-code="+1">Canada (+1)</option>
                        <option value="CL" data-code="+56">Chile (+56)</option>
                        <option value="CN" data-code="+86">China (+86)</option>
                        <option value="CO" data-code="+57">Colombia (+57)</option>
                        <option value="CZ" data-code="+420">Czech Republic (+420)</option>
                        <option value="DK" data-code="+45">Denmark (+45)</option>
                        <option value="EG" data-code="+20">Egypt (+20)</option>
                        <option value="FI" data-code="+358">Finland (+358)</option>
                        <option value="FR" data-code="+33">France (+33)</option>
                        <option value="DE" data-code="+49">Germany (+49)</option>
                        <option value="GR" data-code="+30">Greece (+30)</option>
                        <option value="HK" data-code="+852">Hong Kong (+852)</option>
                        <option value="IN" data-code="+91">India (+91)</option>
                        <option value="ID" data-code="+62">Indonesia (+62)</option>
                        <option value="IE" data-code="+353">Ireland (+353)</option>
                        <option value="IL" data-code="+972">Israel (+972)</option>
                        <option value="IT" data-code="+39">Italy (+39)</option>
                        <option value="JP" data-code="+81">Japan (+81)</option>
                        <option value="MY" data-code="+60">Malaysia (+60)</option>
                        <option value="MX" data-code="+52">Mexico (+52)</option>
                        <option value="NL" data-code="+31">Netherlands (+31)</option>
                        <option value="NZ" data-code="+64">New Zealand (+64)</option>
                        <option value="NG" data-code="+234">Nigeria (+234)</option>
                        <option value="NO" data-code="+47">Norway (+47)</option>
                        <option value="PK" data-code="+92">Pakistan (+92)</option>
                        <option value="PH" data-code="+63">Philippines (+63)</option>
                        <option value="PL" data-code="+48">Poland (+48)</option>
                        <option value="PT" data-code="+351">Portugal (+351)</option>
                        <option value="RO" data-code="+40">Romania (+40)</option>
                        <option value="RU" data-code="+7">Russia (+7)</option>
                        <option value="SA" data-code="+966">Saudi Arabia (+966)</option>
                        <option value="ZA" data-code="+27">South Africa (+27)</option>
                        <option value="KR" data-code="+82">South Korea (+82)</option>
                        <option value="ES" data-code="+34">Spain (+34)</option>
                        <option value="SE" data-code="+46">Sweden (+46)</option>
                        <option value="CH" data-code="+41">Switzerland (+41)</option>
                        <option value="TW" data-code="+886">Taiwan (+886)</option>
                        <option value="TH" data-code="+66">Thailand (+66)</option>
                        <option value="TR" data-code="+90">Turkey (+90)</option>
                        <option value="AE" data-code="+971">UAE (+971)</option>
                        <option value="GB" data-code="+44">United Kingdom (+44)</option>
                        <option value="US" data-code="+1">United States (+1)</option>
                        <option value="VN" data-code="+84">Vietnam (+84)</option>
                        <option value="LK" data-code="+94">Sri Lanka (+94)</option>
                    </select>

                    <input type="tel" placeholder="Phone Number" id="PNumber"
                    class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-black outline-none">

                    <input type="text" placeholder="Address Line 1" id="AL1"
                    class="w-full border rounded-lg px-4 py-3">

                    <input type="text" placeholder="Address Line 2 (Optional)" id="AL2"
                    class="w-full border rounded-lg px-4 py-3">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <input type="text" placeholder="City" id="City"
                        class="border rounded-lg px-4 py-3">
                    <input type="text" placeholder="Postal Code" id="PCode"
                        class="border rounded-lg px-4 py-3">
                    </div>

                    <textarea rows="2" placeholder="Delivery Notes (Optional)" id="DNotes"
                    class="w-full border rounded-lg px-4 py-3"></textarea>
                    
                    <div id="formMsg" class="hidden mb-3 text-red-600 text-sm">
                    </div>


                    <label class="flex items-center gap-2 text-sm">

                    <input type="checkbox" class="accent-black" id="CBox">
                    Set as default address
                    </label>

                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row gap-3 pt-3">
                        <button type="button" onclick="closeAddressModal()"
                            class="hidden sm:block px-4 py-3 rounded-lg border hover:bg-gray-100">
                            Cancel
                        </button>
                        <button type="button" onclick="addAddress();"
                            class="w-full sm:w-auto px-6 py-3 rounded-lg bg-black text-white hover:bg-gray-800">
                            Save Address
                        </button>
                        
                        <script>
                            document.getElementById("Country").addEventListener("change", function () {
                                var code = this.options[this.selectedIndex].getAttribute("data-code");
                                var phoneInput = document.getElementById("PNumber");
                                if (code && !phoneInput.value.startsWith(code)) {
                                    phoneInput.value = code + " ";
                                    phoneInput.focus();
                                }
                            });

                            function addAddress() {
                                var FullName = document.getElementById("FName").value;
                                var Mobile   = document.getElementById("PNumber").value;
                                var AL1      = document.getElementById("AL1").value;
                                var AL2      = document.getElementById("AL2").value;
                                var City     = document.getElementById("City").value;
                                var PCode    = document.getElementById("PCode").value;
                                var CBox     = document.getElementById("CBox");
                                var countrySelect = document.getElementById("Country");
                                var selectEl = document.getElementById("Country");
                                var countryName = selectEl.options[selectEl.selectedIndex].text;
                                var selectedCountry = countrySelect.value;
                                // var DNotes   = document.getElementById("DNotes").value;
                                // var DNotes = document.getElementById("DNotes").value.trim();
                                var DNotesEl = document.getElementById("DNotes");
                                var DNotes = DNotesEl.value.trim();
                                var IsCheck = 0;
                                var userId = <?php echo json_encode($userId); ?>;

                                // if (!FullName) {
                                //     alert("Full name empty");
                                //     return;
                                // }

                                if (CBox.checked) {
                                    IsCheck = 1;
                                } else {
                                    IsCheck = 0;
                                }

                                // alert("Full name is: " + FullName);
                                // alert(Mobile);
                                // alert(AL1);
                                // alert(AL2);
                                // alert(City);
                                // alert(PCode);
                                // alert(IsCheck);

                                var form = new FormData();
                                form.append("FullName", FullName);
                                form.append("Mobile", Mobile);
                                form.append("AL1" , AL1);
                                form.append("AL2" , AL2);
                                form.append("City" , City);
                                form.append("PCode" , PCode);
                                form.append("DNotes" , DNotes);
                                form.append("IsCheck" , IsCheck);
                                form.append("selectedCountry" , selectedCountry);
                                form.append("countryName" , countryName);

                                // var userId = 1;
                                form.append("userId", userId);

                                var request = new XMLHttpRequest();

                                request.onreadystatechange = function () {
                                    if (request.readyState == 4 && request.status == 200) {
                                        try {
                                            var response = JSON.parse(request.responseText);

                                            if (response.status === "success") {
                                                alert(response.message || "Added to cart successfully!");
                                                window.location.reload();
                                            } else if (response.status === "error") {
                                                // show error in inline message div instead of alert
                                                document.getElementById("formMsg").innerText = response.message;
                                                document.getElementById("formMsg").classList.remove("hidden");
                                            } else {
                                                console.log("Unknown response:", response);
                                            }
                                        } catch(e) {
                                            console.error("Invalid JSON response:", request.responseText);
                                        }
                                    }
                                };


                                request.open("POST", "addressProcess.php", true);
                                request.send(form);

                            }

                            function showMsg(message, isError = true) {
                                var msgDiv = document.getElementById("formMsg");
                                msgDiv.innerText = message;
                                msgDiv.classList.remove("hidden");
                                msgDiv.className = isError
                                    ? "mb-3 text-red-600 text-sm"
                                    : "mb-3 text-green-600 text-sm";
                            }

                            var style = document.createElement('style');

                            style.innerHTML = `
                            @keyframes shake {
                            0%,100%{transform:translateX(0);}
                            20%,60%{transform:translateX(-4px);}
                            40%,80%{transform:translateX(4px);}
                            }
                            .animate-shake{animation:shake 0.3s;}
                            `;
                            document.head.appendChild(style);

                        </script>


                    </div>
                </form>
                </div>
            </div>

            <!-- Add Address JavaScript -->
            <script>
                function openAddressModal() {
                const modal = document.getElementById('addressModal');
                modal.classList.remove('hidden');
                modal.classList.add('flex');
                }

                function closeAddressModal() {
                const modal = document.getElementById('addressModal');
                modal.classList.add('hidden');
                modal.classList.remove('flex');
                }
            </script>

            <!-- Add Address Animations -->
            <style>
                .animate-slide-up {
                animation: slideUp 0.25s ease-out forwards;
                }

                @keyframes slideUp {
                from {
                    transform: translateY(30px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
                }
            </style>

                        <button class="btn-add-addr" onclick="openAddressModal()">+ Add New Address</button>
                    </div>

                    <div class="summary-card">
                        <h2 class="card-title">Order Summary</h2>
                        
                        <div class="voucher-box">
                            <input type="text" placeholder="Enter Voucher Code">
                            <button class="btn-apply">Apply</button>
                        </div> 
                        
                        <div class="summary-line subtotal">
                            <span style="color: white;">Subtotal</span><span style="color: white;">$<?php echo number_format($subtotal, 2); ?></span>
                        </div>
                            
                        <div class="summary-line subtotal">
                            <span style="color: white;">Total Weight</span><span style="color: white;"><?php echo number_format($totalWeight); ?>g</span>
                        </div>

                            <?php 
                                $baseCost = 20;

                                $additionalCostPerKg = 5;

                                if ($totalWeight <= 1000) {
                                    $shippingCost = $shippingFee;
                                } else {
                                    $extraWeight = $totalWeight - 1000;
                                    $extraBlocks = ceil($extraWeight / 1000);
                                    $shippingCost = $baseCost + ($extraBlocks * $additionalCostPerKg);
                                }



                                if (8 >= 100) {
                            ?>

                            <!-- Make sure to include Font Awesome in <head> -->
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>

                            <div class="flex items-center justify-center gap-2 bg-black border border-green-500 rounded-2xl px-5 py-3 mb-2">
                                <!-- Lorry icon (green) -->
                                <i class="fas fa-truck text-green-500 text-1xl"></i>
                                <!-- Text -->
                                <span class="text-green-500 font-bold text-sm">5-20 days standard Free Delivery</span>
                            </div>

                            <?php
                                } else {
                            ?>
                                <div class="summary-line shipping">
                            <?php 
                                    if ($totalWeight <= 1000) {
                            ?>
                                    <span style="color: white;">Standard Economic Shipping — 10–20 Days</span>
                                    <span style="color: white;">$<?php echo number_format($shippingFee); ?></span>
                            <?php
                                    } else {
                            ?>
                                    <span style="color: white;">Standard <span style="color: gold;">Fast</span> Shipping — 5-7 Days</span>
                                    <span style="color: white;">$<?php echo number_format($shippingCost); ?></span>

                            <?php
                                    }
                            ?>

                                </div>

                                <?php
                                    $grandTotal = $grandTotal + $shippingCost;
                                ?>

                            <?php
                                }
                            

                            ?>

                        <div class="summary-line tax">
                            <span>Tax</span><span>-</span>
                        </div>
                        <div class="summary-line discount">
                            <span style="color: white;">Discount</span><span style="color: white;">-$<?php echo number_format($discount, 2); ?></span> 
                        </div>
                        <div class="summary-line total">
                            <span>Total</span><span style="color: wheat;">$ <?php echo number_format($grandTotal, 2); ?></span>
                        </div>

                        <button class="btn-checkout">Proceed to Checkout</button>
                        <p class="secure-note">🔒 Secure Checkout Guaranteed</p>
                    </div>
                </div>

            </div>
        </div>

<!-- <div class="fixed bottom-0 lux-mobile-bar md:hidden" style="background-color: #000;">       -->
        <div id="lux-mobile-bar" class="lux-mobile-bar fixed bottom-3 left-5 w-full bg-black flex items-center justify-between px-4 py-2 md:hidden gap-1" style="height: 60px; width: 340px; padding: 18px; border-radius: 30px; ">

        <script>
            function openAddressModal() {
                const modal = document.getElementById('addressModal');
                const luxBar = document.getElementById('lux-mobile-bar');

                modal.classList.remove('hidden');
                modal.classList.add('flex');

                // 🔥 Hide mobile checkout bar
                if (luxBar) luxBar.classList.add('hidden');
            }

            function closeAddressModal() {
                const modal = document.getElementById('addressModal');
                const luxBar = document.getElementById('lux-mobile-bar');

                modal.classList.add('hidden');
                modal.classList.remove('flex');

                // 🔥 Show mobile checkout bar again
                if (luxBar) luxBar.classList.remove('hidden');
            }
        </script>

            <!-- Price & Saved -->
            <div class="flex flex-col leading-tight" style="gap: 2px;">
                <div class="flex items-center gap-1">
                    <span class="text-gold font-bold text-[20px]" style="color: #ffffffff;">$ <?php echo number_format($grandTotal, 2); ?></span>
                    <i class="fas fa-chevron-down text-gold text-[10px] opacity-60" style="color: white;"></i>
                </div>
                <span class="text-red-500 font-semibold text-[14px]">Saved: $<?php echo number_format($discount, 2); ?></span>
            </div>

            <!-- Checkout Button -->
            <div class="flex flex-col items-center"> <!-- ML eka adu karala -->
                <button class="lux-checkout-btn relative font-extrabold text-black  py-1.5 rounded-full flex flex-col items-center" style="height: 40px; width: 100px; justify-content: center;">
                    <!-- <span class="absolute -top-1.5 right-0 bg-red-600 text-white text-[9px] px-1.5 py-0.2 rounded-full">(1)</span> -->
                    <span class="flex items-center gap-1 text-[15px]">
                        <i class="fas fa-lock text-[9px]" style="font-size: 17px;"></i> Checkout
                    </span>
                </button>
            </div>

        </div>
</div>  

<style>
    /* :root{ --gold:#d4af37; } */
    .text-gold{ color:var(--gold); }
    .lux-checkout-btn{
    /* background:linear-gradient(90deg, #d4af37, #ffdb58); */
    /* border: 2px gold; */

    background-color: white;
    box-shadow:0 0 10px var(--gold);
    transition:0.3s;
    min-width:170px;
    }
    .lux-checkout-btn:hover{
    transform:scale(1.04);
    box-shadow:0 0 18px var(--gold);
    }
</style>

<script>
    function payNow(){
    window.location.href="buy_now.php";
    }
</script>




        <script src="main.js"></script>
    </body>
</html>