.elementor-5320 .elementor-element.elementor-element-2ed1540{--billing-details-title-alignment:center;--sections-border-type:none;--sections-title-color:#000000;--forms-columns-gap-padding:calc( 0px/2 );--forms-columns-gap-margin:calc( -0px/2 );--forms-rows-gap:0px;--forms-labels-color:#0D0D0D;--forms-buttons-normal-text-color:#171616;}.elementor-5320 .elementor-element.elementor-element-2ed1540 .e-description{font-size:1px;font-weight:normal;line-height:1px;}.elementor-5320 .elementor-element.elementor-element-2ed1540 .woocommerce-billing-fields .form-row label, .elementor-5320 .elementor-element.elementor-element-2ed1540 .woocommerce-shipping-fields .form-row label, .elementor-5320 .elementor-element.elementor-element-2ed1540 .woocommerce-additional-fields .form-row label, .elementor-5320 .elementor-element.elementor-element-2ed1540 .e-woocommerce-login-anchor .form-row label, .elementor-5320 .elementor-element.elementor-element-2ed1540 .e-coupon-anchor-description{font-family:"Hind Siliguri", Jost;font-weight:500;}/* Start custom CSS for wpforms, class: .elementor-element-9eecba5 */<div id="mnh-ultra-checkout" class="mnh-checkout-wrapper">
    <div class="mnh-glass-card">
        
        <div class="mnh-glass-header">
            <div class="mnh-icon-glow">
                <span class="pulse-ring"></span>
                <span class="icon-emoji">📦</span>
            </div>
            <div class="mnh-header-info">
                <h3>অর্ডার কনফার্ম করুন</h3>
                <p>নিরাপদ এবং দ্রুত ডেলিভারি নিশ্চিত করতে নিচের তথ্য দিন</p>
            </div>
        </div>

        <form id="mnh-ultra-form" onsubmit="handleFinalSubmit(event)">
            <div class="mnh-form-body">
                
                <div class="mnh-input-group">
                    <input type="text" id="cust-name" placeholder=" " required>
                    <label>👤 আপনার পূর্ণ নাম</label>
                    <span class="focus-border"></span>
                </div>

                <div class="mnh-input-group">
                    <input type="tel" id="cust-phone" placeholder=" " required>
                    <label>📞 মোবাইল নম্বর</label>
                    <span class="focus-border"></span>
                </div>

                <div class="mnh-input-group">
                    <select id="cust-dist" onchange="calcUltraTotal()">
                        <option value="dhaka">ঢাকার মধ্যে (৳৬০)</option>
                        <option value="outside">ঢাকার বাইরে (৳১৩০)</option>
                    </select>
                    <label class="always-top">📍 জেলা নির্বাচন করুন</label>
                </div>

                <div class="mnh-input-group">
                    <textarea id="cust-addr" rows="2" placeholder=" " required></textarea>
                    <label>🏠 বিস্তারিত ঠিকানা (বাসা/রোড/থানা)</label>
                    <span class="focus-border"></span>
                </div>

                <div class="mnh-summary-section">
                    <div class="mnh-qty-control">
                        <span class="label-text">পণ্য পরিমাণ:</span>
                        <div class="qty-stepper">
                            <button type="button" onclick="updateQty(-1)">−</button>
                            <span id="ultra-qty">1</span>
                            <button type="button" onclick="updateQty(1)">+</button>
                        </div>
                    </div>

                    <div class="mnh-bill-details">
                        <div class="bill-row"><span>পণ্যমূল্য:</span><span id="u-sub">৳৩৯০</span></div>
                        <div class="bill-row"><span>ডেলিভারি চার্জ:</span><span id="u-del">৳৬০</span></div>
                        <div class="bill-row total-row"><span>সর্বমোট পরিশোধ:</span><span id="u-total">৳৪৫০</span></div>
                    </div>
                </div>

                <button type="submit" class="mnh-btn-3d">
                    <span class="btn-top">
                        অর্ডার কনফার্ম করুন — <span id="u-btn-total">৳৪৫০</span>
                    </span>
                    <span class="btn-shadow"></span>
                </button>

                <div class="mnh-trust-footer">
                    <span>🛡️ Cash on Delivery</span>
                    <span>✔️ ১০০% অরিজিনাল</span>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    /* --- Ultra Modern Styling --- */
    .mnh-checkout-wrapper {
        padding: 40px 20px;
        display: flex;
        justify-content: center;
        background: #fdfdfd;
        font-family: 'Hind Siliguri', sans-serif;
    }

    .mnh-glass-card {
        width: 100%;
        max-width: 520px;
        background: #ffffff;
        border-radius: 35px;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.8);
        overflow: hidden;
    }

    /* --- Glowing Header --- */
    .mnh-glass-header {
        padding: 35px 30px;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .mnh-icon-glow {
        position: relative;
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    .icon-emoji { font-size: 30px; z-index: 2; }
    .pulse-ring {
        position: absolute; width: 100%; height: 100%;
        border-radius: 20px; background: rgba(34, 197, 94, 0.2);
        animation: mnhPulse 2s infinite;
    }

    @keyframes mnhPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

    .mnh-header-info h3 { margin: 0; font-size: 22px; font-weight: 800; color: #1e293b; }
    .mnh-header-info p { margin: 5px 0 0; font-size: 13px; color: #64748b; line-height: 1.4; }

    /* --- Premium Inputs --- */
    .mnh-form-body { padding: 30px; }
    .mnh-input-group { position: relative; margin-bottom: 25px; }

    .mnh-input-group input, .mnh-input-group textarea, .mnh-input-group select {
        width: 100%; padding: 22px 18px 10px;
        border: 2px solid #f1f5f9; border-radius: 18px;
        background: #f8fafc; font-size: 15px; font-weight: 500;
        outline: none; box-sizing: border-box; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mnh-input-group label {
        position: absolute; left: 18px; top: 18px;
        font-size: 15px; color: #94a3b8; pointer-events: none;
        transition: all 0.3s ease;
    }

    .focus-border {
        position: absolute; bottom: 0; left: 50%; width: 0; height: 2.5px;
        background: #22c55e; transition: 0.4s ease; transform: translateX(-50%);
        border-radius: 10px;
    }

    .mnh-input-group input:focus, .mnh-input-group textarea:focus { background: #fff; border-color: transparent; }
    .mnh-input-group input:focus ~ .focus-border { width: 40%; }

    /* Floating Labels */
    .mnh-input-group input:focus ~ label, .mnh-input-group input:not(:placeholder-shown) ~ label,
    .mnh-input-group textarea:focus ~ label, .mnh-input-group textarea:not(:placeholder-shown) ~ label,
    .always-top {
        top: 8px !important; font-size: 11px !important; font-weight: 800 !important; color: #22c55e !important;
    }

    /* --- Summary Section --- */
    .mnh-summary-section {
        background: #fbfcfd; border: 2px solid #f1f5f9;
        border-radius: 25px; padding: 20px; margin-bottom: 30px;
    }

    .mnh-qty-control { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #e2e8f0; }
    .label-text { font-weight: 700; color: #475569; }
    .qty-stepper { display: flex; align-items: center; gap: 18px; background: #fff; padding: 5px 15px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
    .qty-stepper button { width: 30px; height: 30px; border: none; background: none; font-size: 20px; color: #22c55e; cursor: pointer; font-weight: bold; }
    .qty-stepper span { font-weight: 800; font-size: 18px; }

    .bill-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #64748b; font-weight: 500; }
    .total-row { font-size: 20px; font-weight: 900; color: #1e293b; margin-top: 10px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
    .total-row span:last-child { color: #22c55e; }

    /* --- Premium 3D Button --- */
    .mnh-btn-3d {
        position: relative; width: 100%; background: transparent; padding: 0; border: none; cursor: pointer; outline-offset: 4px;
    }
    .btn-top {
        display: block; position: relative; padding: 20px 30px; border-radius: 20px;
        background: #ff0000; color: white; font-size: 18px; font-weight: 800;
        transform: translateY(-6px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
        box-shadow: 0 8px 0 #cc0000;
    }
    .mnh-btn-3d:active .btn-top { transform: translateY(-2px); box-shadow: 0 2px 0 #cc0000; }
    .mnh-btn-3d:hover .btn-top { filter: brightness(110%); }

    .mnh-trust-footer {
        display: flex; justify-content: center; gap: 20px; margin-top: 25px;
        font-size: 13px; font-weight: 700; color: #94a3b8;
    }

    @media (max-width: 480px) {
        .mnh-checkout-wrapper { padding: 15px; }
        .mnh-glass-card { border-radius: 25px; }
        .btn-top { font-size: 16px; padding: 18px; }
    }
</style>

<script>
    let qtyCount = 1;
    const UNIT_PRICE = 390;

    function updateQty(val) {
        qtyCount = Math.max(1, qtyCount + val);
        document.getElementById('ultra-qty').innerText = qtyCount;
        calcUltraTotal();
    }

    function calcUltraTotal() {
        const dist = document.getElementById('cust-dist').value;
        const delivery = (dist === 'dhaka') ? 60 : 130;
        const sub = UNIT_PRICE * qtyCount;
        const total = sub + delivery;

        document.getElementById('u-sub').innerText = '৳' + sub;
        document.getElementById('u-del').innerText = '৳' + delivery;
        document.getElementById('u-total').innerText = '৳' + total;
        document.getElementById('u-btn-total').innerText = '৳' + total;
    }

    function handleFinalSubmit(e) {
        e.preventDefault();
        const name = document.getElementById('cust-name').value;
        const phone = document.getElementById('cust-phone').value;
        const addr = document.getElementById('cust-addr').value;
        const dist = document.getElementById('cust-dist').value;
        
        const delCharge = (dist === 'dhaka') ? 60 : 130;
        const finalBill = (UNIT_PRICE * qtyCount) + delCharge;

        const msg = `🛒 নতুন অর্ডার (Ultra-Modern Form)!\n\nনাম: ${name}\nফোন: ${phone}\nঠিকানা: ${addr}\nজেলা: ${dist === 'dhaka' ? "ঢাকা" : "ঢাকার বাইরে"}\nপরিমাণ: ${qtyCount}টি\n\nপণ্যমূল্য: ${UNIT_PRICE * qtyCount}৳\nডেলিভারি: ${delCharge}৳\nমোট: ${finalBill}৳\n\nপণ্য: Shoes Deodorant Spray`;
        
        window.open(`https://wa.me/8801580357335?text=${encodeURIComponent(msg)}`, "_blank");
    }
</script>

<script>
    // এই ফাংশনটি বাটনের সাথে কানেক্টেড
    function handleFinalSubmit(event) {
        // ফর্ম সাবমিট হওয়া আটকাবে যাতে পেজ রিফ্রেশ না হয়
        if (event) event.preventDefault();

        // ইনপুট ফিল্ড থেকে তথ্য সংগ্রহ
        const name = document.getElementById('cust-name').value;
        const phone = document.getElementById('cust-phone').value;
        const addr = document.getElementById('cust-addr').value;
        const dist = document.getElementById('cust-dist').value;
        
        // তথ্য খালি থাকলে ওয়ার্নিং দিবে
        if (!name || !phone || !addr) {
            alert("অনুগ্রহ করে সব তথ্য সঠিকভাবে পূরণ করুন।");
            return;
        }

        // ক্যালকুলেশন
        const qtyCount = parseInt(document.getElementById('ultra-qty').innerText) || 1;
        const UNIT_PRICE = 390;
        const delCharge = (dist === 'dhaka') ? 60 : 130;
        const finalBill = (UNIT_PRICE * qtyCount) + delCharge;

        // হোয়াটসঅ্যাপ মেসেজ তৈরি
        const msg = `🛒 নতুন অর্ডার!\n\nনাম: ${name}\nফোন: ${phone}\nঠিকানা: ${addr}\nজেলা: ${dist === 'dhaka' ? "ঢাকা" : "ঢাকার বাইরে"}\nপরিমাণ: ${qtyCount}টি\n\nপণ্যমূল্য: ${UNIT_PRICE * qtyCount}৳\nডেলিভারি: ${delCharge}৳\nমোট: ${finalBill}৳\n\nপণ্য: Shoes Deodorant Spray`;
        
        // হোয়াটসঅ্যাপ ওপেন করা
        const waUrl = `https://api.whatsapp.com/send?phone=8801580357335&text=${encodeURIComponent(msg)}`;
        window.open(waUrl, "_blank");
    }
</script>/* End custom CSS */