/* ═══════════════════════════════════════════════════════════════
   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 [HARDCODED_PRIMARY] and
   [HARDCODED_SECONDARY] 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) */
/* ═══════════════════════════════════════════════════════════════
   §COLOR-SCHEME — opt-out Chrome "Auto Dark Mode" (force-dark)
   ROOT CAUSE: gdy OS/przeglądarka w trybie ciemnym, Chrome AUTO-przebarwia
   strony BEZ zadeklarowanego color-scheme. Przemalowuje ciemne tło stopki
   na slate-blue (~rgb(60,69,91)) MIMO że CSS = #241A11 espresso — stąd
   "niebieska stopka" (CTA/body pozostają brązowe → niespójność).
   Dowód (MCP, piksele zrzutu): footer ustawiony na #FFFFFF renderował
   rgb(62,71,94) = inwersja force-dark. Deklaracja color-scheme wyłącza
   force-dark → stopka renderuje prawdziwy espresso, spójny z resztą.
   Wzmocnienie: <meta name="color-scheme" content="light"> w HEAD (parse-time).
   2026-06-10
   ═══════════════════════════════════════════════════════════════ */
:root { color-scheme: light; }

html:root {
  color-scheme: light;
  --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(--ido-dark) !important;
  background-color: var(--ido-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.footer-contact-baner svg,
.footer-contact-baner img,
.footer__strip img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.4 !important;
}
.footer-contact-baner span,
.footer-contact-baner a,
.footer__strip a {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 12px !important;
}
.powered_by_logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.3 !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 [HARDCODED_PRIMARY] and [HARDCODED_SECONDARY]. */
.formbutton,
#iai_book_form .formbutton {
  background: [HARDCODED_PRIMARY] !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: [HARDCODED_SECONDARY] !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:
     [HARDCODED_PRIMARY]   → client primary color hex (e.g. #4A6741)
     [HARDCODED_SECONDARY] → 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: [HARDCODED_PRIMARY] !important;
  background: [HARDCODED_PRIMARY] !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* Back-to-top button */
#backTop {
  background: [HARDCODED_PRIMARY] !important;
}
#backTop:hover {
  background: [HARDCODED_SECONDARY] !important;
}

/* Cookie consent banner */
.ck_dsclr__btn_v2 {
  background: [HARDCODED_PRIMARY] !important;
}
.ck_dsclr__btn_v2:hover {
  background: [HARDCODED_SECONDARY] !important;
}
.ck_dsclr_v2 a {
  color: [HARDCODED_PRIMARY] !important;
}
.ck_dsclr_x_v2 {
  color: [HARDCODED_PRIMARY] !important;
}

/* Skip-to-content accessibility link */
.skip_link {
  background: [HARDCODED_PRIMARY] !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;
  }
}
/* ============================================================
   IGIELNA PRESTIGE — Layer 3 Theme (default13 override)
   Brand: espresso #241A11 + champagne gold #B8924E
   Fonts: Bodoni Moda (heading) + DM Sans (body)
   ============================================================ */

/* §1 — Brand tokens */
:root {
  --riv-navy:      #3A2C1E;
  --riv-navy-dark: #241A11;
  --riv-gold:      #B8924E;
  --riv-beige:     #C9B287;
  --riv-bg:        #FAF6EE;
  --riv-ink:       #2B2620;
  --riv-muted:     #8A7E6C;
  --riv-line:      rgba(184, 146, 78, 0.30);

  --riv-font-heading: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --riv-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --riv-radius-sm: 4px;
  --riv-radius-md: 8px;
  --riv-shadow-card: 0 8px 24px rgba(58, 44, 30, 0.08);
  --riv-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* §2 — default13 global overrides */
body {
  font-family: var(--riv-font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--riv-ink) !important;
  background: var(--riv-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--riv-font-heading) !important;
  color: var(--riv-navy-dark) !important;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}

h1 { font-size: 48px; line-height: 52px; }
h2 { font-size: 32px; line-height: 38px; font-weight: 600; }
h3 { font-size: 22px; line-height: 28px; font-weight: 600; }

@media (max-width: 767px) {
  h1 { font-size: 32px; line-height: 38px; }
  h2 { font-size: 24px; line-height: 30px; }
  h3 { font-size: 20px; line-height: 26px; }
}

a {
  color: var(--riv-navy-dark);
  text-decoration: none;
  transition: color var(--riv-transition);
}
a:hover { color: var(--riv-beige); }

button, .btn { font-family: var(--riv-font-body); }

/* §3 — focus states (WCAG AA) */
:focus-visible {
  outline: 2px solid var(--riv-beige);
  outline-offset: 2px;
}
/* ============================================================
   §4 — Header (default13 + fullpage.js transparent state)
   ============================================================ */
header { background: transparent !important; }

header .menu-wrapper {
  background: var(--riv-bg);
  padding: 16px 40px;
  transition: background var(--riv-transition), padding var(--riv-transition);
  border-bottom: 1px solid var(--riv-line);
}

@media (max-width: 991px) {
  header .menu-wrapper { padding: 12px 16px; }
}

header .menu-wrapper .nav-link,
header .menu-wrapper a:not(.btn) {
  color: var(--riv-navy-dark) !important;
  font-family: var(--riv-font-body);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 20px;
}

header .menu-wrapper .nav-link:hover {
  color: var(--riv-beige) !important;
}

/* Logo placeholder (text version, swap when SVG arrives) */
.riv-logo {
  font-family: var(--riv-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Transparent state on fullpage section 1 */
.riv-header--transparent .menu-wrapper {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.riv-header--transparent .menu-wrapper .nav-link,
.riv-header--transparent .menu-wrapper a:not(.btn) {
  color: #FFFFFF !important;
}
.riv-header--transparent .riv-logo { color: #FFFFFF; }

/* ============================================================
   §5 — Footer (granat ciemny, 3 kolumny, Powered by IdoBooking)
   ============================================================ */
footer {
  background: var(--riv-navy-dark) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 64px 40px 32px;
}

footer h2, footer h3, footer .footer__title {
  color: #FFFFFF !important;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  line-height: 2;
}
footer a:hover { color: var(--riv-beige) !important; }

footer .powered_by {
  opacity: 0.9 !important;          /* memory: licensing requirement ≥0.85 */
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 767px) {
  footer { padding: 48px 16px 24px; }
}
/* ============================================================
   §6 — Hero (ido-hero extended, fullscreen 80vh)
   ============================================================ */
.ido-hero, .riv-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  overflow: hidden;
}

.ido-hero::before, .riv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(36, 26, 17, 0.12) 0%, rgba(36, 26, 17, 0.28) 60%, rgba(36, 26, 17, 0.42) 100%);
  z-index: 1;
}

.ido-hero__media, .riv-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ido-hero__media img, .riv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ido-hero__content, .riv-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}

.ido-hero__title, .riv-hero__title {
  color: #FFFFFF !important;
  font-size: 64px;
  line-height: 1.0;
  font-weight: 400;
  margin: 0 0 24px;
}

.ido-hero__subtitle, .riv-hero__subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  line-height: 1.6;
  font-family: var(--riv-font-body);
  margin: 0 0 32px;
}

@media (max-width: 767px) {
  .ido-hero, .riv-hero { min-height: 70vh; }
  .ido-hero__title, .riv-hero__title { font-size: 36px; }
  .ido-hero__subtitle, .riv-hero__subtitle { font-size: 16px; }
}

/* Hero small (subpages) */
.riv-hero--small { min-height: 40vh; }
.riv-hero--small .riv-hero__title { font-size: 48px; }

/* ============================================================
   §7 — Split (ido-split, ido-split-reverse)
   ============================================================ */
.ido-split, .ido-split-reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.ido-split-reverse .ido-split__media,
.ido-split-reverse .ido-split__content { order: 0; }
.ido-split-reverse .ido-split__media { order: 1; }

.ido-split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--riv-radius-sm);
  box-shadow: var(--riv-shadow-card);
}

.ido-split__content h2 {
  margin: 0 0 24px;
  font-size: 36px;
}

.ido-split__content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--riv-ink);
  margin: 0 0 16px;
}

.ido-split__cta {
  display: inline-block;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .ido-split, .ido-split-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 16px;
  }
  .ido-split-reverse .ido-split__media { order: 0; }
}
/* §8 — Cards (ido-cards 2/3/4-col grid) */
.ido-cards { display: grid; gap: 24px; padding: 64px 40px; max-width: 1280px; margin: 0 auto; }
.ido-cards--2-col { grid-template-columns: repeat(2, 1fr); }
.ido-cards--3-col { grid-template-columns: repeat(3, 1fr); }
.ido-cards--4-col { grid-template-columns: repeat(4, 1fr); }

.ido-cards__item {
  background: var(--riv-bg);
  border: 1px solid var(--riv-line);
  border-radius: var(--riv-radius-md);
  overflow: hidden;
  transition: transform var(--riv-transition), box-shadow var(--riv-transition);
}
.ido-cards__item:hover { transform: translateY(-4px); box-shadow: var(--riv-shadow-card); }

.ido-cards__media { aspect-ratio: 16/10; overflow: hidden; }
.ido-cards__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ido-cards__item:hover .ido-cards__media img { transform: scale(1.05); }

.ido-cards__body { padding: 24px; }
.ido-cards__title { font-size: 22px; margin: 0 0 12px; color: var(--riv-navy-dark); }
.ido-cards__desc { font-size: 14px; color: var(--riv-muted); line-height: 1.6; margin: 0 0 16px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ido-cards__cta { display: inline-block; padding: 10px 0; color: var(--riv-navy-dark); font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--riv-beige); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 767px) {
  .ido-cards--2-col, .ido-cards--3-col, .ido-cards--4-col { grid-template-columns: 1fr; }
  .ido-cards { padding: 48px 16px; }
}

/* §9 — Features (ido-features 3-6 ikon SVG inline) */
.ido-features { display: grid; gap: 32px; padding: 64px 40px; max-width: 1280px; margin: 0 auto; }
.ido-features--3-col { grid-template-columns: repeat(3, 1fr); }
.ido-features--6-col { grid-template-columns: repeat(6, 1fr); }

.ido-features__item { text-align: center; padding: 16px; }
.ido-features__icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--riv-beige); }
.ido-features__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ido-features__title { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--riv-navy-dark); margin: 0; }

@media (max-width: 767px) {
  .ido-features--6-col { grid-template-columns: repeat(3, 1fr); }
  .ido-features--3-col { grid-template-columns: 1fr; }
}

/* §10 — Testimonials (ido-testimonials karuzela lub static grid) */
.ido-testimonials { padding: 80px 40px; max-width: 1280px; margin: 0 auto; background: rgba(184, 146, 78, 0.05); }
.ido-testimonials__title { text-align: center; margin: 0 0 48px; }
.ido-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ido-testimonials__item { background: var(--riv-bg); padding: 32px; border-radius: var(--riv-radius-md); border: 1px solid var(--riv-line); }
.ido-testimonials__rating { color: var(--riv-beige); margin-bottom: 12px; font-size: 18px; }
.ido-testimonials__quote { font-family: var(--riv-font-heading); font-size: 18px; line-height: 1.6; color: var(--riv-navy-dark); margin: 0 0 16px; font-style: italic; }
.ido-testimonials__author { font-size: 14px; color: var(--riv-muted); }
.ido-testimonials__source { font-size: 12px; color: var(--riv-beige); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 767px) { .ido-testimonials__grid { grid-template-columns: 1fr; } }

/* §11 — CTA (ido-cta, ido-cta-dark) */
.ido-cta { padding: 80px 40px; text-align: center; max-width: 800px; margin: 0 auto; }
.ido-cta__title { font-size: 36px; margin: 0 0 16px; }
.ido-cta__subtitle { font-size: 16px; color: var(--riv-muted); margin: 0 0 32px; }
.ido-cta-dark { background: var(--riv-navy-dark); color: #FFFFFF; padding: 80px 40px; text-align: center; }
.ido-cta-dark .ido-cta__title { color: #FFFFFF !important; }
.ido-cta-dark .ido-cta__subtitle { color: rgba(255, 255, 255, 0.85); }
.ido-cta__btn, .btn-primary { display: inline-block; background: var(--riv-navy-dark); color: #FFFFFF !important; padding: 14px 36px; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--riv-navy-dark); transition: all var(--riv-transition); min-height: 44px; }
.ido-cta__btn:hover, .btn-primary:hover { background: var(--riv-navy); border-color: var(--riv-navy); }
.ido-cta-dark .ido-cta__btn { background: var(--riv-beige); color: var(--riv-navy-dark) !important; border-color: var(--riv-beige); }
.ido-cta-dark .ido-cta__btn:hover { background: var(--riv-gold); border-color: var(--riv-gold); color: #FFFFFF !important; }

/* §12 — FAQ (ido-faq accordion) */
.ido-faq { padding: 64px 40px; max-width: 800px; margin: 0 auto; }
.ido-faq__item { border-bottom: 1px solid var(--riv-line); }
.ido-faq__question { padding: 20px 0; font-family: var(--riv-font-heading); font-size: 18px; font-weight: 600; color: var(--riv-navy-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.ido-faq__answer { padding: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--riv-ink); display: none; }
.ido-faq__item.is-open .ido-faq__answer { display: block; }
.ido-faq__icon { transition: transform var(--riv-transition); }
.ido-faq__item.is-open .ido-faq__icon { transform: rotate(45deg); }

/* §13 — Gallery (ido-gallery masonry) */
.ido-gallery { padding: 64px 40px; max-width: 1280px; margin: 0 auto; }
.ido-gallery__filters { display: flex; gap: 12px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.ido-gallery__filter { padding: 8px 16px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--riv-line); background: transparent; cursor: pointer; min-height: 44px; }
.ido-gallery__filter.is-active { background: var(--riv-navy-dark); color: #FFFFFF; border-color: var(--riv-navy-dark); }
.ido-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ido-gallery__item { aspect-ratio: 4/3; overflow: hidden; cursor: pointer; }
.ido-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ido-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 767px) { .ido-gallery__grid { grid-template-columns: 1fr; } }

/* §14 — Map */
.ido-map { padding: 64px 0; max-width: 1280px; margin: 0 auto; }
.ido-map iframe { width: 100%; height: 480px; border: 0; }
/* ============================================================
   §15 — RIV-AMENITIES (6 ikon SVG: Widok / Garaż / WiFi / Zwierzęta / Smart TV / Winda)
   ============================================================ */
.riv-amenities {
  padding: 48px 40px;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--riv-line);
  border-bottom: 1px solid var(--riv-line);
}
.riv-amenities__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.riv-amenities__item {
  text-align: center;
  padding: 8px;
}
.riv-amenities__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--riv-beige);
}
.riv-amenities__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.riv-amenities__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--riv-navy-dark);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .riv-amenities__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 480px) {
  .riv-amenities__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   §18 — RIV-SEARCH (premium booking widget, source-matched layout)
   3 boxes: Arrival button | Departure button | REZERWUJ ONLINE
   Footer: 3 trust badges (Gwarancja / Natychmiastowe / Centrum)
   Datepicker: Litepicker (CDN, dual-month, lang pl-PL)
   ============================================================ */

.riv-search {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(58, 44, 30, 0.28);
  width: 100%;
  max-width: 920px;
  margin: 40px auto 0;
  position: relative;
  z-index: 10;
  overflow: hidden;
  border: 1px solid rgba(184, 146, 78, 0.2);
}

.riv-search__inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0;
  align-items: stretch;
}

.riv-search__box {
  background: transparent;
  border: none;
  padding: 22px 28px 22px 28px;
  text-align: left;
  cursor: pointer;
  font-family: var(--riv-font-body);
  color: var(--riv-navy-dark);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
  border-right: 1px solid rgba(184, 146, 78, 0.25);
  transition: background 0.2s;
}
.riv-search__box:hover {
  background: rgba(184, 146, 78, 0.06);
}
.riv-search__box:focus-visible {
  outline: 2px solid var(--riv-beige);
  outline-offset: -2px;
}

.riv-search__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--riv-muted);
  font-family: var(--riv-font-body);
}

.riv-search__date {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--riv-font-body);
  line-height: 1;
}

.riv-search__day {
  font-size: 34px;
  font-weight: 500;
  color: var(--riv-navy-dark);
  line-height: 1;
  min-width: 32px;
  display: inline-block;
}

.riv-search__month,
.riv-search__year {
  font-size: 13px;
  color: var(--riv-muted);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.riv-search__month::before,
.riv-search__year::before {
  content: "/";
  margin-right: 4px;
  color: var(--riv-line);
}

.riv-search__icon {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 18px;
  height: 18px;
  color: var(--riv-beige);
  pointer-events: none;
  display: flex;
}
.riv-search__icon svg {
  width: 100%;
  height: 100%;
}

.riv-search__submit {
  background: var(--riv-navy-dark);
  color: #FFFFFF;
  border: none;
  padding: 0 44px;
  min-height: 110px;
  font-family: var(--riv-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  border-radius: 0;
}
.riv-search__submit:hover {
  background: var(--riv-navy);
}
.riv-search__submit:focus-visible {
  outline: 2px solid var(--riv-beige);
  outline-offset: -4px;
}

.riv-search__footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 28px;
  background: rgba(58, 44, 30, 0.035);
  border-top: 1px solid rgba(184, 146, 78, 0.2);
}

.riv-search__trust {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--riv-navy-dark);
  font-family: var(--riv-font-body);
}

.riv-search__trust-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--riv-beige);
}

/* Litepicker theme override (premium navy/beige) */
.litepicker {
  font-family: var(--riv-font-body) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(58, 44, 30, 0.25) !important;
  border: 1px solid rgba(184, 146, 78, 0.25) !important;
}
.litepicker .container__months .month-item-header div > .month-item-name,
.litepicker .container__months .month-item-header div > .month-item-year {
  font-family: var(--riv-font-heading) !important;
  font-weight: 500 !important;
  color: var(--riv-navy-dark) !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.litepicker .container__months .month-item-weekdays-row > div {
  font-family: var(--riv-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--riv-muted) !important;
}
.litepicker .container__days .day-item {
  font-family: var(--riv-font-body) !important;
  font-size: 14px !important;
  color: var(--riv-navy-dark) !important;
  border-radius: 4px !important;
  min-height: 36px !important;
  transition: background 0.15s !important;
}
.litepicker .container__days .day-item.is-today {
  color: var(--riv-beige) !important;
  font-weight: 600 !important;
}
.litepicker .container__days .day-item:hover {
  background: rgba(184, 146, 78, 0.15) !important;
  color: var(--riv-navy-dark) !important;
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background: var(--riv-navy-dark) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.litepicker .container__days .day-item.is-in-range {
  background: rgba(184, 146, 78, 0.18) !important;
  color: var(--riv-navy-dark) !important;
  border-radius: 0 !important;
}

/* Locked dni (zajęte): wyraźny disabled state — light gray bg + grubszy line-through + brak hover effect */
.litepicker .container__days .day-item.is-locked,
.litepicker .container__days .day-item.is-locked.is-today {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #B5B5B5 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #888888 !important;
  cursor: not-allowed !important;
  font-weight: 400 !important;
  pointer-events: none !important;
}
.litepicker .container__days .day-item.is-locked:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #B5B5B5 !important;
}

/* Available dni — wzmocnij weight żeby były wyraźniejsze niż locked */
.litepicker .container__days .day-item:not(.is-locked):not(.is-start-date):not(.is-end-date):not(.is-in-range) {
  font-weight: 600 !important;
}

.litepicker .button-previous-month,
.litepicker .button-next-month {
  color: var(--riv-navy-dark) !important;
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
  color: var(--riv-beige) !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .riv-search {
    max-width: calc(100% - 24px);
    margin: 30px auto 0;
  }
  .riv-search__inner {
    grid-template-columns: 1fr;
  }
  .riv-search__box {
    border-right: none;
    border-bottom: 1px solid rgba(184, 146, 78, 0.25);
    min-height: 88px;
    padding: 16px 24px;
  }
  .riv-search__day { font-size: 28px; }
  .riv-search__submit {
    min-height: 60px;
    padding: 0 24px;
  }
  .riv-search__footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 24px;
  }
  .riv-search__trust {
    font-size: 12px;
  }
}
/* ============================================================
   §19-25 — JARVIS TRAPS v1.3 (z docs/KNOWN-FIXES.md)
   Każda sekcja oznaczona numerem TRAP — nie usuwać bez aktualizacji
   znanych klientów (madera, najmar, mountainprestige, ecocamping).
   ============================================================ */

/* §19 — TRAP A: Full-width sections (body_top wrapped in .container max-width 1170px)
   Sekcje muszą rozciągać się na 100vw poprzez breakout trick. */

html, body, body.default13 {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.riv-hero,
.riv-amenities,
.riv-apartments-section,
.ido-split, .ido-split-reverse,
.ido-cards, .ido-features,
.ido-testimonials, .ido-cta, .ido-cta-dark,
.ido-faq, .ido-gallery, .ido-map,
.ig-stats, .ig-location, .ig-experience {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  box-sizing: border-box !important;
}

/* Inner content stays readable — przez padding poziomy auto-centrujący */
.ido-split, .ido-split-reverse,
.ido-cards, .ido-features,
.ido-testimonials,
.ido-cta, .ido-cta-dark,
.ido-faq, .ido-gallery {
  padding-left: max(40px, calc((100vw - 1280px) / 2)) !important;
  padding-right: max(40px, calc((100vw - 1280px) / 2)) !important;
}

.riv-amenities {
  padding-left: max(40px, calc((100vw - 1280px) / 2)) !important;
  padding-right: max(40px, calc((100vw - 1280px) / 2)) !important;
}

@media (max-width: 767px) {
  .ido-split, .ido-split-reverse,
  .ido-cards, .ido-features,
  .ido-testimonials,
  .ido-cta, .ido-cta-dark,
  .ido-faq, .ido-gallery,
  .riv-amenities {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* §20 — TRAP B: pointer-events override dla .index-info * cascade
   L1 disable'uje pointer-events na .index-info żeby chronić hero. Trzeba
   re-enable na naszych interactive elements. */

.riv-search, .riv-search *,
.riv-hero__content, .riv-hero__content *,
.riv-offer-card, .riv-offer-card *,
.riv-amenities__item,
.ido-split__cta, .ido-cta__btn,
.ido-cards__item, .ido-cards__cta,
.ido-cards__header,
.ido-faq__question,
.ido-gallery__filter, .ido-gallery__item,
.index-info .riv-search, .index-info .riv-search *,
.index-info .riv-hero__content, .index-info .riv-hero__content *,
.index-info a[href], .index-info button,
.index-info input, .index-info select, .index-info textarea, .index-info form {
  pointer-events: auto !important;
}

/* §21 — TRAP CRITICAL-SS: Powered by IdoBooking badge
   System renderuje SVG `powered_by_idoBooking_on_white.svg` jako 120x120
   na dark footer → wygląda jak gray box. Fix: small subtle badge (80x18 35% opacity). */

.powered_by,
.powered_by_logo {
  background: transparent !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.powered_by_logo img,
.powered_by img {
  max-width: 80px !important;
  max-height: 18px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1) opacity(0.35) !important;
  background: transparent !important;
  display: inline-block !important;
}

/* §22 — TRAP CRITICAL-II: Footer override (anti-white, force navy dark)
   System może pokazywać białe pasy w .footer-contact-baner, .footer-contact-add,
   .footer-contact-help. Force brand navy. */

footer, .footer, .page-footer,
.footer-contact-baner, .footer-contact-add, .footer-contact-help,
.footer__col, .footer__bottom, .footer__top,
.footer__wrapper {
  background: var(--riv-navy-dark) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5,
footer .footer__title,
footer strong, footer b,
.footer h2, .footer h3, .footer__title {
  color: #FFFFFF !important;
  font-family: var(--riv-font-heading);
}

footer a, .footer a, .page-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color var(--riv-transition);
}
footer a:hover, .footer a:hover, .page-footer a:hover {
  color: var(--riv-beige) !important;
}

/* Body bg fallback w razie wycieku */
body {
  background: var(--riv-bg) !important;
}

/* §23 — TRAP CRITICAL-CC: /offers filters collapsed by default
   System renderuje `.filter_content.collapse.show` = open. Override na closed,
   click toggle przez JS w body_bottom. */

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;
}

body.page-offers .filter_header {
  cursor: pointer;
  user-select: none;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--riv-line);
  font-family: var(--riv-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--riv-navy-dark);
  min-height: 44px;
}

body.page-offers .filter_header[aria-expanded="true"] .fa-angle-down,
body.page-offers .filter_header[aria-expanded="true"] i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

body.page-offers .filter_header i {
  transition: transform 0.3s ease;
}

/* §24 — TRAP C: <input type="date"> picker dead
   -webkit-appearance: none kills native picker. Force appearance auto. */

.riv-search__input[type="date"],
.riv-search__input[type="time"],
.riv-search__input[type="datetime-local"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  cursor: pointer !important;
}

.riv-search__field {
  cursor: pointer;
}

/* §25 — Hero bez własnego image (system pokazuje swój hero z panelu)
   .riv-hero zostaje overlay-tyle warstwę, content centered. */

.riv-hero.riv-hero--system-bg {
  background: transparent;
  min-height: 0;
}

.riv-hero.riv-hero--system-bg::before {
  display: none;
}

.riv-hero.riv-hero--system-bg .riv-hero__content {
  position: relative;
  z-index: 5;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  color: #FFFFFF;
}

.riv-hero.riv-hero--system-bg .riv-hero__title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.riv-hero.riv-hero--system-bg .riv-hero__subtitle {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* §25b — Hero eyebrow (marka nad tytułem, jak referencja) */
.riv-hero__eyebrow {
  color: var(--riv-gold);
  font-family: var(--riv-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* §26 — Apartments section gdy pusty (system jeszcze nie dostarczył offerów)
   Komunikat zastępczy zamiast pustej dziury */

.riv-apartments-grid:empty::before {
  content: "Apartamenty wkrótce dostępne w panelu rezerwacji. Skontaktuj się z nami: +48 531 540 514";
  display: block;
  text-align: center;
  padding: 48px 24px;
  font-family: var(--riv-font-body);
  font-size: 15px;
  color: var(--riv-muted);
  border: 1px dashed var(--riv-line);
  border-radius: var(--riv-radius-md);
  max-width: 720px;
  margin: 0 auto;
}

/* Riv-offer-card w wersji bez meta (oferty pobytu — ceny, nie apartamenty) */
.riv-offers-grid .riv-offer-card__media {
  cursor: default;
}

/* Linki w sekcji intro/about: arrow style */
.ido-split-reverse .ido-split__cta,
.ido-split .ido-split__cta {
  display: inline-block;
  padding: 10px 0;
  color: var(--riv-navy-dark);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--riv-beige);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent !important;
  border-radius: 0;
  margin-top: 16px;
  min-height: 44px;
}

.ido-split-reverse .ido-split__cta:hover,
.ido-split .ido-split__cta:hover {
  color: var(--riv-beige);
  background: transparent !important;
}

/* §27 — HIDE system .index-info content na homepage
   System renderuje H1/H2/button/widget w .index-info — przykrywa nasz hero.
   Nasz riv-hero (teleported) zastępuje całość. */

body.page-index .index-info > h1,
body.page-index .index-info > h2,
body.page-index .index-info > .big-label,
body.page-index .index-info > button,
body.page-index .index-info > .navbar-reservation,
body.page-index .index-info > form,
body.page-index .index-info > .iai-search,
body.page-index .index-info > div:not(.riv-hero):not(.riv-hero__content):not(.riv-search) {
  display: none !important;
}

body.page-index .index-info {
  position: relative !important;
  background: transparent !important;
  pointer-events: none !important;
}
body.page-index .index-info .riv-hero,
body.page-index .index-info .riv-hero * {
  pointer-events: auto !important;
}

/* §28 — riv-hero teleported fullscreen w .section.parallax .fp-tableCell
   Override §6 ido-hero generic min-height. Zostaje 100vh w parallax. */

body.page-index .section.parallax .fp-tableCell .riv-hero,
body.page-index .fp-section .fp-tableCell .riv-hero,
body.page-index .section.parallax .riv-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 120px 24px 80px !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px;
  z-index: 1 !important;
  background: transparent !important;
}

body.page-index .riv-hero__content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
}

body.page-index .riv-hero__title {
  color: #FFFFFF !important;
  font-size: 56px !important;
  line-height: 1.1 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin: 0 0 16px;
}

body.page-index .riv-hero__subtitle {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 18px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin: 0;
}

@media (max-width: 767px) {
  body.page-index .riv-hero__title { font-size: 36px !important; }
  body.page-index .riv-hero__subtitle { font-size: 16px !important; }
  body.page-index .section.parallax .fp-tableCell .riv-hero {
    padding: 100px 16px 40px !important;
  }
}

/* §29 — Dark gradient overlay na parallax bg dla czytelności białego tekstu */

body.page-index .section.parallax,
body.page-index .section.parallax .fp-tableCell {
  position: relative;
}

body.page-index .section.parallax > .fp-tableCell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(36, 26, 17, 0.12) 0%, rgba(36, 26, 17, 0.28) 60%, rgba(36, 26, 17, 0.42) 100%);
  z-index: 2;
  pointer-events: none;
}

body.page-index .parallax-slider {
  z-index: 1 !important;
}

/* §30 — Search form pozycja inline center w teleported hero (override §18 absolute removed) */

body.page-index .riv-hero .riv-search,
body.page-index .section.parallax .fp-tableCell .riv-search {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 900px !important;
  z-index: 7;
}

/* §31 — Hide system "Wyróżnione Oferty" duplicate H2 above featured offers
   System renders <h2 class="big-label line-label">Wyróżnione Oferty</h2>
   above .container-hotspot — duplicate vs our "Nasze apartamenty" header. */

body.page-index h2.big-label.line-label,
body.page-index .container-hotspot ~ h2.big-label,
body.page-index .section_top h2.big-label.line-label {
  display: none !important;
}

/* §32 — Override system `header { position: fixed }` na body_top section headers
   System ma globalnie `header { position: fixed; top: 0; z-index: 1010 }` (menu).
   Każdy <header> tag w body_top inherits — wskakuje na top viewport. Force static.
   Plus grid-span dla ido-cards__header żeby zajmował pełną szerokość row. */

.ido-cards > header,
.ido-cards > .ido-cards__header,
.ido-features > header,
.ido-features > .ido-features__header,
.ido-testimonials > header,
.ido-testimonials > .ido-testimonials__header,
.riv-subpage-section__header,
section > header.riv-subpage-section__header,
section > header.ido-cards__header,
section > header.ido-features__header,
section > .ido-cards__header,
section > .ido-features__header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: auto !important;
  background: transparent !important;
  transform: none !important;
}

/* Grid span — header pełna szerokość row */
.ido-cards--2-col > .ido-cards__header,
.ido-cards--3-col > .ido-cards__header,
.ido-cards--4-col > .ido-cards__header,
.ido-cards > .ido-cards__header {
  grid-column: 1 / -1 !important;
  text-align: center;
  margin-bottom: 32px;
}

.ido-cards > .ido-cards__header h2 {
  margin: 0 0 8px;
}
.ido-cards > .ido-cards__header p {
  margin: 0;
  color: var(--riv-muted);
  font-size: 16px;
}

/* §33 — AGGRESSIVE override (po v1.4 live diagnozie chrome-devtools)
   §27 selector list z 8 comma-separated selectors + :not() chain miał
   parsing issue lub specificity miss. Discrete rules per element. */

body.page-index .iai-search,
body.page-index #iai_book_form,
body.page-index #iai_book_se,
body.page-index .index-info .iai-search,
body.page-index .index-info #iai_book_form {
  display: none !important;
  visibility: hidden !important;
}

body.page-index .index-info > div:not(.riv-hero):not(.riv-hero__content) {
  display: none !important;
}

/* §34 — Force riv-hero column layout (override default flex-direction: row from L2) */

body.page-index .riv-hero,
body.page-index .section.parallax .riv-hero,
body.page-index .section.parallax .fp-tableCell .riv-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* §35 — riv-search inline center (kontekst teleported) */

body.page-index .riv-hero .riv-search,
body.page-index .section.parallax .riv-search,
body.page-index .section.parallax .fp-tableCell .riv-search {
  position: relative !important;
  margin: 40px auto 0 !important;
  width: 100% !important;
  max-width: 900px !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* §36 — z-index hierarchy (v1.8 corrected after live diagnoza nav nieklikalne):
   Header MUST be above hero (else nav links blocked).
   Hero z-index: 1 (just above parallax-slider 1)
   Hero content z-index: 3
   Hero gradient overlay ::before: 2 (between slider 1 and content 3)
   Search: 4 (above content)
   Header: 100 (above ALL hero content)
   Nav links: 101 + pointer-events: auto (defensive) */

body.page-index header.default13,
body.page-index header,
body.page-index .menu-wrapper {
  z-index: 100 !important;
  pointer-events: auto !important;
}

body.page-index header a,
body.page-index header nav a,
body.page-index .menu-wrapper a,
body.page-index .menu-wrapper nav a {
  pointer-events: auto !important;
  position: relative;
  z-index: 101;
}

body.page-index .lang-switch,
body.page-index .navbar-language {
  z-index: auto !important;
}

body.page-index .riv-hero,
body.page-index .section.parallax .riv-hero,
body.page-index .section.parallax .fp-tableCell .riv-hero {
  z-index: 1 !important;
}

body.page-index .riv-hero__content {
  z-index: 3 !important;
}

body.page-index .riv-search {
  z-index: 4 !important;
}

/* §37 — TRAP CRITICAL-X (Hero CSS bg leak)
   System .parallax-slider domyślnie position: fixed → wycieka na cały viewport
   (hero image visible PRZEZ wszystkie sekcje below hero). 
   Fix: parallax-slider absolute w .section.parallax + opaque bg na każdej sekcji. */

body.page-index .parallax-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
body.page-index .section.parallax {
  overflow: hidden !important;
  position: relative !important;
}

body.page-index .ido-split,
body.page-index .ido-split-reverse,
body.page-index .ido-cards,
body.page-index .riv-apartments-section,
body.page-index .section.fp-auto-height,
body.page-index .section.fp-auto-height > .fp-tableCell {
  background: #FFFFFF !important;
  position: relative !important;
  z-index: 5 !important;
}

body.page-index .riv-amenities {
  background: #FAF8F4 !important;
  position: relative !important;
  z-index: 5 !important;
}

body.page-index .ido-testimonials {
  background: rgba(184, 146, 78, 0.05) !important;
  position: relative !important;
  z-index: 5 !important;
}

body.page-index .ido-cta-dark {
  background: #241A11 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ============================================================
   §38-44 — SUBPAGES CSS (v2.0)
   Hero-small, breadcrumbs, attractions grid, gallery grid, contact
   ============================================================ */

/* §38 — Subpage hero (smaller niż homepage parallax) */
.riv-subhero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--riv-navy-dark) 0%, var(--riv-navy) 100%);
  padding: 80px 24px;
  overflow: hidden;
}
.riv-subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(58, 44, 30, 0.4) 100%);
  pointer-events: none;
}
.riv-subhero__content { position: relative; z-index: 2; max-width: 800px; }
.riv-subhero__title {
  font-family: var(--riv-font-heading);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  color: #FFFFFF !important;
  margin: 0 0 16px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
.riv-subhero__breadcrumb {
  font-family: var(--riv-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.riv-subhero__breadcrumb a {
  color: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.riv-subhero__breadcrumb a:hover { color: var(--riv-beige) !important; border-color: var(--riv-beige); }

@media (max-width: 767px) {
  .riv-subhero { min-height: 30vh; padding: 60px 16px; }
  .riv-subhero__title { font-size: 32px; }
}

/* §39 — Subpage content section (white bg standard) */
.riv-subpage-section {
  background: #FFFFFF;
  padding: 64px max(24px, calc((100vw - 1280px) / 2));
  position: relative;
}
.riv-subpage-section--muted {
  background: #FAF8F4;
}
.riv-subpage-section__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.riv-subpage-section__header {
  text-align: center;
  margin-bottom: 48px;
}
.riv-subpage-section__title {
  font-family: var(--riv-font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  margin: 0 0 12px;
}
.riv-subpage-section__subtitle {
  font-family: var(--riv-font-body);
  font-size: 16px;
  color: var(--riv-muted);
  margin: 0;
}

@media (max-width: 767px) {
  .riv-subpage-section { padding: 48px 16px; }
  .riv-subpage-section__title { font-size: 28px; }
}

/* §40 — Attractions grid (3-col desktop, 2-col tablet, 1-col mobile) */
.riv-attractions-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.riv-attractions-filter__btn {
  padding: 10px 20px;
  font-family: var(--riv-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--riv-line);
  background: transparent;
  color: var(--riv-navy-dark);
  cursor: pointer;
  min-height: 44px;
  transition: all 0.2s;
  border-radius: 2px;
}
.riv-attractions-filter__btn:hover { border-color: var(--riv-beige); color: var(--riv-beige); }
.riv-attractions-filter__btn.is-active {
  background: var(--riv-navy-dark);
  color: #FFFFFF;
  border-color: var(--riv-navy-dark);
}
.riv-attractions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.riv-attractions-card {
  background: #FFFFFF;
  border: 1px solid var(--riv-line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.riv-attractions-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(58, 44, 30, 0.12); }
.riv-attractions-card__media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--riv-navy) 0%, var(--riv-beige) 100%);
  position: relative;
  overflow: hidden;
}
.riv-attractions-card__media::before {
  content: 'IGIELNA';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--riv-font-heading);
  font-size: 28px;
  letter-spacing: 0.2em;
}
.riv-attractions-card__body { padding: 24px; }
.riv-attractions-card__name {
  font-family: var(--riv-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  margin: 0 0 12px;
}
.riv-attractions-card__desc {
  font-family: var(--riv-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--riv-muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.riv-attractions-card__cta {
  font-family: var(--riv-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--riv-navy-dark);
  border-bottom: 1px solid var(--riv-beige);
  padding-bottom: 4px;
  display: inline-block;
}

@media (max-width: 991px) {
  .riv-attractions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .riv-attractions-grid { grid-template-columns: 1fr; }
}

/* §40b — Igielna Prestige content (2026-05-28): intro paragraph, meta line,
   equal-height cards (flex), full descriptions (no line-clamp),
   background-image per attraction (klasy modifier bo inline style="" wycinany przez sanitizer body_top).
*/
.riv-subpage-section__intro {
  max-width: 720px;
  margin: 16px auto 0;
  font-family: var(--riv-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--riv-muted);
}

.riv-attractions-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.riv-attractions-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.riv-attractions-card__desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.riv-attractions-card__meta {
  font-family: var(--riv-font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--riv-beige);
  font-weight: 500;
  margin: 0 0 12px;
}

.riv-attractions-card__media--rynek,
.riv-attractions-card__media--ostrow,
.riv-attractions-card__media--bulwary,
.riv-attractions-card__media--hydropolis,
.riv-attractions-card__media--kolejkowo,
.riv-attractions-card__media--fontanna,
.riv-attractions-card__media--krasnale,
.riv-attractions-card__media--panorama,
.riv-attractions-card__media--zoo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.riv-attractions-card__media--ostrow { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/10.jpg'); }
.riv-attractions-card__media--bulwary { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/8.jpg'); }
.riv-attractions-card__media--hydropolis { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/11.jpg'); }
.riv-attractions-card__media--kolejkowo { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/12.jpg'); }
.riv-attractions-card__media--fontanna { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/7.jpg'); }
.riv-attractions-card__media--krasnale { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/9.jpg'); }
.riv-attractions-card__media--zoo { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/13.jpg'); }
.riv-attractions-card__media--rynek { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/15.jpg'), linear-gradient(135deg, #3A2C1E 0%, #8A7158 100%); }
.riv-attractions-card__media--panorama { background-image: url('https://client58463.idobooking.com/images/frontpageGallery/pictures/large/0/0/14.jpg'), linear-gradient(135deg, #3A2C1E 0%, #8A7158 100%); }

/* Ukryj 'IGIELNA' watermark dla kart które mają background-image (zachowaj tylko dla --rynek i --panorama bez zdjęcia) */
.riv-attractions-card__media--ostrow::before,
.riv-attractions-card__media--bulwary::before,
.riv-attractions-card__media--hydropolis::before,
.riv-attractions-card__media--kolejkowo::before,
.riv-attractions-card__media--fontanna::before,
.riv-attractions-card__media--krasnale::before,
.riv-attractions-card__media--zoo::before,
.riv-attractions-card__media--rynek::before,
.riv-attractions-card__media--panorama::before {
  content: none;
}

/* §40c — Hide systemowy widget .gallery-lightbox na podstronach CMS gdzie mamy własny content.
   IdoBooking default13 auto-renderuje frontpageGallery zdjęcia jako .gallery-lightbox.row pod naszym body_top → duplikat tych samych zdjęć których używamy w kartach atrakcji (background-image z frontpageGallery URLs).
   Scope przez :has(.riv-subpage-section) celuje TYLKO w podstrony z naszym customowym content (Atrakcje/Galeria/Restauracja/Kontakt), zachowuje galerię gdzie indziej jeśli klient ma. */
body.page-txt main#pageContent > .container:has(.riv-subpage-section) > .gallery-lightbox,
body.page-txt main#pageContent > .container:has(.riv-subpage-section) .gallery-lightbox {
  display: none !important;
}

/* §41 — Gallery grid masonry-like */
.riv-gallery-filter { /* reuse riv-attractions-filter */ }
.riv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.riv-gallery-item {
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: linear-gradient(135deg, var(--riv-navy) 0%, var(--riv-beige) 100%);
}
.riv-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.riv-gallery-item:hover img { transform: scale(1.08); }
.riv-gallery-item:nth-child(5n+1) { aspect-ratio: 1/1.4; grid-row: span 2; }

@media (max-width: 991px) {
  .riv-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .riv-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .riv-gallery-item:nth-child(5n+1) { aspect-ratio: 1/1; grid-row: auto; }
}

/* §42 — Contact split (info + form) */
.riv-contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.riv-contact-info { font-family: var(--riv-font-body); }
.riv-contact-info__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--riv-line);
}
.riv-contact-info__row:last-child { border-bottom: none; }
.riv-contact-info__icon {
  width: 24px;
  height: 24px;
  color: var(--riv-beige);
  flex-shrink: 0;
}
.riv-contact-info__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--riv-muted);
  display: block;
  margin-bottom: 4px;
}
.riv-contact-info__value {
  font-size: 16px;
  color: var(--riv-navy-dark);
  font-weight: 400;
}
.riv-contact-info__value a { color: var(--riv-navy-dark) !important; }
.riv-contact-info__value a:hover { color: var(--riv-beige) !important; }

.riv-contact-form {
  background: #FAF8F4;
  padding: 40px;
  border-radius: 4px;
}
.riv-contact-form__title {
  font-family: var(--riv-font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  margin: 0 0 24px;
}
.riv-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.riv-contact-form__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--riv-muted);
}
.riv-contact-form__input,
.riv-contact-form__textarea {
  font-family: var(--riv-font-body);
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--riv-line);
  background: #FFFFFF;
  color: var(--riv-navy-dark);
  min-height: 44px;
  border-radius: 2px;
}
.riv-contact-form__textarea { min-height: 120px; resize: vertical; }
.riv-contact-form__input:focus,
.riv-contact-form__textarea:focus {
  outline: 2px solid var(--riv-beige);
  outline-offset: 0;
  border-color: var(--riv-beige);
}
.riv-contact-form__required {
  font-size: 12px;
  color: var(--riv-muted);
  margin-bottom: 16px;
  display: block;
}
.riv-contact-form__submit {
  background: var(--riv-navy-dark);
  color: #FFFFFF;
  border: none;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.2s;
  border-radius: 2px;
}
.riv-contact-form__submit:hover { background: var(--riv-navy); }

@media (max-width: 767px) {
  .riv-contact-split { grid-template-columns: 1fr; gap: 32px; }
  .riv-contact-form { padding: 24px; }
}

/* §43 — Restaurant feature (large card with brand mark) */
.riv-restaurant-feature {
  background: linear-gradient(135deg, var(--riv-navy-dark) 0%, var(--riv-navy) 100%);
  color: #FFFFFF;
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.riv-restaurant-feature__eyebrow {
  font-family: var(--riv-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--riv-beige);
  margin: 0 0 16px;
}
.riv-restaurant-feature__name {
  font-family: var(--riv-font-heading);
  font-size: 48px;
  font-style: italic;
  font-weight: 400;
  color: #FFFFFF !important;
  margin: 0 0 24px;
}
.riv-restaurant-feature__desc {
  font-family: var(--riv-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  max-width: 700px;
  margin: 0 auto 32px;
}
.riv-restaurant-feature__promo {
  background: rgba(184, 146, 78, 0.15);
  border-left: 3px solid var(--riv-beige);
  padding: 24px 32px;
  max-width: 720px;
  margin: 32px auto;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  color: rgba(255, 255, 255, 0.92);
}
.riv-restaurant-feature__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.riv-restaurant-feature__btn {
  background: var(--riv-beige);
  color: var(--riv-navy-dark) !important;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--riv-beige);
  display: inline-block;
  min-height: 48px;
  transition: all 0.2s;
}
.riv-restaurant-feature__btn:hover { background: var(--riv-gold); border-color: var(--riv-gold); color: #FFFFFF !important; }
.riv-restaurant-feature__btn--outline {
  background: transparent;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4);
}
.riv-restaurant-feature__btn--outline:hover { background: rgba(255, 255, 255, 0.1); color: #FFFFFF !important; }

@media (max-width: 767px) {
  .riv-restaurant-feature { padding: 56px 24px; }
  .riv-restaurant-feature__name { font-size: 36px; }
  .riv-restaurant-feature__desc { font-size: 15px; }
}

/* §44 — Voucher cards (smaller variant for /oferty page) */
.riv-voucher-card {
  background: #FAF8F4;
  padding: 32px 24px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--riv-line);
  transition: all 0.2s;
}
.riv-voucher-card:hover { background: rgba(184, 146, 78, 0.1); }
.riv-voucher-card__amount {
  font-family: var(--riv-font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  margin: 0 0 8px;
}
.riv-voucher-card__label {
  font-family: var(--riv-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--riv-muted);
  margin: 0 0 16px;
}
.riv-voucher-card__cta {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--riv-navy-dark);
  border-bottom: 1px solid var(--riv-beige);
  padding-bottom: 2px;
}

/* ============================================================
   §45 — v2.1 ARCHITECTURE FIX (TRAP CRITICAL-Q + II)
   Override §37 (white bg na .section.fp-auto-height = wrong because Bootstrap
   pb-5 padding creates 30px+ white strip nad footer).
   Architecture: transparent wrapper + body bg navy + per-section bgs.
   ============================================================ */

html, body, body.page-index {
  background-color: #241A11 !important;
}

body.page-index .section.fp-auto-height,
body.page-index .section.fp-auto-height.pb-5,
body.page-index .section.fp-auto-height > .fp-tableCell,
body.page-index .section.fp-section.fp-auto-height {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-index .ido-split,
body.page-index .ido-split-reverse,
body.page-index .ido-cards,
body.page-index .riv-apartments-section {
  background: #FFFFFF !important;
}
body.page-index .riv-amenities { background: #FAF8F4 !important; }
body.page-index .ido-testimonials { background: rgba(184, 146, 78, 0.05) !important; }
body.page-index .ido-cta-dark {
  background: #241A11 !important;
  margin-bottom: 0 !important;
}

/* TRAP CRITICAL-II: catch-all defensive dla footer sub-containers (VISA/MC strip) */
body.page-index .footer-contact-baner,
body.page-index .footer-contact-add,
body.page-index .footer-contact-help,
body.page-index .footer__bottom,
body.page-index .footer__strip,
body.page-index .footer-payments,
body.page-index .footer .row,
body.page-index .footer .container,
body.page-index [class*="payment-row"]:not(input):not(button) {
  background: #241A11 !important;
  background-color: #241A11 !important;
}

/* §53 — Footer payment strip FULL-WIDTH breakout (TRAP CRITICAL-Q v2 z KNOWN-FIXES)
   .footer-contact-baner siedzi w .footer.container (1170px) — strip nie sięga
   krawędzi viewport, widać body bg po lewej i prawej. Fix: 100vw breakout. */
.footer-contact-baner,
.footer__strip,
.payments-bar,
.payment-methods,
.footer-bottom,
[class*="footer-baner"] {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  background: #241A11 !important;
  padding: 16px 20px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Payment icons inline SVG (NOT img) — subtle white tone */
.footer-contact-baner svg,
.footer__strip svg,
.payments-bar svg {
  height: 22px !important;
  width: auto !important;
  opacity: 0.6 !important;
  margin: 0 8px !important;
  vertical-align: middle;
}
.footer-contact-baner svg path,
.footer-contact-baner svg g,
.footer__strip svg path,
.footer__strip svg g {
  fill: rgba(255, 255, 255, 0.7) !important;
}

/* §54 — Oferty pobytu: większe karty + obrazy + większy odstęp od poprzedniej sekcji */
body.page-index .riv-offers-grid {
  padding-top: 80px !important;  /* WAS 0 — większy odstęp od amenities */
  margin-top: 24px !important;
  gap: 32px !important;
}
body.page-index .riv-offers-grid .riv-offer-card {
  min-height: 480px !important;
}
body.page-index .riv-offers-grid .riv-offer-card__media,
body.page-index .riv-offers-grid .riv-offer-card__media--gradient {
  aspect-ratio: 4/3 !important;
  min-height: 280px !important;
}
body.page-index .riv-offers-grid .riv-offer-card__body {
  padding: 28px 24px !important;
}
body.page-index .riv-offers-grid .riv-offer-card__name {
  font-size: 24px !important;
  margin-bottom: 12px !important;
}
body.page-index .riv-offers-grid .riv-offer-card__desc {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
body.page-index .riv-offers-grid .riv-offer-card__badge {
  font-size: 14px !important;
  padding: 8px 16px !important;
  top: 20px !important;
  left: 20px !important;
}

/* ============================================================
   §46 — SYSTEM PAGES (page-offer, page-offers, page-contact)
   Per JARVIS instinct 034: NIE TWORZYMY własnych CMS pages dla /oferty
   /kontakt — IdoBooking generuje automatycznie. TYLKO CSS overrides.
   Wzorzec z fairrentals (kompletny override system styles).
   ============================================================ */

/* Body font na system pages */
body.page-offers,
body.page-offer,
body.page-contact,
body.page-kontakt {
  font-size: 16px !important;
  line-height: 1.6 !important;
  background: #FFFFFF !important;
}

body.page-offers main,
body.page-offer main,
body.page-contact main,
body.page-kontakt main {
  background: #FFFFFF !important;
}

/* Headings */
body.page-offers h1, body.page-offers h2, body.page-offers h3,
body.page-offer h1, body.page-offer h2, body.page-offer h3,
body.page-contact h1, body.page-contact h2, body.page-contact h3,
body.page-kontakt h1, body.page-kontakt h2, body.page-kontakt h3 {
  font-family: var(--riv-font-heading) !important;
  color: var(--riv-navy-dark) !important;
  font-weight: 500;
}

/* TRAP CRITICAL-FF: /offer/N .offer-price (150x150 circle z białym text invisible) */
body.page-offer .offer-price {
  background: var(--riv-navy-dark) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  width: auto !important;
  height: auto !important;
  min-height: 80px !important;
  padding: 16px 24px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--riv-font-body) !important;
  box-shadow: 0 4px 16px rgba(58, 44, 30, 0.15) !important;
}
body.page-offer .offer-price small {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body.page-offer .offer-price span {
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  font-family: var(--riv-font-heading) !important;
}

/* /offer/N buttons (Rezerwacja online, Zobacz cennik, Sprawdź dostępność) */
body.page-offer .btn,
body.page-offer .book-now,
body.page-offer button.btn-primary,
body.page-offer a.btn-primary,
body.page-offer [class*="reservation-btn"]:not(form) {
  background: var(--riv-navy-dark) !important;
  background-color: var(--riv-navy-dark) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--riv-navy-dark) !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  font-family: var(--riv-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
  transition: background 0.2s !important;
}
body.page-offer .btn:hover,
body.page-offer .book-now:hover,
body.page-offer button.btn-primary:hover,
body.page-offer a.btn-primary:hover {
  background: var(--riv-navy) !important;
  background-color: var(--riv-navy) !important;
}

/* TRAP CRITICAL-EE: /offer/N tabs --fixed width 100vw */
body.page-offer .tabs.--fixed,
body.page-offer .tabs--fixed {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  margin-left: 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(58, 44, 30, 0.08) !important;
  border-bottom: 1px solid rgba(184, 146, 78, 0.2) !important;
}

/* /offer/N tab buttons (Opis / Udogodnienia / Mapa) */
body.page-offer .tabs .nav-link,
body.page-offer .tabs a {
  color: var(--riv-navy-dark) !important;
  font-family: var(--riv-font-body) !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  border-bottom: 2px solid transparent !important;
}
body.page-offer .tabs .nav-link.active,
body.page-offer .tabs a.active {
  color: var(--riv-beige) !important;
  border-bottom-color: var(--riv-beige) !important;
}

/* /offers listing cards (apartamenty grid) */
body.page-offers .offer,
body.page-offers .offer-card,
body.page-offers .offers-list .offer-card,
body.page-offers .offer-tile {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  border: 1px solid rgba(184, 146, 78, 0.2) !important;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
body.page-offers .offer:hover,
body.page-offers .offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(58, 44, 30, 0.1) !important;
}

body.page-offers .offer-name,
body.page-offers .offer-title,
body.page-offers .offer h3,
body.page-offers .offer-card h3 {
  font-family: var(--riv-font-heading) !important;
  color: var(--riv-navy-dark) !important;
  font-weight: 600;
}

/* TRAP CRITICAL-CC: /offers filters collapsed */
body.page-offers .filter_content.collapse:not(.show) {
  display: none !important;
}
body.page-offers .filter_content.collapse.show {
  display: block !important;
  height: auto !important;
}

/* /offers + /offer buttons + filter submit */
body.page-offers .btn,
body.page-offers #filters_submit,
body.page-offers button[type="submit"]:not(form#riv-contact-form button) {
  background: var(--riv-navy-dark) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--riv-navy-dark) !important;
  border-radius: 4px !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  font-family: var(--riv-font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.page-offers .btn:hover { background: var(--riv-navy) !important; }

/* /offers + /offer image fix */
body.page-offers img,
body.page-offer img {
  max-width: 100% !important;
}

/* /kontakt + /contact — system formularz */
body.page-contact form input,
body.page-contact form textarea,
body.page-kontakt form input,
body.page-kontakt form textarea {
  font-family: var(--riv-font-body) !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(184, 146, 78, 0.3) !important;
  background: #FFFFFF !important;
  color: var(--riv-navy-dark) !important;
  min-height: 44px !important;
  border-radius: 4px !important;
}
body.page-contact form input:focus,
body.page-contact form textarea:focus {
  outline: 2px solid var(--riv-beige) !important;
  outline-offset: 0 !important;
  border-color: var(--riv-beige) !important;
}

/* ============================================================
   §47 — Smooth scroll (TRAP: user musi 2× scrollować w dół)
   ============================================================ */
html {
  scroll-behavior: smooth !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   §48 — Subpages full-width breakout (TRAP A dla CMS pages)
   .riv-subhero + .riv-subpage-section muszą rozciągać się na 100vw
   (CMS pages wrap content w .container max-width 1170px → breakout)
   ============================================================ */
.riv-subhero,
.riv-subpage-section,
.ig-benefits {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  box-sizing: border-box !important;
}

/* ============================================================
   §49 — Restauracja feature visibility fix (kontrasty + full-width)
   ============================================================ */
.riv-restaurant-feature {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, #241A11 0%, #3A2C1E 100%) !important;
  color: #FFFFFF !important;
}
.riv-restaurant-feature__name {
  color: #FFFFFF !important;
  font-style: italic !important;
}
.riv-restaurant-feature__desc {
  color: rgba(255, 255, 255, 0.92) !important;
}
.riv-restaurant-feature__btn {
  background: var(--riv-beige) !important;
  color: var(--riv-navy-dark) !important;
  border-color: var(--riv-beige) !important;
}
.riv-restaurant-feature__btn--outline {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================
   §50 — Subpage section text contrast (Atrakcje, Restauracja widoczność)
   ============================================================ */
.riv-subpage-section h2,
.riv-subpage-section h3,
.riv-subpage-section__title {
  color: var(--riv-navy-dark) !important;
}
.riv-subpage-section p,
.riv-subpage-section__subtitle {
  color: var(--riv-ink) !important;
}
.riv-attractions-card__name { color: var(--riv-navy-dark) !important; }
.riv-attractions-card__desc { color: var(--riv-muted) !important; }
.riv-subpage-section { color: var(--riv-ink) !important; }

/* ============================================================
   §51 — v2.3 EMERGENCY HERO FIX (parallax-slider z-index -2 by system)
   PHASE 4.5: My §45 ustawienie body bg navy zabiło parallax-slider który
   ma system default z-index: -2 (pod body bg). Fix: force parallax-slider
   z-index 1 (above body bg navy) + position absolute (in section.parallax).
   Plus hide system .index-info content (H1 "Wynajem Apartamentów..." H2 IdoBooking).
   ============================================================ */

body.page-index .parallax-slider {
  position: absolute !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

body.page-index .parallax-slider img,
body.page-index .parallax-slider .slick-slide img,
body.page-index .parallax-slider .slick-list img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.page-index .section.parallax {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

body.page-index .section.parallax > .fp-tableCell {
  position: relative !important;
  z-index: 4 !important;
  min-height: 100vh !important;
}

body.page-index .section.parallax > .fp-tableCell::before {
  z-index: 3 !important;
  background: linear-gradient(rgba(36, 26, 17, 0.12) 0%, rgba(36, 26, 17, 0.28) 60%, rgba(36, 26, 17, 0.42) 100%) !important;
}

/* Hero content + search ABOVE parallax + gradient */
body.page-index .riv-hero,
body.page-index .section.parallax .riv-hero {
  z-index: 5 !important;
  position: relative !important;
}
body.page-index .riv-hero__content { z-index: 6 !important; }
body.page-index .riv-search { z-index: 7 !important; }

/* Hide system .index-info content (kolizja z naszym hero) */
body.page-index .index-info > h1,
body.page-index .index-info > h2,
body.page-index .index-info > .iai-search,
body.page-index .index-info > #iai_book_form,
body.page-index .index-info > div:not(.riv-hero):not(.riv-hero__content):not(.riv-search),
body.page-index .index-info > button,
body.page-index .index-info > .navbar-reservation {
  display: none !important;
}

/* ============================================================
   §52 — v2.4 RADICAL FIX: hide section.parallax + hero in body_top
   z own bg image. Smooth scroll natural (fullpage section snap WYŁĄCZONY).
   User feedback: "nie ma wyszukiwarki, muszę 2x scrollować".
   Root cause: section.parallax zajmowała 100vh przed hero (user widział pustkę),
   plus fullpage.js intercepted scroll (section snap zamiast smooth).
   ============================================================ */

/* Section.parallax visible (z parallax-slider system image jako hero bg) — teleport hero JS w body_bottom puts riv-hero into .section.parallax .fp-tableCell.
   v2.7: NIE hide (poprzednio: hero hidden razem z parent).
   Parallax-slider z §51 z-index 1 + hero content z-index 5 + gradient overlay z-index 3. */
body.page-index .section.parallax {
  display: block !important;
  height: 100vh !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Disable fullpage scroll snap — normal continuous scroll
   :not(.parallax) żeby NIE override hide rule na section.parallax */
body.page-index .fullpage-wrapper {
  transform: none !important;
  height: auto !important;
}
body.page-index .fp-section:not(.parallax),
body.page-index .fp-section.fp-table:not(.parallax) {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}
body.page-index .fp-tableCell {
  height: auto !important;
  display: block !important;
}

/* Hero w section.parallax (po teleport JS) — overlay nad parallax-slider system image.
   v2.7: NIE używamy own bg image. Parallax-slider już daje system hero image
   (z-index 1 z §51). Hero z gradient overlay (z-index 3) + content (z-index 5). */
body.page-index .section.parallax .riv-hero,
body.page-index .riv-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 120px 24px 80px !important;
  transform: none !important;
}

/* v3.0: SINGLE scroll container fix — APPLY TO ALL pages, nie tylko page-index */
html, body, html.fp-enabled {
  height: auto !important;
}
html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body,
body.page-index,
body.page-offers,
body.page-offer,
body.page-txt,
body.page-contact,
body.page-kontakt {
  overflow: visible !important;
  overflow-y: visible !important;
}
.fullpage-wrapper {
  height: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* §55 — /offers sidebar hide (per Apartamenty Parkowe pattern — same obiekty, no filters) */
body.page-offers aside,
body.page-offers .aside,
body.page-offers .col-12.col-md-3,
body.page-offers .col-12.col-lg-3,
body.page-offers aside.col-md-3,
body.page-offers aside.col-lg-3,
body.page-offers .filter_items,
body.page-offers .filter_header,
body.page-offers .filter_content {
  display: none !important;
}

/* Expand main content to full width when sidebar hidden */
body.page-offers .col-12.col-md-9,
body.page-offers .col-12.col-lg-9,
body.page-offers .col-md-9,
body.page-offers .col-lg-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* §55b — System pages content offset (fixed header 128px) */
body.page-offers main,
body.page-offer main,
body.page-txt main,
body.page-contact main,
body.page-kontakt main {
  padding-top: 150px !important;
}
/* If main has padding, ensure inner row doesn't add more */
body.page-offers main > .container > .row,
body.page-offer main > .container > .row,
body.page-txt main > .container > .row {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* §56 — Restauracja paragraf widoczność (page-txt + .riv-restaurant-feature) */
body.page-txt .riv-restaurant-feature,
body.page-txt .riv-restaurant-feature * {
  color: #FFFFFF !important;
}
body.page-txt .riv-restaurant-feature .riv-restaurant-feature__name {
  color: #FFFFFF !important;
}
body.page-txt .riv-restaurant-feature .riv-restaurant-feature__eyebrow {
  color: var(--riv-beige) !important;
}
body.page-txt .riv-restaurant-feature p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* All paragraphs on page-txt with white bg parent — readable dark color */
body.page-txt .riv-subpage-section p,
body.page-txt .riv-subpage-section h2,
body.page-txt .riv-subpage-section h3 {
  color: var(--riv-navy-dark) !important;
}
body.page-txt .riv-subpage-section .riv-subpage-section__subtitle {
  color: var(--riv-muted) !important;
}

body.page-index .riv-hero__content {
  position: relative;
  z-index: 6;
  max-width: 900px;
  text-align: center;
  color: #FFFFFF;
}

body.page-index .riv-search {
  position: relative !important;
  z-index: 7 !important;
  margin: 40px auto 0 !important;
  max-width: 900px !important;
}

/* ============================================================
   §57 — page-txt SUBHERO CONTRAST FIX (v3.2)
   Root cause: global h1,h2,h3 { color: var(--riv-navy-dark) !important }
   wygrywa specificity (rule order + równa important) ze starszymi rules.
   Plus system renderuje duplikat <h1 class="big-label"> z "Podpis" pola SEO.
   Plus pre-existing bug: 92 escape'owanych "\!important" w L3-08 nie działały
   (this commit fixes both).
   ============================================================ */

/* §57a — Kill system duplicate H1.big-label (page-txt)
   System rendruje H1 z "Podpis" pola SEO, jest duplikatem naszego subhero title */
body.page-txt h1.big-label,
body.page-txt main h1.big-label,
body.page-txt main > .container > h1.big-label {
  display: none !important;
}

/* §57b — Force WHITE on subhero title even when global h1 rule has !important
   Specificity 0,3,2 (body.page-txt + .riv-subhero + .riv-subhero__content + h1.riv-subhero__title)
   beats global h1 { color: !important } which is 0,0,1 */
body.page-txt .riv-subhero h1.riv-subhero__title,
body.page-txt .riv-subhero .riv-subhero__content h1.riv-subhero__title,
body.page-txt section.riv-subhero h1.riv-subhero__title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
}

/* §57c — Subhero breadcrumb visibility on dark gradient bg */
body.page-txt .riv-subhero .riv-subhero__breadcrumb,
body.page-txt .riv-subhero .riv-subhero__breadcrumb p,
body.page-txt section.riv-subhero p.riv-subhero__breadcrumb {
  color: rgba(255, 255, 255, 0.75) !important;
}
body.page-txt .riv-subhero .riv-subhero__breadcrumb a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
body.page-txt .riv-subhero .riv-subhero__breadcrumb a:hover {
  color: var(--riv-beige) !important;
  border-bottom-color: var(--riv-beige) !important;
}

/* §57d — Restaurant feature lead paragraph (dark navy bg = white text)
   .riv-restaurant-feature__desc — main lead text after H2 */
body.page-txt .riv-restaurant-feature p.riv-restaurant-feature__desc,
body.page-txt .riv-restaurant-feature .riv-restaurant-feature__desc,
body.page-txt .riv-restaurant-feature > p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* §57e — Defensive: any direct paragraph inside restaurant feature on page-txt
   that's not eyebrow / promo-box / cta — force readable white */
body.page-txt .riv-restaurant-feature p:not(.riv-restaurant-feature__eyebrow):not([class*="promo"]):not([class*="cta"]) {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* §57f — Heading H2 inside restaurant feature stays white (override global h2 navy rule) */
body.page-txt .riv-restaurant-feature h2.riv-restaurant-feature__name,
body.page-txt .riv-restaurant-feature .riv-restaurant-feature__name {
  color: #FFFFFF !important;
}

/* §57g — Eyebrow above H2 stays beige */
body.page-txt .riv-restaurant-feature .riv-restaurant-feature__eyebrow {
  color: var(--riv-beige) !important;
}

/* ============================================================
   §58 — OFFER PAGE CENTERING (v3.3)
   Root cause: system .offer-right-top / .room_rez / .directions
   parents have text-align:left by default. Children (price chip,
   "Zarezerwuj", "Zobacz na mapie", "Zobacz cennik") are inline-block
   or block with no margin auto, so they hug left edge of sidebar col.
   ============================================================ */
body.page-offer .offer-right-wrapper,
body.page-offer .offer-right-wrapper > .offer-right {
  text-align: center !important;
}
body.page-offer .offer-right.offer-right-top {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
body.page-offer .offer-right.offer-right-top .offer-price {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Zarezerwuj teraz" + "Zobacz cennik" container */
body.page-offer .room_rez {
  text-align: center !important;
}
body.page-offer .room_rez .accommodation-reservation {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 320px !important;
}
body.page-offer .room_rez .to-offer-prices {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* "Zobacz na mapie" container */
body.page-offer .directions,
body.page-offer .offer-right .directions {
  text-align: center !important;
}
body.page-offer .directions .btn,
body.page-offer .directions .btn-reverse,
body.page-offer .directions a[class*="btn"] {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block !important;
}

/* Payment info logos — also center for visual consistency */
body.page-offer .offer-right.payment-info {
  text-align: center !important;
}
body.page-offer .offer-right.payment-info img {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* §58b — Button text OPTICAL center compensation
   Root cause: letter-spacing 1.12px on uppercase trailing → tekst wygląda
   wizualnie przesunięty w lewo mimo że math gapL===gapR.
   Fix: text-indent = letter-spacing value (kompensuje trailing tracking). */
body.page-offer .btn,
body.page-offer .btn-reverse,
body.page-offer .accommodation-leftbutton,
body.page-offer .room_rez .accommodation-reservation,
body.page-offer .directions .btn,
body.page-offer .directions .btn-reverse,
body.page-offer .offer-prices .btn-reverse,
body.page-offer .offer-prices .btn {
  text-indent: 1.12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Cennik table — center reservation buttons w komórce */
body.page-offer .offer-prices .season-cell_rezerwacja,
body.page-offer .offer-prices td[class*="rezerw"],
body.page-offer .season-row .reservation,
body.page-offer .price-list .accommodation-reservation,
body.page-offer .season-single-row a[href*="book-now"],
body.page-offer .season-cell_rezerwacja * {
  text-align: center !important;
}
body.page-offer .price-list a[class*="reserv"],
body.page-offer .offer-prices a {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   §59 — LITEPICKER CALENDAR UX (v3.3)
   Problem: dostępne daty mają słaby kontrast vs niedostępne (line-through gray)
   Mobile: 2-column split overflows 375px viewport → "kawałek białego pola"
   Fix: navy bold available, beige hover, strong locked contrast, single column mobile
   ============================================================ */
.litepicker {
  --litepicker-day-color: #241A11;
  --litepicker-day-color-hover: #241A11;
  --litepicker-is-end-color: #FFFFFF;
  --litepicker-is-end-color-bg: #241A11;
  --litepicker-is-start-color: #FFFFFF;
  --litepicker-is-start-color-bg: #241A11;
  --litepicker-is-in-range-color: #241A11;
  --litepicker-is-in-range-color-bg: rgba(184, 146, 78, 0.18);
  --litepicker-is-today-color: #C9B287;
  --litepicker-button-bg-color: #241A11;
  --litepicker-button-color: #FFFFFF;
  --litepicker-day-color-locked: #BFC4CC;
}
.litepicker .container__days .day-item {
  font-weight: 600 !important;
  color: #241A11 !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.litepicker .container__days .day-item:not(.is-locked):not(.is-start-date):not(.is-end-date):hover {
  background: rgba(184, 146, 78, 0.22) !important;
  color: #241A11 !important;
}
.litepicker .container__days .day-item.is-locked {
  color: #C5C5C5 !important;
  font-weight: 400 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  background: transparent !important;
  pointer-events: none !important;
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background: #241A11 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.litepicker .container__days .day-item.is-in-range {
  background: rgba(184, 146, 78, 0.18) !important;
  color: #241A11 !important;
}
.litepicker .container__days .day-item.is-today {
  background: rgba(184, 146, 78, 0.08) !important;
  color: #C9B287 !important;
  font-weight: 700 !important;
  outline: 1px solid rgba(184, 146, 78, 0.4);
  outline-offset: -2px;
}

/* Header months — navy text */
.litepicker .month-item-name,
.litepicker .month-item-year {
  color: #241A11 !important;
  font-weight: 600 !important;
}
.litepicker .container__days .day-item.day-name,
.litepicker .month-item-weekdays-row > div {
  color: #6B6B6B !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

/* Mobile single column calendar (no white overflow) */
@media (max-width: 767px) {
  .litepicker {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
  .litepicker .container__months {
    width: 100% !important;
    display: block !important;
  }
  .litepicker .container__months.columns-2 .month-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Hide second month on mobile to fit single viewport */
  .litepicker .container__months.columns-2 .month-item:nth-child(2) {
    display: none !important;
  }
  /* Show next-month button always on mobile (since 2nd hidden) */
  .litepicker .month-item-header .button-next-month {
    visibility: visible !important;
    display: inline-block !important;
  }
}

/* ============================================================
   §60 — MOBILE HEADER TRANSPARENT OVERLAY (v3.3)
   Mobile (≤991px) header shows white bg above hero — desktop is OK (transparent).
   Force transparent + absolute positioning so hero sits behind nav.
   ============================================================ */
@media (max-width: 991px) {
  /* #1 (2026-06-11) — mobilne menu ZAWSZE na kremowym tle (czytelnosc).
     Wczesniej menu-wrapper byl transparent -> otwarte menu wisialo nieczytelnie nad hero. */
  body.page-index header.default13 .menu-wrapper,
  body.page-index header.default13:not(.ap-header--scrolled) .menu-wrapper,
  body.page-index header.default13.ap-header--scrolled .menu-wrapper {
    background: var(--riv-bg) !important;
    background-color: var(--riv-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 18px rgba(36, 26, 17, 0.08) !important;
  }
  body.page-index header.default13 .menu-wrapper .nav-link,
  body.page-index header.default13 .menu-wrapper a:not(.btn),
  body.page-index header.default13 .riv-logo,
  body.page-index header.default13 .navbar-toggler,
  body.page-index header.default13 .navbar-toggler * {
    color: var(--riv-navy-dark) !important;
  }
  body.page-index header.default13 .menu-wrapper .navbar-reservation {
    background: var(--riv-gold) !important;
    border-color: var(--riv-gold) !important;
    color: var(--riv-navy-dark) !important;
  }
}

/* ============================================================
   §61 — GALLERY PAGE — riv-gallery-photos grid (v3.3 — auto from /offers)
   8 photos from /offers (cover per object). Responsive grid.
   ============================================================ */
.riv-gallery-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 32px auto 48px;
  max-width: 1280px;
  padding: 0 16px;
}
.riv-gallery-photos__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--riv-cream, #F5F2EA);
  aspect-ratio: 4 / 3;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.riv-gallery-photos__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(58, 44, 30, 0.18);
}
.riv-gallery-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.riv-gallery-photos__item:hover img {
  transform: scale(1.04);
}
.riv-gallery-photos__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(58, 44, 30, 0.85), transparent);
  color: #FFFFFF;
  font-family: var(--riv-font-heading, serif);
  font-size: 16px;
  font-weight: 500;
}
.riv-gallery-photos__skeleton {
  background: linear-gradient(90deg, #E8E8E8 0%, #F0F0F0 50%, #E8E8E8 100%);
  background-size: 200% 100%;
  animation: rivShimmer 1.4s ease-in-out infinite;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}
@keyframes rivShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (max-width: 767px) {
  .riv-gallery-photos {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px;
  }
  .riv-gallery-photos__caption {
    font-size: 13px;
    padding: 10px 12px;
  }
}
/* ============================================================
   §16 — Featured Offers (MADERA pattern: hide system carousel, build custom cards)
   ============================================================ */

/* Hide system slick carousel completely */
.container-hotspot,
.cmshotspot { display: none !important; }

/* Grid for offers and apartments */
.riv-offers-grid,
.riv-apartments-grid {
  display: grid;
  gap: 24px;
  padding: 0 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.riv-offers-grid { grid-template-columns: repeat(3, 1fr); }
.riv-apartments-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991px) {
  .riv-offers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .riv-offers-grid,
  .riv-apartments-grid { grid-template-columns: 1fr; padding: 0 16px; }
}

/* Card */
.riv-offer-card {
  background: var(--riv-bg);
  border: 1px solid var(--riv-line);
  border-radius: var(--riv-radius-md);
  overflow: hidden;
  transition: transform var(--riv-transition), box-shadow var(--riv-transition);
  display: flex;
  flex-direction: column;
}
.riv-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--riv-shadow-card);
}

.riv-offer-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  display: block;
}
.riv-offer-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.riv-offer-card:hover .riv-offer-card__img { transform: scale(1.05); }

.riv-offer-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--riv-navy-dark);
  color: #FFFFFF;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 2;
}

.riv-offer-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.riv-offer-card__name {
  font-family: var(--riv-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--riv-navy-dark);
  margin: 0 0 8px;
  line-height: 1.3;
}

.riv-offer-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--riv-muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.riv-offer-card__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--riv-navy);
}
.riv-offer-card__meta li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.riv-offer-card__meta svg {
  width: 16px;
  height: 16px;
  stroke: var(--riv-beige);
  fill: none;
  stroke-width: 1.5;
}

.riv-offer-card__cta {
  margin-top: auto;
  display: inline-block;
  padding: 10px 0;
  color: var(--riv-navy-dark);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--riv-beige);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
  min-height: 44px;
}
.riv-offer-card__cta:hover { color: var(--riv-beige); }

/* ============================================================
   §IG-PHASE3 — Igielna Prestige: hero life, popups, counters,
   footer redesign, scroll reveals (2026-06-09)
   ============================================================ */

/* §P3-1 — HERO: stałe zdjęcie wnętrza + Ken Burns slow-zoom
   (systemowy slider miał PUSTY background-image) */
body.page-index .parallax-slider,
body.page-index #parallax_topslider {
  background-image: url("https://client58463.idobooking.com/images/objects/pictures/large/0/1/191.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform-origin: center center;
  animation: igKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes igKenBurns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  body.page-index .parallax-slider, body.page-index #parallax_topslider { animation: none !important; transform: none !important; }
}

/* §P3-2 — TESTIMONIALS: ciemna elegancka sekcja, jasny nagłówek (fix dark-on-dark) */
.ido-testimonials { background: var(--riv-navy-dark) !important; }
.ido-testimonials__title { color: #FAF6EE !important; }
.ido-testimonials__source { color: var(--riv-gold) !important; }
.ido-testimonials__item { background: #FAF6EE; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.ido-testimonials__quote { color: var(--riv-ink); }
.ido-testimonials__author { color: var(--riv-navy-dark); }

/* §P3-3 — POPUP modal (wspólny: oferty pobytu + apartamenty) */
.ig-pop-overlay { position: fixed; inset: 0; background: rgba(36,26,17,0.72); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 9999; }
.ig-pop-overlay.is-open { opacity: 1; visibility: visible; }
.ig-pop-dialog { background: var(--riv-bg); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.4); transform: translateY(20px) scale(.98); transition: transform .35s cubic-bezier(.16,1,.3,1); position: relative; }
.ig-pop-overlay.is-open .ig-pop-dialog { transform: translateY(0) scale(1); }
.ig-pop-dialog img { width: 100%; height: 260px; object-fit: cover; display: block; }
.ig-pop-body { padding: 32px 36px 36px; }
.ig-pop-body h2, .ig-pop-body h3 { font-family: var(--riv-font-heading); color: var(--riv-navy-dark) !important; margin: 0 0 12px; }
.ig-pop-body p { color: var(--riv-ink); line-height: 1.7; margin: 0 0 14px; }
.ig-pop-facts { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.ig-pop-facts li { font-size: 14px; color: var(--riv-muted); border-bottom: 1px solid var(--riv-line); padding: 6px 0; }
.ig-pop-facts strong { color: var(--riv-navy-dark); font-weight: 600; }
.ig-pop-cta { display: inline-block; background: var(--riv-navy-dark); color: #fff !important; padding: 14px 32px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--riv-navy-dark); transition: all .3s; margin-top: 6px; }
.ig-pop-cta:hover { background: var(--riv-gold); border-color: var(--riv-gold); }
.ig-pop-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); border: none; cursor: pointer; font-size: 22px; line-height: 40px; color: var(--riv-navy-dark); z-index: 2; }
.ig-pop-close:hover { background: #fff; }
.ig-pop-detail { display: none; }
@media (max-width: 600px){ .ig-pop-dialog { max-height: 92vh; } .ig-pop-facts { grid-template-columns: 1fr; } .ig-pop-body { padding: 24px; } .ig-pop-dialog img { height: 200px; } }

/* clickable offer cards affordance */
.riv-offer-card.is-clickable { cursor: pointer; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.riv-offer-card.is-clickable:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(36,26,17,.16); }
.riv-offer-card__more { display: inline-block; margin-top: 12px; color: var(--riv-gold); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* §P3-4 — STATS COUNTERS */
.ig-stats { background: var(--riv-bg); padding: 72px 40px; }
.ig-stats__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center; }
.ig-stat { position: relative; }
.ig-stat__num { font-family: var(--riv-font-heading); font-size: 52px; line-height: 1; color: var(--riv-gold); font-weight: 600; }
.ig-stat__num .ig-suffix { font-size: 26px; }
.ig-stat__label { margin-top: 10px; font-size: 13px; letter-spacing: .06em; color: var(--riv-muted); text-transform: uppercase; }
.ig-stat:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 12%; height: 76%; width: 1px; background: var(--riv-line); }
@media (max-width: 767px){ .ig-stats__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .ig-stat::after { display: none !important; } .ig-stat__num { font-size: 42px; } }

/* §P3-5 — SCROLL REVEAL (gated na html.ig-js → bez JS sekcje są widoczne, zero ryzyka) */
.ig-reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.ig-js .ig-reveal { opacity: 0; transform: translateY(28px); }
html.ig-js .ig-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ html.ig-js .ig-reveal { opacity: 1 !important; transform: none !important; } }

/* §P3-6 — SCROLL PROGRESS BAR (gold) */
.ig-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--riv-gold), var(--riv-beige)); z-index: 10000; transition: width .1s linear; }

/* §P3-7 — FOOTER redesign (system footer restyle: złoty akcent, wyrównanie, hover) */
footer { position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--riv-gold); }
footer h2, footer h3, footer .footer__title { color: var(--riv-gold) !important; letter-spacing: .04em; }
footer a:hover { color: var(--riv-gold) !important; }
footer ul.footer__contact { justify-content: center !important; flex-wrap: wrap; margin: 0 auto !important; }

/* §P3-8 — PREMIUM APARTMENTS showcase (podstrona Apartamenty) */
.ig-apts { max-width: 1280px; margin: 0 auto; padding: 56px 40px 72px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.riv-apt-card { background: var(--riv-bg); border: 1px solid var(--riv-line); border-radius: 6px; overflow: hidden; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; display: flex; flex-direction: column; cursor: pointer; }
.riv-apt-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(36,26,17,.18); }
.riv-apt-card__media { position: relative; height: 280px; overflow: hidden; }
.riv-apt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease-out; }
.riv-apt-card:hover .riv-apt-card__media img { transform: scale(1.08); }
.riv-apt-card__badge { position: absolute; top: 16px; left: 16px; background: var(--riv-navy-dark); color: #fff; padding: 8px 14px; font-size: 13px; letter-spacing: .04em; }
.riv-apt-card__body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.riv-apt-card__name { font-family: var(--riv-font-heading); font-size: 24px; color: var(--riv-navy-dark) !important; margin: 0 0 8px; }
.riv-apt-card__meta { color: var(--riv-gold); font-size: 14px; letter-spacing: .04em; margin: 0 0 14px; }
.riv-apt-card__desc { color: var(--riv-ink); line-height: 1.65; font-size: 15px; flex: 1; }
.riv-apt-card__actions { margin-top: 20px; display: flex; gap: 12px; align-items: center; }
.riv-apt-card__more { color: var(--riv-navy-dark); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--riv-gold); padding-bottom: 3px; }
.riv-apt-card__book { margin-left: auto; background: var(--riv-gold); color: var(--riv-navy-dark) !important; padding: 10px 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; transition: all .3s; }
.riv-apt-card__book:hover { background: var(--riv-navy-dark); color: #fff !important; }
@media (max-width: 767px){ .ig-apts { grid-template-columns: 1fr; padding: 36px 16px 48px; gap: 24px; } .riv-apt-card__media { height: 220px; } }

/* §P3-9 — Offer card actions + benefits strip (podstrona Oferty, wzór Profitroom) */
.riv-offer-card__actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.riv-offer-card__actions .ig-more-btn { font-family: var(--riv-font-body); color: var(--riv-navy-dark); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border: none; border-bottom: 1px solid var(--riv-gold); background: none; padding: 0 0 3px; cursor: pointer; }
.riv-offer-card__actions .ig-book-btn { margin-left: auto; background: var(--riv-gold); color: var(--riv-navy-dark) !important; padding: 10px 22px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; transition: all .3s; }
.riv-offer-card__actions .ig-book-btn:hover { background: var(--riv-navy-dark); color: #fff !important; }
.ig-benefits { background: var(--riv-navy-dark); padding: 64px 40px; text-align: center; }
.ig-benefits__grid { max-width: 1000px; margin: 0 auto 36px; display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.ig-benefits__item { color: #FAF6EE; }
.ig-benefits__item svg { width: 38px; height: 38px; stroke: var(--riv-gold); fill: none; stroke-width: 1.5; margin-bottom: 14px; }
.ig-benefits__item h3 { color: #FAF6EE !important; font-family: var(--riv-font-heading); font-size: 19px; margin: 0 0 6px; }
.ig-benefits__item p { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; margin: 0; }
.ig-benefits__cta { display: inline-block; background: var(--riv-gold); color: var(--riv-navy-dark) !important; padding: 15px 40px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transition: all .3s; }
.ig-benefits__cta:hover { background: #FAF6EE; color: var(--riv-navy-dark) !important; }
@media (max-width: 767px){ .ig-benefits__grid { grid-template-columns: 1fr; gap: 28px; } }

/* §P3-10 — Header ZAWSZE czytelny (override transparent white-text) + cień na scroll */
header.default13 .menu-wrapper,
html.riv-header--transparent .menu-wrapper { background: var(--riv-bg) !important; transition: box-shadow .3s ease; }
header.default13 .menu-wrapper .nav-link,
header.default13 .menu-wrapper a:not(.btn),
html.riv-header--transparent .menu-wrapper .nav-link,
html.riv-header--transparent .menu-wrapper a:not(.btn),
html.riv-header--transparent .riv-logo { color: var(--riv-navy-dark) !important; }
header.ig-scrolled .menu-wrapper { box-shadow: 0 4px 22px rgba(36, 26, 17, .10); }

/* §P3-11 — Offer card hover (image zoom + lift — wyraźny affordance, karty klikalne) */
.riv-offer-card.is-clickable .riv-offer-card__media { overflow: hidden; }
.riv-offer-card.is-clickable .riv-offer-card__img { transition: transform 6s ease-out; }
.riv-offer-card.is-clickable:hover .riv-offer-card__img { transform: scale(1.06); }
.riv-offer-card.is-clickable:hover { box-shadow: 0 22px 50px rgba(36, 26, 17, .20) !important; }
.riv-offer-card.is-clickable:hover .riv-offer-card__more { letter-spacing: .1em; }

/* §P3-12 — Testimonials: więcej oddechu (było za blisko sąsiednich sekcji) */
.ido-testimonials { padding: 100px 40px !important; }
@media (max-width: 767px){ .ido-testimonials { padding: 64px 20px !important; } }

/* §P3-13 — Footer dopracowanie (auto-fill z panelu zachowany — tylko styl) */
footer { padding-top: 72px !important; }
footer ul.footer__contact li { line-height: 2; }

/* §P3-14 — Eyebrow, value cards (O nas), Lokalizacja section */
.ig-eyebrow { color: var(--riv-gold); font-family: var(--riv-font-body); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; }
.ig-values { max-width: 1200px; margin: 0 auto; padding: 8px 40px 64px; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.ig-value { text-align: center; padding: 34px 26px; background: var(--riv-bg); border: 1px solid var(--riv-line); border-radius: 6px; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.ig-value:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(36,26,17,.12); }
.ig-value svg { width: 40px; height: 40px; stroke: var(--riv-gold); fill: none; stroke-width: 1.5; margin-bottom: 16px; }
.ig-value h3 { font-family: var(--riv-font-heading); color: var(--riv-navy-dark) !important; font-size: 20px; margin: 0 0 10px; }
.ig-value p { color: var(--riv-ink); font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 991px){ .ig-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .ig-values { grid-template-columns: 1fr; padding: 8px 16px 40px; } }
.ig-location { background: #F3ECE0; padding: 80px 40px; }
.ig-location__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ig-location h2 { margin: 0 0 12px; }
.ig-location p { color: var(--riv-ink); line-height: 1.7; margin: 0; }
.ig-location__map { border-radius: 6px; overflow: hidden; min-height: 380px; box-shadow: 0 14px 40px rgba(36,26,17,.12); }
.ig-location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.ig-location__list { list-style: none; padding: 0; margin: 22px 0 0; }
.ig-location__list li { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--riv-line); color: var(--riv-ink); font-size: 16px; }
.ig-location__list li span { color: var(--riv-gold); font-weight: 600; font-size: 14px; letter-spacing: .03em; }
@media (max-width: 767px){ .ig-location { padding: 56px 16px; } .ig-location__inner { grid-template-columns: 1fr; gap: 32px; } .ig-location__map { min-height: 300px; order: 2; } }

/* §P3-15 — Audyt kontrastu/spacing v4 (2026-06-09) */
/* Podstrony /txt (O nas, Atrakcje, Galeria): JASNE tło — był espresso body → ciemny-na-ciemnym */
body.page-txt { background: var(--riv-bg) !important; }

/* Hero: mocniejszy text-shadow (biały tekst na jasnym zdjęciu był słabo widoczny) */
.riv-hero__eyebrow, .riv-hero__title, .riv-hero__subtitle,
.riv-hero.riv-hero--system-bg .riv-hero__title,
.riv-hero.riv-hero--system-bg .riv-hero__subtitle {
  text-shadow: 0 2px 26px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.55) !important;
}
/* Miękka poświata za blokiem tekstu hero — tekst czytelny, zdjęcie pozostaje jasne */
.riv-hero.riv-hero--system-bg .riv-hero__content {
  background: transparent !important;
  border-radius: 0;
  padding: 40px 52px !important;
}
@media (max-width: 600px){ .riv-hero.riv-hero--system-bg .riv-hero__content { padding: 28px 22px !important; } }

/* Separacja sekcji home (amenities/stats stykały się — oba kremowe) */
.riv-amenities { background: #FFFFFF !important; }
.ig-stats { border-top: 1px solid var(--riv-line); border-bottom: 1px solid var(--riv-line); }
.ig-location { border-top: 1px solid var(--riv-line); }

/* Opinie: hover na kartach (więcej życia) */
.ido-testimonials__item { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.ido-testimonials__item:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.24); }

/* Stopka: czytelny, wyśrodkowany redesign (system auto-fill ZACHOWANY) */
footer { padding: 72px 24px 44px !important; text-align: center; }
footer .footer.container, footer .footer__wrapper { max-width: 1100px; margin: 0 auto; }
footer ul.footer__contact { display: flex !important; flex-wrap: wrap; justify-content: center !important; align-items: center; gap: 12px 44px; margin: 24px auto 0 !important; padding: 0; list-style: none; }
footer ul.footer__contact li { line-height: 1.8; font-size: 15px; color: rgba(255,255,255,.82) !important; }
footer ul.footer__contact a { color: rgba(255,255,255,.82) !important; }
footer ul.footer__contact a:hover { color: var(--riv-gold) !important; }

/* §P3-16 — Atrakcje: klikalne karty + popup (wzór bhpstar/Krokus) */
.riv-attractions-card.is-clickable { cursor: pointer; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.riv-attractions-card.is-clickable:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(36, 26, 17, .16); }
.riv-attractions-card.is-clickable:hover .riv-offer-card__more { letter-spacing: .1em; }
.ig-pop-media { height: 190px; background-size: cover; background-position: center; }

/* §P3-17 — Galeria: hover-zoom + lightbox (klikalne zdjęcia) */
.riv-gallery-photos__item { position: relative; overflow: hidden; cursor: zoom-in; display: block; border-radius: 4px; }
.riv-gallery-photos__item img { transition: transform .6s cubic-bezier(.16,1,.3,1); display: block; width: 100%; }
.riv-gallery-photos__item:hover img { transform: scale(1.08); }
.ig-lightbox { position: fixed; inset: 0; background: rgba(36,26,17,.92); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 22px; z-index: 10001; padding: 32px; }
.ig-lightbox.is-open { display: flex; }
.ig-lightbox__img { max-width: 92vw; max-height: 78vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ig-lightbox__close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; font-size: 26px; cursor: pointer; color: var(--riv-navy-dark); }
.ig-lightbox__link { background: var(--riv-gold); color: var(--riv-navy-dark) !important; padding: 12px 30px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ig-lightbox__link:hover { background: #FAF6EE; }

/* §IG-POPUP-V2 (2026-06-11, v2 — zdjecie POZIOME na gorze (baner 3:2); split kadrowal landscape foto wasko) */
.ig-pop-dialog { max-width: 620px; }
.ig-pop-content { display: block; }
.ig-pop-content .ig-pop-media {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto !important;
  min-height: 0;
  background-size: cover;
  background-position: center;
}
.ig-pop-content img {
  width: 100% !important;
  aspect-ratio: 3 / 2;
  height: auto !important;
  object-fit: cover;
  display: block;
}
.ig-pop-content .ig-pop-body { padding: 30px 34px 32px; }
.ig-pop-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ig-pop-content .ig-pop-cta { margin-top: 0; }
.ig-pop-route { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--riv-navy-dark) !important; border: 1.5px solid var(--riv-gold); padding: 13px 24px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: all .3s; }
.ig-pop-route:hover { background: var(--riv-gold); }
.ig-pop-route svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 700px){
  .ig-pop-content .ig-pop-body { padding: 24px; }
  .ig-pop-actions { flex-direction: column; align-items: stretch; }
  .ig-pop-route, .ig-pop-content .ig-pop-cta { justify-content: center; text-align: center; }
}

/* §IG-GALLERY-V2 (2026-06-11) — sekcja "Wroclaw" (miasto) na ciemnym pasie */
.riv-gallery-city { background: var(--riv-navy-dark) !important; padding: 64px 0 72px !important; }
.riv-gallery-city .riv-subpage-section__header { padding: 0 40px; margin-bottom: 8px; }
.riv-gallery-city .ig-eyebrow { color: var(--riv-gold); }
.riv-gallery-city .riv-subpage-section__title { color: #FAF6EE !important; }
.riv-gallery-city .riv-subpage-section__intro { color: rgba(250,246,238,.72) !important; }
.riv-gallery-city .riv-gallery-photos { margin-bottom: 0; }
.riv-gallery-city .riv-gallery-photos__caption { font-size: 15px; }

/* ============================================================
   §FOOTER-IG — Custom premium footer (Koncept 1, panel-driven)  2026-06-10
   JS buildFooter() (body_bottom) RELOKUJE systemowe węzły do tego layoutu:
   .footer__contact (adres/tel/mail) -> Kontakt; ul.footer__social_media -> Brand
   (puste = nic); .footer-contact-baner (płatności) + .powered_by -> pasek dolny.
   Dane zostają z panelu (przeniesione węzły = auto-update przy zmianie w panelu).
   Reguły systemowe footer (TRAP#18/§G/§22/§53) ZOSTAJĄ jako fallback no-JS.
   ============================================================ */
footer { padding: 0 !important; background: var(--riv-navy-dark) !important; position: relative; }
footer::before { content: '' !important; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 88px; height: 3px; background: var(--riv-gold); z-index: 2; }
.ig-footer { max-width: 1280px; margin: 0 auto; padding: 0 40px; color: rgba(250,246,238,.82); font-family: var(--riv-font-body); }
.ig-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 40px; padding: 58px 0 38px; }
.ig-footer__h { font-family: var(--riv-font-heading); color: var(--riv-gold); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 18px; font-weight: 500; }
.ig-footer__logo { max-height: 54px; width: auto; margin: 0 0 18px; display: block; }
.ig-footer__brandname { font-family: var(--riv-font-heading); color: #FAF6EE; font-size: 24px; line-height: 1; margin: 0 0 14px; letter-spacing: .03em; }
.ig-footer__tagline { color: rgba(250,246,238,.62); font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 330px; }
.ig-footer ul.footer__social_media { display: flex; gap: 10px; list-style: none; padding: 0; margin: 6px 0 0; }
.ig-footer ul.footer__social_media a { width: 38px; height: 38px; border: 1px solid rgba(184,146,78,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--riv-gold) !important; transition: all .3s; }
.ig-footer ul.footer__social_media a:hover { background: var(--riv-gold); color: var(--riv-navy-dark) !important; }
.ig-footer ul.footer__social_media svg { width: 17px; height: 17px; }
.ig-footer__nav nav { display: flex; flex-direction: column; }
.ig-footer__nav a { color: rgba(250,246,238,.82) !important; font-size: 14.5px; line-height: 2.1; text-decoration: none; transition: color .25s, padding-left .25s; }
.ig-footer__nav a:hover { color: var(--riv-gold) !important; padding-left: 6px; }
.ig-footer__contact-list { list-style: none; padding: 0; margin: 0; }
.ig-footer__contact-list li { font-size: 14.5px; line-height: 1.65; margin: 0 0 11px; color: rgba(250,246,238,.82); }
.ig-footer__contact-list li span { color: rgba(250,246,238,.82) !important; }
.ig-footer__contact-list a { color: rgba(250,246,238,.82) !important; text-decoration: none; transition: color .25s; }
.ig-footer__contact-list a:hover { color: var(--riv-gold) !important; }
.ig-footer__cta-txt { color: rgba(250,246,238,.62); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.ig-footer__cta-btn { display: inline-block; background: var(--riv-gold); color: var(--riv-navy-dark) !important; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 13px 26px; border-radius: 2px; font-weight: 600; text-decoration: none; transition: all .3s; }
.ig-footer__cta-btn:hover { background: #FAF6EE; color: var(--riv-navy-dark) !important; }
.ig-footer__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 0 28px; border-top: 1px solid rgba(184,146,78,.28); }
.ig-footer__legal { color: rgba(250,246,238,.55); font-size: 12.5px; }
.ig-footer__legal a { color: rgba(250,246,238,.72) !important; text-decoration: none; }
.ig-footer__legal a:hover { color: var(--riv-gold) !important; }
.ig-footer__meta { display: flex; align-items: center; gap: 22px; }
.ig-footer__meta .footer-contact-baner { background: transparent !important; display: flex; align-items: center; gap: 12px; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; position: static !important; left: auto !important; right: auto !important; transform: none !important; }
.ig-footer__meta .footer-contact-baner span { width: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center; }
/* Płatności: filter:none -> Mastercard pokazuje realne kolory (jego SVG to kolorowy PNG w <pattern>;
   systemowy `filter:brightness(0) invert(1)` je zabijał = szare logo). VISA = monochrom bez fill attr
   -> cream (brand-blue #1A1F71 niewidoczny na espresso). `path:not([fill])` NIE rusza MC `fill="url(#a)"`.
   (Playwright pixel-verified 2026-06-10) */
.ig-footer__meta .footer-contact-baner svg { height: 18px; width: auto; filter: none !important; }
.ig-footer__meta .footer-contact-baner svg path:not([fill]) { fill: #FAF6EE !important; }
/* === PRZYCZYNA "niebieskiej stopki" (Playwright pixel-verified 2026-06-10) ===
   default13 daje `.footer-contact-baner::before` = pseudo-element navy rgb(62,71,94),
   position:absolute, width:1440px height:407px, z-index:-1 — pełnoekranowy pas pod
   całą stopką. Gdy baner (position:static) jest relokowany do footer (position:relative),
   ::before rozciąga się na CAŁY footer i maluje go na granatowo MIMO footer bg=#241A11
   (getComputedStyle footera = espresso, ale ::before malował na wierzchu tła footera).
   TRAP#18/§53 nadpisywały `.footer-contact-baner{background}` ale NIE `::before`. Kill: */
.footer-contact-baner::before,
.footer-contact-baner::after { display: none !important; background: transparent !important; content: none !important; }
/* Powered by IdoBooking (WYMÓG LICENCYJNY): on_white.svg NIE renderuje się jako <img> (root fill=none
   + filter brightness(0)invert(1) dawały PUSTKĘ — 0 pikseli), a on_dark.svg = 404. FIX: oficjalny badge
   przez background-image na jasnym chipie -> realne kolory (#1D1D1B tekst + #FEB92F akcent), w pełni widoczny.
   (Playwright pixel-verified 2026-06-10) */
.ig-footer__meta .powered_by { display: inline-flex !important; align-items: center !important; opacity: 1 !important; margin: 0; }
.ig-footer__meta .powered_by img, .ig-footer__meta img.powered_by_logo { display: none !important; }
.ig-footer__meta .powered_by a.powered_by_logo, .ig-footer__meta a.powered_by_logo {
  display: inline-block !important; width: 128px !important; height: 36px !important; min-width: 128px !important; opacity: 1 !important; filter: none !important;
  background-color: #FAF6EE !important;
  background-image: url("/images/panel/newBrand/powered_by_idoBooking_on_white.svg") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 108px auto !important;
  border-radius: 4px !important;
}
@media (max-width: 991px) { .ig-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
@media (max-width: 600px) {
  .ig-footer { padding: 0 20px; }
  .ig-footer__top { grid-template-columns: minmax(0,1fr); gap: 30px; padding: 44px 0 28px; }
  .ig-footer__col { min-width: 0; }
  .ig-footer__legal, .ig-footer__contact-list li, .ig-footer__contact-list a { word-break: break-word; overflow-wrap: anywhere; }
  .ig-footer__bar { flex-direction: column; align-items: center; text-align: center; }
  .ig-footer__meta { justify-content: center; flex-wrap: wrap; gap: 14px; }
  .ig-footer__meta .footer-contact-baner svg { height: 16px; }
  .ig-footer__tagline { max-width: none; }
}

/* ============================================================
   §P3-18 — Opinie + Lokalizacja PREMIUM (2026-06-10, podglądy zatwierdzone)
   ============================================================ */
/* Opinie: nagłówek + odznaka oceny 9,8/10 + karty z cudzysłowem */
.ido-testimonials { text-align: center; }
.ido-testimonials__eyebrow { text-align: center; margin: 0 0 12px; }
.ido-testimonials__title { color: #FAF6EE !important; margin: 0 0 26px !important; }
.ido-testimonials__score { display: inline-flex; align-items: center; gap: 20px; border: 1px solid rgba(184,146,78,.4); border-radius: 10px; padding: 16px 28px; margin: 0 auto 42px; }
.ido-testimonials__score-num { font-family: var(--riv-font-heading); color: var(--riv-gold); font-size: 44px; line-height: 1; }
.ido-testimonials__score-num span { font-size: 20px; color: rgba(250,246,238,.6); }
.ido-testimonials__score-meta { text-align: left; border-left: 1px solid rgba(184,146,78,.3); padding-left: 18px; }
.ido-testimonials__stars { display: block; color: var(--riv-beige); font-size: 15px; letter-spacing: .12em; }
.ido-testimonials__score-src { color: rgba(250,246,238,.7); font-size: 12.5px; }
.ido-testimonials__item { position: relative; text-align: left; padding: 30px 28px 24px !important; }
.ido-testimonials__mark { display: block; font-family: var(--riv-font-heading); color: var(--riv-gold); font-size: 50px; line-height: .5; height: 26px; }
.ido-testimonials__quote { font-family: var(--riv-font-body) !important; font-style: normal !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--riv-ink) !important; margin: 0 0 18px !important; }
.ido-testimonials__foot { border-top: 1px solid rgba(184,146,78,.28); padding-top: 13px; display: flex; justify-content: space-between; align-items: center; }
.ido-testimonials__foot .ido-testimonials__author { color: var(--riv-navy-dark); font-weight: 500; font-size: 14px; }
.ido-testimonials__foot .ido-testimonials__source { color: #8A6D3A; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 600px) { .ido-testimonials__score { flex-direction: column; gap: 8px; text-align: center; } .ido-testimonials__score-meta { border-left: none; padding-left: 0; text-align: center; } }

/* Lokalizacja: mapa w złotej ramie + premium lista odległości */
.ig-location__map { border: 2px solid var(--riv-gold) !important; border-radius: 10px !important; min-height: 420px !important; box-shadow: 0 18px 48px rgba(36,26,17,.16) !important; }
.ig-location__map iframe { min-height: 420px !important; filter: grayscale(.12) contrast(1.02); }
.ig-location__list li { padding: 15px 0 !important; }
.ig-location__list .ig-location__place { display: inline-flex; align-items: center; gap: 10px; color: var(--riv-ink); font-size: 16px; }
.ig-location__list .ig-location__place::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--riv-gold); flex: none; }
.ig-location__list .ig-location__time { font-family: var(--riv-font-heading); color: var(--riv-gold); font-size: 15px; font-weight: 400; letter-spacing: .02em; }

/* ============================================================
   §P3-19 — Heading gold-underline draw-in + sekcja "Doświadczenie pobytu"
   (2026-06-10, koncept frontend-architect; "strona ma żyć")
   ============================================================ */
/* Złota linia podkreślenia rysuje się gdy nagłówek wjeżdża (.ig-reveal.is-visible) */
.ig-underline { display: inline-block; position: relative; padding-bottom: 12px; }
.ig-underline::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--riv-gold); transition: width .9s cubic-bezier(.16,1,.3,1) .15s; }
.is-visible .ig-underline::after, .ig-reveal.is-visible .ig-underline::after, .ig-underline.is-visible::after { width: 56px; }
@media (prefers-reduced-motion: reduce) { .ig-underline::after { transition: none; width: 56px; } }

/* Sekcja: Doświadczenie pobytu — oś czasu pobytu + sticky scena ze zdjęciami (crossfade scroll-sync) */
.ig-experience { padding: clamp(64px,8vw,110px) 24px; position: relative; z-index: 5; overflow: hidden; }
.ig-experience__head { max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); text-align: center; }
.ig-experience__head h2 { font-family: var(--riv-font-heading); color: var(--riv-navy-dark); font-size: clamp(30px,4vw,46px); line-height: 1.12; margin: 0 0 16px; }
.ig-experience__lead { font-family: var(--riv-font-body); color: #5C4A38; font-size: 17px; line-height: 1.7; margin: 0; }
.ig-experience__body { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.ig-experience__timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ig-experience__timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: rgba(184,146,78,.25); }
.ig-experience__timeline::after { content: ''; position: absolute; left: 7px; top: 6px; width: 2px; height: 0; background: linear-gradient(180deg, var(--riv-gold) 0%, var(--riv-beige) 100%); transition: height 1.1s cubic-bezier(.22,1,.36,1) .1s; }
.is-visible .ig-experience__timeline::after { height: calc(100% - 12px); }
.ig-exp-moment { position: relative; padding: 0 0 clamp(28px,4vw,44px) 38px; }
.ig-exp-moment:last-child { padding-bottom: 0; }
.ig-exp-moment__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--riv-bg); border: 2px solid var(--riv-beige); box-sizing: border-box; transition: border-color .4s ease, background .4s ease, transform .4s ease; }
.ig-exp-moment.is-current .ig-exp-moment__dot { background: var(--riv-gold); border-color: var(--riv-gold); transform: scale(1.25); box-shadow: 0 0 0 5px rgba(184,146,78,.16); }
.ig-exp-moment__time { display: inline-block; font-family: var(--riv-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--riv-gold); margin: 0 0 8px; }
.ig-exp-moment__card { background: #FFFFFF; border: 1px solid rgba(184,146,78,.18); border-radius: 6px; padding: 20px 22px; transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease; }
.ig-exp-moment.is-current .ig-exp-moment__card { box-shadow: 0 16px 44px rgba(36,26,17,.1); border-color: rgba(184,146,78,.4); }
.ig-exp-moment__icon { display: inline-flex; color: var(--riv-gold); margin: 0 0 10px; }
.ig-exp-moment__icon svg { width: 26px; height: 26px; }
.ig-exp-moment__title { font-family: var(--riv-font-heading); color: var(--riv-navy-dark); font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.ig-exp-moment__desc { font-family: var(--riv-font-body); color: #5C4A38; font-size: 15px; line-height: 1.65; margin: 0; }
.ig-experience__visual { position: sticky; top: 110px; }
.ig-experience__photo-wrap { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--riv-navy) 0%, var(--riv-gold) 100%); }
.ig-experience__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.1s ease, transform 6s ease; }
.ig-experience__photo.is-active { opacity: 1; transform: scale(1); }
.ig-experience__photo-frame { position: absolute; inset: 14px; border: 1px solid rgba(250,246,238,.45); border-radius: 4px; pointer-events: none; z-index: 2; }
.ig-experience__caption { position: absolute; left: 24px; bottom: 22px; z-index: 3; display: flex; flex-direction: column; color: var(--riv-bg); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.ig-experience__caption-k { font-family: var(--riv-font-heading); font-size: 22px; letter-spacing: .04em; }
.ig-experience__caption-v { font-family: var(--riv-font-body); font-size: 13px; letter-spacing: .08em; color: var(--riv-beige); }
@media (max-width: 860px) { .ig-experience__body { grid-template-columns: 1fr; } .ig-experience__visual { position: static; order: -1; margin-bottom: 8px; } .ig-experience__photo-wrap { aspect-ratio: 16/10; } }
@media (prefers-reduced-motion: reduce) { .ig-experience__timeline::after { transition: none; height: calc(100% - 12px) !important; } .ig-experience__photo { transition: opacity .3s ease; transform: none; } .ig-experience__photo.is-active { transform: none; } .ig-exp-moment__card, .ig-exp-moment__dot { transition: none; } }

/* ============================================================
   §F5 (2026-06-11) — Fixy po audycie mobile (uwagi Damiana)
   ============================================================ */
/* #1 — Hero: pojedyncze tlo (system slider #parallax_topslider renderowal zdjecie podwojnie / szew na mobile) */
body.page-index #parallax_topslider,
body.page-index .parallax-slider {
  background-image: url('https://client58463.idobooking.com/images/objects/pictures/large/0/1/191.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 100% !important;
  min-height: 100% !important;
  top: 0 !important;
}
body.page-index #parallax_topslider .slick-list,
body.page-index #parallax_topslider .slick-track,
body.page-index #parallax_topslider .slick-slide { background: transparent !important; height: 100% !important; }
body.page-index #parallax_topslider .slick-slide img,
body.page-index .parallax-slider .slick-slide img { opacity: 0 !important; }
/* #1b (2026-06-12) — zdjac ciemny scrim hero. `.fp-tableCell::before` ma 3 definicje (CSS x2 + inline w body_bottom, bez !important); !important tu bije wszystkie, wiec wystarczy wkleic sam Arkusz stylow. */
body.page-index .section.parallax > .fp-tableCell::before,
body.page-index .section.parallax .fp-tableCell::before { background: transparent !important; }

/* #2 — "Zobacz apartamenty" (About) byl bialy outline = niewidoczny na kremie -> solidny espresso.
   Specyficznosc 0,2,1 (a.ido-split__cta + parent) by przebic .ido-split-reverse .ido-split__cta (0,2,0, bg:transparent !important). */
.ido-split-reverse a.ido-split__cta,
.ido-split a.ido-split__cta {
  background: var(--riv-navy-dark) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--riv-navy-dark) !important;
  border-radius: 2px !important;
  padding: 13px 30px !important;
}
.ido-split-reverse a.ido-split__cta:hover,
.ido-split a.ido-split__cta:hover {
  background: var(--riv-gold) !important;
  border-color: var(--riv-gold) !important;
  color: var(--riv-navy-dark) !important;
}

/* #3 — Podpis "Igielna 10" (ig-experience): na mobile .ig-experience__visual byl position:static -> caption uciekal ~1000px w dol na timeline. Re-anchor do zdjecia. */
@media (max-width: 860px) {
  .ig-experience__visual { position: relative !important; }
}

/* #5 — Popup/lightbox: overscroll-behavior contain (+ JS scroll-lock w body_bottom) by tlo nie scrollowalo na mobile */
.ig-pop-overlay { overscroll-behavior: contain; }
.ig-pop-dialog { overscroll-behavior: contain; }
.ig-lightbox { overscroll-behavior: contain; }

/* §F7 (2026-06-12) — sekcja "Komfort i niezaleznosc" OZYWIONA: Ken Burns (oddech) + zlota rama + hover-zoom */
.ido-split--alive .ido-split__media { position: relative; padding: 14px; }
.ido-split--alive .ido-split__media::before { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--riv-gold); border-radius: 8px; pointer-events: none; z-index: 2; transition: inset .5s cubic-bezier(.16,1,.3,1); }
.ido-split--alive .ido-split__media:hover::before { inset: 7px; }
.ido-split--alive .ido-split__media__inner { overflow: hidden; border-radius: 6px; box-shadow: 0 18px 50px rgba(36,26,17,.16); }
.ido-split--alive .ido-split__media__inner img { display: block; width: 100%; height: auto; border-radius: 0 !important; box-shadow: none !important; animation: igKomfortBreathe 22s ease-in-out infinite alternate; transition: transform .9s ease; }
.ido-split--alive .ido-split__media:hover .ido-split__media__inner img { transform: scale(1.06); }
@keyframes igKomfortBreathe { from { transform: scale(1.001); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .ido-split--alive .ido-split__media__inner img { animation: none; } }

/* §F8 (2026-06-15, v3) — tytul subhero stonowany na WSZYSTKICH podstronach /txt (O nas, Atrakcje, Galeria).
   Klient: bialy "sie wybijal"; v1 espresso #3A2C1E = za ciemne -> zmiekczona biel (cream .7): czytelna, nie krzyczaca.
   v3: zdjeto scope --onas (klient chcial to samo na Atrakcje+Galeria). Selektor identyczny z §57b (0,3,3), pozniej w pliku = wygrywa. */
body.page-txt section.riv-subhero h1.riv-subhero__title,
body.page-txt .riv-subhero .riv-subhero__content h1.riv-subhero__title {
  color: rgba(250, 246, 238, 0.7) !important;
  text-shadow: none !important;
}

/* §F9 (2026-06-15) — Kontakt: zwiniecie 8 lokalizacji do jednej (logika w body_bottom initContactPage).
   2. telefon dodany przez klienta w panelu (nie w kodzie). Tu tylko ukrycie pustych przyciskow oferty. */
body.page-contact .contact__item .contact__btn[href=""],
body.page-contact .contact__item .contact__btn:not([href]) { display: none !important; }

/* §F10 (2026-06-15) — Strona oferty /offer/N: ujednolicona typografia tresci opisowej.
   Klient: "jedna spojna czcionka w jednym rozmiarze" (dozwolone bold/kursywa/podkreslenie).
   System mieszal: naglowki Bodoni 18px (serif) + tresc DM Sans 16px + kontakt 14px/300 (slate).
   Ujednolicenie: DM Sans 16px w sekcjach opisowych; naglowki sekcji = bold. Tabela cen (dane) bez zmian. */
body.page-offer .room_data, body.page-offer .room_data *,
body.page-offer .room_rules, body.page-offer .room_rules *,
body.page-offer .additional_info, body.page-offer .additional_info * {
  font-family: var(--riv-font-body), 'DM Sans', sans-serif !important;
  font-size: 16px !important;
}
body.page-offer .room_data .label, body.page-offer .room_data > h2, body.page-offer .room_data h3,
body.page-offer .room_rules .label, body.page-offer .room_rules > h2,
body.page-offer .additional_info .label, body.page-offer .additional_info > h2,
body.page-offer .offer-prices .label, body.page-offer .offer-prices > h2,
body.page-offer .amenities .label, body.page-offer .amenities > h2 {
  font-family: var(--riv-font-body), 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--riv-navy-dark, #241A11) !important;
  letter-spacing: .01em !important;
  line-height: 1.45 !important;
}
/* Kontakt (additional_info): jednolity kolor espresso, etykieta 500, wartosc bold */
body.page-offer .additional_info, body.page-offer .additional_info * { color: var(--riv-ink, #2B2620) !important; }
body.page-offer .additional_info .addonsList li > span { font-weight: 500 !important; }
body.page-offer .additional_info .addonsList strong { font-weight: 700 !important; }

/* §F11 (2026-06-15) — Dropdown wyboru jezyka: szare tlo #E5E5E5 -> kremowo-bialy panel z gold-borderem (paleta) */
.page-top__language .language {
  background: #FFFFFF !important;
  border: 1px solid rgba(184, 146, 78, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(36, 26, 17, 0.16) !important;
  padding: 6px !important;
}
.page-top__language .flags a { border-radius: 5px !important; transition: background 0.15s ease !important; }
.page-top__language .flags a:hover { background: rgba(184, 146, 78, 0.14) !important; }

/* §17 — Client-added rules placeholder (DO NOT MODIFY ABOVE THIS LINE) */
/* === §RIV-CLIENT === */
/* Klient może tu dopisać własne reguły. JARVIS update zostawia tę sekcję as-is. */
/* === END §RIV-CLIENT === */

/* §IG-CONTACT — uklad telefonow + ujednolicenie rozmiarow (2026-06-24) */
body.page-contact .contact__block.--links ul li{ margin-bottom:14px; }
body.page-contact .contact__block.--links ul li strong{ display:block; margin-bottom:4px; }
body.page-contact .contact__block.--links .contact__tel,
body.page-contact .contact__block.--links .contact__email{ display:block; width:fit-content; }
body.page-contact .contact__block.--links ul li > span{ display:none; }
body.page-contact .contact__block,
body.page-contact .contact__block strong,
body.page-contact .contact__block a,
body.page-contact .contact__block span,
body.page-contact .contact__sect .contact__list,
body.page-contact .contact__sect .contact__list span,
body.page-contact .contact__locations strong,
body.page-contact .contact__locations span,
body.page-contact .contact__locations a:not(.contact__btn),
body.page-contact .contact__payments p{ font-size:16px !important; line-height:1.6 !important; }