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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diamond</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/diamond.png" type="image/x-icon">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.12.1/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">


</head>

<body>

    <header>
        <nav class="nav" id="navbar">
            <div class="nav-div">
                <a href="index.php">
                    <img src="img/logo.png" alt="" class="nav-logo">
                </a>
            </div>
            <div class="nav-div2">
                <a class="nav-a" href="index.php">Inicio</a>
                <a class="nav-a" href="productos.php">Productos</a>
                <a class="nav-a" href="blogs.php">Blog</a>
                <a class="nav-a" href="index.php#aplicadores">Aplicadores Certificados</a>
                <a class="nav-a2" href="#contacto">Contacto</a>
                <a href="#carrito.php" class="nav-a"><i class="bi bi-cart3"></i> <span class="nav-span">0</span></a>
            </div>
        </nav>
    </header>

    <!-- Sidebar del carrito -->
    <div id="cart-sidebar" class="cart-sidebar">
        <div class="cart-sidebar-content">
            <div class="cart-header">
                <h3>CARRITO</h3>
                <button id="close-cart" class="close-cart-btn">&times;</button>
            </div>
            <hr>
            <div class="cart-body">
                <!-- El contenido se carga dinámicamente -->
            </div>
            <div class="cart-footer">
                <div class="cart-total-section">
                    <p class="cart-total" id="cart-total">PRECIO TOTAL: $0.00</p>
                    <hr>
                </div>
                <p class="cart-p">CREAR PEDIDO</p>
                <hr>
                <form action="" class="formCotizacion" id="formCotizacion">
                    <div class="mb-2">
                        <div class="row">
                            <div class="col-6">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nombre y Apellido" required>
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="Teléfono" required>
                            </div>
                        </div>
                    </div>

                    <div class="mb-2">
                        <div class="row">
                            <div class="col-6">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Correo Electrónico" required>
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" id="city" name="city" placeholder="Ciudad" required>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn-cart">Enviar</button>
                </form>
            </div>
        </div>
    </div>
    <!-- Overlay para cerrar el sidebar -->
    <div id="cart-overlay" class="cart-overlay"></div>