@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   §ROOT — Design tokens
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── PALETA: "Niebieski + pomarańcz" — re-skin 2026-06-08 (na życzenie klienta Leszka).
        Kolory z logo BHPSTAR Group: niebieski #111AB1 + pomarańcz #EE8219.
        Historia: navy(v1.0)→zieleń→teal→jasna zieleń→Bór i miedź→NIEBIESKI+POMARAŃCZ. ── */
  --kr-primary:         #1A2BA0;            /* brandowy niebieski (z logo; biały tekst ~9:1) */
  --kr-primary-light:   #3243C4;
  --kr-primary-dark:    #121C70;
  --kr-primary-soft:    rgba(26, 43, 160, 0.08);

  --kr-secondary:       #EE8219;            /* brandowy pomarańcz (z logo; obwódki/akcenty; tekst CIEMNY) */
  --kr-secondary-light: #F59B45;
  --kr-secondary-dark:  #C9670C;
  --kr-secondary-soft:  rgba(238, 130, 25, 0.14);

  --kr-white:           #FFFFFF;
  --kr-bg:              #F4F6FB;            /* czysta chłodna biel (klient: tło jasne) */
  --kr-bg-soft:         #E9EDF7;
  --kr-bg-card:         #FFFFFF;

  --kr-text:            #16213A;            /* granatowo-czarny */
  --kr-text-soft:       #2C3A52;
  --kr-text-muted:      #5A6478;

  --kr-border:          rgba(26, 43, 160, 0.14);

  --kr-shadow-sm:       0 2px 8px rgba(18, 28, 72, 0.08);
  --kr-shadow-md:       0 8px 24px rgba(18, 28, 72, 0.12);
  --kr-shadow-lg:       0 16px 48px rgba(18, 28, 72, 0.16);
  --kr-shadow-orange:   0 8px 24px rgba(238, 130, 25, 0.26);  /* akcent pomarańcz */

  --kr-radius-sm:       6px;
  --kr-radius-md:       12px;
  --kr-radius-lg:       16px;

  --kr-space-md:        16px;
  --kr-space-lg:        24px;
  --kr-space-xl:        48px;
  --kr-space-2xl:       80px;
  --kr-space-3xl:       120px;

  --kr-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --kr-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  --kr-font-heading:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* AUDYT 2026-06-19: nagłówki jak logo (geometryczny bezszeryf, wybór klienta) */
  --kr-font-body:       'Inter', system-ui, -apple-system, sans-serif;

  /* ── ALIASY --ido-* → --kr-* : aktywują uniwersalne reguły §A–§H (offer/txt/contact/footer),
        które wcześniej miały UNDEFINED vars i brązowe fallbacki #8B6F47 ── */
  --ido-primary:        var(--kr-primary);
  --ido-secondary:      var(--kr-secondary);
  --ido-accent:         var(--kr-secondary-light);
  --ido-dark:           var(--kr-primary-dark);
  --ido-bg:             var(--kr-bg);
  --ido-light:          var(--kr-bg-soft);
  --ido-font-heading:   var(--kr-font-heading);
  --ido-font-body:      var(--kr-font-body);
  --ido-radius:         var(--kr-radius-md);

  /* AUDYT 2026-06-08: --kr-cream była UŻYWANA (ceny/cennik na /offer/N: var(--kr-cream,#F2EDE4))
     ale NIGDY zdefiniowana → fallback KREMOWY (relikt szablonu luxury) wyłamywał się z palety.
     Mapujemy na chłodny jasny z palety. */
  --kr-cream:           var(--kr-bg-soft);   /* #E9EDF7 */
}


/* ══════════════════════════════════════════════════════════════════════════
   §BASE — Typography + reset
   ══════════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--kr-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kr-text-soft);
  background: var(--kr-bg);
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4, body h5, body h6,
h1.big-label, .accommodation-rest h2, .contact__label {
  font-family: var(--kr-font-heading) !important;
  color: var(--kr-text);
  margin: 0 0 var(--kr-space-md);
}

h1 { font-weight: 700; font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); line-height: 1.3; }

h1.big-label {
  color: var(--kr-text) !important;
  font-weight: 700 !important;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem) !important;
  margin: 0 0 24px !important;
}

h1.big-label small {
  color: var(--kr-text-muted) !important;
  font-size: 0.55em !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §NAV — Navy bg, white text, "grubsza czcionka"
   ══════════════════════════════════════════════════════════════════════════ */
header.default13 {
  background: var(--kr-primary) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: var(--kr-shadow-md);
  height: auto !important;          /* override systemowej dużej wysokości default13 (był 119px górą) */
  min-height: 0 !important;
}

header.default13 .menu-wrapper,
header.default13 .menu-wrapper.clean,
header.default13 .bgd-color-light {
  background: var(--kr-primary) !important;
  height: auto !important;
  min-height: 0 !important;
}

header.default13 .navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 24px !important;
  gap: var(--kr-space-md) !important;
  height: auto !important;          /* logo card nie rozpycha się do 95px — header ~72px górą = jak scrolled */
  min-height: 0 !important;
}

header.default13 .navbar-brand {
  display: inline-flex !important;     /* #logo (2026-06-03): hug do logo, koniec białego pola nad/pod */
  align-items: center !important;
  align-self: center !important;       /* nie rozciągaj karty na wysokość navbara */
  background: var(--kr-white) !important;
  padding: 4px 8px !important;         /* #logo v3.0c: CIASNO do logo (było 6px 12px → biały prostokąt szerszy/wyższy niż logo) */
  border-radius: var(--kr-radius-sm) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;             /* #logo v3.0c: usuń systemowe min-width:130 → karta = szerokość logo, nie szersza */
  width: auto !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

header.default13 .navbar-brand img {
  display: block !important;
  /* #logo v3.0c: NIE wymuszaj height:38px — wideLogo 546x72 capowane do max-width sprawiało, że
     obraz miał box 38px ale logo wypełniało ~28px → pionowy letterbox = biała karta wyższa niż logo.
     height:auto + max-width = naturalna proporcja, karta hug do logo (pion i poziom). */
  height: auto !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;   /* override §200m `body.page-offer img {cover}` — logo=wideLogo 546x72, cover przycinał */
}

@media (max-width: 767px) {
  header.default13 .navbar-brand { padding: 4px 8px !important; }
  header.default13 .navbar-brand img { height: auto !important; max-width: 180px !important; }
}

header.default13 #navbar ul.navbar-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

header.default13 #navbar ul.navbar-nav .nav-link,
header.default13 #navbar ul.navbar-nav a {
  color: var(--kr-white) !important;
  font-family: var(--kr-font-body) !important;
  font-weight: 700 !important;          /* klient: "grubsza czcionka" menu */
  font-size: 13.5px !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
  transition: color 0.2s var(--kr-ease) !important;
}

header.default13 #navbar ul.navbar-nav .nav-link:hover,
header.default13 #navbar ul.navbar-nav a:hover {
  color: var(--kr-secondary-light) !important;
}

header.default13 .navbar-reservation,
body.page-index header.default13:not(.ap-header--scrolled) .navbar-reservation {
  background: var(--kr-secondary) !important;
  border: 2px solid var(--kr-secondary) !important;
  color: var(--kr-text) !important;     /* ciemny tekst na limonce #EE8219 (biały = 2.4:1 za słaby; ciemny = 7:1) */
  font-family: var(--kr-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 9px 15px !important;
  border-radius: var(--kr-radius-sm) !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

header.default13 .navbar-reservation:hover {
  background: var(--kr-secondary-dark) !important;
  border-color: var(--kr-secondary-dark) !important;
  box-shadow: var(--kr-shadow-orange);
}

header.default13 .navbar-toggler {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--kr-white) !important;
}

header.default13 .navbar-toggler i,
header.default13 .navbar-toggler span { color: var(--kr-white) !important; }

.page-top__language .language__toggler {
  color: var(--kr-white) !important;
  font-weight: 500 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §FULL-WIDTH-CMS — System wkleja CMS treść do .section_sub.container
   z Bootstrap max-width 1170px. Rozciągamy do 100% na WSZYSTKICH stronach
   (home + /txt/N + /contact + /offer/N + /offers). VB wzorzec rozszerzony.
   Treść sekcji ma własny max-width (kr-container) w pełnoekranowym tle.
   ══════════════════════════════════════════════════════════════════════════ */
html body.page-index main .container,
html body.page-index #pageContent .container,
html body.page-index main > .container,
html body.page-index .section_sub.container,
html body.page-index .section_sub,
html body.page-txt main .container,
html body.page-txt #pageContent .container,
html body.page-txt .section_sub.container,
html body.page-txt .section_sub,
html body.contact-page main .container,
html body.contact-page #pageContent .container,
html body.contact-page .section_sub.container,
html body.contact-page .section_sub {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.page-index main .container > .row,
html body.page-index #pageContent .container > .row,
html body.page-txt main .container > .row,
html body.page-txt #pageContent .container > .row,
html body.contact-page main .container > .row {
  margin: 0 !important;
}

html body.page-index main .container > .row > [class^="col"],
html body.page-txt main .container > .row > [class^="col"],
html body.contact-page main .container > .row > [class^="col"] {
  padding: 0 !important;
}

html body.page-index main,
html body.page-txt main,
html body.page-contact main { padding: 0 !important; }   /* AUDYT: contact-page→page-contact (realna klasa) */


/* ══════════════════════════════════════════════════════════════════════════
   §TOP-SPACING — Subpages padding-top żeby treść nie stykała się z navem
   ══════════════════════════════════════════════════════════════════════════ */
html body.page-txt #pageContent,
html body.page-contact #pageContent,
html body.page-offer #pageContent,
html body.page-offers #pageContent {
  padding-top: 80px !important;   /* header position:fixed → treść omija nagłówek. AUDYT 2026-06-08: klasa contact-page→page-contact (REALNA klasa /contact; bez tego tytuł "Dane kontaktowe" chował się pod headerem) */
}
/* AUDYT 2026-06-08 — padding-bottom ROZDZIELONY: /txt kończy się NIEBIESKĄ sekcją CTA, więc 64px jasnego
   #pageContent tworzyło JASNĄ PRZERWĘ między CTA a stopką (klient: "stopki przerwy"). page-txt=0 (CTA styka się
   ze stopką jak na home); offers/offer/contact (jasna treść) = oddech przed stopką, bez widocznej przerwy. */
html body.page-contact #pageContent,
html body.page-offer #pageContent,
html body.page-offers #pageContent { padding-bottom: 64px !important; }
html body.page-txt #pageContent { padding-bottom: 0 !important; }

@media (max-width: 767px) {
  html body.page-txt #pageContent,
  html body.page-contact #pageContent,
  html body.page-offer #pageContent,
  html body.page-offers #pageContent {
    padding-top: 72px !important;
  }
}

/* Systemowy tytuł CMS (h1.big-label) DUBLUJE nasz stylowany H1 z body_top na /txt
   (O nas / Dla Właścicieli / Regulamin / Atrakcje — każda ma własny H1) → ukryj systemowy. */
html body.page-txt h1.big-label { display: none !important; }

/* Schowaj systemowe h1/h2 w parallax (IdoBooking dorzuca puste, mamy własne) */
html body.page-index .section.parallax h1:not([class*="kr-"]):not(.kr-hero__title),
html body.page-index .section.parallax h2:not([class*="kr-"]),
html body.page-index .section.parallax > h1,
html body.page-index .section.parallax > h2,
html body.page-index .section.parallax .fp-tableCell > h1:not([class*="kr-"]),
html body.page-index .section.parallax .fp-tableCell > h2:not([class*="kr-"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Schowaj puste systemowe hotspots */
html body .cmshotspot,
html body .row.cmshotspot,
html body .section_sub.cmshotspot {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Schowaj systemowy iai-search (zostaje stary w .index-info — przejęty przez naszą wyszukiwarkę w hero) */
html body.page-index .index-info,
html body.page-index .iai-search:not(.kr-search) {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §FOOTER-FULL — Pełnoekranowy footer NAVY bg, treść 1400px wycentrowana
   ══════════════════════════════════════════════════════════════════════════ */
footer,
html body footer {
  width: 100% !important;
  background: var(--kr-primary) !important;
  background-color: var(--kr-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--kr-white) !important;
}

html body footer .footer.container,
html body footer > .footer,
html body footer .footer.container .footer.container {
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 48px !important;
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 767px) {
  html body footer .footer.container,
  html body footer > .footer {
    padding: 24px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §HERO-WRAP — Teleport target: .section.parallax .fp-tableCell
   AP pattern: systemowy parallax img zostaje jako background,
   nasz hero-wrap pełnoekranowy overlay z text + search.
   ══════════════════════════════════════════════════════════════════════════ */
body.page-index .section.parallax .kr-hero-wrap,
.section.parallax .kr-hero-wrap,
.section.parallax .fp-tableCell .kr-hero-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 100px 20px 32px !important;
  z-index: 11 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.kr-hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 34, 18, 0.32) 0%, rgba(18, 34, 18, 0.58) 70%, rgba(18, 34, 18, 0.80) 100%);
  z-index: 1;
  pointer-events: none;
}

.kr-hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 16px;
  color: var(--kr-white);
  pointer-events: none;
}

.kr-hero__content a,
.kr-hero__content button { pointer-events: auto; }

.kr-hero__kicker {
  font-family: var(--kr-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kr-secondary-light);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin: 0;
}

.kr-hero__title {
  font-family: var(--kr-font-heading) !important;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem) !important;
  font-weight: 700 !important;
  color: var(--kr-white) !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  max-width: 900px;
}

.kr-hero__lead {
  font-size: clamp(1.6rem, 1vw + 1.2rem, 2rem);   /* default13 root=10px → realnie 16-20px */
  color: rgba(255, 255, 255, 0.95);
  max-width: 680px;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* #hero-watermark (2026-06-03): duży, półprzezroczysty napis brandowy na zdjęciu głównym.
   px (NIE rem) — default13 root=10px zaniżał rem. nowrap+ellipsis = nie łamie/nie wychodzi. */
.kr-hero__watermark {
  font-family: var(--kr-font-heading);
  font-weight: 700;
  /* AUDYT 2026-06-19 (pismo): jeszcze WIĘKSZY. letter-spacing ~0 daje miejsce na 66px bez
     ucięcia ".COM" (przy 0.04em limit był 60px). Teraz to H1 → color !important bije globalne
     h1{color:var(--ido-dark)!important}.
     2026-06-22 (uwagi Leszka): MNIEJ przezroczysty / bardziej BIAŁY — ma zasłaniać zdjęcie tła
     i być głównym napisem. Opacity 0.26 -> 0.62 (regulować w zakresie ~0.50-0.85). */
  font-size: clamp(20px, 5vw, 66px) !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  margin: 8px 0 0;
  line-height: 1.08;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .kr-hero__watermark { letter-spacing: 0; font-size: clamp(16px, 6.2vw, 30px) !important; }
}

.kr-hero__search-bar {
  position: relative;
  z-index: 30;
  width: 100%;
  margin-top: auto;
  margin-bottom: 8px;
  padding: 0 20px;
  pointer-events: auto;
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════════════
   §SEARCH-BAR — wyszukiwarka form (action=/offers, GET)
   ══════════════════════════════════════════════════════════════════════════ */
.kr-search {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--kr-white);
  border: 3px solid var(--kr-secondary);
  border-radius: var(--kr-radius-md);
  padding: 14px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr auto;
  gap: 8px;
  align-items: stretch;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
  .kr-search { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .kr-search__field--location { grid-column: 1 / -1; }
  .kr-search__submit { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .kr-search { grid-template-columns: 1fr; }
  .kr-search__field--location,
  .kr-search__submit { grid-column: 1; }
}

.kr-search__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-right: 1px solid var(--kr-border);
  min-width: 0;
}

.kr-search__field:last-of-type { border-right: none; }

@media (max-width: 991px) {
  .kr-search__field { border-right: none; padding: 4px 8px; }
}

.kr-search__label {
  font-family: var(--kr-font-heading);
  font-size: 10px;
  font-weight: 700;
  color: var(--kr-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.kr-search__input,
.kr-search__select {
  font-family: var(--kr-font-body);
  font-size: 15px;
  font-weight: 700;                     /* klient: "grubsza czcionka czarna" w wyszukiwarce */
  color: var(--kr-text);
  background: transparent;
  border: none;
  padding: 4px 0;
  height: 32px;
  outline: none;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.kr-search__input:focus,
.kr-search__select:focus { color: var(--kr-secondary-dark); }

.kr-search__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(36%) sepia(34%) saturate(2032%) hue-rotate(354deg) brightness(101%) contrast(106%);
}

.kr-search__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23EE8219' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 18px;
}

.kr-search__submit {
  font-family: var(--kr-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-text);     /* ciemny tekst na limonce (kontrast) */
  background: var(--kr-secondary);
  border: none;
  border-radius: var(--kr-radius-sm);
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.2s var(--kr-ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
}

.kr-search__submit:hover {
  background: var(--kr-secondary-dark);
  box-shadow: var(--kr-shadow-orange);
}

.kr-search__submit svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}


/* ══════════════════════════════════════════════════════════════════════════
   §LITEPICKER — Calendar popup styling (kopia VB pattern, prefix kr-)
   Litepicker ładowany z CDN przez KONIEC_BODY.html
   ══════════════════════════════════════════════════════════════════════════ */
html body .litepicker {
  font-family: var(--kr-font-body) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: var(--kr-radius-lg) !important;
  box-shadow: var(--kr-shadow-lg) !important;
  background: var(--kr-white) !important;
  padding: 18px !important;
  z-index: 9999 !important;
}

html body .litepicker .container__months,
html body .litepicker .month-item-header {
  background: var(--kr-white) !important;
}

html body .litepicker .container__months .month-item-name,
html body .litepicker .cur-month {
  font-family: var(--kr-font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--kr-text) !important;
  letter-spacing: 0.3px !important;
}

html body .litepicker .container__months .month-item-year {
  font-family: var(--kr-font-body) !important;
  font-size: 14px !important;
  color: var(--kr-text-muted) !important;
  margin-left: 6px !important;
  font-weight: 500 !important;
}

html body .litepicker .button-previous-month,
html body .litepicker .button-next-month {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--kr-bg-soft) !important;
  border: 1px solid var(--kr-border) !important;
  color: var(--kr-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

html body .litepicker .button-previous-month:hover,
html body .litepicker .button-next-month:hover {
  background: var(--kr-secondary-soft) !important;
  border-color: var(--kr-secondary) !important;
  color: var(--kr-secondary) !important;
}

html body .litepicker .container__days .day-item {
  font-family: var(--kr-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--kr-text) !important;
  border-radius: var(--kr-radius-sm) !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 2px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Dni niedostępne (weekendy systemowe / poza zakresem) — wyraźnie wyszarzone */
html body .litepicker .container__days .day-item.is-not-available {
  color: var(--kr-text-muted) !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

html body .litepicker .container__days .day-item:hover:not(.is-locked) {
  background: var(--kr-secondary-soft) !important;
  color: var(--kr-secondary-dark) !important;
}

html body .litepicker .container__days .day-item.is-today {
  color: var(--kr-secondary) !important;
  font-weight: 700 !important;
}

html body .litepicker .container__days .day-item.is-locked,
html body .litepicker .container__days .day-item.is-locked:hover {
  color: var(--kr-text-muted) !important;
  opacity: 0.4 !important;
  background: transparent !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

html body .litepicker .container__days .day-item.is-start-date,
html body .litepicker .container__days .day-item.is-end-date,
html body .litepicker .container__days .day-item.is-start-date:hover,
html body .litepicker .container__days .day-item.is-end-date:hover {
  background: var(--kr-secondary) !important;
  color: var(--kr-white) !important;
  font-weight: 600 !important;
}

html body .litepicker .container__days .day-item.is-in-range {
  background: var(--kr-secondary-soft) !important;
  color: var(--kr-text) !important;
  border-radius: 0 !important;
}

html body .litepicker .container__days .day-item.is-start-date {
  border-top-left-radius: var(--kr-radius-sm) !important;
  border-bottom-left-radius: var(--kr-radius-sm) !important;
}

html body .litepicker .container__days .day-item.is-end-date {
  border-top-right-radius: var(--kr-radius-sm) !important;
  border-bottom-right-radius: var(--kr-radius-sm) !important;
}

html body .litepicker .container__tooltip {
  background: var(--kr-primary) !important;
  color: var(--kr-white) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--kr-radius-sm) !important;
  padding: 4px 10px !important;
}

html body .litepicker .container__footer {
  padding-top: 12px !important;
  border-top: 1px solid var(--kr-border) !important;
  margin-top: 12px !important;
}

html body .litepicker .container__footer button {
  font-family: var(--kr-font-heading) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: var(--kr-radius-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

html body .litepicker .container__footer .button-cancel,
html body .litepicker .container__footer .reset-button {
  background: transparent !important;
  border: 1px solid var(--kr-border) !important;
  color: var(--kr-text-muted) !important;
  margin-right: 8px !important;
}

html body .litepicker .container__footer .button-apply {
  background: var(--kr-secondary) !important;
  border: 1px solid var(--kr-secondary) !important;
  color: var(--kr-white) !important;
}

/* Date input cursor pointer (readonly inputs) */
.kr-date-input { cursor: pointer !important; }


/* ══════════════════════════════════════════════════════════════════════════
   §SECTION-PARALLAX-HOME — Hero height + zachować systemowy img bg
   ══════════════════════════════════════════════════════════════════════════ */
body.page-index .section.parallax {
  position: relative;
  height: 100vh !important;
  min-height: 600px !important;
  overflow: hidden;
}
/* Zdjęcie hero pochodzi z PANELU (galeria frontpage) — NIE wymuszamy własnego tła CSS-em,
   żeby klient mógł podmienić zdjęcie w panelu IdoBooking. */

body.page-index .section.parallax .fp-tableCell {
  position: relative;
  height: 100vh !important;
  min-height: 600px !important;
}

/* Ken Burns — wolne zbliżanie hero od PEŁNEJ kompozycji (scale 1 → 1.12 w 28s).
   NIE startuje od 110% (TRAP-09 było: zawsze powiększone) — zaczyna od scale(1),
   więc na starcie widać całe zdjęcie, potem powoli się przybliża. */
@keyframes krKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
body.page-index #parallax_topslider .slick-track img,
body.page-index #parallax_topslider .slick-track img.animate,
body.page-index .section.parallax .slick-track img,
body.page-index .section.parallax .slick-track img.animate {
  transform: scale(1);
  transform-origin: center center;
  animation: krKenBurns 28s ease-out forwards !important;
  transition: none !important;
}

@media (max-width: 767px) {
  body.page-index .section.parallax,
  body.page-index .section.parallax .fp-tableCell {
    height: 80vh !important;
    min-height: 500px !important;
  }
  .kr-hero-wrap { padding: 90px 16px 24px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §FEATURED-OFFERS — 2 apartamenty kafelki z orange border
   ══════════════════════════════════════════════════════════════════════════ */
.kr-offers-section {
  padding: var(--kr-space-3xl) var(--kr-space-md);
  background: var(--kr-bg);
}

.kr-offers-section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--kr-space-2xl);
}

.kr-offers-section__title {
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 700;
  color: var(--kr-text);
  margin: 0 0 var(--kr-space-md);
}

.kr-offers-section__subtitle {
  font-size: 17px;
  color: var(--kr-text-muted);
  margin: 0;
}

.kr-offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kr-space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .kr-offers-grid { grid-template-columns: 1fr; gap: var(--kr-space-lg); }
}

.kr-offer-card {
  background: var(--kr-white);
  border: 3px solid var(--kr-secondary);
  border-radius: var(--kr-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--kr-text);
  transition: transform 0.35s var(--kr-ease-out), box-shadow 0.35s var(--kr-ease-out);
  box-shadow: var(--kr-shadow-sm);
}

.kr-offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kr-shadow-orange), var(--kr-shadow-lg);
}

.kr-offer-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kr-bg-card);
}

.kr-offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--kr-ease-out);
  display: block;
}

/* BUG-FIX (klient v3.0): nazwa apartamentu jest WTOPIONA w zdjęcie; zoom na hover
   ucinał "Szklarska" przy krawędzi (overflow:hidden). Zero zoomu → napis nigdy nie znika.
   Feedback hover daje uniesienie karty (translateY) + pomarańczowy cień. */
.kr-offer-card:hover .kr-offer-card__media img { transform: none; }

.kr-offer-card__badge {
  position: absolute;
  /* BUG-FIX (klient v3.0): badge DÓŁ-lewo (był GÓRA-lewo), bo nazwa apartamentu jest
     wtopiona w GÓRĘ zdjęcia — badge "X miejsc" zasłaniał napis "Szklarska". */
  top: auto;
  bottom: var(--kr-space-md);
  left: var(--kr-space-md);
  background: var(--kr-primary);        /* niebieski (biały tekst czytelny; pomarańcz = za niski kontrast z białym) */
  color: var(--kr-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--kr-radius-sm);
  z-index: 2;
}

.kr-offer-card__body {
  padding: var(--kr-space-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.kr-offer-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kr-text);
  margin: 0;
}

.kr-offer-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kr-space-md);
  color: var(--kr-text-muted);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.kr-offer-card__description {
  font-size: 15px;
  color: var(--kr-text-soft);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

.kr-offer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--kr-space-md);
  padding-top: var(--kr-space-md);
  border-top: 1px solid var(--kr-border);
  gap: var(--kr-space-md);
}

.kr-offer-card__price-from {
  font-size: 12px;
  color: var(--kr-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

.kr-offer-card__price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kr-primary);
  line-height: 1;
}

.kr-offer-card__cta {
  background: var(--kr-primary);
  color: var(--kr-white) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--kr-radius-sm);
  text-decoration: none !important;
}

.kr-offer-card__cta:hover { background: var(--kr-secondary); }


/* ══════════════════════════════════════════════════════════════════════════
   §KR-LOCATIONS — siatka lokalizacji (miast). Skalowalna do ~50 miast.
   - auto-fill minmax → dowolna liczba kart bez zmian CSS
   - .kr-loc-card--available  : pomarańczowa obwódka + hover (link do ofert)
   - .kr-loc-card--soldout    : wyszarzona + plakietka "Wyprzedane" (nie-link)
   - JS (KONIEC_BODY initLocations) sortuje karty alfabetycznie po data-city (pl)
   Dodanie miasta = skopiuj 1 kartę, ustaw data-city + status (patrz INSTRUKCJA).
   ══════════════════════════════════════════════════════════════════════════ */
.kr-locations {
  padding: var(--kr-space-3xl) var(--kr-space-md);
  background: var(--kr-bg-soft);
}

.kr-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.kr-loc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--kr-bg-card);
  border: 1.5px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  text-decoration: none !important;
  box-shadow: var(--kr-shadow-sm);
  transition: transform 0.25s var(--kr-ease-out), box-shadow 0.25s var(--kr-ease), border-color 0.25s var(--kr-ease);
  min-width: 0;
}

.kr-loc-card__icon { flex: 0 0 auto; width: 22px; height: 22px; }
.kr-loc-card__icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 2; }

.kr-loc-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.kr-loc-card__city {
  font-family: var(--kr-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--kr-text);
  line-height: 1.2;
}

.kr-loc-card__status {
  font-family: var(--kr-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* 2026-06-22 (uwagi Leszka): "DOSTĘPNE" / "WKRÓTCE" wielkimi literami (jak status soldout) */
  text-transform: uppercase;
}

/* ── DOSTĘPNE (są apartamenty) ── */
.kr-loc-card--available { border-color: var(--kr-secondary); }
.kr-loc-card--available .kr-loc-card__icon { color: var(--kr-secondary); }
.kr-loc-card--available:hover {
  transform: translateY(-4px);
  box-shadow: var(--kr-shadow-orange), var(--kr-shadow-md);
  border-color: var(--kr-secondary-dark);
}
.kr-loc-card__status--available { color: var(--kr-secondary-dark); }

/* ── WYPRZEDANE (brak apartamentów dziś) ── */
.kr-loc-card--soldout { opacity: 0.85; cursor: default; }
.kr-loc-card--soldout .kr-loc-card__icon { color: var(--kr-text-muted); }
.kr-loc-card--soldout .kr-loc-card__city { color: var(--kr-text-soft); }
.kr-loc-card__status--soldout {
  display: inline-block;
  align-self: flex-start;
  background: var(--kr-bg-soft);
  color: var(--kr-text-muted);
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}


/* ══════════════════════════════════════════════════════════════════════════
   §WHY-US — 4 punkty z ikonami
   ══════════════════════════════════════════════════════════════════════════ */
.kr-why-section {
  padding: var(--kr-space-3xl) var(--kr-space-md);
  background: var(--kr-bg-soft);
}

.kr-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kr-space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 991px) { .kr-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .kr-why-grid { grid-template-columns: 1fr; } }

.kr-why-card { text-align: center; padding: var(--kr-space-lg); }

.kr-why-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--kr-space-md);
  background: var(--kr-secondary-soft);
  color: var(--kr-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr-why-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kr-text);
  margin: 0 0 8px;
}

.kr-why-card__body {
  font-size: 14px;
  color: var(--kr-text-muted);
  line-height: 1.6;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   §TESTIMONIALS — 3col grid, orange accent border
   ══════════════════════════════════════════════════════════════════════════ */
.kr-testimonials {
  padding: var(--kr-space-3xl) var(--kr-space-md);
  background: var(--kr-bg);
}

.kr-testimonials__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--kr-space-2xl);
}

.kr-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kr-space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 991px) { .kr-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .kr-testimonials__grid { grid-template-columns: 1fr; } }

.kr-testimonial {
  background: var(--kr-bg-card);
  border-top: 3px solid var(--kr-secondary);
  border-radius: var(--kr-radius-md);
  padding: 34px 28px 26px;
  box-shadow: var(--kr-shadow-md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s var(--kr-ease-out), box-shadow 0.25s var(--kr-ease-out);
}
.kr-testimonial:hover { transform: translateY(-4px); box-shadow: var(--kr-shadow-lg); }
.kr-testimonial::before {
  content: '\201C';                 /* duzy cudzyslow dekoracyjny */
  position: absolute;
  top: 2px; right: 22px;
  font-family: var(--kr-font-heading);
  font-size: 76px; line-height: 1;
  color: var(--kr-secondary);
  opacity: 0.20;
  pointer-events: none;
}
.kr-testimonial__rating { color: var(--kr-secondary); font-size: 15px; font-weight: 700; letter-spacing: 1.5px; }
.kr-testimonial__body { font-style: italic; color: var(--kr-text-soft); line-height: 1.7; font-size: 15px; margin: 0; flex: 1; position: relative; z-index: 1; }
.kr-testimonial__author { font-weight: 700; color: var(--kr-text); font-size: 15px; margin: 0; }
.kr-testimonial__source { font-size: 12px; color: var(--kr-text-muted); margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   §CTA-BOTTOM — Navy section
   ══════════════════════════════════════════════════════════════════════════ */
.kr-cta-bottom {
  background: var(--kr-primary);
  color: var(--kr-white);
  padding: var(--kr-space-3xl) var(--kr-space-md);
  text-align: center;
}

.kr-cta-bottom h2 { color: var(--kr-white) !important; margin: 0 0 var(--kr-space-md); }  /* #3 (2026-06-03): globalne h1..h6{color:var(--ido-dark)!important} bije bez !important -> ciemny napis na ciemnym tle (kontrast ~1.2:1). */
.kr-cta-bottom p { color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--kr-space-xl); }

.kr-cta-bottom__btn {
  display: inline-block;
  background: var(--kr-secondary);
  color: var(--kr-text) !important;     /* ciemny tekst na limonce (kontrast) */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: var(--kr-radius-sm);
  text-decoration: none !important;
  font-size: 15px;
  transition: all 0.25s var(--kr-ease);
  border: none;
  cursor: pointer;
  font-family: var(--kr-font-heading);
}

.kr-cta-bottom__btn:hover {
  background: var(--kr-secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--kr-shadow-orange);
}


/* ══════════════════════════════════════════════════════════════════════════
   §FOOTER — Navy bg + Powered by visibility
   ══════════════════════════════════════════════════════════════════════════ */
footer,
footer .footer.container { background: var(--kr-primary) !important; color: var(--kr-white) !important; }
footer * { color: rgba(255, 255, 255, 0.92) !important; }
footer a { color: var(--kr-white) !important; text-decoration: none !important; }
footer a:hover { color: var(--kr-secondary-light) !important; }
footer .footer-contact-terms a { margin-right: var(--kr-space-md); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 2px; }
/* §FOOTER-TERMS-DIVIDER (klient 06.2026): pionowa kreska oddzielenia między "Regulamin" a "Polityka prywatności" (oba <a> w jednym li.footer-contact-terms, potwierdzone live). */
footer .footer-contact-terms a + a { border-left: 1px solid rgba(255, 255, 255, 0.4); padding-left: var(--kr-space-md); }

/* §FOOTER-HIDE-ADRESS (uwagi Leszka 2026-06-22): "wyrzucamy Flandryjska" — ukryj linię adresu firmy
   w STOPCE (Łódź / Flandryjska nie ma się pokazywać). Adres pozostaje w panelu (Dane firmy) dla
   faktur VAT/regulaminu — tu tylko ukrycie w widoku stopki. Klasa systemowa (literówka IdoBooking:
   "adress"). Telefon/e-mail/regulamin zostają.
   WYSOKA specyficzność (html body footer ul.footer__contact > li ...): reguła centrowania
   `footer ul.footer__contact > li{display:flex}` (0,1,3) bije słabsze `footer .footer-contact-adress`
   — weryfikacja live na /txt/201 pokazała display:flex. Ten selektor (0,2,4) wygrywa (verified MCP). */
html body footer ul.footer__contact > li.footer-contact-adress,
html body footer li.footer-contact-adress { display: none !important; }

/* §CONTACT-PHONES (uwagi Leszka 2026-06-22): na /contact rozbijamy jeden wiersz "Telefon: a, b"
   na 3 etykietowane linie (Obsługa / Zameldowanie / Rezerwacje) — markup buduje JS initContactPhones().
   System nie daje etykiet per numer, dlatego JS + ten styl. */
.page-contact .kr-contact-phone {
  display: block;
  margin: 4px 0;
}
.page-contact .kr-contact-phone strong {
  display: inline-block;
  min-width: 132px;
  color: var(--kr-text);
}
.page-contact .kr-contact-phone a.contact__tel { font-weight: 600; }

/* #1 (2026-06-03): IdoBooking zmienil markup stopki na BEM `.footer__wrapper / ul.footer__contact`.
   Nowy `ul.footer__contact` ma display:flex; justify-content:flex-start; margin-right:~363px -> pozycje lecialy w LEWO.
   Stare centrowanie celowalo w `.footer-contact-*` (nieobecne w nowym markupie). Centrujemy nowy markup. */
footer .footer__wrapper,
footer .footer__wrapper > .row { text-align: center !important; }
footer ul.footer__contact {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 26px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  list-style: none !important;
}
footer ul.footer__contact > li {
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
@media (max-width: 575px) {
  footer ul.footer__contact { gap: 8px 16px !important; flex-direction: column !important; }
}

.powered_by, .powered_by a, .powered_by_logo {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.powered_by img, .powered_by_logo,
img.powered_by_logo, img[src*="powered_by_idoBooking"], img[data-src*="powered_by_idoBooking"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-height: 44px !important;
  filter: none !important;   /* NATYWNE kolory IdoBooking (Damian: bazowe z plików). on_white.svg = kolorowe logo. on_dark.svg = 404! (JS swap → on_white) */
}

footer .footer-contact-baner svg,
footer .footer-contact-baner svg path { fill: rgba(255, 255, 255, 0.85) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   §OFFERS-LIST — /offers (lista 2 apartamentów)
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offers { background: var(--kr-bg) !important; }
body.page-offers main#pageContent { padding: 32px 0 64px !important; }
body.page-offers > .container,
body.page-offers main > .container { max-width: 1400px !important; padding-left: 24px !important; padding-right: 24px !important; }

body.page-offers .aside { flex: 0 0 240px !important; max-width: 240px !important; }
body.page-offers .offers_content,
body.page-offers .col-md-9 { flex: 1 !important; max-width: calc(100% - 264px) !important; }

@media (max-width: 991px) {
  body.page-offers .aside,
  body.page-offers .col-md-3 { max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 24px; }
  body.page-offers .offers_content,
  body.page-offers .col-md-9 { max-width: 100% !important; }
}

body.page-offers .offers-container {
  display: flex !important;
  background: var(--kr-white) !important;
  border: 3px solid var(--kr-secondary) !important;
  border-radius: var(--kr-radius-lg) !important;
  overflow: hidden !important;
  margin: 0 0 32px !important;
  box-shadow: var(--kr-shadow-sm);
  transition: transform 0.3s, box-shadow 0.3s;
}

body.page-offers .offers-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--kr-shadow-orange), var(--kr-shadow-md);
}

body.page-offers .offers-container .object-icon {
  flex: 0 0 38% !important;
  max-width: 38% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

body.page-offers .offers-container .object-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  transition: transform 0.5s var(--kr-ease-out);
}

body.page-offers .offers-container:hover .object-icon img { transform: scale(1.05); }

body.page-offers .offers-container .accommodation-rest {
  flex: 1 !important;
  max-width: 62% !important;
  padding: 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}

body.page-offers .offers-container .accommodation-rest h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--kr-text) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-offers .offers-container .accommodation-rest h2 a {
  color: var(--kr-text) !important;
  text-decoration: none !important;
}

body.page-offers .offers-container .accommodation-rest h2 a:hover { color: var(--kr-secondary) !important; }

body.page-offers .accommodation-roomspace {
  font-size: 13px !important;
  color: var(--kr-text-muted) !important;
  font-weight: 500;
}

body.page-offers .accommodation-roomspace i {
  color: var(--kr-secondary) !important;
  margin-right: 4px;
}

body.page-offers .accommodation-short-description {
  font-size: 14px !important;
  color: var(--kr-text-soft) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* #4 (2026-06-03): klient - ukryj chip "Cena juz od" na kafelkach listy /offers.
   (Ceny pozostaja widoczne w widoku oferty /offer/N - cennik + chip detalu.) */
body.page-offers .object-price { display: none !important; }

body.page-offers .accommodation-buttons {
  margin-top: auto;
  padding-top: 12px;
}

body.page-offers .accommodation-buttons .btn,
body.page-offers .accommodation-buttons span.btn {
  background: var(--kr-primary) !important;
  color: var(--kr-white) !important;
  border: 2px solid var(--kr-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  border-radius: var(--kr-radius-sm) !important;
  text-decoration: none !important;
}

body.page-offers .accommodation-buttons a:hover .btn,
body.page-offers .accommodation-buttons .btn:hover {
  background: var(--kr-secondary) !important;
  border-color: var(--kr-secondary) !important;
}

@media (max-width: 767px) {
  body.page-offers .offers-container { flex-direction: column !important; }
  body.page-offers .offers-container .object-icon,
  body.page-offers .offers-container .accommodation-rest { max-width: 100% !important; flex: 0 0 100% !important; }
  body.page-offers .offers-container .object-icon { aspect-ratio: 16 / 10; min-height: 240px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §FILTER-SIDEBAR — Collapsible filter
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offers #menu_filter {
  background: var(--kr-bg-soft) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: var(--kr-radius-md) !important;
  padding: 16px 18px !important;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

body.page-offers #menu_filter h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--kr-text) !important;
  margin: 0 0 12px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--kr-secondary);
}

body.page-offers #menu_filter .filter_items {
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--kr-border);
}

body.page-offers #menu_filter .filter_header strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kr-text) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.page-offers #menu_filter .filter_header i { color: var(--kr-secondary); margin-left: 8px; }

body.page-offers #menu_filter #filter_header_amenities + .filter_content {
  max-height: 200px !important;
  overflow-y: auto !important;
}

body.page-offers #menu_filter .checkbox label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: var(--kr-text-soft) !important;
  font-weight: 500;
  font-size: 13px;
}

body.page-offers #menu_filter .checkbox input[type="checkbox"] {
  accent-color: var(--kr-secondary);
  width: 14px;
  height: 14px;
}

body.page-offers #filter_buttons .btn,
body.page-offers #filters_submit {
  background: var(--kr-secondary) !important;
  color: var(--kr-white) !important;
  border: 2px solid var(--kr-secondary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  border-radius: var(--kr-radius-sm) !important;
  width: 100%;
  cursor: pointer;
}

body.page-offers .offer-right.side-map {
  background: var(--kr-white);
  border-radius: var(--kr-radius-md);
  overflow: hidden;
  margin-top: 16px !important;
  border: 1px solid var(--kr-border);
}

body.page-offers .offer-right.side-map #map_container {
  height: 200px !important;
  width: 100% !important;
}

body.page-offers .payment-info {
  background: var(--kr-white) !important;
  border: 1px solid var(--kr-border) !important;
  border-left: 4px solid var(--kr-secondary) !important;
  border-radius: var(--kr-radius-md) !important;
  padding: 16px 18px !important;
  margin-top: 16px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §OFFER-PAGE — /offer/N price chip
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offer .object-price {
  height: 64px !important;
  border-radius: 12px !important;
  background: var(--kr-primary) !important;
  color: var(--kr-white) !important;
  padding: 0 var(--kr-space-lg) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §CONTACT — Lokalizacje cards
   ══════════════════════════════════════════════════════════════════════════ */
.contact__locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--kr-space-lg);
}

.contact__item {
  background: var(--kr-white);
  border: 2px solid var(--kr-border);
  border-left: 4px solid var(--kr-secondary);
  border-radius: var(--kr-radius-md);
  padding: var(--kr-space-lg);
  display: flex;
  gap: var(--kr-space-md);
}

.contact__item .icon-pointer { color: var(--kr-secondary); font-size: 24px; }
.contact__item strong { color: var(--kr-text); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════════════
   §BLOG — Atrakcje listing + post
   ══════════════════════════════════════════════════════════════════════════ */
.kr-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--kr-space-xl);
  max-width: 1200px;
  margin: var(--kr-space-2xl) auto;
  padding: 0 var(--kr-space-md);
}

.kr-blog-card {
  background: var(--kr-white);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  overflow: hidden;
  text-decoration: none !important;
  color: var(--kr-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.kr-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kr-shadow-md);
  border-color: var(--kr-secondary);
}

.kr-blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.kr-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kr-blog-card__body {
  padding: var(--kr-space-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kr-blog-card__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--kr-text); }
.kr-blog-card__lead { color: var(--kr-text-muted); font-size: 14px; margin: 0; line-height: 1.6; flex: 1; }
.kr-blog-card__cta { color: var(--kr-secondary); font-weight: 700; font-size: 13px; text-transform: uppercase; margin-top: var(--kr-space-md); }

.kr-blog-post { max-width: 760px; margin: var(--kr-space-2xl) auto; padding: 0 var(--kr-space-md); }
.kr-blog-post .kr-blog-post__lead {
  font-size: 1.2rem;
  color: var(--kr-text-soft);
  font-weight: 500;
  border-left: 4px solid var(--kr-secondary);
  padding-left: var(--kr-space-md);
  margin-bottom: var(--kr-space-xl);
}
.kr-blog-post img { width: 100%; height: auto; border-radius: var(--kr-radius-md); margin: var(--kr-space-lg) 0; }


/* ══════════════════════════════════════════════════════════════════════════
   §UTILS
   ══════════════════════════════════════════════════════════════════════════ */
.kr-section { padding: var(--kr-space-3xl) var(--kr-space-md); }
.kr-section--soft { background: var(--kr-bg-soft); }
.kr-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--kr-space-md); }
.kr-text-center { text-align: center; }
.kr-divider-line { height: 1px; background: var(--kr-border); margin: var(--kr-space-xl) 0; }


/* ══════════════════════════════════════════════════════════════════════════
   §200a — Hamburger mobile (Fair Rentals starter)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  html body header.default13 .navbar-toggler {
    min-height: 40px !important;
    max-height: 48px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §200b — Powered by IdoBooking extra constraints (TRAP-03 full)
   ══════════════════════════════════════════════════════════════════════════ */
.powered_by_logo,
.powered_by img,
img[src*="logo_powered_by"],
img[data-src*="logo_powered_by"],
img[src*="powered_by_idoBooking"],
img[data-src*="powered_by_idoBooking"] {
  filter: none !important;
  opacity: 0.85 !important;
  max-height: 30px !important;
  height: auto !important;
  width: auto !important;
  max-width: 240px !important;
  display: inline-block !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §200n — Mobile menu — text-shadow none (halo gdy menu otwarte na white bg)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  html body.page-index header.default13 .navbar-collapse .nav-link,
  html body header.default13 .navbar-toggler[aria-expanded="true"] ~ * .nav-link {
    text-shadow: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §200k — Price chip PROSTOKĄT h64 r12 (z TRAP feedback)
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offer .offer-right .offer-price,
body.page-offer .offer-price-chip,
body.page-offer .price-chip {
  min-height: 64px !important;
  height: auto !important;          /* override systemowego height:150px (default13) → chip był wielki/pusty */
  max-height: 80px !important;
  border-radius: 12px !important;
  background: var(--kr-primary) !important;
  color: var(--kr-white) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;   /* wycentruj "od 400,20 zł" pionowo w chipie (było baseline → u góry) */
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.page-offer .offer-price small {
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.7 !important;
  color: var(--kr-white) !important;
}

body.page-offer .offer-price .price,
body.page-offer .offer-price span.price {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--kr-white) !important;
  white-space: nowrap !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §200o — /offer/N sidebar sections spacing (16/24px gap)
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offer .offer-top .offer-right + .offer-right { margin-top: 16px !important; }
body.page-offer .offer-right-bottom { margin-top: 24px !important; }
body.page-offer .offer-right.mb-5 { margin-bottom: 0 !important; }


/* ══════════════════════════════════════════════════════════════════════════
   §200l + §200h — /offer/N przyciski: spacing + touch target 44px (JARVIS defaults)
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offer .accommodation-reservation {
  margin-top: 14px !important;
  margin-bottom: 16px !important;
}
body.page-offer .accommodation-reservation .btn,
body.page-offer .accommodation-reservation a,
body.page-offer .accommodation-reservation button {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.page-offer a.offerCalendar,
body.page-offer a.to-offer-prices,
body.page-offer .offer-right a.btn-reverse {
  display: block !important;
  text-align: center !important;
  min-height: 44px !important;
  padding: 11px 14px !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
}

body.page-offer .accommodation-reservation {
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  padding: 16px 24px !important;
}

body.page-offer a.offerCalendar,
body.page-offer a.to-offer-prices {
  display: block !important;
  padding: 8px 12px !important;
  min-height: 44px !important;
  margin-top: 18px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §200q — ZOBACZ NA MAPIE margin-top 16px (gap od mapy Leaflet)
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offer a#generateDirections,
body.page-offer a[id*="generateDirections"] {
  margin-top: 16px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §200r — Logo + flagi visible przy menu open (mobile)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  header.default13:has(.navbar-toggler[aria-expanded="true"]) .navbar-brand,
  header.default13:has(.navbar-toggler[aria-expanded="true"]) .logo,
  header.default13:has(.navbar-toggler[aria-expanded="true"]) #language_menu,
  header.default13:has(.navbar-toggler[aria-expanded="true"]) .page-top__language {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §200m — object-fit: cover (iPhone vs Android img cropping consistency)
   ══════════════════════════════════════════════════════════════════════════ */
.slick-slide img,
.offer img,
a[href*="/offer/"] img,
main .pictures img,
body.page-offer img,
body.page-offers .offers-container img {
  object-fit: cover !important;
  object-position: center !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §MOBILE-SEARCH-FIRST — hero search-card order:1 na mobile (TRAP)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .kr-hero-wrap .kr-hero__search-bar { order: 1 !important; margin-top: 0 !important; margin-bottom: 24px !important; }
  .kr-hero-wrap .kr-hero__content { order: 2 !important; flex: 0 0 auto !important; padding-bottom: 20px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §LITEPICKER-POPUP-CENTER — popup datepickera jako fixed-centered modal.
   BUG (naprawiony): poprzednie `.litepicker[style*="left:"]{position:relative}`
   łapało KAŻDY popup (litepicker zawsze ustawia inline left:) → inline top:837px
   stawał się offsetem relatywnym od końca <body> → kalendarz lądował ~y3604,
   poza ekranem ("nie da się kliknąć daty"). Bo input siedzi w position:absolute
   .kr-hero-wrap wewnątrz fullpage .fp-tableCell. Fix: wymuś fixed + środek ekranu.
   ══════════════════════════════════════════════════════════════════════════ */
.litepicker {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 24px 80px rgba(18, 34, 18, 0.45) !important;
}

@media (max-width: 575px) {
  .litepicker {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §KR-OFFERS-NO-FILTER — klient ma 2 apartamenty: filtrowanie /offers zbędne.
   Ukrywamy panel filtrów (.aside) + rozciągamy listę na 100%.
   page-offers ONLY — strona /offer/N zachowuje swój .aside (widget rezerwacji).
   ══════════════════════════════════════════════════════════════════════════ */
body.page-offers .aside,
body.page-offers #menu_filter,
body.page-offers #menu_filter_form {
  display: none !important;
}
body.page-offers .row > .col-md-9,
body.page-offers .row > .col-lg-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Karta /offers — cena chip + SZCZEGÓŁY prawostronnie, spójny przycisk (były "losowo") */
body.page-offers .accommodation-rest .row { margin-left: 0 !important; margin-right: 0 !important; }
body.page-offers .accommodation-rest .object-price { margin-left: auto !important; margin-right: 0 !important; }
body.page-offers .accommodation-buttons { text-align: right !important; margin-top: 18px !important; padding-right: 0 !important; }
body.page-offers .accommodation-buttons a,
body.page-offers .accommodation-buttons .btn {
  min-width: 170px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §KR-ATTRACTIONS — teaser atrakcji Karkonoszy na home (sekcja wizualna)
   ══════════════════════════════════════════════════════════════════════════ */
.kr-attractions { padding: var(--kr-space-3xl) var(--kr-space-md); background: var(--kr-bg-soft); }
.kr-attractions__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kr-space-lg);
}
.kr-attraction-card {
  position: relative; display: block; border-radius: var(--kr-radius-md);
  overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--kr-shadow-md); text-decoration: none;
}
.kr-attraction-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--kr-ease-out);
}
.kr-attraction-card:hover img { transform: scale(1.06); }
.kr-attraction-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(18, 34, 18, 0.80) 100%);
}
.kr-attraction-card__label {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  color: #fff; font-family: var(--kr-font-heading); font-weight: 600; font-size: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.kr-attractions__cta { text-align: center; margin-top: var(--kr-space-2xl); }
.kr-btn-outline {
  display: inline-block; padding: 12px 30px; border: 2px solid var(--kr-primary);
  color: var(--kr-primary); border-radius: var(--kr-radius-sm);
  font-family: var(--kr-font-heading); font-weight: 600; text-decoration: none;
  transition: background 0.2s var(--kr-ease), color 0.2s var(--kr-ease);
}
.kr-btn-outline:hover { background: var(--kr-primary); color: #fff; }
@media (max-width: 991px) { .kr-attractions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) {
  .kr-attractions__grid { grid-template-columns: 1fr; gap: var(--kr-space-md); }
  .kr-attraction-card { aspect-ratio: 16 / 10; }
}
/* affordance "Czytaj wiecej" na kafelkach home (pod labelka) */
.kr-attraction-card { cursor: pointer; }
.kr-attraction-card__more {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.03em; opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--kr-ease), transform 0.25s var(--kr-ease);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.kr-attraction-card .kr-attraction-card__label { transition: transform 0.25s var(--kr-ease); }
.kr-attraction-card:hover .kr-attraction-card__label { transform: translateY(-22px); }
.kr-attraction-card:hover .kr-attraction-card__more { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════════════════════════════════════════
   §KR-ATTR-MODAL — popup atrakcji (#6, 2026-06-03). Zero nowych podstron.
   Zrodlo tresci = ukryte bloki .kr-attr-detail#attr-<id> w body_top (crawlable = SEO).
   JS (KONIEC_BODY) klonuje #attr-<id> do modala. Fallback no-JS = href do /txt/204#anchor.
   ══════════════════════════════════════════════════════════════════════════ */
.kr-attr-detail { display: none; }
.kr-modal-lock { overflow: hidden !important; }

.kr-attr-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.kr-attr-modal.is-open { display: flex; }
.kr-attr-modal__overlay {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(18, 34, 18, 0.72); backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); animation: krFade 0.2s ease;
}
.kr-attr-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 860px;
  max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--kr-bg-card); border-radius: var(--kr-radius-lg);
  box-shadow: var(--kr-shadow-lg); animation: krPop 0.25s var(--kr-ease-out);
}
.kr-attr-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--kr-ease);
}
.kr-attr-modal__close:hover { background: rgba(0, 0, 0, 0.72); }
.kr-attr-modal__content { padding: 0 0 28px; }
.kr-attr-modal__content img {
  width: 100%; height: clamp(220px, 38vh, 360px); object-fit: cover; display: block;
  border-radius: var(--kr-radius-lg) var(--kr-radius-lg) 0 0;
}
.kr-attr-modal__content > *:not(img) { padding-left: 32px; padding-right: 32px; }
.kr-attr-modal__content h2 {
  font-family: var(--kr-font-heading); font-size: clamp(22px, 3vw, 30px);
  margin: 24px 0 14px; line-height: 1.2;
}
.kr-attr-modal__content p { color: var(--kr-text); font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
.kr-attr-facts {
  list-style: none; margin: 0 0 20px; padding: 16px 20px !important;
  background: var(--kr-bg-soft); border-radius: var(--kr-radius-md);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px;
}
.kr-attr-facts li { font-size: 14px; color: var(--kr-text); }
.kr-attr-facts strong { color: var(--kr-primary); font-weight: 700; }
@keyframes krFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes krPop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) {
  .kr-attr-modal { padding: 0; }
  .kr-attr-modal__dialog { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .kr-attr-modal__content img { border-radius: 0; height: 240px; }
  .kr-attr-modal__content > *:not(img) { padding-left: 20px; padding-right: 20px; }
  .kr-attr-facts { grid-template-columns: 1fr; }
  .kr-attr-modal__close { position: fixed; top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-attr-modal__overlay, .kr-attr-modal__dialog { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §KR-HOME-SECTION-BG — systemowy .section.fp-auto-height ma szare tło #F1F1F1
   → krem. Usuwa szary pasek między ostatnią sekcją a stopką (page-index).
   NIE rusza hero (.section.parallax ma własne tło z panelu).
   ══════════════════════════════════════════════════════════════════════════ */
body.page-index .section.fp-auto-height,
body.page-index .section.fp-auto-height.pb-5,
body.page-txt .section.fp-auto-height,
body.contact-page .section.fp-auto-height {
  background: var(--kr-bg) !important;
}
/* Usuń kremowy pasek między ostatnią sekcją (zielone CTA) a stopką — bezszwowo (Damian: spójność) */
body.page-index .section.fp-auto-height.pb-5 {
  padding-bottom: 0 !important;
}
/* #footer-gap (2026-06-03): podstrony /txt konczą się zielonym CTA — systemowy `.page{padding-bottom:64px}`
   tworzyl kremowy pas miedzy CTA a stopka. Zerujemy -> zielone CTA styka sie ze stopka (jak home). */
body.page-txt .page,
body.page-contact .page {
  padding-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §KR-NEWS — moduł Aktualności (blog atrakcji pod /news). Ukryj na głównej,
   stylizuj listing + wpisy w palecie. UWAGA: do zweryfikowania MCP po WŁĄCZENIU
   modułu News w panelu (teraz /news → redirect na home, modul nieaktywny).
   ══════════════════════════════════════════════════════════════════════════ */
/* hide listing na home (rozne mozliwe klasy) */
body.page-index .news-container,
body.page-index .news-list,
body.page-index .news-wrapper,
body.page-index .news-section { display: none !important; }

/* #5 (2026-06-03): realny markup default13 /news = .news-list > .container > .news-wrapper.row > .news-item.col-*.
   Karta: tlo/radius/cien/border-top + przycisk ZAOKRAGLONY (byl border-radius:0 = kwadrat) + kontrast.
   Zdjecie: gdy dodasz foto w panelu, system wstawia <img> do .news-item -> ostylowane (16/9, cover, radius). */
body.page-news .news-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 28px !important;
  max-width: 1040px !important;
  margin: 24px auto 0 !important;
}
/* #news-width+gap (2026-06-03): 1 wpis NIE rozciaga sie na full-width (auto-fit rozpychal) — karty capped+center.
   + przestrzen nad stopka (news bez CTA, systemowy .news-list.page mial padding-bottom:0 -> karta dotykala stopki). */
body.page-news .news-list { padding-bottom: 56px !important; }
body.page-news .news-item,
body.page-news .news-box,
body.page-news article {
  background: var(--kr-bg-card) !important;
  border-radius: var(--kr-radius-md) !important;
  box-shadow: var(--kr-shadow-md) !important;
  border-top: 3px solid var(--kr-secondary) !important;
  overflow: hidden !important;
  padding: 22px !important;
  margin: 0 !important;
  flex: 0 1 460px !important;
  max-width: 480px !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-news .news-item img,
body.page-news .news-box img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  margin: 0 0 16px !important;
}
body.page-news .news-item h2,
body.page-news .news-item h3,
body.page-news .news-title {
  font-family: var(--kr-font-heading) !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
}
body.page-news .news-item h2 a,
body.page-news .news-item h3 a { color: var(--kr-primary) !important; text-decoration: none !important; }
body.page-news .news-date,
body.page-news .news-item time {
  color: var(--kr-secondary-dark) !important;
  font-size: 13px !important; font-weight: 600 !important;
  display: block !important; margin: 0 0 10px !important;
}
body.page-news .news-content,
body.page-news .news-content p { color: var(--kr-text) !important; font-size: 15px !important; line-height: 1.65 !important; margin: 0 0 4px !important; }
/* przyklej blok przycisku do dolu karty (rowne CTA) */
body.page-news .news-item > div:last-child { margin-top: auto !important; }
/* przycisk "czytaj wiecej" — byl KWADRATOWY + teal na ciemnym tle -> zaokraglony, ciemny tekst na limonce */
body.page-news .more-news.btn,
body.page-news .news-item a.btn,
body.page-news a.more {
  display: inline-block !important;
  background: var(--kr-secondary) !important;
  color: var(--kr-text) !important;
  border: none !important;
  border-radius: var(--kr-radius-sm) !important;
  padding: 11px 22px !important;
  margin-top: 16px !important;
  font-family: var(--kr-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s var(--kr-ease) !important;
}
body.page-news .more-news.btn:hover,
body.page-news .news-item a.btn:hover,
body.page-news a.more:hover { background: var(--kr-secondary-dark) !important; }
body.page-news h1.big-label,
body.page-news h1 { font-family: var(--kr-font-heading) !important; }
@media (max-width: 575px) {
  body.page-news .news-wrapper { grid-template-columns: 1fr !important; gap: 20px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §FOOTER-NESTED — Hide zdublowany .footer.container (grid-in-grid TRAP)
   ══════════════════════════════════════════════════════════════════════════ */
html body footer .footer.container .footer.container,
html body footer .footer.container > .footer.container {
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   §FR-CLIENT — klient własne reguły
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ido-system-traps.css
   Layer 1 of 3 — IdoBooking System Bug Fixes (Traps)
   ═══════════════════════════════════════════════════════════════

   PURPOSE:
   All known IdoBooking / IdoSell system bugs that affect EVERY
   client identically. This file is shared — never client-specific.
   Client theme variables (colors, fonts, sizes) are defined in
   Layer 3 (client-theme.css) as --ido-* custom properties.

   LAYER ARCHITECTURE:
     Layer 1 → ido-system-traps.css   (this file — universal fixes)
     Layer 2 → ido-layout.css         (structural, client-customized)
     Layer 3 → client-theme.css       (CSS vars + brand overrides)

   VARIABLE CONTRACT (must be defined in Layer 3 :root):
     --ido-primary      Primary brand color
     --ido-secondary    Secondary / lighter brand color
     --ido-accent       Accent / highlight color
     --ido-bg           Page background color
     --ido-dark         Dark text / dark surfaces color
     --ido-light        Light surface color (near-white)
     --ido-font-heading Heading font stack
     --ido-font-body    Body font stack
     --ido-radius       Base border-radius
     --ido-header-h     Fixed header height (e.g. 80px)

   HARDCODED ELEMENTS NOTE:
   The following selectors are rendered inside sandboxed iframes
   or injected shadow-like contexts where CSS custom properties
   do NOT inherit. Use literal hex values only:
     #bounce, #backTop, .ck_dsclr__btn_v2,
     .ck_dsclr__btn_v2:hover, .skip_link, .formbutton
   The generator replaces #1A2BA0 and
   #EE8219 tokens before deployment.

   TRAP COUNT: 18 root traps + page-specific universal fixes
   SOURCE: TEMPLATE_ARKUSZ_STYLOW.css + trap_tracker.json
   Updated: 2026-04-11
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   TRAP #1 — Body font-size reset
   ROOT CAUSE: IdoSell sets html { font-size: 140% } on the
   default13 template, which makes 1rem = 22.4px. Every unit
   derived from rem is 40% too large. Reset to 16px.
   CLIENTS: all (7/7 surveyed)
   ═══════════════════════════════════════════════════════════════ */
body,
body.default13 {
  font-size: 16px !important;
  font-family: var(--ido-font-body) !important;
  background: var(--ido-bg) !important;
  color: var(--ido-dark) !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #2 — System orange #AD5009 → brand color
   ROOT CAUSE: default13.css hardcodes #AD5009 on .btn,
   .btn-primary, .btn-success, filter headers, links. Override
   with brand primary. Exclude .slick-arrow (navigation arrows).
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.btn:not(.slick-arrow),
.btn-primary:not(.slick-arrow),
.btn-success:not(.slick-arrow),
a.btn:not(.slick-arrow),
button.btn:not(.slick-arrow) {
  background-color: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
}
.btn:not(.slick-arrow):hover,
.btn-primary:not(.slick-arrow):hover,
.btn-success:not(.slick-arrow):hover,
a.btn:not(.slick-arrow):hover,
button.btn:not(.slick-arrow):hover {
  background-color: var(--ido-secondary) !important;
  border-color: var(--ido-secondary) !important;
  color: #fff !important;
}

/* System scheme CSS vars — override green/orange defaults
   (333333.css.gz defines --maincolor1 as green #4ADE80) */
html:root {
  --maincolor1: var(--ido-primary) !important;
  --supportcolor1: var(--ido-secondary) !important;
  --maincolor2: var(--ido-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #3 — H1 "big-label" hidden by system on /offer pages
   ROOT CAUSE: System applies display:none via JS on .big-label
   on accommodation detail pages. Force visible.
   CLIENTS: mazurski, mountainprestige (and others via JS)
   ═══════════════════════════════════════════════════════════════ */
h1.big-label {
  display: block !important;
  visibility: visible !important;
  font-family: var(--ido-font-heading) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #4 — H2 "IdoBooking" injected inside .index-info
   ROOT CAUSE: System renders the literal text "IdoBooking" as
   an H2 inside .index-info and inside .section.parallax.
   Must be hidden — it overlaps hero content.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info h2,
.index-info h1,
.section.parallax > h2 {
  display: none !important;
  visibility: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #5 — Dark overlay on slider via pseudo-elements
   ROOT CAUSE: .parallax-slider::before gets a semi-opaque
   black background from system CSS, darkening the hero image.
   .parallax-image::after does the same on image-only heroes.
   Both must be suppressed so custom overlays render cleanly.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.parallax-slider::before,
.parallax-slider::after,
.parallax-image::before,
.parallax-image::after {
  background: transparent !important;
  display: none !important;
  opacity: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #6 — Header must be position:fixed, NOT sticky
   ROOT CAUSE: position:sticky on .defaultsb / header.default13
   creates a layout gap between header and hero on iOS Safari
   and when sticky triggers at wrong scroll offset. Fixed + explicit
   top:0 is the only reliable cross-browser approach.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.defaultsb,
#defaultsb,
.default13,
.navbar-wrapper,
header.header,
header.default13 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1100 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #7 — Subpage padding-top compensates fixed header
   ROOT CAUSE: Fixed header overlaps page content on subpages.
   Homepage is excluded — fullscreen hero handles offset itself.
   Value comes from --ido-header-h measured on live site.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers,
body.page-offer,
body.page-contact,
body.page-txt,
body:not(.page-index) .content-wrapper,
body:not(.page-index) main {
  padding-top: var(--ido-header-h) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #8 — Stacking context: .index-info z-index too high
   ROOT CAUSE: .index-info receives position:absolute and
   z-index:1000 from system, which traps it above the slider
   and blocks pointer events on hero CTAs. Reset position to
   allow hero overlay to sit above it.
   NOTE: pointer-events:none prevents invisible area blocking clicks.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info {
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.index-info * {
  pointer-events: none !important;
}
.index-info button,
.index-info .navbar-reservation {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #9 — System z-index: -1 on form inputs
   ROOT CAUSE: System stylesheet sets z-index:-1 on inputs and
   selects inside the booking widget, making them unclickable
   when the widget sits inside a positioned container.
   CLIENTS: najmar, ecocamping, madera, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
#iai_book_form input,
#iai_book_form select,
#iai_book_form textarea,
#iai_book_form .widget__option,
input,
select,
textarea {
  z-index: 2 !important;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #10 — System inline positioning on .index-info
   ROOT CAUSE: System JS injects inline style="top:Xpx; left:Xpx"
   on .index-info, misaligning it relative to the hero. These
   overrides must use !important to beat inline styles.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #11 — Litepicker calendar rendered at 944px width
   ROOT CAUSE: Litepicker date range picker gets a hardcoded
   width from the system JS config, causing horizontal scroll
   on mobile and overflow on desktop sidebars. fit-content
   corrects to actual rendered width.
   CLIENTS: najmar, ecocamping, madera, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.litepicker {
  width: fit-content !important;
  max-width: 100vw !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #12 — Ghost booking form on /offer pages
   ROOT CAUSE: System renders a duplicate #iai_book_form with
   class d-none on offer detail pages. Without explicit height:0
   it still occupies vertical space even when display:none,
   pushing content down.
   CLIENTS: all /offer pages
   ═══════════════════════════════════════════════════════════════ */
body.page-offer #iai_book_form.d-none,
body.page-offer .iai-search.d-none {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #13 — .iai-search shown on /offers page (has its own)
   ROOT CAUSE: The /offers page has a built-in filter sidebar.
   The global .iai-search bar also renders, duplicating search UI.
   Also hide on /txt subpages where a search widget makes no sense.
   CLIENTS: najmar, ecocamping, madera, mazurski, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .iai-search,
body.page-offers #iai_book_se,
body.page-txt .iai-search,
body.page-txt #iai_book_se {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #14 — FontAwesome NOT loaded — hide broken FA icons
   ROOT CAUSE: IdoSell does not load FontAwesome by default in
   template 11 / default13. FA icon elements render as invisible
   0x0 boxes OR as raw unicode squares. Hide them system-wide;
   replace with CSS-only chevrons where needed (see §7 /offers).
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .filter_header .fa,
body.page-offers .filter_header .fa-angle-down,
body.page-offers .filter_header [class^="fa-"],
body.page-offers .filter_header [class*=" fa-"] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #15 — Gradient overlay on .section.parallax
   ROOT CAUSE: The system ::after pseudo-element on .section.parallax
   renders a dark solid overlay that obscures hero images.
   IMPORTANT: append custom overlays to .section.parallax itself,
   NOT to .parallax-slider — the slider has z-index:-2 which traps
   any positioned child below it (cannot be fixed without JS).
   .index-info::after must also be suppressed.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.section.parallax::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4)  12%,
    rgba(255, 255, 255, 0)    22%,
    rgba(0, 0, 0, 0)          60%,
    rgba(0, 0, 0, 0.35)      100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.index-info::after,
.index-info::before {
  display: none !important;
  content: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #16 — span.btn on /offers gets line-height: 49px
   ROOT CAUSE: System stylesheet targets span.btn and forces
   line-height:49px + height:49px, which makes the "SZCZEGOLY"
   button on offer listing cards enormously tall. Normalize to
   auto height with flex centering.
   CLIENTS: najmar, ecocamping, madera, mazurski, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
body.page-offers span.btn,
.page-offers .accommodation-buttons span.btn,
.offer span.btn {
  line-height: 1.4 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  font-family: var(--ido-font-body) !important;
  font-size: 13px !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #17 — Tabs sticky: system JS adds --fixed class, not .sticky
   ROOT CAUSE: The offer detail tabs bar gets a class of "--fixed"
   (double-dash prefix, Bootstrap modifier style) added by system JS
   when it sticks. This is NOT the standard .sticky class. Without
   an explicit rule targeting .tabs.--fixed the tab bar jumps out
   of layout — full-width fix and z-index are required.
   CLIENTS: mazurski, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.tabs.--fixed {
  position: fixed !important;
  top: var(--ido-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  z-index: 1000 !important;
  background: var(--ido-light) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Tabs span child font size — system forces 1.3rem */
.tabs__item > span {
  font-size: 13px !important;
  font-family: var(--ido-font-body) !important;
  font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #18 — Footer VISA/MC strip dark default background
   ROOT CAUSE: .footer-contact-baner has a hardcoded dark navy
   background (#3E475E) from system CSS. Logos and icons inside
   render with wrong contrast against custom dark footers.
   Override background to match client dark color and invert logos.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.footer-contact-baner,
.footer__strip,
footer .footer__strip,
.footer-bottom,
.payment-methods {
  background: var(--kr-primary) !important;          /* bezszwowo z zieloną stopką (#1A2BA0) — koniec ciemnego "purpurowego" paska */
  background-color: var(--kr-primary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.footer-contact-baner svg,
.footer-contact-baner img,
.footer__strip img {
  filter: brightness(0) invert(1) !important;        /* VISA/Mastercard na biało, czytelne na zieleni */
  opacity: 0.6 !important;
}
.footer-contact-baner span,
.footer-contact-baner a,
.footer__strip a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
}
.powered_by_logo img {
  filter: none !important;
  opacity: 1 !important;
  max-height: 44px !important;
}
/* Pasek płatności VISA/MC: pełnoszerokościowy bleed to ::before (systemowy navy #3E475E) → zieleń.
   TRAP: stylowanie samego .footer-contact-baner NIE łapie ::before — purpurowe boki zostawały. */
.footer-contact-baner::before {
  background: var(--kr-primary) !important;
  background-color: var(--kr-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL UNIVERSAL FIX — Leaflet map overflow
   ROOT CAUSE: A wildcard selector [class*="map"] from system CSS
   clips map tile images. Protect Leaflet containers explicitly.
   CLIENTS: najmar, madera, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.leaflet-container {
  overflow: hidden !important;
}
.leaflet-container * {
  box-sizing: content-box;
}


/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL UNIVERSAL FIX — container-hotspot (JS rebuilds cards)
   ROOT CAUSE: System renders a .container-hotspot with system-styled
   offer cards that JS replaces. Hide the system version to prevent
   flash of unstyled content.
   CLIENTS: madera, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.container-hotspot {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   §A — TYPOGRAPHY BASE (universal, uses CSS vars)
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ido-font-heading) !important;
  color: var(--ido-dark) !important;
  line-height: 1.2 !important;
}

a {
  color: var(--ido-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ido-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   §B — SEARCH WIDGET (universal fixes)
   Font and persons-dropdown chevron are broken on all clients.
   ═══════════════════════════════════════════════════════════════ */
.iai-search,
#iai_book_form {
  font-family: var(--ido-font-body) !important;
}

/* Search / booking submit button
   NOTE: .formbutton does NOT inherit CSS vars in all contexts.
   Generator must replace #1A2BA0 and #EE8219. */
.formbutton,
#iai_book_form .formbutton {
  background: #1A2BA0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ido-radius) !important;
  font-family: var(--ido-font-body) !important;
  cursor: pointer !important;
}
.formbutton:hover,
#iai_book_form .formbutton:hover {
  background: #EE8219 !important;
}

/* Persons dropdown chevron — system button is 8x8 and invisible */
#iai_book_form .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;
}
#iai_book_form .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(--ido-dark) !important;
  border-bottom: 2px solid var(--ido-dark) !important;
  transform: rotate(45deg) !important;
  margin: 2px auto 0 !important;
}
#iai_book_form .widget__option.iai_input-small {
  padding-right: 44px !important;
}

/* Persons dropdown list overflow */
.persons_list {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   §C — /offers PAGE (universal styling for all clients)
   ═══════════════════════════════════════════════════════════════ */

/* Offers container background — system default is #292929 dark */
body.page-offers,
body.page-offers main,
.offers-container {
  background: var(--ido-bg) !important;
  color: var(--ido-dark) !important;
}

/* Filter section headers — brand color, heading font */
body.page-offers h4,
body.page-offers .sidebar h4,
body.page-offers .filter_header {
  color: var(--ido-primary) !important;
  font-family: var(--ido-font-heading) !important;
}

/* Filter header layout with CSS chevron (FontAwesome not loaded) */
body.page-offers .filter_header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 10px 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: background 0.2s ease !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
body.page-offers .filter_header:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* CSS-only chevron replaces missing FontAwesome icon */
body.page-offers .filter_header::after {
  content: "" !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--ido-primary) !important;
  border-bottom: 2px solid var(--ido-primary) !important;
  transform: rotate(45deg) !important;
  transition: transform 0.3s ease !important;
  margin-left: 12px !important;
  margin-top: -3px !important;
}
body.page-offers .filter_header[aria-expanded="true"]::after {
  transform: rotate(-135deg) !important;
  margin-top: 3px !important;
}

/* Filter collapse — Bootstrap collapse guard */
body.page-offers .filter_content.collapse:not(.show) {
  display: none !important;
}
body.page-offers .filter_content.collapse.show {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* /offers buttons */
body.page-offers .btn,
body.page-offers button.btn,
body.page-offers a.btn {
  background: var(--ido-primary) !important;
  color: #fff !important;
  border: none !important;
}
body.page-offers .btn:hover {
  background: var(--ido-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §D — /offer DETAIL PAGE (universal fixes)
   ═══════════════════════════════════════════════════════════════ */

/* Price circle — system renders oval 244x161, force 150x150 circle */
.offer-price {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ido-primary) !important;
  color: #fff !important;
  padding: 0 !important;
  text-align: center !important;
}
.offer-price small {
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.offer-price span {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ZAREZERWUJ / Reserve button */
.accommodation-leftbutton,
.page-offer .btn-success,
.page-offer a.btn-success,
.page-offer .period-price .btn {
  background: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
  font-family: var(--ido-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: var(--ido-radius) !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.accommodation-leftbutton:hover,
.page-offer .btn-success:hover,
.page-offer a.btn-success:hover {
  background: var(--ido-secondary) !important;
  border-color: var(--ido-secondary) !important;
}

/* contact__btn centering — system default justify-content:normal */
.contact__btn {
  justify-content: center !important;
  font-family: var(--ido-font-body) !important;
}

/* System price h2/p too large on detail page */
.price,
.offer .price,
.page-offer .price {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ido-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §E — /contact PAGE (universal)
   ═══════════════════════════════════════════════════════════════ */
body.page-contact a {
  color: var(--ido-primary) !important;
}
body.page-contact a:hover {
  color: var(--ido-secondary) !important;
}
body.page-contact .btn,
body.page-contact form button,
body.page-contact form input[type="submit"] {
  background: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
}
body.page-contact .btn:hover {
  background: var(--ido-secondary) !important;
}
body.page-contact .leaflet-container {
  border-radius: var(--ido-radius) !important;
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
   §F — /txt SUBPAGES (universal)
   ═══════════════════════════════════════════════════════════════ */
.txt-text {
  font-family: var(--ido-font-body) !important;
  line-height: 1.7 !important;
  color: var(--ido-dark) !important;
}
.txt-text h2,
.txt-text h3 {
  font-family: var(--ido-font-heading) !important;
  color: var(--ido-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §G — FOOTER (universal dark override)
   ═══════════════════════════════════════════════════════════════ */
footer,
.footer,
.footer-wrapper,
.page-footer {
  background: var(--ido-dark) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--ido-font-body) !important;
}
footer h3,
footer h4,
.footer h3,
.footer h4 {
  color: #fff !important;
  font-family: var(--ido-font-heading) !important;
  font-size: 16px !important;
}
footer a,
.footer a {
  color: var(--ido-accent) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--ido-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §H — SYSTEM ELEMENTS WITH HARDCODED HEX (no CSS var inheritance)
   WARNING: Do NOT replace these tokens manually.
   The pipeline generator substitutes them at build time:
     #1A2BA0   → client primary color hex (e.g. #4A6741)
     #EE8219 → client secondary color hex (e.g. #6B8F5E)
   Affected elements: #bounce, #backTop, .ck_dsclr__btn_v2, .skip_link
   These live in system-injected shadow contexts or iframes where
   CSS custom properties from :root do NOT cascade.
   ═══════════════════════════════════════════════════════════════ */

/* Scroll-down arrow (system positions it centered; move to right edge) */
#bounce {
  background-color: #1A2BA0 !important;
  background: #1A2BA0 !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* Back-to-top button */
#backTop {
  background: #1A2BA0 !important;
}
#backTop:hover {
  background: #EE8219 !important;
}

/* Cookie consent banner */
.ck_dsclr__btn_v2 {
  background: #1A2BA0 !important;
}
.ck_dsclr__btn_v2:hover {
  background: #EE8219 !important;
}
.ck_dsclr_v2 a {
  color: #1A2BA0 !important;
}
.ck_dsclr_x_v2 {
  color: #1A2BA0 !important;
}

/* Skip-to-content accessibility link */
.skip_link {
  background: #1A2BA0 !important;
  color: #fff !important;
}

/*
 * ido-components.css
 * IdoBooking Universal Component Library — Layer 2
 * Shared by all clients. Parameterized via CSS custom properties.
 * Layer 1 (ido-base.css) sets the variables. Layer 3 (client.css) overrides.
 *
 * Prefix: ido-
 * Variables consumed: --ido-primary, --ido-secondary, --ido-accent,
 *   --ido-bg, --ido-dark, --ido-light, --ido-font-heading, --ido-font-body,
 *   --ido-radius
 *
 * Table of contents:
 *  1. Layout System
 *  2. Hero Section
 *  3. Split Layout
 *  4. Feature Grid
 *  5. Offer Cards
 *  6. CTA Section
 *  7. Stats Bar
 *  8. FAQ Accordion
 *  9. Gallery Grid
 * 10. Buttons
 * 11. Typography Helpers
 * 12. Animations
 * 13. Accessibility
 * 14. Responsive
 */

/* =========================================================
   1. LAYOUT SYSTEM
   ========================================================= */

.ido-section {
  padding: 80px 24px;
  box-sizing: border-box;
  width: 100%;
}

.ido-section--white {
  background-color: #ffffff;
}

.ido-section--cream {
  background-color: var(--ido-bg, #f8f5f0);
}

.ido-section--dark {
  background-color: var(--ido-dark, #1a1a1a);
  color: #ffffff;
}

.ido-section--accent {
  background-color: var(--ido-accent, #e8d5b0);
}

.ido-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
  width: 100%;
}

.ido-container--narrow {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
  width: 100%;
}

/* =========================================================
   2. HERO SECTION
   ========================================================= */

.ido-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overlay on top of system slider (.section.parallax) */
.ido-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 5;
  pointer-events: none;
}

.ido-hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 20px;
}

.ido-hero__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
  max-width: 900px;
}

.ido-hero__subtitle {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.ido-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: var(--ido-radius, 4px);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin-top: 8px;
}

.ido-hero__cta:hover {
  background-color: var(--ido-secondary, #6b5035);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.ido-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  animation: ido-bounce 2s ease-in-out infinite;
  text-decoration: none;
}

.ido-hero__scroll::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  margin-top: -6px;
}

@keyframes ido-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* =========================================================
   3. SPLIT LAYOUT
   ========================================================= */

.ido-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ido-split--reverse .ido-split__text {
  order: 2;
}

.ido-split--reverse .ido-split__img {
  order: 1;
}

.ido-split__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ido-split__img {
  overflow: hidden;
  border-radius: var(--ido-radius, 4px);
  line-height: 0;
}

.ido-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ido-split__img:hover img {
  transform: scale(1.03);
}

/* =========================================================
   4. FEATURE GRID
   ========================================================= */

.ido-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.ido-feature {
  text-align: center;
  padding: 36px 24px;
  border-radius: var(--ido-radius, 4px);
  background-color: var(--ido-light, #ffffff);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ido-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.ido-feature__icon {
  font-size: 48px;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.ido-feature__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.ido-feature__desc {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.7;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   5. OFFER CARDS
   ========================================================= */

.ido-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.ido-card {
  background-color: #ffffff;
  border-radius: var(--ido-radius, 4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ido-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
}

.ido-card:hover .ido-card__img img {
  transform: scale(1.05);
}

.ido-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}

.ido-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ido-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ido-card__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.ido-card__price {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ido-primary, #8b6f47);
  margin: 0;
}

/* Stretched link — makes entire card clickable */
.ido-card__link {
  position: static;
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ido-primary, #8b6f47);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ido-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* =========================================================
   6. CTA SECTION
   ========================================================= */

.ido-cta {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ido-cta--dark {
  background-color: var(--ido-dark, #1a1a1a);
  color: #ffffff;
}

.ido-cta--dark .ido-cta__heading {
  color: #ffffff;
}

.ido-cta__heading {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: clamp(1.6rem, 2.5vw + 0.75rem, 2.5rem);
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
  max-width: 700px;
}

.ido-cta__contacts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.ido-cta__contacts a {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ido-primary, #8b6f47);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.ido-cta--dark .ido-cta__contacts a {
  color: var(--ido-accent, #e8d5b0);
}

.ido-cta__contacts a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.ido-cta__btn {
  font-size: 1.1rem;
  padding: 18px 48px;
}

/* =========================================================
   7. STATS BAR
   ========================================================= */

.ido-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 60px 24px;
}

.ido-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ido-stat__number {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--ido-primary, #8b6f47);
  line-height: 1;
  margin: 0;
}

.ido-stat__label {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.875rem;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* =========================================================
   8. FAQ ACCORDION
   ========================================================= */

.ido-faq {
  display: flex;
  flex-direction: column;
}

.ido-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ido-faq__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ido-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ido-dark, #1a1a1a);
  text-align: left;
  gap: 16px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.ido-faq__question:hover {
  color: var(--ido-primary, #8b6f47);
}

/* CSS chevron icon */
.ido-faq__question::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: -4px;
}

.ido-faq__question[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.ido-faq__answer {
  display: none;
  padding: 0 4px 20px;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.8;
}

.ido-faq__question[aria-expanded="true"] + .ido-faq__answer {
  display: block;
}

/* =========================================================
   9. GALLERY GRID
   ========================================================= */

.ido-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.ido-gallery__item {
  overflow: hidden;
  border-radius: calc(var(--ido-radius, 4px) / 2);
  line-height: 0;
  cursor: pointer;
  position: relative;
}

.ido-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  transition: transform 0.35s ease;
}

.ido-gallery__item:hover img {
  transform: scale(1.08);
}

/* =========================================================
   10. BUTTONS
   ========================================================= */

.ido-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--ido-primary, #8b6f47);
  border-radius: var(--ido-radius, 4px);
  padding: 14px 32px;
  cursor: pointer;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease,
              transform 0.18s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  -webkit-appearance: none;
  appearance: none;
}

.ido-btn:hover {
  background-color: var(--ido-secondary, #6b5035);
  border-color: var(--ido-secondary, #6b5035);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.ido-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ido-btn--outline {
  background-color: transparent;
  color: var(--ido-primary, #8b6f47);
  border-color: var(--ido-primary, #8b6f47);
  box-shadow: none;
}

.ido-btn--outline:hover {
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
}

.ido-btn--white {
  background-color: #ffffff;
  color: var(--ido-dark, #1a1a1a);
  border-color: #ffffff;
}

.ido-btn--white:hover {
  background-color: var(--ido-bg, #f8f5f0);
  border-color: var(--ido-bg, #f8f5f0);
  color: var(--ido-dark, #1a1a1a);
}

.ido-btn--lg {
  font-size: 1.0625rem;
  padding: 18px 48px;
}

.ido-btn:focus-visible {
  outline: 3px solid var(--ido-primary, #8b6f47);
  outline-offset: 3px;
}

/* =========================================================
   11. TYPOGRAPHY HELPERS
   ========================================================= */

.ido-heading {
  font-family: var(--ido-font-heading, Georgia, serif);
  color: var(--ido-dark, #1a1a1a);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

.ido-kicker {
  display: block;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ido-primary, #8b6f47);
  margin: 0;
}

.ido-text {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   12. ANIMATIONS
   ========================================================= */

.ido-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ido-reveal--left {
  transform: translateX(-30px);
}

.ido-reveal--right {
  transform: translateX(30px);
}

.ido-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.ido-stagger-1 { transition-delay: 0.1s; }
.ido-stagger-2 { transition-delay: 0.2s; }
.ido-stagger-3 { transition-delay: 0.3s; }
.ido-stagger-4 { transition-delay: 0.4s; }

/* noscript fallback — when JS is not available, show all revealed elements */
html:not(.ido-js) .ido-reveal {
  opacity: 1;
  transform: none;
}

/* =========================================================
   13. ACCESSIBILITY
   ========================================================= */

/* Screen-reader only utility */
.ido-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible states for interactive elements */
.ido-feature:focus-visible,
.ido-card:focus-visible,
.ido-gallery__item:focus-visible,
.ido-faq__question:focus-visible,
.ido-cta__contacts a:focus-visible,
.ido-hero__cta:focus-visible,
.ido-hero__scroll:focus-visible {
  outline: 3px solid var(--ido-primary, #8b6f47);
  outline-offset: 2px;
}

/* Disable ALL animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ido-reveal,
  .ido-reveal--left,
  .ido-reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ido-stagger-1,
  .ido-stagger-2,
  .ido-stagger-3,
  .ido-stagger-4 {
    transition-delay: 0s;
  }

  .ido-hero__scroll {
    animation: none;
  }

  .ido-btn,
  .ido-card,
  .ido-feature,
  .ido-split__img img,
  .ido-card__img img,
  .ido-gallery__item img,
  .ido-faq__question::after,
  .ido-faq__question,
  .ido-hero__cta,
  .ido-cta__contacts a {
    transition: none;
  }
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */

/* --- Tablet landscape (max 991px) --- */
@media (max-width: 991px) {
  .ido-section {
    padding: 60px 20px;
  }

  .ido-hero {
    min-height: 60vh;
  }

  .ido-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ido-split--reverse .ido-split__text,
  .ido-split--reverse .ido-split__img {
    order: unset;
  }

  .ido-stats {
    gap: 32px;
    padding: 48px 20px;
  }

  .ido-cta {
    padding: 60px 20px;
  }

  .ido-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .ido-features {
    gap: 24px;
  }
}

/* --- Tablet portrait (max 768px) --- */
@media (max-width: 768px) {
  .ido-section {
    padding: 48px 16px;
  }

  .ido-container,
  .ido-container--narrow {
    padding-inline: 16px;
  }

  .ido-hero {
    min-height: 60vh;
  }

  .ido-hero__content {
    padding: 32px 16px;
    gap: 16px;
  }

  .ido-hero__cta {
    padding: 14px 28px;
    font-size: 0.9375rem;
  }

  .ido-features {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .ido-feature {
    padding: 28px 16px;
  }

  .ido-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ido-stats {
    gap: 24px;
    padding: 40px 16px;
  }

  .ido-stat__number {
    font-size: 2.25rem;
  }

  .ido-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .ido-cta {
    padding: 48px 16px;
    gap: 20px;
  }

  .ido-cta__contacts {
    flex-direction: column;
    gap: 16px;
  }

  .ido-faq__question {
    font-size: 0.975rem;
    padding: 16px 4px;
  }
}

/* --- Mobile (max 480px) --- */
@media (max-width: 480px) {
  .ido-section {
    padding: 40px 16px;
  }

  .ido-hero {
    min-height: 50vh;
  }

  .ido-hero__scroll {
    display: none;
  }

  .ido-cards {
    grid-template-columns: 1fr;
  }

  .ido-features {
    grid-template-columns: 1fr;
  }

  .ido-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .ido-stat__number {
    font-size: 2rem;
  }

  .ido-stats {
    gap: 20px;
    padding: 32px 16px;
  }

  .ido-btn--lg {
    font-size: 1rem;
    padding: 16px 32px;
  }

  .ido-split {
    gap: 24px;
  }

  .ido-cta__heading {
    font-size: 1.5rem;
  }

  .ido-faq__question {
    font-size: 0.9375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 3 — /OFFER/N/ PAGE BASE
   Reusable starter dla każdego nowego projektu IdoBooking.
   Adaptuj kolory przez podmianę CSS variables — zmienne `--kr-*`
   to placeholdery do podmienienia (np. --pk-, --fr-, --mc-).

   Pochodzenie: extracted z fairrentals (FR_ARKUSZ_STYLOW.css sekcje 28+49)
   + Piekary 1-3 (sekcja 50). Tested live (chrome-devtools MCP):
   - Sophie Apartment, /offer/13/ — tabs styled, prices centered,
     hotspot duplicates removed, page height -30%.

   Krytyczne klasy systemowe IdoBooking pokrywane:
   - .big-label, .offer-title (H1 — nazwa apartamentu)
   - .tabs / .object-menu (drugie menu obiektu — kalendarz/właściwości/...)
   - .object-price, .offer-price, .price-from, .price-block (ceny)
   - .price-list, .season-row, .season-cell_* (cennik sezonowy)
   - .offer-gallery, .gallery, .offer-photo (galeria)
   - .offer-features, .amenities, .features-list (udogodnienia)
   - .booking-form, .reservation-form (sidebar rezerwacji)
   - .container-hotspot (system "Proponowane oferty" — UKRYTE bo duplikat)
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. Page wrapper — padding sensowne, brak ucinania pod headerem
   ────────────────────────────────────────────────────────── */
html body.page-offer main,
html body.page-offer #pageContent {
  background: var(--kr-bg, #FAFAF5) !important;
  padding: clamp(80px, 10vw, 120px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 64px) !important;
}

/* Footer gap fix — eliminuj puste miejsce po cenniku */
html body.page-offer main,
html body.page-offer #pageContent {
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
}
html body.page-offer ~ footer,
html body.page-offer footer {
  margin-top: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   2. Headings — nazwa apartamentu (H1) + sekcje (H2/H3)
   ────────────────────────────────────────────────────────── */
html body.page-offer h1,
html body.page-offer .big-label,
html body.page-offer .offer-title {
  font-family: var(--kr-font-heading, 'Playfair Display', serif) !important;
  font-size: clamp(32px, 4.4vw, 46px) !important;
  font-weight: 400 !important;
  color: var(--kr-text, #1A1A1A) !important;
  margin: 0 0 16px !important;
  line-height: 1.15 !important;
}

html body.page-offer h2,
html body.page-offer h3,
html body.page-offer .label,
html body.page-offer .offer-label {
  font-family: var(--kr-font-heading, 'Playfair Display', serif) !important;
  color: var(--kr-text, #1A1A1A) !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}


/* ──────────────────────────────────────────────────────────
   3. Object tabs (KALENDARZ DOSTĘPNOŚCI / WŁAŚCIWOŚCI / ZASADY...)
   System renderuje ul.tabs z linkami. Bez stylowania = brzydkie
   default <li> bullets + brak hierarchii. Tu: flex + underline.
   ────────────────────────────────────────────────────────── */
html body.page-offer .tabs,
html body.page-offer .object-menu,
html body.page-offer ul.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--kr-border, #E5DDD0) !important;
  background: transparent !important;
}
html body.page-offer .tabs > li,
html body.page-offer .tabs > a,
html body.page-offer .object-menu > li,
html body.page-offer .object-menu > a {
  flex: 0 0 auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.page-offer .tabs a,
html body.page-offer .object-menu a {
  display: inline-block !important;
  padding: 14px 18px !important;
  font-family: var(--kr-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--kr-text-muted, #6B6B6B) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}
html body.page-offer .tabs a:hover,
html body.page-offer .object-menu a:hover,
html body.page-offer .tabs li.active a,
html body.page-offer .tabs a.active,
html body.page-offer .object-menu a.active {
  color: var(--kr-primary, #722F37) !important;
  border-bottom-color: var(--kr-primary, #722F37) !important;
}


/* ──────────────────────────────────────────────────────────
   4. Price block — wycentrowany, cream tło, primary akcent
   Default systemowy: text-align right, flex — wygląda krzywo.
   ────────────────────────────────────────────────────────── */
html body.page-offer .object-price,
html body.page-offer .offer-price,
html body.page-offer .price-block,
html body.page-offer .price-from {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto 16px !important;
  width: 100% !important;
}
html body.page-offer .object-price {
  background: var(--kr-cream, #F2EDE4) !important;
  border: 1px solid var(--kr-border, #E5DDD0) !important;
  border-radius: var(--kr-radius-lg, 16px) !important;
  padding: 24px 32px !important;
  max-width: 280px !important;
  font-family: var(--kr-font-heading, 'Playfair Display', serif) !important;
  font-size: 18px !important;
  color: var(--kr-text, #1A1A1A) !important;
  box-shadow: var(--kr-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
}
html body.page-offer .object-price .price {
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--kr-primary, #722F37) !important;
  letter-spacing: 0.5px !important;
}


/* ──────────────────────────────────────────────────────────
   5. Price list / cennik sezonowy
   System renderuje .price-list.row z .season-cell_* — bez stylów
   = ściany tekstu. Tu: cream container, czytelne rzędy.
   ────────────────────────────────────────────────────────── */
html body.page-offer .price-list,
html body.page-offer .price-list.row {
  background: var(--kr-cream, #F2EDE4) !important;
  border-radius: var(--kr-radius-lg, 16px) !important;
  padding: 20px !important;
  margin: 24px 0 !important;
}
html body.page-offer .season-row,
html body.page-offer [class*="season-row"] {
  border-bottom: 1px solid var(--kr-border, #E5DDD0) !important;
  padding: 12px 0 !important;
}
html body.page-offer .season-row:last-child {
  border-bottom: none !important;
}
html body.page-offer .season-cell_heading,
html body.page-offer .season-cell_dates {
  font-family: var(--kr-font-body, 'DM Sans', sans-serif) !important;
  color: var(--kr-text-soft, #3A3A3A) !important;
  font-size: 14px !important;
}
html body.page-offer .season-cell_year,
html body.page-offer .season-cell_main .price {
  color: var(--kr-primary, #722F37) !important;
  font-family: var(--kr-font-heading, 'Playfair Display', serif) !important;
}


/* ──────────────────────────────────────────────────────────
   6. Gallery + features + booking-form — białe karty z border
   ────────────────────────────────────────────────────────── */
html body.page-offer .offer-gallery img,
html body.page-offer .gallery img,
html body.page-offer .offer-photo img,
html body.page-offer .object-gallery img {
  border-radius: var(--kr-radius, 8px) !important;
}

html body.page-offer .offer-features,
html body.page-offer .amenities,
html body.page-offer .features-list,
html body.page-offer .object-amenities {
  background: var(--kr-white, #FFFFFF) !important;
  border-radius: var(--kr-radius-lg, 16px) !important;
  border: 1px solid var(--kr-border, #E5DDD0) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
}

html body.page-offer .booking-form,
html body.page-offer .reservation-form,
html body.page-offer aside.booking,
html body.page-offer .object-booking {
  background: var(--kr-white, #FFFFFF) !important;
  border-radius: var(--kr-radius-lg, 16px) !important;
  border: 1px solid var(--kr-border, #E5DDD0) !important;
  padding: 24px !important;
  box-shadow: var(--kr-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
}


/* ──────────────────────────────────────────────────────────
   7. Form inputs — brand focus state
   ────────────────────────────────────────────────────────── */
html body.page-offer input:not([type="radio"]):not([type="checkbox"]),
html body.page-offer select,
html body.page-offer textarea {
  font-family: var(--kr-font-body, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  border: 1px solid var(--kr-border, #E5DDD0) !important;
  border-radius: var(--kr-radius, 8px) !important;
  padding: 12px 16px !important;
  min-height: 46px !important;
  background: var(--kr-white, #FFFFFF) !important;
}
html body.page-offer input:focus,
html body.page-offer select:focus,
html body.page-offer textarea:focus {
  border-color: var(--kr-primary, #722F37) !important;
  box-shadow: 0 0 0 3px var(--kr-primary-soft, rgba(114, 47, 55, 0.15)) !important;
  outline: none !important;
}


/* ──────────────────────────────────────────────────────────
   8. .container-hotspot — UKRYJ na /offer/N/
   System na /offer/N/ pokazuje "Proponowane oferty" w hotspocie
   z CAŁYM katalogiem (np. 122 obiekty u brokera Mentalis).
   To 99% duplikat z featured offers + przepełnienie strony.
   Jeśli masz własną sekcję wyróżnionych na home, na /offer/N/
   też ukryj nasze pk-offers-section (JS w initOfferPageBranding).
   ────────────────────────────────────────────────────────── */
body.page-offer .container-hotspot {
  display: none !important;
}


/* ──────────────────────────────────────────────────────────
   10. STICKY TABS — BEM modifier --fixed (KRYTYCZNE!)
   System IdoBooking dodaje JS-em modifier --fixed do .tabs gdy
   gość scrolluje past natural tab position. Bez tego stylowania
   sticky pasek jest WĄSKI (system max-width:1140px) + items
   pionowo (gdy .tabs__item bez width:auto).
   Historia: fairrentals v1.6 + v1.40, piekary 2026-05-25.
   Pełna analiza: lessons/024-tabs-fixed-bem-modifier-sticky-scroll.md
   ────────────────────────────────────────────────────────── */
html body .tabs.--fixed,
html body.page-offer .tabs.--fixed,
html body .tabs.tabs--fixed,
html body .tabs.sticky {
  position: fixed !important;
  top: 64px !important;              /* MUSI być zsynchronizowane z header scrolled height (verify live!) */
  left: 0 !important;
  right: 0 !important;
  inset-inline: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;       /* DEFEAT system .tabs{max-width:1140px} */
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  z-index: 999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--kr-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
  border-bottom: 1px solid var(--kr-border, #E5DDD0) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
}

/* Mobile — header scrolled na mobile ~56px */
@media (max-width: 991.98px) {
  html body .tabs.--fixed,
  html body.page-offer .tabs.--fixed,
  html body .tabs.tabs--fixed {
    top: 56px !important;
    padding: 0 16px !important;
  }
}

/* KLUCZOWE: .tabs__item to KLIKALNY div z <span> w środku (tabindex+JS).
   IdoBooking NIE używa <a> w sticky tabs — wszystkie style padding/font
   muszą iść BEZPOŚREDNIO na .tabs__item, nie na descendant <a>.
   Active state: .tabs__item.active (zwykła klasa, bez BEM --).
   Live evidence (piekary 2026-05-25): DOM = <div class="tabs__item">
                                          <span>Tekst</span>
                                        </div> */
html body .tabs > .tabs__item,
html body .tabs .tabs__item,
html body .tabs.--fixed > .tabs__item,
html body .tabs.--fixed .tabs__item {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 14px !important;
  font-family: var(--kr-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--kr-text-muted, #6B6B6B) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
html body .tabs > .tabs__item:hover,
html body .tabs > .tabs__item.active,
html body .tabs.--fixed > .tabs__item:hover,
html body .tabs.--fixed > .tabs__item.active,
html body .tabs__item:hover,
html body .tabs__item.active {
  color: var(--kr-primary, #722F37) !important;
  border-bottom-color: var(--kr-primary, #722F37) !important;
}
/* Span wewnątrz dziedziczy styl z parent */
html body .tabs__item span,
html body .tabs.--fixed .tabs__item span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Fallback dla <a>/<li><a>/<button> — gdyby system zmienił DOM w przyszłości */
html body .tabs.--fixed a,
html body .tabs.--fixed li a,
html body .tabs.--fixed button {
  font-family: var(--kr-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--kr-text-muted, #6B6B6B) !important;
  padding: 12px 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
}
html body .tabs.--fixed a:hover,
html body .tabs.--fixed a.active,
html body .tabs.--fixed li.active a {
  color: var(--kr-primary, #722F37) !important;
  border-bottom-color: var(--kr-primary, #722F37) !important;
}


/* ──────────────────────────────────────────────────────────
   9. Bootstrap row gutter fix — czasem ucina padding na .col-*
   ────────────────────────────────────────────────────────── */
html body.page-offer .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
html body.page-offer .row > [class^="col"],
html body.page-offer .row > [class*=" col"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* ──────────────────────────────────────────────────────────
   PRZY KOPIOWANIU DO NOWEGO PROJEKTU:
   1. Replace WSZYSTKIE --kr-* na własny prefix klienta (--pk-, --mc-, etc.)
   2. Upewnij się że masz w :root design tokens:
      --kr-primary (akcent), --kr-text, --kr-text-soft, --kr-text-muted,
      --kr-cream, --kr-white, --kr-bg, --kr-border,
      --kr-font-heading, --kr-font-body,
      --kr-radius, --kr-radius-lg, --kr-shadow,
      --kr-primary-soft (rgba primary 0.15 — dla focus glow)
   3. Po wklejeniu — chrome-devtools MCP verify:
      - body.page-offer h1 visible
      - .tabs display: flex + border-bottom
      - .object-price text-align: center + display: flex
      - .container-hotspot display: none
   ────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   LAYER 7 — INTERACTIONS
   Hover effects (8), scroll reveals (5), modal animations (4),
   loading states (3), form validation visuals (3).

   Wszystkie używają --kr-ease (defined w layer5).
   Respektują @media (prefers-reduced-motion: reduce).
   ═══════════════════════════════════════════════════════════════ */

/* ── REDUCED MOTION GUARD (apply first) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kr-hover--scale,
  .kr-hover--glow,
  .kr-hover--lift,
  .kr-hover--rotate-3d,
  .kr-hover--slide-underline,
  .kr-hover--color-shift,
  .kr-hover--brightness-pop,
  .kr-hover--border-grow,
  .kr-reveal,
  .kr-reveal--slide-left,
  .kr-reveal--zoom,
  .kr-reveal--stagger > *,
  .kr-reveal--parallax,
  .kr-skeleton,
  .kr-spinner,
  .kr-dot-loader > span,
  .kr-modal--fade-in,
  .kr-modal--slide-up,
  .kr-modal--slide-right,
  .kr-modal--scale-bounce {
    transition: none !important;
    animation: none !important;
  }
  .kr-reveal,
  .kr-reveal--slide-left,
  .kr-reveal--zoom,
  .kr-reveal--parallax {
    opacity: 1 !important;
    transform: none !important;
  }
  .kr-reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOVER EFFECTS (8 variants)
   Wszystkie wykorzystują GPU-accelerated transforms i opacity.
   Dodawaj klasy do dowolnego elementu, np. .kr-card.kr-hover--lift.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SCALE ───────────────────────────────────────────────── */
.kr-hover--scale {
  transition: transform 0.3s var(--kr-ease);
  will-change: transform;
  transform-origin: center center;
  cursor: pointer;
}
.kr-hover--scale:hover,
.kr-hover--scale:focus-visible {
  transform: scale(1.03);
}
.kr-hover--scale:active {
  transform: scale(0.98);
}

/* ── 2. GLOW ────────────────────────────────────────────────── */
.kr-hover--glow {
  transition: box-shadow 0.3s var(--kr-ease),
              transform 0.3s var(--kr-ease);
  will-change: box-shadow;
  cursor: pointer;
}
.kr-hover--glow:hover,
.kr-hover--glow:focus-visible {
  box-shadow: 0 12px 40px var(--kr-primary-soft),
              0 4px 12px rgba(0, 0, 0, 0.08);
}
.kr-hover--glow:active {
  box-shadow: 0 4px 16px var(--kr-primary-soft);
}

/* ── 3. SLIDE UNDERLINE ─────────────────────────────────────── */
.kr-hover--slide-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.kr-hover--slide-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--kr-primary);
  transition: width 0.3s var(--kr-ease);
  pointer-events: none;
}
.kr-hover--slide-underline:hover::after,
.kr-hover--slide-underline:focus-visible::after {
  width: 100%;
}

/* ── 4. LIFT ────────────────────────────────────────────────── */
.kr-hover--lift {
  transition: transform 0.3s var(--kr-ease),
              box-shadow 0.3s var(--kr-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.kr-hover--lift:hover,
.kr-hover--lift:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
              0 6px 16px rgba(0, 0, 0, 0.06);
}
.kr-hover--lift:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── 5. COLOR SHIFT ─────────────────────────────────────────── */
.kr-hover--color-shift {
  transition: color 0.3s var(--kr-ease),
              background-color 0.3s var(--kr-ease),
              border-color 0.3s var(--kr-ease);
  cursor: pointer;
  background-color: var(--kr-cream);
  color: var(--kr-text);
}
.kr-hover--color-shift:hover,
.kr-hover--color-shift:focus-visible {
  background-color: var(--kr-primary);
  color: var(--kr-cream);
  border-color: var(--kr-primary);
}
.kr-hover--color-shift:active {
  background-color: var(--kr-primary-dark, var(--kr-primary));
}

/* ── 6. ROTATE 3D ───────────────────────────────────────────── */
.kr-hover--rotate-3d {
  transition: transform 0.5s var(--kr-ease),
              box-shadow 0.5s var(--kr-ease);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}
.kr-hover--rotate-3d:hover,
.kr-hover--rotate-3d:focus-visible {
  transform: perspective(800px) rotateY(5deg) rotateX(2deg);
  box-shadow: -12px 16px 32px rgba(0, 0, 0, 0.12);
}
.kr-hover--rotate-3d:active {
  transform: perspective(800px) rotateY(2deg) rotateX(1deg);
}

/* ── 7. BRIGHTNESS POP ──────────────────────────────────────── */
.kr-hover--brightness-pop {
  transition: filter 0.3s var(--kr-ease),
              transform 0.3s var(--kr-ease);
  will-change: filter;
  cursor: pointer;
}
.kr-hover--brightness-pop:hover,
.kr-hover--brightness-pop:focus-visible {
  filter: brightness(1.1) saturate(1.2);
}
.kr-hover--brightness-pop:active {
  filter: brightness(0.98) saturate(1.1);
}

/* ── 8. BORDER GROW (center-out) ────────────────────────────── */
.kr-hover--border-grow {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-bottom: 4px;
}
.kr-hover--border-grow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--kr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--kr-ease);
  pointer-events: none;
}
.kr-hover--border-grow:hover::after,
.kr-hover--border-grow:focus-visible::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL (5 variants)
   Base state: hidden; add .kr-in via IntersectionObserver in JS.
   Wszystkie używają opacity + transform (GPU-friendly).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. BASE REVEAL (fade + slide up) ───────────────────────── */
.kr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--kr-ease),
              transform 0.6s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-reveal.kr-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── 2. SLIDE LEFT ──────────────────────────────────────────── */
.kr-reveal--slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s var(--kr-ease),
              transform 0.6s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-reveal--slide-left.kr-in {
  opacity: 1;
  transform: translateX(0);
}

/* ── 3. ZOOM ────────────────────────────────────────────────── */
.kr-reveal--zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s var(--kr-ease),
              transform 0.6s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-reveal--zoom.kr-in {
  opacity: 1;
  transform: scale(1);
}

/* ── 4. STAGGER (parent class — children animate one by one) ── */
.kr-reveal--stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--kr-ease),
              transform 0.5s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-reveal--stagger.kr-in > * {
  opacity: 1;
  transform: translateY(0);
}
/* JS sets transition-delay per child (data-stagger-index attr) */
.kr-reveal--stagger.kr-in > *:nth-child(1) { transition-delay: 0s; }
.kr-reveal--stagger.kr-in > *:nth-child(2) { transition-delay: 0.08s; }
.kr-reveal--stagger.kr-in > *:nth-child(3) { transition-delay: 0.16s; }
.kr-reveal--stagger.kr-in > *:nth-child(4) { transition-delay: 0.24s; }
.kr-reveal--stagger.kr-in > *:nth-child(5) { transition-delay: 0.32s; }
.kr-reveal--stagger.kr-in > *:nth-child(6) { transition-delay: 0.40s; }
.kr-reveal--stagger.kr-in > *:nth-child(7) { transition-delay: 0.48s; }
.kr-reveal--stagger.kr-in > *:nth-child(8) { transition-delay: 0.56s; }

/* ── 5. PARALLAX (longer distance, slower) ──────────────────── */
.kr-reveal--parallax {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s var(--kr-ease),
              transform 0.9s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-reveal--parallax.kr-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL ANIMATIONS (4 keyframes + 4 classes + overlay)
   Stosuj klasę .kr-active na modalu by uruchomić animację wejścia.
   Overlay (.kr-modal__overlay) zawsze fade-in.
   ═══════════════════════════════════════════════════════════════ */

/* ── OVERLAY (background dimmer) ────────────────────────────── */
.kr-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: xx-overlay-fade 0.3s var(--kr-ease) forwards;
  z-index: 1000;
}
.kr-modal__overlay.kr-closing {
  animation: xx-overlay-fade-out 0.25s var(--kr-ease) forwards;
}
@keyframes xx-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes xx-overlay-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── MODAL BASE (positioning) ───────────────────────────────── */
.kr-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--kr-cream);
  color: var(--kr-text);
  border-radius: 12px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
  z-index: 1001;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  opacity: 0;
}

/* ── 1. FADE IN ─────────────────────────────────────────────── */
@keyframes xx-modal-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.kr-modal--fade-in.kr-active {
  animation: xx-modal-fade-in 0.3s var(--kr-ease) forwards;
}

/* ── 2. SLIDE UP ────────────────────────────────────────────── */
@keyframes xx-modal-slide-up {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.kr-modal--slide-up.kr-active {
  animation: xx-modal-slide-up 0.35s var(--kr-ease) forwards;
}

/* ── 3. SLIDE RIGHT (drawer style) ──────────────────────────── */
@keyframes xx-modal-slide-right {
  from { opacity: 0; transform: translate(100%, -50%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.kr-modal--slide-right.kr-active {
  animation: xx-modal-slide-right 0.4s var(--kr-ease) forwards;
}
/* Drawer variant: anchored to right edge */
.kr-modal--drawer.kr-modal--slide-right {
  top: 0;
  left: auto;
  right: 0;
  transform: translateX(100%);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  width: min(420px, 90vw);
}
.kr-modal--drawer.kr-modal--slide-right.kr-active {
  animation: xx-drawer-slide-right 0.4s var(--kr-ease) forwards;
}
@keyframes xx-drawer-slide-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── 4. SCALE BOUNCE ────────────────────────────────────────── */
@keyframes xx-modal-scale-bounce {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.kr-modal--scale-bounce.kr-active {
  animation: xx-modal-scale-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── MODAL CLOSE (exit animation) ───────────────────────────── */
.kr-modal.kr-closing {
  animation: xx-modal-close 0.25s var(--kr-ease) forwards !important;
}
@keyframes xx-modal-close {
  from { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES (3 patterns)
   Skeleton (placeholder), Spinner (circular), Dot loader (bouncing).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SKELETON ────────────────────────────────────────────── */
.kr-skeleton {
  display: block;
  background-color: var(--kr-cream);
  border-radius: 6px;
  animation: xx-skeleton-pulse 1.5s var(--kr-ease) infinite;
  pointer-events: none;
  user-select: none;
  color: transparent;
}
@keyframes xx-skeleton-pulse {
  0%, 100% { background-color: var(--kr-cream); }
  50%      { background-color: var(--kr-cream3, #e8e2d8); }
}
.kr-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.kr-skeleton--text:last-child {
  width: 70%;
  margin-bottom: 0;
}
.kr-skeleton--title {
  height: 1.4em;
  width: 60%;
  margin-bottom: 0.75em;
  border-radius: 4px;
}
.kr-skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.kr-skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.kr-skeleton--button {
  width: 120px;
  height: 44px;
  border-radius: 8px;
}

/* ── 2. SPINNER ─────────────────────────────────────────────── */
.kr-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--kr-cream3, #e8e2d8);
  border-top-color: var(--kr-primary);
  border-radius: 50%;
  animation: xx-spinner 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes xx-spinner {
  to { transform: rotate(360deg); }
}
.kr-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.kr-spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}
.kr-spinner--cream {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--kr-cream);
}

/* ── 3. DOT LOADER ──────────────────────────────────────────── */
.kr-dot-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.kr-dot-loader > span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kr-primary);
  animation: xx-dot-bounce 1.4s var(--kr-ease) infinite both;
  opacity: 0.5;
}
.kr-dot-loader > span:nth-child(1) { animation-delay: 0s; }
.kr-dot-loader > span:nth-child(2) { animation-delay: 0.15s; }
.kr-dot-loader > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes xx-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.kr-dot-loader--lg > span {
  width: 12px;
  height: 12px;
}
.kr-dot-loader--cream > span {
  background: var(--kr-cream);
}

/* ═══════════════════════════════════════════════════════════════
   FORM VALIDATION VISUALS (3)
   Klasy aplikowane przez JS na podstawie state walidacji.
   Zielone/czerwone explicit (nie zmieniają się per klient).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. INPUT VALID (green checkmark) ───────────────────────── */
.kr-input--valid {
  border-color: #2ECC71 !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232ECC71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  transition: border-color 0.2s var(--kr-ease);
}

/* ── 2. INPUT ERROR (red x mark) ────────────────────────────── */
.kr-input--error {
  border-color: #E74C3C !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23E74C3C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='4' x2='12' y2='12'/><line x1='12' y1='4' x2='4' y2='12'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  transition: border-color 0.2s var(--kr-ease);
}

/* ── 3. ERROR MESSAGE (below input) ─────────────────────────── */
.kr-input-error-msg {
  color: #E74C3C;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kr-input-error-msg::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23E74C3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='6'/><line x1='7' y1='4' x2='7' y2='8'/><line x1='7' y1='10' x2='7' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── SHAKE ANIMATION (invalid submit) ───────────────────────── */
@keyframes xx-input-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.kr-input--shake {
  animation: xx-input-shake 0.3s var(--kr-ease);
}

/* ── FOCUS RING (valid/error states) ────────────────────────── */
.kr-input--valid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
.kr-input--error:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   COMBINATION UTILITIES
   Klasy łączące kilka efektów (np. card z lift + glow).
   Dodawaj do karty/buttonu by jednym slug-em włączyć kompozyt.
   ═══════════════════════════════════════════════════════════════ */

/* ── CARD INTERACTION (lift + glow) ─────────────────────────── */
.kr-hover--card {
  transition: transform 0.3s var(--kr-ease),
              box-shadow 0.3s var(--kr-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.kr-hover--card:hover,
.kr-hover--card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
              0 0 24px var(--kr-primary-soft);
}
.kr-hover--card:active {
  transform: translateY(-1px);
}

/* ── IMAGE ZOOM (within fixed-size container) ───────────────── */
.kr-hover--image-zoom {
  overflow: hidden;
  position: relative;
}
.kr-hover--image-zoom img,
.kr-hover--image-zoom > picture > img {
  transition: transform 0.5s var(--kr-ease);
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kr-hover--image-zoom:hover img,
.kr-hover--image-zoom:focus-visible img,
.kr-hover--image-zoom:hover > picture > img,
.kr-hover--image-zoom:focus-visible > picture > img {
  transform: scale(1.06);
}

/* ── OVERLAY REVEAL (caption on hover) ──────────────────────── */
.kr-hover--overlay {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.kr-hover--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.6) 0%,
              rgba(0, 0, 0, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s var(--kr-ease);
  pointer-events: none;
  z-index: 1;
}
.kr-hover--overlay:hover::before,
.kr-hover--overlay:focus-visible::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   DURATION + DELAY UTILITIES
   Dodaj klasę by precyzyjnie sterować czasem animacji/transition.
   Działa z .kr-reveal*, .kr-hover--*, .kr-modal--*.
   ═══════════════════════════════════════════════════════════════ */

.kr-dur-150 { transition-duration: 0.15s !important; animation-duration: 0.15s !important; }
.kr-dur-200 { transition-duration: 0.2s  !important; animation-duration: 0.2s  !important; }
.kr-dur-300 { transition-duration: 0.3s  !important; animation-duration: 0.3s  !important; }
.kr-dur-500 { transition-duration: 0.5s  !important; animation-duration: 0.5s  !important; }
.kr-dur-700 { transition-duration: 0.7s  !important; animation-duration: 0.7s  !important; }
.kr-dur-1000 { transition-duration: 1s   !important; animation-duration: 1s   !important; }

.kr-delay-0   { transition-delay: 0s     !important; animation-delay: 0s     !important; }
.kr-delay-100 { transition-delay: 0.1s   !important; animation-delay: 0.1s   !important; }
.kr-delay-200 { transition-delay: 0.2s   !important; animation-delay: 0.2s   !important; }
.kr-delay-300 { transition-delay: 0.3s   !important; animation-delay: 0.3s   !important; }
.kr-delay-500 { transition-delay: 0.5s   !important; animation-delay: 0.5s   !important; }
.kr-delay-700 { transition-delay: 0.7s   !important; animation-delay: 0.7s   !important; }

/* ═══════════════════════════════════════════════════════════════
   CURSOR + STATE HELPERS
   ═══════════════════════════════════════════════════════════════ */

.kr-cursor-pointer { cursor: pointer; }
.kr-cursor-help    { cursor: help; }
.kr-cursor-grab    { cursor: grab; }
.kr-cursor-grab:active { cursor: grabbing; }
.kr-cursor-not-allowed { cursor: not-allowed; }

.kr-state-loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}
.kr-state-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.kr-state-disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT MEDIA — disable all interactions/animations
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .kr-skeleton,
  .kr-spinner,
  .kr-dot-loader,
  .kr-modal__overlay,
  .kr-modal {
    display: none !important;
  }
  .kr-reveal,
  .kr-reveal--slide-left,
  .kr-reveal--zoom,
  .kr-reveal--stagger > *,
  .kr-reveal--parallax {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END LAYER 7 — INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   §AUDIT-FIXES (v3.0d, 2026-06-08) — pełny audyt: WCAG 2.1 AA, kontrast, focus,
   mobile overflow, stopka. Blok na KOŃCU → wygrywa kaskadą.
   ══════════════════════════════════════════════════════════════════════════ */

/* WCAG 2.4.7 FOCUS VISIBLE — widoczny focus dla REALNYCH elementów
   (dotąd outline istniał tylko dla nieużywanych .ido-* / .kr-hover--*). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.kr-offer-card:focus-visible, .kr-loc-card:focus-visible, .kr-attraction-card:focus-visible,
.kr-search__submit:focus-visible,
header.default13 #navbar a:focus-visible,
header.default13 .navbar-reservation:focus-visible,
footer a:focus-visible {
  outline: 3px solid var(--kr-secondary) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* pola wyszukiwarki miały outline:none bez zamiennika (klawiatura niewidoczna) */
.kr-search__input:focus, .kr-search__select:focus,
.kr-search__input:focus-visible, .kr-search__select:focus-visible {
  outline: 3px solid var(--kr-secondary) !important;
  outline-offset: 2px !important;
}

/* WCAG 1.4.3 KONTRAST */
/* Biały tekst na pomarańczu #EE8219 = 2.92:1 (FAIL). Na pomarańczowym tle ZAWSZE
   ciemny tekst (jak w hero 5.11:1). Dotyczy hoverów przycisków + filtrów /offers. */
.kr-offer-card__cta:hover,
.btn:not(.slick-arrow):hover, a.btn:not(.slick-arrow):hover,
.formbutton:hover,
body.page-offers #filter_buttons .btn,
body.page-offers #filters_submit,
body.page-offers .accommodation-buttons .btn:hover {
  color: var(--kr-text) !important;
}
/* status "Dostępne · N apart." #C9670C na #E9EDF7 = 3.17:1 → ciemniejszy (~5:1) */
.kr-loc-card__status--available { color: #9A5008 !important; }
/* soldout: opacity:0.85 obniżało kontrast → steruj kolorem, bez opacity */
.kr-loc-card--soldout { opacity: 1 !important; }
.kr-loc-card--soldout .kr-loc-card__city { color: var(--kr-text-soft) !important; }
.kr-loc-card--soldout .kr-loc-card__icon { color: var(--kr-text-muted) !important; }
.kr-loc-card__status--soldout { color: #4A5366 !important; }
/* nav link :hover #F59B45 na granacie = 4.22:1 → jaśniejszy ≥4.5:1 */
header.default13 #navbar ul.navbar-nav .nav-link:hover,
header.default13 #navbar ul.navbar-nav a:hover { color: #FFB060 !important; }

/* STOPKA — zablokuj kolor na #1A2BA0 (neutralizuje martwy §G #121C70, który czeka
   na odsłonięcie przy zmianie selektorów §FOOTER-FULL). */
html body footer .footer.container,
html body footer { background: var(--kr-primary) !important; }

/* MOBILE OVERFLOW — gwarancja braku poziomego scrolla. Hero Ken Burns (transform:scale(1.12))
   + slick-clones dawały ~8px poziomego nadmiaru na mobile. overflow-x:hidden na html clipuje
   bez wpływu na fixed header/litepicker. + zdjęcia max-width:100% (logo ma własny max-width 200). */
html { overflow-x: hidden !important; }   /* !important — bez tego systemowa reguła nadpisuje (computed wracał do visible → 8px scroll) */
body img { max-width: 100%; }
/* grid minmax bez min() → poziomy overflow na ≤360px */
.kr-blog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
.contact__locations { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
/* litepicker mobile: nie przekraczaj viewportu (konflikt z width:fit-content) */
@media (max-width: 575px) { html body .litepicker { max-width: calc(100vw - 16px) !important; } }
/* touch target ≥44px dla pól wyszukiwarki na mobile (WCAG 2.5.8) */
@media (max-width: 991px) { .kr-search__input, .kr-search__select { min-height: 44px !important; } }

/* WCAG 1.4.1 — niedostępne dni litepicker: drugi sygnał obok koloru */
html body .litepicker .container__days .day-item.is-not-available { text-decoration: line-through; }

/* WCAG 2.3.3 — Ken Burns hero respektuje prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.page-index #parallax_topslider .slick-track img,
  body.page-index #parallax_topslider .slick-track img.animate,
  body.page-index .section.parallax .slick-track img {
    animation: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §FOOTER-LOGO (pismo 17.06) — logo BHPSTAR w stopce, klik = powrót na górę.
   Wstawiane przez KONIEC_BODY initFooterLogo() na początek .footer__wrapper.
   ══════════════════════════════════════════════════════════════════════════ */
.kr-footer-logo {
  display: inline-flex !important;
  align-items: center;
  background: var(--kr-white);
  padding: 6px 12px;
  border-radius: var(--kr-radius-sm);
  margin: 0 18px 10px 0;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s var(--kr-ease);
  flex: 0 0 auto;
}
.kr-footer-logo:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.kr-footer-logo img { height: 30px; width: auto; max-width: 190px; display: block; }
@media (max-width: 575px) {
  .kr-footer-logo { margin: 0 auto 12px; }
  .kr-footer-logo img { height: 26px; max-width: 170px; }
}

/* ============ §OWNER-BANNER — baner /txt/201 Dla wlascicieli ===
   url() tla przeniesione z inline body_top do CSS (sanitizer-safe; TRAP body_top inline style).
   Fallback = --kr-primary gdy zdjecie z panelu sie nie wczyta. */
.kr-owner-banner {
  position: relative; height: 340px; border-radius: 16px; overflow: hidden;
  box-shadow: var(--kr-shadow-md);
  background: var(--kr-primary) url('https://client58765.idobooking.com/images/frontpageGallery/pictures/large/4/0/7.jpg') center / cover no-repeat;
}