.elementor-9039 .elementor-element.elementor-element-e508286 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}.elementor-9039 .elementor-element.elementor-element-1fb1f25{box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5);}/* Start custom CSS for fluent-form-widget, class: .elementor-element-e508286 */<script>
document.addEventListener('DOMContentLoaded', function () {

  function calculatePenalty() {

    let total = parseFloat(document.querySelector('[name="total_price"]')?.value) || 0;
    let checkinVal = document.querySelector('[name="checkin_date"]')?.value;
    let cancelVal  = document.querySelector('[name="cancel_date"]')?.value;

    if (!checkinVal || !cancelVal) return;

    let checkin = new Date(checkinVal);
    let cancel  = new Date(cancelVal);

    let diffTime = checkin.getTime() - cancel.getTime();
    let daysLeft = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    let percent = 0.5;

    if (daysLeft >= 7) percent = 0.1;
    else if (daysLeft >= 3) percent = 0.3;

    let penaltyAmount = total * percent;

    document.querySelector('[name="penalty_percent"]').value = (percent * 100) + '٪';
    document.querySelector('[name="penalty_amount"]').value  = penaltyAmount.toLocaleString();

  }

  document.addEventListener('input', calculatePenalty);
});
</script>/* End custom CSS */