/* Start custom CSS for section, class: .elementor-element-f9a1bbc */<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator wynajmu dmuchańców</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
    }
    h2 {
      margin-top: 40px;
    }
    .castle {
      border: 1px solid #ccc;
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 8px;
    }
    .castle img {
      max-width: 100%;
      height: auto;
      margin-top: 10px;
    }
    .totals {
      margin-top: 30px;
      font-weight: bold;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h1>Kalkulator wynajmu dmuchańców</h1>

  <form id="calcForm">
    <div class="castle">
      <label><strong>1. Największy zamek dmuchany (dwa ślizgi)</strong></label><br>
      <select name="castle1">
        <option value="0">Nie wybieram</option>
        <option value="750">Wynajem 3h + 1h gratis – 750 zł</option>
        <option value="1050">Wynajem całodniowy – 1050 zł</option>
      </select>
      <img src="TUTAJ_PODAJ_LINK_DO_OBRAZU_1" alt="Największy zamek">
    </div>

    <div class="castle">
      <label><strong>2. Duża zjeżdżalnia dmuchana ALE (z jednym ślizgiem)</strong></label><br>
      <select name="castle2">
        <option value="0">Nie wybieram</option>
        <option value="650">Wynajem 3h + 1h gratis – 650 zł</option>
        <option value="950">Wynajem całodniowy – 950 zł</option>
      </select>
      <img src="TUTAJ_PODAJ_LINK_DO_OBRAZU_2" alt="Zjeżdżalnia ALE">
    </div>

    <div class="castle">
      <label><strong>3. Mały dmuchaniec Fort (dzieci do 8 r.ż)</strong></label><br>
      <select name="castle3">
        <option value="0">Nie wybieram</option>
        <option value="180">Wynajem 3h + 1h gratis – 180 zł</option>
        <option value="700">Wynajem całodniowy – 700 zł</option>
      </select>
      <label>
        <input type="checkbox" name="operator"> Czy potrzebna obsługa?
      </label>
      <img src="TUTAJ_PODAJ_LINK_DO_OBRAZU_3" alt="Fort">
    </div>

    <label for="distance">Odległość od Gniezna (km):</label>
    <input type="number" id="distance" name="distance" min="0" value="0">

    <div class="totals">
      <p id="summary">Całkowita kwota: 0 zł</p>
    </div>
  </form>

  <script>
    const form = document.getElementById('calcForm');
    const summary = document.getElementById('summary');

    form.addEventListener('change', () => {
      const castle1 = parseFloat(form.castle1.value);
      const castle2 = parseFloat(form.castle2.value);
      const castle3 = parseFloat(form.castle3.value);
      const operatorChecked = form.operator.checked;
      const distance = parseFloat(form.distance.value);

      const selectedCount = [castle1, castle2, castle3].filter(price => price > 0).length;

      let subtotal = castle1 + castle2 + castle3;

      // Obsługa – tylko jeśli Fort jest wybrany
      if (castle3 > 0 && operatorChecked) {
        subtotal += (castle3 === 700) ? 320 : 180;
      }

      // Zniżki
      if (selectedCount === 2) {
        subtotal *= 0.9;
      } else if (selectedCount === 3) {
        subtotal *= 0.85;
      }

      // Dojazd
      let delivery = 0;
      if (distance > 25) {
        delivery = (distance - 25) * 1.5;
      }

      const total = Math.round(subtotal + delivery);
      summary.innerText = `Całkowita kwota: ${total} zł`;
    });
  </script>
</body>
</html>/* End custom CSS */