.elementor-1278 .elementor-element.elementor-element-e1836f7{--display:flex;}
/* Start custom CSS for container, class: .elementor-element-e1836f7 */<script>
document.addEventListener('DOMContentLoaded', function () {

    const oilType = document.getElementById('oilType');
    const litersInput = document.getElementById('liters');

    const productNameEl = document.getElementById('productName');
    const literTextEl = document.getElementById('literText');
    const pricePerLiterEl = document.getElementById('pricePerLiter');
    const totalPriceEl = document.getElementById('totalPrice');

    function calculatePrice() {
        let price = parseFloat(oilType.value);
        let productName = oilType.options[oilType.selectedIndex].dataset.name;
        let liters = parseInt(litersInput.value);

        if (isNaN(liters) || liters < 2000) liters = 2000;
        if (liters > 32000) liters = 32000;

        litersInput.value = liters;

        productNameEl.textContent = productName;
        literTextEl.textContent = liters + " Liter";
        pricePerLiterEl.textContent = price.toFixed(2) + "€";
        totalPriceEl.textContent = (price * liters).toFixed(2) + "€";
    }

    oilType.addEventListener('change', calculatePrice);
    litersInput.addEventListener('input', calculatePrice);

    calculatePrice();
});
</script>/* End custom CSS */