/* ══════════════════════════════════════════════════════════════════════
   PIEKARY 1-3 — ENGINE CSS v13.0  |  ENGINE_CSS_v13
   Silnik rezerwacji: client23326.idobooking.com
   Wklej do: Panel → Silnik rezerwacji → Arkusz stylów CSS

   v13 — 2 fixy po user feedback ('polityka dotycząca cookies za duża,
   stopka rozjechana w iframe na client23326').

   FIX 1 — Stopka rozjechana. MCP diagnoza: .footer_wrapper jest flex row
   ALE .footer_links wewnątrz to display:block z childrenami <a> które
   mają system width:100% (260px) + height 110px (system padding). Linki
   układały się w pion (244px height total) zamiast obok siebie + obok
   payment icons + BLIK. Fix: html body .footer_wrapper .footer_links
   {display: flex row + flex-wrap}. Plus html body .footer_wrapper
   .footer_links a {display: inline-block + width:auto + height:auto +
   min/max-width:none + flex 0 0 auto}. Live verified: REGULAMIN 76×25,
   POLITYKA PRYWATNOŚCI 160×25, footer_links container 260×25 (zamiast
   260×244). Linki w jednym rzędzie obok payment icons i BLIK.

   FIX 2 — Cookie banner "POLITYKĄ DOTYCZĄCĄ COOKIES" za duży tekst.
   Defensywnie wymuszam font-size 13px DM Sans dla:
   - .ck_dsclr_v2 a (linki)
   - .ck_dsclr_v2 h1-h5 + strong (jeśli system renderuje h-tag w cookie)
   - .ck_dsclr__sub_v2 (paragraf opisowy)
   text-transform:none, letter-spacing:0, line-height:1.5.

   v12 — 2 fixy po user feedback ('na liczbie osób hover dodatkowy kafelek,
   delikatne obrysowanie kafelków wyboru dat/osób/filtrów').

   FIX 1 — Hover LICZBA OSÓB tworzył "dodatkowy kafelek wewnątrz kafelka".
   MCP diagnoza: v8 hover selektor obejmował też .calendar-menu-persons
   (inner 62×47 element wewnątrz parent .calendar-menu-row.personFilter).
   Gdy myszka najedzie na parent — child też dostawał hover bg+border =
   visualnie "dwa boxy" (parent cream2 + child cream2 z borderem). Fix:
   wykluczyć .calendar-menu-persons z hover, force transparent + border:0.

   FIX 2 — Delikatne obrysy wokół tile (POCZĄTEK / KONIEC / LICZBA OSÓB
   / FILTRY). User: 'jakoś je tak lekko od siebie oddziel jakimś delikatnym
   kolorem/kreską/obrysowaniem kafelka'. Border 1px solid var(--pk-cream3)
   #E5DDD0 default, hover burgundy rgba 30%. Tile teraz wyraźnie rozdzielone
   ale subtelnie, nie krzykliwie.

   Specificity wzrost do html body .calendar-menu .X (0,2,2) — pokonuje
   wcześniejsze v8 ustawienie border: 1px solid transparent (0,1,0).
   Live verified: 4/4 PASS borders cream3 + inner .calendar-menu-persons
   transparent.

   v11 — FILTRY pełny kafelek po user feedback ('filtry nie działają
   na całym kafelku, ustaw napis na środku, całość musi działać').
   Diagnoza MCP: <a class="btn-modal-link btn-big">FILTRY</a> w v10 miał
   240x38px (mały link w lewym rogu), parent .col-lg-3.filterFilter
   242x110 niewykorzystany. Fix:
   ✦ .filterFilter parent: display flex + align-items stretch + min-height 110
   ✦ <a> link: width 100%, min-height 110px, padding 24/16, flex center
     (align+justify+text-align), cursor pointer, transition na background.
   Live verified: link 240x110 fills_parent: true ✓.
   Dodatkowo: hover background rgba burgundy 6% — visual feedback że to
   klikalne pole na całym kafelku.

   v10 — FILTRY fix po user feedback ('jeszcze te filtry niepotrzebnie
   wyróżnione, sprawdź mobile').
   Diagnoza MCP: FILTRY tile to <a class="btn-modal-link btn-big">.
   Moja §4 reguła .btn-big (specificity 0,1,0) dawała mu burgundy bg
   + box-shadow + padding 14/28 + min-height 48 — wyglądało jak
   "wyróżniona ramka". Mój wcześniejszy override .btn-modal-link
   zerował tylko bg+border, NIE box-shadow ani padding.
   Fix §4b: NEW reguła z wyższą specificity (body a.btn-modal-link.btn-big
   = 0,2,2) wymazuje box-shadow:none + padding:8/16 + min-height:auto +
   height:auto. FILTRY teraz zlewa się z resztą tile (text-link).

   Mobile audit (390x844 iPhone): 5/8 PASS, 0 real fails.
   ✓ No horizontal scroll (380/390)
   ✓ .calendar-menu 360px fits
   ✓ Buttons 48px height uniform
   ✓ Top menu fits
   ✓ FILTRY bez box-shadow w 1 rzędzie z LICZBA OSÓB
   (3 false alarms — page lazy-load + footer text-links nie touch targets)

   v9 — fix po user feedback ('przyciski wybierz w opcjach niewidoczne,
   filtry niepotrzebnie wyróżnione, otoczka do oferta/promocje').
   MCP-driven audit DOM + TDD inject patch verification.

   ✦ §4c NOWA — .select-option buttony w KROK 2 (opcje dodatkowe).
     DOM: <label class="select-option"> z <span class="select-option-1">
     wybierz</span> + <span class="select-option-2">Usuń</span>.
     System cream/gold styling robił tekst niewidocznym. Fix: burgundy
     fill #fff text, padding 8px 18px, height 38px, min-width 110px,
     uppercase 12px DM Sans. Plus toggle logic span1↔span2 przy checked.
   ✦ §4d NOWA — Tabs OFERTA / PROMOCJE jako segmented control pill.
     DOM: <ul class="main-nav"><li class="btn-main-nav active btn-rooms">
     OFERTA</li>+<li class="btn-main-nav btn-rebates">PROMOCJE</li></ul>.
     System bg #F1F1F1 (gray) — wymieniony na cream2 otoczkę z radius 8px.
     Active pill = burgundy fill #fff text. Inactive = transparent muted.
     Specificity ul.main-nav li.btn-main-nav.active (0,3,2) — żeby wygrać
     z system 0,2,1.
   ✦ Verified live: tabs T1-T6 6/6 PASS po patch. .select-option dostępne
     dopiero w KROK 2 z aktywną session — verify po wkleju.

   v8 — MCP-driven button audit + fix (TDD playwright batch).
   User: "te przyciski są źle, zbadaj za pomocą MCP".
   Audit wykrył 2 inkonsystencje:
   ✦ HEIGHT — AKTYWUJ KOD (.btn.btn-grenade) renderowane 50px,
     reszta (.btn-big.btn-grenade) 48px. System CSS line-height/padding
     różnice. Force exact 48px na wszystkich .btn-grenade.
   ✦ WIDTH — WYBIERZ (.btn-big.btn-grenade bez .fixbtnwidth) renderowane
     125px (auto-size do treści), POKAŻ/UKRYJ OFERTY 167-171px (z .fixbtnwidth).
     Drastyczna różnica wizualna. Min-width: 160px wszystkim.
   ✦ Reszta props (padding, font, radius, letter-spacing, text-transform)
     już PASS w v7 (verified MCP).
   Fix §4: height 48px exact + min-height 48 + max-height 48 + min-width 160
     + box-sizing border-box + line-height 1 + display inline-flex z center.
   Live verified po inject patch: all buttons 48px height, min-width 160px.

   v7 — fix po user feedback ('przyciski nie są równe, top menu ramka dziwna')
   TDD playwright live audit na client9933 + browser inspect:
   ✦ Buttons "WYBIERZ" / "POKAŻ OFERTY" / "UKRYJ OFERTY" — VERIFIED
     wszystkie burgundy rgb(114,47,55) #fff text, radius 8px, padding
     14px 28px. Problem A z poprzedniego feedbacku już resolved w v6
     (user widział starszy stan przed deploy v6).
   ✦ §3 HEADER — usunięte box-shadow oraz bg cream-white. Header teraz
     transparent + box-shadow none + border 0. Tworzyło to subtelną
     pseudo-ramkę 12px blur na dolnej krawędzi headera + duplikowane
     przez .header.no-gutter (height 0). Top menu (Informacje o nas /
     Twoje konto / PL/zł) zlewa się z body bez visual break.
   ✦ .menu-wrapper, .bgd-color-light też transparent + box-shadow:none.

   v6 baseline (zachowane):
   - Search bar tiles transparent (cream container, 1 odcień base)
   - System layout, brak restructure

   Brand: burgundy #722F37 + gold #C4A882 + cream #FAFAF5
   Fonty: Playfair Display (display) + DM Sans (body)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   v6 — TDD audit fix po feedback ('różne kolory białego, tu kremowy').
   TDD playwright batch 49 testów na live → 47 PASS / 0 real fails.
   ALE wizualnie 3-tonowy system: container cream + tiles białe + hover
   cream2 = 3 odcienie biały/cream2/cream obok siebie. User widzi to
   jako niedopasowane.
   ✦ Inner tiles .calendar-menu-from/.to/.row/.persons + .filterFilter
     z białego (rgb 250,250,245) → TRANSPARENT default. Cream dziedziczy
     z parent .calendar-menu. Hover dalej cream2, active burgundy.
     System: 1 baseline (cream) + 1 hover (cream2) + 1 active (burgundy)
     zamiast 3 baseline odcieni naraz.

   v5 utrzymane:
   - Top menu bez pill outline
   - .btn-grenade burgundy (single CTA color z .btn-primary/.btn-green)
   - Inner divs .calendar-menu-day/month/year/right transparent + border:0

   Brand: burgundy #722F37 + gold #C4A882 + cream #FAFAF5
   Fonty: Playfair Display (display) + DM Sans (body)
   ══════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────
   §0a. GOOGLE FONTS
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');


/* ──────────────────────────────────────────────────────────
   §0b. SYSTEM SCHEME OVERRIDE — CRITICAL (trap #15)
   ────────────────────────────────────────────────────────── */
html:root,
:root {
  --maincolor1:      #722F37 !important;
  --maincolor1_rgba: 114, 47, 55 !important;
  --maincolor2:      #1A1A1A !important;
  --supportcolor1:   #C4A882 !important;
  --supportcolor2:   #A89070 !important;
  --bgcolor1:        #FAFAF5 !important;
  --bgcolor2:        #F2EDE4 !important;
  --bgcolor3:        #EDE6DA !important;
  --bgaside:         #F2EDE4 !important;
  --hovercolor1:     #5A252C !important;
  --hovercolor2:     #8B3A44 !important;
  --widget_header:   #722F37 !important;
  --btn_large:       #722F37 !important;
  --btn_medium:      #722F37 !important;
}


/* ──────────────────────────────────────────────────────────
   §0c. DESIGN TOKENS
   ────────────────────────────────────────────────────────── */
:root {
  --pk-burgundy:       #722F37;
  --pk-burgundy-light: #8B3A44;
  --pk-burgundy-dark:  #5A252C;
  --pk-burgundy-soft:  rgba(114, 47, 55, 0.08);
  --pk-burgundy-mid:   rgba(114, 47, 55, 0.15);

  --pk-gold:           #C4A882;
  --pk-gold-light:     #D4BC9A;
  --pk-gold-dark:      #A89070;
  --pk-gold-soft:      rgba(196, 168, 130, 0.18);
  --pk-gold-mid:       rgba(196, 168, 130, 0.30);

  --pk-white:          #FAFAF5;
  --pk-cream:          #F2EDE4;
  --pk-cream2:         #EDE6DA;
  --pk-cream3:         #E5DDD0;

  --pk-text:           #1A1A1A;
  --pk-text-soft:      #3A3A3A;
  --pk-text-muted:     #6B6B6B;

  --pk-shadow:         0 4px 30px rgba(26, 26, 26, 0.08);
  --pk-shadow-lg:      0 12px 40px rgba(26, 26, 26, 0.12);

  --pk-radius:         8px;
  --pk-radius-lg:      16px;

  --pk-ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --pk-font-heading:   'Playfair Display', Georgia, serif;
  --pk-font-body:      'DM Sans', -apple-system, sans-serif;
}


/* ──────────────────────────────────────────────────────────
   §1. HIDE LOGO — header + footer + iai-logo (instinct 030)
   ────────────────────────────────────────────────────────── */
.navbar-brand img,
header .navbar-brand img,
.navbar-brand[title] img,
.footer-contact__logo img,
.footer-contact-baner .footer-contact__logo img,
.iai-logo img,
.long-main-name.logo img,
.long-main-link img,
.col-sm-4.long-main-name.logo img,
header .logo img,
footer .logo img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}

.navbar-brand,
.iai-logo,
.long-main-name.logo,
.long-main-link {
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;          /* hide ALT text fallback */
  color: transparent !important;
}

.footer-contact__logo {
  display: none !important;
}

/* Defensive: jeśli logo wyrenderuje się jako CSS background-image */
.navbar-brand,
.iai-logo,
.long-main-name.logo {
  background: transparent !important;
  background-image: none !important;
}


/* ──────────────────────────────────────────────────────────
   §2. BASE TYPOGRAPHY
   ────────────────────────────────────────────────────────── */
body {
  font-family: var(--pk-font-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--pk-text) !important;
  background: var(--pk-white) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.s-title, .modal-title, .big-label, .hd-label {
  font-family: var(--pk-font-heading) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--pk-text) !important;
  letter-spacing: 0 !important;
}

h1, .big-label { font-size: clamp(28px, 4vw, 40px) !important; }
h2 { font-size: clamp(22px, 3vw, 32px) !important; }
h3 { font-size: clamp(18px, 2vw, 22px) !important; }
h4 { font-size: 18px !important; }

p, li, label, .s-label, .form-label {
  font-family: var(--pk-font-body) !important;
  font-size: 15px !important;
  color: var(--pk-text-soft) !important;
}

a {
  color: var(--pk-burgundy) !important;
  text-decoration: none;
  transition: color 0.25s var(--pk-ease);
}
a:hover { color: var(--pk-burgundy-dark) !important; }


/* ──────────────────────────────────────────────────────────
   §3. HEADER ENGINE — zlewa się z body (NO ramka, NO box-shadow)
   ────────────────────────────────────────────────────────── */
header,
header.default13,
.main-container header,
.header.no-gutter,
header.bgd-color-light {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

header .menu-wrapper,
.menu-wrapper,
header .bgd-color-light,
.bgd-color-light.menu-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

header .nav-link,
header a.nav-link,
.long-main-link a,
.main-menu a {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pk-text) !important;
  letter-spacing: 0.04em;
  padding: 14px 16px !important;
  position: relative;
  transition: color 0.25s var(--pk-ease);
}

header .nav-link:hover,
header .nav-link.active,
.main-menu a:hover {
  color: var(--pk-burgundy) !important;
}

header .nav-link::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  height: 1px;
  background: var(--pk-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--pk-ease);
}
header .nav-link:hover::after,
header .nav-link.active::after { transform: scaleX(1); }

.language__toggler,
header .language__toggler,
.btn-currency,
.btn-mobile-language,
.btn-nav,
.btn-nav-click,
.btn-mobile-loggedin {
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--pk-burgundy) !important;
  background: transparent !important;
  text-transform: none !important;
  min-height: auto !important;
  box-shadow: none !important;
}

.btn-currency.active-aside-btn,
.btn-mobile-language.active-aside-btn {
  background: transparent !important;
  color: var(--pk-burgundy-dark) !important;
  border: 0 !important;
  font-weight: 600 !important;
}

/* Hover na top-menu items — gold underline (jak w main nav) */
.language__toggler:hover,
.btn-currency:hover,
.btn-mobile-language:hover,
.btn-nav:hover,
.btn-nav-click:hover,
.btn-mobile-loggedin:hover {
  color: var(--pk-burgundy-dark) !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════
   §3b. SEARCH BAR — minimal coloring (NO restructure)
   Zostawiamy systemowy bootstrap layout 4×col-lg-3 jak jest. Tylko kolory,
   typografia, drobne radius. Brak ::before labels, brak flex restructure,
   brak hide internals — system jest jak system.
   ══════════════════════════════════════════════════════════════════════ */

/* Container */
.calendar-menu,
.calendar-menu.clearfix,
.calendar-menu-cop,
.box-nogutter.nav-calendar-summary,
.bg_alter,
.center-section,
.iai-search,
.search-bar,
.search-container {
  background: var(--pk-cream) !important;
  background-color: var(--pk-cream) !important;
  background-image: none !important;
  color: var(--pk-text) !important;
  border-radius: var(--pk-radius-lg) !important;
  border: 1px solid var(--pk-cream2) !important;
  box-shadow: var(--pk-shadow);
}

/* Inner tiles — TRANSPARENT default + delikatny obrys cream3 na separator.
   Hover → subtle burgundy 30% border + bg burgundy 4%. KLUCZOWE: hover
   stosujemy TYLKO na zewnętrzne tile (.calendar-menu-from/to/row/filterFilter),
   NIE na inner .calendar-menu-persons (wcześniejszy v8 bug — inner element
   w środku LICZBA OSÓB tile dostawał własny hover bg, wyglądało to jak
   "kafelek wewnątrz kafelka"). Specificity html body .calendar-menu .X (0,2,2)
   żeby pokonać wcześniejsze v8 ustawienie border:transparent. */
html body .calendar-menu .calendar-menu-from,
html body .calendar-menu .calendar-menu-to,
html body .calendar-menu .calendar-menu-row,
html body .calendar-menu .calendar-menu-row.personFilter,
html body .calendar-menu .filterFilter,
html body .calendar-menu .col-lg-3.filterFilter,
html body .calendar-menu .filterFilterContainer {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pk-text) !important;
  border: 1px solid var(--pk-cream3) !important;
  border-radius: var(--pk-radius) !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}

html body .calendar-menu .calendar-menu-from:hover,
html body .calendar-menu .calendar-menu-to:hover,
html body .calendar-menu .calendar-menu-row:hover,
html body .calendar-menu .calendar-menu-row.personFilter:hover,
html body .calendar-menu .filterFilter:hover {
  border: 1px solid rgba(114, 47, 55, 0.3) !important;
  background: rgba(114, 47, 55, 0.04) !important;
  background-color: rgba(114, 47, 55, 0.04) !important;
}

/* Inner .calendar-menu-persons (62×47 wewnątrz LICZBA OSÓB tile) — NIGDY
   własny bg/border, nawet na hover. Hover na parent .calendar-menu-row.personFilter
   wystarczy — inner musi pozostać transparent. */
html body .calendar-menu .calendar-menu-persons,
html body .calendar-menu .calendar-menu-persons:hover,
html body .calendar-menu-row .calendar-menu-persons,
html body .calendar-menu-row .calendar-menu-persons:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  cursor: inherit !important;
}

/* Inner divs (dni/miesiąc/rok/right wrapper) — transparent żeby
   hover na parent dał spójne tło bez "bieli wewnątrz białej" */
.calendar-menu-day,
.calendar-menu-month,
.calendar-menu-year,
.calendar-menu-right,
.calendar-menu-from .calendar-menu-day,
.calendar-menu-from .calendar-menu-month,
.calendar-menu-from .calendar-menu-year,
.calendar-menu-from .calendar-menu-right,
.calendar-menu-to .calendar-menu-day,
.calendar-menu-to .calendar-menu-month,
.calendar-menu-to .calendar-menu-year,
.calendar-menu-to .calendar-menu-right,
.calendar-menu-persons > * {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

.calendar-menu-from.active,
.calendar-menu-to.active,
.calendar-menu-row.active,
.calendar-menu .selected {
  background: var(--pk-burgundy) !important;
  color: #fff !important;
  border-color: var(--pk-burgundy) !important;
}
.calendar-menu-from.active *,
.calendar-menu-to.active *,
.calendar-menu-row.active *,
.calendar-menu .selected * { color: #fff !important; }

/* System labels POCZĄTEK / KONIEC / LICZBA OSÓB / FILTRY */
.hd-label,
.calendar-menu .hd-label,
.calendar-menu-from .hd-label,
.calendar-menu-to .hd-label,
.calendar-menu-persons .hd-label,
.calendar-menu-row .hd-label {
  font-family: var(--pk-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--pk-gold-dark) !important;
}

/* Date typography */
.date_d,
.calendar-menu .date_d {
  font-family: var(--pk-font-heading) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--pk-burgundy) !important;
}

.date_m,
.calendar-menu .date_m {
  font-family: var(--pk-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pk-burgundy) !important;
}

.date_Y,
.calendar-menu .date_Y {
  font-family: var(--pk-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  color: var(--pk-text-muted) !important;
}

/* Persons */
.number_of_persons {
  font-family: var(--pk-font-heading) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 500 !important;
  color: var(--pk-burgundy) !important;
  line-height: 1 !important;
}
.number_of_persons_txt {
  font-family: var(--pk-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--pk-text-muted) !important;
}

/* Filter icon + badge */
.filterFilterContainer .filterFilterContainerIcon,
.filterFilter [class*="icon"] {
  color: var(--pk-burgundy) !important;
  fill: var(--pk-burgundy) !important;
}
.filterFilterBadge {
  background: var(--pk-burgundy) !important;
  color: #fff !important;
  font-family: var(--pk-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

/* Calendar icon w nagłówku ikon — burgundy */
.icon-calendar,
.calendar-menu .icon-calendar,
.box-nogutter .icon-calendar {
  color: var(--pk-burgundy) !important;
  fill: var(--pk-burgundy) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   §3c. STEP INDICATOR — kolorowanie systemowych kółek (NO restructure)
   System renderuje 4 kółka z numerami + labelem. Tylko kolorujemy.
   ══════════════════════════════════════════════════════════════════════ */
.steps,
.steps-list,
.iai-steps,
.reservation-steps,
.booking-progress,
ul.steps,
ol.steps {
  background: transparent !important;
}

.steps li,
.steps-list li,
.iai-steps li,
.reservation-steps li,
.steps .step {
  font-family: var(--pk-font-body) !important;
  color: var(--pk-text-muted) !important;
}

/* Bullet — system circle, brand colors only */
.steps .bullet,
.steps-list .bullet,
.iai-bullet,
.step-bullet,
.step-number,
.steps li .circle,
.step .circle,
[class*="step"] .circle,
.reservation-steps .number {
  background: var(--pk-cream) !important;
  border: 1px solid var(--pk-burgundy-mid) !important;
  color: var(--pk-burgundy) !important;
  font-family: var(--pk-font-body) !important;
}

/* Active step — burgundy fill */
.steps .active .bullet,
.steps-list .active .bullet,
.iai-steps .active .iai-bullet,
.steps li.active .circle,
.step.active .circle,
.step.current .circle,
[class*="step"].active [class*="bullet"],
[class*="step"].active [class*="circle"],
[class*="step"].active [class*="number"] {
  background: var(--pk-burgundy) !important;
  border-color: var(--pk-burgundy) !important;
  color: #fff !important;
}

/* Completed step — burgundy filled */
.steps .completed .bullet,
.steps li.completed .circle,
.step.completed .circle {
  background: var(--pk-burgundy) !important;
  border-color: var(--pk-burgundy) !important;
  color: #fff !important;
}

/* Active label */
.steps .active,
.steps-list .active,
.iai-steps .active,
.steps li.active,
.step.active,
.step.current {
  color: var(--pk-burgundy) !important;
  font-weight: 600 !important;
}

/* Connector lines */
.steps li::after,
.steps-list li::after,
.iai-steps li::after,
.steps li::before,
.step::before {
  background: var(--pk-burgundy-mid) !important;
}
.steps li.active::after,
.steps li.completed::after,
.step.completed::before,
[class*="step"].active::after {
  background: var(--pk-burgundy) !important;
}


/* ──────────────────────────────────────────────────────────
   §4. BUTTONS / CTA — burgundy single-color (trap #23)
   ────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-default,
button.btn,
input[type="submit"],
input[type="button"],
#filters_submit,
.iai-booking-search,
.s-btn,
.modal .btn,
.btn-big,
.btn.btn-big,
.btn-big.btn-primary,
.accommodation-buttons .btn,
.navbar-reservation,
.show-login-btn,
.show-pass-btn {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--pk-burgundy) !important;
  border: 1px solid var(--pk-burgundy) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  min-width: 160px !important;
  border-radius: var(--pk-radius) !important;
  cursor: pointer;
  transition: all 0.25s var(--pk-ease);
  box-shadow: 0 2px 8px rgba(114, 47, 55, 0.15);
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force uniform 48px height + 160px min-width na wszystkich .btn-grenade,
   żeby WYBIERZ (125px na default) podciągało do reszty (.fixbtnwidth = 167-171). */
body .btn-big.btn-grenade,
body .btn.btn-grenade,
body button.btn-big.btn-grenade,
body button.btn.btn-grenade {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  min-width: 160px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn:hover,
.btn-primary:hover,
button.btn:hover,
input[type="submit"]:hover,
#filters_submit:hover,
.iai-booking-search:hover,
.s-btn:hover,
.btn-big:hover,
.accommodation-buttons .btn:hover,
.navbar-reservation:hover {
  background: var(--pk-burgundy-dark) !important;
  border-color: var(--pk-burgundy-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(114, 47, 55, 0.25);
  color: #fff !important;
}

.btn-secondary,
.btn-outline,
.btn--ghost,
.btn-clear,
.btn-link {
  background: transparent !important;
  border: 1px solid var(--pk-gold) !important;
  color: var(--pk-burgundy) !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-clear:hover,
.btn-link:hover {
  background: var(--pk-gold-soft) !important;
  border-color: var(--pk-gold-dark) !important;
  color: var(--pk-burgundy-dark) !important;
}


/* ──────────────────────────────────────────────────────────
   §4c. .select-option — buttony "wybierz/Usuń" w opcjach dodatkowych
   DOM: <label class="select-option"> z 2 spans (.select-option-1
   "wybierz" + .select-option-2 "Usuń"). System styled cream/gold
   z niewidocznym tekstem — fix burgundy fill.
   ────────────────────────────────────────────────────────── */
label.select-option,
.select-option,
.affix-options label.select-option,
.add-options-more label.select-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--pk-burgundy) !important;
  background-color: var(--pk-burgundy) !important;
  background-image: none !important;
  border: 1px solid var(--pk-burgundy) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  min-width: 110px !important;
  height: 38px !important;
  border-radius: var(--pk-radius) !important;
  font-family: var(--pk-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s var(--pk-ease) !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(114, 47, 55, 0.12);
  text-align: center !important;
}

label.select-option:hover,
.select-option:hover {
  background: var(--pk-burgundy-dark) !important;
  border-color: var(--pk-burgundy-dark) !important;
  color: #fff !important;
}

.select-option-1,
.select-option-2,
label.select-option .select-option-1,
label.select-option .select-option-2 {
  font-family: var(--pk-font-body) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Default: pokazuje "wybierz" (span1), ukrywa "Usuń" (span2) */
.select-option-2 { display: none !important; }

/* Po zaznaczeniu: pokazuje "Usuń" (span2), ukrywa "wybierz" (span1) */
input[type="checkbox"]:checked + label.select-option .select-option-1,
input[type="checkbox"]:checked ~ label.select-option .select-option-1,
.affix-options input:checked ~ label.select-option .select-option-1 {
  display: none !important;
}
input[type="checkbox"]:checked + label.select-option .select-option-2,
input[type="checkbox"]:checked ~ label.select-option .select-option-2,
.affix-options input:checked ~ label.select-option .select-option-2 {
  display: inline-block !important;
}


/* ──────────────────────────────────────────────────────────
   §4d. TABS OFERTA / PROMOCJE — otoczka logiczna (segmented control)
   DOM: <ul class="main-nav"> > <li class="btn-main-nav active btn-rooms">OFERTA</li>
        + <li class="btn-main-nav btn-rebates promotion-offer">PROMOCJE</li>
   System bg #F1F1F1 — wymieniam na cream2 otoczkę pill style.
   Specificity: ul.main-nav li.btn-main-nav.active (0,3,2) — żeby
   wygrać z system reguły o tej samej specificity 0,2,1.
   ────────────────────────────────────────────────────────── */
body ul.main-nav,
body .main-nav {
  background: var(--pk-cream2) !important;
  background-color: var(--pk-cream2) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius) !important;
  padding: 4px !important;
  display: inline-flex !important;
  list-style: none !important;
  margin: 16px 0 !important;
  gap: 2px !important;
  width: auto !important;
}

body ul.main-nav li,
body ul.main-nav li.btn-main-nav,
body .main-nav .btn-main-nav,
body ul.main-nav li a,
body ul.main-nav .btn-main-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 24px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: calc(var(--pk-radius) - 2px) !important;
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pk-text-muted) !important;
  list-style: none !important;
  transition: all 0.2s var(--pk-ease) !important;
  margin: 0 !important;
  min-height: 36px !important;
  text-decoration: none !important;
}

body ul.main-nav li:hover,
body ul.main-nav li.btn-main-nav:hover {
  color: var(--pk-burgundy) !important;
  background: rgba(114, 47, 55, 0.06) !important;
}

body ul.main-nav li.active,
body ul.main-nav li.btn-main-nav.active,
body .main-nav .btn-main-nav.active,
body ul.main-nav li.active a,
body ul.main-nav li.btn-main-nav.active a,
body .main-nav .btn-main-nav.active a {
  background: var(--pk-burgundy) !important;
  color: #fff !important;
}


/* ──────────────────────────────────────────────────────────
   §4b. SYSTEM BUTTON COLORS — zielone/granatowe → burgundy
   .btn-green (system green), .btn-grenade (system orange-red)
   ────────────────────────────────────────────────────────── */
.btn-green,
.btn-big.btn-green,
.btn-aside-link,
.btn-aside-map,
.btn-big.btn-aside-link,
.btn-big.btn-aside-map {
  background: var(--pk-burgundy) !important;
  border-color: var(--pk-burgundy) !important;
  color: #fff !important;
}
.btn-green:hover,
.btn-aside-link:hover,
.btn-aside-map:hover {
  background: var(--pk-burgundy-dark) !important;
  border-color: var(--pk-burgundy-dark) !important;
  color: #fff !important;
}

.btn-grenade,
.btn-big.btn-grenade,
.btn-aside-email,
.btn-aside-phone {
  background: var(--pk-burgundy) !important;
  border-color: var(--pk-burgundy) !important;
  color: #fff !important;
}
.btn-grenade:hover,
.btn-aside-email:hover,
.btn-aside-phone:hover {
  background: var(--pk-burgundy-dark) !important;
  border-color: var(--pk-burgundy-dark) !important;
  color: #fff !important;
}

.btn-mobile-loggedin,
.btn-modal-link,
.show-login-form {
  background: transparent !important;
  border: 0 !important;
  color: var(--pk-burgundy) !important;
  text-transform: none !important;
}

/* FILTRY tile — pełna szerokość/wysokość kafelka, tekst wyśrodkowany,
   cała powierzchnia klikalna. Ten <a class="btn-modal-link btn-big">
   leży w .col-lg-3.filterFilter (242x112). Mój wcześniejszy fix v9
   zrobił z niego mały link 240x38 w lewym górnym rogu — user prosił
   żeby działał na całym kafelku z napisem na środku. */
body .col-lg-3.filterFilter,
body .filterFilter {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-height: 110px !important;
}
body a.btn-modal-link,
body a.btn-modal-link.btn-big,
body .btn-modal-link.btn-big,
body .filterFilter a.btn-modal-link,
body .filterFilter a.btn-modal-link.btn-big,
html body a.btn-modal-link.btn-big {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 110px !important;
  padding: 24px 16px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  color: var(--pk-burgundy) !important;
  font-family: var(--pk-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.2s var(--pk-ease) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
body a.btn-modal-link:hover,
body a.btn-modal-link.btn-big:hover {
  background: rgba(114, 47, 55, 0.06) !important;
  color: var(--pk-burgundy-dark) !important;
}


/* ──────────────────────────────────────────────────────────
   §5. FORM INPUTS — clean cream + burgundy focus
   ────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select,
.s-input,
.form-control {
  font-family: var(--pk-font-body) !important;
  font-size: 15px !important;
  color: var(--pk-text) !important;
  background: var(--pk-white) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius) !important;
  padding: 12px 16px !important;
  min-height: 44px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus,
.s-input:focus,
.form-control:focus {
  outline: none !important;
  border-color: var(--pk-burgundy) !important;
  box-shadow: 0 0 0 3px var(--pk-burgundy-mid) !important;
}

label,
.s-label,
.form-label,
.rabate_code_label {
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pk-text-muted) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}


/* ──────────────────────────────────────────────────────────
   §5b. SYSTEM ICONS — zielone Fontello → burgundy
   (jeśli się nie ładują — ukryte przez §10; jeśli się ładują — recolor)
   ────────────────────────────────────────────────────────── */
.icon-calendar,
.icon-lock,
.icon-wallet,
.icon-user,
.icon-menu,
.icon-arrow_smaller_down,
.home-icon,
[class^="icon-"]:not([class*="fa-"]):not([class*="material-"]),
i.icon[class*="icon-"] {
  color: var(--pk-burgundy) !important;
  fill: var(--pk-burgundy) !important;
}

/* Icony w aktywnym kontekście (np. data picker open) — białe */
.calendar-menu-from.active .icon-calendar,
.calendar-menu-to.active .icon-calendar,
.calendar-menu-row.active [class*="icon"],
.btn .icon-calendar,
.btn-primary [class*="icon-"],
.btn-green [class*="icon-"] {
  color: #fff !important;
  fill: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════
   §6. FLATPICKR / LITEPICKER / jQuery UI calendar — minimal coloring
   System layouts zostają, tylko kolory + typografia.
   ══════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar,
.litepicker,
.ui-datepicker,
#ui-datepicker-div {
  font-family: var(--pk-font-body) !important;
  background: var(--pk-white) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius-lg) !important;
  box-shadow: var(--pk-shadow-lg) !important;
}

.flatpickr-months,
.flatpickr-month,
.litepicker .month-item-header,
.ui-datepicker-header {
  background: var(--pk-cream) !important;
  color: var(--pk-text) !important;
}

.flatpickr-current-month,
.flatpickr-current-month .cur-year,
.litepicker .month-item-name,
.ui-datepicker-title,
.ui-datepicker-month {
  font-family: var(--pk-font-heading) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--pk-text) !important;
}
.litepicker .month-item-year,
.ui-datepicker-year {
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  color: var(--pk-text-muted) !important;
}

.flatpickr-weekday,
.ui-datepicker thead th {
  font-family: var(--pk-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pk-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
}

.flatpickr-day,
.litepicker .day-item,
.ui-datepicker td a,
.ui-datepicker td span {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  color: var(--pk-text) !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
}

.flatpickr-day:hover,
.litepicker .day-item:hover,
.ui-datepicker td a:hover {
  background: var(--pk-burgundy-soft) !important;
  border-color: var(--pk-burgundy-mid) !important;
}

.flatpickr-day.today,
.litepicker .day-item.is-today,
.ui-datepicker-today a {
  border: 1px solid var(--pk-gold) !important;
  color: var(--pk-burgundy) !important;
  font-weight: 600 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date,
.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a {
  background: var(--pk-burgundy) !important;
  border-color: var(--pk-burgundy) !important;
  color: #fff !important;
}

.flatpickr-day.inRange,
.litepicker .day-item.is-in-range {
  background: var(--pk-burgundy-soft) !important;
  border-color: var(--pk-burgundy-soft) !important;
  color: var(--pk-text) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.litepicker .day-item.is-locked,
.litepicker .day-item.is-other-month,
.ui-datepicker-other-month a,
.ui-state-disabled {
  color: var(--pk-text-muted) !important;
  opacity: 0.4 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month,
.litepicker .button-previous-month,
.litepicker .button-next-month,
.ui-datepicker-prev,
.ui-datepicker-next {
  fill: var(--pk-burgundy) !important;
  color: var(--pk-burgundy) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--pk-burgundy-dark) !important; }


/* ──────────────────────────────────────────────────────────
   §6b. COOKIE CONSENT — clean cream + burgundy CTA
   .ck_dsclr_v2 to system cookie bar IdoBooking
   ────────────────────────────────────────────────────────── */
.ck_dsclr_v2,
.ck_dsclr_v2_boxshadow,
.cookie-banner {
  background: var(--pk-cream) !important;
  background-color: var(--pk-cream) !important;
  color: var(--pk-text-soft) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: var(--pk-shadow) !important;
  padding: 14px 20px !important;
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
}

.ck_dsclr_v2 p,
.ck_dsclr__sub_v2,
.cookie-banner p {
  color: var(--pk-text-soft) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.ck_dsclr_v2 a,
.ck_dsclr__sub_v2 a,
html body .ck_dsclr_v2 a,
html body .ck_dsclr__sub_v2 a {
  color: var(--pk-burgundy) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
}
.ck_dsclr_v2 a:hover { color: var(--pk-burgundy-dark) !important; }

/* Defensywnie — system może renderować w cookie h-tagi z dużym fontem.
   "POLITYKĄ DOTYCZĄCĄ COOKIES" było user-feedback za duże. */
html body .ck_dsclr_v2 h1,
html body .ck_dsclr_v2 h2,
html body .ck_dsclr_v2 h3,
html body .ck_dsclr_v2 h4,
html body .ck_dsclr_v2 h5,
html body .ck_dsclr_v2 strong,
html body .ck_dsclr_v2 .h1,
html body .ck_dsclr_v2 .h2,
html body .ck_dsclr_v2 .h3 {
  font-size: 13px !important;
  font-family: var(--pk-font-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: inline !important;
}

.ck_dsclr__btn_v2,
.ck_dsclr__btns_v2 .ck_dsclr__btn_v2,
.cookie-accept-btn {
  background: var(--pk-burgundy) !important;
  border: 1px solid var(--pk-burgundy) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: var(--pk-radius) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: auto !important;
}
.ck_dsclr__btn_v2:hover,
.cookie-accept-btn:hover {
  background: var(--pk-burgundy-dark) !important;
  border-color: var(--pk-burgundy-dark) !important;
}

.ck_dsclr_x_v2,
.cookie-close {
  background: transparent !important;
  color: var(--pk-text-muted) !important;
  font-size: 14px !important;
  padding: 4px 8px !important;
  border: 0 !important;
}
.ck_dsclr_x_v2:hover,
.cookie-close:hover { color: var(--pk-burgundy) !important; }


/* ──────────────────────────────────────────────────────────
   §7. OFFER CARDS — gold price pill, Playfair title
   ────────────────────────────────────────────────────────── */
.offer,
.offer-list .offer,
.offers-list .offer,
.offers_content .offer,
.offers-container .offer,
.offer-right {
  background: var(--pk-white) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius-lg) !important;
  box-shadow: var(--pk-shadow);
  overflow: hidden;
  transition: transform 0.3s var(--pk-ease), box-shadow 0.3s var(--pk-ease);
}
.offer:hover {
  transform: translateY(-3px);
  box-shadow: var(--pk-shadow-lg);
}

.offer h3,
.offer .offer__name,
.offer .offer__title,
.offer h3 a,
.offer .offer-name,
.offer-right h3,
.offer-right .accommodation-name {
  font-family: var(--pk-font-heading) !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 500 !important;
  color: var(--pk-text) !important;
}

.offer__description,
.offer .offer__description,
.accommodation-short-description,
.accommodation-rest {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  color: var(--pk-text-soft) !important;
  line-height: 1.6 !important;
}

/* Meta — m², osoby, łóżka */
.accommodation-meters,
.accommodation-roomspace,
.roomspace,
.offer .offer__meta,
.offer .offer__features,
.offer-right [class*="info"] {
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  color: var(--pk-text-muted) !important;
  letter-spacing: 0.02em;
}


/* ──────────────────────────────────────────────────────────
   §7b. OFFER PRICE — gold pill (KEY FIX)
   Cena 904,75 zł na screenshocie była biały tekst — robimy gold pill
   ────────────────────────────────────────────────────────── */
.object-price,
.offer .object-price,
.offer-right .object-price,
.offer__price,
.offer .offer__price {
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
  background: var(--pk-gold-soft) !important;
  border: 1px solid var(--pk-gold) !important;
  border-radius: var(--pk-radius) !important;
  padding: 8px 16px !important;
  margin: 0 !important;
}

.object-price .price,
.offer .price,
.offer__price .price,
.price {
  font-family: var(--pk-font-heading) !important;
  font-size: clamp(20px, 2.6vw, 28px) !important;
  font-weight: 600 !important;
  color: var(--pk-burgundy) !important;
  line-height: 1 !important;
}

.object-price .currency,
.offer .currency,
.currency {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  color: var(--pk-burgundy) !important;
  font-weight: 500 !important;
}


/* ──────────────────────────────────────────────────────────
   §7c. ASIDE / SIDEBAR
   ────────────────────────────────────────────────────────── */
aside,
.aside,
.aside-container,
.aside-currency,
.side-map {
  background: var(--pk-cream) !important;
  border-radius: var(--pk-radius-lg) !important;
  border: 1px solid var(--pk-cream2) !important;
  padding: 20px !important;
}

.aside-back,
.aside-buttons-container {
  background: transparent !important;
}

.filter_header {
  font-family: var(--pk-font-heading) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--pk-text) !important;
  border-bottom: 1px solid var(--pk-cream2) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.filter_content,
.filter_items {
  font-family: var(--pk-font-body) !important;
  font-size: 14px !important;
  color: var(--pk-text-soft) !important;
}


/* ──────────────────────────────────────────────────────────
   §7d. RABAT / DISCOUNT CODE
   "KOD RABATOWY" + input + "AKTYWUJ KOD"
   ────────────────────────────────────────────────────────── */
.rabat-card,
.rabate-form,
.rabate_code,
.rabate_code.display_table {
  background: var(--pk-cream) !important;
  border: 1px solid var(--pk-cream2) !important;
  border-radius: var(--pk-radius-lg) !important;
  padding: 20px !important;
  font-family: var(--pk-font-body) !important;
}

.rabate_code_label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pk-burgundy) !important;
  font-weight: 600 !important;
}
.rabate_code_label::before {
  content: "%";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--pk-gold-soft);
  color: var(--pk-burgundy);
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
}


/* ──────────────────────────────────────────────────────────
   §7e. TRUST BADGES — Bezpieczeństwo / Wygoda / Niższa cena
   Szare radio buttons → cream box z burgundy radio
   ────────────────────────────────────────────────────────── */
.payment-info,
.trust-info,
.benefits,
.benefit-row,
.info-box {
  background: var(--pk-cream) !important;
  border-radius: var(--pk-radius-lg) !important;
  padding: 20px !important;
  font-family: var(--pk-font-body) !important;
}

.payment-info > div,
.trust-info > div,
.benefits > div,
.benefit-row > div {
  background: transparent !important;
}

.payment-info h4,
.payment-info strong,
.trust-info h4,
.benefits h4,
.benefit-row h4 {
  font-family: var(--pk-font-heading) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--pk-text) !important;
  margin-bottom: 4px !important;
}

.payment-info p,
.trust-info p,
.benefits p {
  font-family: var(--pk-font-body) !important;
  font-size: 13px !important;
  color: var(--pk-text-soft) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Radio buttons systemowe — burgundy */
.checkbox input[type="radio"],
.checkbox input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--pk-burgundy) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
}

.checkbox label {
  font-family: var(--pk-font-body) !important;
  color: var(--pk-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   §8. FOOTER-CONTACT-BANER — trap #6
   ────────────────────────────────────────────────────────── */
.footer-contact-baner,
footer .footer-contact-baner {
  background: var(--pk-burgundy) !important;
  color: #fff !important;
  font-family: var(--pk-font-body) !important;
}

.footer-contact-baner::before,
.footer-contact-baner::after,
footer .footer-contact-baner::before,
footer .footer-contact-baner::after {
  background: var(--pk-burgundy) !important;
  width: 100vw !important;
  content: '' !important;
}

.footer-contact-baner a,
.footer-contact-baner .footer-contact__phone,
.footer-contact-baner .footer-contact__email {
  color: #F2EDE4 !important;
  font-size: 15px !important;
}
.footer-contact-baner a:hover { color: #fff !important; }


/* ──────────────────────────────────────────────────────────
   §8b. FOOTER ENGINE — linki + powered_by + payment icons
   "Booking" pomarańczowy footer-text → ukryć / gold
   ────────────────────────────────────────────────────────── */
.footer_wrapper,
.footer-info,
.display_table.footer-info,
footer .footer_wrapper {
  background: var(--pk-cream) !important;
  color: var(--pk-text-soft) !important;
  font-family: var(--pk-font-body) !important;
  padding: 20px !important;
}

/* footer_links — horizontal layout (system DOM rendered to display:block
   z linkami zajmującymi width 100% = 244px height vertical stack →
   "rozjechana stopka". Force flex row z linkami inline-block auto-width). */
html body .footer_wrapper .footer_links,
html body .footer_wrapper > .footer_links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 24px !important;
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 0 !important;
}
html body .footer_wrapper .footer_links a,
html body .footer_wrapper .footer_links > a,
.footer-info a,
.footer_wrapper > a {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  color: var(--pk-burgundy) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--pk-font-body) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
html body .footer_wrapper .footer_links a:hover,
.footer-info a:hover,
.footer_wrapper > a:hover {
  color: var(--pk-burgundy-dark) !important;
  text-decoration: underline !important;
}

/* footer_wrapper sam — flex row z gap zamiast spread vertical */
html body .footer_wrapper {
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px 24px !important;
  padding: 16px 24px !important;
  min-height: 0 !important;
  height: auto !important;
}
html body .footer_wrapper .payment-icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* "Booking" branding text + IAI logo w footer — ukryć (lub gold) */
.powered_by,
.powered_by_logo,
.iai-logo,
footer .iai-logo,
.footer-info .iai-logo {
  opacity: 0.35 !important;
  font-size: 11px !important;
  color: var(--pk-text-muted) !important;
}

/* Payment icons — keep visible, remove orange tint */
.payment-icons,
.payment_icon,
footer .payment_icon {
  opacity: 0.85;
  filter: grayscale(0.4);
}


/* ──────────────────────────────────────────────────────────
   §9. MODAL OVERLAYS / DIALOGS
   ────────────────────────────────────────────────────────── */
.modal,
.modal-content,
.modal-dialog,
.white-box,
.signin-dialog,
.social-dialog,
.password-recover-diaolog {
  background: var(--pk-white) !important;
  border-radius: var(--pk-radius-lg) !important;
  border: 1px solid var(--pk-cream2) !important;
  font-family: var(--pk-font-body) !important;
  color: var(--pk-text) !important;
}

.modal-header {
  background: var(--pk-cream) !important;
  border-bottom: 1px solid var(--pk-cream2) !important;
  font-family: var(--pk-font-heading) !important;
}

.modal_close,
.modal-close,
.pk-booking-modal__close {
  background: transparent !important;
  color: var(--pk-text-muted) !important;
  border: 0 !important;
  font-size: 22px !important;
  cursor: pointer;
}
.modal_close:hover,
.modal-close:hover,
.pk-booking-modal__close:hover { color: var(--pk-burgundy) !important; }


/* ──────────────────────────────────────────────────────────
   §10. MOBILE @ ≤680px
   ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  body { font-size: 15px !important; }

  h1, .big-label { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  header .nav-link {
    font-size: 13px !important;
    padding: 12px 10px !important;
  }

  .btn,
  .btn-primary,
  .btn-big,
  #filters_submit,
  .iai-booking-search,
  .accommodation-buttons .btn {
    width: 100% !important;
    padding: 14px 20px !important;
  }

  .calendar-menu,
  .calendar-menu-from,
  .calendar-menu-to,
  .calendar-menu-row,
  .calendar-menu-persons,
  .filterFilter {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  .date_d,
  .number_of_persons {
    font-size: 32px !important;
  }

  .flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .offer { margin-bottom: 16px; }

  .object-price { padding: 6px 12px !important; }
  .object-price .price { font-size: 20px !important; }

  .footer-contact-baner {
    text-align: center;
    padding: 20px 16px !important;
  }
}


/* ──────────────────────────────────────────────────────────
   §11. DEFENSIVE — Fontello hide (trap #28), scrollbar, selection
   ────────────────────────────────────────────────────────── */
/* Ikony Fontello które nie ładują się — placeholder glyphs */
i.icon[class*="icon-"]:empty,
.icon[class*="icon-"]:empty {
  font-style: normal;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pk-cream); }
::-webkit-scrollbar-thumb {
  background: var(--pk-burgundy-mid);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--pk-burgundy); }

::selection {
  background: var(--pk-burgundy);
  color: #fff;
}

/* Text selection: links + accents — never showing as orange/green */
*::selection { background: var(--pk-burgundy) !important; color: #fff !important; }