══════════════════════════════════════════════════════════════
INTERACTIVE FORMS — Functionality Overview
══════════════════════════════════════════════════════════════

A multi-step form built from scratch — designed to handle
real-world booking scenarios with all the logic behind it.


═══ STEP 1 — Event & Hotel Selection ═══

• Multiple events with quantity counters (+ / − buttons)
  Each event has its own pricing and tracking.

• Hotel toggle (Yes / No) — when toggled to "Yes":
    - Two date pickers appear (arrival / departure)
    - Custom calendar with disabled past dates
    - Departure date can't be before arrival date
    - Number of nights calculated automatically
    - Room type selector (Single / Twin / Double / Apartment)
      with different price per night

• Donation field (optional, any amount)

• Live total — recalculated on every change.


═══ STEP 2 — Personal Data (with smart logic) ═══

• Main participant fields:
  First name, last name, phone, email, country, observations.

• Validation:
    - Empty required fields → red error banner
    - Email without "@" or invalid format → "Format incorect"
    - Phone with letters or wrong length → "Format incorect"

• Conditional extra participants:
  If more than 1 person is selected at any event in Step 1,
  Step 2 automatically generates additional cards for each
  extra participant — same fields, same validation rules.

  Example: if 3 people selected → 1 main card + 2 extra cards.


═══ STEP 3 — Summary ═══

Auto-generated recap of everything selected:
  - Events with quantities
  - Hotel details (dates, nights, room type)
  - Personal data for all participants
  - Donation
  - Total

User can go back and edit anything before confirming.


═══ STEP 4 — Confirmation ═══

On submission:
  - A unique booking reference is generated
    (format: R-XXXXXX, based on timestamp)
  - Success message displayed
  - Navigation buttons hidden — booking is final.


═══ TECH ═══

Built with pure HTML / CSS / JavaScript — no frameworks,
no libraries. Fully responsive (mobile-first), works offline
once loaded, and easy to embed in any site.

══════════════════════════════════════════════════════════════