.elementor-8043 .elementor-element.elementor-element-bcb7712{--display:flex;}.elementor-8043 .elementor-element.elementor-element-0a34cab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8043 .elementor-element.elementor-element-5b3eb39{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS */<style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap');
        
        :root { --n-red: #ff0000; --n-black: #000000; --n-safe: #10b981; --n-card: #fdfdfd; }

        .n-v53-container { 
            max-width: 1100px; 
            margin: 40px auto; 
            padding: 0 20px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .n-v53-header { 
            background: var(--n-black); padding: 45px 20px; text-align: center; 
            border-bottom: 8px solid var(--n-red); border-radius: 25px 25px 0 0;
        }
        .n-v53-header img { max-width: 220px; }
        .n-v53-header .intel-title { color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 10px; font-weight: 800; opacity: 0.7; margin-top: 15px; display: block; }

        .n-v53-body { padding: 60px 40px; border: 1px solid #f1f5f9; border-top: none; border-radius: 0 0 25px 25px; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
        
        .search-area-v53 { max-width: 650px; margin: 0 auto 60px; text-align: center; }
        .n-v53-input { width: 100%; padding: 20px 0; border: none; border-bottom: 3px solid #eee; font-size: 36px; font-weight: 300; outline: none; transition: 0.4s; background: transparent; text-align: center; color: #000; letter-spacing: 3px; }
        .n-v53-input:focus { border-bottom-color: var(--n-black); }

        #pincodeResultV53 { display: none; animation: slideUpV53 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        @keyframes slideUpV53 { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        /* UNIQUE PRO RESULT CARD */
        .v53-main-card { 
            background: #fff; border-radius: 35px; border: 1px solid #f1f5f9; 
            padding: 50px; display: flex; gap: 60px; align-items: flex-start;
            box-shadow: 0 20px 50px rgba(0,0,0,0.03); margin-bottom: 30px;
            position: relative; overflow: hidden;
        }
        .v53-icon-side i { font-size: 70px; color: var(--n-red); padding: 30px; background: #fafafa; border-radius: 30px; border: 1px solid #eee; }

        .v53-info-side { flex: 1; }
        .v53-loc-name { font-size: 52px; font-weight: 800; color: #000; margin: 0; letter-spacing: -2px; text-transform: uppercase; line-height: 1; }
        .v53-state-label { font-size: 20px; font-weight: 600; color: #94a3b8; margin-bottom: 40px; display: block; margin-top: 10px; }

        /* Large Grid Display */
        .v53-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .v53-data-block { padding: 25px; border-radius: 20px; border: 1px solid #f1f1f1; border-left: 8px solid #eee; background: #fafafa; }
        .v53-data-block.active { border-left-color: var(--n-red); background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.02); }
        .v53-data-block label { font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: block; margin-bottom: 12px; letter-spacing: 2px; }
        .v53-data-block p { font-size: 18px; font-weight: 700; color: #1a202c; margin: 0; }
        
        .v53-badge { padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
        .badge-no { background: #f1f5f9; color: #64748b; }
        .badge-yes { background: #fee2e2; color: #ef4444; }
        .badge-safe { background: #dcfce7; color: #16a34a; }

        /* SLEEK COMPACT NOTICE */
        .v53-ip-note {
            background: #fff; border-radius: 25px; border: 1px solid #f1f5f9; 
            padding: 20px 40px; display: flex; align-items: center; gap: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02); border-left: 10px solid var(--n-red);
        }
        .v53-ip-logo { width: 100px; flex-shrink: 0; }
        .v53-ip-logo img { width: 100%; object-fit: contain; }
        .v53-ip-content { flex: 1; border-left: 2px solid #eee; padding-left: 40px; }
        .v53-ip-content h3 { font-size: 11px; font-weight: 800; color: var(--n-red); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 8px; }
        .v53-ip-content p { font-size: 14px; color: #334155; line-height: 1.6; margin: 0; }

        @media (max-width: 900px) {
            .v53-main-card { flex-direction: column; text-align: center; padding: 40px 20px; }
            .v53-ip-note { flex-direction: column; text-align: center; padding: 30px; }
            .v53-ip-content { border: none; padding: 0; margin-top: 20px; }
            .v53-loc-name { font-size: 36px; }
        }
    </style>

    <div class="n-v53-container">
        <div class="n-v53-header">
            <img src="https://deliverymen.co.in/storage/2026/04/output-onlinepngtools-light.png" alt="Nathaniel">
            <span class="intel-title">SERVICEABILITY INTELLIGENCE</span>
        </div>
        
        <div class="n-v53-body">
            <div class="search-area-v53">
                <input type="number" id="pinInputV53" class="n-v53-input" placeholder="Type 6-Digit Pincode..." onkeyup="checkPinV53(this.value)">
            </div>

            <div id="pincodeResultV53">
                <div id="uniqueTargetV53"></div>

                <div class="v53-ip-note">
                    <div class="v53-ip-logo">
                        <img src="https://deliverymen.co.in/storage/2026/04/India-Post-Dak-Sewa-Jan-Sewa-New-Logo-Final-scaled.png" alt="India Post">
                    </div>
                    <div class="v53-ip-content">
                        <h3>Authorized Service Partner</h3>
                        <p>We are India Post authorized partners for Speedpost. Hassel-free shipping to all Remote and ODA locations nationwide.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    let pinDBV53 = [];

    async function loadDBV53() {
        const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRxghGqKV4VMMR4E7gr8nSPiXsuMX4RVPHfK8_vUwJe4G6T-PXWPU_IBhycyid8lFK6Pziz8l9qhpRy/pub?output=csv&cache_bust=' + new Date().getTime();
        try {
            const res = await fetch(url);
            const text = await res.text();
            const rows = text.split(/\r?\n/).map(row => {
                return row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/).map(item => item.replace(/^"|"$/g, '').trim());
            });
            pinDBV53 = rows.slice(1).map(c => ({
                pin: c[0] || '', city: c[1] || '', state: c[2] || '',
                rev: c[3] || 'NO', cod: c[4] || 'PPD', mode: c[5] || 'Surface',
                pick: c[6] || 'NO', dest: c[7] || 'NO', ndd: c[8] || 'NO', oda: c[9] || 'NO'
            })).filter(i => i.pin.length >= 5);
        } catch(e) { console.error('Data Sync Failure'); }
    }

    function checkPinV53(val) {
        if(val.length < 6) { document.getElementById('pincodeResultV53').style.display = 'none'; return; }
        const match = pinDBV53.find(i => i.pin == val);
        const res = document.getElementById('pincodeResultV53');
        const target = document.getElementById('uniqueTargetV53');

        if(match) {
            res.style.display = 'block';
            target.innerHTML = `
                <div class="v53-main-card">
                    <div class="v53-icon-side"><i class="fas fa-map-marker-alt"></i></div>
                    <div class="v53-info-side">
                        <h1 class="v53-loc-name">${match.city}</h1>
                        <span class="v53-state-label">${match.state}</span>
                        <div class="v53-grid">
                            <div class="v53-data-block active"><label>Reverse</label><p>${match.rev}</p></div>
                            <div class="v53-data-block active"><label>Payment</label><p>${match.cod}</p></div>
                            <div class="v53-data-block active"><label>Shipping Mode</label><p>${match.mode}</p></div>
                            <div class="v53-data-block active"><label>Pickup</label><p>${match.pick}</p></div>
                            <div class="v53-data-block active"><label>Destination</label><p>${match.dest}</p></div>
                            <div class="v53-data-block active"><label>NDD Support</label><p>${match.ndd.toUpperCase() === 'YES' ? '<span class="v53-badge badge-safe">Available</span>' : '<span class="v53-badge badge-no">NO</span>'}</p></div>
                            <div class="v53-data-block active"><label>ODA Status</label><p>${match.oda.toUpperCase() === 'YES' ? '<span class="v53-badge badge-yes">YES (ODA)</span>' : '<span class="v53-badge badge-no">Mainline</span>'}</p></div>
                        </div>
                    </div>
                </div>
            `;
        } else {
            res.style.display = 'none';
        }
    }
    loadDBV53();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('nathaniel_pincode_checker', 'nathaniel_pincode_checker_v53_shortcode');/* End custom CSS */