---
phase: 14-mobile-modal-fix
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
autonomous: true
delegation: off
---

<objective>
## Goal
Fix: modal rezerwacji nie otwiera się na mobile/tablet — przenieść overlay do document.body aby uniezależnić od ukrytych sekcji Elementor.

## Purpose
Formularz rezerwacji był niefunkcjonalny na urządzeniach mobilnych i tabletach — klienci nie mogli złożyć rezerwacji z telefonu.

## Output
- Modal otwiera się poprawnie na mobile i tablet
- Brak regresji na desktop
</objective>

<context>
## Project Context
@.paul/PROJECT.md

## Source Files
@wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
</context>

<acceptance_criteria>

## AC-1: Modal otwiera się na mobile
```gherkin
Given strona carei.pagedev.pl otwarta na urządzeniu mobilnym (375px)
When użytkownik wypełni hero search form i kliknie "Złóż zapytanie o rezerwację"
Then modal rezerwacji otwiera się na pełnym ekranie z pre-wypełnionymi danymi
```

## AC-2: Brak regresji desktop
```gherkin
Given strona otwarta na desktopie
When użytkownik kliknie przycisk otwarcia modala
Then modal otwiera się jak dotychczas (centered overlay)
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Przenieś overlay do document.body w initRefs()</name>
  <files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js</files>
  <action>
    W funkcji initRefs(), po querySelector overlay, dodać:
    if (overlay && overlay.parentElement !== document.body) {
        document.body.appendChild(overlay);
    }
    Przyczyna: sekcja Elementor (elementor-element-a7629b1) ma klasy
    elementor-hidden-tablet elementor-hidden-mobile, co ustawia display:none
    na rodzicu. Modal position:fixed wewnątrz ukrytego rodzica ma zerowe wymiary.
  </action>
  <verify>Otworzyć stronę na mobile (375px), wypełnić formularz, kliknąć submit — modal się otwiera</verify>
  <done>AC-1, AC-2 satisfied</done>
</task>

</tasks>

<boundaries>
## DO NOT CHANGE
- CSS modala (carei-reservation.css)
- Elementor widget PHP
- Logika formularza i API

## SCOPE LIMITS
- Tylko fix JS — jedna linijka appendChild
</boundaries>

<verification>
- [ ] Modal otwiera się na mobile (375px)
- [ ] Modal otwiera się na tablet (768px)
- [ ] Modal otwiera się na desktop (1440px)
- [ ] Pre-fill z hero search form działa na mobile
</verification>

<success_criteria>
- Modal działa na wszystkich breakpointach
- Brak regresji
</success_criteria>

<output>
After completion, create `.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md`
</output>