<section class="fp-booking-simple">
<style>
.fp-booking-simple{
--fp-violet:#762a84;
--fp-yellow:#FFD200;
--fp-bg:#f7f2ff;
--fp-border:#e1d2f0;
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
padding:clamp(24px,4vw,40px) 0;
background:#fff;
}
.fp-bs-inner{
max-width:960px;
margin:0 auto;
padding:0 16px;
}
.fp-bs-title{
font-size:clamp(26px,3vw,32px);
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--fp-violet);
margin:0 0 6px;
}
.fp-bs-sub{
font-size:14px;
color:#555;
margin:0 0 20px;
}
.fp-bs-wrap{
display:grid;
grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);
gap:clamp(16px,2.4vw,28px);
align-items:flex-start;
}
@media(max-width:800px){
.fp-bs-wrap{
grid-template-columns:1fr;
}
}
/* LEWA STRONA – opis + kroki */
.fp-bs-panel{
background:var(--fp-bg);
border-radius:18px;
border:1px solid var(--fp-border);
padding:16px 16px 18px;
}
.fp-bs-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
margin-bottom:10px;
border-radius:999px;
background:#fff;
border:1px solid var(--fp-border);
font-size:11px;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--fp-violet);
font-weight:600;
}
.fp-bs-panel h2{
font-size:18px;
margin:0 0 8px;
color:#222;
}
.fp-bs-panel p{
font-size:13px;
margin:0 0 8px;
color:#555;
line-height:1.5;
}
.fp-bs-steps{
list-style:none;
margin:10px 0 4px;
padding:0;
}
.fp-bs-step{
display:flex;
align-items:flex-start;
gap:8px;
padding:6px 0;
font-size:13px;
color:#333;
}
.fp-bs-step-num{
width:22px;
height:22px;
border-radius:999px;
background:var(--fp-violet);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
flex-shrink:0;
}
.fp-bs-step strong{
color:var(--fp-violet);
}
.fp-bs-info{
margin-top:10px;
font-size:12px;
color:#666;
padding:8px 10px;
border-radius:12px;
background:#fff;
border:1px dashed var(--fp-border);
}
.fp-bs-contact{
margin-top:10px;
font-size:12px;
color:#333;
padding:9px 10px;
border-radius:12px;
background:#fff;
border:1px solid var(--fp-border);
}
.fp-bs-contact strong{
color:var(--fp-violet);
}
/* PRAWA STRONA – widget Bookero */
.fp-bs-widget{
background:#fff;
border-radius:18px;
border:1px solid var(--fp-border);
padding:14px;
box-shadow:0 14px 32px rgba(0,0,0,0.05);
}
.fp-bs-widget-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:6px;
}
.fp-bs-widget-title{
font-size:15px;
font-weight:700;
margin:0;
color:#222;
}
.fp-bs-widget-pill{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.08em;
padding:4px 10px;
border-radius:999px;
background:var(--fp-violet);
color:#fff;
font-weight:600;
}
.fp-bs-widget-note{
font-size:11px;
color:#777;
margin:0 0 8px;
}
#bookero{
min-height:520px; /* żeby nie skakało przy ładowaniu */
}
</style>
<div class="fp-bs-inner">
<h1 class="fp-bs-title">Rezerwacja online</h1>
<p class="fp-bs-sub">
Wybierz rodzaj atrakcji, termin i godzinę – system automatycznie pokaże dostępne miejsca.
Rezerwacja zajmie Ci dosłownie chwilę.
</p>
<div class="fp-bs-wrap">
<!-- LEWA KOLUMNA -->
<div class="fp-bs-panel">
<div class="fp-bs-badge">Szybko • Prosto • Online</div>
<h2>Jak zarezerwować?</h2>
<p>Cały proces odbywa się online – bez dzwonienia, bez wymiany dziesięciu wiadomości.</p>
<ul class="fp-bs-steps">
<li class="fp-bs-step">
<span class="fp-bs-step-num">1</span>
<div>
<strong>Wybierz usługę</strong><br>
Urodziny, Laser Tag, Pixele lub wejście indywidualne – zaznacz to, czego potrzebujesz.
</div>
</li>
<li class="fp-bs-step">
<span class="fp-bs-step-num">2</span>
<div>
<strong>Wybierz dzień i godzinę</strong><br>
Kalendarz pokaże tylko dostępne terminy. Zajęte godziny są automatycznie ukryte.
</div>
</li>
<li class="fp-bs-step">
<span class="fp-bs-step-num">3</span>
<div>
<strong>Podaj dane kontaktowe</strong><br>
Imię, telefon i e-mail – dzięki nim potwierdzimy Twoją rezerwację.
</div>
</li>
<li class="fp-bs-step">
<span class="fp-bs-step-num">4</span>
<div>
<strong>Potwierdź rezerwację</strong><br>
Otrzymasz potwierdzenie oraz wszystkie szczegóły na podany adres e-mail.
</div>
</li>
</ul>
<div class="fp-bs-info">
ℹ️ Jeśli rezerwujesz termin „na już” (np. na dziś lub jutro), najlepiej dodatkowo
skontaktuj się z nami telefonicznie, żeby wszystko dopiąć na ostatni guzik.
</div>
<div class="fp-bs-contact">
Masz pytania lub potrzebujesz niestandardowego pakietu?<br>
Napisz: <strong>rezerwacje@fun-park.show</strong><br>
lub zadzwoń: <strong>+48 000 000 000</strong>
</div>
</div>
<!-- PRAWA KOLUMNA – BOOKERO -->
<div class="fp-bs-widget">
<div class="fp-bs-widget-head">
<p class="fp-bs-widget-title">Kalendarz rezerwacji</p>
<span class="fp-bs-widget-pill">Zarezerwuj teraz</span>
</div>
<p class="fp-bs-widget-note">
Wybierz usługę z listy, następnie termin i godzinę. System poprowadzi Cię krok po kroku.
</p>
<div id="bookero"></div>
</div>
</div>
</div>
<!-- SKRYPT BOOKERO -->
<script type="text/javascript">
var bookero_config = {
id: 'tlEFuvpmbCSt', // jeśli Bookero da inne ID, podmień tutaj
container: 'bookero',
type: 'full',
position: '',
plugin_css: true,
lang: 'pl'
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://cdn.bookero.pl/plugin/v2/js/bookero-compiled.js';
d.body.appendChild(s);
})();
</script>
</section>
Blog
-
-
Witaj, świecie!
Witamy w WordPressie. To jest twój pierwszy wpis. Edytuj go lub usuń, a następnie zacznij pisać!