{"id":1314,"date":"2026-05-04T06:22:06","date_gmt":"2026-05-04T06:22:06","guid":{"rendered":"https:\/\/didiplayarea.com\/?page_id=1314"},"modified":"2026-05-04T06:26:11","modified_gmt":"2026-05-04T06:26:11","slug":"cost-calculator","status":"publish","type":"page","link":"https:\/\/didiplayarea.com\/pt\/soft-play-equipment\/soft-play-climbing-equipment\/cost-calculator\/","title":{"rendered":"Calculadora de custos"},"content":{"rendered":"\n<!-- Didi Land Total Landed Cost Calculator Module -->\n<section id=\"didi-cost-calculator\">\n    <style>\n        \/* Principle 3: Aesthetics & Fonts *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap');\n\n        \/* Principle 1: Highest level of Scope - All rules prefixed with unique ID *\/\n        #didi-cost-calculator {\n            width: 100% !important;\n            font-family: 'Inter', sans-serif !important;\n            background-color: #ffffff !important;\n            padding: 40px 20px !important; \/* Satisfies the 40px padding requirement *\/\n            box-sizing: border-box !important;\n            color: #333333 !important;\n            margin: 0 auto !important;\n        }\n\n        #didi-cost-calculator * {\n            box-sizing: border-box !important;\n        }\n\n        \/* Principle 2: Tag Replacement - Using Divs instead of H tags *\/\n        #didi-cost-calculator .module-title {\n            font-size: 32px !important; \/* Default theme size requirement *\/\n            font-weight: 700 !important;\n            color: #111827 !important;\n            margin-bottom: 15px !important;\n            line-height: 1.2 !important;\n        }\n\n        #didi-cost-calculator .module-subtitle {\n            font-size: 16px !important;\n            color: #4b5563 !important;\n            margin-bottom: 20px !important;\n            line-height: 1.6 !important;\n        }\n\n        #didi-cost-calculator .buyer-regret-banner {\n            background-color: #fffbeb !important;\n            border-left: 4px solid #FFD848 !important; \/* Secondary Color *\/\n            padding: 16px !important;\n            font-size: 15px !important;\n            color: #374151 !important;\n            margin-bottom: 40px !important;\n            border-radius: 0 8px 8px 0 !important;\n            font-weight: 600 !important;\n        }\n\n        \/* Principle 4: Layout & Frameworks - Vanilla CSS Grid\/Flexbox *\/\n        #didi-cost-calculator .calculator-grid {\n            display: grid !important;\n            grid-template-columns: 1fr 1fr !important;\n            gap: 40px !important;\n            margin-bottom: 40px !important;\n        }\n\n        @media (max-width: 900px) {\n            #didi-cost-calculator .calculator-grid {\n                grid-template-columns: 1fr !important;\n            }\n        }\n\n        \/* Input Controls Side *\/\n        #didi-cost-calculator .input-panel {\n            background-color: #f9fafb !important;\n            padding: 30px !important;\n            border-radius: 12px !important;\n            border: 1px solid #e5e7eb !important;\n        }\n\n        #didi-cost-calculator .input-group {\n            margin-bottom: 20px !important;\n        }\n\n        #didi-cost-calculator .input-label {\n            display: block !important;\n            font-size: 14px !important;\n            font-weight: 700 !important;\n            color: #374151 !important;\n            margin-bottom: 8px !important;\n        }\n\n        #didi-cost-calculator .custom-input,\n        #didi-cost-calculator .custom-select {\n            width: 100% !important;\n            padding: 14px !important;\n            font-size: 16px !important;\n            border: 2px solid #d1d5db !important;\n            border-radius: 8px !important;\n            background-color: #ffffff !important;\n            font-family: inherit !important;\n            color: #111827 !important;\n            transition: border-color 0.2s ease !important;\n        }\n\n        #didi-cost-calculator .custom-input:focus,\n        #didi-cost-calculator .custom-select:focus {\n            outline: none !important;\n            border-color: #00D8FF !important; \/* Primary Color Focus *\/\n        }\n\n        \/* Results Output Side *\/\n        #didi-cost-calculator .results-panel {\n            background-color: #111827 !important;\n            padding: 30px !important;\n            border-radius: 12px !important;\n            color: #ffffff !important;\n            display: flex !important;\n            flex-direction: column !important;\n        }\n\n        #didi-cost-calculator .result-row {\n            display: flex !important;\n            justify-content: space-between !important;\n            align-items: center !important;\n            padding: 15px 0 !important;\n            border-bottom: 1px solid #374151 !important;\n        }\n\n        #didi-cost-calculator .result-row:last-of-type {\n            border-bottom: none !important;\n        }\n\n        #didi-cost-calculator .result-label-group {\n            display: flex !important;\n            flex-direction: column !important;\n        }\n\n        #didi-cost-calculator .result-title {\n            font-size: 16px !important;\n            font-weight: 600 !important;\n            color: #f3f4f6 !important;\n        }\n\n        #didi-cost-calculator .result-subtitle {\n            font-size: 12px !important;\n            color: #9ca3af !important;\n            margin-top: 4px !important;\n        }\n\n        #didi-cost-calculator .result-value {\n            font-size: 16px !important;\n            font-weight: 700 !important;\n            color: #00D8FF !important; \/* Primary Color *\/\n            text-align: right !important;\n        }\n\n        #didi-cost-calculator .total-row {\n            margin-top: auto !important;\n            background-color: #1f2937 !important;\n            padding: 20px !important;\n            border-radius: 8px !important;\n            border-left: 4px solid #FFD848 !important; \/* Secondary Color *\/\n        }\n\n        #didi-cost-calculator .total-title {\n            font-size: 14px !important;\n            font-weight: 700 !important;\n            color: #9ca3af !important;\n            text-transform: uppercase !important;\n            letter-spacing: 0.05em !important;\n            margin-bottom: 8px !important;\n        }\n\n        #didi-cost-calculator .total-value {\n            font-size: 28px !important;\n            font-weight: 700 !important;\n            color: #FFD848 !important; \/* Secondary Color *\/\n        }\n\n        #didi-cost-calculator .total-disclaimer {\n            font-size: 12px !important;\n            color: #9ca3af !important;\n            margin-top: 10px !important;\n            line-height: 1.4 !important;\n        }\n\n        \/* Text & Disclaimers *\/\n        #didi-cost-calculator .fine-print {\n            font-size: 13px !important;\n            color: #6b7280 !important;\n            line-height: 1.6 !important;\n            margin-bottom: 40px !important; \/* \u8c03\u6574\u4e86\u5916\u8fb9\u8ddd\u4ee5\u8fde\u63a5 CTA *\/\n            padding: 20px !important;\n            background-color: #f3f4f6 !important;\n            border-radius: 8px !important;\n        }\n\n        \/* CTA Section *\/\n        #didi-cost-calculator .cta-section {\n            text-align: center !important;\n            padding: 40px !important;\n            background-color: #f9fafb !important;\n            border: 2px dashed #d1d5db !important;\n            border-radius: 12px !important;\n        }\n\n        #didi-cost-calculator .cta-heading {\n            font-size: 24px !important;\n            font-weight: 700 !important;\n            color: #111827 !important;\n            margin-bottom: 10px !important;\n        }\n\n        #didi-cost-calculator .cta-desc {\n            font-size: 16px !important;\n            color: #4b5563 !important;\n            margin-bottom: 24px !important;\n        }\n\n        #didi-cost-calculator .cta-btn {\n            display: inline-block !important;\n            background-color: #FFD848 !important; \/* Secondary Color *\/\n            color: #111827 !important;\n            font-weight: 700 !important;\n            font-size: 18px !important;\n            padding: 16px 36px !important;\n            border-radius: 8px !important;\n            text-decoration: none !important;\n            border: none !important;\n            cursor: pointer !important;\n            transition: all 0.3s ease !important;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;\n        }\n\n        #didi-cost-calculator .cta-btn:hover {\n            background-color: #ffcc1a !important;\n            transform: translateY(-2px) !important;\n            box-shadow: 0 6px 12px rgba(255, 216, 72, 0.3) !important;\n        }\n    <\/style>\n\n    <!-- HTML Structure -->\n    <div class=\"module-title\" role=\"heading\" aria-level=\"2\">Total Landed Cost Calculator<\/div>\n    <div class=\"module-subtitle\">FOB + freight + insurance + customs + local taxes + install. See your true installed cost \u2014 not just the equipment quote.<\/div>\n\n    <div class=\"buyer-regret-banner\">\n        The most common buyer regret: &#8220;Quoted $25K, paid $32K after freight + customs + install.&#8221; This tool fixes that.\n    <\/div>\n\n    <div class=\"calculator-grid\">\n        <!-- Left: Inputs -->\n        <div class=\"input-panel\">\n            <div class=\"input-group\">\n                <label class=\"input-label\">FOB Equipment Value (USD)<\/label>\n                <input type=\"number\" id=\"calc-fob\" class=\"custom-input\" value=\"30000\" min=\"0\">\n            <\/div>\n\n            <div class=\"input-group\">\n                <label class=\"input-label\">Container Size<\/label>\n                <select id=\"calc-container\" class=\"custom-select\">\n                    <option value=\"40hq\">1 \u00d7 40&#8217;HQ (76 m\u00b3)<\/option>\n                    <option value=\"20gp\">1 \u00d7 20&#8217;GP (33 m\u00b3)<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"input-group\">\n                <label class=\"input-label\">Destination Country<\/label>\n                <select id=\"calc-country\" class=\"custom-select\">\n                    <option value=\"US\">United States<\/option>\n                    <option value=\"EU\">European Union<\/option>\n                    <option value=\"AU\">Australia<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"input-group\">\n                <label class=\"input-label\">Destination Port<\/label>\n                <select id=\"calc-port\" class=\"custom-select\">\n                    <option value=\"major\">Major Port<\/option>\n                    <option value=\"inland\">Inland \/ Secondary Port<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"input-group\">\n                <label class=\"input-label\">Insurance (% of FOB)<\/label>\n                <input type=\"number\" id=\"calc-insurance-pct\" class=\"custom-input\" value=\"1.5\" step=\"0.1\" min=\"0\">\n            <\/div>\n\n            <div class=\"input-group\">\n                <label class=\"input-label\">Installation Labor (USD)<\/label>\n                <input type=\"number\" id=\"calc-install\" class=\"custom-input\" value=\"2500\" min=\"0\">\n            <\/div>\n        <\/div>\n\n        <!-- Right: Output Slip -->\n        <div class=\"results-panel\">\n            <div class=\"result-row\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">FOB equipment value<\/span>\n                    <span class=\"result-subtitle\">Factory price<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-fob\">$30,000<\/div>\n            <\/div>\n\n            <div class=\"result-row\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">Sea freight<\/span>\n                    <span class=\"result-subtitle\" id=\"out-freight-desc\">40HQ \u00b7 AM lane<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-freight\">$2,800 \u2013 $3,500<\/div>\n            <\/div>\n\n            <div class=\"result-row\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">Insurance<\/span>\n                    <span class=\"result-subtitle\" id=\"out-insurance-desc\">1.5% of FOB<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-insurance\">$450<\/div>\n            <\/div>\n\n            <div class=\"result-row\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">Customs duty<\/span>\n                    <span class=\"result-subtitle\">4-7% of CIF<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-customs\">$1,330 \u2013 $2,377<\/div>\n            <\/div>\n\n            <div class=\"result-row\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">Local VAT \/ GST<\/span>\n                    <span class=\"result-subtitle\" id=\"out-tax-desc\">None<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-tax\">$0<\/div>\n            <\/div>\n\n            <div class=\"result-row\" style=\"margin-bottom: 20px;\">\n                <div class=\"result-label-group\">\n                    <span class=\"result-title\">Installation labor<\/span>\n                    <span class=\"result-subtitle\">On-site crew + tools<\/span>\n                <\/div>\n                <div class=\"result-value\" id=\"out-install\">$2,500<\/div>\n            <\/div>\n\n            <div class=\"total-row\">\n                <div class=\"total-title\">ESTIMATED TOTAL LANDED COST<\/div>\n                <div class=\"total-value\" id=\"out-total\">$37,080 \u2013 $38,827<\/div>\n                <div class=\"total-disclaimer\">Range based on freight + duty bands. Final figure confirmed at quotation.<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Fine Print & Links -->\n    <div class=\"fine-print\">\n        Estimates only. Actual freight, customs, and tax depend on HS code (typically 9506.99), specific port, broker fees, and current trade lane rates. Didi Land provides exact CIF + customs estimate at quotation stage \u2014 including HS classification and broker handover.\n    <\/div>\n\n    <!-- CTA Section -->\n    <div class=\"cta-section\">\n        <div class=\"cta-heading\" role=\"heading\" aria-level=\"3\">Ready to discuss your project?<\/div>\n        <div class=\"cta-desc\">Get a transparent quotation with HS code, CIF estimate, and broker handover.<\/div>\n        <a href=\"#ct-popup-800\" class=\"cta-btn\">Request Custom Quote<\/a>\n    <\/div>\n\n    <!-- Principle 5: Vanilla JavaScript for Dynamic Calculation -->\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Get inputs\n            const fobInput = document.getElementById('calc-fob');\n            const containerInput = document.getElementById('calc-container');\n            const countryInput = document.getElementById('calc-country');\n            const insurancePctInput = document.getElementById('calc-insurance-pct');\n            const installInput = document.getElementById('calc-install');\n\n            \/\/ Get outputs\n            const outFob = document.getElementById('out-fob');\n            const outFreight = document.getElementById('out-freight');\n            const outFreightDesc = document.getElementById('out-freight-desc');\n            const outInsurance = document.getElementById('out-insurance');\n            const outInsuranceDesc = document.getElementById('out-insurance-desc');\n            const outCustoms = document.getElementById('out-customs');\n            const outTax = document.getElementById('out-tax');\n            const outTaxDesc = document.getElementById('out-tax-desc');\n            const outInstall = document.getElementById('out-install');\n            const outTotal = document.getElementById('out-total');\n\n            \/\/ Formatter for currency\n            const formatter = new Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n                maximumFractionDigits: 0\n            });\n\n            function calculate() {\n                \/\/ Parse inputs\n                const fob = parseFloat(fobInput.value) || 0;\n                const insPct = parseFloat(insurancePctInput.value) || 0;\n                const install = parseFloat(installInput.value) || 0;\n                const container = containerInput.value;\n                const country = countryInput.value;\n\n                \/\/ Logic specific to prompt requirements\n                \/\/ Base freight ranges\n                let freightLow = 2800;\n                let freightHigh = 3500;\n                if (container === '20gp') {\n                    freightLow = 1500;\n                    freightHigh = 2000;\n                    outFreightDesc.textContent = \"20GP \u00b7 Standard lane\";\n                } else {\n                    outFreightDesc.textContent = \"40HQ \u00b7 AM lane\";\n                }\n\n                \/\/ Insurance\n                const insurance = fob * (insPct \/ 100);\n                outInsuranceDesc.textContent = `${insPct}% of FOB`;\n\n                \/\/ CIF (Cost, Insurance, Freight) - using average freight for duty calculation\n                const avgFreight = (freightLow + freightHigh) \/ 2;\n                const cif = fob + avgFreight + insurance;\n\n                \/\/ Customs Duty (4-7% of CIF)\n                const customsLow = cif * 0.04;\n                const customsHigh = cif * 0.07;\n\n                \/\/ Taxes based on country\n                let taxRate = 0;\n                if (country === 'US') {\n                    taxRate = 0;\n                    outTaxDesc.textContent = \"None\";\n                } else if (country === 'EU') {\n                    taxRate = 0.20; \/\/ Avg 20% VAT\n                    outTaxDesc.textContent = \"20% VAT\";\n                } else if (country === 'AU') {\n                    taxRate = 0.10; \/\/ 10% GST\n                    outTaxDesc.textContent = \"10% GST\";\n                }\n\n                const taxCost = cif * taxRate;\n\n                \/\/ Totals\n                const totalLow = fob + freightLow + insurance + customsLow + taxCost + install;\n                const totalHigh = fob + freightHigh + insurance + customsHigh + taxCost + install;\n\n                \/\/ Render Outputs\n                outFob.textContent = formatter.format(fob);\n                outFreight.textContent = `${formatter.format(freightLow)} \u2013 ${formatter.format(freightHigh)}`;\n                outInsurance.textContent = formatter.format(insurance);\n                outCustoms.textContent = `${formatter.format(customsLow)} \u2013 ${formatter.format(customsHigh)}`;\n                outTax.textContent = formatter.format(taxCost);\n                outInstall.textContent = formatter.format(install);\n                \n                outTotal.textContent = `${formatter.format(totalLow)} \u2013 ${formatter.format(totalHigh)}`;\n            }\n\n            \/\/ Attach event listeners\n            const inputs = [fobInput, containerInput, countryInput, insurancePctInput, installInput, document.getElementById('calc-port')];\n            inputs.forEach(input => {\n                input.addEventListener('input', calculate);\n                input.addEventListener('change', calculate);\n            });\n\n            \/\/ Initial calculation to set the default values\n            calculate();\n        });\n    <\/script>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Total Landed Cost Calculator FOB + freight + insurance + customs + local taxes + install. See your true installed cost \u2014 not just the equipment quote. The most common buyer regret: &#8220;Quoted $25K, paid $32K after freight + customs + install.&#8221; This tool fixes that. FOB Equipment Value (USD) Container Size 1 \u00d7 40&#8217;HQ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1249,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-1314","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/pages\/1314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/comments?post=1314"}],"version-history":[{"count":0,"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/pages\/1314\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/pages\/1249"}],"wp:attachment":[{"href":"https:\/\/didiplayarea.com\/pt\/wp-json\/wp\/v2\/media?parent=1314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}