/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

#events h3 {
	/* add your css rule here */
}

#events p.duration, 
#events div.duration {
	/* add your css rule here */
}

#events p.description, 
#events div.description {
	/* add your css rule here */
}

#events .selectedEvent {
	/* add your css rule here */
}

#events input.reserve_time_btn {
	/* add your css rule here */
}

#events input.select_another_btn {
	/* add your css rule here */
}

#eventForm #start_date-block-container h3, 
#eventForm #timeline-container h3 {
	/* add your css rule here */
}

#eventForm #save_button {
	/* add your css rule here */
}

div.ui-widget-content {
	/* add your css rule here */
}

div.ui-widget-header {
	/* add your css rule here */
}

#timeline-container table.timeline {
	/* add your css rule here */
}

.timeline td.not_worked_time {
	/* add your css rule here */
}

.timeline td.free_time {
	/* add your css rule here */
}

.timeline td.selected_time {
	/* add your css rule here */
}

.timeline td.reserved_time {
	/* add your css rule here */
}

div#loading {
	/* add your css rule here */
}

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
	/* add your css rule here */
}
/* === HANGMAN: Quantity of TVs dropdown ===
   Paste this in Manage → Booking Website → Custom CSS/JS
   It styles and runs inside the legacy iframe widget
------------------------------------------------------*/

/* --- Style for the Quantity dropdown --- */
#tvQuantity {
  display:inline-block;
  margin:6px 0 12px 6px;
  padding:6px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
  background-color:#fff;
  color:#333;
}
label[for="tvQuantity"] {
  display:block;
  font-weight:600;
  margin-top:10px;
  color:#222;
}

/* --- Optional polish for price / subtotal text --- */
.price, .subtotal {
  font-weight:600;
  color:#000;
}

/* === JavaScript === */
<script>
document.addEventListener('DOMContentLoaded', function () {
  const observer = new MutationObserver(() => {
    const priceEl = document.querySelector('.price span');
    const subtotalEl = document.querySelector('.subtotal');
    const existingQty = document.querySelector('#tvQuantity');

    if (priceEl && !existingQty) {
      /* ----- Build label + dropdown ----- */
      const qtyLabel = document.createElement('label');
      qtyLabel.setAttribute('for','tvQuantity');
      qtyLabel.textContent = 'Number of TVs:';
      const qtySelect = document.createElement('select');
      qtySelect.id = 'tvQuantity';
      qtySelect.innerHTML = `
        <option value="1">1 TV</option>
        <option value="2">2 TVs</option>
        <option value="3">3 TVs</option>
        <option value="4">4 TVs</option>
        <option value="5">5 TVs</option>
      `;

      /* Insert it just after the price */
      priceEl.parentElement.insertAdjacentElement('afterend', qtyLabel);
      qtyLabel.insertAdjacentElement('afterend', qtySelect);

      /* When quantity changes → update subtotal + booking note */
      qtySelect.addEventListener('change', () => {
        const qty = parseInt(qtySelect.value);
        const basePrice = parseFloat(priceEl.textContent.replace('$','')) || 0;
        const total = (basePrice * qty).toFixed(2);
        if (subtotalEl) subtotalEl.textContent = '$' + total;

        const noteField = document.querySelector('textarea[name="client_comment"]');
        if (noteField) noteField.value = `Quantity selected: ${qty} TV${qty>1?'s':''}`;
      });
    }
  });

  observer.observe(document.body, { childList:true, subtree:true });
});
</script>



// === Auto Update Total Based on Quantity Selection ===
document.addEventListener('DOMContentLoaded', function () {
  const observer = new MutationObserver(() => {
    const qtyField = document.querySelector('select[name="How many TVs do you want to mount?"]');
    const priceElement = document.querySelector('.price span');
    const subtotalElement = document.querySelector('.subtotal');

    if (qtyField && priceElement && subtotalElement) {
      qtyField.addEventListener('change', () => {
        let quantity = parseInt(qtyField.value);
        let price = parseFloat(priceElement.innerText.replace('$', ''));
        let total = (price * quantity).toFixed(2);
        subtotalElement.innerText = '$' + total;
      });
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});