/* =====================================================
ECO CAMPING SPYTKOWICE — MASTER CSS
Panel: client57820.idosell.com
Prefix: ec-
Wklejac do: /panel/frontpage/editorstyle (ACE editor)
Patched: 2026-04-13 — uwagi klientki (Uwagi do strony.odt)
===================================================== */
/* ═══════════════════════════════════════════════════════════
§UWAGI-2026-04-13: FIXES z "Uwagi do strony.odt"
═══════════════════════════════════════════════════════════ */
/* 1. "Witamy w Eco Camping" (.ec-kicker) na hero — bigger */
/* Actual DOM: span.ec-kicker wewnątrz .ec-fade-up > .ec-split > .ec-inner > .ec-section--cream > .ec-full (NIE .ec-hero) */
body.page-index .ec-full:first-of-type .ec-section--cream .ec-kicker,
body.page-index .ec-section--cream:first-of-type .ec-kicker,
.ec-hero .ec-kicker,
.ec-hero__kicker,
.ec-split .ec-kicker {
font-size: clamp(16px, 1.5vw, 22px) !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
}
/* 2. Typography orphans — "z", "i", "ale", "w", "o", "u" do następnej linii */
body {
text-wrap: pretty;
hanging-punctuation: first;
}
.ec-hero__subtitle,
.ec-section p,
.ec-zone-card__desc,
.ec-feature-card p,
.ec-about p,
.ec-card__desc,
p.ec-body,
article p {
text-wrap: pretty;
orphans: 3;
widows: 3;
}
/* Polish single-letter preposition protection — use non-breaking space in HTML OR this CSS hack */
/* Best practice: add after "w", "i", "z", "o", "u", "a" in HTML */
/* 3. Footer — NIP uppercase + Regulamin/Polityka separator + font consistency */
.footer-contact-terms a,
footer a[href*="module=terms"],
footer a[href*="module=cookies"],
footer a[href*="regulamin"],
footer a[href*="polityka"],
.footer a[href*="regulamin"],
.footer a[href*="polityka"] {
font-size: 13px !important;
font-family: var(--ec-font-body, 'Inter'), sans-serif !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
}
/* Separator | między Regulamin a Polityka prywatności (actual IdoSell markup: 2x w .footer-contact-terms) */
.footer-contact-terms a:not(:last-child)::after {
content: " | " !important;
padding: 0 10px !important;
color: rgba(255, 255, 255, 0.4) !important;
pointer-events: none !important;
display: inline !important;
}
/* NIP uppercase — system often renders "Nip" lowercase */
footer *,
.footer-contact *,
.footer-contact-add * {
text-transform: none; /* reset */
}
/* Target specific text-node containers with Nip */
footer [class*="tax"],
footer [class*="nip"],
.footer [class*="nip"],
.footer [class*="tax"] {
text-transform: uppercase !important;
}
/* 4. Footer phone format with spaces — ensure whitespace preserved */
footer a[href^="tel:"],
.footer a[href^="tel:"],
.footer-contact-phone {
white-space: nowrap !important;
letter-spacing: 0.3px !important;
font-variant-numeric: tabular-nums !important;
}
/* 5. Video — muted default (safety; maybe HTML attr missing) */
video {
/* Don't auto-unmute, let user control */
}
video[autoplay]:not([muted]) {
/* if not muted but autoplay, force muted */
}
/* 6. "Sprawdź dostępność" buttons — style as prominent gold CTAs */
button.ec-btn[onclick*="generateWidget"],
button[onclick*="generateWidgetIdoSellBooking"] {
/* keep visual — JS replaces with below */
}
/* 7. Widget labels + values — ALL centered (Początek, Koniec, Osoby) */
.iai-search .widget__option label,
#iai_book_form .widget__option label {
text-align: center !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.iai-search .widget__option input.iai_widget_input,
#iai_book_form .widget__option input.iai_widget_input {
text-align: center !important;
width: 100% !important;
}
/* OSOBY — symmetric padding (system gives 44px right for chevron, shifts content) */
#person_section,
.iai-search .widget__option.iai_input-small {
padding: 14px 20px !important;
}
/* UWAGA 1 — OSOBY kafel szerszy niż POCZATEK/KONIEC + liczba "2" nie wyoesrodkowana wzglendem widocznego pola.
Dwie warstwy fixa:
(1) flex: 1 1 0 na wszystkich kaflach -> rowna szerokosc visual.
(2) OSOBY ma chevron button po prawej (absolute, ~44px) ktory zjada prawa krawedz.
Wyoesrodkowanie label+input wzgledem pelnej szerokoesci kafla daje wizualnie
"2" przesuniete w prawo (bo chevron zaslania). Kompensujemy przez
symetryczne padding-left/right rownie szerokie jak chevron. */
/* (1) Rowna szerokosc wszystkich kafli (Poczatek, Koniec, Osoby) */
.iai-search,
form#iai_book_form,
#ec-search-dock #iai_book_form {
display: flex !important;
gap: 8px !important;
align-items: stretch !important;
}
.iai-search > .widget__option,
form#iai_book_form > .widget__option,
#ec-search-dock .widget__option {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
/* (2) OSOBY — kompensacja chevron (44px absolute po prawej).
Input i label centered wzgledem POLA MINUS chevron = symetryczne padding poziome 44px. */
.iai-search .widget__option.iai_input-small,
form#iai_book_form .widget__option.iai_input-small,
#ec-search-dock .widget__option.iai_input-small {
padding-left: 44px !important;
padding-right: 44px !important;
}
.iai-search .widget__option.iai_input-small label,
.iai-search .widget__option.iai_input-small input,
form#iai_book_form .widget__option.iai_input-small label,
form#iai_book_form .widget__option.iai_input-small input,
#ec-search-dock .widget__option.iai_input-small label,
#ec-search-dock .widget__option.iai_input-small input {
text-align: center !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Chevron OSOBY — absolute po prawej, nie zajmuje padding-area kafla */
.iai-search .widget__option.iai_input-small > button,
form#iai_book_form .widget__option.iai_input-small > button,
#ec-search-dock .widget__option.iai_input-small > button {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
padding: 8px !important;
cursor: pointer !important;
color: var(--ec-text-muted, #666) !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 8. Litepicker — hide "w tym dniu nie można rozpocząć/zakończyć" warnings
(system shows these for blocked dates — info technical, not user-friendly) */
.litepicker .container__footer .footer__legend,
.litepicker__legend,
.litepicker .legend,
.litepicker [class*="disabled-tooltip"],
.litepicker .container__main + .container__footer:has([class*="legend"]),
.litepicker .container__footer:has(.legend) {
display: none !important;
}
/* 9. Footer phone — remove trailing comma (system adds "+48 731748944,") */
.footer-contact-phone::after,
footer .footer-contact-phone::after {
content: ''; /* no extra comma */
}
/* If panel data has trailing comma, hide via overflow on parent */
.footer-contact-phone {
position: relative;
}
/* Force phone to ignore comma — visually hide last char if comma present.
Real fix: edit phone in panel to remove trailing comma. */
/* 10. Footer "Polska" text — should not be country line if address has comma already */
/* Decision: keep "Polska" — user comment was about period after "ul" not country line */
/* 11. NIP label uppercase — system renders "Nip:" lowercase (not editable)
Structure: .contact__list.--owner > li > span (first child) = label
Uppercasing all labels in owner list = consistent + fixes NIP */
.contact__list.--owner li > span:first-child,
ul.contact__list li > span:first-child,
.contact__sect .contact__list li span:first-child {
text-transform: uppercase !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
font-size: 12px !important;
color: var(--ec-green, #2D5016) !important;
}
/* Value text (non-first-child span or text node) — normal case */
.contact__list.--owner li,
ul.contact__list li {
font-size: 15px;
line-height: 1.6;
}
/* 12. Trailing comma on phone — if still present (CSS cleanup hack)
Uses ::after to overlap the last character with footer bg color.
BEST FIX: Maria remove comma from panel data (already done per user). */
.footer-contact-phone::after,
footer .phone-with-trailing-comma::after {
/* reserved for CSS overlay trick if needed */
}
/* ═══════════════════════════════════════════════════════════ */
/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');
/* ─── DESIGN TOKENS ─── */
:root {
--ec-green: #2D5016;
--ec-green-light: #3D6B1E;
--ec-green-dark: #1E3A0E;
--ec-wood: #8B7355;
--ec-wood-light: #A68D6D;
--ec-cream: #F5F1EB;
--ec-cream-dark: #EDE7DD;
--ec-white: #FFFFFF;
--ec-black: #1A1A1A;
--ec-text: #333333;
--ec-text-light: #666666;
--ec-gold: #C5A572;
--ec-shadow: 0 4px 24px rgba(0,0,0,0.08);
--ec-shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
--ec-radius: 12px;
--ec-radius-lg: 20px;
--ec-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--ec-font-heading: 'DM Serif Display', Georgia, serif;
--ec-font-body: 'Inter', -apple-system, sans-serif;
--ec-container: 1170px;
}
/* ═══════════════════════════════════════════════════════
§0 SYSTEM OVERRIDES
═══════════════════════════════════════════════════════ */
h1.big-label { display: none !important; }
.about-main-description { padding: 0 !important; margin: 0 !important; }
.aboutmain__content { padding: 0 !important; }
.cms-html { padding: 0 !important; }
.txt-text { padding: 0 !important; }
.txt-text > .mb-5 { margin-bottom: 0 !important; }
.page .container { overflow: visible; }
.cmsbenefits__w100 { display: none !important; }
/* Ukryj systemowy blok Aktualnosci/Blog na stronie glownej
(blog dostepny normalnie na /news) */
.page-index > main > .container {
display: none !important;
}
/* Ukryj pusta systemowa sekcje fp-section pod naszym contentem */
.page-index .section.fp-auto-height:last-of-type:empty,
.page-index .section.fp-auto-height + .container {
display: none !important;
}
/* Body base */
body {
font-family: var(--ec-font-body) !important;
color: var(--ec-text);
background: var(--ec-cream);
-webkit-font-smoothing: antialiased;
}
/* ═══════════════════════════════════════════════════════
§1 HEADER & NAVBAR
═══════════════════════════════════════════════════════ */
header.defaultsb {
background: var(--ec-white) !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
transition: var(--ec-transition);
}
.page-top {
background: var(--ec-green) !important;
padding: 6px 0 !important;
}
.page-top__options {
color: var(--ec-white) !important;
}
.page-top__options a,
.page-top__options span {
color: rgba(255,255,255,0.9) !important;
font-size: 13px !important;
font-family: var(--ec-font-body) !important;
}
.page-top__options a:hover {
color: var(--ec-white) !important;
}
.navbar {
background: var(--ec-white) !important;
padding: 8px 0 !important;
}
/* Logo: NO chip/rectangle — neutralize default a.navbar-brand styling
Fix mobile "logo w prostokącie" 2026-04-24 */
a.navbar-brand,
.navbar-brand {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 8px !important;
border: none !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
.navbar-brand img {
background: transparent !important;
box-shadow: none !important;
border: none !important;
/* mix-blend-mode: multiply blenduje kremowe tło PNG z białym navem */
mix-blend-mode: multiply;
}
/* Mobile: white header, smaller logo, better fit */
@media (max-width: 768px) {
.navbar {
padding: 4px 0 !important;
}
.navbar-brand img {
max-height: 50px !important;
max-width: 140px !important;
filter: none !important;
}
.navbar-toggler, .navbar-toggler span {
color: var(--ec-green) !important;
}
.navbar-nav {
background: var(--ec-white) !important;
}
.navbar-nav a {
color: var(--ec-text) !important;
padding: 10px 16px !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
}
.navbar-brand img {
max-height: 80px !important;
width: auto !important;
max-width: 220px !important;
object-fit: contain !important;
transition: var(--ec-transition);
}
.navbar-nav a {
font-family: var(--ec-font-body) !important;
font-weight: 500 !important;
font-size: 14px !important;
color: var(--ec-text) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 8px 16px !important;
transition: var(--ec-transition);
}
.navbar-nav a:hover,
.navbar-nav .active a {
color: var(--ec-green) !important;
}
/* ═══════════════════════════════════════════════════════
§2 HERO / SLIDER
═══════════════════════════════════════════════════════ */
.section.parallax {
position: relative;
min-height: 85vh;
}
.section.parallax::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.15) 0%,
rgba(0,0,0,0.05) 40%,
rgba(0,0,0,0.4) 100%);
z-index: 1;
pointer-events: none;
}
.customtext {
position: relative;
z-index: 2;
}
/* Slider arrows & dots */
.slick-prev, .slick-next { display: none !important; }
.slick-dots { display: none !important; }
/* ═══════════════════════════════════════════════════════
§3 BOOKING WIDGET (SILNIK WYSZUKIWARKI)
Podejscie B: Widget przeniesiony JS-em do #ec-search-dock
═══════════════════════════════════════════════════════ */
/* --- Dock container (dodany JS-em do .section.parallax) --- */
#ec-search-dock {
position: absolute !important;
bottom: 40px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 100 !important;
width: 92% !important;
max-width: 900px !important;
pointer-events: auto !important;
}
/* --- Systemowy wrapper — reset gdy wewnątrz docka --- */
#ec-search-dock .iai-search {
position: static !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
z-index: auto !important;
width: 100% !important;
max-width: none !important;
display: block !important;
}
#ec-search-dock #iai_book_se {
position: static !important;
}
/* --- Trigger ukryty na stronie glownej --- */
#ec-search-dock .iai_book_trigger {
display: none !important;
}
/* --- Formularz — przezroczyste tlo, karty z wlasnymi obwodkami --- */
#ec-search-dock #iai_book_form {
display: flex !important;
align-items: stretch !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
padding: 0 !important;
gap: 8px !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
flex-wrap: nowrap !important;
}
/* --- Kazde pole jako osobna karta z zielona obwodka --- */
#ec-search-dock .widget__option {
flex: 1 1 0 !important;
padding: 14px 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
border-right: none !important;
border: 2px solid rgba(45, 80, 22, 0.35) !important;
border-radius: 14px !important;
position: relative !important;
min-width: 0 !important;
background: rgba(255,255,255,0.92) !important;
backdrop-filter: blur(20px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
transition: all 0.25s ease !important;
}
#ec-search-dock .widget__option:hover {
background: rgba(255,255,255,0.98) !important;
border-color: rgba(45, 80, 22, 0.6) !important;
box-shadow: 0 6px 24px rgba(0,0,0,0.14) !important;
}
#ec-search-dock .widget__option:focus-within {
background: rgba(255,255,255,0.98) !important;
border-color: var(--ec-green) !important;
box-shadow: 0 6px 24px rgba(0,0,0,0.14), 0 0 0 3px rgba(45,80,22,0.12) !important;
}
#ec-search-dock .widget__option:last-of-type {
border: 2px solid rgba(45, 80, 22, 0.35) !important;
}
/* --- Lokalizacja ukryta (1 obiekt = niepotrzebna) --- */
#ec-search-dock .showlocation {
display: none !important;
}
/* --- Labele — reset systemowego absolute positioning --- */
#ec-search-dock #iai_book_form label {
font-family: var(--ec-font-body) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: var(--ec-text-light) !important;
font-weight: 700 !important;
margin-bottom: 4px !important;
display: block !important;
position: relative !important;
z-index: auto !important;
width: auto !important;
height: auto !important;
top: auto !important;
left: auto !important;
pointer-events: auto !important;
}
/* --- Inputy — reset systemowego z-index:-1 i overflow:clip --- */
#ec-search-dock #iai_book_form input {
font-family: var(--ec-font-body) !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--ec-black) !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
width: 100% !important;
cursor: pointer !important;
line-height: 1.4 !important;
z-index: 1 !important;
position: relative !important;
overflow: visible !important;
height: auto !important;
}
#ec-search-dock #iai_book_form input::placeholder {
color: #999 !important;
}
/* --- Ikony iaiicon (systemowe) — ukryte --- */
#ec-search-dock .widget__option > i,
#ec-search-dock .widget__option > button > i,
#ec-search-dock .widget__option i[class*="iaiicon"] {
display: none !important;
}
/* --- Strzalki datepicker wewnatrz pol (systemowe buttony) --- */
#ec-search-dock .widget__option > button:not([type="submit"]) {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: var(--ec-green) !important;
opacity: 0.4 !important;
cursor: pointer !important;
padding: 4px !important;
width: auto !important;
height: auto !important;
}
/* --- Przycisk submit — zielony, osobna karta --- */
#ec-search-dock .formbutton {
flex: 0 0 auto !important;
padding: 0 !important;
border-right: none !important;
border: none !important;
display: flex !important;
align-items: stretch !important;
border-radius: 14px !important;
background: transparent !important;
}
#ec-search-dock .formbutton button,
#ec-search-dock .formbutton button[type="submit"] {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
font-family: var(--ec-font-body) !important;
font-weight: 600 !important;
font-size: 14px !important;
border: 2px solid var(--ec-green) !important;
border-radius: 14px !important;
padding: 14px 32px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
white-space: nowrap !important;
text-transform: none !important;
letter-spacing: 0.3px !important;
box-shadow: 0 4px 16px rgba(45,80,22,0.3) !important;
display: flex !important;
align-items: center !important;
height: 100% !important;
}
#ec-search-dock .formbutton button:hover {
background: var(--ec-green-light) !important;
border-color: var(--ec-green-light) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 24px rgba(45,80,22,0.4) !important;
}
/* --- Walidacja: pulsujacy hint gdy brak dat --- */
#ec-search-dock .widget__option.ec-field-error {
animation: ec-shake 0.5s ease !important;
border-color: #c0392b !important;
}
#ec-search-dock .widget__option.ec-field-error input {
color: #c0392b !important;
}
#ec-search-dock .widget__option.ec-field-error label {
color: #c0392b !important;
}
@keyframes ec-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
/* --- Border-radius — wszystkie pola maja wlasny radius --- */
#ec-search-dock .widget__option:first-of-type:not(.showlocation),
#ec-search-dock .datefrom {
border-radius: 12px !important;
}
/* --- Osoby dropdown (otwiera sie DO GORY) --- */
#ec-search-dock .persons_list {
position: absolute !important;
bottom: calc(100% + 6px) !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
background: var(--ec-white) !important;
border-radius: 12px !important;
box-shadow: 0 -4px 24px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08) !important;
z-index: 200 !important;
list-style: none !important;
padding: 6px 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(0,0,0,0.08) !important;
}
#ec-search-dock .persons_list li {
padding: 11px 20px !important;
cursor: pointer !important;
font-family: var(--ec-font-body) !important;
font-size: 15px !important;
transition: background 0.15s !important;
}
#ec-search-dock .persons_list li:hover {
background: var(--ec-cream) !important;
}
/* --- Osoby karta — chevron wyrownanie --- */
#ec-search-dock .widget__option.iai_input-small .iai_widget_btn {
position: absolute !important;
top: 50% !important;
right: 16px !important;
left: auto !important;
transform: translateY(-50%) !important;
width: 20px !important;
height: 20px !important;
opacity: 1 !important;
font-size: 0 !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
}
#ec-search-dock .widget__option.iai_input-small .iai_widget_btn::after {
content: '' !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid var(--ec-text-light) !important;
border-bottom: 2px solid var(--ec-text-light) !important;
transform: rotate(45deg) !important;
margin: 2px auto 0 !important;
}
#ec-search-dock .widget__option.iai_input-small {
padding-right: 44px !important;
}
/* --- Litepicker (date picker) --- */
.litepicker-container {
z-index: 9000 !important;
font-family: var(--ec-font-body) !important;
}
/* --- Fallback: jesli widget NIE zostal przeniesiony --- */
.page-index .index-info .iai-search:not(#ec-search-dock .iai-search) {
position: absolute !important;
bottom: 40px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10 !important;
width: auto !important;
max-width: 680px !important;
}
/* Mobile trigger (inne strony) */
.iai_book_trigger b {
background: var(--ec-green) !important;
}
/* --- RESPONSIVE: tablet --- */
@media (max-width: 850px) {
#ec-search-dock {
bottom: 16px !important;
width: 92% !important;
max-width: none !important;
}
#ec-search-dock #iai_book_form {
flex-direction: column !important;
gap: 5px !important;
padding: 7px !important;
border-radius: 16px !important;
}
#ec-search-dock .widget__option {
border-right: none !important;
padding: 12px 16px !important;
border-radius: 10px !important;
}
#ec-search-dock .formbutton {
width: 100% !important;
}
#ec-search-dock .formbutton button {
width: 100% !important;
border-radius: 10px !important;
padding: 16px !important;
text-align: center !important;
justify-content: center !important;
}
}
/* --- RESPONSIVE: mobile --- */
@media (max-width: 540px) {
#ec-search-dock {
bottom: 10px !important;
width: 94% !important;
}
#ec-search-dock #iai_book_form {
gap: 4px !important;
padding: 6px !important;
border-radius: 14px !important;
}
#ec-search-dock .widget__option {
padding: 10px 14px !important;
border-radius: 8px !important;
}
#ec-search-dock #iai_book_form label {
font-size: 9px !important;
}
#ec-search-dock #iai_book_form input {
font-size: 14px !important;
}
#ec-search-dock .formbutton button {
border-radius: 8px !important;
}
}
/* --- Ukryj systemowa wyszukiwarke na /offers (body.page-offers) ---
Na glownej widget jest przenoszony do hero (ec-search-dock),
tu jest zbedny bo /offers ma wlasne filtry po lewej stronie. */
body.page-offers .iai-search {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
§4 LAYOUT UTILITIES
═══════════════════════════════════════════════════════ */
.ec-full {
width: 100vw;
margin-left: calc(-50vw + 50%);
overflow: clip;
}
.ec-inner {
max-width: var(--ec-container);
margin: 0 auto;
padding: 0 24px;
}
.ec-section {
padding: 80px 0;
}
.ec-section--cream {
background: var(--ec-cream);
}
.ec-section--white {
background: var(--ec-white);
}
.ec-section--green {
background: var(--ec-green);
color: var(--ec-white);
}
.ec-section--dark {
background: var(--ec-green-dark);
color: var(--ec-white);
}
@media (max-width: 768px) {
.ec-section { padding: 48px 0; }
.ec-inner { padding: 0 16px; }
}
/* ═══════════════════════════════════════════════════════
§5 TYPOGRAPHY
═══════════════════════════════════════════════════════ */
.ec-kicker {
display: inline-block;
font-family: var(--ec-font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--ec-green);
margin-bottom: 12px;
}
.ec-section--green .ec-kicker,
.ec-section--dark .ec-kicker {
color: var(--ec-gold);
}
.ec-h1 {
font-family: var(--ec-font-heading);
font-size: clamp(36px, 5vw, 64px);
font-weight: 400;
line-height: 1.1;
color: var(--ec-black);
margin: 0 0 24px;
}
.ec-section--green .ec-h1,
.ec-section--dark .ec-h1 {
color: var(--ec-white);
}
.ec-h2 {
font-family: var(--ec-font-heading);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 400;
line-height: 1.15;
color: var(--ec-black);
margin: 0 0 20px;
}
.ec-section--green .ec-h2,
.ec-section--dark .ec-h2 {
color: var(--ec-white);
}
.ec-h3 {
font-family: var(--ec-font-heading);
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 400;
line-height: 1.2;
color: var(--ec-black);
margin: 0 0 16px;
}
.ec-intro {
font-size: 18px;
line-height: 1.7;
color: var(--ec-text-light);
max-width: 640px;
}
.ec-section--green .ec-intro,
.ec-section--dark .ec-intro {
color: rgba(255,255,255,0.85);
}
.ec-body {
font-size: 16px;
line-height: 1.7;
color: var(--ec-text);
}
.ec-rule {
border: none;
height: 3px;
width: 48px;
background: var(--ec-green);
margin: 20px 0 24px;
}
.ec-section--green .ec-rule,
.ec-section--dark .ec-rule {
background: var(--ec-gold);
}
/* ═══════════════════════════════════════════════════════
§6 BUTTONS
═══════════════════════════════════════════════════════ */
.ec-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ec-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 14px 32px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: var(--ec-transition);
text-decoration: none;
}
.ec-btn--primary {
background: var(--ec-green);
color: var(--ec-white);
}
.ec-btn--primary:hover {
background: var(--ec-green-light);
color: var(--ec-white);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45,80,22,0.3);
text-decoration: none;
}
.ec-btn--outline {
background: transparent;
color: var(--ec-green);
border: 2px solid var(--ec-green);
}
.ec-btn--outline:hover {
background: var(--ec-green);
color: var(--ec-white);
text-decoration: none;
}
.ec-btn--white {
background: var(--ec-white);
color: var(--ec-green);
}
.ec-btn--white:hover {
background: var(--ec-cream);
color: var(--ec-green);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
text-decoration: none;
}
.ec-btn--ghost {
background: transparent;
color: var(--ec-green);
padding: 8px 0;
border-bottom: 2px solid var(--ec-green);
border-radius: 0;
}
.ec-btn--ghost:hover {
color: var(--ec-green-light);
border-color: var(--ec-green-light);
text-decoration: none;
}
.ec-section--green .ec-btn--ghost,
.ec-section--dark .ec-btn--ghost {
color: var(--ec-gold);
border-color: var(--ec-gold);
}
/* ═══════════════════════════════════════════════════════
§7 SPLIT LAYOUT (2-COLUMN)
═══════════════════════════════════════════════════════ */
.ec-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.ec-split--reverse {
direction: rtl;
}
.ec-split--reverse > * {
direction: ltr;
}
@media (max-width: 768px) {
.ec-split {
grid-template-columns: 1fr;
gap: 32px;
}
.ec-split--reverse {
direction: ltr;
}
}
/* ═══════════════════════════════════════════════════════
§8 CARDS (AMENITIES, FEATURES)
═══════════════════════════════════════════════════════ */
.ec-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.ec-card {
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
overflow: hidden;
box-shadow: var(--ec-shadow);
transition: var(--ec-transition);
}
.ec-card:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-lg);
}
.ec-card__img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
}
.ec-card__body {
padding: 28px;
}
.ec-card__icon {
width: 48px;
height: 48px;
background: var(--ec-cream);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--ec-green);
}
.ec-card__title {
font-family: var(--ec-font-heading);
font-size: 22px;
color: var(--ec-black);
margin: 0 0 8px;
}
.ec-card__desc {
font-size: 15px;
line-height: 1.6;
color: var(--ec-text-light);
margin: 0;
}
/* ═══════════════════════════════════════════════════════
§9 GALLERY GRID
═══════════════════════════════════════════════════════ */
.ec-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.ec-gallery__item {
border-radius: var(--ec-radius);
overflow: hidden;
cursor: pointer;
position: relative;
}
.ec-gallery__item:hover img {
transform: scale(1.05);
}
.ec-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.ec-gallery__item--wide {
grid-column: span 2;
}
.ec-gallery__item--tall {
grid-row: span 2;
}
@media (max-width: 768px) {
.ec-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
@media (max-width: 480px) {
.ec-gallery {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════
§10 HERO SUBPAGE
═══════════════════════════════════════════════════════ */
.ec-hero {
background: var(--ec-green-dark);
padding: 100px 0 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.ec-hero::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 140%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 70%);
pointer-events: none;
}
.ec-hero__inner {
position: relative;
z-index: 1;
}
.ec-hero__kicker {
display: inline-block;
font-family: var(--ec-font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--ec-gold);
margin-bottom: 16px;
}
.ec-hero__title {
font-family: var(--ec-font-heading);
font-size: clamp(36px, 5vw, 56px);
color: var(--ec-white);
margin: 0 0 16px;
}
.ec-hero__desc {
font-size: 18px;
color: rgba(255,255,255,0.7);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
/* Hide slider on subpages */
.page-txt .section.parallax { display: none !important; }
/* ═══════════════════════════════════════════════════════
§11 ATTRACTIONS LIST
═══════════════════════════════════════════════════════ */
.ec-attractions {
display: flex;
flex-direction: column;
gap: 48px;
}
.ec-attraction {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.ec-attraction:nth-child(even) {
direction: rtl;
}
.ec-attraction:nth-child(even) > * {
direction: ltr;
}
.ec-attraction__img {
border-radius: var(--ec-radius-lg);
overflow: hidden;
box-shadow: var(--ec-shadow);
}
.ec-attraction__img img {
width: 100%;
display: block;
aspect-ratio: 16/10;
object-fit: cover;
}
.ec-attraction__tag {
display: inline-block;
background: var(--ec-cream);
color: var(--ec-green);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 12px;
}
.ec-attraction__dist {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ec-text-light);
margin-top: 16px;
}
@media (max-width: 768px) {
.ec-attraction {
grid-template-columns: 1fr;
gap: 24px;
}
.ec-attraction:nth-child(even) {
direction: ltr;
}
}
/* ═══════════════════════════════════════════════════════
§12 POP-UP OVERLAY
═══════════════════════════════════════════════════════ */
.ec-popup-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: var(--ec-transition);
}
.ec-popup-overlay.ec-popup--active {
opacity: 1;
visibility: visible;
}
.ec-popup {
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
padding: 48px;
max-width: 480px;
width: 90%;
text-align: center;
position: relative;
transform: translateY(20px) scale(0.95);
transition: var(--ec-transition);
box-shadow: var(--ec-shadow-lg);
}
/* Wide popup with image + content grid */
.ec-popup.ec-popup--wide {
max-width: 780px;
padding: 0;
overflow: hidden;
text-align: left;
}
.ec-popup__grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.ec-popup__image {
position: relative;
min-height: 100%;
}
.ec-popup__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ec-popup__content {
padding: 40px 36px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Topbar — "Otwarcie: maj 2026" po lewej, X po prawej */
.ec-popup__topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 12px 20px;
border-bottom: 1px solid var(--ec-cream-dark);
background: var(--ec-cream);
border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
}
.ec-popup--wide .ec-popup__topbar .ec-popup__badge--info {
margin: 0 !important;
font-size: 13px;
color: var(--ec-text-light);
padding: 0;
background: transparent;
text-transform: none;
letter-spacing: 0.5px;
font-weight: 500;
}
.ec-popup--wide .ec-popup__topbar .ec-popup__close {
position: static !important;
top: auto !important;
right: auto !important;
flex-shrink: 0;
}
@media (max-width: 640px) {
.ec-popup-overlay {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
.ec-popup.ec-popup--wide {
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
}
.ec-popup__topbar {
position: sticky;
top: 0;
z-index: 3;
background: var(--ec-cream);
}
.ec-popup__grid {
grid-template-columns: 1fr;
}
.ec-popup__image {
max-height: 200px;
overflow: hidden;
}
.ec-popup__content {
padding: 28px 24px;
}
.ec-popup--wide .ec-popup__discount {
font-size: 36px;
}
}
.ec-popup-overlay.ec-popup--active .ec-popup {
transform: translateY(0) scale(1);
}
.ec-popup__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--ec-cream);
color: var(--ec-text);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--ec-transition);
}
.ec-popup__close:hover {
background: var(--ec-cream-dark);
}
.ec-popup__badge {
display: inline-block;
background: var(--ec-green);
color: var(--ec-white);
font-family: var(--ec-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 8px 20px;
border-radius: 20px;
margin-bottom: 20px;
}
.ec-popup__title {
font-family: var(--ec-font-heading);
font-size: 28px;
color: var(--ec-black);
margin: 0 0 12px;
}
.ec-popup__desc {
font-size: 15px;
color: var(--ec-text-light);
line-height: 1.6;
margin: 0 0 24px;
}
.ec-popup__discount {
font-family: var(--ec-font-heading);
font-size: 48px;
color: var(--ec-green);
margin: 0 0 4px;
}
.ec-popup__badge--info {
background: transparent;
color: var(--ec-text-light);
font-weight: 500;
letter-spacing: 0.5px;
text-transform: none;
padding: 0;
border-radius: 0;
font-size: 13px;
margin-bottom: 12px;
}
.ec-popup__code {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ec-cream);
border: 2px dashed var(--ec-green);
padding: 10px 24px;
border-radius: 8px;
font-family: var(--ec-font-body);
font-size: 18px;
font-weight: 700;
letter-spacing: 3px;
color: var(--ec-green);
margin: 16px 0 16px;
position: relative;
cursor: pointer;
transition: background 0.2s ease;
}
.ec-popup__code:hover {
background: #e8e4db;
}
.ec-popup__copy-icon {
opacity: 0.6;
transition: opacity 0.2s;
}
.ec-popup__code:hover .ec-popup__copy-icon {
opacity: 1;
}
.ec-popup__copy-msg {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
background: var(--ec-green);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
padding: 4px 12px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.ec-popup__code.ec-copied .ec-popup__copy-msg {
opacity: 1;
}
/* Mini przycisk — kod kopiowania */
.ec-rabat-mini__code {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background 0.2s;
}
.ec-rabat-mini__code.ec-copied {
background: rgba(255,255,255,0.35);
}
/* Mini przycisk rabatowy — lewy dolny rog */
.ec-rabat-mini {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9998;
background: var(--ec-green);
color: var(--ec-white);
border-radius: 999px;
padding: 10px 14px 10px 18px;
cursor: pointer;
display: none; /* JS pokaze po zamknieciu popupu */
align-items: center;
gap: 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.22);
font-family: var(--ec-font-body);
font-size: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: ec-rabat-slide-in 0.4s ease-out;
}
.ec-rabat-mini__close {
appearance: none;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
line-height: 1;
margin-left: 4px;
transition: background 0.15s ease;
}
.ec-rabat-mini__close:hover {
background: rgba(255,255,255,0.3);
}
.ec-rabat-mini__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.ec-rabat-mini.ec-rabat-mini--visible {
display: flex;
}
.ec-rabat-mini:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.ec-rabat-mini__label {
white-space: nowrap;
}
.ec-rabat-mini__label strong {
color: #fff;
}
.ec-rabat-mini__code {
background: rgba(255,255,255,0.2);
border: 1px dashed rgba(255,255,255,0.5);
border-radius: 6px;
padding: 3px 10px;
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
}
@keyframes ec-rabat-slide-in {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 640px) {
.ec-rabat-mini {
/* Mobile: wyżej żeby nie blokować booking CTA ani systemowego FAB */
bottom: 80px;
right: 12px;
left: auto;
padding: 8px 10px 8px 14px;
font-size: 12px;
gap: 6px;
max-width: calc(100vw - 24px);
}
.ec-rabat-mini__label {
display: none; /* schowaj label "Rabat -100 PLN" — zostaje tylko kod */
}
.ec-rabat-mini__close {
width: 22px;
height: 22px;
}
}
.ec-rabat-mini.ec-rabat-mini--hidden {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
§13 INTERACTIVE MAP
═══════════════════════════════════════════════════════ */
.ec-map-wrapper {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.ec-map-wrapper img {
width: 100%;
display: block;
border-radius: var(--ec-radius-lg);
}
.ec-map-pin {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ec-green);
color: var(--ec-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: var(--ec-transition);
transform: translate(-50%, -50%);
box-shadow: 0 2px 12px rgba(45,80,22,0.4);
}
.ec-map-pin:hover {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 4px 20px rgba(45,80,22,0.5);
}
.ec-map-pin__pulse {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ec-green);
opacity: 0;
animation: ec-pulse 2s ease-out infinite;
}
@keyframes ec-pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(2.5); opacity: 0; }
}
.ec-map-tooltip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: var(--ec-white);
border-radius: 10px;
padding: 12px 16px;
box-shadow: var(--ec-shadow-lg);
white-space: nowrap;
font-size: 13px;
font-weight: 500;
color: var(--ec-text);
opacity: 0;
visibility: hidden;
transition: var(--ec-transition);
pointer-events: none;
}
.ec-map-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--ec-white);
}
.ec-map-pin:hover .ec-map-tooltip {
opacity: 1;
visibility: visible;
}
/* Active pin state */
.ec-map-pin.ec-pin--active {
background: var(--ec-gold) !important;
transform: translate(-50%, -50%) scale(1.3);
box-shadow: 0 4px 20px rgba(197,165,114,0.5);
z-index: 10;
}
.ec-map-pin.ec-pin--active .ec-map-tooltip {
opacity: 1;
visibility: visible;
}
/* §13b ZONE DETAIL PANEL
─────────────────────── */
.ec-zone-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
margin 0.4s ease;
margin-top: 0;
}
.ec-zone-panel.ec-zone-panel--open {
max-height: 500px;
margin-top: 32px;
}
.ec-zone-card {
display: none;
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
box-shadow: var(--ec-shadow-lg);
overflow: hidden;
position: relative;
animation: ecZoneSlideIn 0.4s ease both;
}
.ec-zone-card.ec-zone-card--visible {
display: grid;
grid-template-columns: 280px 1fr;
align-items: stretch;
}
@keyframes ecZoneSlideIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.ec-zone-card__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.06);
color: var(--ec-text-light);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: var(--ec-transition);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.ec-zone-card__close:hover {
background: rgba(0,0,0,0.12);
color: var(--ec-text);
}
.ec-zone-card__img {
overflow: hidden;
}
.ec-zone-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ec-zone-card__body {
padding: 32px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ec-zone-card__tag {
display: inline-block;
font-family: var(--ec-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ec-green);
background: rgba(45,80,22,0.08);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 12px;
width: fit-content;
}
.ec-zone-card__title {
font-family: var(--ec-font-heading);
font-size: 26px;
color: var(--ec-black);
margin: 0 0 12px;
font-weight: 400;
}
.ec-zone-card__desc {
font-family: var(--ec-font-body);
font-size: 15px;
line-height: 1.7;
color: var(--ec-text-light);
margin: 0 0 20px;
}
/* Small CTA button variant */
.ec-btn--sm {
padding: 10px 24px !important;
font-size: 13px !important;
width: fit-content !important;
display: inline-flex !important;
}
@media (max-width: 768px) {
.ec-zone-card.ec-zone-card--visible {
grid-template-columns: 1fr;
}
.ec-zone-card__img {
height: 200px;
}
.ec-zone-card__body {
padding: 24px;
}
.ec-zone-card__title {
font-size: 22px;
}
.ec-zone-panel.ec-zone-panel--open {
max-height: 600px;
}
}
/* ═══════════════════════════════════════════════════════
§14 NUMBERS / STATS ROW
═══════════════════════════════════════════════════════ */
.ec-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.ec-stat__number {
font-family: var(--ec-font-heading);
font-size: clamp(36px, 4vw, 52px);
color: var(--ec-white);
line-height: 1;
margin-bottom: 8px;
}
.ec-stat__label {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.7);
}
@media (max-width: 768px) {
.ec-stats {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* ═══════════════════════════════════════════════════════
§15 VIRTUAL TOUR EMBED
═══════════════════════════════════════════════════════ */
.ec-tour-frame {
width: 100%;
aspect-ratio: 16/9;
border: none;
border-radius: var(--ec-radius-lg);
box-shadow: var(--ec-shadow-lg);
}
.ec-tour-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: var(--ec-cream-dark);
border-radius: var(--ec-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
color: var(--ec-text-light);
font-size: 16px;
}
.ec-tour-placeholder svg {
width: 48px;
height: 48px;
color: var(--ec-green);
}
/* ═══════════════════════════════════════════════════════
§16 CONTACT / MAP
═══════════════════════════════════════════════════════ */
.ec-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.ec-contact-item {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.ec-contact-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--ec-cream);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ec-green);
}
.ec-gmap {
width: 100%;
height: 400px;
border: none;
border-radius: var(--ec-radius-lg);
box-shadow: var(--ec-shadow);
}
@media (max-width: 768px) {
.ec-contact-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════
§17 BLOG CARDS
═══════════════════════════════════════════════════════ */
.ec-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
.ec-blog-card {
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
overflow: hidden;
box-shadow: var(--ec-shadow);
transition: var(--ec-transition);
}
.ec-blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-lg);
}
.ec-blog-card__img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.ec-blog-card__body {
padding: 28px;
}
.ec-blog-card__tag {
display: inline-block;
background: var(--ec-cream);
color: var(--ec-green);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.ec-blog-card__title {
font-family: var(--ec-font-heading);
font-size: 22px;
color: var(--ec-black);
margin: 0 0 8px;
}
.ec-blog-card__excerpt {
font-size: 15px;
color: var(--ec-text-light);
line-height: 1.6;
margin: 0;
}
/* ═══════════════════════════════════════════════════════
§18 FOOTER OVERRIDES
═══════════════════════════════════════════════════════ */
footer {
background: var(--ec-green-dark) !important;
color: var(--ec-white) !important;
}
.footer-wrapper {
padding: 48px 0 !important;
}
footer a {
color: rgba(255,255,255,0.8) !important;
transition: var(--ec-transition);
}
footer a:hover {
color: var(--ec-white) !important;
}
.footer-contact__logo img {
filter: brightness(0) invert(1);
max-height: 40px;
}
.footer-contact span,
.footer-contact a,
.footer-adress span {
color: rgba(255,255,255,0.8) !important;
font-family: var(--ec-font-body) !important;
}
.powered_by {
opacity: 0.5;
}
/* ═══════════════════════════════════════════════════════
§19 LIGHTBOX (GALLERY)
═══════════════════════════════════════════════════════ */
.ec-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: var(--ec-transition);
cursor: zoom-out;
}
.ec-lightbox--active {
opacity: 1;
visibility: visible;
}
.ec-lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.ec-lightbox__close {
position: absolute;
top: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.15);
color: white;
font-size: 20px;
cursor: pointer;
backdrop-filter: blur(8px);
transition: var(--ec-transition);
}
.ec-lightbox__close:hover {
background: rgba(255,255,255,0.25);
}
.ec-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.15);
color: white;
font-size: 20px;
cursor: pointer;
backdrop-filter: blur(8px);
transition: var(--ec-transition);
}
.ec-lightbox__nav:hover {
background: rgba(255,255,255,0.25);
}
.ec-lightbox__nav--prev { left: 24px; }
.ec-lightbox__nav--next { right: 24px; }
/* ═══════════════════════════════════════════════════════
§20 ANIMATIONS
═══════════════════════════════════════════════════════ */
.ec-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.ec-fade-up.ec-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger children */
.ec-stagger > *:nth-child(1) { transition-delay: 0s; }
.ec-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.ec-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.ec-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.ec-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.ec-stagger > *:nth-child(6) { transition-delay: 0.5s; }
/* ═══════════════════════════════════════════════════════
§21 OFFERS PAGE OVERRIDE
═══════════════════════════════════════════════════════ */
.page-offers .offerslist .offer-item {
border-radius: var(--ec-radius) !important;
overflow: hidden;
box-shadow: var(--ec-shadow) !important;
transition: var(--ec-transition);
border: none !important;
}
.page-offers .offerslist .offer-item:hover {
transform: translateY(-2px);
box-shadow: var(--ec-shadow-lg) !important;
}
.page-offers .offer-item .offer-btn,
.page-offer .offer-btn {
background: var(--ec-green) !important;
border-color: var(--ec-green) !important;
border-radius: 8px !important;
font-family: var(--ec-font-body) !important;
font-weight: 600 !important;
transition: var(--ec-transition);
}
.page-offers .offer-item .offer-btn:hover,
.page-offer .offer-btn:hover {
background: var(--ec-green-light) !important;
}
/* Offer card image radius */
.page-offers .offer-item img {
border-radius: var(--ec-radius) var(--ec-radius) 0 0 !important;
}
/* ═══════════════════════════════════════════════════════
§22 PRICING CARDS
═══════════════════════════════════════════════════════ */
.ec-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.ec-pricing-card {
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
box-shadow: var(--ec-shadow);
padding: 36px 28px;
display: flex;
flex-direction: column;
transition: var(--ec-transition);
position: relative;
border: 2px solid transparent;
}
.ec-pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-lg);
}
.ec-pricing-card--featured {
border-color: var(--ec-green);
box-shadow: var(--ec-shadow-lg), 0 0 0 1px var(--ec-green);
}
.ec-pricing-card--featured:hover {
box-shadow: 0 16px 64px rgba(45,80,22,0.2), 0 0 0 1px var(--ec-green);
}
.ec-pricing-card__header {
text-align: center;
margin-bottom: 24px;
}
.ec-pricing-card__badge {
display: inline-block;
background: var(--ec-cream);
color: var(--ec-green);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.ec-pricing-card__badge--gold {
background: var(--ec-green);
color: var(--ec-white);
}
.ec-pricing-card__name {
font-family: var(--ec-font-heading);
font-size: 28px;
color: var(--ec-black);
margin: 0 0 6px;
}
.ec-pricing-card__desc {
font-size: 14px;
color: var(--ec-text-light);
margin: 0;
}
.ec-pricing-card__price {
text-align: center;
padding: 20px 0;
border-top: 1px solid var(--ec-cream-dark);
border-bottom: 1px solid var(--ec-cream-dark);
margin-bottom: 24px;
}
.ec-pricing-card__from {
font-size: 13px;
color: var(--ec-text-light);
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 4px;
}
.ec-pricing-card__amount {
font-family: var(--ec-font-heading);
font-size: 48px;
color: var(--ec-green);
line-height: 1;
}
.ec-pricing-card__currency {
font-size: 16px;
color: var(--ec-text-light);
font-weight: 500;
margin-left: 4px;
}
.ec-pricing-card__per {
font-size: 13px;
color: var(--ec-text-light);
}
.ec-pricing-card__features {
list-style: none;
padding: 0;
margin: 0 0 28px;
flex: 1;
}
.ec-pricing-card__features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: var(--ec-text);
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ec-pricing-card__features li:last-child {
border-bottom: none;
}
.ec-pricing-card__features li svg {
flex-shrink: 0;
color: var(--ec-green);
}
@media (max-width: 900px) {
.ec-pricing-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin: 0 auto;
}
}
/* ═══════════════════════════════════════════════════════
§22b INCLUDED AMENITIES GRID
═══════════════════════════════════════════════════════ */
.ec-included-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ec-included-item {
background: var(--ec-cream);
border-radius: var(--ec-radius);
padding: 24px 16px;
text-align: center;
transition: var(--ec-transition);
}
.ec-included-item:hover {
background: var(--ec-cream-dark);
transform: translateY(-2px);
}
.ec-included-item__icon {
width: 52px;
height: 52px;
background: var(--ec-white);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
color: var(--ec-green);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ec-included-item__label {
font-size: 14px;
font-weight: 600;
color: var(--ec-text);
}
@media (max-width: 768px) {
.ec-included-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 420px) {
.ec-included-grid {
grid-template-columns: repeat(2, 1fr);
}
.ec-included-item { padding: 16px 12px; }
}
/* ═══════════════════════════════════════════════════════
§22c SEASON TABLE
═══════════════════════════════════════════════════════ */
.ec-season-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ec-season-table table {
width: 100%;
border-collapse: collapse;
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
overflow: hidden;
box-shadow: var(--ec-shadow);
font-family: var(--ec-font-body);
}
.ec-season-table thead {
background: var(--ec-green);
color: var(--ec-white);
}
.ec-season-table th {
padding: 16px 20px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
}
.ec-season-table td {
padding: 16px 20px;
font-size: 15px;
color: var(--ec-text);
border-bottom: 1px solid var(--ec-cream-dark);
}
.ec-season-table tbody tr:last-child td {
border-bottom: none;
}
.ec-season-table tbody tr:hover {
background: var(--ec-cream);
}
.ec-season-badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 20px;
white-space: nowrap;
}
.ec-season-badge--low {
background: #e8f5e9;
color: #2e7d32;
}
.ec-season-badge--mid {
background: #fff8e1;
color: #f57f17;
}
.ec-season-badge--high {
background: #fce4ec;
color: #c62828;
}
@media (max-width: 640px) {
.ec-season-table th,
.ec-season-table td {
padding: 12px 14px;
font-size: 13px;
}
}
/* ═══════════════════════════════════════════════════════
§23 FAQ ACCORDION
═══════════════════════════════════════════════════════ */
.ec-faq {
display: flex;
flex-direction: column;
gap: 8px;
}
.ec-faq__item {
background: var(--ec-cream);
border-radius: var(--ec-radius);
overflow: hidden;
transition: var(--ec-transition);
}
.ec-faq__item[open] {
background: var(--ec-white);
box-shadow: var(--ec-shadow);
}
.ec-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
font-family: var(--ec-font-body);
font-size: 16px;
font-weight: 600;
color: var(--ec-black);
cursor: pointer;
list-style: none;
-webkit-user-select: none;
user-select: none;
}
.ec-faq__question::-webkit-details-marker {
display: none;
}
.ec-faq__question::marker {
content: '';
}
.ec-faq__chevron {
flex-shrink: 0;
color: var(--ec-green);
transition: transform 0.3s ease;
}
.ec-faq__item[open] .ec-faq__chevron {
transform: rotate(180deg);
}
.ec-faq__answer {
padding: 0 24px 20px;
font-size: 15px;
line-height: 1.7;
color: var(--ec-text-light);
}
.ec-faq__answer p {
margin: 0;
}
@media (max-width: 640px) {
.ec-faq__question {
padding: 16px 18px;
font-size: 15px;
}
.ec-faq__answer {
padding: 0 18px 16px;
}
}
/* ═══════════════════════════════════════════════════════
§24 TERMS PAGE
═══════════════════════════════════════════════════════ */
.page-terms .container {
max-width: 800px !important;
padding: 48px 24px !important;
}
.page-terms h1,
.page-terms h2,
.page-terms h3 {
font-family: var(--ec-font-heading) !important;
color: var(--ec-black) !important;
}
.page-terms h1 {
font-size: 36px !important;
margin-bottom: 24px !important;
}
.page-terms h2 {
font-size: 24px !important;
margin: 32px 0 16px !important;
}
.page-terms p,
.page-terms li {
font-family: var(--ec-font-body) !important;
font-size: 15px !important;
line-height: 1.7 !important;
color: var(--ec-text) !important;
}
.page-terms ul,
.page-terms ol {
padding-left: 24px !important;
margin: 12px 0 !important;
}
/* ═══════════════════════════════════════════════════════
§25 TRUST CARDS (HOMEPAGE)
═══════════════════════════════════════════════════════ */
.ec-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.ec-trust-card {
background: var(--ec-white);
border-radius: var(--ec-radius-lg);
padding: 32px 24px;
text-align: center;
box-shadow: var(--ec-shadow);
transition: var(--ec-transition);
}
.ec-trust-card:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-lg);
}
.ec-trust-card__icon {
width: 60px;
height: 60px;
background: var(--ec-cream);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--ec-green);
}
.ec-trust-card__title {
font-family: var(--ec-font-heading);
font-size: 20px;
color: var(--ec-black);
margin: 0 0 8px;
}
.ec-trust-card__desc {
font-size: 14px;
line-height: 1.6;
color: var(--ec-text-light);
margin: 0;
}
@media (max-width: 900px) {
.ec-trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.ec-trust-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════
§26 CONTACT CTA CARDS
═══════════════════════════════════════════════════════ */
.ec-contact-cta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ec-contact-cta {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 20px;
border-radius: var(--ec-radius-lg);
text-decoration: none;
transition: var(--ec-transition);
text-align: center;
box-shadow: var(--ec-shadow);
}
.ec-contact-cta:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-lg);
text-decoration: none;
}
.ec-contact-cta--whatsapp {
background: #25D366;
color: var(--ec-white);
}
.ec-contact-cta--whatsapp:hover {
background: #1ebe57;
color: var(--ec-white);
}
.ec-contact-cta--phone {
background: var(--ec-green);
color: var(--ec-white);
}
.ec-contact-cta--phone:hover {
background: var(--ec-green-light);
color: var(--ec-white);
}
.ec-contact-cta--email {
background: var(--ec-wood);
color: var(--ec-white);
}
.ec-contact-cta--email:hover {
background: var(--ec-wood-light);
color: var(--ec-white);
}
.ec-contact-cta__icon {
width: 56px;
height: 56px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: inherit;
}
.ec-contact-cta__label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: 0.85;
margin-bottom: 6px;
}
.ec-contact-cta__value {
font-size: 16px;
font-weight: 600;
color: inherit;
}
@media (max-width: 640px) {
.ec-contact-cta-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.ec-contact-cta {
flex-direction: row;
gap: 16px;
padding: 20px 24px;
text-align: left;
}
.ec-contact-cta__icon {
margin-bottom: 0;
width: 48px;
height: 48px;
}
}
/* ═══════════════════════════════════════════════════════
§27 GLOBAL ORANGE→GREEN OVERRIDES
Nadpisanie domyslnego pomaranczowego koloru IdoBooking
═══════════════════════════════════════════════════════ */
/* Scroll-to-top button */
#backTop {
background: var(--ec-green) !important;
border-color: var(--ec-green) !important;
color: var(--ec-white) !important;
}
#backTop:hover {
background: var(--ec-green-light) !important;
border-color: var(--ec-green-light) !important;
}
#backTop i {
color: var(--ec-white) !important;
}
/* All system .btn buttons (orange bg) */
.btn,
button.btn,
a.btn {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
color: var(--ec-white) !important;
}
.btn:hover,
button.btn:hover,
a.btn:hover {
background-color: var(--ec-green-light) !important;
border-color: var(--ec-green-light) !important;
}
/* System orange text color → green */
.contact__tel,
.contact__tel span,
.contact__email,
.contact__email span,
.iai_book_trigger,
.iai_book_trigger span,
.navbar-reservation.btn {
color: var(--ec-white) !important;
}
/* System links that are orange */
a.contact__tel,
a.contact__email {
color: var(--ec-green) !important;
}
a.contact__tel:hover,
a.contact__email:hover {
color: var(--ec-green-light) !important;
}
/* Navbar mobile reservation button */
.navbar-reservation.btn {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
}
/* ═══════════════════════════════════════════════════════
§28 PAGE: /offers — OFERTA
═══════════════════════════════════════════════════════ */
.page-offers {
background: var(--ec-cream) !important;
}
/* Sidebar headings (Rezerwacja online, Filtruj wyniki) */
.page-offers h4,
.page-offers .iai_book_trigger span {
color: var(--ec-green) !important;
}
/* Search/filter buttons */
.page-offers .btn,
.page-offers button.btn {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
color: var(--ec-white) !important;
border-radius: 8px !important;
}
.page-offers .btn:hover,
.page-offers button.btn:hover {
background-color: var(--ec-green-light) !important;
border-color: var(--ec-green-light) !important;
}
/* "SZCZEGOLY" link on offer cards */
.page-offers .object-details a,
.page-offers a[class*="detail"],
.page-offers .more-object,
.page-offers .object-name a {
color: var(--ec-green) !important;
}
.page-offers .object-details a:hover,
.page-offers a[class*="detail"]:hover {
color: var(--ec-green-light) !important;
}
/* Offer cards styling */
.page-offers .object {
border-radius: var(--ec-radius) !important;
overflow: hidden;
box-shadow: var(--ec-shadow) !important;
transition: var(--ec-transition);
}
.page-offers .object:hover {
box-shadow: var(--ec-shadow-lg) !important;
transform: translateY(-2px);
}
/* Calendar/date icons — delikatniejsze */
.page-offers .iaiicon-calendar,
.page-offers i[class*="iaiicon"] {
color: var(--ec-green) !important;
background: transparent !important;
border: none !important;
font-size: 16px !important;
}
/* Ikony-znaczki rozwijania — patrz §38 poniżej */
/* Ikony w polach — patrz §38 poniżej */
/* "SPRAWDZ DOSTEPNOSC" main button */
.page-offers .iai-search button,
.page-offers .iai_book button {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
border-radius: 8px !important;
}
/* ═══════════════════════════════════════════════════════
§29 PAGE: /news — BLOG / AKTUALNOSCI
═══════════════════════════════════════════════════════ */
.page-news {
background: var(--ec-cream) !important;
}
/* Fix blog hero not full width — ec-full escape already handles it
but system .container restricts it */
.page-news > .page > .container:first-of-type {
max-width: none !important;
padding: 0 !important;
}
/* "BLOG" heading at top */
.page-news .news-title,
.page-news h1,
.page-news .page-title {
color: var(--ec-green) !important;
}
/* "czytaj wiecej" button */
.page-news .more-news.btn,
.page-news a.more-news {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
color: var(--ec-white) !important;
border-radius: 8px !important;
font-family: var(--ec-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
padding: 10px 24px !important;
}
.page-news .more-news.btn:hover,
.page-news a.more-news:hover {
background-color: var(--ec-green-light) !important;
border-color: var(--ec-green-light) !important;
}
/* News cards */
.page-news .news-item,
.page-news .news-row {
border-radius: var(--ec-radius) !important;
overflow: hidden;
}
/* Date text */
.page-news .news-date {
color: var(--ec-text-light) !important;
}
/* Full-width fix for blog content area */
.page-news .ec-full {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
}
/* ═══════════════════════════════════════════════════════
§30 PAGE: /contact — KONTAKT (system page, CSS only)
═══════════════════════════════════════════════════════ */
.page-contact {
background: var(--ec-cream) !important;
}
/* Phone and email links */
.page-contact a.contact__tel,
.page-contact a.contact__tel span,
.page-contact .contact__tel {
color: var(--ec-green) !important;
font-weight: 600;
}
.page-contact a.contact__tel:hover,
.page-contact a.contact__tel:hover span {
color: var(--ec-green-light) !important;
}
.page-contact a.contact__email,
.page-contact a.contact__email span,
.page-contact .contact__email {
color: var(--ec-green) !important;
font-weight: 600;
}
.page-contact a.contact__email:hover,
.page-contact a.contact__email:hover span {
color: var(--ec-green-light) !important;
}
/* Section headings */
.page-contact h2,
.page-contact h3 {
font-family: var(--ec-font-heading) !important;
color: var(--ec-black) !important;
}
/* Location pin icon */
.page-contact .location-pin,
.page-contact i[class*="iaiicon"],
.page-contact .icon-location,
.icon-pointer,
i.icon.icon-pointer {
color: var(--ec-green) !important;
}
/* "ZOBACZ OFERTE" and "SPRAWDZ NA MAPIE" links */
.page-contact a[class*="link"],
.page-contact .location-link,
.page-contact .contact-link {
color: var(--ec-green) !important;
font-weight: 600 !important;
}
.page-contact a[class*="link"]:hover {
color: var(--ec-green-light) !important;
}
/* "REZERWUJ ONLINE" link */
.page-contact a[href*="offers"],
.page-contact a[href*="reservation"] {
color: var(--ec-green) !important;
font-weight: 700 !important;
}
.page-contact a[href*="offers"]:hover {
color: var(--ec-green-light) !important;
}
/* Payment section styling */
.page-contact .payment-info,
.page-contact .contact-payment {
background: var(--ec-white) !important;
border-radius: var(--ec-radius) !important;
padding: 32px !important;
}
/* Owner info table */
.page-contact table td {
padding: 6px 16px 6px 0 !important;
font-family: var(--ec-font-body) !important;
}
/* Map container */
.page-contact .map-container,
.page-contact [class*="map"] iframe {
border-radius: var(--ec-radius) !important;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════
§31 PAGE: /terms — REGULAMIN
═══════════════════════════════════════════════════════ */
.page-terms .container,
.page-terms .page {
max-width: 800px !important;
margin: 0 auto !important;
font-family: var(--ec-font-body) !important;
line-height: 1.7 !important;
color: var(--ec-text) !important;
}
.page-terms h1,
.page-terms h2,
.page-terms h3 {
font-family: var(--ec-font-heading) !important;
color: var(--ec-black) !important;
}
/* ═══════════════════════════════════════════════════════
§32 SKIP LINKS & ACCESSIBILITY OVERRIDES
═══════════════════════════════════════════════════════ */
/* Skip-to links that appear as orange buttons */
a.btn[href="#pageContent"],
a.btn[href="#filters"],
a.btn[href="#offerList"] {
background-color: var(--ec-green) !important;
border-color: var(--ec-green) !important;
}
/* ═══════════════════════════════════════════════════════
§33 SEARCH WIDGET — SEPARATED CARDS DESIGN
Uzupelnienie §3 — style .page-index ktore dzialaja
razem z #ec-search-dock. Kazde pole jako osobna karta.
═══════════════════════════════════════════════════════ */
/* Wrapper — reset, styl nadaje #ec-search-dock */
.page-index .iai-search {
position: relative;
z-index: 50;
}
.page-index #iai_book_se.iai_frontpage {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* Hide the trigger button on desktop */
.page-index .iai_book_trigger {
display: none !important;
}
/* Hide location if 1 */
.page-index .showlocation {
display: none !important;
}
/* Responsive — ponizej 768 karty w kolumne */
@media (max-width: 768px) {
.page-index #iai_book_form {
flex-direction: column !important;
gap: 6px !important;
}
}
/* ═══════════════════════════════════════════════════════
§33B CUSTOM SEARCH WIDGET (.ec-search) — flatpickr
─────────────────────────────────────────────────────
Port z Apartamenty Parkowe (adapted do EcoCamping palette).
Zastępuje systemowy widget IdoBooking na homepage — daje
2 osobne date pickery (Przyjazd, Wyjazd), mobile friendly.
═══════════════════════════════════════════════════════ */
/* Ukryj systemowy widget TYLKO na homepage (gdy jest nasz custom).
Podstrony /offers itp. nadal używają systemowego widgetu. */
body.page-index .iai-search,
body.page-index #iai_book_form,
body.page-index .booking_widget,
body.page-index [id*="iai_booking_wrapper"]:not(#iai_booking_location) {
display: none !important;
}
body.page-index #ec-search-dock {
display: none !important;
}
/* Wrap — 2 tryby:
(a) domyślny (gdy teleport nie zadziałał lub brak fullpage.js): cream bg, flow z §1
(b) teleported do .fp-tableCell hero: wyśrodkowany w viewporcie nad zdjęciem */
.ec-search-wrap {
background: var(--ec-cream);
padding: 64px 24px 40px;
}
/* Teleported — widget siedzi w hero section, wyśrodkowany natychmiast
na wejściu (viewport center). Desktop + mobile + tablet. */
.ec-search-wrap--teleported {
background: transparent !important;
padding: 0 24px !important;
position: relative;
z-index: 20;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* fp-tableCell (display: table-cell; vertical-align: middle) centruje dziecko,
flex zapewnia fallback dla innych display modes. */
}
.ec-search-wrap--teleported .ec-search-card {
width: 100%;
max-width: 1100px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* Hero MUSI mieć 100vh (żeby widget był centered w viewport na entry) */
body.page-index .section.parallax,
body.page-index .section.parallax .fp-tableCell,
body.page-index .section.parallax .fp-tableCell .fp-table {
min-height: 100vh !important;
}
body.page-index .section.parallax .fp-tableCell {
display: table-cell !important;
vertical-align: middle !important;
text-align: center;
/* Padding kompensuje wysokość headera (.page-top + .navbar)
żeby widget NIE wchodził pod menu. Desktop header ~140px, mobile ~90px. */
padding: 140px 0 60px !important;
}
@media (max-width: 768px) {
body.page-index .section.parallax .fp-tableCell {
padding: 90px 0 40px !important;
}
}
@media (max-width: 480px) {
body.page-index .section.parallax .fp-tableCell {
padding: 80px 0 32px !important;
}
}
/* Mobile — widget trochę węższy od viewport, padding dla dotyku */
@media (max-width: 768px) {
.ec-search-wrap--teleported {
padding: 0 12px !important;
}
.ec-search-wrap--teleported .ec-search-card {
padding: 20px 18px 22px;
}
}
@media (max-width: 480px) {
.ec-search-wrap--teleported {
padding: 0 8px !important;
}
.ec-search-wrap--teleported .ec-search-card {
padding: 18px 14px 20px;
background: rgba(255, 255, 255, 0.98);
}
}
/* Card — wyśrodkowany container z dyskretnym shadow */
.ec-search-card {
max-width: 1100px;
margin: 0 auto;
background: var(--ec-white);
border: 1px solid var(--ec-cream-dark);
border-radius: var(--ec-radius-lg);
box-shadow: var(--ec-shadow-lg);
padding: 24px 28px 28px;
position: relative;
z-index: 5;
}
/* Header — kicker + title nad polami */
.ec-search-card__header {
text-align: center;
margin-bottom: 20px;
}
.ec-search-card__kicker {
display: inline-block;
font-family: var(--ec-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ec-green);
margin-bottom: 6px;
}
.ec-search-card__title {
font-family: var(--ec-font-heading);
font-size: 28px;
line-height: 1.1;
color: var(--ec-green-dark);
margin: 0;
}
/* Form grid — 4 kolumny na desktop: 2 daty + goście + submit */
.ec-search {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 8px;
align-items: stretch;
min-height: 76px;
}
/* Field — label górny, input pod spodem, ikona po prawej.
Cross-device clickability (TDD R1-R4 2026-04-24):
- touch-action: manipulation → usuwa 300ms tap delay na iOS Safari
- -webkit-tap-highlight-color: transparent → usuwa szary prostokąt iOS
- user-select: none → zapobiega tekst-selekcji przy tap-hold
- cursor: pointer → ikona ręki desktop */
.ec-search__field {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 14px 48px 14px 18px;
background: var(--ec-cream);
border: 1px solid transparent;
border-radius: var(--ec-radius);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
min-height: 72px;
min-width: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.ec-search__field:hover {
background: var(--ec-cream-dark);
border-color: rgba(45, 80, 22, 0.15);
}
.ec-search__field:focus-within {
background: #fff;
border-color: var(--ec-green);
box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.12);
}
.ec-search__label {
font-family: var(--ec-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ec-green);
margin: 0;
line-height: 1.2;
pointer-events: none;
}
.ec-search__input,
.ec-search__select {
width: 100%;
border: none;
background: transparent;
font-family: var(--ec-font-body);
font-size: 15px;
font-weight: 500;
color: var(--ec-text);
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: 1.3;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ec-search__input::placeholder {
color: var(--ec-text-light);
opacity: 0.8;
}
.ec-search__input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0; /* hide default native icon — mamy własną SVG */
position: absolute;
inset: 0;
cursor: pointer;
}
.ec-search__input.flatpickr-input {
display: none; /* flatpickr ukrywa oryginalny input, używa altInput */
}
.ec-search__input.flatpickr-alt-input,
input.ec-search__input[readonly] {
display: block !important;
background: transparent !important;
color: var(--ec-text) !important;
}
.ec-search__select option {
color: var(--ec-text);
background: var(--ec-white);
}
/* Ikona pola — absolute po prawej, niewielka, w kolorze brand */
.ec-search__icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ec-green);
pointer-events: none;
flex-shrink: 0;
opacity: 0.75;
transition: opacity 0.2s ease;
}
.ec-search__field:hover .ec-search__icon,
.ec-search__field:focus-within .ec-search__icon {
opacity: 1;
}
/* Submit — zielony CTA, pełna wysokość field-ów.
Cross-device optimization: touch-action, tap-highlight, user-select. */
.ec-search__submit {
background: var(--ec-green);
color: var(--ec-white);
border: none;
padding: 0 32px;
font-family: var(--ec-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: var(--ec-radius);
min-width: 190px;
min-height: 72px;
align-self: stretch;
white-space: nowrap;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
/* Active feedback dla tap (zastępuje tap-highlight) */
.ec-search__submit:active {
background: var(--ec-green-dark);
transform: translateY(0);
box-shadow: 0 4px 12px rgba(45, 80, 22, 0.35);
}
.ec-search__field:active {
background: var(--ec-cream-dark);
}
.ec-search__submit:hover {
background: var(--ec-green-dark);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.35);
transform: translateY(-1px);
}
.ec-search__submit:active {
transform: translateY(0);
}
.ec-search__submit:focus-visible {
outline: 3px solid rgba(45, 80, 22, 0.4);
outline-offset: 2px;
}
.ec-search__submit svg {
flex-shrink: 0;
}
/* ─── Responsive breakpoints ─── */
/* Laptop / tablet landscape */
@media (max-width: 1024px) {
.ec-search {
grid-template-columns: 1fr 1fr 1fr;
}
.ec-search__submit {
grid-column: 1 / -1;
min-height: 56px;
}
}
/* Tablet portrait */
@media (max-width: 768px) {
.ec-search-wrap {
padding: 40px 16px 32px;
}
.ec-search-card {
padding: 20px 20px 24px;
}
.ec-search-card__title {
font-size: 24px;
}
.ec-search {
grid-template-columns: 1fr 1fr;
gap: 8px;
min-height: auto;
}
.ec-search__field {
min-height: 64px;
padding: 12px 44px 12px 14px;
}
.ec-search__field--select {
grid-column: 1 / -1; /* Goście na pełną szerokość pod datami */
}
.ec-search__submit {
grid-column: 1 / -1;
min-height: 56px;
min-width: auto;
}
}
/* Mobile small */
@media (max-width: 480px) {
.ec-search-wrap {
padding: 32px 12px 28px;
}
.ec-search-card {
padding: 18px 16px 20px;
border-radius: var(--ec-radius);
}
.ec-search-card__title {
font-size: 22px;
}
.ec-search {
grid-template-columns: 1fr;
gap: 8px;
}
.ec-search__field,
.ec-search__field--select {
grid-column: 1 / -1;
min-height: 60px;
}
.ec-search__submit {
letter-spacing: 1.2px;
font-size: 12.5px;
}
}
/* ═══════════════════════════════════════════════════════
§33C FLATPICKR THEME — EcoCamping (green/cream)
─────────────────────────────────────────────────────
Adapts flatpickr calendar to match brand.
═══════════════════════════════════════════════════════ */
.flatpickr-calendar {
background: var(--ec-white) !important;
border: 1px solid var(--ec-cream-dark) !important;
border-radius: var(--ec-radius) !important;
box-shadow: 0 20px 60px rgba(45, 80, 22, 0.18), 0 4px 16px rgba(0,0,0,0.08) !important;
font-family: var(--ec-font-body) !important;
padding: 12px !important;
width: 320px !important;
margin-top: 8px;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
display: none !important; /* ukryj domyślną strzałkę */
}
.flatpickr-months {
padding: 4px 0 8px !important;
border-bottom: 1px solid var(--ec-cream-dark);
}
.flatpickr-month {
color: var(--ec-green-dark) !important;
background: transparent !important;
height: 44px !important;
}
.flatpickr-current-month {
font-family: var(--ec-font-heading) !important;
font-size: 20px !important;
font-weight: 400 !important;
padding: 6px 0 !important;
color: var(--ec-green-dark) !important;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
color: var(--ec-green-dark) !important;
font-family: var(--ec-font-heading) !important;
font-weight: 400 !important;
}
.flatpickr-current-month input.cur-year:hover {
background: var(--ec-cream);
}
.flatpickr-weekdays {
height: 32px !important;
background: transparent !important;
border-bottom: 1px solid var(--ec-cream-dark);
margin-bottom: 4px;
}
.flatpickr-weekday {
color: var(--ec-text-light) !important;
font-family: var(--ec-font-body) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
background: transparent !important;
}
.flatpickr-days {
border: none !important;
padding: 6px 0 !important;
}
.dayContainer {
padding: 0 !important;
min-width: 296px !important;
}
.flatpickr-day {
color: var(--ec-text) !important;
border-radius: 8px !important;
font-family: var(--ec-font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
border: none !important;
margin: 2px !important;
max-width: 38px !important;
height: 38px !important;
line-height: 38px !important;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
background: var(--ec-cream) !important;
color: var(--ec-green-dark) !important;
border: none !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
border: none !important;
box-shadow: none !important;
font-weight: 700 !important;
}
.flatpickr-day.today {
border: 1px solid var(--ec-green) !important;
background: transparent !important;
color: var(--ec-green) !important;
font-weight: 700 !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: rgba(138, 138, 138, 0.35) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: rgba(138, 138, 138, 0.25) !important;
background: transparent !important;
cursor: not-allowed;
}
.flatpickr-prev-month,
.flatpickr-next-month {
color: var(--ec-green) !important;
fill: var(--ec-green) !important;
padding: 12px !important;
top: 0 !important;
height: 44px !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
color: var(--ec-green-dark) !important;
background: var(--ec-cream);
border-radius: 8px;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
fill: var(--ec-green) !important;
transition: fill 0.15s ease;
width: 14px;
height: 14px;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
fill: var(--ec-green-dark) !important;
}
.numInputWrapper span {
border: none !important;
}
.numInputWrapper span:hover {
background: var(--ec-cream) !important;
}
/* ─── MOBILE: flatpickr jako bottom-sheet modal ───
Problem: dropdown nie mieści się w viewport na mobile (za wysoki).
Fix: position fixed + bottom 0, full width, z backdrop.
UX standard (Airbnb, Booking na mobile). */
@media (max-width: 768px) {
.flatpickr-calendar.open {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 16px 14px 24px !important;
border-radius: 20px 20px 0 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25) !important;
z-index: 10050 !important;
transform: translateY(0) !important;
animation: ec-fp-slide-up 0.25s ease-out;
}
@keyframes ec-fp-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Grip bar na górze — sugestia zamknięcia */
.flatpickr-calendar.open::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
margin: 0 auto 14px;
position: static;
}
/* Backdrop gdy picker otwarty — klikalny, zamyka */
body.ec-fp-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 10040;
animation: ec-fp-fade-in 0.2s ease-out;
}
@keyframes ec-fp-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Flatpickr months nav — większe tap targets */
.flatpickr-calendar.open .flatpickr-prev-month,
.flatpickr-calendar.open .flatpickr-next-month {
width: 44px !important;
height: 44px !important;
padding: 10px !important;
top: 2px !important;
}
/* Current month name — większy na mobile */
.flatpickr-calendar.open .flatpickr-current-month {
font-size: 22px !important;
padding: 10px 0 !important;
}
/* Siatka dni — rozciągnij na pełną szerokość, 44px tap target */
.flatpickr-calendar.open .flatpickr-days,
.flatpickr-calendar.open .dayContainer {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.flatpickr-calendar.open .flatpickr-day {
max-width: none !important;
width: calc((100vw - 44px) / 7) !important;
height: 44px !important;
line-height: 44px !important;
font-size: 15px !important;
margin: 2px 0 !important;
}
.flatpickr-calendar.open .flatpickr-weekday {
font-size: 11px !important;
max-width: none !important;
width: calc((100vw - 44px) / 7) !important;
}
}
/* ═══════════════════════════════════════════════════════
§34 LITEPICKER CALENDAR — PREMIUM STYLING
═══════════════════════════════════════════════════════ */
/* Calendar popup container */
.litepicker {
font-family: var(--ec-font-body) !important;
background: var(--ec-white) !important;
border-radius: 16px !important;
box-shadow: 0 16px 64px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.08) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
overflow: hidden !important;
padding: 0 !important;
}
.litepicker .container__main {
padding: 20px 24px !important;
}
/* Month header */
.litepicker .month-item-header {
padding: 8px 0 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.litepicker .month-item-name {
font-family: var(--ec-font-heading) !important;
font-size: 18px !important;
color: var(--ec-green) !important;
text-transform: capitalize !important;
}
.litepicker .month-item-year {
font-family: var(--ec-font-body) !important;
font-size: 18px !important;
color: var(--ec-text-light) !important;
margin-left: 6px !important;
}
/* Nav arrows */
.litepicker .button-previous-month,
.litepicker .button-next-month {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
border: none !important;
background: var(--ec-cream) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
background: var(--ec-green) !important;
}
.litepicker .button-previous-month svg,
.litepicker .button-next-month svg {
fill: var(--ec-green) !important;
width: 8px !important;
height: 12px !important;
}
.litepicker .button-previous-month:hover svg,
.litepicker .button-next-month:hover svg {
fill: var(--ec-white) !important;
}
/* Weekday headers */
.litepicker .month-item-weekdays-row {
display: flex !important;
margin-bottom: 4px !important;
border-bottom: 1px solid var(--ec-cream-dark) !important;
padding-bottom: 8px !important;
}
.litepicker .month-item-weekdays-row > div {
font-family: var(--ec-font-body) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: var(--ec-text-light) !important;
flex: 1 !important;
text-align: center !important;
padding: 4px 0 !important;
}
/* Days container */
.litepicker .container__days {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px !important;
}
/* Day items — base */
.litepicker .day-item {
width: auto !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
font-family: var(--ec-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ec-text) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
border: none !important;
position: relative !important;
aspect-ratio: 1 !important;
}
/* Available day hover */
.litepicker .day-item:not(.is-locked):hover {
background: var(--ec-cream) !important;
color: var(--ec-green) !important;
}
/* Today — outline only, NOT solid green like selected date */
.litepicker .day-item.is-today {
background: transparent !important;
color: var(--ec-green) !important;
font-weight: 700 !important;
border: 2px solid var(--ec-green) !important;
}
/* If today is also selected as start/end, solid green wins */
.litepicker .day-item.is-today.is-start-date,
.litepicker .day-item.is-today.is-end-date {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
border: 2px solid var(--ec-green) !important;
}
/* Locked/unavailable day — clearly disabled, greyed out with line-through */
.litepicker .day-item.is-locked {
color: #bbb !important;
cursor: not-allowed !important;
opacity: 1 !important;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 3px,
rgba(0,0,0,0.03) 3px,
rgba(0,0,0,0.03) 5px
) !important;
text-decoration: line-through !important;
text-decoration-color: rgba(0,0,0,0.2) !important;
pointer-events: none !important;
}
.litepicker .day-item.is-locked:hover {
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 3px,
rgba(0,0,0,0.03) 3px,
rgba(0,0,0,0.03) 5px
) !important;
color: #bbb !important;
}
/* Selected day / start/end date */
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
font-weight: 700 !important;
border-radius: 10px !important;
}
/* Range between start and end */
.litepicker .day-item.is-in-range {
background: rgba(45, 80, 22, 0.1) !important;
color: var(--ec-green) !important;
border-radius: 0 !important;
}
/* Half-day indicators */
.litepicker .day-item.halfBegin::after,
.litepicker .day-item.halfEnd::after {
content: '' !important;
position: absolute !important;
bottom: 3px !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
}
.litepicker .day-item.halfBegin::after {
background: var(--ec-green) !important;
}
.litepicker .day-item.halfEnd::after {
background: var(--ec-wood) !important;
}
/* Legend — HIDDEN (klient nie chce "W tym dniu nie można rozpocząć/zakończyć") */
.litepicker .litepicker__legend {
display: none !important;
}
.litepicker .legend__halfBegin::before,
.litepicker .legend__halfEnd::before {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
display: inline-block !important;
margin-right: 6px !important;
vertical-align: middle !important;
}
.litepicker .legend__halfBegin::before {
background: var(--ec-green) !important;
}
.litepicker .legend__halfEnd::before {
background: var(--ec-wood) !important;
}
/* Error/info message */
.litepicker .litepicker__val {
font-family: var(--ec-font-body) !important;
font-size: 13px !important;
padding: 10px 16px !important;
background: var(--ec-cream) !important;
border-radius: 10px !important;
margin-bottom: 12px !important;
color: var(--ec-text) !important;
text-align: center !important;
}
.litepicker .litepicker__val.--errorDate {
background: #FFF3E0 !important;
color: #E65100 !important;
border: 1px solid #FFE0B2 !important;
}
/* Tooltip */
.litepicker .container__tooltip {
background: var(--ec-green-dark) !important;
color: var(--ec-white) !important;
font-family: var(--ec-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 6px 12px !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
/* Backdrop */
.litepicker-backdrop {
background: rgba(0,0,0,0.1) !important;
backdrop-filter: blur(2px) !important;
}
/* Month separator for 2-column layout */
.litepicker .container__months.columns-2 {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
}
.litepicker .container__months.columns-2 .month-item {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.litepicker .container__months.columns-2 .month-item + .month-item {
border-left: 1px solid var(--ec-cream-dark) !important;
margin-left: 12px !important;
padding-left: 12px !important;
}
/* Litepicker mobile overrides USUNIĘTE 2026-04-24 — zastępujemy systemowy
widget własną wyszukiwarką .ec-search (flatpickr). Reguły .litepicker
zostawiamy desktop dla backwards-compatibility gdyby system pokazywał
ten widget na podstronach. */
/* ═══════════════════════════════════════════════════════
§40 ATTRACTIONS MAP & FILTERS
═══════════════════════════════════════════════════════ */
.ec-atr-map {
border-radius: var(--ec-radius-lg) !important;
overflow: hidden !important;
box-shadow: var(--ec-shadow-lg) !important;
}
.ec-atr-map__iframe {
width: 100% !important;
height: 350px !important;
border: 0 !important;
}
@media (max-width: 768px) {
.ec-atr-map__iframe { height: 250px !important; }
}
.ec-atr-filters {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: center !important;
}
.ec-atr-filter {
background: var(--ec-white) !important;
border: 2px solid var(--ec-green) !important;
color: var(--ec-green) !important;
padding: 8px 20px !important;
border-radius: 50px !important;
font-family: var(--ec-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: var(--ec-transition) !important;
}
.ec-atr-filter:hover {
background: rgba(45,80,22,0.08) !important;
}
.ec-atr-filter--active {
background: var(--ec-green) !important;
color: var(--ec-white) !important;
}
.ec-attraction[data-cat] {
transition: opacity 0.3s ease, max-height 0.3s ease !important;
}
.ec-attraction--hidden {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
§35 404 PAGE STYLING
═══════════════════════════════════════════════════════ */
/* Style the 404 page if it appears */
.page-error {
font-family: var(--ec-font-body) !important;
}
.page-error .btn {
background: var(--ec-green) !important;
border-color: var(--ec-green) !important;
color: var(--ec-white) !important;
border-radius: var(--ec-radius) !important;
}
/* ═══════════════════════════════════════════════════════
§36 LANGUAGE DROPDOWN FIX
═══════════════════════════════════════════════════════ */
/* Language dropdown — show on hover/focus-within AND JS toggle */
.page-top__language:hover #language_menu,
.page-top__language:focus-within #language_menu,
.page-top__language.ec-lang-open #language_menu {
display: block !important;
z-index: 9999 !important;
}
/* Toggler aria-expanded state (system JS) */
.language__toggler[aria-expanded="true"] + #language_menu,
.language__toggler[aria-expanded="true"] ~ #language_menu {
display: block !important;
z-index: 9999 !important;
}
#language_menu {
background: var(--ec-white) !important;
border-radius: var(--ec-radius) !important;
box-shadow: var(--ec-shadow-lg) !important;
padding: 16px !important;
min-width: 200px !important;
right: 0 !important;
top: 100% !important;
position: absolute !important;
}
#language_menu select {
font-family: var(--ec-font-body) !important;
padding: 8px 12px !important;
border: 1px solid var(--ec-cream-dark) !important;
border-radius: 8px !important;
width: 100% !important;
font-size: 14px !important;
color: var(--ec-text) !important;
background: var(--ec-white) !important;
}
/* Language toggler — style properly */
.language__toggler {
font-family: var(--ec-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer !important;
background: none !important;
border: none !important;
color: var(--ec-text) !important;
position: relative !important;
}
.language__toggler .icon-arrow_smaller_down {
font-size: 10px !important;
margin-left: 4px !important;
transition: transform 0.2s ease !important;
}
.page-top__language.ec-lang-open .icon-arrow_smaller_down {
transform: rotate(180deg) !important;
}
/* ═══════════════════════════════════════════════════════
§37 CONTACT PAGE — H1 & HERO STYLING
═══════════════════════════════════════════════════════ */
/* --- Pseudo-hero banner for system /contact page --- */
.page-contact .contact {
position: relative;
}
.page-contact .contact::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 175px;
background: linear-gradient(135deg, var(--ec-green-dark) 0%, var(--ec-green) 100%);
z-index: 0;
}
.page-contact .contact > .container {
position: relative;
z-index: 1;
}
/* System contact page h1 "Dane kontaktowe" — white on green hero */
.page-contact h1.contact__label {
font-family: var(--ec-font-heading) !important;
color: var(--ec-white) !important;
font-size: 40px !important;
margin: 0 !important;
padding: 48px 0 32px !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
}
/* Kicker-like subtitle above h1 via pseudo-element */
.page-contact h1.contact__label::before {
content: 'Eco Camping Spytkowice';
display: block;
font-family: var(--ec-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: rgba(255,255,255,0.7) !important;
margin-bottom: 12px !important;
}
/* Right column (Platnosci) — white card above hero */
.page-contact .contact__payments {
background: var(--ec-white) !important;
border-radius: var(--ec-radius) !important;
padding: 32px !important;
box-shadow: var(--ec-shadow) !important;
margin-top: 32px !important;
position: relative;
z-index: 2;
}
/* "Płatności" heading — tone down */
.page-contact .payment-info h2,
.page-contact [class*="payment"] h2,
.page-contact h2:first-of-type {
font-size: 24px !important;
}
/* Hide system "Dane właściciela" heading or style it */
.page-contact h2 {
font-family: var(--ec-font-heading) !important;
color: var(--ec-green-dark) !important;
font-size: 22px !important;
margin: 24px 0 16px !important;
}
/* "Nasze lokalizacje" heading */
.page-contact h3 {
color: var(--ec-green) !important;
font-size: 20px !important;
}
/* Location pin — override orange icon-pointer */
.page-contact .icon-pointer,
.page-contact .icon.icon-pointer,
.contact__item .icon-pointer {
color: var(--ec-green) !important;
}
/* ═══════════════════════════════════════════════════════
§38 OFFERS PAGE — REFINED DROPDOWN ARROWS
═══════════════════════════════════════════════════════ */
/* Dropdown toggle buttons — white arrows, no heavy green circles */
.page-offers .widget__option > button,
.page-offers .iai-search .widget__option > button,
.page-offers .iai_widget_btn {
background: var(--ec-green) !important;
border: none !important;
color: var(--ec-white) !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.page-offers .widget__option > button:hover,
.page-offers .iai_widget_btn:hover {
background: var(--ec-green-light) !important;
}
/* Arrow icons inside buttons — white */
.page-offers .widget__option > button i[class*="iaiicon"],
.page-offers .iai_widget_btn i[class*="iaiicon"] {
color: var(--ec-white) !important;
font-size: 12px !important;
}
/* Field icons (calendar, location, users, price) — subtle green */
.page-offers .widget__option > i.iaiicon-calendar,
.page-offers .widget__option > i.iaiicon-location,
.page-offers .widget__option > i.iaiicon-users,
.page-offers .widget__option > i.iaiicon-price,
.page-offers .widget__option i.iaiicon-calendar:not(button i),
.page-offers .widget__option i.iaiicon-location:not(button i),
.page-offers .widget__option i.iaiicon-users:not(button i),
.page-offers .widget__option i.iaiicon-price:not(button i) {
color: var(--ec-green) !important;
}
/* ═══════════════════════════════════════════════════════
§39 IDOSELL/IDOBOOKING POWERED-BY LOGO FIX
═══════════════════════════════════════════════════════ */
/* Powered-by badge in footer — blend with dark footer */
.powered_by,
footer .powered_by {
opacity: 0.4 !important;
filter: brightness(0) invert(1) !important;
}
/* Powered-by badge in footer — always inverted (dark bg) */
/* System uses on_white.svg so we invert for dark footer */
footer .powered_by {
filter: brightness(0) invert(1) !important;
opacity: 0.4 !important;
}
/* Payment bar at bottom — style consistently */
/* TRAP #6 CLAUDE.md: system .footer-contact-baner::before ma bg #3E475E (ciemny niebieski) — MUSI być nadpisane */
footer + div,
.payments-bar,
.footer-contact-baner,
.footer-contact-baner::before,
.footer-contact-baner::after {
background: var(--ec-green-dark) !important;
background-color: var(--ec-green-dark) !important;
}
.footer-contact-baner::before,
.footer-contact-baner::after {
/* zachowuj pełną szerokość viewport (system ma width:100vw) — tylko kolor zmieniamy */
content: "" !important;
}
.footer-contact-baner img {
filter: brightness(0) invert(1) !important;
opacity: 0.7 !important;
}
/* ═══════════════════════════════════════════════════════
§40 MOBILE — SEARCH WIDGET (separated cards mobile)
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Widget fields — compact cards on mobile */
.page-index .widget__option {
padding: 10px 14px !important;
min-height: auto !important;
border-radius: 10px !important;
}
.page-index .widget__option label {
font-size: 9px !important;
margin-bottom: 2px !important;
}
.page-index .widget__option input[type="text"] {
font-size: 14px !important;
height: 24px !important;
line-height: 24px !important;
}
/* "Sprawdź dostępność" button — compact */
.page-index .formbutton {
min-height: 44px !important;
font-size: 14px !important;
padding: 10px 20px !important;
border-radius: 10px !important;
}
/* Persons dropdown button — no overlap with text */
.page-index .widget__option button[aria-label] {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Contact hero smaller on mobile */
.page-contact .contact::before {
height: 160px;
}
.page-contact h1.contact__label {
font-size: 28px !important;
padding: 36px 0 20px !important;
}
.page-contact h1.contact__label::before {
font-size: 11px !important;
letter-spacing: 1.5px !important;
}
/* Language dropdown — full width on mobile */
#language_menu {
right: -20px !important;
min-width: 180px !important;
}
}
/* ═══════════════════════════════════════════════════════
§41 SEO & ACCESSIBILITY FIXES
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
WYRÓŻNIONE OFERTY — Madera approach
Ukryj system hotspot, JS czyta dane i buduje custom karty
═══════════════════════════════════════════════════════ */
.container-hotspot {
display: none !important;
}
/* --- Custom offers section (built by JS from hidden hotspot data) --- */
.ec-offers-section {
background: var(--ec-cream, #F5F1EB);
padding: 60px 0;
text-align: center;
}
.ec-offers__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.ec-offers__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.ec-offer-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none !important;
color: inherit;
display: flex;
flex-direction: column;
}
.ec-offer-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.ec-offer-card__img {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #e8e4dd;
}
.ec-offer-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.ec-offer-card:hover .ec-offer-card__img img {
transform: scale(1.06);
}
.ec-offer-card__body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
}
.ec-offer-card__name {
font-family: 'DM Serif Display', serif;
font-size: 20px;
color: #1a1a1a;
margin: 0 0 8px;
}
.ec-offer-card__desc {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #666;
margin: 0 0 12px;
line-height: 1.5;
}
.ec-offer-card__meta {
display: flex;
gap: 16px;
justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #888;
margin-bottom: 12px;
}
.ec-offer-card__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ec-offer-card__meta svg {
width: 16px;
height: 16px;
}
.ec-offer-card__price {
font-family: 'DM Serif Display', serif;
font-size: 26px;
color: var(--ec-green, #2D5016);
margin: auto 0 12px;
padding-top: 8px;
}
.ec-offer-card__price small {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #888;
font-weight: 400;
}
.ec-offer-card__cta {
display: block;
background: var(--ec-green, #2D5016);
color: #fff !important;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
text-decoration: none !important;
transition: background 0.3s ease;
}
.ec-offer-card__cta:hover {
background: #1a3a0a;
}
@media (max-width: 1024px) {
.ec-offers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.ec-offers-section { padding: 40px 0; }
.ec-offers__grid {
grid-template-columns: 1fr;
max-width: 400px;
margin: 24px auto 0;
}
}
/* Hide system h1 "Wynajem Apartamentów..." — nasz body_top ma własny h1 */
.page-index .index-info > h1 {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Powered-by logo — accessible label (WCAG link-name fix) */
a.powered_by_logo::after {
content: "Powered by IdoBooking" !important;
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
/* Scroll-down arrow (#bounce) — zielony, przesuniety na prawo */
#bounce {
background-color: #2D5016 !important;
background: #2D5016 !important;
left: auto !important;
right: 32px !important;
transform: none !important;
margin-left: 0 !important;
}
/* Cookie banner — przycisk i akcenty na zielono */
.ck_dsclr__btn_v2 {
background: #2D5016 !important;
}
.ck_dsclr__btn_v2:hover {
background: #3a6b1e !important;
}
.ck_dsclr_v2 a {
color: #a8d88a !important;
}
.ck_dsclr_x_v2 {
color: #a8d88a !important;
}
/* UWAGA 8 — POLITYKA PRYWATNOSCI / REGULAMIN jako popup modal (zamiast redirect do booking engine) */
.ec-policy-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(12, 24, 8, 0.78);
z-index: 99999;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 20px;
box-sizing: border-box;
}
.ec-policy-modal.ec-policy-modal--active {
display: flex;
align-items: center;
justify-content: center;
animation: ecPolicyFadeIn 0.22s ease-out;
}
@keyframes ecPolicyFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ec-policy-modal__box {
background: #fff;
width: 100%;
max-width: 960px;
height: 86vh;
max-height: 800px;
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
animation: ecPolicySlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ecPolicySlideUp {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ec-policy-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
border: none;
background: #fff;
color: var(--ec-green, #2d5016);
cursor: pointer;
font-size: 28px;
font-weight: 300;
line-height: 1;
z-index: 2;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.18s ease, box-shadow 0.18s ease;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 3px;
}
.ec-policy-modal__close:hover {
transform: scale(1.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.ec-policy-modal iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 640px) {
.ec-policy-modal { padding: 10px; }
.ec-policy-modal__box { height: 92vh; border-radius: 16px; }
.ec-policy-modal__close { top: 10px; right: 10px; width: 40px; height: 40px; }
}