/* Fair Rentals - theme v1.0 */
/* Layer 3: brand override + boutique components for IdoBooking default13 */

/* ============================================================
   1. BRAND VARS + IDOBOOKING SYSTEM OVERRIDE
   ============================================================ */

:root,html:root {
--fr-primary:        #E2D700;
--fr-primary-hover:  #C8BD00;
--fr-primary-deep:   #8A7A00;
--fr-light-accent:   #F4EE8A;
--fr-secondary:      #1A1A18;
--fr-cream:          #F0EAE0;
--fr-cream-deep:     #DDD0BE;
--fr-sage:           #7A736B;
--fr-light-gray:     #DEDEDE;
--fr-text-body:      #3F3A35;
--fr-text-dark:      #0F0F0E;
--fr-text-muted:     #7A736B;
--fr-bg:             #FAF7F2;
--fr-bg-alt:         #F4ECE2;
--fr-white:          #FFFFFF;

  /* Dark theme colors — używane w sekcjach z ciemnym tłem */
--fr-dark:           #0F0F0E;
--fr-dark-deep:      #050505;
--fr-primary-dark:   #806C00;
--fr-border-light:   #E5DCD4;
--fr-border-medium:  #C9C2B8;
--fr-shadow-sm:      0 2px 8px rgba(26, 26, 24, 0.06);
--fr-shadow-md:      0 8px 24px rgba(26, 26, 24, 0.10);
--fr-shadow-lg:      0 18px 48px rgba(26, 26, 24, 0.14);

--fr-font-display:   'DM Serif Display', 'Times New Roman', Georgia, serif;
--fr-font-body:      'Inter', 'Helvetica Neue', Arial, sans-serif;

--fr-radius-sm:      6px;
--fr-radius-md:      12px;
--fr-radius-lg:      20px;
--fr-radius-pill:    100px;

  /* Override IdoBooking default13 vars */
--maincolor1:        #E2D700 !important;
--maincolor2:        #C8BD00 !important;
--maincolor1_rgba:   rgba(226, 215, 0, 0.9) !important;
--supportcolor1:     #E2D700 !important;
--supportcolor2:     #1A1A18 !important;
--bgcolor1:          #FAF7F2 !important;
--bgcolor2:          #FFFFFF !important;
--bgcolor3:          #F0EAE0 !important;
--hovercolor1:       #C8BD00 !important;
--hovercolor2:       #8A7A00 !important;
--widget_header:     #1A1A18 !important;
--btn_large:         #E2D700 !important;
--btn_medium:        #E2D700 !important;
--bgaside:           #F4ECE2 !important}

/* ============================================================
   2. BASE TYPOGRAPHY
   ============================================================ */

html body {
font-family: var(--fr-font-body) !important;
color: var(--fr-text-body) !important;
background: var(--fr-bg) !important}

html body:not(.page-offers):not(.page-offer):not(.page-contact) {
font-size: 16px !important;
line-height: 1.6 !important}

html body.page-offers,html body.page-offer,html body.page-contact {
font-size: 16px !important}

html body h1,html body h2,html body h3,html body h4,html body h5,html body h6 {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important}

html body p {
font-family: var(--fr-font-body) !important;
color: var(--fr-text-body) !important;
line-height: 1.7 !important}

html body a {
color: var(--fr-primary) !important;
transition: color 0.2s ease, opacity 0.2s ease !important}

html body a:hover {
color: var(--fr-primary-hover) !important}

/* Selection */
::selection { background: var(--fr-light-accent); color: var(--fr-text-dark)}

/* ============================================================
   3. HEADER & NAVIGATION
   ============================================================ */

/* Default header — light, dark text (used on all subpages) */
html body header.default13 {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: saturate(140%) blur(14px) !important;
-webkit-backdrop-filter: saturate(140%) blur(14px) !important;
box-shadow: var(--fr-shadow-sm) !important;
border-bottom: none !important;
transition: background 0s, box-shadow 0.2s ease !important}

html body header.default13 .menu-wrapper,html body header.default13 .bgd-color-light.menu-wrapper {
background: transparent !important;
border-bottom: 1px solid var(--fr-border-light) !important}

/* Homepage transparent state — only when not scrolled */
html body.page-index header.default13:not(.fr-header--scrolled) {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important}

html body.page-index header.default13:not(.fr-header--scrolled) .menu-wrapper,html body.page-index header.default13:not(.fr-header--scrolled) .bgd-color-light.menu-wrapper {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important}

/* Scrolled state — instant white background (homepage when scrolled) */
html body header.default13.fr-header--scrolled {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: saturate(140%) blur(14px) !important;
-webkit-backdrop-filter: saturate(140%) blur(14px) !important;
box-shadow: var(--fr-shadow-sm) !important}

html body header.default13.fr-header--scrolled .menu-wrapper,html body header.default13.fr-header--scrolled .bgd-color-light.menu-wrapper {
background: transparent !important;
border-bottom: 1px solid var(--fr-border-light) !important}

/* Header nav typography — DEFAULT dark (subpages + scrolled state) */
html body header.default13 .nav-link.nav-link,html body header.default13 .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
color: var(--fr-text-dark) !important;
padding: 12px 14px !important;
transition: color 0.2s ease !important}

/* Homepage transparent header — white nav text */
html body.page-index header.default13:not(.fr-header--scrolled) .nav-link.nav-link,html body.page-index header.default13:not(.fr-header--scrolled) .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
color: var(--fr-white) !important}

html body header.default13 .nav-link.nav-link:hover,html body header.default13 .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler):hover {
color: var(--fr-primary) !important}

html body.page-index header.default13:not(.fr-header--scrolled) .nav-link.nav-link:hover,html body.page-index header.default13:not(.fr-header--scrolled) .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler):hover {
color: var(--fr-light-accent) !important}

/* Active link */
html body header.default13 .nav-link.active,html body header.default13 .nav-link.nav-link.active {
color: var(--fr-primary) !important}

html body.page-index header.default13:not(.fr-header--scrolled) .nav-link.active,html body.page-index header.default13:not(.fr-header--scrolled) .nav-link.nav-link.active {
color: var(--fr-light-accent) !important}

/* Language toggler — DEFAULT dark border (subpages + scrolled) */
/* v1.25 — PATCH v1.6.4 USUNIĘTY (relikt SA port): hide .language__toggler.
   FR ma 3 języki PL/EN/DE — system widget w v1.24 §90 odkryty + ostylowany. */

/* Hide fontello icons (system does not load them on default13) */
html body header.default13 .icon[class^="icon-"]:not(.fr-icon),html body .navbar-toggler .icon-menu {
display: none !important}

/* ============================================================
   4. LOGO — chip ONLY on homepage transparent state
   ============================================================ */

/* Default — no chip on subpages and scrolled state */
html body header.default13 .navbar-brand {
display: inline-flex !important;
align-items: center !important;
align-self: center !important;
padding: 4px 0 !important;
margin: 8px 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important}

/* Homepage transparent header — WHITE CHIP for logo contrast over photo.
   v1.66: klientka prosi "wersja bez cieni — jest lżejsza", ujednolicenie z
   v1.68: padding 8px → 4px na mobile — logo chip 52px wystaje względem */
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-brand {
align-self: center !important;
padding: 4px 14px !important;
background: rgba(255, 255, 255, 0.97) !important;
border-radius: var(--fr-radius-md) !important;
box-shadow: none !important}

html body header.default13 .navbar-brand img {
max-height: 100px !important;
height: 80px !important;
width: auto !important;
max-width: 320px !important;
display: block !important;
object-fit: contain !important}

@media (max-width: 991.98px) {
  /* v1.68: img 60px za duży na mobile — z chip padding 4+4 = 68px logo
     wystawał z belki 65px. Zmniejszam img do 32px → chip h = 4+32+4 = 40px
     (równo z hamburger MENU 40px). */
html body header.default13 .navbar-brand img {
max-height: 32px !important;
height: 32px !important;
max-width: 200px !important}
}

/* Hide full company name fallback text under logo */
html body header.default13 .navbar-brand .navbar-brand-text,html body header.default13 .navbar-brand-text,html body header.default13 .navbar-brand-name,html body header.default13 .navbar-brand small,html body header.default13 .navbar-brand .company-name,html body header.default13 .navbar-brand .powered_by,html body header.default13 .navbar-brand[title]::after,html body header.default13 a.navbar-brand > span:not(:has(img)),html body header.default13 a.navbar-brand > div:not(:has(img)),html body header.default13 a.navbar-brand .text {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
position: absolute !important;
left: -9999px !important}

/* Tooltip on logo (full company name) — disable */
html body header.default13 .navbar-brand[title]:hover::before,html body header.default13 .navbar-brand[title]:hover::after {
display: none !important}

/* ============================================================
   5. NAVBAR TOGGLER (mobile only)
   ============================================================ */

/* PATCH v1.6.2: Mobile menu dropdown — force DARK text on white bg
   Reason: page-index transparent header rule sets .nav-link color:white,
   which makes mobile dropdown items invisible (white text on white panel).
   Mobile dropdown ALWAYS has white background → text MUST be dark
   regardless of header state (transparent / scrolled / subpage). */
@media (max-width: 991.98px) {
html body header.default13 .navbar-nav,
html body header.default13 .navbar-collapse,
html body header.default13 .navbar-collapse.show,
html body header.default13 .navbar-collapse.collapsing,
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-nav,
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-collapse {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-md) !important;
box-shadow: var(--fr-shadow-md) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 12px 0 !important;
margin-top: 8px !important}

html body header.default13 .navbar-nav .nav-link,
html body header.default13 .navbar-nav a[href]:not(.btn),
html body header.default13 .navbar-collapse .nav-link,
html body header.default13 .navbar-collapse a[href]:not(.btn),
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-nav .nav-link,
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-nav a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler),
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-collapse .nav-link {
color: var(--fr-text-dark) !important;
padding: 14px 24px !important;
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: block !important;
border-bottom: 1px solid var(--fr-border-light) !important}

html body header.default13 .navbar-nav .nav-link:last-child,
html body header.default13 .navbar-collapse .nav-link:last-child,
html body header.default13 .navbar-nav li:last-child .nav-link {
border-bottom: none !important}

html body header.default13 .navbar-nav .nav-link:hover,
html body header.default13 .navbar-nav .nav-link.active,
html body header.default13 .navbar-collapse .nav-link:hover,
html body header.default13 .navbar-collapse .nav-link.active,
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-nav .nav-link:hover,
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-nav .nav-link.active {
color: var(--fr-primary) !important;
background: var(--fr-cream) !important}
}

html body .navbar-toggler { display: none !important}

@media (max-width: 991.98px) {
  /* PATCH v1.6.1: white chip background + visible "Menu" label
     Reason: on hero photo background, transparent toggler with thin white
     hamburger lines + black "Menu" span = unreadable. Now: white chip with
     dark icon + dark "Menu" text — readable on any header state. */
  /* v1.66: lżejsze cienie — klientka prosi "wersja bez cieni jest lżejsza".
     Usuwamy box-shadow z hamburger (był 0 6px 20px @0.15 = ciężki cień).
     Border subtelny zostaje (zachowuje czytelność na photo bg). */
html body .navbar-toggler {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
position: relative !important;
min-width: 64px !important;
min-height: 48px !important;
padding: 10px 14px !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.97) !important;
box-shadow: none !important;
cursor: pointer !important;
color: var(--fr-text-dark) !important}

  /* On scrolled header / subpages — flat white chip without strong shadow */
html body header.default13.fr-header--scrolled .navbar-toggler,
html body:not(.page-index) header.default13 .navbar-toggler {
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: var(--fr-shadow-sm) !important;
border-color: var(--fr-border-light) !important}

  /* 3 hamburger lines — always dark for contrast on white chip */
html body .navbar-toggler::before {
content: '';
display: inline-block;
width: 20px;
height: 14px;
color: var(--fr-text-dark);
    background-image:
linear-gradient(to bottom, currentColor 2px, transparent 2px),
linear-gradient(to bottom, currentColor 2px, transparent 2px),
      linear-gradient(to bottom, currentColor 2px, transparent 2px);
background-position: 0 0, 0 6px, 0 12px;
background-repeat: no-repeat;
background-size: 20px 2px, 20px 2px, 20px 2px;
flex-shrink: 0}

  /* "Menu" label — visible, brand typography */
html body .navbar-toggler > span,
html body .navbar-toggler span {
color: var(--fr-text-dark) !important;
font-family: var(--fr-font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
line-height: 1 !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important}

  /* Hide system <i class="icon icon-menu"> placeholder (fontello not loaded) */
html body .navbar-toggler > i.icon,
html body .navbar-toggler i[class^="icon-"] {
display: none !important}

  /* Expand hit-area without affecting visuals */
html body .navbar-toggler::after {
content: '';
position: absolute;
inset: -4px}

  /* Children non-interactive (button itself catches clicks) */
html body .navbar-toggler > * {
pointer-events: none !important}

  /* Hide "Menu" label on very small screens (<360px) — icon alone suffices */
@media (max-width: 359px) {
html body .navbar-toggler > span,
html body .navbar-toggler span {
display: none !important}
html body .navbar-toggler { padding: 12px !important; gap: 0 !important}
}
}

/* ============================================================
   6. SECTION HELPERS
   ============================================================ */

.fr-kicker {
display: inline-block;
font-family: var(--fr-font-body);
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
color: var(--fr-primary);
margin: 0 0 18px;
padding: 6px 18px;
background: rgba(231, 187, 186, 0.30);
border-radius: var(--fr-radius-pill)}

html body .fr-kicker {
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 2.5px !important}

.fr-h1 {
font-family: var(--fr-font-display);
font-size: clamp(30px, 4.4vw, 54px);
font-weight: 400;
line-height: 1.05;
color: var(--fr-text-dark);
margin: 0 0 24px}

.fr-h2 {
font-family: var(--fr-font-display);
font-size: clamp(24px, 2.9vw, 36px);
font-weight: 400;
line-height: 1.15;
color: var(--fr-text-dark);
margin: 0 0 20px}

.fr-h2 em {
font-style: italic;
color: var(--fr-primary);
font-weight: 300}

.fr-h3 {
font-family: var(--fr-font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
color: var(--fr-text-dark);
margin: 0 0 12px}

.fr-lead {
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.7;
color: var(--fr-text-body);
max-width: 640px;
margin: 0 0 24px}

.fr-text {
font-family: var(--fr-font-body);
font-size: 16px;
line-height: 1.7;
color: var(--fr-text-body)}

.fr-rule {
display: inline-block;
width: 60px;
height: 1px;
background: var(--fr-primary);
margin: 14px 0 22px}

.fr-section {
padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px);
position: relative}

.fr-section--cream { background: var(--fr-bg-alt)}
.fr-section--white { background: var(--fr-white)}
.fr-section--bg    { background: var(--fr-bg)}

.fr-section__inner {
max-width: 1280px;
margin: 0 auto;
position: relative}

.fr-section__header {
text-align: center;
max-width: 720px;
margin: 0 auto 56px}

.fr-section__header .fr-h2 { margin-bottom: 16px}
.fr-section__header .fr-lead { margin: 0 auto}

/* ============================================================
   7. BUTTONS
   ============================================================ */

.fr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--fr-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
padding: 16px 32px;
border-radius: var(--fr-radius-pill);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.25s ease;
min-height: 52px;
text-align: center;
white-space: nowrap}

.fr-btn--primary {
background: var(--fr-primary);
color: var(--fr-white) !important;
border-color: var(--fr-primary);
box-shadow: 0 6px 18px rgba(226, 215, 0, 0.32)}

.fr-btn--primary:hover {
background: var(--fr-primary-hover);
border-color: var(--fr-primary-hover);
box-shadow: 0 10px 24px rgba(200, 189, 0, 0.40)}

.fr-btn--outline {
background: transparent;
color: var(--fr-primary) !important;
border-color: var(--fr-primary)}

.fr-btn--outline:hover {
background: var(--fr-primary);
color: var(--fr-white) !important;
}

.fr-btn--ghost-light {
background: rgba(255, 255, 255, 0.10);
color: var(--fr-white) !important;
border-color: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px)}

.fr-btn--ghost-light:hover {
background: var(--fr-white);
color: var(--fr-primary) !important;
border-color: var(--fr-white);
}

.fr-btn--small {
padding: 11px 22px;
font-size: 12px;
min-height: 42px}

/* Override system btn classes on /offers page */
html body.page-offers .btn,html body.page-offer .btn {
background: var(--fr-primary) !important;
border-color: var(--fr-primary) !important;
color: var(--fr-white) !important;
border-radius: var(--fr-radius-pill) !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
padding: 13px 28px !important;
min-height: 46px !important;
transition: all 0.25s ease !important}

html body.page-offers .btn:hover,html body.page-offer .btn:hover {
background: var(--fr-primary-hover) !important;
border-color: var(--fr-primary-hover) !important;
}

html body.page-offers #filters_submit {
background: var(--fr-primary) !important;
border-radius: var(--fr-radius-pill) !important;
padding: 14px 28px !important;
width: 100% !important;
min-height: 48px !important;
font-size: 13px !important;
letter-spacing: 1.5px !important}

/* ============================================================
   8. HERO SECTION
   ============================================================ */

.fr-hero-wrap {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden}

.fr-hero {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat}

.fr-hero::after {
content: '';
position: absolute;
inset: 0;
  background: linear-gradient(
180deg,
rgba(26, 26, 24, 0.45) 0%,
rgba(26, 26, 24, 0.30) 50%,
    rgba(26, 26, 24, 0.62) 100%
  );
z-index: 1}

.fr-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 120px 24px 80px;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 80px;
align-items: center}

.fr-hero__text { color: var(--fr-white)}

.fr-hero__kicker {
display: inline-block;
font-family: var(--fr-font-body);
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: var(--fr-light-accent);
padding: 8px 22px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: var(--fr-radius-pill);
margin: 0 0 28px;
backdrop-filter: blur(8px)}

.fr-hero__title {
font-family: var(--fr-font-display);
font-size: clamp(32px, 4.6vw, 60px) !important;
font-weight: 300 !important;
line-height: 1.0 !important;
color: var(--fr-white) !important;
margin: 0 0 28px !important;
letter-spacing: -0.012em}

.fr-hero__title em {
font-style: italic;
color: var(--fr-light-accent);
font-weight: 300}

.fr-hero__lead {
font-family: var(--fr-font-body);
font-size: 18px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
max-width: 540px;
margin: 0 0 36px}

.fr-hero__cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px}

.fr-hero__facts {
display: flex;
gap: 36px;
flex-wrap: wrap;
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.20)}

.fr-hero__fact {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--fr-white)}

.fr-hero__fact strong {
font-family: var(--fr-font-display);
font-size: 32px;
font-weight: 500;
color: var(--fr-light-accent);
line-height: 1}

.fr-hero__fact span {
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
font-weight: 500;
opacity: 0.86}

/* Hero search card */
.fr-hero__search {
background: rgba(255, 255, 255, 0.97);
border-radius: var(--fr-radius-lg);
padding: 36px 32px;
box-shadow: 0 30px 80px rgba(26, 26, 24, 0.30);
backdrop-filter: blur(8px)}

.fr-hero__search-title {
display: block;
font-family: var(--fr-font-display);
font-size: 26px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0 0 8px}

.fr-hero__search-sub {
display: block;
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 600;
margin: 0 0 24px}

.fr-search { display: grid; gap: 14px}

.fr-search__field { display: flex; flex-direction: column; gap: 6px}

.fr-search__label {
font-family: var(--fr-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fr-text-muted)}

.fr-search__input,.fr-search__select {
font-family: var(--fr-font-body);
font-size: 15px;
color: var(--fr-text-dark);
background: var(--fr-bg);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
padding: 13px 16px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-height: 48px;
width: 100%}

.fr-search__input:focus,.fr-search__select:focus {
border-color: var(--fr-primary);
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.18)}

.fr-search__submit {
margin-top: 10px;
width: 100%;
background: var(--fr-primary);
color: var(--fr-white);
border: 2px solid var(--fr-primary);
font-family: var(--fr-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
padding: 16px 24px;
border-radius: var(--fr-radius-pill);
cursor: pointer;
min-height: 52px;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px}

.fr-search__submit:hover {
background: var(--fr-primary-hover);
border-color: var(--fr-primary-hover);
}

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

/* ============================================================
   9. ABOUT / DIFFERENTIATORS
   ============================================================ */

.fr-about {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 80px;
align-items: center}

.fr-about__media {
position: relative;
border-radius: var(--fr-radius-lg);
overflow: hidden;
box-shadow: var(--fr-shadow-lg);
aspect-ratio: 4 / 5}

.fr-about__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block}

.fr-about__media::after {
content: '';
position: absolute;
bottom: -28px;
right: -28px;
width: 120px;
height: 120px;
background: var(--fr-light-accent);
border-radius: var(--fr-radius-md);
z-index: -1}

.fr-about__text { padding: 16px 0}

.fr-features {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
margin-top: 36px}

.fr-feature {
display: grid;
grid-template-columns: 56px 1fr;
gap: 20px;
align-items: flex-start}

.fr-feature__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(231, 187, 186, 0.45);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-primary-deep);
flex-shrink: 0}

.fr-feature__icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
stroke-width: 1.5;
fill: none}

.fr-feature__title {
font-family: var(--fr-font-display);
font-size: 20px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0 0 6px}

.fr-feature__text {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.65;
color: var(--fr-text-body);
margin: 0}

/* ============================================================
   10. FEATURED APARTMENTS
   ============================================================ */

html body .container-hotspot {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important}

.fr-apartments { background: var(--fr-bg)}

.fr-apt-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 36px;
transition: opacity 0.4s ease}

#fr-apt-grid[data-offers-loaded="pending"] {
min-height: 380px;
opacity: 0.3}

#fr-apt-grid[data-offers-loaded]:not([data-offers-loaded="pending"]):not([data-offers-loaded="empty"]) {
opacity: 1}

#fr-apt-grid[data-offers-loaded="empty"] {
display: none !important}

.fr-apt-card {
display: block;
text-decoration: none !important;
background: var(--fr-white);
border-radius: var(--fr-radius-lg);
overflow: hidden;
box-shadow: var(--fr-shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--fr-border-light)}

.fr-apt-card:hover {
transform: translateY(-6px);
box-shadow: var(--fr-shadow-lg)}

.fr-apt-img {
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden}

.fr-apt-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease}

.fr-apt-card:hover .fr-apt-img img { transform: scale(1.06)}

.fr-apt-price {
position: absolute;
top: 16px;
left: 16px;
background: var(--fr-white);
color: var(--fr-text-dark);
font-family: var(--fr-font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
padding: 8px 16px;
border-radius: var(--fr-radius-pill);
box-shadow: var(--fr-shadow-sm)}

.fr-apt-price strong {
font-family: var(--fr-font-display);
font-size: 18px;
font-weight: 600;
color: var(--fr-primary)}

.fr-apt-price span {
font-size: 11px;
color: var(--fr-text-muted);
letter-spacing: 0.8px}

.fr-apt-body {
padding: 26px 26px 28px}

.fr-apt-card .fr-h3 {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 10px !important;
line-height: 1.25 !important}

.fr-apt-desc {
font-family: var(--fr-font-body);
font-size: 14.5px;
line-height: 1.6;
color: var(--fr-text-body);
margin: 0 0 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden}

.fr-apt-features {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--fr-border-light)}

.fr-apt-feature {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--fr-font-body);
font-size: 13px;
color: var(--fr-text-muted);
font-weight: 500}

.fr-apt-feature svg {
width: 16px;
height: 16px;
stroke: var(--fr-primary);
stroke-width: 1.6;
fill: none}

/* ============================================================
   11. LOCATIONS
   ============================================================ */

.fr-locations { background: var(--fr-bg-alt)}

.fr-loc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-bottom: 56px}

.fr-loc-card {
background: var(--fr-white);
border-radius: var(--fr-radius-lg);
padding: 32px 28px;
border: 1px solid var(--fr-border-light);
transition: transform 0.25s ease, box-shadow 0.25s ease}

.fr-loc-card:hover {
transform: translateY(-3px);
box-shadow: var(--fr-shadow-md)}

.fr-loc-card__pin {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--fr-light-accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-primary-deep);
margin: 0 0 18px}

.fr-loc-card__pin svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.6;
fill: none}

.fr-loc-card__title {
font-family: var(--fr-font-display);
font-size: 24px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0 0 8px}

.fr-loc-card__address {
font-family: var(--fr-font-body);
font-size: 14px;
color: var(--fr-text-muted);
margin: 0 0 14px;
letter-spacing: 0.4px}

.fr-loc-card__desc {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.65;
color: var(--fr-text-body);
margin: 0}

.fr-loc-map {
border-radius: var(--fr-radius-lg);
overflow: hidden;
box-shadow: var(--fr-shadow-md);
border: 1px solid var(--fr-border-light);
aspect-ratio: 21 / 9;
background: var(--fr-light-gray)}

.fr-loc-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block}

@media (max-width: 768px) {
.fr-loc-map { aspect-ratio: 4 / 3}
}

/* ============================================================
   12. DLA FIRM TEASER (split)
   ============================================================ */

.fr-corp { background: var(--fr-bg)}

.fr-corp__split {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 80px;
align-items: center}

.fr-corp__media {
position: relative;
border-radius: var(--fr-radius-lg);
overflow: hidden;
box-shadow: var(--fr-shadow-lg);
aspect-ratio: 5 / 4}

.fr-corp__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block}

.fr-corp__list {
list-style: none;
padding: 0;
margin: 28px 0 32px;
display: grid;
gap: 14px}

.fr-corp__list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-family: var(--fr-font-body);
font-size: 16px;
line-height: 1.6;
color: var(--fr-text-body)}

.fr-corp__list li::before {
content: '';
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2D700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
background-size: contain;
background-repeat: no-repeat}

/* ============================================================
   13. ATRAKCJE TEASER
   ============================================================ */

.fr-attractions { background: var(--fr-bg-alt)}

.fr-attr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-bottom: 44px}

.fr-attr-card {
position: relative;
border-radius: var(--fr-radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--fr-shadow-md);
transition: transform 0.35s ease, box-shadow 0.35s ease;
display: block;
text-decoration: none !important}

.fr-attr-card:hover {
transform: translateY(-5px);
box-shadow: var(--fr-shadow-lg)}

.fr-attr-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease}

.fr-attr-card:hover img { transform: scale(1.07)}

.fr-attr-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(26, 26, 24, 0.78) 100%)}

.fr-attr-card__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 22px 22px;
z-index: 2;
color: var(--fr-white)}

.fr-attr-card__title {
font-family: var(--fr-font-display);
font-size: 22px;
font-weight: 500;
color: var(--fr-white);
margin: 0 0 6px;
line-height: 1.2}

.fr-attr-card__meta {
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fr-light-accent);
font-weight: 600}

/* ============================================================
   14. FINAL CTA (dark)
   ============================================================ */

.fr-final-cta {
background: linear-gradient(135deg, var(--fr-text-dark) 0%, var(--fr-primary-deep) 60%, var(--fr-secondary) 100%);
color: var(--fr-white) !important;
padding: clamp(96px, 12vw, 144px) clamp(20px, 5vw, 60px) !important;
text-align: center;
position: relative;
overflow: hidden}

.fr-final-cta::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(231, 187, 186, 0.22), transparent 70%);
pointer-events: none}

.fr-final-cta::after {
content: '';
position: absolute;
bottom: -160px;
left: -100px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(196, 210, 208, 0.18), transparent 70%);
pointer-events: none}

.fr-final-cta__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
z-index: 2}

html body .fr-final-cta .fr-kicker {
display: inline-block;
font-size: 13px !important;
letter-spacing: 2.6px !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.14);
border: 1.5px solid rgba(255, 255, 255, 0.40);
color: var(--fr-white);
padding: 10px 24px;
margin-bottom: 26px}

html body .fr-final-cta h2,html body .fr-final-cta .fr-h2 {
font-family: var(--fr-font-display) !important;
font-size: clamp(26px, 3.4vw, 42px) !important;
font-weight: 300 !important;
color: var(--fr-white) !important;
margin: 0 0 22px !important;
line-height: 1.1 !important}

html body .fr-final-cta h2 em,html body .fr-final-cta .fr-h2 em {
font-style: italic;
color: var(--fr-light-accent)}

html body .fr-final-cta p {
color: rgba(255, 255, 255, 0.90) !important;
font-size: 17px !important;
line-height: 1.7 !important;
max-width: 560px;
margin: 0 auto 36px !important}

.fr-final-cta__contact {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 28px;
margin: 36px 0 0;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.18)}

.fr-final-cta__contact a {
font-family: var(--fr-font-body);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--fr-light-accent) !important;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: color 0.2s ease}

.fr-final-cta__contact a:hover { color: var(--fr-white) !important}

.fr-final-cta__contact svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.7;
fill: none}

.fr-final-cta__cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin: 36px 0 0}

html body .fr-final-cta .fr-btn--primary {
background: var(--fr-white) !important;
color: var(--fr-primary-deep) !important;
border-color: var(--fr-white) !important}

html body .fr-final-cta .fr-btn--primary:hover {
background: var(--fr-light-accent) !important;
color: var(--fr-text-dark) !important;
border-color: var(--fr-light-accent) !important}

html body .fr-final-cta .fr-btn--ghost-light {
background: transparent !important;
color: var(--fr-white) !important;
border-color: rgba(255, 255, 255, 0.55) !important}

html body .fr-final-cta .fr-btn--ghost-light:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: var(--fr-white) !important}

/* 15. FOOTER OVERRIDES — PATCH v1.6.4 (fullwidth dark band + structured)
   Reason: system renders footer as <footer> > <div.footer.container> > */

/* Outer <footer> — fullwidth dark band with brand top border */
html body footer {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
background: var(--fr-text-dark) !important;
color: rgba(255, 255, 255, 0.82) !important;
font-family: var(--fr-font-body) !important;
border-top: 1px solid rgba(231, 187, 186, 0.20) !important;
box-sizing: border-box !important;
padding: 72px 24px 32px !important}

/* PATCH v1.6.5: Footer 3-col layout per user request — fills width naturally,
   no more "tekst tylko na środku" effect */
html body footer .footer.container,html body footer > .footer {
max-width: 1400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
display: grid !important;
grid-template-columns: 1fr 1.2fr auto !important;
gap: 48px 80px !important;
align-items: start !important}

/* PATCH v1.6.5: Add brand column (col 1) via ::before injection on .footer.container.
   PATCH v1.6.7: removed duplicate selector "html body footer > .footer::before"
   which matched inner nested div, causing the brand text to render twice. */
html body footer .footer.container::before {
content: "Fair Rentals\A Boutique \A Wrocla\0144" !important;
white-space: pre !important;
font-family: var(--fr-font-display) !important;
font-size: 28px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
letter-spacing: 0.5px !important;
color: var(--fr-white) !important;
display: block !important;
align-self: start !important;
padding-right: 16px !important;
border-right: 1px solid rgba(255, 255, 255, 0.10) !important}

/* Inner .footer (contact UL) — nested div */
html body footer .footer > .footer,html body footer .footer.container > .footer {
background: transparent !important;
padding: 0 !important;
margin: 0 !important}

/* Footer UL — list reset + flex layout for contact rows
   align-items: flex-start = left-align text in left column */
html body footer ul,html body footer .footer ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 14px !important}

html body footer li,html body footer .footer li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
width: 100% !important}

/* PATCH v1.6.4: Kill system "|" separators (::after { content: "|" })
   on .footer-contact-* LI elements — replaced by our own visual separator
   (border-top on .footer-contact-terms) */
html body footer .footer-contact-adress::after,html body footer .footer-contact-adress::before,html body footer .footer-contact-phone::after,html body footer .footer-contact-phone::before,html body footer .footer-contact-mail::after,html body footer .footer-contact-mail::before,html body footer .footer-contact-terms::after,html body footer .footer-contact-terms::before {
content: none !important;
display: none !important}

/* PATCH v1.6.4: Hide IAI Booking SVG logo — client uses own brand,
   no need for vendor badge in footer */
html body .footer-contact-baner > span:first-child {
display: none !important}

/* PATCH v1.6.4: Hide IdoSell "Powered by IAI Booking" logo IMG
   (img.powered_by_logo inside div.powered_by inside div.footer__social).
   Client uses own brand — vendor attribution not desired. */
html body .powered_by,html body .powered_by_logo,html body a.powered_by_logo,html body img.powered_by_logo,html body footer .footer__social .powered_by,html body footer .powered_by {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important}

/* ============================================================
   PATCH v1.6.5: POLICY MODAL (instinct 032)
   Cookies/Regulamin/Polityka linki -> open in modal iframe
   instead of new tab (out-of-brand IdoBooking page)
   ============================================================ */

.fr-policy-modal {
position: fixed !important;
inset: 0 !important;
background: rgba(42, 34, 38, 0.78) !important;
backdrop-filter: blur(6px) !important;
z-index: 99999 !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
padding: 24px !important}

.fr-policy-modal--active {
display: flex !important}

.fr-policy-modal__box {
width: min(960px, 100%) !important;
height: min(720px, 90vh) !important;
background: var(--fr-white) !important;
border-radius: 20px !important;
overflow: hidden !important;
position: relative !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important}

.fr-policy-modal__close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 44px !important;
height: 44px !important;
border: none !important;
background: var(--fr-text-dark) !important;
color: var(--fr-white) !important;
border-radius: 50% !important;
font-size: 20px !important;
font-weight: 600 !important;
cursor: pointer !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s ease !important}

.fr-policy-modal__close:hover {
background: var(--fr-primary) !important}

.fr-policy-modal__iframe {
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: var(--fr-white) !important}

@media (max-width: 720px) {
.fr-policy-modal { padding: 12px !important}
.fr-policy-modal__box { height: 92vh !important; border-radius: 14px !important}
}

/* Address line — display font, kicker style */
html body footer .footer-contact-adress {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
font-weight: 500 !important;
color: var(--fr-white) !important;
letter-spacing: 0.2px !important;
margin-bottom: 4px !important}

html body footer .footer-contact-adress span {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
color: var(--fr-white) !important}

/* Phone & email — emphasis, brand light accent */
html body footer .footer-contact-phone a,html body footer .footer-contact-mail a {
font-size: 17px !important;
font-weight: 600 !important;
color: var(--fr-white) !important;
letter-spacing: 0.3px !important;
text-decoration: none !important;
display: inline-block !important;
padding: 4px 0 !important}

html body footer .footer-contact-phone a:hover,html body footer .footer-contact-mail a:hover {
color: var(--fr-light-accent) !important;
text-decoration: none !important}

html body footer .footer-contact-phone a::before {
content: "Telefon · ";
font-size: 12px;
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
display: block;
margin-bottom: 2px}

html body footer .footer-contact-mail a::before {
content: "E-mail · ";
font-size: 12px;
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
display: block;
margin-bottom: 2px}

/* Legal links (Regulamin, Polityka prywatności) — smaller, secondary */
html body footer .footer-contact-terms {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important}

html body footer .footer-contact-terms a {
font-size: 12px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 1.8px !important;
color: rgba(255, 255, 255, 0.55) !important;
text-decoration: none !important;
transition: color 0.2s ease !important}

html body footer .footer-contact-terms a:hover,html body footer .footer-contact-terms a:focus-visible {
color: var(--fr-light-accent) !important}

/* Payment + IAI banner — right column on desktop, separator on mobile */
html body .footer-contact-baner,html body .footer-contact-baner::before,html body .footer-contact-baner::after {
background: transparent !important}

html body .footer-contact-baner {
position: static !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 16px !important;
color: rgba(255, 255, 255, 0.82) !important;
border: none !important;
box-shadow: none !important}

html body .footer-contact-baner > span {
display: inline-flex !important;
align-items: center !important}

html body .footer-contact-baner svg {
fill: rgba(255, 255, 255, 0.55) !important;
height: auto !important;
display: block !important}

/* IAI logo */
html body .footer-contact-baner > span:first-child svg {
max-width: 120px !important;
opacity: 0.65 !important}

/* Payment icons (VISA + Mastercard) */
html body .footer-contact-baner > span:last-child svg {
max-width: 160px !important;
opacity: 0.85 !important}

/* DEFAULT TEXT — light gray on dark band */
html body .footer-contact-baner * {
font-family: var(--fr-font-body) !important;
color: rgba(255, 255, 255, 0.82) !important;
line-height: 1.7 !important}

/* Body text size */
html body .footer-contact-baner span,html body .footer-contact-baner p,html body .footer-contact-baner li,html body .footer-contact-baner div:not(.payments_method):not([class*="powered"]) {
font-size: 15px !important}

/* LINKS — brand accent, hover white */
html body .footer-contact-baner a {
color: var(--fr-light-accent) !important;
text-decoration: none !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
transition: color 0.2s ease !important}

html body .footer-contact-baner a:hover,html body .footer-contact-baner a:focus-visible {
color: var(--fr-white) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important}

/* HEADINGS in footer — display font, white */
html body .footer-contact-baner h1,html body .footer-contact-baner h2,html body .footer-contact-baner h3,html body .footer-contact-baner h4 {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
color: var(--fr-white) !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
margin: 0 0 16px !important}

/* v1.68 FIX: ta reguła była stosowana do pierwszego dziecka footer-contact-baner.
   Pierwsze dziecko obecnie to <span> z Visa SVG. margin-bottom:24px przesuwał
   Visa względem Mastercard (różnica 12px). Usuwam margin-bottom + height:auto. */
html body .footer-contact-baner > span:first-child > svg {
fill: rgba(255, 255, 255, 0.55) !important;
max-width: 160px !important;
display: block !important}

/* Phone + email visual emphasis */
html body .footer-contact-baner a[href^="tel:"],html body .footer-contact-baner a[href^="mailto:"] {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--fr-white) !important}

html body .footer-contact-baner a[href^="tel:"]:hover,html body .footer-contact-baner a[href^="mailto:"]:hover {
color: var(--fr-light-accent) !important}

/* Legal links (Regulamin, Polityka prywatności) — secondary tier */
html body .footer-contact-baner a[href*="terms"],html body .footer-contact-baner a[href*="cookies"] {
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: rgba(255, 255, 255, 0.55) !important}

html body .footer-contact-baner a[href*="terms"]:hover,html body .footer-contact-baner a[href*="cookies"]:hover {
color: var(--fr-light-accent) !important}

/* Payment-method strip (VISA/Mastercard) — separated band */
html body .footer-contact-baner .payments_method,html body .payments_method,html body .payments-method {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
padding: 24px 0 0 !important;
margin: 32px auto 0 !important;
text-align: center !important}

html body .payments_method img,html body .payments-method img,html body .footer-contact-baner img[alt*="visa" i],html body .footer-contact-baner img[alt*="master" i] {
filter: grayscale(0.3) brightness(1.1) !important;
opacity: 0.85 !important;
margin: 0 8px !important}

/* Powered by badge — minimal opacity */
html body .powered_by,html body .powered_by a,html body .powered_by * {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.45) !important;
letter-spacing: 0.5px !important}

/* Mobile footer — single column, centered alignment */
@media (max-width: 720px) {
html body footer {
padding: 56px 20px 28px !important;
text-align: center !important}
html body footer .footer.container,
html body footer > .footer {
grid-template-columns: 1fr !important;
gap: 32px !important}
html body .footer-contact-baner {
align-items: center !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 24px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important}
html body footer .footer-contact-adress { font-size: 18px !important}
html body footer .footer-contact-adress span { font-size: 18px !important}
html body footer .footer-contact-terms {
justify-content: center !important}
html body footer ul,
html body footer .footer ul {
align-items: center !important}
}

/* ============================================================
   16. SUBPAGE HERO + NARRATIVE (only /txt/*)
   ============================================================ */

body.page-txt main .container,body.page-txt #pageContent .container {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important}

body.page-txt main .container > .row { margin: 0 !important}
body.page-txt main .container > .row > [class^="col"] { padding: 0 !important}

.fr-page-hero {
position: relative;
min-height: 56vh;
display: flex;
align-items: flex-end;
padding: 200px 24px 80px;
overflow: hidden;
margin: 0;
background-size: cover;
background-position: center}

/* PATCH v1.6.4: stronger overlay for guaranteed white-text contrast over any photo */
.fr-page-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26, 26, 24, 0.50) 0%, rgba(42, 34, 38, 0.85) 100%)}

.fr-page-hero__inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
width: 100%}

.fr-page-hero__kicker {
display: inline-block;
font-family: var(--fr-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fr-light-accent);
padding: 8px 22px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: var(--fr-radius-pill);
margin: 0 0 22px}

/* PATCH v1.6.4: !important to override global h1 dark-text rule */
html body .fr-page-hero__title,.fr-page-hero__title {
font-family: var(--fr-font-display) !important;
font-size: clamp(36px, 5vw, 64px) !important;
font-weight: 300 !important;
line-height: 1.05 !important;
color: var(--fr-white) !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.40) !important;
margin: 0 !important}

html body .fr-page-hero__title em,.fr-page-hero__title em {
color: var(--fr-light-accent) !important;
font-style: italic !important}

html body .fr-page-hero__lead,.fr-page-hero__lead {
color: rgba(255, 255, 255, 0.96) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important}

.fr-page-hero__title em {
font-style: italic;
color: var(--fr-light-accent)}

.fr-page-hero__lead {
font-family: var(--fr-font-body);
font-size: 18px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
max-width: 640px;
margin: 22px 0 0}

.fr-narrative {
background: var(--fr-bg);
padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px)}

.fr-narrative__inner {
max-width: 1100px;
margin: 0 auto}

.fr-narrative__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
margin-bottom: 80px}

.fr-narrative__split:nth-child(even) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}

.fr-narrative__split:last-child { margin-bottom: 0}

.fr-narrative__media {
border-radius: var(--fr-radius-lg);
overflow: hidden;
box-shadow: var(--fr-shadow-md);
aspect-ratio: 5 / 6}

.fr-narrative__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block}

.fr-narrative__split--reverse .fr-narrative__media { order: 2}

.fr-narrative__text p {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.75;
color: var(--fr-text-body)}

.fr-narrative__text p:last-child { margin-bottom: 0}

/* Stats / facts row */
.fr-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 28px;
padding: 56px 0 0;
margin: 56px 0 0;
border-top: 1px solid var(--fr-border-light)}

.fr-stat {
text-align: center}

.fr-stat__num {
font-family: var(--fr-font-display);
font-size: 44px;
font-weight: 500;
color: var(--fr-primary);
line-height: 1;
display: block;
margin: 0 0 8px}

.fr-stat__label {
font-family: var(--fr-font-body);
font-size: 13px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 500}

/* ============================================================
   17. ATTRACTIONS PAGE GRID (full /txt/wroclan-warte-wroclania)
   ============================================================ */

.fr-attractions-page {
background: var(--fr-bg);
padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px)}

.fr-attractions-page__inner {
max-width: 1280px;
margin: 0 auto}

.fr-attr-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
margin-bottom: 80px;
padding-bottom: 80px;
border-bottom: 1px solid var(--fr-border-light)}

.fr-attr-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0}

.fr-attr-row--reverse .fr-attr-row__media { order: 2}

.fr-attr-row__media {
border-radius: var(--fr-radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--fr-shadow-md);
cursor: pointer}

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

.fr-attr-row__media:hover img { transform: scale(1.04)}

.fr-attr-row__title {
font-family: var(--fr-font-display);
font-size: 32px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 14px 0 12px;
line-height: 1.15}

.fr-attr-row__meta {
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--fr-primary);
font-weight: 600;
margin: 0 0 12px}

.fr-attr-row__text {
font-family: var(--fr-font-body);
font-size: 16px;
line-height: 1.75;
color: var(--fr-text-body)}

.fr-attr-row__text p { margin: 0 0 14px}
.fr-attr-row__text p:last-child { margin-bottom: 0}

/* ============================================================
   18. CORPORATE PAGE
   ============================================================ */

.fr-corp-page {
background: var(--fr-bg);
padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px)}

.fr-corp-page__inner {
max-width: 1280px;
margin: 0 auto}

.fr-corp-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
margin: 56px 0}

.fr-corp-benefit {
background: var(--fr-white);
border-radius: var(--fr-radius-lg);
padding: 32px 28px;
border: 1px solid var(--fr-border-light);
transition: transform 0.25s ease, box-shadow 0.25s ease}

.fr-corp-benefit:hover {
transform: translateY(-3px);
box-shadow: var(--fr-shadow-md)}

.fr-corp-benefit__icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(231, 187, 186, 0.45);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-primary-deep);
margin: 0 0 18px}

.fr-corp-benefit__icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
stroke-width: 1.5;
fill: none}

.fr-corp-benefit__title {
font-family: var(--fr-font-display);
font-size: 22px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0 0 10px}

.fr-corp-benefit__text {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.65;
color: var(--fr-text-body);
margin: 0}

/* ============================================================
   19. LIGHTBOX
   ============================================================ */

.fr-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out}

.fr-lightbox--open { display: flex}

.fr-lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
cursor: default}

.fr-lightbox__close {
position: absolute;
top: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.30);
color: var(--fr-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease}

.fr-lightbox__close:hover { background: rgba(255, 255, 255, 0.22)}

.fr-lightbox__close svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 2;
fill: none}

/* Cursor for lightbox-able images */
img[data-fr-lightbox] { cursor: zoom-in}

/* ============================================================
   20. UTILS / REVEAL
   ============================================================ */

.fr-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s ease, transform 0.65s ease}

.fr-reveal.is-visible {
opacity: 1;
transform: translateY(0)}

/* ============================================================
   21. /OFFERS LIST PAGE TWEAKS
   ============================================================ */

html body.page-offers main {
background: var(--fr-bg) !important}

html body.page-offers .offer,html body.page-offers .offers-list .offer-card,html body.page-offers .offer-card {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
box-shadow: var(--fr-shadow-sm) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important}

html body.page-offers .offer:hover,html body.page-offers .offer-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--fr-shadow-md) !important}

html body.page-offers h1,html body.page-offers h2,html body.page-offers h3 {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important}

html body.page-offers .price,html body.page-offer .price {
color: var(--fr-primary) !important;
font-family: var(--fr-font-display) !important;
font-weight: 600 !important}

/* ============================================================
   22. /CONTACT PAGE TWEAKS (preserve Bootstrap grid)
   ============================================================ */

html body.page-contact main { background: var(--fr-bg) !important}

html body.page-contact h1,html body.page-contact h2,html body.page-contact h3 {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important}

html body.page-contact input,html body.page-contact select,html body.page-contact textarea {
border-radius: var(--fr-radius-md) !important;
border: 1px solid var(--fr-border-light) !important;
font-family: var(--fr-font-body) !important;
font-size: 15px !important;
padding: 12px 16px !important;
min-height: 46px !important}

html body.page-contact input:focus,html body.page-contact select:focus,html body.page-contact textarea:focus {
border-color: var(--fr-primary) !important;
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.18) !important;
outline: none !important}

/* ============================================================
   23. RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {
.fr-hero__inner {
grid-template-columns: 1fr;
gap: 48px;
padding: 110px 24px 70px;
text-align: left}

.fr-hero__search { max-width: 460px}

.fr-about,
.fr-corp__split,
.fr-attr-row {
grid-template-columns: 1fr;
gap: 40px}

.fr-narrative__split {
grid-template-columns: 1fr;
gap: 36px;
margin-bottom: 56px}

.fr-narrative__split--reverse .fr-narrative__media { order: 0}
.fr-attr-row--reverse .fr-attr-row__media { order: 0}

.fr-about__media { aspect-ratio: 16 / 11}
.fr-corp__media { aspect-ratio: 16 / 11}
.fr-narrative__media { aspect-ratio: 16 / 11}
}

/* ============================================================
   24. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
.fr-section { padding: 64px 20px}

.fr-hero-wrap { min-height: 92vh}

.fr-hero__inner { padding: 100px 20px 60px; gap: 40px}

.fr-hero__title {
font-size: clamp(34px, 9vw, 48px) !important}

.fr-hero__lead { font-size: 16px}

.fr-hero__facts { gap: 24px}

.fr-hero__fact strong { font-size: 26px}

.fr-hero__search { padding: 26px 22px}

.fr-h1 { font-size: clamp(34px, 8vw, 48px)}
.fr-h2 { font-size: clamp(28px, 6.5vw, 36px)}

.fr-section__header { margin-bottom: 40px}

.fr-feature {
grid-template-columns: 48px 1fr;
gap: 16px}

.fr-feature__icon { width: 48px; height: 48px}
.fr-feature__icon svg { width: 22px; height: 22px}

.fr-apt-grid { gap: 24px}
.fr-apt-body { padding: 22px 22px 24px}

.fr-loc-grid { gap: 18px}
.fr-loc-card { padding: 26px 22px}

.fr-corp__list li { font-size: 15px}

.fr-attr-grid {
grid-template-columns: 1fr 1fr;
gap: 14px}

.fr-attr-card__title { font-size: 18px}

.fr-attr-row__title { font-size: 26px}

.fr-stat__num { font-size: 36px}
.fr-stats { gap: 22px; padding: 40px 0 0; margin: 40px 0 0}

.fr-page-hero {
min-height: 44vh;
padding: 160px 20px 56px}

.fr-page-hero__title { font-size: clamp(30px, 7.5vw, 44px)}
.fr-page-hero__lead { font-size: 16px}

html body .fr-final-cta {
padding: 80px 20px !important}

html body .fr-final-cta h2,
html body .fr-final-cta .fr-h2 {
font-size: clamp(28px, 7vw, 38px) !important}

html body .fr-final-cta__contact {
flex-direction: column;
gap: 18px}

.fr-btn { padding: 14px 24px; font-size: 13px; min-height: 48px}
}

/* ============================================================
   25. RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
.fr-attr-grid { grid-template-columns: 1fr}

.fr-hero__cta-row {
flex-direction: column;
width: 100%}

.fr-hero__cta-row .fr-btn {
width: 100%}

.fr-final-cta__cta-row .fr-btn {
width: 100%}

.fr-stats { grid-template-columns: 1fr 1fr}

.fr-hero__facts {
flex-direction: column;
gap: 18px;
align-items: flex-start}
}

/* ============================================================
   26. PAGE-INDEX FULL WIDTH + HIDE SYSTEM DUPLICATES
   ============================================================ */

html body.page-index main .container,html body.page-index #pageContent .container,html body.page-index main > .container,html body.page-index .section_sub.container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important}

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

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

html body.page-index main {
padding: 0 !important}

/* Hide system H1 and H2 that ship with default homepage placeholder */
html body.page-index .section.parallax h1:not(.fr-hero__title):not([class*="fr-"]),html body.page-index .section.parallax h2:not([class*="fr-"]),html body.page-index .section.parallax > h1,html body.page-index .section.parallax > h2,html body.page-index .section.parallax .fp-tableCell > h1:not(.fr-hero__title):not([class*="fr-"]),html body.page-index .section.parallax .fp-tableCell > h2:not([class*="fr-"]) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
left: -9999px !important}

/* Hide entire .cmshotspot (system "Wyróżnione Oferty" container with searcher) */
html body .cmshotspot,html body .row.cmshotspot,html body .section_sub.cmshotspot {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important}

/* Hide system search widget if it appears anywhere outside of cmshotspot */
html body.page-index .searcher,html body.page-index .iai-booking-search:not(.fr-search),html body.page-index .booking-search:not(.fr-search),html body.page-index #booking-engine-form:not(.fr-search),html body.page-index form[action*="search"]:not(.fr-search):not([class*="fr-"]),html body.page-index .searcher_default,html body.page-index .row.searcher {
display: none !important}

/* Hide system page header strip on homepage (duplicate of our hero) */
html body.page-index .page-header,html body.page-index .breadcrumb,html body.page-index .breadcrumbs {
display: none !important}

/* ============================================================
   27. /OFFERS LIST PAGE — COMPREHENSIVE STYLING
   ============================================================ */

html body.page-offers main,html body.page-offers #pageContent {
background: var(--fr-bg) !important;
padding: clamp(120px, 14vw, 160px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 80px) !important}

html body.page-offers .container {
max-width: 1320px !important}

html body.page-offers h1,html body.page-offers .page-title,html body.page-offers .h1 {
font-family: var(--fr-font-display) !important;
font-size: clamp(36px, 4.5vw, 52px) !important;
font-weight: 400 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 12px !important;
line-height: 1.1 !important}

html body.page-offers .page-subtitle,html body.page-offers .lead {
font-family: var(--fr-font-body) !important;
font-size: 16px !important;
color: var(--fr-text-muted) !important;
margin: 0 0 36px !important}

/* Filters sidebar */
html body.page-offers #menu_filter_form,html body.page-offers .filters-sidebar,html body.page-offers aside.filters,html body.page-offers .left-side-filter {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 28px 24px !important;
box-shadow: var(--fr-shadow-sm) !important}

html body.page-offers .filter-title,html body.page-offers .filters-title,html body.page-offers #menu_filter_form > h2,html body.page-offers #menu_filter_form > h3,html body.page-offers #menu_filter_form .filter_section_title,html body.page-offers .filter-section__title {
font-family: var(--fr-font-display) !important;
font-size: 18px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 14px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid var(--fr-border-light) !important;
letter-spacing: 0 !important;
text-transform: none !important}

html body.page-offers .filter_section,html body.page-offers .filter-section {
margin: 0 0 20px !important;
padding: 0 0 20px !important;
border-bottom: 1px solid var(--fr-border-light) !important}

html body.page-offers .filter_section:last-child,html body.page-offers .filter-section:last-child {
border-bottom: none !important}

html body.page-offers input[type="text"],html body.page-offers input[type="number"],html body.page-offers input[type="date"],html body.page-offers input[type="search"],html body.page-offers select {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-dark) !important;
background: var(--fr-bg) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-md) !important;
padding: 10px 14px !important;
min-height: 42px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important}

html body.page-offers input:focus,html body.page-offers select:focus {
border-color: var(--fr-primary) !important;
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.18) !important;
outline: none !important}

html body.page-offers input[type="checkbox"],html body.page-offers input[type="radio"] {
accent-color: var(--fr-primary) !important}

html body.page-offers label {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-body) !important;
font-weight: 500 !important}

/* Sort dropdown */
html body.page-offers .sort-by,html body.page-offers .sortby,html body.page-offers .results-header,html body.page-offers .offers-header,html body.page-offers .listing-header {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-md) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 14px 20px !important;
margin: 0 0 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 14px !important}

html body.page-offers .results-count,html body.page-offers .offers-count {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-muted) !important;
font-weight: 500 !important}

/* Pagination */
html body.page-offers .pagination,html body.page-offers .pager {
display: flex !important;
justify-content: center !important;
gap: 6px !important;
margin: 56px 0 0 !important;
list-style: none !important;
padding: 0 !important}

html body.page-offers .pagination a,html body.page-offers .pagination li a,html body.page-offers .pagination .page-link,html body.page-offers .pager a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 14px !important;
border-radius: var(--fr-radius-md) !important;
border: 1px solid var(--fr-border-light) !important;
background: var(--fr-white) !important;
color: var(--fr-text-dark) !important;
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.2s ease !important}

html body.page-offers .pagination a:hover,html body.page-offers .pagination .page-link:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-primary-deep) !important}

html body.page-offers .pagination .active a,html body.page-offers .pagination li.active .page-link,html body.page-offers .pagination .current {
background: var(--fr-primary) !important;
border-color: var(--fr-primary) !important;
color: var(--fr-white) !important}

/* Offer cards on listing */
html body.page-offers .offer,html body.page-offers .offers-list .offer,html body.page-offers .offers-grid .offer,html body.page-offers article.offer-card {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
box-shadow: var(--fr-shadow-sm) !important;
overflow: hidden !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
margin: 0 0 24px !important}

html body.page-offers .offer:hover,html body.page-offers article.offer-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--fr-shadow-md) !important;
border-color: var(--fr-border-medium) !important}

html body.page-offers .offer h3,html body.page-offers .offer h2,html body.page-offers .offer .offer__title,html body.page-offers article.offer-card h3 {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 8px !important}

html body.page-offers .offer__description,html body.page-offers .offer p {
font-family: var(--fr-font-body) !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
color: var(--fr-text-body) !important}

html body.page-offers .offer__price,html body.page-offers .price,html body.page-offer .price {
font-family: var(--fr-font-display) !important;
color: var(--fr-primary) !important;
font-weight: 600 !important}

html body.page-offers .offer__price .price-value,html body.page-offers .price-value {
font-size: 24px !important}

/* No results / empty state */
html body.page-offers .empty-state,html body.page-offers .no-results {
text-align: center !important;
padding: 72px 24px !important;
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important}

/* ============================================================
   28. /OFFER (single offer detail) — STYLING
   ============================================================ */

html body.page-offer main,html body.page-offer #pageContent {
background: var(--fr-bg) !important;
padding: clamp(120px, 14vw, 160px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 80px) !important}

html body.page-offer h1,html body.page-offer .offer-title,html body.page-offer .h1 {
font-family: var(--fr-font-display) !important;
font-size: clamp(34px, 4.4vw, 48px) !important;
font-weight: 400 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 14px !important;
line-height: 1.1 !important}

html body.page-offer h2,html body.page-offer h3 {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important}

html body.page-offer .offer-gallery img,html body.page-offer .gallery img,html body.page-offer .offer-photo img {
border-radius: var(--fr-radius-md) !important}

html body.page-offer .offer-features,html body.page-offer .amenities,html body.page-offer .features-list {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 28px !important}

html body.page-offer .booking-form,html body.page-offer .reservation-form,html body.page-offer aside {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 28px !important;
box-shadow: var(--fr-shadow-md) !important}

html body.page-offer input,html body.page-offer select,html body.page-offer textarea {
font-family: var(--fr-font-body) !important;
font-size: 15px !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-md) !important;
padding: 12px 16px !important;
min-height: 46px !important}

html body.page-offer input:focus,html body.page-offer select:focus,html body.page-offer textarea:focus {
border-color: var(--fr-primary) !important;
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.18) !important;
outline: none !important}

/* ============================================================
   29. CONTACT — EXTENDED
   ============================================================ */

html body.page-contact main,html body.page-contact #pageContent {
padding: clamp(120px, 14vw, 160px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 80px) !important}

html body.page-contact h1,html body.page-contact .h1 {
font-family: var(--fr-font-display) !important;
font-size: clamp(34px, 4.4vw, 52px) !important;
font-weight: 400 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 12px !important;
line-height: 1.1 !important}

html body.page-contact textarea {
min-height: 140px !important;
font-family: var(--fr-font-body) !important;
font-size: 15px !important;
padding: 14px 16px !important}

html body.page-contact .form-group,html body.page-contact .field {
margin-bottom: 18px !important}

html body.page-contact label {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--fr-text-body) !important;
letter-spacing: 0.3px !important;
margin: 0 0 6px !important;
display: block !important}

/* ============================================================
   30. /TXT/* SUBPAGE EXTRA OVERRIDES (page-txt)
   ============================================================ */

html body.page-txt main,html body.page-txt #pageContent {
padding: 0 !important;
background: var(--fr-bg) !important}

html body.page-txt h1:not(.fr-page-hero__title):not([class*="fr-"]) {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important}

/* Hide systemowy H1 + page header + subtitle na /txt — wszystkie warianty */
html body.page-txt .page-header,html body.page-txt .page-header h1,html body.page-txt .page-subtitle,html body.page-txt .page-title:not([class*="fr-"]),html body.page-txt main > h1:not([class*="fr-"]),html body.page-txt #pageContent > h1:not([class*="fr-"]),html body.page-txt main > .container > h1:not([class*="fr-"]),html body.page-txt #pageContent > .container > h1:not([class*="fr-"]),html body.page-txt main > .container > .row > [class^="col"] > h1:not([class*="fr-"]),html body.page-txt #pageContent > .container > .row > [class^="col"] > h1:not([class*="fr-"]),html body.page-txt main > h2:not([class*="fr-"]),html body.page-txt #pageContent > h2:not([class*="fr-"]),html body.page-txt .breadcrumb,html body.page-txt .breadcrumbs,html body.page-txt h1.h1:not([class*="fr-"]) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
left: -9999px !important}

/* ============================================================
   30b. SUBPAGE FOOTER GAP FIX
   ============================================================ */

html body.page-txt main,html body.page-txt #pageContent,html body.page-contact main,html body.page-contact #pageContent,html body.page-offers main,html body.page-offers #pageContent,html body.page-offer main,html body.page-offer #pageContent {
padding-bottom: 0 !important;
margin-bottom: 0 !important}

html body:not(.page-index) .footer-contact-baner,html body:not(.page-index) footer {
margin-top: 0 !important}

html body:not(.page-index) .fr-final-cta + .footer-contact-baner,html body:not(.page-index) .fr-final-cta + footer {
margin-top: 0 !important;
border-top: none !important}

html body main + .footer-contact-baner,html body #pageContent + .footer-contact-baner,html body main ~ footer:last-of-type {
margin-top: 0 !important}

/* gallery-lightbox margin reset (validator hint) */
html body .gallery-lightbox,html body .ido-gallery,html body .ido-lightbox {
margin-bottom: 0 !important}

/* ============================================================
   30c. PROCESS STEPS (Dla Firm — 4 kroki)
   ============================================================ */

.fr-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: fr-step}

.fr-step {
display: grid;
grid-template-columns: 64px 1fr;
gap: 20px;
margin-bottom: 32px;
counter-increment: fr-step}

.fr-step:last-child { margin-bottom: 0}

.fr-step__num {
font-family: var(--fr-font-display);
font-size: 38px;
font-weight: 500;
color: var(--fr-primary);
line-height: 1;
padding-top: 4px}

.fr-step__title {
font-family: var(--fr-font-display);
font-size: 22px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0 0 6px}

.fr-step__text {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.65;
color: var(--fr-text-body);
margin: 0}

@media (max-width: 480px) {
.fr-step {
grid-template-columns: 48px 1fr;
gap: 14px;
margin-bottom: 24px}
.fr-step__num { font-size: 30px}
.fr-step__title { font-size: 19px}
}

/* ============================================================
   31. NAVBAR-COLLAPSE MOBILE MENU STYLING
   ============================================================ */

@media (max-width: 991.98px) {
html body header.default13 .navbar-collapse {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-md) !important;
margin-top: 14px !important;
padding: 14px 16px !important;
box-shadow: var(--fr-shadow-md) !important;
border: 1px solid var(--fr-border-light) !important}

html body header.default13 .navbar-collapse .nav-link.nav-link,
html body header.default13 .navbar-collapse a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
color: var(--fr-text-dark) !important;
padding: 14px 12px !important;
border-bottom: 1px solid var(--fr-border-light) !important;
text-align: left !important;
border-radius: 0 !important;
font-family: var(--fr-font-body) !important}

html body header.default13 .navbar-collapse .nav-link.nav-link:last-child,
html body header.default13 .navbar-collapse a:last-child {
border-bottom: none !important}

html body header.default13 .navbar-collapse .nav-link.nav-link:hover {
color: var(--fr-primary) !important;
background: var(--fr-bg) !important}

html body header.default13 .navbar-collapse .language__toggler {
margin-top: 12px !important;
width: 100% !important;
justify-content: center !important;
color: var(--fr-primary) !important;
border-color: var(--fr-primary) !important}
}

/* ============================================================
   32. /OFFERS SYSTEM TRAPS — TRAP #13, #14, #16, etc.
   ============================================================ */

/* TRAP #13 — hide system search bar on ALL pages
   (homepage has custom command bar, /offers has filter sidebar, /txt makes no sense) */
html body .iai-search:not(.fr-search):not(.fr-cmd-bar__form),html body #iai_book_se,html body #iai_book_form:not(.fr-search):not(.fr-cmd-bar__form),html body .iai-search-wrapper,html body .row.searcher,html body .searcher_default {
display: none !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important}

/* TRAP #14 — FontAwesome NOT loaded on default13.
   Hide broken FA icons in filter headers (replaced with CSS chevron below). */
html body.page-offers .filter_header .fa,html body.page-offers .filter_header .fa-angle-down,html body.page-offers .filter_header .fa-angle-up,html body.page-offers .filter_header [class^="fa-"],html body.page-offers .filter_header [class*=" fa-"] {
display: none !important}

/* Filter header — branded layout with CSS chevron */
html body.page-offers .filter_header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer !important;
padding: 14px 18px !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-md) !important;
margin-bottom: 8px !important;
background: var(--fr-white) !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
color: var(--fr-text-dark) !important;
transition: background 0.2s ease, border-color 0.2s ease !important}

html body.page-offers .filter_header:hover {
background: var(--fr-bg) !important;
border-color: var(--fr-border-medium) !important}

/* CSS chevron replacement for missing FontAwesome */
html body.page-offers .filter_header::after {
content: "" !important;
display: inline-block !important;
flex-shrink: 0 !important;
width: 9px !important;
height: 9px !important;
border-right: 2px solid var(--fr-primary) !important;
border-bottom: 2px solid var(--fr-primary) !important;
transform: rotate(45deg) !important;
transition: transform 0.3s ease !important;
margin-bottom: 3px !important}

html body.page-offers .filter_header[aria-expanded="true"]::after {
transform: rotate(-135deg) !important;
margin-top: 3px !important;
margin-bottom: 0 !important}

/* Bootstrap collapse guard — desktop only (v1.48 fix: mobile auto-expand) */
@media (min-width: 992px) {
html body.page-offers .filter_content.collapse:not(.show) {
display: none !important}
}

html body.page-offers .filter_content.collapse.show {
display: block !important;
height: auto !important;
overflow: visible !important;
padding: 14px 4px 18px !important}

/* TRAP #16 — span.btn line-height 49px override */
html body.page-offers span.btn,html body.page-offers .accommodation-buttons span.btn,html body .offer span.btn {
line-height: 1.4 !important;
height: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 24px !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
background: var(--fr-primary) !important;
color: var(--fr-white) !important;
border-radius: var(--fr-radius-pill) !important;
border: 2px solid var(--fr-primary) !important;
min-height: 44px !important;
text-decoration: none !important;
transition: all 0.2s ease !important}

html body.page-offers span.btn:hover,html body .offer span.btn:hover {
background: var(--fr-primary-hover) !important;
border-color: var(--fr-primary-hover) !important;}

/* .index-info z-index reset — system traps it above hero */
html body .index-info {
z-index: 1 !important;
pointer-events: none !important;
overflow: visible !important}

html body .index-info * {
pointer-events: none !important}

html body .index-info button,html body .index-info .navbar-reservation {
display: none !important}

/* Force Inter on system widgets (litepicker, flatpickr, iai-search) */
html body .litepicker,html body .litepicker *,html body .container__months,html body .container__months *,html body .month-item,html body .month-item *,html body .day-item,html body .container__days,html body .container__days *,html body .flatpickr-calendar,html body .flatpickr-calendar *,html body .iai-search,html body .iai-search *,html body #iai_book_form,html body #iai_book_form *,html body .widget__option,html body .widget__option * {
font-family: var(--fr-font-body) !important}

/* Force DM Serif Display on Litepicker month names */
html body .litepicker .cur-month,html body .litepicker .month-item-name,html body .container__months .cur-month {
font-family: var(--fr-font-display) !important;
font-weight: 500 !important}

/* Persons dropdown chevron — system btn 8x8 invisible without FA */
html body #iai_book_form .widget__option.iai_input-small .iai_widget_btn,html body .iai-search .widget__option .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}

html body #iai_book_form .widget__option.iai_input-small .iai_widget_btn::after,html body .iai-search .widget__option .iai_widget_btn::after {
content: '' !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid var(--fr-text-dark) !important;
border-bottom: 2px solid var(--fr-text-dark) !important;
transform: rotate(45deg) !important;
margin: 2px auto 0 !important}

/* Form button on system widgets */
html body .formbutton,html body #iai_book_form .formbutton {
background: var(--fr-primary) !important;
color: var(--fr-white) !important;
border: none !important;
border-radius: var(--fr-radius-pill) !important;
font-family: var(--fr-font-body) !important;
font-weight: 600 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
padding: 14px 28px !important;
cursor: pointer !important}

html body .formbutton:hover,html body #iai_book_form .formbutton:hover {
background: var(--fr-primary-hover) !important}

/* /offer detail — hide d-none search and book form (system toggle) */
html body.page-offer #iai_book_form.d-none,html body.page-offer .iai-search.d-none {
display: none !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important}

/* /offer price circle — system renders 244x161 oval, force 150 circle */
html body .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(--fr-primary) !important;
color: var(--fr-white) !important;
font-family: var(--fr-font-display) !important}

/* /offer tabs sticky — system uses --fixed (BEM modifier), not .sticky
   v1.40: top 88→65 zeby skleic z header scrolled (65px) bez luki */
html body .tabs.--fixed {
position: fixed !important;
top: 65px !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
margin: 0 !important;
z-index: 1000 !important;
background: var(--fr-white) !important;
box-shadow: var(--fr-shadow-sm) !important}

/* All headings and text on /offers + /offer should use brand fonts */
html body.page-offers .filter_section_title,html body.page-offers .filter_title,html body.page-offers .sidebar h4,html body.page-offers h4,html body.page-offer h4 {
font-family: var(--fr-font-display) !important;
color: var(--fr-text-dark) !important}

/* "Brak wyników" / empty state on /offers */
html body.page-offers .offers-empty,html body.page-offers .empty,html body.page-offers .no-offers {
text-align: center !important;
padding: 64px 24px !important;
background: var(--fr-white) !important;
border-radius: var(--fr-radius-lg) !important;
border: 1px solid var(--fr-border-light) !important;
font-family: var(--fr-font-body) !important;
color: var(--fr-text-muted) !important}

/* ============================================================
   33. LITEPICKER COMPREHENSIVE BRAND STYLING
   ============================================================ */

html body .litepicker {
font-family: var(--fr-font-body) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-lg) !important;
box-shadow: var(--fr-shadow-lg) !important;
background: var(--fr-white) !important;
padding: 18px !important}

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

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

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

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

html body .litepicker .button-previous-month:hover,html body .litepicker .button-next-month:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-primary-deep) !important}

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

html body .litepicker .container__days .day-item:hover:not(.is-locked) {
background: var(--fr-light-accent) !important;
color: var(--fr-primary-deep) !important}

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

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

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

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

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

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

html body .litepicker .container__days .week-number {
color: var(--fr-text-muted) !important;
font-size: 11px !important;
font-weight: 500 !important}

/* Day-of-week header */
html body .litepicker .container__days > div:nth-child(-n+7),html body .litepicker .container__days .day-name {
color: var(--fr-text-muted) !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-weight: 600 !important}

/* Litepicker footer/buttons (Wyczyść, Dzisiaj) */
html body .litepicker .container__footer {
border-top: 1px solid var(--fr-border-light) !important;
margin-top: 12px !important;
padding: 12px 4px 4px !important;
display: flex !important;
justify-content: space-between !important}

html body .litepicker .container__footer .button-apply,html body .litepicker .container__footer .button-cancel,html body .litepicker .container__footer button {
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.6px !important;
color: var(--fr-primary) !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 6px 10px !important}

html body .litepicker .container__footer .button-apply:hover,html body .litepicker .container__footer button:hover {
color: var(--fr-primary-hover) !important;
text-decoration: underline !important}

/* Native input[type=date] popover (Chrome-only) — best-effort brand color */
html body input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(54%) sepia(13%) saturate(1145%) hue-rotate(297deg) brightness(91%) contrast(85%);
cursor: pointer}

/* PATCH v1.6: Litepicker responsive 2-month layout
   System Litepicker on /offer renders 2 months stacked (flex-direction:column).
   Force grid 2-col on desktop so months sit side-by-side.
   Mobile (<720px) keeps single column / single month for usability. */
html body .litepicker .container__main {
width: auto !important;
max-width: none !important}

@media (min-width: 720px) {
html body .litepicker .container__months,
html body .litepicker .container__months.columns-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
width: auto !important;
min-width: 660px !important}
html body .litepicker .container__months > .month-item {
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important}
}

@media (max-width: 719px) {
html body .litepicker .container__months {
display: flex !important;
flex-direction: column !important;
width: 100% !important}
html body .litepicker .container__months > .month-item {
width: 100% !important}
html body .litepicker {
max-width: calc(100vw - 24px) !important}
}

/* ============================================================
   34. NEW HERO — UNIQUE LAYOUT (centered big typography)
   ============================================================ */

/* Hero v3: 100vh, text top, search bar bottom — both visible without scroll */
.fr-hero-v2 {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
overflow: hidden}

.fr-hero-v2__bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center}

.fr-hero-v2__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 14, 16, 0.18) 0%, rgba(20, 14, 16, 0.08) 35%, rgba(20, 14, 16, 0.30) 70%, rgba(20, 14, 16, 0.50) 100%)}

.fr-hero-v2__inner {
position: relative;
z-index: 2;
width: 100%;
display: grid;
grid-template-rows: 1fr auto auto;
flex: 1;
min-height: 100vh;
padding: 130px 24px 32px;
max-width: 1280px;
margin: 0 auto}

.fr-hero-v2__text {
align-self: center;
text-align: center;
max-width: 920px;
margin: 0 auto}

.fr-hero-v2__kicker {
display: inline-block;
font-family: var(--fr-font-body);
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: var(--fr-light-accent);
padding: 9px 24px;
border: 1px solid rgba(231, 187, 186, 0.55);
border-radius: var(--fr-radius-pill);
margin: 0 0 28px;
backdrop-filter: blur(6px);
background: rgba(0, 0, 0, 0.18)}

.fr-hero-v2__title {
font-family: var(--fr-font-display);
font-size: clamp(44px, 7.2vw, 96px) !important;
font-weight: 400 !important;
line-height: 0.96 !important;
color: var(--fr-white) !important;
margin: 0 0 24px !important;
letter-spacing: -0.02em;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.30)}

.fr-hero-v2__title em {
font-style: italic;
color: var(--fr-light-accent);
font-weight: 300;
display: block}

/* PATCH v1.6.5: TDD-fixed responsive typography for mobile S (<360px)
   Audit results: viewport 320 = 3 overflow elements (hero title, lead, btn--outline)
   Fix: tighter padding + smaller min font-size + max-width 100% on buttons */
@media (max-width: 359px) {
  /* Safety net for very small phones (Galaxy Fold etc) — fullpage.js may
     keep section width >320px; clip horizontal overflow at body level */
html body { overflow-x: hidden !important; max-width: 100vw !important}
html body .fr-hero-v2,
html body .fr-hero-v2__inner,
html body .fr-hero-v2__text { max-width: 100vw !important; overflow-x: hidden !important}
.fr-hero-v2__inner {
padding: 100px 12px 24px !important}
.fr-hero-v2__title {
font-size: clamp(26px, 8vw, 38px) !important;
line-height: 1.05 !important}
.fr-hero-v2__lead {
font-size: 13px !important;
line-height: 1.55 !important;
padding: 0 8px !important}
.fr-btn,
.fr-btn--outline,
.fr-btn--primary,
.fr-btn--ghost-light {
max-width: 100% !important;
width: auto !important;
padding: 14px 16px !important;
font-size: 12px !important;
letter-spacing: 1.2px !important;
white-space: normal !important;
word-wrap: break-word !important}
.fr-section,
.fr-section__inner {
padding-left: 16px !important;
padding-right: 16px !important}
.fr-h2 {
font-size: clamp(22px, 6.5vw, 30px) !important}
}

/* PATCH v1.6.5: bold lead per user request — was 500, now 700 for emphasis.
   PATCH v1.6.7: color #000 -> #FFFFFF + dark text-shadow for readability on
   the photo hero (user feedback: "zrob go bialy"). */
.fr-hero-v2__lead {
font-family: var(--fr-font-body);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.7;
color: #FFFFFF;
max-width: 640px;
margin: 0 auto 36px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.55);
font-weight: 700;
letter-spacing: 0.2px;
background: none;
padding: 0;
border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: block;
border: none}

.fr-hero-v2__cta-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 56px}

/* Hero search bar — DOCKED at bottom of hero, always visible */
.fr-hero-v2__search {
background: rgba(255, 255, 255, 0.97);
border-radius: var(--fr-radius-lg);
padding: 22px clamp(20px, 3vw, 32px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
backdrop-filter: saturate(140%) blur(14px);
align-self: end;
margin: 0 auto 24px;
width: 100%;
max-width: 1180px}

.fr-hero-v2__search .fr-cmd-bar__head {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fr-border-light)}

.fr-hero-v2__search .fr-cmd-bar__title {
font-size: 19px}

.fr-hero-v2__search .fr-cmd-bar__form {
gap: 14px}

.fr-hero-v2__facts {
display: flex;
justify-content: center;
gap: clamp(24px, 4vw, 56px);
flex-wrap: wrap;
align-self: end;
padding: 18px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
max-width: 720px;
margin: 0 auto}

.fr-hero-v2__fact {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center}

.fr-hero-v2__fact strong {
font-family: var(--fr-font-display);
font-size: 26px;
font-weight: 500;
color: var(--fr-light-accent);
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40)}

.fr-hero-v2__fact span {
font-size: 10.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40)}

@media (max-width: 1100px) {
.fr-hero-v2 { min-height: auto}
.fr-hero-v2__inner { padding: 110px 18px 24px; min-height: auto}
.fr-hero-v2__title { font-size: clamp(38px, 8vw, 64px) !important}
.fr-hero-v2__search { padding: 18px 18px; margin-bottom: 18px}
.fr-hero-v2__cta-row { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto}
.fr-hero-v2__cta-row .fr-btn { width: 100%}
.fr-hero-v2__facts { gap: 18px; padding-top: 14px}
.fr-hero-v2__fact strong { font-size: 22px}
}

@media (max-width: 600px) {
.fr-hero-v2__inner { padding: 100px 14px 18px}
.fr-hero-v2__title { font-size: clamp(34px, 9vw, 48px) !important}
.fr-hero-v2__lead { font-size: 15px}
.fr-hero-v2__search { padding: 16px 14px}
.fr-hero-v2__facts { gap: 14px}
.fr-hero-v2__fact { flex: 0 0 calc(50% - 8px)}
}

/* ============================================================
   35. COMMAND BAR — custom search docked under hero
   ============================================================ */

/* External fr-cmd-bar — only used if NOT inside hero (legacy / fallback) */
.fr-cmd-bar:not(.fr-hero-v2__search) {
background: var(--fr-white);
position: relative;
z-index: 5;
margin: 32px auto;
max-width: 1180px;
width: calc(100% - 48px);
border-radius: var(--fr-radius-lg);
box-shadow: 0 24px 60px rgba(26, 26, 24, 0.16);
padding: 28px clamp(20px, 3vw, 36px);
border: 1px solid var(--fr-border-light)}

.fr-cmd-bar__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--fr-border-light)}

.fr-cmd-bar__title {
font-family: var(--fr-font-display);
font-size: 24px;
font-weight: 500;
color: var(--fr-text-dark);
margin: 0}

.fr-cmd-bar__hint {
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 600}

.fr-cmd-bar__form {
display: grid;
grid-template-columns: 1.1fr 1.1fr 0.9fr 1fr auto;
gap: 18px;
align-items: end}

.fr-cmd-bar__field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0}

.fr-cmd-bar__label {
font-family: var(--fr-font-body);
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 600}

.fr-cmd-bar__input,.fr-cmd-bar__select {
font-family: var(--fr-font-body);
font-size: 15px;
color: var(--fr-text-dark);
background: var(--fr-bg);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
padding: 14px 16px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-height: 52px;
width: 100%}

.fr-cmd-bar__input:focus,.fr-cmd-bar__select:focus {
border-color: var(--fr-primary);
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.20)}

.fr-cmd-bar__submit {
background: var(--fr-primary);
color: var(--fr-white);
border: 2px solid var(--fr-primary);
font-family: var(--fr-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
padding: 16px 32px;
border-radius: var(--fr-radius-pill);
cursor: pointer;
min-height: 56px;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(226, 215, 0, 0.32)}

.fr-cmd-bar__submit:hover {
background: var(--fr-primary-hover);
border-color: var(--fr-primary-hover);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(200, 189, 0, 0.40)}

.fr-cmd-bar__submit svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none}

@media (max-width: 1100px) {
.fr-cmd-bar__form {
grid-template-columns: 1fr 1fr;
gap: 16px}
.fr-cmd-bar__submit { grid-column: 1 / -1; width: 100%}
}

@media (max-width: 600px) {
.fr-cmd-bar {
margin-top: -36px;
padding: 24px 20px;
width: calc(100% - 24px)}
.fr-cmd-bar__form { grid-template-columns: 1fr; gap: 14px}
.fr-cmd-bar__title { font-size: 21px}
}

/* ============================================================
   36. ATTRACTIONS PAGE — UX FIXES (contrast, alignment)
   ============================================================ */

/* Equal-height attraction rows + improved typography */
html body .fr-attr-row {
align-items: stretch !important}

html body .fr-attr-row > div:last-child {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 8px 0 !important}

html body .fr-attr-row__title {
color: var(--fr-text-dark) !important;
font-size: clamp(28px, 3.2vw, 38px) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
margin: 6px 0 14px !important;
letter-spacing: -0.005em !important}

html body .fr-attr-row__meta {
color: var(--fr-primary-deep) !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 2px !important;
margin: 0 0 8px !important}

html body .fr-attr-row__text {
color: var(--fr-text-dark) !important;
font-size: 16.5px !important;
line-height: 1.75 !important}

html body .fr-attr-row__text p {
color: var(--fr-text-body) !important;
margin: 0 0 14px !important}

html body .fr-attr-row__text p:last-child {
margin-bottom: 0 !important}

html body .fr-attr-row__text strong {
color: var(--fr-text-dark) !important;
font-weight: 600 !important}

/* Attraction cards on homepage — readable title contrast */
html body .fr-attr-card {
background: var(--fr-cream) !important}

html body .fr-attr-card .fr-attr-card__body {
background: linear-gradient(180deg, transparent 0%, rgba(26, 26, 24, 0.42) 35%, rgba(26, 26, 24, 0.92) 100%) !important;
padding: 28px 22px 24px !important}

html body .fr-attr-card .fr-attr-card__title {
color: var(--fr-white) !important;
font-size: 24px !important;
font-weight: 500 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
margin: 0 !important}

html body .fr-attr-card .fr-attr-card__meta {
color: var(--fr-light-accent) !important;
font-weight: 700 !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
margin: 0 0 8px !important}

/* Page hero on subpages — stronger overlay for readable text */
html body .fr-page-hero::after {
background: linear-gradient(180deg, rgba(26, 26, 24, 0.55) 0%, rgba(26, 26, 24, 0.85) 100%) !important}

html body .fr-page-hero__lead {
color: rgba(255, 255, 255, 0.96) !important;
font-weight: 400 !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30) !important}

/* Narrative section — improved text contrast */
html body .fr-narrative__text p {
color: var(--fr-text-dark) !important;
font-size: 16.5px !important;
line-height: 1.75 !important;
font-weight: 400 !important}

html body .fr-narrative__text p strong {
color: var(--fr-primary-deep) !important;
font-weight: 600 !important}

html body .fr-text {
color: var(--fr-text-dark) !important}

/* Section headers — equal margins, no skewed alignment */
html body .fr-section__header {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important}

html body .fr-section__header .fr-rule,html body .fr-narrative .fr-rule,html body .fr-attr-row .fr-rule {
display: block !important;
width: 60px !important;
margin: 14px auto 22px !important}

html body .fr-attr-row .fr-rule {
margin: 0 0 18px !important}

html body .fr-narrative__text .fr-rule {
margin: 14px 0 22px !important}

/* Lead text on subpages — dark contrast on cream */
html body .fr-section--cream .fr-lead,html body .fr-section--bg .fr-lead,html body .fr-narrative .fr-lead {
color: var(--fr-text-dark) !important;
font-weight: 400 !important;
font-size: 17px !important}

/* Stats — better contrast */
html body .fr-stat__num {
color: var(--fr-primary) !important;
font-weight: 600 !important}

html body .fr-stat__label {
color: var(--fr-text-dark) !important;
font-weight: 600 !important;
letter-spacing: 1.8px !important}

/* ============================================================
   37. NAVBAR-BRAND alignment fix (logo not centered weirdly)
   ============================================================ */

html body header.default13 .navbar {
align-items: center !important}

html body header.default13 .navbar-brand-wrapper,html body header.default13 .navbar-brand-container {
display: inline-flex !important;
align-items: center !important}

/* Footer — improve contrast */
html body .footer-contact-baner * {
color: rgba(255, 255, 255, 0.86) !important}

html body .footer-contact-baner a {
color: var(--fr-light-accent) !important;
font-weight: 600 !important}

/* ============================================================
   38. BUTTON HIT-AREA — full width clickable, min 48x48
   ============================================================ */

html body .fr-btn,html body a.fr-btn,html body button.fr-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px !important;
padding: 16px 32px !important;
cursor: pointer !important;
text-decoration: none !important;
user-select: none !important;
-webkit-tap-highlight-color: rgba(226, 215, 0, 0.2) !important}

html body .fr-btn::after {
content: '' !important;
position: absolute !important;
inset: -4px !important}

html body .fr-cmd-bar__submit,html body .fr-search__submit {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 56px !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(226, 215, 0, 0.2) !important}

/* Touch targets — all interactive elements ≥44x44px (WCAG 2.5.5) */
html body a,html body button,html body input[type="submit"],html body input[type="button"],html body .clickable {
min-height: auto}

html body .fr-btn--small {
min-height: 42px !important;
padding: 11px 22px !important}

/* ============================================================
   39. ATTRACTIONS — TYPOGRAPHIC CARDS (no stock photos)
   ============================================================ */

html body .fr-attractions .fr-attr-grid {
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))}

html body .fr-attractions .fr-attr-card {
position: relative !important;
aspect-ratio: 4 / 5 !important;
border-radius: var(--fr-radius-lg) !important;
overflow: hidden !important;
background: linear-gradient(160deg, var(--fr-cream) 0%, var(--fr-light-accent) 100%) !important;
border: 1px solid var(--fr-border-light) !important;
box-shadow: var(--fr-shadow-sm) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 28px 24px !important;
text-decoration: none !important}

html body .fr-attractions .fr-attr-card:hover {
transform: translateY(-6px) !important;
box-shadow: var(--fr-shadow-lg) !important;
border-color: var(--fr-border-medium) !important}

html body .fr-attractions .fr-attr-card img {
display: none !important}

html body .fr-attractions .fr-attr-card::after {
display: none !important}

html body .fr-attractions .fr-attr-card .fr-attr-card__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-primary-deep);
flex-shrink: 0;
margin: 0 0 auto;
border: 1px solid var(--fr-border-light)}

html body .fr-attractions .fr-attr-card .fr-attr-card__icon svg {
width: 32px;
height: 32px;
stroke: currentColor;
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round}

html body .fr-attractions .fr-attr-card .fr-attr-card__body {
position: static !important;
padding: 0 !important;
background: none !important;
z-index: auto !important;
color: var(--fr-text-dark) !important;
margin-top: 0 !important}

html body .fr-attractions .fr-attr-card .fr-attr-card__title {
color: var(--fr-text-dark) !important;
font-family: var(--fr-font-display) !important;
font-size: 26px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
margin: 12px 0 8px !important;
text-shadow: none !important}

html body .fr-attractions .fr-attr-card .fr-attr-card__meta {
color: var(--fr-primary-deep) !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
text-transform: uppercase !important;
text-shadow: none !important;
margin: 0 !important}

html body .fr-attractions .fr-attr-card .fr-attr-card__hint {
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
color: var(--fr-text-body) !important;
line-height: 1.55 !important;
margin: 0 !important}

/* ============================================================
   40. WCAG FOCUS INDICATORS (2.4.7 + 2.4.11)
   ============================================================ */

html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [tabindex]:focus-visible {
outline: 3px solid var(--fr-primary) !important;
outline-offset: 3px !important;
border-radius: var(--fr-radius-sm) !important}

html body .fr-btn:focus-visible,html body .fr-cmd-bar__submit:focus-visible {
outline: 3px solid var(--fr-text-dark) !important;
outline-offset: 3px !important}

/* Skip-to-content (a11y) */
html body .fr-skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--fr-primary);
color: var(--fr-white);
padding: 12px 18px;
border-radius: var(--fr-radius-md);
font-family: var(--fr-font-body);
font-weight: 600;
text-decoration: none;
z-index: 99999;
transition: top 0.2s ease}

html body .fr-skip-link:focus {
top: 16px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html body *,
html body *::before,
html body *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important}
html body .fr-reveal {
opacity: 1 !important;
transform: none !important}
}

/* ============================================================
   41. ATTRACTIONS PAGE — TYPOGRAPHIC ROWS (no stock photos)
   ============================================================ */

html body .fr-page-hero--solid {
background: linear-gradient(135deg, var(--fr-text-dark) 0%, var(--fr-primary-deep) 70%, var(--fr-secondary) 100%) !important;
min-height: 48vh}

html body .fr-page-hero--solid::after {
background: radial-gradient(circle at 70% 30%, rgba(231, 187, 186, 0.18), transparent 60%) !important}

html body .fr-attr-row--type {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 56px !important;
align-items: center !important;
margin-bottom: 80px !important;
padding-bottom: 80px !important;
border-bottom: 1px solid var(--fr-border-light) !important}

html body .fr-attr-row--type:nth-child(even) .fr-attr-row__media-block {
order: 2 !important}

html body .fr-attr-row__media-block {
position: relative;
border-radius: var(--fr-radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--fr-shadow-md)}

html body .fr-attr-row__media-block img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease}

html body .fr-attr-row__media-block:hover img {
transform: scale(1.04)}

html body .fr-attr-row__media-block .fr-attr-row__num {
position: absolute;
top: 18px;
right: 18px;
background: var(--fr-white);
color: var(--fr-primary);
font-family: var(--fr-font-display);
font-size: 22px;
font-weight: 600;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--fr-shadow-sm);
z-index: 2}

html body .fr-attr-row--type:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important}

html body .fr-attr-row__icon-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
background: var(--fr-cream);
border-radius: var(--fr-radius-lg);
border: 1px solid var(--fr-border-light);
position: sticky;
top: 110px}

html body .fr-attr-row__icon {
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-primary-deep);
border: 1px solid var(--fr-border-light)}

html body .fr-attr-row__icon svg {
width: 44px;
height: 44px;
stroke: currentColor;
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round}

html body .fr-attr-row__num {
font-family: var(--fr-font-display);
font-size: 28px;
font-weight: 500;
color: var(--fr-primary);
letter-spacing: 0.5px}

html body .fr-attr-row__body {
padding: 8px 0}

@media (max-width: 900px) {
html body .fr-attr-row--type {
grid-template-columns: 1fr !important;
gap: 28px !important;
margin-bottom: 48px !important;
padding-bottom: 48px !important}
html body .fr-attr-row__icon-block {
flex-direction: row;
justify-content: center;
position: static;
padding: 18px 24px;
max-width: 320px}
html body .fr-attr-row__icon {
width: 64px;
height: 64px}
html body .fr-attr-row__icon svg {
width: 32px;
height: 32px}
}

/* ============================================================
   42. LITEPICKER container z-index over hero
   ============================================================ */

html body .litepicker {
z-index: 9999 !important}

html body .litepicker .container__main {
background: var(--fr-white) !important}

/* PATCH v1.6.9: REVERTED to position:fixed.
   v1.6.8 used position:absolute which broke visibility on body.page-index */
html body .litepicker {
position: fixed !important}

/* ============================================================
   43. SCROLL ARROW HINT (decorative, optional)
   ============================================================ */

html body .fr-scroll-hint {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
justify-content: center;
color: var(--fr-white);
z-index: 3;
pointer-events: none;
animation: fr-bounce 2s ease-in-out infinite}

html body .fr-scroll-hint svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none}

@keyframes fr-bounce {
0%, 100% { transform: translateX(-50%) translateY(0)}
50%      { transform: translateX(-50%) translateY(6px)}
}

/* ============================================================
   44. WCAG color tokens — replace lower-contrast tokens
   ============================================================ */

html body .fr-text {
color: var(--fr-text-dark) !important}

/* When .fr-text-muted appears on cream/white bg, ensure 4.5:1 minimum */
html body .fr-text-muted,html body .fr-search__sub,html body .fr-cmd-bar__hint {
color: var(--fr-text-muted) !important}

/* About feature text — needs to be readable */
html body .fr-feature__text {
color: var(--fr-text-body) !important;
font-size: 15.5px !important;
line-height: 1.7 !important}

html body .fr-feature__title {
color: var(--fr-text-dark) !important}

/* Apartment description on cards */
html body .fr-apt-desc {
color: var(--fr-text-body) !important}

/* Location card descriptions */
html body .fr-loc-card__desc {
color: var(--fr-text-body) !important}

html body .fr-loc-card__address {
color: var(--fr-text-muted) !important;
font-weight: 500 !important}

/* ============================================================
   45. MAP CAPTION (location pins description)
   ============================================================ */

html body .fr-loc-map__caption {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 24px 0 0;
padding: 22px 26px;
background: var(--fr-white);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
font-family: var(--fr-font-body);
font-size: 14px;
color: var(--fr-text-body)}

html body .fr-loc-map__caption span {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5}

html body .fr-loc-map__caption strong {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--fr-primary);
color: var(--fr-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--fr-font-body);
font-size: 13px;
font-weight: 600}

@media (max-width: 768px) {
html body .fr-loc-map__caption {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px 18px}
}

/* ============================================================
   46. PAGE-HERO PADDING — H1 not obscured by header
   ============================================================ */

html body .fr-page-hero {
padding-top: 220px !important;
padding-bottom: 80px !important}

@media (max-width: 991.98px) {
html body .fr-page-hero {
padding-top: 180px !important;
padding-bottom: 56px !important}
}

@media (max-width: 600px) {
html body .fr-page-hero {
padding-top: 150px !important;
padding-bottom: 48px !important}
}

/* ============================================================
   47. /OFFER detail — price circle CENTERED, tabs CENTERED
   ============================================================ */

/* Price circle — flex center within container */
html body.page-offer .offer-price,html body .offer-price-wrap,html body .price-block {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important}

html body.page-offer .offer-price {
width: 150px !important;
height: 150px !important;
border-radius: 50% !important;
background: var(--fr-primary) !important;
color: var(--fr-white) !important;
font-family: var(--fr-font-display) !important;
text-align: center !important;
padding: 18px !important;
box-shadow: 0 12px 32px rgba(226, 215, 0, 0.32) !important;
margin: 0 auto 18px !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important}

html body.page-offer .offer-price * {
color: var(--fr-white) !important;
font-family: var(--fr-font-display) !important}

/* ============================================================
   50. ATTRACTIONS CARDS — RESTORE PHOTOS (override v1.4 typo)
   ============================================================ */

html body .fr-attractions .fr-attr-card.fr-attr-card--photo {
aspect-ratio: 4 / 5 !important;
padding: 0 !important;
background: var(--fr-cream) !important;
border: 1px solid var(--fr-border-light) !important;
display: block !important;
position: relative !important;
overflow: hidden !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s ease !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo:hover img {
transform: scale(1.06) !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo::after {
content: '' !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, transparent 30%, rgba(20, 14, 16, 0.40) 60%, rgba(20, 14, 16, 0.92) 100%) !important;
z-index: 1 !important;
pointer-events: none !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo .fr-attr-card__icon {
display: none !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo .fr-attr-card__body {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 28px 22px 24px !important;
z-index: 2 !important;
background: none !important;
margin: 0 !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo .fr-attr-card__title {
color: var(--fr-white) !important;
font-size: 26px !important;
font-weight: 500 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.70), 0 0 6px rgba(0, 0, 0, 0.50) !important;
margin: 0 !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo .fr-attr-card__meta {
color: var(--fr-light-accent) !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.70) !important;
margin: 0 0 8px !important;
font-size: 11px !important;
text-transform: uppercase !important}

html body .fr-attractions .fr-attr-card.fr-attr-card--photo .fr-attr-card__hint {
display: none !important}

/* ============================================================
   51. LEAFLET MAP — custom branded pins
   ============================================================ */

html body .fr-loc-map {
aspect-ratio: 21 / 9 !important;
min-height: 360px !important;
border-radius: var(--fr-radius-lg) !important;
overflow: hidden !important;
border: 1px solid var(--fr-border-light) !important;
box-shadow: var(--fr-shadow-md) !important}

@media (max-width: 768px) {
html body .fr-loc-map { aspect-ratio: 4 / 3 !important; min-height: 320px !important}
}

html body #fr-map {
width: 100% !important;
height: 100% !important;
background: var(--fr-cream)}

html body .fr-map-pin {
background: transparent !important;
border: none !important}

html body .fr-map-pin__inner {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--fr-primary);
color: var(--fr-white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--fr-font-display);
font-size: 18px;
font-weight: 600;
border: 3px solid var(--fr-white);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer}

html body .fr-map-pin:hover .fr-map-pin__inner,html body .fr-map-pin__inner:hover {
transform: scale(1.15);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40)}

html body .leaflet-popup-content-wrapper {
background: var(--fr-white) !important;
border-radius: var(--fr-radius-md) !important;
font-family: var(--fr-font-body) !important;
border: 1px solid var(--fr-border-light) !important}

html body .leaflet-popup-content {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-dark) !important;
margin: 14px 18px !important;
line-height: 1.55 !important}

html body .leaflet-popup-content strong {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important}

html body .leaflet-popup-tip { background: var(--fr-white) !important}

html body .leaflet-control-attribution {
font-size: 10px !important;
background: rgba(255, 255, 255, 0.85) !important}

html body .leaflet-control-zoom a {
background: var(--fr-white) !important;
color: var(--fr-text-dark) !important;
border: 1px solid var(--fr-border-light) !important;
font-family: var(--fr-font-body) !important}

html body .leaflet-control-zoom a:hover {
background: var(--fr-light-accent) !important;
color: var(--fr-primary-deep) !important}

/* ============================================================
   52. HEADER white instantly + mobile menu bg white
   ============================================================ */

/* Mobile menu — hide system reservation button, force white bg */
@media (max-width: 991.98px) {
html body header.default13 .navbar-reservation,
html body header.default13 a[href*="offers"].btn:not(.fr-btn):not(.navbar-toggler),
html body header.default13 .navbar-reservation-mobile,
html body header.default13 .navbar > a.btn:not(.fr-btn):not(.navbar-toggler),
html body header.default13 .reservation-button,
html body header.default13 .menu-wrapper > .btn:not(.fr-btn):not(.navbar-toggler),
html body header.default13 [class*="reservation"]:not(.fr-cmd-bar):not(.fr-btn):not(.navbar-toggler):not(.fr-cmd-bar__submit) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important}

  /* Force navbar-toggler ALWAYS visible on mobile (override any system hide) */
html body header.default13 .navbar-toggler,
html body .navbar-toggler,
html body button.navbar-toggler {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
min-width: 64px !important;
min-height: 48px !important;
overflow: visible !important;
pointer-events: auto !important;
z-index: 100 !important;
margin-left: auto !important}

  /* Navbar layout — flex with toggler on right */
html body header.default13 .navbar,
html body header.default13 nav.navbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important}

html body header.default13 .navbar-brand {
margin-right: auto !important}

  /* Force white bg on EVERY menu container on mobile */
html body header.default13 .navbar-collapse,
html body header.default13 div.navbar-collapse,
html body header.default13 .navbar-collapse.show,
html body header.default13 .navbar-collapse.collapsing,
html body header.default13 .menu-wrapper .navbar-collapse,
html body header.default13 nav.navbar-nav,
html body header.default13 ul.navbar-nav,
html body header.default13 .navbar-nav,
html body header.default13 .navbar > nav,
html body header.default13 .navbar > ul,
html body header.default13 .menu-wrapper nav,
html body header.default13 .menu-wrapper > div:not(.container):not(.navbar-brand-wrapper),
html body header.default13 .navigation,
html body header.default13 .main-menu,
html body header.default13 .menu,
html body header.default13 ul[class*="menu"],
html body header.default13 nav[class*="menu"] {
background: #FFFFFF !important;
background-color: #FFFFFF !important}

html body header.default13 .navbar-collapse {
border-radius: var(--fr-radius-md) !important;
margin-top: 14px !important;
padding: 18px 18px !important;
box-shadow: 0 18px 48px rgba(26, 26, 24, 0.18) !important;
border: 1px solid var(--fr-border-light) !important;
position: absolute !important;
top: 100% !important;
left: 16px !important;
right: 16px !important;
z-index: 9999 !important;
width: auto !important}

  /* Force HEADER white when menu visible (any of these classes) */
html body header.default13:has(.navbar-collapse.show),
html body header.default13:has(nav[aria-expanded="true"]),
html body header.default13:has([aria-expanded="true"]) {
background: #FFFFFF !important;
background-color: #FFFFFF !important}

  /* All children inside header on mobile — text dark, no shadow */
html body header.default13 .navbar-collapse,
html body header.default13 .navbar-collapse *,
html body header.default13 .navbar-nav,
html body header.default13 .navbar-nav *,
html body header.default13 nav.navbar-nav,
html body header.default13 nav.navbar-nav * {
color: var(--fr-text-dark) !important;
text-shadow: none !important}

html body header.default13 .navbar-collapse a,
html body header.default13 .navbar-nav a,
html body header.default13 nav a {
background: transparent !important;
color: var(--fr-text-dark) !important;
padding: 14px 12px !important;
border-bottom: 1px solid var(--fr-border-light) !important;
text-align: left !important;
display: block !important}

html body header.default13 .navbar-collapse a:last-child,
html body header.default13 .navbar-nav a:last-child {
border-bottom: none !important}
}

/* JS-toggled class for whole-header white bg */
html body header.default13.fr-menu-open {
background: #FFFFFF !important;
background-color: #FFFFFF !important}

html body header.default13.fr-menu-open .menu-wrapper {
background: #FFFFFF !important}

/* ============================================================
   53. LITEPICKER — viewport fitting (mobile only, since v1.6.8)
   PATCH v1.6.8: previously this section forced max-width:360px on ALL
   viewports, breaking the desktop 2-month layout. Now scoped to mobile.
   ============================================================ */

/* Mobile: fit viewport with safe padding */
@media (max-width: 719px) {
html body .litepicker {
max-width: 360px !important;
width: min(360px, calc(100vw - 24px)) !important;
padding: 14px !important}
}

/* z-index + box-sizing apply on all viewports */
html body .litepicker {
z-index: 99999 !important;
box-sizing: border-box !important}

/* PATCH v1.6.7: wrap mobile-only Litepicker rules in @media (max-width: 719px).
   Previously these rules were unscoped and bled into desktop, overriding the
   2-month grid from section 33 (line 3614+) — user saw only 1 month on desktop
   with overflow:hidden hiding navigation. Mobile keeps single column stack. */
@media (max-width: 719px) {
html body .litepicker .container__main {
width: 100% !important;
overflow: hidden !important;
display: block !important}

html body .litepicker .container__months {
flex-direction: column !important;
display: flex !important;
width: 100% !important;
gap: 0 !important}

html body .litepicker .month-item {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
flex: 0 0 100% !important}

html body .litepicker .month-item-header {
padding: 4px 0 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important}
}

html body .litepicker .container__days {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important}

html body .litepicker .container__days > div,html body .litepicker .container__days .day-item {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
height: 40px !important;
line-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13.5px !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: center !important}

html body .litepicker .container__days .day-name {
font-size: 10px !important;
letter-spacing: 0.5px !important;
height: 28px !important;
line-height: 28px !important;
text-transform: lowercase !important}

@media (max-width: 480px) {
html body .litepicker {
max-width: calc(100vw - 16px) !important;
width: calc(100vw - 16px) !important;
padding: 12px !important}

html body .litepicker .container__days .day-item {
height: 36px !important;
line-height: 36px !important;
font-size: 12.5px !important}

html body .litepicker .container__months .month-item-name,
html body .litepicker .cur-month {
font-size: 16px !important}
}

/* v1.67: USUNIETE margin-top:12px na drugim miesiącu — powodował niewyrównanie
   wizualne dwóch miesięcy side-by-side w 2-month grid layout (lewy maj /
   prawy czerwiec offset 12px). Container__months ma już gap:24px który
   wystarczy do oddzielenia. Mobile stack (max-width:719px) i tak ma osobne
   reset w §media query niżej. */
html body .litepicker .container__months .month-item:not(:first-child) {
margin-top: 0 !important}

/* Hide secondary month spacing if it ever shows */
html body .litepicker.litepicker--single-month .container__months,html body .litepicker .container__months[data-months="1"] {
gap: 0 !important}

html body.page-offer .offer-price .price-from-label,html body.page-offer .offer-price .price-prefix {
font-family: var(--fr-font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 1.4px !important;
text-transform: lowercase !important;
opacity: 0.92 !important;
margin: 0 0 4px !important}

html body.page-offer .offer-price .price-value,html body.page-offer .offer-price .price {
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1.1 !important}

/* Sticky tabs on /offer — drugie menu po scroll
   PATCH v1.6: max-width:none + inset:0 to defeat system .tabs{max-width:1140px}
   System app.css limits .tabs to 1140px; we need viewport-wide centered band
   v1.40: top 95→65 — sklejone z header scrolled (65px), brak luki */
html body .tabs.--fixed,html body.page-offer .tabs.--fixed,html body .tabs.tabs--fixed,html body .tabs.sticky {
position: fixed !important;
top: 65px !important;
left: 0 !important;
right: 0 !important;
inset-inline: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 24px !important;
z-index: 100 !important;
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: var(--fr-shadow-sm) !important;
border-bottom: 1px solid var(--fr-border-light) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(10px) !important;
box-sizing: border-box !important}

/* Mobile sticky tabs — header height 56px → top: 56px */
@media (max-width: 991.98px) {
html body .tabs.--fixed,
html body.page-offer .tabs.--fixed,
html body .tabs.tabs--fixed {
top: 56px !important}
}

html body .tabs.--fixed .tabs__inner,html body .tabs.--fixed > ul,html body .tabs.--fixed > div {
max-width: 1320px !important;
width: 100% !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important}

html body .tabs.--fixed a,html body .tabs.--fixed li a,html body .tabs.--fixed button,html body.page-offer .tabs a {
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: var(--fr-text-dark) !important;
padding: 14px 18px !important;
text-decoration: none !important;
white-space: nowrap !important}

html body .tabs.--fixed a:hover,html body .tabs.--fixed a.active {
color: var(--fr-primary) !important;
border-bottom: 2px solid var(--fr-primary) !important}

/* ============================================================
   48. LIGHTER OVERALL FEEL — soften final CTA gradient
   ============================================================ */

html body .fr-final-cta {
background: linear-gradient(135deg, #7A736B 0%, var(--fr-primary-deep) 50%, var(--fr-secondary) 100%) !important}

html body .fr-page-hero--solid {
background: linear-gradient(135deg, var(--fr-primary-deep) 0%, var(--fr-secondary) 60%, var(--fr-primary) 100%) !important;
min-height: 44vh !important}

html body .fr-page-hero--solid::after {
background: radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.18), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%) !important}

/* Subpage page-hero (with photo) — lighter overlay */
html body .fr-page-hero:not(.fr-page-hero--solid)::after {
background: linear-gradient(180deg, rgba(26, 26, 24, 0.30) 0%, rgba(26, 26, 24, 0.55) 100%) !important}

/* PATCH v1.65: Attractions hero baner — Ostrów Tumski photo background.
   Inline style="background-image: url()" w body_top jest wycinany przez
   IdoBooking CMS sanitizer. Modyfikator klasy + reguła w arkuszu = bezpieczne.
   Specificity boosted (html body section.fr-page-hero.fr-page-hero--attractions)
   żeby pobić v1.51 cream-gradient override w §109d. */
html body .fr-page-hero--attractions,html body section.fr-page-hero.fr-page-hero--attractions,html body .page-txt section.fr-page-hero.fr-page-hero--attractions {
background-color: transparent !important;
background-image: url('https://client58360.idobooking.com/images/frontpageGallery/pictures/large/0/0/7.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important}

/* Section --cream lighter, more breathable */
html body .fr-section--cream {
background: #F5EFE3 !important}

html body .fr-section--bg-alt,html body .fr-locations,html body .fr-attractions {
background: #EDE4D2 !important}

/* ============================================================
   49. SKIP-LINK — hidden offscreen by default (no visible chip)
   ============================================================ */

html body .fr-skip-link {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
top: -100px !important;
left: -100px !important}

html body .fr-skip-link:focus,html body .fr-skip-link:focus-visible {
position: fixed !important;
width: auto !important;
height: auto !important;
padding: 12px 18px !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
top: 16px !important;
left: 16px !important;
background: var(--fr-primary) !important;
color: var(--fr-white) !important;
border-radius: var(--fr-radius-md) !important;
z-index: 99999 !important;
text-decoration: none !important;
font-weight: 600 !important}

/* 50. PATCH v1.6.6 — FOOTER STRIPE FIX + DARK CRESCENDO + SECTION RHYTHM
   Reason (user feedback v1.6.5): "stopka wyglada zle, ma pasy takie jakby */

/* (1) FINAL CTA — dark crescendo (replaces off-brand grey-purple from v1.5) */
html body .fr-final-cta {
background: linear-gradient(180deg, #1A1A18 0%, var(--fr-text-dark) 60%, #050505 100%) !important;
margin-bottom: 0 !important;
position: relative}

/* Subtle brand glow accents — softened to match the darker crescendo */
html body .fr-final-cta::before {
background: radial-gradient(circle, rgba(231, 187, 186, 0.20), transparent 70%) !important}
html body .fr-final-cta::after {
background: radial-gradient(circle, rgba(196, 210, 208, 0.10), transparent 70%) !important}

/* CTA buttons stay readable on darker bg */
html body .fr-final-cta .fr-btn--primary {
background: var(--fr-primary) !important;
color: var(--fr-white) !important;
border: 1px solid var(--fr-primary) !important}
html body .fr-final-cta .fr-btn--primary:hover {
background: var(--fr-primary-deep) !important;
border-color: var(--fr-primary-deep) !important}

/* (2) KILL THE 30px WHITE STRIPE — pb-5 padding-bottom of fp-auto-height wrapper.
   Verified live: this alone is sufficient. Sa-section abut perfectly (gap=0px
   between consecutive sections), so wrapper bg is never visible between them.
   Painting the wrapper dark caused bleed-through under fullPage scale on mobile
   — REMOVED. Only zeroing pb-5 padding here. */
body.page-index .section.fp-auto-height.pb-5 {
padding-bottom: 0 !important}

/* (3) FOOTER — remove top border-glow that emphasizes the seam,
   ensure flush contact with fr-final-cta */
html body.page-index footer {
margin-top: 0 !important;
border-top: none !important}

/* (4) SECTION COLOR RHYTHM — strengthen escalation toward dark crescendo
   Pattern: warm cream (welcome) -> deeper cream (transition) ->
   cream (return) -> deeper cream (anticipation) -> DARK CTA -> DARK footer.
   Existing tokens already alternate correctly (#FAF7F2 / #EDE4D2);
   we just nudge .fr-attractions slightly darker for stronger pre-CTA build-up */
html body .fr-attractions {
  background: #E8DDC9 !important;  /* was #EDE4D2 — ~5% darker for build-up */
}

/* PATCH MARKER — for live verification */
/* PATCH-V1.6.6-FOOTER-STRIPES-AND-DARK-CRESCENDO */

/* 51. PATCH v1.6.7 — LITEPICKER NAVIGATION + DROPDOWNS
   User feedback v1.6.7: "nie ma zmiany daty jak klikam w pole i */

/* (a) Force header layout + visible nav buttons on desktop (>= 720px) */
@media (min-width: 720px) {
html body .litepicker .month-item-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 4px 0 14px !important}

html body .litepicker .button-previous-month,
html body .litepicker .button-next-month {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 auto !important}

  /* Center title block (month name + year) between prev/next buttons */
html body .litepicker .month-item-header > div {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important}
}

/* (b) Style Litepicker dropdowns (month + year selects) */
html body .litepicker .month-item-header select,html body .litepicker .month-item-header .month-item-name select,html body .litepicker .month-item-header .month-item-year select {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important;
background: var(--fr-bg) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: 8px !important;
padding: 6px 28px 6px 12px !important;
margin: 0 4px !important;
cursor: pointer !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235E5E5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 10px 6px !important;
letter-spacing: 0.2px !important;
line-height: 1.2 !important}

html body .litepicker .month-item-header select:hover,html body .litepicker .month-item-header select:focus,html body .litepicker .month-item-header select:focus-visible {
border-color: var(--fr-primary) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(226, 215, 0, 0.25) !important}

html body .litepicker .month-item-header select option {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-dark) !important;
background: var(--fr-white) !important}

/* PATCH MARKER — v1.6.7 */
/* PATCH-V1.6.7-LITEPICKER-DROPDOWNS-AND-NAV */

/* 52. PATCH v1.6.8 — SENIOR REBUILD: 3 fixes
   (1) Footer: bulletproof guard against duplicate brand-text ::before */

/* (1) FOOTER — guard against any duplicate brand text ::before.
   The brand text is injected via `.footer.container::before` on the FIRST
   matching element. If IdoBooking renders multiple .footer.container
   wrappers (some deployments do), null all subsequent ::before content. */
html body footer .footer.container ~ .footer.container::before,html body footer .footer.container .footer.container::before,html body footer .footer:not(.container)::before {
content: none !important;
display: none !important}

/* (2) HERO LEAD — lock white color with stronger specificity than any
   global p/text rule. Previous color: #FFFFFF was without !important. */
html body section.fr-hero-v2 p.fr-hero-v2__lead,html body .fr-hero-v2 .fr-hero-v2__lead,html body p.fr-hero-v2__lead {
color: #FFFFFF !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75),
0 1px 3px rgba(0, 0, 0, 0.65),
               0 0 1px rgba(0, 0, 0, 0.45) !important}

/* (3) LITEPICKER — complete senior rebuild
   Goals: */

/* --- Container --- */
html body .litepicker {
z-index: 99999 !important;
font-family: var(--fr-font-body) !important;
background: #ffffff !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: 14px !important;
box-shadow: 0 12px 40px rgba(26, 26, 24, 0.18),
              0 4px 12px rgba(26, 26, 24, 0.10) !important;
padding: 18px !important;
  /* position:absolute already enforced earlier (was position:fixed bug) */
}

/* --- Inner wrapper --- */
html body .litepicker .container__main {
background: transparent !important;
display: block !important;
width: auto !important;
max-width: none !important;
overflow: visible !important}

/* --- Months row: desktop side-by-side, mobile stacked --- */
html body .litepicker .container__months {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 24px !important;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
align-items: flex-start !important}

@media (max-width: 719px) {
html body .litepicker .container__months {
flex-direction: column !important;
gap: 14px !important}
html body .litepicker {
max-width: calc(100vw - 24px) !important;
padding: 14px !important}
}

/* --- Single month-item --- */
html body .litepicker .month-item {
flex: 1 1 0 !important;
min-width: 280px !important;
max-width: 320px !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important}

@media (max-width: 719px) {
html body .litepicker .month-item {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important}
html body .litepicker .container__months > .month-item:not(:first-child) {
margin-top: 0 !important}
}

/* --- Header: prev | dropdowns | next --- */
html body .litepicker .month-item-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 0 0 14px !important;
margin: 0 !important;
border: none !important}

html body .litepicker .month-item-header > div {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex: 1 1 auto !important}

/* Hide vestigial <strong class="month-item-name"> span ONLY when <select> exists
   i strong duplikuje select). v1.66 FIX: starsza reguła ukrywała strong */
html body .litepicker .month-item-header:has(select.month-item-name) strong.month-item-name {
display: none !important}

/* --- Nav buttons --- */
html body .litepicker .button-previous-month,html body .litepicker .button-next-month {
width: 32px !important;
height: 32px !important;
flex: 0 0 32px !important;
border-radius: 50% !important;
background: transparent !important;
border: 1px solid var(--fr-border-light) !important;
color: var(--fr-text-dark) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
visibility: visible !important;
opacity: 1 !important;
transition: background 0.18s ease, border-color 0.18s ease !important;
padding: 0 !important}

html body .litepicker .button-previous-month:hover,html body .litepicker .button-next-month:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-primary) !important;
color: var(--fr-primary-deep) !important}

html body .litepicker .button-previous-month svg,html body .litepicker .button-next-month svg {
width: 12px !important;
height: 12px !important;
fill: currentColor !important}

/* Hide nav buttons when they would lead before minDate */
html body .litepicker .button-previous-month.is-hidden,html body .litepicker .button-next-month.is-hidden {
visibility: hidden !important}

/* --- Dropdown selects (months + years) --- */
html body .litepicker .month-item-header select {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
font-weight: 500 !important;
color: var(--fr-text-dark) !important;
background-color: transparent !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
padding: 4px 26px 4px 10px !important;
cursor: pointer !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235E5E5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 10px 6px !important;
letter-spacing: 0.2px !important;
line-height: 1.3 !important;
text-align-last: center !important;
margin: 0 !important}

html body .litepicker .month-item-header select:hover {
background-color: rgba(226, 215, 0, 0.10) !important;
border-color: var(--fr-light-accent) !important}

html body .litepicker .month-item-header select:focus,html body .litepicker .month-item-header select:focus-visible {
outline: none !important;
border-color: var(--fr-primary) !important;
box-shadow: 0 0 0 3px rgba(226, 215, 0, 0.25) !important}

html body .litepicker .month-item-header select option {
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
color: var(--fr-text-dark) !important;
background: #ffffff !important}

/* --- Weekday labels --- */
html body .litepicker .container__days > div:nth-child(-n+7) {
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--fr-text-muted) !important;
letter-spacing: 0.4px !important;
text-transform: lowercase !important;
height: 28px !important;
line-height: 28px !important;
text-align: center !important;
background: transparent !important}

/* --- Days grid --- */
html body .litepicker .container__days {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 2px !important;
background: transparent !important}

html body .litepicker .day-item {
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
margin: 1px auto !important;
padding: 0 !important;
border-radius: 50% !important;
color: var(--fr-text-dark) !important;
background: transparent !important;
cursor: pointer !important;
text-align: center !important;
transition: background 0.15s ease, color 0.15s ease !important}

html body .litepicker .day-item:hover:not(.is-locked):not(.is-start-date):not(.is-end-date) {
background: var(--fr-light-accent) !important;
color: var(--fr-primary-deep) !important}

html body .litepicker .day-item.is-today {
font-weight: 700 !important;
color: var(--fr-primary-deep) !important;
box-shadow: inset 0 0 0 1.5px var(--fr-primary) !important}

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

html body .litepicker .day-item.is-start-date,html body .litepicker .day-item.is-end-date,html body .litepicker .day-item.is-start-date:hover,html body .litepicker .day-item.is-end-date:hover {
background: var(--fr-primary) !important;
color: #ffffff !important;
font-weight: 700 !important}

html body .litepicker .day-item.is-in-range {
background: rgba(226, 215, 0, 0.20) !important;
color: var(--fr-text-dark) !important;
border-radius: 0 !important}

html body .litepicker .day-item.is-start-date {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important}

html body .litepicker .day-item.is-end-date {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important}

/* --- Footer (Apply / Reset buttons) --- */
html body .litepicker .container__footer {
padding: 14px 0 0 !important;
margin-top: 12px !important;
border-top: 1px solid var(--fr-border-light) !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important}

html body .litepicker .container__footer button {
font-family: var(--fr-font-body) !important;
font-size: 12px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding: 9px 18px !important;
border-radius: 22px !important;
border: 1px solid var(--fr-primary) !important;
background: var(--fr-primary) !important;
color: #ffffff !important;
cursor: pointer !important;
transition: background 0.18s ease, border-color 0.18s ease !important;
min-height: 36px !important}

html body .litepicker .container__footer .button-cancel,html body .litepicker .container__footer .preset-buttons button:not(.button-apply) {
background: transparent !important;
color: var(--fr-text-dark) !important;
border-color: var(--fr-border-light) !important}

html body .litepicker .container__footer button:hover {
background: var(--fr-primary-deep) !important;
border-color: var(--fr-primary-deep) !important;
color: #ffffff !important}

html body .litepicker .container__footer .button-cancel:hover {
background: var(--fr-bg-alt) !important;
border-color: var(--fr-text-muted) !important;
color: var(--fr-text-dark) !important}

/* PATCH MARKER — v1.6.8 */
/* PATCH-V1.6.8-SENIOR-LITEPICKER-REBUILD-AND-FOOTER-HERO-GUARDS */

/* 54. PATCH v1.7.0 — SENIOR POLISH LAYER
   Comprehensive audit findings + fixes: */

/* (a) Z-INDEX HIERARCHY — predictable layering scale.
   Rule: each layer gets a 100x gap so individual z-index tweaks
   within a layer don't bleed into another. Litepicker on top
   because date picker is the most "modal" UI of all. */

/* Layer 5 — Litepicker (date picker popup) — HIGHEST */
html body .litepicker { z-index: 99999 !important}

/* Layer 4 — Modals / lightboxes (image gallery, policy iframe) */
html body .fr-policy-modal,html body .fr-policy-modal__backdrop,html body .fr-lightbox,html body .fr-lightbox__backdrop { z-index: 90000 !important}

/* Layer 3 — Mobile nav drawer (when open) — under modals */
html body header.default13 .navbar-collapse.show,html body header.default13 .navbar-nav.show { z-index: 50000 !important}

/* Layer 2 — Sticky tabs (offer page), header in scrolled state */
html body .tabs.--fixed,html body .tabs.tabs--fixed { z-index: 1000 !important}

/* Layer 1 — Header (default13 system level) — system handles default,
   we don't override unless conflict reported. */

/* Layer 0 — Reveal animations, decorative pseudo-elements (existing 1-5 OK) */

/* (b) MOBILE OVERFLOW GUARDS — prevent horizontal scroll trap on narrow viewports.
   Common cause: width: calc(100% - 24px) without box-sizing, or 100vw with margins. */
@media (max-width: 600px) {
html body .fr-cmd-bar:not(.fr-hero-v2__search) {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important}

  /* Belt-and-suspenders: never let body scroll horizontally on mobile */
html body { overflow-x: hidden !important}
}

/* (c) CLICK TARGETS — WCAG 2.1 AAA 48x48 minimum
   Catches: nav links, footer links, language toggler, social icons */
@media (max-width: 991.98px) {
html body header.default13 .navbar-nav .nav-link {
min-height: 48px !important;
display: flex !important;
align-items: center !important}
}

/* Footer terms links (Regulamin, Polityka) — small text but must be tappable */
html body footer .footer-contact-terms a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
padding: 4px 0 !important}

/* Phone + email links — already large but force min for safety */
html body footer .footer-contact-phone a,html body footer .footer-contact-mail a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important}

/* (d) SECTION RHYTHM — uniform vertical breathing space
   fr-section base: clamp(80px, 10vw, 120px) padding-block
   fr-final-cta gets a slight bump (12% vw) for crescendo emphasis */
html body section.fr-section:not(.fr-final-cta):not(.fr-hero-v2) {
padding-block: clamp(72px, 9vw, 110px) !important}

/* fr-final-cta keeps its existing larger padding (clamp 96-144) — emphasis */

/* (e) FOCUS RINGS — visible keyboard navigation everywhere.
   Browsers default outline often invisible on brand backgrounds.
   We force a 3px brand-tint ring on all interactive elements when focused via keyboard. */
html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [role="button"]:focus-visible,html body [tabindex]:focus-visible {
outline: 3px solid rgba(226, 215, 0, 0.55) !important;
outline-offset: 2px !important;
border-radius: 4px}

/* Skip link already has its own focus style (preserved) */
html body .fr-skip-link:focus,html body .fr-skip-link:focus-visible {
outline: 3px solid #ffffff !important}

/* PATCH MARKER — v1.7.0 */
/* PATCH-V1.7.0-SENIOR-POLISH-AUDIT-FIXES */

/* 55. PATCH v1.7.1 — LITEPICKER VISUAL SYMMETRY FIX
   User feedback v1.7.0: "nie jest rowny w ogole ten kalendarzyk". */

/* (a) Equal-width dropdowns — symmetric headers regardless of month length */
@media (min-width: 720px) {
html body .litepicker .month-item-header select.month-item-name,
html body .litepicker .month-item-header > div > select:first-of-type {
min-width: 110px !important;
width: 110px !important;
text-align: center !important;
text-align-last: center !important;
padding-left: 8px !important}

html body .litepicker .month-item-header select.month-item-year,
html body .litepicker .month-item-header > div > select:nth-of-type(2) {
min-width: 86px !important;
width: 86px !important;
text-align: center !important;
text-align-last: center !important;
padding-left: 8px !important}
}

/* (b) Hide reset button — redundant with autoApply:true UX
       (user can click any day to reset selection) */
html body .litepicker .reset-button,html body .litepicker button.reset-button,html body .litepicker .container__months button.reset-button {
display: none !important}

/* (c) Hide redundant arrows on desktop 2-month view.
       Use visibility:hidden (not display:none) to preserve space
       so headers maintain identical width. */
@media (min-width: 720px) {
  /* First month: hide its NEXT arrow (right arrow on left month) */
html body .litepicker .container__months > .month-item:first-child .button-next-month {
visibility: hidden !important;
pointer-events: none !important}

  /* Last month: hide its PREVIOUS arrow (left arrow on right month) */
html body .litepicker .container__months > .month-item:last-child .button-previous-month {
visibility: hidden !important;
pointer-events: none !important}
}

/* Equal padding inside each month-item — guarantees both grids have
   identical inner box for visual symmetry */
html body .litepicker .container__months > .month-item {
padding: 0 4px !important;
box-sizing: border-box !important}

/* PATCH MARKER — v1.7.1 */
/* PATCH-V1.7.1-LITEPICKER-VISUAL-SYMMETRY */

/* 56. PATCH v1.7.2 — LITEPICKER GRID-BASED EQUAL COLUMNS
   User feedback v1.7.1: "lewa cześc kalendarza i prawa nadal nie sa równe". */

/* (a) Desktop: GRID (not flex) — guarantees equal column widths */
@media (min-width: 720px) {
html body .litepicker .container__months {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
align-items: start !important}

  /* Override section 52 flex constraints — let grid size columns equally */
html body .litepicker .container__months > .month-item {
flex: unset !important;
min-width: 0 !important;
max-width: none !important;
width: 100% !important}
}

/* (b) Mobile: stay column-stack (single month, full width) */
@media (max-width: 719px) {
html body .litepicker .container__months {
display: flex !important;
flex-direction: column !important;
gap: 14px !important}
}

/* (c) Bump month-name select width to safely fit longest Polish months
       ("październik" 11 chars, "wrzesień" 8 chars + diacritics, "listopad" 8 chars) */
@media (min-width: 720px) {
html body .litepicker .month-item-header select.month-item-name,
html body .litepicker .month-item-header > div > select:first-of-type {
min-width: 140px !important;
width: 140px !important;
text-align: center !important;
text-align-last: center !important;
padding-left: 8px !important}

  /* Year dropdown stays compact (4 digits + chevron) */
html body .litepicker .month-item-header select.month-item-year,
html body .litepicker .month-item-header > div > select:nth-of-type(2) {
min-width: 86px !important;
width: 86px !important;
text-align: center !important;
text-align-last: center !important;
padding-left: 8px !important}
}

/* (d) Force header inner div to fixed natural-content width — prevents flex
       reflow if browsers do unexpected sizing on selects */
html body .litepicker .month-item-header {
display: grid !important;
grid-template-columns: 32px 1fr 32px !important;
align-items: center !important;
gap: 8px !important;
padding: 0 0 14px !important}

html body .litepicker .month-item-header > div {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-width: 0 !important}

/* PATCH MARKER — v1.7.2 */
/* PATCH-V1.7.2-LITEPICKER-GRID-EQUAL-COLUMNS */

/* 57. PATCH v1.7.3 — LITEPICKER VERTICAL Y-ALIGNMENT
   User feedback v1.7.2 (z DevTools screenshot): container__days */

/* (a) FIXED HEIGHTS na header + weekdays-row — gwarancja ze container__days
       zaczyna na identycznym Y offset wewnatrz kazdego month-item */
html body .litepicker .month-item-header {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 0 10px !important;
box-sizing: border-box !important}

html body .litepicker .month-item-weekdays-row {
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 !important;
margin: 0 0 4px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 2px !important;
align-items: center !important}

html body .litepicker .month-item-weekdays-row > div {
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--fr-text-muted) !important;
letter-spacing: 0.4px !important;
text-transform: lowercase !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
  /* v1.67: system Litepicker ustawia width: var(--litepicker-day-width)
     (~52px) na każdą komórkę weekday. Na wąskim mobile (240px container)
     7×52=364px overflow. Override do auto + min-width:0 żeby grid
     minmax(0, 1fr) mógł kontrolować szerokość kolumn. */
width: auto !important;
min-width: 0 !important;
overflow: hidden !important}

/* Tak samo na day items (numerki) — żeby grid mógł je ścisnąć na mobile */
html body .litepicker .container__days .day-item {
min-width: 0 !important}

/* (b) USUN BLEDNA REGULE z sekcji 52 — :nth-child(-n+7) w container__days
       stylowal pierwsze 7 DAT (nie weekdays) na 28px wysokosc.
       Litepicker renderuje weekdays w SEPARATE .month-item-weekdays-row,
       nie w .container__days. Anuluje przez wyzsza specyficznosc. */
html body .litepicker .container__days > div:nth-child(-n+7) {
  height: 36px !important;          /* wroc do day-item default height */
  font-size: 13px !important;       /* wroc do day-item font */
color: var(--fr-text-dark) !important;
font-family: var(--fr-font-body) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important}

/* Locked (out of range) day-items zachowuja swoj styling */
html body .litepicker .container__days > div.day-item.is-locked,html body .litepicker .container__days > div.day-item.is-locked:hover {
color: var(--fr-text-muted) !important;
text-decoration: line-through !important;
opacity: 0.42 !important}

/* (c) Force month-item internal layout — natural block flow z fixed-height
       sekcjami zapewnia ze .container__days zaczyna w identycznym miejscu */
html body .litepicker .container__months > .month-item {
display: block !important;
padding: 0 !important}

/* (d) Container__days — ensure no margin/padding causing extra Y offset */
html body .litepicker .container__days {
margin: 0 !important;
padding: 0 !important}

/* PATCH MARKER — v1.7.3 */
/* PATCH-V1.7.3-LITEPICKER-VERTICAL-Y-ALIGNMENT */

/* 58. PATCH v1.7.4 — BULLETPROOF GRID STRUCTURE
   User feedback: "te pola po lewej i prawej nie sa w tej samej lini". */

/* (a) MONTH-ITEM jako CSS GRID z explicit rows.
       Wymusza strukture: 44px header + 32px weekdays + reszta dla days.
       Gap 10px miedzy header a weekdays, 4px miedzy weekdays a days.
       Te wymiary IDENTYCZNE w lewym i prawym month-item -> .container__days
       zaczyna na DOKLADNIE tym samym Y w obu miesiacach. */
@media (min-width: 720px) {
html body .litepicker .container__months > .month-item {
display: grid !important;
grid-template-rows: 44px 32px 1fr !important;
grid-template-columns: 1fr !important;
row-gap: 8px !important;
align-content: start !important;
width: 100% !important}
}

/* Reset margins na inner elementach — grid gap kontroluje spacing */
html body .litepicker .month-item-header,html body .litepicker .month-item-weekdays-row,html body .litepicker .container__days {
margin: 0 !important}

/* Header sam w sobie nadal grid 32px 1fr 32px (z v1.7.2) ale bez margin */
html body .litepicker .month-item-header {
height: 44px !important;
padding: 0 !important;
align-self: start !important}

/* Weekdays-row 32px (z v1.7.3) bez margin */
html body .litepicker .month-item-weekdays-row {
height: 32px !important;
padding: 0 !important;
align-self: start !important}

/* (b) CONTAINER__DAYS — grid-auto-rows 36px wymusza KAZDY row dokladnie 36px
       niezaleznie od ile rows Litepicker wyrenderowal (5, 6 dla pelnego widoku) */
html body .litepicker .container__days {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-auto-rows: 36px !important;
gap: 2px !important;
align-content: start !important;
padding: 0 !important}

/* Day-item: usun height (grid-auto-rows kontroluje), zostaw line-height dla
   wertikalnego centrowania tekstu */
html body .litepicker .container__days .day-item,html body .litepicker .container__days > div {
height: 36px !important;
line-height: 36px !important;
min-height: 0 !important;
max-height: 36px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important}

/* (c) Mobile bez zmian (zachowuje single column natural flow) */
@media (max-width: 719px) {
html body .litepicker .container__months > .month-item {
    display: block !important;  /* override desktop grid */
}
}

/* PATCH MARKER — v1.7.4 */

/* §92 v1.26 — Mobile fixes (TDD audit): button overflow + hero shrink + final-cta footer gap */

@media (max-width: 600px) {
  /* fr-btn--outline z długim tekstem ("ZOBACZ WSZYSTKIE 19 APARTAMENTÓW")
     przekracza viewport — wrap text + max-width + zmniejszone padding */
html body .fr-btn--outline,
html body .fr-btn {
max-width: calc(100% - 32px) !important;
white-space: normal !important;
padding: 14px 18px !important;
font-size: 12px !important;
line-height: 1.3 !important;
letter-spacing: 1.2px !important;
text-align: center !important;
word-break: break-word !important}

  /* Hero shrink na mobile — search bar in viewport */
html body .fr-hero-asym {
min-height: 78vh !important;
padding-bottom: clamp(160px, 22vh, 220px) !important}
html body .fr-hero-wrap {
min-height: auto !important}

  /* Final-cta footer gap fix (24px overlap) */
html body .fr-final-cta {
padding-bottom: 56px !important}
}

@media (max-width: 480px) {
html body .fr-hero-asym {
min-height: 86vh !important}
html body .fr-search-banner {
bottom: 16px !important;
left: 8px !important;
right: 8px !important}
html body .fr-search-banner__inner {
padding: 14px !important}

  /* Apt-grid card — w mobile single column */
html body .fr-apt-grid {
grid-template-columns: 1fr !important}
}

/* §91 v1.24 — TDD audit hit-area fixes (WCAG 44px touch target mobile) */

html body .fr-trust-card__link {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
padding-block: 10px !important;
font-size: 13px !important;
letter-spacing: 1.4px !important}

html body .fr-trust__note a {
display: inline-block !important;
min-height: 32px !important;
padding: 6px 4px !important;
line-height: 1.5 !important}

html body .fr-final-cta__contact a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 12px !important;
font-size: 16px !important}

html body .fr-final-cta__contact a svg {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important}

@media (max-width: 768px) {
html body .fr-trust__note a {
min-height: 44px !important;
padding: 10px 6px !important}
}

/* §90 v3 v1.55 — Language selector COMPACT DROPDOWN z malym kwadratowym togglerem
   Klient feedback 2026-05-18 (po v1.54): "flagi NIE mialy byc wyjete, miejsce gdzie sa */

/* Container — relative wrapper, compact */
html body header.default13 .page-top__language,html body header .page-top__language {
display: inline-flex !important;
align-items: center !important;
position: relative !important;
margin-left: 16px !important;
z-index: 100 !important;
width: auto !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important}

/* Toggler — mala kwadratowa plakietka, TYLKO flaga aktualnego jezyka */
html body header.default13 .page-top__language .language__toggler,html body header .page-top__language .language__toggler {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
width: 44px !important;
height: 32px !important;
padding: 4px 6px !important;
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-weight: normal !important;
color: transparent !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important}

html body header .page-top__language .language__toggler:hover,html body header .page-top__language .language__toggler:focus-visible {
border-color: var(--fr-primary, #e2d700) !important;
background: rgba(255, 255, 255, 1) !important;
outline: none !important}

/* Toggler children — hide text labels, show only flag via ::before */
html body header .page-top__language .language__toggler #language_label,html body header .page-top__language .language__toggler #language_label *,html body header .page-top__language .language__toggler span,html body header .page-top__language .language__toggler .visuallyhidden {
font-size: 0 !important;
letter-spacing: 0 !important;
color: transparent !important;
text-indent: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important}

/* Flag via ::before (based on html[lang]) */
html body header .page-top__language .language__toggler::before {
content: '' !important;
display: inline-block !important;
width: 22px !important;
height: 16px !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 2px !important;
flex-shrink: 0 !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important}
html[lang="pl"] body header .page-top__language .language__toggler::before { background-image: url('/images/flags/pl.png') !important}
html[lang="en"] body header .page-top__language .language__toggler::before { background-image: url('/images/flags/en.png') !important}
html[lang="de"] body header .page-top__language .language__toggler::before { background-image: url('/images/flags/de.png') !important}

/* Chevron after flag */
html body header .page-top__language .language__toggler::after {
content: '\25BE' !important;
display: inline-block !important;
font-size: 8px !important;
color: var(--fr-text-dark, #1a1a1a) !important;
line-height: 1 !important;
transition: transform 0.15s ease !important}
html body header .page-top__language .language__toggler[aria-expanded="true"]::after {
transform: rotate(180deg) !important}

/* Dropdown #language_menu — domyslnie ukryty, pokazuje sie po aria-expanded="true" */
html body header.default13 .page-top__language #language_menu,html body header.default13 .page-top__language .language,html body header .page-top__language #language_menu,html body header .page-top__language .language {
display: none !important;
position: absolute !important;
top: calc(100% + 4px) !important;
right: 0 !important;
left: auto !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
padding: 6px !important;
min-width: 160px !important;
max-width: 220px !important;
z-index: 1000 !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
flex-direction: column !important;
gap: 2px !important}

/* Dropdown open via aria-expanded */
html body header .page-top__language .language__toggler[aria-expanded="true"] + #language_menu,html body header .page-top__language .language__toggler[aria-expanded="true"] ~ .language,html body header .page-top__language #language_menu.fr-open,html body header .page-top__language .language.fr-open {
display: flex !important}

/* Hide currency dropdown */
html body header .page-top__language #language_menu .currency,html body header .page-top__language .language .currency {
display: none !important}

/* Flags container in dropdown */
html body header .page-top__language #language_menu .flags,html body header .page-top__language .language .flags {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important}

/* Each flag anchor in dropdown */
html body header .page-top__language #language_menu .flags a,html body header .page-top__language .language .flags a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 12px !important;
border-radius: 4px !important;
border: 1px solid transparent !important;
background: transparent !important;
text-decoration: none !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
min-height: 36px !important;
width: 100% !important;
box-sizing: border-box !important;
grid-template-columns: none !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--fr-text-dark, #1a1a1a) !important}

html body header .page-top__language #language_menu .flags a:hover,html body header .page-top__language .language .flags a:hover {
background: rgba(226, 215, 0, 0.12) !important;
border-color: var(--fr-primary, #e2d700) !important}

/* Active language */
html[lang="pl"] body header .page-top__language .flags a[hreflang="pl"],html[lang="en"] body header .page-top__language .flags a[hreflang="en"],html[lang="de"] body header .page-top__language .flags a[hreflang="de"] {
background: rgba(226, 215, 0, 0.18) !important;
border-color: var(--fr-primary, #e2d700) !important;
font-weight: 700 !important}

/* Flag img inside dropdown anchor */
html body header .page-top__language #language_menu .flags img.flag,html body header .page-top__language #language_menu .flags a img,html body header .page-top__language .flags a img {
display: block !important;
width: 22px !important;
height: 16px !important;
object-fit: cover !important;
border-radius: 2px !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
visibility: visible !important;
opacity: 1 !important}

/* Name labels after flag (Polski/English/Deutsch via attr(title)) */
html body header .page-top__language #language_menu .flags a::after,html body header .page-top__language .language .flags a::after {
content: attr(title) !important;
display: inline-block !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--fr-text-dark, #1a1a1a) !important;
flex: 1 !important}

/* Mobile v1.58 — INLINE FLAGS w nagłowku miedzy logo a MENU (klient 2026-05-18).
   Klient: "dajmy wybór jezykow na mobile pomiedzy logo a menu, i jezyki moga byc
   na mobile wyjetymi flagami obok siebie, a później jak sie nacisnie menu niech
   beda przykryte". */
@media (max-width: 991.98px) {
  /* Container — absolute position TOP center (between logo left:16 and menu right:16) */
html body header.default13 .page-top__language,
html body header .page-top__language {
position: absolute !important;
top: 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 50 !important;
padding: 4px !important;
background: rgba(255, 255, 255, 0.92) !important;
border-radius: 6px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important}
  /* Hide system toggler on mobile — pokazujemy 3 flagi inline bezpośrednio */
html body header.default13 .page-top__language .language__toggler,
html body header .page-top__language .language__toggler {
display: none !important}
  /* Show #language_menu zawsze jako inline flex (no dropdown na mobile) */
html body header.default13 .page-top__language #language_menu,
html body header.default13 .page-top__language .language,
html body header .page-top__language #language_menu,
html body header .page-top__language .language {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
max-width: none !important;
gap: 4px !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important}
  /* Hide currency dropdown — v1.60 rozszerzone na form/select bezpośrednio
     (system na niektorych wersjach renderuje FORM bez .currency wrapper) */
html body header .page-top__language #language_menu .currency,
html body header .page-top__language .language .currency,
html body header .page-top__language #language_menu form,
html body header .page-top__language .language form,
html body header .page-top__language #language_menu select,
html body header .page-top__language .language select,
html body header .page-top__language #frontpage_currency {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important}
  /* Wrap + menu fit-content szerokosc (nie szersza niz 3 flagi + gap) */
html body header.default13 .page-top__language,
html body header .page-top__language {
width: auto !important;
max-width: max-content !important}
html body header.default13 .page-top__language #language_menu,
html body header.default13 .page-top__language .language,
html body header .page-top__language #language_menu,
html body header .page-top__language .language {
width: auto !important;
max-width: max-content !important;
flex: 0 0 auto !important}
  /* Flags container inline */
html body header .page-top__language #language_menu .flags,
html body header .page-top__language .language .flags {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important}
  /* Each flag = kwadratowy guzik 32x24 */
html body header .page-top__language #language_menu .flags a,
html body header .page-top__language .language .flags a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 24px !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 4px !important;
border: 2px solid transparent !important;
background: transparent !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
box-shadow: none !important;
grid-template-columns: none !important;
gap: 0 !important;
min-width: 0 !important;
font-size: 0 !important}
  /* Hide name labels on mobile (tylko flagi) — use #language_menu in selector
     for specificity battle z deployed §90 v1.x które ma `content: attr(title)` */
html body header.default13 .page-top__language #language_menu .flags a::after,
html body header.default13 .page-top__language #language_menu .flags a[hreflang]::after,
html body header .page-top__language #language_menu .flags a::after,
html body header .page-top__language #language_menu .flags a[hreflang="pl"]::after,
html body header .page-top__language #language_menu .flags a[hreflang="en"]::after,
html body header .page-top__language #language_menu .flags a[hreflang="de"]::after,
html body header .page-top__language .language .flags a::after,
html body header .page-top__language .flags a::after {
content: none !important;
display: none !important;
width: 0 !important;
overflow: hidden !important;
font-size: 0 !important}
html body header .page-top__language #language_menu .flags a:hover {
border-color: var(--fr-primary, #e2d700) !important;
background: rgba(226, 215, 0, 0.12) !important}
  /* Active language outline */
html[lang="pl"] body header .page-top__language .flags a[hreflang="pl"],
html[lang="en"] body header .page-top__language .flags a[hreflang="en"],
html[lang="de"] body header .page-top__language .flags a[hreflang="de"] {
border-color: var(--fr-primary, #e2d700) !important;
background: rgba(226, 215, 0, 0.18) !important}
  /* Flag images */
html body header .page-top__language #language_menu .flags img.flag,
html body header .page-top__language #language_menu .flags a img,
html body header .page-top__language .flags a img {
display: block !important;
width: 22px !important;
height: 16px !important;
object-fit: cover !important;
border-radius: 2px !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
visibility: visible !important;
opacity: 1 !important}

  /* v1.69: USUNIETE hide flags gdy menu open — klientka cofa do wersji
     z flagami W menu (jako ostatnia pozycja). Wrap przeniesiony do #navbar
     przez JS (v1.69), więc inline-flag styling powyżej NIE działa już
     (selektory wymagają .page-top__language bezpośrednio w header, nie
     wewnątrz #navbar). Poniższy blok override flag styling gdy w #navbar. */
}

/* §90 v5 v1.69 — Flags w menu hamburgera jako ostatnia pozycja (cofnięcie v1.58).
   Klientka: "zmiany języków mają być tak jak oryginalnie w menu hamburgera jako
   ostatnia pozycja, tak jak było na start cofamy zmiany z tym wyjęciem flag poza".
   Gdy wrap przeniesiony do #navbar przez JS (forceShowLanguageToggler), reset
   inline-flag styling i pokaż jako blok w menu. */
@media (max-width: 991.98px) {
  /* Wrap w menu — pełna szerokość, blok pod listą nav-item */
html body header.default13 #navbar .page-top__language,
html body header #navbar .page-top__language,
html body header.default13 .navbar-collapse .page-top__language,
html body header .navbar-collapse .page-top__language {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 0 !important;
padding: 14px 18px !important;
background: transparent !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
z-index: auto !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important}
  /* Pokaż label "Język:" przed flagami */
html body header #navbar .page-top__language::before,
html body header .navbar-collapse .page-top__language::before {
content: 'Język' !important;
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--fr-text-dark) !important;
letter-spacing: 0.04em !important;
margin-right: 4px !important}
  /* Menu flag visible jako inline row (jak na inline mode, ale w menu) */
html body header #navbar .page-top__language #language_menu,
html body header #navbar .page-top__language .language,
html body header .navbar-collapse .page-top__language #language_menu,
html body header .navbar-collapse .page-top__language .language {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
position: static !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
width: auto !important;
max-width: max-content !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important}
}

/* §89 v1.20 — FAQ accordion (HTML5 details/summary) */
.fr-faq {
max-width: 920px;
margin: 0 auto}
.fr-faq__item {
border-bottom: 1px solid var(--fr-border-light)}
.fr-faq__item summary {
cursor: pointer;
padding: 22px 48px 22px 0;
font-family: var(--fr-font-display);
font-size: clamp(17px, 2vw, 21px);
line-height: 1.35;
color: var(--fr-text-dark);
list-style: none;
position: relative;
transition: color 0.2s ease}
.fr-faq__item summary::-webkit-details-marker { display: none}
.fr-faq__item summary::after {
content: '+';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-family: var(--fr-font-body);
font-size: 22px;
font-weight: 300;
color: var(--fr-yellow-deep);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--fr-border-light);
transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease}
.fr-faq__item[open] summary::after {
content: '\2212';
background: var(--fr-yellow-deep);
color: #FFFFFF;
border-color: var(--fr-yellow-deep)}
.fr-faq__item:hover summary {
color: var(--fr-yellow-deep)}
.fr-faq__a {
padding: 0 48px 22px 0;
color: var(--fr-text-body);
font-size: 15px;
line-height: 1.7}
.fr-faq__a p {
margin: 0;
font-family: var(--fr-font-body) !important;
font-size: 15px !important}

/* ============================================================
   §70. v1.1 — UNIQUE HOME COMPONENTS (Fair Rentals editorial)
   ============================================================ */

/* §70a. ASYMMETRIC HERO — text left, image portrait right + Booking badge */
.fr-hero-asym {
position: relative;
min-height: 70vh;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
background: var(--fr-bg);
isolation: isolate;
overflow: hidden}
.fr-hero-asym::before {
content: "";
position: absolute;
top: 0; right: 50%; bottom: 0; width: 50vw;
background: var(--fr-cream);
z-index: -1}
.fr-hero-asym__text {
padding: 140px 8vw 80px 8vw;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--fr-cream)}
.fr-hero-asym__kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 2.6px;
text-transform: uppercase;
font-weight: 600;
color: var(--fr-text-dark);
margin-bottom: 28px}
.fr-hero-asym__kicker::before {
content: "";
width: 36px;
height: 2px;
background: var(--fr-primary);
display: inline-block}
.fr-hero-asym__title {
font-family: var(--fr-font-display) !important;
font-size: clamp(36px, 4.6vw, 64px) !important;
line-height: 1.04 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 28px 0 !important;
font-weight: 400 !important}
.fr-hero-asym__title em {
font-style: italic;
display: block;
color: var(--fr-text-dark);
position: relative}
.fr-hero-asym__title em::after {
content: "";
display: block;
width: 80px; height: 6px;
background: var(--fr-primary);
margin-top: 14px}
.fr-hero-asym__lead {
font-size: 16px !important;
line-height: 1.7 !important;
color: var(--fr-text-body) !important;
max-width: 480px;
margin: 0 0 36px 0 !important}
.fr-hero-asym__cta-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 32px}
.fr-hero-asym__meta {
display: flex;
gap: 32px;
align-items: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--fr-border-light);
font-size: 13px;
color: var(--fr-text-muted);
letter-spacing: 0.4px}
.fr-hero-asym__meta strong {
display: block;
font-family: var(--fr-font-display);
font-size: 22px;
color: var(--fr-text-dark);
line-height: 1;
margin-bottom: 4px;
font-weight: 400}
.fr-hero-asym__media {
position: relative;
background-size: cover;
background-position: center;
min-height: 70vh}
.fr-hero-asym__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, transparent 0%, transparent 50%, rgba(26,26,24,0.08) 100%);
pointer-events: none}
.fr-hero-asym__badge {
position: absolute;
top: 32px; right: 32px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 14px;
padding: 16px 22px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--fr-shadow-md);
z-index: 2}
.fr-hero-asym__badge-num {
font-family: var(--fr-font-display);
font-size: 28px;
line-height: 1;
color: var(--fr-text-dark);
font-weight: 400}
.fr-hero-asym__badge-label {
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fr-text-muted);
line-height: 1.3;
font-weight: 600}
@media (max-width: 991.98px) {
.fr-hero-asym {
grid-template-columns: 1fr;
min-height: auto}
.fr-hero-asym::before { display: none}
.fr-hero-asym__text {
padding: 120px 24px 56px 24px;
order: 2}
.fr-hero-asym__media {
min-height: 56vh;
order: 1}
.fr-hero-asym__badge { top: 16px; right: 16px; padding: 12px 16px}
.fr-hero-asym__badge-num { font-size: 22px}
}

/* §70b. MAGAZINE QUOTE — full-width dark band with display serif */
.fr-magazine {
background: var(--fr-text-dark);
color: #FFFFFF;
padding: clamp(80px, 10vw, 140px) 24px;
text-align: center;
position: relative}
.fr-magazine__inner {
max-width: 980px;
margin: 0 auto}
.fr-magazine__mark {
font-family: var(--fr-font-display);
font-size: 64px;
line-height: 1;
color: var(--fr-primary);
margin-bottom: 24px;
font-style: italic;
display: inline-block}
.fr-magazine__quote {
font-family: var(--fr-font-display) !important;
font-size: clamp(28px, 3.8vw, 48px) !important;
line-height: 1.2 !important;
color: #FFFFFF !important;
margin: 0 0 32px 0 !important;
font-weight: 400 !important;
letter-spacing: -0.005em}
.fr-magazine__quote em {
font-style: italic;
color: var(--fr-primary)}
.fr-magazine__attr {
font-family: var(--fr-font-body);
font-size: 12px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
font-weight: 500}
.fr-magazine__attr::before {
content: "—";
margin-right: 8px;
color: var(--fr-primary)}

/* §70c. ASYMMETRIC STATS — one big + three small */
.fr-stats-asym {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-bg)}
.fr-stats-asym__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: stretch}
.fr-stats-asym__hero {
background: var(--fr-text-dark);
color: #FFFFFF;
padding: 56px 48px;
border-radius: var(--fr-radius-lg);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden}
.fr-stats-asym__hero::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 280px; height: 280px;
background: radial-gradient(circle, var(--fr-primary) 0%, transparent 70%);
opacity: 0.18;
pointer-events: none}
.fr-stats-asym__hero-kicker {
font-size: 12px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--fr-primary);
font-weight: 600;
margin-bottom: 24px}
.fr-stats-asym__hero-num {
font-family: var(--fr-font-display);
font-size: clamp(80px, 10vw, 140px);
line-height: 0.95;
color: var(--fr-primary);
font-weight: 400;
margin-bottom: 16px}
.fr-stats-asym__hero-label {
font-family: var(--fr-font-display);
font-size: 22px;
line-height: 1.3;
color: #FFFFFF;
margin-bottom: 8px}
.fr-stats-asym__hero-desc {
font-size: 14px;
color: rgba(255,255,255,0.75);
line-height: 1.55;
max-width: 360px}
.fr-stats-asym__small {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 16px}
.fr-stats-asym__cell {
background: var(--fr-cream);
border-radius: var(--fr-radius-md);
padding: 28px 32px;
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center}
.fr-stats-asym__num {
font-family: var(--fr-font-display);
font-size: 44px;
line-height: 1;
color: var(--fr-text-dark);
font-weight: 400}
.fr-stats-asym__label {
font-size: 13px;
letter-spacing: 1.2px;
color: var(--fr-text-muted);
text-transform: uppercase;
font-weight: 600;
line-height: 1.3}
@media (max-width: 768px) {
.fr-stats-asym__inner { grid-template-columns: 1fr; gap: 24px}
.fr-stats-asym__hero { padding: 40px 28px}
.fr-stats-asym__hero-num { font-size: 80px}
.fr-stats-asym__cell { padding: 20px 22px}
.fr-stats-asym__num { font-size: 32px}
}

/* §70d. PRINCIPLES — numbered 01/02/03 cards (replaces SVG icon features) */
.fr-principles {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-cream)}
.fr-principles__inner {
max-width: 1200px;
margin: 0 auto}
.fr-principles__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
margin-bottom: 64px;
align-items: end}
.fr-principles__head-kicker {
font-size: 12px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--fr-text-dark);
font-weight: 600;
margin-bottom: 18px}
.fr-principles__head-title {
font-family: var(--fr-font-display) !important;
font-size: clamp(28px, 3.4vw, 44px) !important;
line-height: 1.1 !important;
color: var(--fr-text-dark) !important;
margin: 0 !important;
font-weight: 400 !important}
.fr-principles__head-title em {
font-style: italic;
position: relative}
.fr-principles__head-title em::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--fr-primary);
margin-top: 12px}
.fr-principles__head-desc {
font-size: 16px;
color: var(--fr-text-body);
line-height: 1.7;
max-width: 460px}
.fr-principles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--fr-border-light)}
.fr-principle {
padding: 48px 36px 48px 0;
border-right: 1px solid var(--fr-border-light);
position: relative}
.fr-principle:last-child {
border-right: none;
padding-right: 0}
.fr-principle:not(:first-child) {
padding-left: 36px}
.fr-principle__num {
font-family: var(--fr-font-display);
font-size: 56px;
line-height: 1;
color: var(--fr-primary);
font-weight: 400;
margin-bottom: 20px;
display: block;
font-style: italic}
.fr-principle__title {
font-family: var(--fr-font-display) !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 14px 0 !important;
font-weight: 400 !important}
.fr-principle__text {
font-size: 15px;
color: var(--fr-text-body);
line-height: 1.65;
margin: 0}
@media (max-width: 768px) {
.fr-principles__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px}
.fr-principles__grid { grid-template-columns: 1fr}
.fr-principle {
padding: 32px 0 !important;
border-right: none;
border-bottom: 1px solid var(--fr-border-light)}
.fr-principle:last-child { border-bottom: none}
.fr-principle__num { font-size: 44px}
}

/* §70e. DISTRICTS — Wrocław neighborhoods grid */
.fr-districts {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-bg)}
.fr-districts__inner {
max-width: 1200px;
margin: 0 auto}
.fr-districts__header {
text-align: center;
margin-bottom: 56px}
.fr-districts__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px}
.fr-district {
background: var(--fr-cream);
border-radius: var(--fr-radius-md);
padding: 32px 24px;
text-align: left;
position: relative;
border: 1px solid transparent;
transition: border-color 0.3s ease, transform 0.3s ease}
.fr-district:hover {
border-color: var(--fr-primary);
transform: translateY(-4px)}
.fr-district__pin {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--fr-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: var(--fr-text-dark);
font-family: var(--fr-font-display);
font-size: 14px;
font-weight: 400}
.fr-district__name {
font-family: var(--fr-font-display) !important;
font-size: 18px !important;
line-height: 1.3 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 8px 0 !important;
font-weight: 400 !important}
.fr-district__count {
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 600;
margin-bottom: 14px}
.fr-district__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
color: var(--fr-text-body);
line-height: 1.6}
.fr-district__list li {
padding-left: 0}
.fr-district__list li + li {
margin-top: 4px}
@media (max-width: 991.98px) {
.fr-districts__grid { grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 480px) {
.fr-districts__grid { grid-template-columns: 1fr}
}

/* §70f. JOURNEY — timeline of 5 steps */
.fr-journey {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-cream)}
.fr-journey__inner {
max-width: 1200px;
margin: 0 auto}
.fr-journey__header {
text-align: center;
margin-bottom: 64px}
.fr-journey__steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative}
.fr-journey__steps::before {
content: "";
position: absolute;
top: 28px;
left: 10%; right: 10%;
height: 2px;
background: var(--fr-border-light);
z-index: 0}
.fr-journey-step {
text-align: center;
position: relative;
z-index: 1;
padding: 0 12px}
.fr-journey-step__circle {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--fr-bg);
border: 2px solid var(--fr-primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
font-family: var(--fr-font-display);
font-size: 22px;
color: var(--fr-text-dark);
font-weight: 400}
.fr-journey-step--filled .fr-journey-step__circle {
background: var(--fr-primary);
color: var(--fr-text-dark)}
.fr-journey-step__title {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
line-height: 1.3 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 8px 0 !important;
font-weight: 400 !important}
.fr-journey-step__text {
font-size: 13px;
color: var(--fr-text-body);
line-height: 1.55;
margin: 0}
@media (max-width: 991.98px) {
.fr-journey__steps {
grid-template-columns: 1fr;
gap: 32px}
.fr-journey__steps::before { display: none}
.fr-journey-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
text-align: left;
padding: 0;
align-items: start}
.fr-journey-step__circle { margin: 0; flex-shrink: 0}
}

/* §70g. TESTIMONIALS placeholder */
.fr-testimonials {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-bg)}
.fr-testimonials__inner {
max-width: 1200px;
margin: 0 auto}
.fr-testimonials__header {
text-align: center;
margin-bottom: 56px}
.fr-testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px}
.fr-testimonial {
background: var(--fr-cream);
border-radius: var(--fr-radius-md);
padding: 32px 28px;
border: 1px solid var(--fr-border-light);
display: flex;
flex-direction: column}
.fr-testimonial__rating {
display: flex;
gap: 4px;
align-items: center;
margin-bottom: 18px;
font-family: var(--fr-font-display);
font-size: 18px;
color: var(--fr-primary)}
.fr-testimonial__rating-num {
color: var(--fr-text-dark);
margin-left: 4px}
.fr-testimonial__rating-source {
font-family: var(--fr-font-body);
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--fr-text-muted);
margin-left: auto;
font-weight: 600}
.fr-testimonial__text {
font-size: 15px;
line-height: 1.65;
color: var(--fr-text-body);
margin: 0 0 24px 0;
flex: 1}
.fr-testimonial__author {
font-size: 13px;
color: var(--fr-text-muted);
letter-spacing: 0.4px;
padding-top: 18px;
border-top: 1px solid var(--fr-border-light)}
.fr-testimonial__author strong {
display: block;
color: var(--fr-text-dark);
font-family: var(--fr-font-display);
font-size: 15px;
font-weight: 400;
margin-bottom: 2px}
.fr-testimonials__note {
text-align: center;
margin-top: 32px;
font-size: 12px;
color: var(--fr-text-muted);
letter-spacing: 0.6px;
font-style: italic}
@media (max-width: 991.98px) {
.fr-testimonials__grid { grid-template-columns: 1fr}
}
/* PATCH MARKER — v1.1 */

/* ============================================================
   §71. v1.2 — search banner + trust score + light footer + editorial cards
   ============================================================ */

/* §71a. SEARCH BANNER — full-width band under hero, wider command bar */
.fr-search-banner {
background: var(--fr-text-dark);
padding: clamp(36px, 5vw, 64px) 24px;
position: relative;
z-index: 2;
margin-top: -1px}
.fr-search-banner__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center}
.fr-search-banner__intro {
color: #FFFFFF}
.fr-search-banner__kicker {
font-size: 11px;
letter-spacing: 2.6px;
text-transform: uppercase;
font-weight: 600;
color: var(--fr-primary);
margin-bottom: 10px;
display: block}
.fr-search-banner__title {
font-family: var(--fr-font-display) !important;
font-size: clamp(20px, 2.4vw, 28px) !important;
line-height: 1.2 !important;
color: #FFFFFF !important;
margin: 0 !important;
font-weight: 400 !important}
.fr-search-banner__title em {
font-style: italic;
color: var(--fr-primary)}
.fr-search-banner .fr-cmd-bar {
position: relative;
background: #FFFFFF;
border-radius: var(--fr-radius-md);
padding: 18px;
box-shadow: var(--fr-shadow-md);
max-width: 760px !important;
width: 100%;
margin: 0 !important}
.fr-search-banner .fr-cmd-bar__head { display: none}
.fr-search-banner .fr-cmd-bar__form {
display: grid !important;
grid-template-columns: 1fr 1fr 0.85fr 1.1fr !important;
gap: 12px !important;
align-items: end !important}
.fr-search-banner .fr-cmd-bar__field {
margin: 0 !important;
min-width: 0 !important}
.fr-search-banner .fr-cmd-bar__label {
font-size: 10px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
margin-bottom: 6px !important;
display: block !important;
font-weight: 600 !important}
.fr-search-banner .fr-cmd-bar__input,.fr-search-banner .fr-cmd-bar__select {
width: 100% !important;
height: 48px !important;
padding: 0 14px !important;
font-size: 14px !important;
font-family: var(--fr-font-body) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-sm) !important;
background: #FFFFFF !important;
color: var(--fr-text-dark) !important;
box-sizing: border-box !important}
.fr-search-banner .fr-cmd-bar__input:focus,.fr-search-banner .fr-cmd-bar__select:focus {
outline: 2px solid var(--fr-primary) !important;
outline-offset: 0 !important;
border-color: var(--fr-primary) !important}
.fr-search-banner .fr-cmd-bar__submit {
height: 48px !important;
padding: 0 18px !important;
background: var(--fr-primary) !important;
color: var(--fr-text-dark) !important;
border: none !important;
border-radius: var(--fr-radius-sm) !important;
font-size: 12px !important;
letter-spacing: 1.4px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
white-space: nowrap !important}
.fr-search-banner .fr-cmd-bar__submit:hover {
background: var(--fr-primary-hover) !important}
.fr-search-banner .fr-cmd-bar__submit svg {
width: 14px;
height: 14px;
flex-shrink: 0}
@media (max-width: 991.98px) {
.fr-search-banner__inner { grid-template-columns: 1fr; gap: 24px}
.fr-search-banner .fr-cmd-bar { max-width: 100% !important}
.fr-search-banner .fr-cmd-bar__form {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important}
.fr-search-banner .fr-cmd-bar__submit { grid-column: span 2}
}
@media (max-width: 480px) {
.fr-search-banner .fr-cmd-bar__form { grid-template-columns: 1fr !important}
.fr-search-banner .fr-cmd-bar__submit { grid-column: span 1}
}

/* §71b. TRUST SCORE — agregowane ratingi (zamiast testimonials placeholderów) */
.fr-trust {
padding: clamp(72px, 9vw, 120px) 24px;
background: var(--fr-bg)}
.fr-trust__inner {
max-width: 1200px;
margin: 0 auto}
.fr-trust__header {
text-align: center;
margin-bottom: 56px}
.fr-trust__bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--fr-text-dark);
border-radius: var(--fr-radius-lg);
margin-bottom: 48px;
overflow: hidden}
.fr-trust__bar-cell {
padding: 36px 28px;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.08);
color: #FFFFFF}
.fr-trust__bar-cell:last-child { border-right: none}
.fr-trust__bar-num {
font-family: var(--fr-font-display);
font-size: 38px;
line-height: 1;
color: var(--fr-primary);
margin-bottom: 8px;
font-weight: 400}
.fr-trust__bar-label {
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
font-weight: 600;
line-height: 1.4}
.fr-trust__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px}
.fr-trust-card {
background: #FFFFFF;
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
padding: 28px;
display: flex;
flex-direction: column}
.fr-trust-card__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--fr-border-light)}
.fr-trust-card__source {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fr-text-muted);
font-weight: 600}
.fr-trust-card__source-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fr-primary)}
.fr-trust-card__rating {
font-family: var(--fr-font-display);
font-size: 28px;
line-height: 1;
color: var(--fr-text-dark);
font-weight: 400}
.fr-trust-card__rating-suffix {
font-size: 14px;
color: var(--fr-text-muted);
font-family: var(--fr-font-body);
margin-left: 2px}
.fr-trust-card__name {
font-family: var(--fr-font-display) !important;
font-size: 19px !important;
line-height: 1.3 !important;
color: var(--fr-text-dark) !important;
margin: 0 0 10px 0 !important;
font-weight: 400 !important}
.fr-trust-card__meta {
font-size: 13px;
color: var(--fr-text-muted);
margin-bottom: 18px;
letter-spacing: 0.4px}
.fr-trust-card__attrs {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
font-size: 13px;
color: var(--fr-text-body);
line-height: 1.7}
.fr-trust-card__attrs li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0}
.fr-trust-card__attrs li strong {
font-family: var(--fr-font-display);
color: var(--fr-text-dark);
font-weight: 400}
.fr-trust-card__link {
margin-top: auto;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
font-weight: 600;
color: var(--fr-text-dark) !important;
text-decoration: none;
border-bottom: 2px solid var(--fr-primary);
padding-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start}
.fr-trust-card__link:hover { color: var(--fr-primary-hover) !important}
.fr-trust__note {
text-align: center;
margin-top: 32px;
font-size: 12px;
color: var(--fr-text-muted);
letter-spacing: 0.4px}
.fr-trust__note a {
color: var(--fr-text-dark) !important;
text-decoration: underline;
text-decoration-color: var(--fr-primary);
text-underline-offset: 4px}
@media (max-width: 991.98px) {
.fr-trust__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}
.fr-trust__bar-cell { min-width: 0}
.fr-trust__bar-cell:nth-child(2) { border-right: none}
.fr-trust__bar-cell:nth-child(1), .fr-trust__bar-cell:nth-child(2) {
border-bottom: 1px solid rgba(255,255,255,0.08)}
.fr-trust__cards { grid-template-columns: 1fr}
}

/* Very small mobile (≤480) — pojedyncza kolumna trust bar */
@media (max-width: 480px) {
.fr-trust__bar { grid-template-columns: 1fr}
.fr-trust__bar-cell { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08)}
.fr-trust__bar-cell:last-child { border-bottom: none}
}

/* §71c. LIGHT FOOTER — cream override of system footer (replaces dark SA-style) */
html body footer:not(.fr-disable-light-footer) {
background: var(--fr-cream) !important;
margin-top: 0 !important;
border-top: 4px solid var(--fr-primary) !important;
padding: 0 !important;
position: relative;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important}
html body footer .footer.container,html body footer > .footer.container {
background: var(--fr-cream) !important;
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: clamp(48px, 6vw, 72px) 24px clamp(32px, 4vw, 48px) !important}
html body footer .footer.container .footer {
background: transparent !important;
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
gap: 48px !important;
align-items: start !important;
border: none !important;
padding: 0 !important}
/* override v1.0 SA-style ::before brand text */
html body footer .footer.container::before {
content: "Fair Rentals" !important;
display: block !important;
font-family: var(--fr-font-display) !important;
font-size: clamp(28px, 3.5vw, 40px) !important;
color: var(--fr-text-dark) !important;
font-style: italic !important;
letter-spacing: -0.005em !important;
line-height: 1 !important;
margin: 0 0 24px 0 !important;
position: relative !important;
background: transparent !important;
text-align: left !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: clamp(48px, 6vw, 72px) 24px 0 !important}
/* lists -> styled blocks */
html body footer .footer.container .footer ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important}
html body footer .footer.container .footer ul li {
padding: 0 !important;
margin: 0 !important;
font-size: 13px !important;
color: var(--fr-text-body) !important;
line-height: 1.55 !important}
html body footer .footer.container .footer ul li::after,html body footer .footer.container .footer ul li::before {
content: none !important}
html body footer .footer.container .footer ul a {
color: var(--fr-text-dark) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
text-decoration: none !important;
border: none !important}
html body footer .footer.container .footer ul a:hover {
color: var(--fr-primary-hover) !important}
/* Add column labels via ::before on first child of each ul */
html body footer .footer.container .footer .footer-contact-adress::before {
content: "Adres";
display: block;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
font-weight: 700 !important;
margin-bottom: 14px !important}
html body footer .footer.container .footer .footer-contact-phone::before {
content: "Telefon";
display: block;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
font-weight: 700 !important;
margin-bottom: 14px !important}
html body footer .footer.container .footer .footer-contact-mail::before {
content: "E-mail";
display: block;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
font-weight: 700 !important;
margin-bottom: 14px !important}
html body footer .footer.container .footer .footer-contact-terms::before {
content: "Dokumenty";
display: block;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
font-weight: 700 !important;
margin-bottom: 14px !important}
/* footer-contact-baner (Visa/Mastercard) — small row at bottom */
html body footer .footer-contact-baner {
background: var(--fr-cream) !important;
border-top: 1px solid var(--fr-border-light) !important;
margin: clamp(32px, 4vw, 48px) auto 0 !important;
padding: 24px !important;
max-width: 1200px !important;
width: 100% !important;
text-align: center !important;
position: relative !important}
html body footer .footer-contact-baner::before,html body footer .footer-contact-baner::after {
content: none !important;
background: transparent !important}
html body footer .footer-contact-baner img,html body footer .footer-contact-baner svg {
display: inline-block !important;
margin: 0 8px !important;
max-height: 24px !important;
width: auto !important;
filter: grayscale(0.5) opacity(0.85)}
html body footer .footer-contact-baner img.powered_by_logo,html body footer .footer-contact-baner > span:first-child {
display: none !important}
/* Mobile footer */
@media (max-width: 991.98px) {
html body footer .footer.container .footer {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important}
}
@media (max-width: 600px) {
html body footer .footer.container .footer {
grid-template-columns: 1fr !important;
gap: 28px !important}
}

/* §71d. EDITORIAL FEATURED CARDS refresh — overlay instead of badge price */
html body .fr-apt-card {
position: relative !important;
background: var(--fr-text-dark) !important;
border-radius: var(--fr-radius-md) !important;
overflow: hidden !important;
display: block !important;
text-decoration: none !important;
aspect-ratio: 4 / 5 !important;
transition: transform 0.4s ease !important}
html body .fr-apt-card:hover {
transform: translateY(-6px) !important}
html body .fr-apt-card .fr-apt-img,html body .fr-apt-card > div:first-of-type {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important}
html body .fr-apt-card img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s ease !important}
html body .fr-apt-card:hover img {
transform: scale(1.05) !important}
html body .fr-apt-card .fr-apt-img::after,html body .fr-apt-card > div:first-of-type::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%) !important;
pointer-events: none !important}
html body .fr-apt-card .fr-apt-price {
position: absolute !important;
top: 16px !important; left: 16px !important;
background: var(--fr-primary) !important;
color: var(--fr-text-dark) !important;
padding: 8px 14px !important;
border-radius: 100px !important;
font-size: 12px !important;
letter-spacing: 0.4px !important;
font-weight: 700 !important;
z-index: 2 !important}
html body .fr-apt-card .fr-apt-price strong {
font-family: var(--fr-font-display) !important;
font-size: 18px !important;
margin-right: 4px !important}
html body .fr-apt-card .fr-apt-body {
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
padding: 24px !important;
z-index: 2 !important;
color: #FFFFFF !important}
html body .fr-apt-card .fr-h3,html body .fr-apt-card h3 {
color: #FFFFFF !important;
font-size: 20px !important;
line-height: 1.25 !important;
margin: 0 0 8px 0 !important}
html body .fr-apt-card .fr-text,html body .fr-apt-card p {
color: rgba(255,255,255,0.82) !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 0 12px 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important}
html body .fr-apt-card .fr-apt-features {
display: flex !important;
gap: 12px !important;
font-size: 12px !important;
color: rgba(255,255,255,0.7) !important;
letter-spacing: 0.4px !important}
@media (max-width: 600px) {
html body .fr-apt-card { aspect-ratio: 3 / 4 !important}
}

/* §71e v1.49 — iOS Safari defensive fallbacks dla featured cards
   Klient zglosil 2026-05-18: na iPhone zdjecia kart w "Polecane na Twoj */
html body .fr-apt-card .fr-apt-img,html body .fr-apt-card > div:first-of-type {
  /* fallback dla iOS Safari ktore nie zna inset shorthand */
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
  /* GPU layer — wymusza repaint, omija iOS Safari aspect-ratio bugi */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden}

html body .fr-apt-card img {
  /* gwarancja ze img wypelnia wrapper niezaleznie od object-fit */
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
display: block !important;
  /* iOS Safari fallback gdyby aspect-ratio na karcie nie zadzialal */
object-fit: cover !important;
-webkit-object-fit: cover !important}

/* PATCH MARKER — v1.2 */

/* ============================================================
   §72. v1.3 — show + style system .iai-search widget
   (replaces custom .fr-search-banner — Damian feedback: użyj systemowy)
   ============================================================ */

/* Override v1.0 hide of system search (instinct 037 said hide; v1.3 reverts for FR) */
html body.page-index .iai-search,html body.page-index .iai_frontpage,html body.page-index #iai_book_form,html body.page-index .index-info {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important}

/* Container for system search — sits below hero asym, in viewport */
html body.page-index .iai-search {
position: relative !important;
margin: 24px auto 64px !important;
max-width: 1100px !important;
width: calc(100% - 48px) !important;
background: #FFFFFF !important;
border-radius: var(--fr-radius-lg) !important;
padding: clamp(20px, 3vw, 32px) !important;
box-shadow: var(--fr-shadow-lg) !important;
z-index: 5 !important;
box-sizing: border-box !important}

html body.page-index .iai-search::before {
content: "Sprawdź dostępność";
display: block;
font-family: var(--fr-font-display);
font-size: 22px;
line-height: 1.2;
color: var(--fr-text-dark);
margin-bottom: 4px;
font-weight: 400;
font-style: italic}

html body.page-index .iai_frontpage,html body.page-index #iai_book_se {
background: transparent !important;
padding: 0 !important;
border: none !important;
margin-top: 14px !important}

/* Form layout: 4 fields + submit button */
html body.page-index #iai_book_form {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 0.85fr auto !important;
gap: 12px !important;
align-items: end !important;
margin: 0 !important}

/* Inputs — uniform brand styling */
html body.page-index .iai_widget_input,html body.page-index #iai_booking_location,html body.page-index #iai_booking_date_from,html body.page-index #iai_booking_date_to,html body.page-index #iai_booking_persons,html body.page-index #iai_book_form input[type="text"],html body.page-index #iai_book_form input[type="number"] {
height: 48px !important;
padding: 0 14px !important;
font-size: 14px !important;
font-family: var(--fr-font-body) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-sm) !important;
background: var(--fr-cream) !important;
color: var(--fr-text-dark) !important;
width: 100% !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important}

html body.page-index .iai_widget_input:focus,html body.page-index #iai_booking_location:focus,html body.page-index #iai_booking_date_from:focus,html body.page-index #iai_booking_date_to:focus,html body.page-index #iai_booking_persons:focus {
outline: 2px solid var(--fr-primary) !important;
outline-offset: 0 !important;
border-color: var(--fr-primary) !important;
background: #FFFFFF !important}

/* Field labels */
html body.page-index #iai_book_form label {
font-size: 10px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
margin-bottom: 6px !important;
display: block !important;
font-weight: 600 !important;
font-family: var(--fr-font-body) !important}

/* Submit button — yellow brand */
html body.page-index #iai_book_form button[type="submit"],html body.page-index #iai_book_form .btn,html body.page-index #iai_book_form input[type="submit"] {
height: 48px !important;
padding: 0 24px !important;
background: var(--fr-primary) !important;
color: var(--fr-text-dark) !important;
border: none !important;
border-radius: var(--fr-radius-sm) !important;
font-size: 12px !important;
letter-spacing: 1.4px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
cursor: pointer !important;
font-family: var(--fr-font-body) !important;
white-space: nowrap !important;
transition: background 0.2s ease !important}

html body.page-index #iai_book_form button[type="submit"]:hover,html body.page-index #iai_book_form .btn:hover {
background: var(--fr-primary-hover) !important}

/* Datepicker overlays from system widget */
html body.page-index #iai_booking_data1,html body.page-index #iai_booking_data2 {
z-index: 100 !important}

/* Persons +/- buttons (if rendered) */
html body.page-index #iai_book_form .persons-controls,html body.page-index #iai_book_form button[type="button"] {
background: transparent !important;
border: 1px solid var(--fr-border-light) !important;
color: var(--fr-text-dark) !important;
border-radius: var(--fr-radius-sm) !important;
cursor: pointer !important}

/* Mobile responsive */
@media (max-width: 991.98px) {
html body.page-index .iai-search {
margin: 16px auto 48px !important;
width: calc(100% - 32px) !important}
html body.page-index #iai_book_form {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important}
html body.page-index #iai_book_form button[type="submit"] {
grid-column: span 2 !important}
}

@media (max-width: 480px) {
html body.page-index #iai_book_form {
grid-template-columns: 1fr !important}
html body.page-index #iai_book_form button[type="submit"] {
grid-column: span 1 !important}
}

/* Hide v1.2 .fr-search-banner section if still in DOM (cleanup) */
html body section.fr-search-banner {
display: none !important}

/* PATCH MARKER — v1.3 */

/* §73. v1.4 — hero single column (no photo) + dark premium footer
   + system search position FIX (left:-9999 → left:0) */

/* §73a. HERO — single column, hide right photo column */
html body .fr-hero-asym {
grid-template-columns: 1fr !important;
min-height: 56vh !important;
background: var(--fr-cream) !important;
position: relative !important}
html body .fr-hero-asym::before {
  display: none !important; /* no left half background */
}
html body .fr-hero-asym__text {
padding: clamp(96px, 10vw, 140px) 24px clamp(48px, 6vw, 80px) !important;
max-width: 880px !important;
margin: 0 auto !important;
background: transparent !important;
text-align: left !important}
html body .fr-hero-asym__media {
display: none !important}
@media (max-width: 991.98px) {
html body .fr-hero-asym {
min-height: auto !important}
html body .fr-hero-asym__text {
padding: 100px 20px 48px !important}
}

/* §73b. SYSTEM SEARCH — position FIX (system app.css uses left:-9999px to hide) */
html body.page-index .iai-search,html body.page-index .index-info {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
overflow: visible !important;
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
max-width: 1100px !important}

html body.page-index .index-info {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 1px !important;
margin: 0 auto 64px !important;
padding: 0 24px !important;
width: 100% !important;
max-width: 1148px !important;
z-index: 8 !important}

html body.page-index .iai-search {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
background: #FFFFFF !important;
border-radius: var(--fr-radius-lg) !important;
padding: clamp(20px, 3vw, 32px) !important;
box-shadow: 0 24px 60px rgba(15, 15, 14, 0.18), 0 4px 12px rgba(15, 15, 14, 0.08) !important;
border: 1px solid rgba(226, 215, 0, 0.4) !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important}

html body.page-index .iai_frontpage,html body.page-index #iai_book_se {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
position: relative !important;
left: auto !important;
transform: none !important;
background: transparent !important}

html body.page-index #iai_book_form {
display: grid !important;
grid-template-columns: 1.1fr 1fr 1fr 0.85fr auto !important;
gap: 12px !important;
align-items: end !important;
margin: 0 !important;
position: relative !important}

/* §73c. PREMIUM DARK FOOTER — override v1.2 cream */
html body footer:not(.fr-disable-light-footer),html body footer .footer.container,html body footer > .footer.container {
background: #0F0F0E !important;
color: rgba(255, 255, 255, 0.92) !important;
border-top: 2px solid var(--fr-primary) !important;
margin-top: 0 !important;
position: relative !important}

html body footer .footer.container {
max-width: 100% !important;
width: 100% !important;
padding: clamp(56px, 7vw, 88px) 24px clamp(32px, 4vw, 48px) !important;
margin: 0 !important}

/* Override v1.2 ::before brand-text — keep but darker context */
html body footer .footer.container::before {
content: "Fair Rentals" !important;
display: block !important;
font-family: var(--fr-font-display) !important;
font-size: clamp(28px, 3.5vw, 44px) !important;
color: #FFFFFF !important;
font-style: italic !important;
letter-spacing: -0.005em !important;
line-height: 1 !important;
margin: 0 auto 32px !important;
padding: 0 !important;
position: relative !important;
background: transparent !important;
text-align: center !important;
max-width: 1200px !important}
html body footer .footer.container::before {
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
padding-bottom: 32px !important}

/* Inner footer grid: 3-col centered */
html body footer .footer.container .footer {
background: transparent !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 48px !important;
align-items: start !important;
border: none !important;
padding: 0 !important;
max-width: 1100px !important;
margin: 0 auto !important}

/* List items — white text */
html body footer .footer.container .footer ul li,html body footer .footer.container .footer ul a {
color: rgba(255, 255, 255, 0.92) !important;
font-size: 14px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
letter-spacing: 0.2px !important;
text-decoration: none !important}

html body footer .footer.container .footer ul a:hover {
color: var(--fr-primary) !important}

/* Phone + email — yellow highlight (AAA contrast on dark) */
html body footer .footer.container .footer .footer-contact-phone a,html body footer .footer.container .footer .footer-contact-mail a {
color: var(--fr-primary) !important;
font-weight: 500 !important}

/* Column labels — uppercase, lighter on dark */
html body footer .footer.container .footer .footer-contact-adress::before {
content: "Adres" !important;
display: block !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2.4px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.55) !important;
font-weight: 600 !important;
margin-bottom: 16px !important}
html body footer .footer.container .footer .footer-contact-phone::before {
content: "Telefon" !important;
display: block !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2.4px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.55) !important;
font-weight: 600 !important;
margin-bottom: 16px !important}
html body footer .footer.container .footer .footer-contact-mail::before {
content: "E-mail" !important;
display: block !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 2.4px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.55) !important;
font-weight: 600 !important;
margin-bottom: 16px !important}

/* Hide terms inline — move to separate row below */
html body footer .footer.container .footer .footer-contact-terms {
grid-column: 1 / -1 !important;
margin-top: 32px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
display: flex !important;
flex-direction: row !important;
gap: 32px !important;
flex-wrap: wrap !important;
align-items: center !important}
html body footer .footer.container .footer .footer-contact-terms::before {
content: none !important}
html body footer .footer.container .footer .footer-contact-terms li {
flex: 0 0 auto !important}
html body footer .footer.container .footer .footer-contact-terms a {
font-size: 12px !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.65) !important;
font-weight: 500 !important}
html body footer .footer.container .footer .footer-contact-terms a:hover {
color: var(--fr-primary) !important}

/* Payment baner — dark, centered, white-tinted icons */
html body footer .footer-contact-baner {
background: #0F0F0E !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
margin: 0 !important;
padding: 24px !important;
max-width: 100% !important;
width: 100% !important;
text-align: center !important;
position: relative !important}
html body footer .footer-contact-baner img,html body footer .footer-contact-baner svg {
display: inline-block !important;
margin: 0 8px !important;
max-height: 22px !important;
width: auto !important;
filter: brightness(1.4) saturate(0.6) opacity(0.78) !important}
html body footer .footer-contact-baner img.powered_by_logo,html body footer .footer-contact-baner > span:first-child {
display: none !important}

/* Mobile footer */
@media (max-width: 991.98px) {
html body footer .footer.container .footer {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important}
html body footer .footer.container .footer .footer-contact-mail {
grid-column: 1 / -1 !important}
}
@media (max-width: 600px) {
html body footer .footer.container .footer {
grid-template-columns: 1fr !important;
gap: 28px !important}
html body footer .footer.container .footer .footer-contact-terms {
flex-direction: column !important;
gap: 12px !important}
}

/* §73d. UX CONTRAST FIXES — increase muted text on cream backgrounds */
html body .fr-trust-card__meta,html body .fr-trust-card__source,html body .fr-section__header .fr-lead,html body .fr-districts__header .fr-lead {
  color: var(--fr-text-body) !important; /* was muted, now darker for AA contrast */
}

html body .fr-district__count {
color: var(--fr-text-dark) !important;
font-weight: 700 !important}

/* Magazine quote opacity FIX — reveal animation might leave it stuck */
html body .fr-magazine,html body .fr-final-cta {
opacity: 1 !important}

/* Trust card link — increase contrast */
html body .fr-trust-card__link {
color: var(--fr-text-dark) !important;
border-bottom-width: 2px !important}

/* Hide v1.3 .fr-search-banner if any leftover */
html body section.fr-search-banner,html body .fr-search-banner {
display: none !important}

/* Hide override on .iai-search default13 specifications that conflict */
html body.page-index .iai-search > * {
position: static !important;
left: auto !important;
transform: none !important}

/* PATCH MARKER — v1.4 */

/* ============================================================
   §74. v1.5 — hero z głównym custom zdjęciem (full-bleed bg)
        + hide system #parallax_topslider (panorama Wrocławia w tle)
   Damian feedback v1.4: ma być zdjęcie główne, nie ta panorama z systemu
   ============================================================ */

/* §74a. HIDE SYSTEM PARALLAX SLIDER — system pokazuje panoramę Wrocławia w tle hero */
html body.page-index #parallax_topslider,html body.page-index .parallax-slider,html body.page-index .section.parallax > .parallax-slider {
display: none !important;
visibility: hidden !important;
height: 0 !important;
position: absolute !important;
left: -9999px !important}

/* §74b. HERO — custom full-bleed photo + dark overlay + white text */
html body .fr-hero-asym {
grid-template-columns: 1fr !important;
min-height: 86vh !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
  background:
linear-gradient(115deg, rgba(15, 15, 14, 0.65) 0%, rgba(15, 15, 14, 0.35) 55%, rgba(15, 15, 14, 0.20) 100%),
    url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=2400&q=80')
    center/cover no-repeat !important}

html body .fr-hero-asym::before {
display: none !important}

html body .fr-hero-asym__text {
padding: clamp(96px, 10vw, 140px) clamp(40px, 6vw, 96px) clamp(64px, 8vw, 96px) !important;
max-width: 760px !important;
margin: 0 !important;
background: transparent !important;
position: relative !important;
z-index: 2 !important}

/* Kicker — yellow accent line + white uppercase */
html body .fr-hero-asym__kicker {
color: #FFFFFF !important;
font-weight: 600 !important;
letter-spacing: 2.6px !important;
margin-bottom: 28px !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important}
html body .fr-hero-asym__kicker::before {
background: var(--fr-primary) !important;
width: 36px !important;
height: 2px !important}

/* Title — white serif w/ heavy text-shadow for legibility on photo */
html body .fr-hero-asym__title {
color: #FFFFFF !important;
font-family: var(--fr-font-display) !important;
font-size: clamp(36px, 5vw, 72px) !important;
line-height: 1.04 !important;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4) !important}

html body .fr-hero-asym__title em {
color: #FFFFFF !important;
font-style: italic !important}

html body .fr-hero-asym__title em::after {
background: var(--fr-primary) !important;
width: 96px !important;
height: 4px !important}

/* Lead — white with text-shadow */
html body .fr-hero-asym__lead {
color: #FFFFFF !important;
font-size: 17px !important;
line-height: 1.65 !important;
max-width: 540px !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5) !important;
font-weight: 400 !important;
margin-bottom: 36px !important}

/* CTA buttons — primary (yellow) + ghost white border on dark */
html body .fr-hero-asym__cta-row {
margin-bottom: 40px !important}

html body .fr-hero-asym .fr-btn--primary {
background: var(--fr-primary) !important;
color: var(--fr-text-dark) !important;
border: 2px solid var(--fr-primary) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
font-weight: 700 !important}
html body .fr-hero-asym .fr-btn--primary:hover {
background: var(--fr-primary-hover) !important;
border-color: var(--fr-primary-hover) !important;
transform: translateY(-2px) !important}

html body .fr-hero-asym .fr-btn--ghost-light {
background: rgba(255, 255, 255, 0.10) !important;
color: #FFFFFF !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
font-weight: 600 !important}
html body .fr-hero-asym .fr-btn--ghost-light:hover {
background: rgba(255, 255, 255, 0.20) !important;
border-color: #FFFFFF !important}

/* Meta strip — semi-transparent white background card on photo */
html body .fr-hero-asym__meta {
background: rgba(15, 15, 14, 0.55) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: var(--fr-radius-md) !important;
padding: 20px 28px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-top-color: rgba(226, 215, 0, 0.4) !important;
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 36px !important;
margin-top: 32px !important}
html body .fr-hero-asym__meta > div {
color: rgba(255, 255, 255, 0.82) !important;
font-size: 12px !important;
letter-spacing: 1.6px !important}
html body .fr-hero-asym__meta strong {
color: #FFFFFF !important;
font-family: var(--fr-font-display) !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 1 !important;
display: block !important;
margin-bottom: 4px !important}

/* Hero media element — completely hidden (replaced by bg) */
html body .fr-hero-asym__media,html body .fr-hero-asym__badge {
display: none !important}

/* Mobile hero */
@media (max-width: 991.98px) {
html body .fr-hero-asym {
min-height: 78vh !important}
html body .fr-hero-asym__text {
padding: 100px 24px 56px !important;
max-width: 100% !important}
html body .fr-hero-asym__title {
font-size: clamp(32px, 8vw, 48px) !important}
html body .fr-hero-asym__meta {
padding: 14px 18px !important;
gap: 20px !important}
html body .fr-hero-asym__meta strong {
font-size: 20px !important}
}

@media (max-width: 480px) {
html body .fr-hero-asym__cta-row {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important}
html body .fr-hero-asym__cta-row .fr-btn {
width: 100% !important;
justify-content: center !important}
}

/* §74c. Header on hero — v1.66 USUNIETE drop-shadow.
   Klientka: "wersja bez cieni — jest lżejsza, ujednolicić z podstronami".
   Logo nadal widoczne (chip ma białe tło rgba 0.97). */
html body.page-index header.default13:not(.fr-header--scrolled) .navbar-brand img {
filter: none !important}

/* PATCH MARKER — v1.5 */

/* ============================================================
   §75. v1.6 — przywróć systemowy #parallax_topslider, usuń
        custom photo bg z hero. Damian: ma być normalne
        zdjęcie systemowe jak w innych wdrożeniach.
   ============================================================ */

/* §75a. RESTORE system parallax slider — show natywne photo z panelu */
html body.page-index #parallax_topslider,html body.page-index .parallax-slider,html body.page-index .section.parallax > .parallax-slider {
display: block !important;
visibility: visible !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: hidden !important}

html body.page-index .section.parallax {
position: relative !important}

html body.page-index .section.parallax > .fp-tableCell {
position: relative !important;
z-index: 1 !important}

/* Slick slides inside parallax — fill container */
html body.page-index #parallax_topslider .slick-list,html body.page-index #parallax_topslider .slick-track,html body.page-index #parallax_topslider .slick-slide {
height: 100% !important}

html body.page-index #parallax_topslider .slick-slide > div,html body.page-index #parallax_topslider .slick-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important}

/* §75b. HERO — transparent bg + overlay over system parallax photo */
html body .fr-hero-asym {
background: transparent !important;
background-image: none !important;
position: relative !important}

html body .fr-hero-asym::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(115deg, rgba(15, 15, 14, 0.62) 0%, rgba(15, 15, 14, 0.32) 55%, rgba(15, 15, 14, 0.18) 100%) !important;
z-index: 1 !important;
pointer-events: none !important}

html body .fr-hero-asym__text {
position: relative !important;
z-index: 3 !important}

/* PATCH MARKER — v1.6 */

/* §78. v1.9 — REVERT to JARVIS proven pattern
   Hide system widget completely, restore custom .fr-search-banner. */

/* Hide system widget completely (revert v1.3 onwards) */
html body.page-index .iai-search,html body.page-index .index-info,html body.page-index .iai_frontpage,html body.page-index #iai_book_se,html body.page-index #iai_book_form,html body.page-index .section.parallax .iai-search,html body.page-index .section.parallax .index-info,html body.page-index .section.parallax .iai_frontpage,html body.page-index .section.parallax .fp-tableCell .index-info,html body.page-index .section.parallax .fp-tableCell .index-info .iai-search,html body.page-index .section.parallax #iai_book_form,html body.page-index .section.parallax form#iai_book_form {
display: none !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
height: 0 !important;
max-height: 0 !important;
width: 0 !important;
max-width: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
z-index: -100 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
opacity: 0 !important;
min-height: 0 !important}

/* Restore .fr-search-banner section visibility (was hidden in v1.3 cleanup) */
html body section.fr-search-banner,html body .fr-search-banner {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
position: relative !important}

/* Hero — remove v1.8 padding-bottom (search bar no longer floating on hero) */
html body .fr-hero-asym {
padding-bottom: 0 !important}

/* PATCH MARKER — v1.9 */

/* §80. v1.11 — search ABSOLUTE wewnątrz hero-wrap, visible na
   KAŻDYM urządzeniu (desktop/tablet/mobile/iPhone SE). */

html body .fr-hero-wrap {
position: relative !important;
min-height: 100vh !important;
  min-height: 100svh !important; /* small viewport (mobile bez UI) */
}

html body .fr-hero-asym {
min-height: 100vh !important;
min-height: 100svh !important;
padding-bottom: clamp(220px, 28vh, 360px) !important}

html body .fr-hero-asym__media {
min-height: 100vh !important;
min-height: 100svh !important}

html body .fr-hero-wrap > .fr-search-banner,html body div.fr-hero-wrap > section.fr-search-banner {
position: absolute !important;
bottom: clamp(16px, 3vh, 40px) !important;
left: clamp(12px, 3vw, 48px) !important;
right: clamp(12px, 3vw, 48px) !important;
top: auto !important;
margin: 0 auto !important;
max-width: 1180px !important;
width: calc(100% - clamp(24px, 6vw, 96px)) !important;
z-index: 10 !important;
padding: clamp(16px, 2.4vw, 28px) !important;
border-radius: var(--fr-radius-lg) !important;
background: var(--fr-text-dark) !important;
box-shadow: 0 24px 60px rgba(15, 15, 14, 0.45), 0 6px 16px rgba(15, 15, 14, 0.3) !important}

/* Cofa v1.10 overlap — w v1.11 search jest wewnątrz hero z absolute */
html body .fr-search-banner {
margin-top: 0 !important}

/* Search inner layout — compact dla viewport */
html body .fr-hero-wrap .fr-search-banner__inner {
display: grid !important;
grid-template-columns: minmax(180px, 1fr) minmax(420px, 1.6fr) !important;
gap: clamp(16px, 2vw, 32px) !important;
align-items: center !important}

html body .fr-hero-wrap .fr-search-banner__intro {
color: #FFFFFF !important}

html body .fr-hero-wrap .fr-search-banner__kicker {
font-size: 10px !important;
margin-bottom: 6px !important;
color: var(--fr-primary) !important}

html body .fr-hero-wrap .fr-search-banner__title {
font-family: var(--fr-font-display) !important;
font-size: clamp(15px, 1.6vw, 20px) !important;
line-height: 1.2 !important;
color: #FFFFFF !important;
margin: 0 !important}

html body .fr-hero-wrap .fr-search-banner__title em {
display: inline !important;
color: var(--fr-primary) !important}

html body .fr-hero-wrap .fr-cmd-bar {
background: #FFFFFF !important;
border-radius: var(--fr-radius-md) !important;
padding: clamp(10px, 1.4vw, 16px) !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important}

html body .fr-hero-wrap .fr-cmd-bar__head {
display: none !important}

html body .fr-hero-wrap .fr-cmd-bar__form {
display: grid !important;
grid-template-columns: 1fr 1fr 0.8fr 1.05fr !important;
gap: clamp(6px, 0.8vw, 10px) !important;
align-items: end !important;
margin: 0 !important}

html body .fr-hero-wrap .fr-cmd-bar__field {
margin: 0 !important;
min-width: 0 !important}

html body .fr-hero-wrap .fr-cmd-bar__label {
font-size: 9px !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
color: var(--fr-text-muted) !important;
margin-bottom: 4px !important;
font-weight: 600 !important;
display: block !important}

html body .fr-hero-wrap .fr-cmd-bar__input,html body .fr-hero-wrap .fr-cmd-bar__select {
height: 42px !important;
padding: 0 10px !important;
font-size: 13px !important;
font-family: var(--fr-font-body) !important;
border: 1px solid var(--fr-border-light) !important;
border-radius: var(--fr-radius-sm) !important;
background: var(--fr-cream) !important;
color: var(--fr-text-dark) !important;
width: 100% !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important}

html body .fr-hero-wrap .fr-cmd-bar__submit {
height: 42px !important;
padding: 0 14px !important;
background: var(--fr-primary) !important;
color: var(--fr-text-dark) !important;
border: none !important;
border-radius: var(--fr-radius-sm) !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
white-space: nowrap !important}

html body .fr-hero-wrap .fr-cmd-bar__submit:hover {
background: var(--fr-primary-hover) !important}

html body .fr-hero-wrap .fr-cmd-bar__submit svg {
width: 12px !important;
height: 12px !important}

/* TABLET 991px — intro nad search bar (1 col) */
@media (max-width: 991.98px) {
html body .fr-hero-wrap .fr-search-banner__inner {
grid-template-columns: 1fr !important;
gap: 12px !important}
html body .fr-hero-asym {
padding-bottom: clamp(280px, 36vh, 420px) !important}
}

/* MOBILE 600px — form 2-col, button span 2 */
@media (max-width: 600px) {
html body .fr-hero-wrap > .fr-search-banner,
html body div.fr-hero-wrap > section.fr-search-banner {
bottom: clamp(12px, 2vh, 24px) !important;
left: 8px !important;
right: 8px !important;
width: calc(100% - 16px) !important;
padding: 12px !important}
html body .fr-hero-wrap .fr-search-banner__title {
font-size: 14px !important}
html body .fr-hero-wrap .fr-cmd-bar {
padding: 10px !important}
html body .fr-hero-wrap .fr-cmd-bar__form {
grid-template-columns: 1fr 1fr !important;
gap: 6px !important}
html body .fr-hero-wrap .fr-cmd-bar__submit {
grid-column: span 2 !important}
html body .fr-hero-asym {
padding-bottom: clamp(320px, 42vh, 420px) !important}
}

/* iPhone SE (320×568) — last resort: form 1 col, search compact */
@media (max-width: 380px) {
html body .fr-hero-wrap .fr-cmd-bar__form {
grid-template-columns: 1fr !important}
html body .fr-hero-wrap .fr-cmd-bar__submit {
grid-column: span 1 !important}
html body .fr-hero-wrap .fr-cmd-bar__input,
html body .fr-hero-wrap .fr-cmd-bar__select,
html body .fr-hero-wrap .fr-cmd-bar__submit {
height: 38px !important}
html body .fr-hero-asym {
padding-bottom: clamp(380px, 50vh, 480px) !important}
}

/* PATCH MARKER — v1.11 */

/* ============================================================
   §81. v1.12 — STOPKA REBUILD: editorial magazine masthead
        Damian: "całkiem inna stopka, na bazie danych z panelu".
        + fix duplicated labels (TELEFON / TELEFON · numer)
   ============================================================ */

/* RESET previous footer rules from v1.2/v1.4/v1.9 — wholesale override */
html body footer:not(.fr-disable-light-footer),html body footer .footer.container,html body footer > .footer.container {
background: #0A0A09 !important;
color: rgba(255, 255, 255, 0.85) !important;
border-top: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important}

/* Yellow gradient separator on top */
html body footer::before {
content: '' !important;
display: block !important;
height: 1px !important;
background: linear-gradient(90deg, transparent 0%, var(--fr-primary) 30%, var(--fr-primary) 70%, transparent 100%) !important;
width: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1 !important}

html body footer .footer.container {
padding: clamp(72px, 9vw, 120px) clamp(24px, 4vw, 48px) clamp(40px, 5vw, 64px) !important;
background: transparent !important}

/* MASTHEAD — brand "Fair Rentals" big centered + tagline */
html body footer .footer.container::before {
content: "Fair Rentals" !important;
display: block !important;
font-family: var(--fr-font-display) !important;
font-size: clamp(56px, 8.5vw, 112px) !important;
font-style: italic !important;
color: #FFFFFF !important;
text-align: center !important;
letter-spacing: -0.025em !important;
line-height: 0.95 !important;
margin: 0 auto clamp(8px, 1.2vw, 16px) !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
max-width: 100% !important;
width: auto !important;
position: relative !important}

html body footer .footer.container::after {
content: "Rodzinny operator wynajmu · Wrocław · est. 2020" !important;
display: block !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 3.5px !important;
text-transform: uppercase !important;
color: var(--fr-primary) !important;
text-align: center !important;
margin: 0 auto clamp(56px, 7vw, 96px) !important;
font-weight: 600 !important;
max-width: 100% !important;
position: relative !important}

/* Inner footer 3-col grid */
html body footer .footer.container .footer {
background: transparent !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(28px, 3.5vw, 48px) !important;
align-items: start !important;
border: none !important;
padding: 0 !important;
max-width: 1000px !important;
margin: 0 auto clamp(48px, 6vw, 72px) !important;
position: relative !important;
text-align: center !important}

/* Each column ul = label kicker + value */
html body footer .footer.container .footer ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
position: relative !important}

html body footer .footer.container .footer ul li {
margin: 0 0 4px 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: rgba(255, 255, 255, 0.85) !important;
text-align: center !important;
list-style: none !important}

html body footer .footer.container .footer ul li::before,html body footer .footer.container .footer ul li::after {
content: none !important;
display: none !important}

html body footer .footer.container .footer ul a {
color: #FFFFFF !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 400 !important;
border: none !important}

/* USUŃ duplikujące się ::before labels (z v1.4) — system już ma labels w tekście */
html body footer .footer.container .footer .footer-contact-adress::before,html body footer .footer.container .footer .footer-contact-phone::before,html body footer .footer.container .footer .footer-contact-mail::before,html body footer .footer.container .footer .footer-contact-terms::before {
content: none !important;
display: none !important}

/* Phone + email — duże brand display, żółte */
html body footer .footer.container .footer .footer-contact-phone a,html body footer .footer.container .footer .footer-contact-mail a {
color: var(--fr-primary) !important;
font-weight: 400 !important;
font-family: var(--fr-font-display) !important;
font-size: 19px !important;
letter-spacing: 0 !important;
font-style: italic !important}

html body footer .footer.container .footer .footer-contact-phone a:hover,html body footer .footer.container .footer .footer-contact-mail a:hover {
color: #FFFFFF !important}

/* Address column — bigger serif text */
html body footer .footer.container .footer .footer-contact-adress li {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
font-style: italic !important;
line-height: 1.4 !important;
color: #FFFFFF !important}

/* Terms — full row underneath, inline links */
html body footer .footer.container .footer .footer-contact-terms {
grid-column: 1 / -1 !important;
margin-top: clamp(32px, 4vw, 56px) !important;
padding-top: clamp(24px, 3vw, 40px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
flex-direction: row !important;
gap: clamp(20px, 3vw, 40px) !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important}

html body footer .footer.container .footer .footer-contact-terms li {
flex: 0 0 auto !important;
margin: 0 !important;
  font-size: 0 !important; /* hide system labels if any */
}

html body footer .footer.container .footer .footer-contact-terms a {
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.7) !important;
font-weight: 600 !important;
font-family: var(--fr-font-body) !important;
font-style: normal !important}

html body footer .footer.container .footer .footer-contact-terms a:hover {
color: var(--fr-primary) !important}

/* Bottom strip — copyright + payment baner */
html body footer .footer-contact-baner {
background: rgba(255, 255, 255, 0.03) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
margin: 0 !important;
padding: 20px clamp(24px, 4vw, 48px) !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: wrap !important;
position: relative !important}

html body footer .footer-contact-baner::before {
content: "© Fair Rentals Sp. z o.o. · Wszelkie prawa zastrzeżone" !important;
display: inline-block !important;
font-family: var(--fr-font-body) !important;
font-size: 10px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.45) !important;
font-weight: 500 !important;
background: transparent !important;
width: auto !important;
height: auto !important;
position: relative !important;
inset: auto !important}

html body footer .footer-contact-baner::after {
content: none !important}

html body footer .footer-contact-baner img,html body footer .footer-contact-baner svg {
display: inline-block !important;
margin: 0 4px !important;
max-height: 18px !important;
width: auto !important;
filter: brightness(1.6) saturate(0.3) opacity(0.55) !important;
transition: opacity 0.2s ease !important}

html body footer .footer-contact-baner img:hover,html body footer .footer-contact-baner svg:hover {
filter: brightness(1.6) saturate(0.3) opacity(1) !important}

html body footer .footer-contact-baner img.powered_by_logo,html body footer .footer-contact-baner > span:first-child {
display: none !important}

/* Mobile masthead */
@media (max-width: 768px) {
html body footer .footer.container .footer {
grid-template-columns: 1fr !important;
gap: 28px !important}
html body footer .footer-contact-baner {
flex-direction: column !important;
gap: 16px !important}
html body footer .footer.container::before {
font-size: clamp(40px, 12vw, 72px) !important}
}

@media (max-width: 480px) {
html body footer .footer.container::after {
font-size: 10px !important;
letter-spacing: 2.5px !important}
}

/* PATCH MARKER — v1.12 */

/* §82. v1.13 — STOPKA REBUILD CLEAN (block flow, no grid)
   v1.12 BUG: system ma 2 zagnieżdżone <div.footer.container>. */

/* Outer .footer.container (i inner, ta sama klasa) — pure block flow */
html body footer .footer.container,html body footer > .footer.container,html body footer .footer.container .footer.container {
display: block !important;
background: transparent !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important}

/* Outer container — only one to have padding */
html body footer > .footer.container {
background: #0A0A09 !important;
color: rgba(255, 255, 255, 0.85) !important;
padding: clamp(72px, 9vw, 120px) clamp(24px, 4vw, 48px) clamp(40px, 5vw, 64px) !important;
position: relative !important}

/* Inner container — natural width with horizontal padding */
html body footer .footer.container .footer.container {
max-width: 1100px !important;
margin: 0 auto !important;
background: transparent !important}

/* Brand pseudo — top of outer */
html body footer > .footer.container::before {
content: "Fair Rentals" !important;
display: block !important;
font-family: var(--fr-font-display) !important;
font-size: clamp(48px, 7.5vw, 96px) !important;
font-style: italic !important;
color: #FFFFFF !important;
text-align: center !important;
letter-spacing: -0.025em !important;
line-height: 0.95 !important;
margin: 0 auto clamp(8px, 1.2vw, 16px) !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
width: auto !important;
height: auto !important;
position: relative !important;
inset: auto !important}

/* Tagline pseudo — OUTER ::after (bottom block flow) */
html body footer > .footer.container::after {
content: none !important}

/* Inner container ::before/::after — WYŁĄCZ żeby nie duplikować pseudo elements */
html body footer .footer.container .footer.container::before,html body footer .footer.container .footer.container::after {
content: none !important}

/* Tagline — block flow PO brand, PRZED inner */
/* Use a positioned ::before on .footer__wrapper instead */
html body footer .footer__wrapper {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 !important;
position: relative !important}

html body footer .footer__wrapper::before {
content: "Rodzinny operator wynajmu · Wrocław · est. 2020" !important;
display: block !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 3.5px !important;
text-transform: uppercase !important;
color: var(--fr-primary) !important;
text-align: center !important;
margin: 0 auto clamp(48px, 6vw, 72px) !important;
font-weight: 600 !important;
width: 100% !important}

/* Row — flex centered column */
html body footer .row,html body footer .footer .row,html body footer .footer__wrapper .row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important}

/* Footer__contact ul — 3-col grid (adres, tel, mail) + terms full row */
html body footer ul.footer__contact,html body footer .row > ul.footer__contact {
list-style: none !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(24px, 3.5vw, 48px) !important;
width: 100% !important;
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
align-items: start !important;
justify-items: center !important}

/* List items */
html body footer ul.footer__contact > li {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: rgba(255, 255, 255, 0.85) !important;
text-align: center !important;
list-style: none !important;
width: 100% !important}

html body footer ul.footer__contact > li::before,html body footer ul.footer__contact > li::after {
content: none !important;
display: none !important}

html body footer ul.footer__contact a {
color: #FFFFFF !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 400 !important;
border: none !important}

/* Address — serif italic */
html body footer ul.footer__contact > li.footer-contact-adress {
font-family: var(--fr-font-display) !important;
font-size: 17px !important;
font-style: italic !important;
line-height: 1.4 !important;
color: #FFFFFF !important}

/* Phone + email — yellow display */
html body footer ul.footer__contact > li.footer-contact-phone a,html body footer ul.footer__contact > li.footer-contact-mail a {
color: var(--fr-primary) !important;
font-weight: 400 !important;
font-family: var(--fr-font-display) !important;
font-size: 19px !important;
letter-spacing: 0 !important;
font-style: italic !important}

html body footer ul.footer__contact > li.footer-contact-phone a:hover,html body footer ul.footer__contact > li.footer-contact-mail a:hover {
color: #FFFFFF !important}

/* Terms — full row pod 3-col */
html body footer ul.footer__contact > li.footer-contact-terms {
grid-column: 1 / -1 !important;
margin-top: clamp(24px, 3vw, 40px) !important;
padding-top: clamp(20px, 2.5vw, 32px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
flex-direction: row !important;
gap: clamp(20px, 3vw, 40px) !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important}

html body footer ul.footer__contact > li.footer-contact-terms a {
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.7) !important;
font-weight: 600 !important;
font-family: var(--fr-font-body) !important;
font-style: normal !important}

html body footer ul.footer__contact > li.footer-contact-terms a:hover {
color: var(--fr-primary) !important}

/* Hide unused .footer__social, .footer-contact-add, scripts */
html body footer .footer__social,html body footer .footer__social_media,html body footer .footer-contact-add,html body footer .powered_by {
display: none !important}

/* BANER — copyright + payments split flex */
html body footer > .footer.container > .footer-contact-baner,html body footer .footer-contact-baner {
background: rgba(255, 255, 255, 0.03) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
margin: clamp(40px, 5vw, 64px) calc(-1 * clamp(24px, 4vw, 48px)) 0 !important;
padding: 20px clamp(24px, 4vw, 48px) !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: wrap !important;
position: relative !important}

html body footer .footer-contact-baner::before {
content: "© Fair Rentals Sp. z o.o. · Wszelkie prawa zastrzeżone" !important;
display: inline-block !important;
font-family: var(--fr-font-body) !important;
font-size: 10px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.45) !important;
font-weight: 500 !important;
background: transparent !important;
width: auto !important;
height: auto !important;
position: relative !important;
inset: auto !important}

html body footer .footer-contact-baner::after {
content: none !important}

html body footer .footer-contact-baner img,html body footer .footer-contact-baner svg {
display: inline-block !important;
margin: 0 4px !important;
max-height: 18px !important;
width: auto !important;
filter: brightness(1.6) saturate(0.3) opacity(0.55) !important}

html body footer .footer-contact-baner img.powered_by_logo,html body footer .footer-contact-baner > span:first-child {
display: none !important}

/* MOBILE */
@media (max-width: 768px) {
html body footer ul.footer__contact {
grid-template-columns: 1fr !important;
gap: 24px !important}
html body footer .footer-contact-baner {
flex-direction: column !important;
gap: 16px !important}
html body footer > .footer.container::before {
font-size: clamp(40px, 12vw, 72px) !important}
}

@media (max-width: 480px) {
html body footer .footer__wrapper::before {
font-size: 10px !important;
letter-spacing: 2.5px !important}
}

/* PATCH MARKER — v1.13 */

/* §84. v1.15 — żółty muted dla TEKSTU (na dark + na cream)
   Damian: "na ciemnym za żarówiasty, na beżu za słaby kontrast". */

:root, html:root {
--fr-yellow-text: #C8B43E !important;
--fr-yellow-deep: #8A7300 !important}

/* === TEKST/AKCENTY ŻÓŁTE NA DARK BG → muted #C8B43E === */

/* Magazine quote (background dark) */
html body .fr-magazine__quote em,html body .fr-magazine__mark,html body .fr-magazine__attr {
color: var(--fr-yellow-text) !important}
html body .fr-magazine__attr::before {
color: var(--fr-yellow-text) !important}

/* Stats asymmetric hero (dark card) */
html body .fr-stats-asym__hero-kicker,html body .fr-stats-asym__hero-num {
color: var(--fr-yellow-text) !important}

/* Trust score bar (dark) */
html body .fr-trust__bar-num {
color: var(--fr-yellow-text) !important}

/* Final CTA (dark gradient) */
html body .fr-final-cta .fr-kicker {
color: var(--fr-yellow-text) !important;
background: rgba(200, 180, 62, 0.15) !important;
border-color: rgba(200, 180, 62, 0.4) !important}

/* Footer dark — phone/email/tagline/separator */
html body footer ul.footer__contact > li.footer-contact-phone a,html body footer ul.footer__contact > li.footer-contact-mail a,html body footer .footer.container .footer .footer-contact-phone a,html body footer .footer.container .footer .footer-contact-mail a,html body footer .footer__wrapper::before {
color: var(--fr-yellow-text) !important}

html body footer .footer.container .footer .footer-contact-terms a:hover,html body footer ul.footer__contact > li.footer-contact-terms a:hover {
color: var(--fr-yellow-text) !important}

html body footer::before {
background: linear-gradient(90deg, transparent 0%, var(--fr-yellow-text) 30%, var(--fr-yellow-text) 70%, transparent 100%) !important}

/* Hero photo overlay — text shadow tones, kicker line, title underline */
html body .fr-hero-asym__kicker::before,html body .fr-hero-asym__title em::after {
background: var(--fr-yellow-text) !important}

/* Search banner kicker (na dark) */
html body .fr-search-banner__kicker,html body .fr-hero-wrap .fr-search-banner__kicker,html body .fr-search-banner__title em,html body .fr-hero-wrap .fr-search-banner__title em {
color: var(--fr-yellow-text) !important}

/* Hero badge label brand */
html body .fr-hero-asym__badge,html body .fr-hero-wrap .fr-hero-asym__badge {
border-color: rgba(200, 180, 62, 0.6) !important}

/* === TEKST/AKCENTY ŻÓŁTE NA CREAM/LIGHT BG → deep #8A7300 === */

/* Principles 01/02/03 (cream bg) */
html body .fr-principle__num {
color: var(--fr-yellow-deep) !important}

/* Districts pin (cream card) */
html body .fr-district__pin {
background: var(--fr-yellow-deep) !important;
color: #FFFFFF !important}

/* Trust card source dot (white card on cream) */
html body .fr-trust-card__source-dot {
background: var(--fr-yellow-deep) !important}

/* Trust card link border bottom */
html body .fr-trust-card__link {
border-bottom-color: var(--fr-yellow-deep) !important}

/* Trust score note links */
html body .fr-trust__note a {
text-decoration-color: var(--fr-yellow-deep) !important}

/* Section kicker rule (cream) */
html body .fr-kicker::before,html body .fr-section__header .fr-rule,html body .fr-rule {
background: var(--fr-yellow-deep) !important}

/* Principles head em underline (cream) */
html body .fr-principles__head-title em::after {
background: var(--fr-yellow-deep) !important}

/* Journey filled circle on cream */
html body .fr-journey-step--filled .fr-journey-step__circle {
background: var(--fr-yellow-deep) !important;
border-color: var(--fr-yellow-deep) !important;
color: #FFFFFF !important}

html body .fr-journey-step__circle {
border-color: var(--fr-yellow-deep) !important}

/* Journey timeline line connector */
html body .fr-journey__steps::before {
background: rgba(138, 115, 0, 0.3) !important}

/* District hover — border color */
html body .fr-district:hover {
border-color: var(--fr-yellow-deep) !important}

/* Trust score note text-decoration */
html body .fr-trust__note a {
text-decoration-color: var(--fr-yellow-deep) !important}

/* === BUTTONS + PILLS — keep --fr-primary #E2D700 (BG context, czarny tekst → 11.7:1 AAA) === */
/* Te elementy nie zmieniam — żółty jest BG, czarny tekst na nim:
   - .fr-btn--primary
   - .fr-apt-card .fr-apt-price
   - .fr-cmd-bar__submit
   - hero badge num
*/

/* PATCH MARKER — v1.15 */

/* §85. v1.16 — show Visa (cofnij ukrycie pierwszego span baner)
   Bug v1.13: zakładałem że > span:first-child to IAI logo, */

/* Show ALL spans w baner (cofnij v1.13 hide first-child) */
html body footer .footer-contact-baner > span,html body footer .footer-contact-baner > span:first-child {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important}

/* v1.68 FIX: WYMÓG LICENCYJNY IdoSell — badge "Powered by IdoBooking" musi
   być widoczny w stopce (Powered by IdoBooking — must be visible in footer).
   Wcześniej display:none ukrywał badge. Teraz pokazujemy z subtelnym opacity. */
html body footer .powered_by {
display: inline-block !important;
visibility: visible !important}
html body footer .powered_by_logo,html body footer img.powered_by_logo {
display: inline-block !important;
visibility: visible !important;
opacity: 0.9 !important;
max-height: 22px !important;
width: auto !important}

/* SVG inside spans — visible w pełni */
html body footer .footer-contact-baner > span svg,html body footer .footer-contact-baner > span img {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 4px !important;
max-height: 18px !important;
width: auto !important;
filter: brightness(1.6) saturate(0.3) opacity(0.55) !important}

html body footer .footer-contact-baner > span:hover svg,html body footer .footer-contact-baner > span:hover img {
filter: brightness(1.6) saturate(0.3) opacity(1) !important}

/* PATCH MARKER — v1.16 */

/* ============================================================
   §86. v1.17 — payment baner: Visa + MC obok siebie + lepsza widoczność
        Damian: "logo jedno pod drugim, słabo widoczne"
   ============================================================ */

/* Baner: flex-wrap, copyright row 1 (full-width via flex-basis 100%),
   payment SVGs row 2 (inline obok siebie centered) */
html body footer > .footer.container > .footer-contact-baner,html body footer .footer-contact-baner {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 14px 20px !important;
padding: 24px clamp(24px, 4vw, 48px) !important;
background: rgba(255, 255, 255, 0.03) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
margin: clamp(40px, 5vw, 64px) calc(-1 * clamp(24px, 4vw, 48px)) 0 !important;
position: relative !important}

/* Copyright via ::before — full row (flex-basis: 100%) */
html body footer .footer-contact-baner::before {
content: "© Fair Rentals Sp. z o.o. · Wszelkie prawa zastrzeżone" !important;
display: block !important;
flex-basis: 100% !important;
width: 100% !important;
text-align: center !important;
font-family: var(--fr-font-body) !important;
font-size: 11px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.55) !important;
font-weight: 500 !important;
background: transparent !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
inset: auto !important}

html body footer .footer-contact-baner::after {
content: none !important}

/* Spans z payment logos — inline-flex obok siebie, BIGGER + bardziej widoczne */
html body footer .footer-contact-baner > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important}

html body footer .footer-contact-baner > span svg,html body footer .footer-contact-baner > span img {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
max-height: 28px !important;
height: 28px !important;
width: auto !important;
filter: brightness(1.2) saturate(0.7) opacity(0.85) !important;
transition: filter 0.2s ease !important}

html body footer .footer-contact-baner > span:hover svg,html body footer .footer-contact-baner > span:hover img {
filter: brightness(1.2) saturate(1) opacity(1) !important}

html body footer .footer-contact-baner img.powered_by_logo,html body footer .footer-contact-baner .powered_by,html body footer .powered_by_logo,html body footer .powered_by {
display: none !important}

/* Mobile — keep flex row but smaller logos */
@media (max-width: 600px) {
html body footer .footer-contact-baner {
flex-direction: row !important;
flex-wrap: wrap !important}
html body footer .footer-contact-baner > span svg,
html body footer .footer-contact-baner > span img {
max-height: 24px !important;
height: 24px !important}
}

/* PATCH MARKER — v1.17 */

/* §87. v1.18 — payment logos równo wyrównane (uniform height + center)
   Damian: "prawie ok, czemu nie są równo?" */

html body footer .footer-contact-baner > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
line-height: 1 !important}

html body footer .footer-contact-baner > span svg,html body footer .footer-contact-baner > span img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 70px !important;
max-height: 32px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
filter: brightness(1.2) saturate(0.7) opacity(0.85) !important}

html body footer .footer-contact-baner > span:hover svg,html body footer .footer-contact-baner > span:hover img {
filter: brightness(1.2) saturate(1) opacity(1) !important}

/* PATCH MARKER — v1.18 */

/* §88. v1.19 — payment logos EQUAL visual height + min-width
   Diagnoza playwright: Visa SVG 51×16 (h=16), MC 143×25 (h=25). */

html body footer .footer-contact-baner > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
min-width: 80px !important;
margin: 0 !important;
padding: 0 4px !important;
vertical-align: middle !important;
line-height: 1 !important;
box-sizing: border-box !important}

html body footer .footer-contact-baner > span svg,html body footer .footer-contact-baner > span img {
display: block !important;
height: 24px !important;
width: auto !important;
max-width: 110px !important;
max-height: 24px !important;
min-height: 24px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
filter: brightness(1.2) saturate(0.7) opacity(0.9) !important}

html body footer .footer-contact-baner > span:hover svg,html body footer .footer-contact-baner > span:hover img {
filter: brightness(1.2) saturate(1) opacity(1) !important}

/* Mobile — slightly smaller but still equal */
@media (max-width: 600px) {
html body footer .footer-contact-baner > span {
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
min-width: 70px !important}
html body footer .footer-contact-baner > span svg,
html body footer .footer-contact-baner > span img {
height: 20px !important;
max-height: 20px !important;
min-height: 20px !important;
max-width: 90px !important}
}

/* PATCH MARKER — v1.19 */

/* §94. v1.28 — Damian feedback 2026-05-12 (poprawka §93):
   Hero ma być WYCENTROWANY (nie left-aligned), search bar */

/* §94a. Hero-wrap = full viewport flex column, content centered */
html body .fr-hero-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
min-height: 100vh !important;
min-height: 100svh !important;
padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px) clamp(48px, 7vh, 96px) !important;
gap: clamp(28px, 4vh, 56px) !important;
position: relative !important}

/* §94b. Hero-wrap subtle dark overlay — full viewport, brak "kwadratu" */
html body .fr-hero-wrap::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(15,15,14,0.45) 0%, rgba(15,15,14,0.20) 50%, rgba(15,15,14,0.50) 100%) !important;
pointer-events: none !important;
z-index: 1 !important}

/* §94c. Hero-asym = centered content card, no longer the visual frame */
html body .fr-hero-asym {
width: 100% !important;
max-width: 1080px !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
position: relative !important;
z-index: 2 !important}

/* Remove §75 dark gradient from hero-asym (now on hero-wrap) */
html body .fr-hero-asym::after {
display: none !important}

/* §94d. Hero-text — centered text + flex column */
html body .fr-hero-asym__text {
max-width: 920px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
background: transparent !important}

html body .fr-hero-asym__kicker {
justify-content: center !important}

html body .fr-hero-asym__title {
text-align: center !important}

html body .fr-hero-asym__title em::after {
margin: 14px auto 0 !important}

html body .fr-hero-asym__lead {
text-align: center !important;
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important}

html body .fr-hero-asym__cta-row {
justify-content: center !important}

html body .fr-hero-asym__meta {
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important}

/* §94e. Search bar — INLINE flow pod hero, NOT absolute bottom */
html body .fr-hero-wrap > section.fr-search-banner,html body div.fr-hero-wrap > section.fr-search-banner {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
z-index: 2 !important}

/* §94f. Mobile @991 — tighter spacing, natural height */
@media (max-width: 991.98px) {
html body .fr-hero-wrap {
padding: clamp(80px, 12vh, 120px) 16px clamp(40px, 6vh, 64px) !important;
gap: clamp(20px, 3vh, 36px) !important;
min-height: auto !important}
html body .fr-hero-asym {
max-width: 100% !important}
html body .fr-hero-asym__meta {
gap: 18px !important}
}

/* §94g. Mobile @480 — najmniejsze paddings */
@media (max-width: 480px) {
html body .fr-hero-wrap {
padding: 72px 12px 36px !important;
gap: 18px !important}
}

/* ============================================================
   §95. v1.28 — KICKER REDESIGN (Damian: napisy "Zaufanie Gości"
        słabo widoczne, powtarzają się). Editorial minimal:
        usuń pill bg, dark tekst, subtelny żółty horizontal accent.
   ============================================================ */

/* §95a. Base .fr-kicker — usuń pill bg, dark text, horizontal line */
html body .fr-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
background: transparent !important;
padding: 0 !important;
margin: 0 0 16px !important;
color: var(--fr-text-dark) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 2.8px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
opacity: 0.92 !important}

/* §95b. Yellow horizontal line BEFORE text (deep yellow for AA contrast on cream) */
html body .fr-kicker::before {
content: "" !important;
display: inline-block !important;
width: 28px !important;
height: 1.5px !important;
background: var(--fr-primary-deep) !important;
flex-shrink: 0 !important}

/* §95c. Kicker on DARK sections (magazine, stats-asym hero, trust bar, final-cta,
        search-banner) — keep light primary yellow for visibility */
html body .fr-magazine .fr-kicker,html body .fr-stats-asym__hero .fr-stats-asym__hero-kicker,html body .fr-trust__bar .fr-kicker,html body .fr-final-cta .fr-kicker,html body .fr-hero-wrap .fr-search-banner__kicker {
color: var(--fr-primary) !important;
opacity: 1 !important}

html body .fr-magazine .fr-kicker::before,html body .fr-final-cta .fr-kicker::before {
background: var(--fr-primary) !important}

/* §95d. Stats-asym hero kicker (own class, not .fr-kicker) */
html body .fr-stats-asym__hero-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
background: transparent !important;
padding: 0 !important;
color: var(--fr-primary) !important;
letter-spacing: 2.8px !important}
html body .fr-stats-asym__hero-kicker::before {
content: "" !important;
display: inline-block !important;
width: 28px !important;
height: 1.5px !important;
background: var(--fr-primary) !important;
flex-shrink: 0 !important}

/* §95e. Page-hero kicker (Dla Właścicieli / Dla Biznesu / Atrakcje subpages)
        — already styled with white on photo bg, keep it minimal */
html body .fr-page-hero__kicker {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important}

/* PATCH MARKER — v1.28 */
/* PATCH-V1.7.4-LITEPICKER-BULLETPROOF-GRID-STRUCTURE */

/* ══════════════════════════════════════════════════════════════════════
   §96. v1.29 LIGHTHOUSE FIXES (2026-05-14)
   Po audycie SEO=61, A11y=94: 7 failing audits.
   Naprawiamy w CSS to co mozemy bez ruszania panelu Idosell.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── §96a. Cookie button kontrast (AA) ───
   Problem: white (#fff) na yellow (#e2d700) = 1.5 contrast (WCAG: 4.5 needed).
   Fix: czarny tekst na żółtym = 11.5 contrast (AAA). */
html body .ck_dsclr__btn_v2,html body .ck_dsclr_v2 .ck_dsclr__btn_v2,html body span[class*="ck_dsclr__btn"] {
color: #1a1a1a !important;
font-weight: 600 !important;
text-shadow: none !important}

/* ─── §96b v1.53. Cookie banner — dark theme contrast (klient zglosil 2026-05-18) ───
   System banner ma teraz bg: rgba(0,0,0,0.6) (dark). Wczesniejsze regulki
   z dark text (color: #1a1a1a) byly napisane pod jasny banner — teraz
   nieczytelne na ciemnym tle. Przepisujemy na jasny tekst + brand yellow links. */

html body #ck_dsclr_v2,html body .ck_dsclr_v2 {
background: rgba(15, 15, 14, 0.92) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important}

html body #ck_dsclr_v2 .ck_dsclr__sub_v2,html body .ck_dsclr_v2 .ck_dsclr__sub_v2,html body #ck_dsclr_v2 .ck_dsclr__sub_v2 p,html body .ck_dsclr_v2 .ck_dsclr__sub_v2 p {
color: rgba(255, 255, 255, 0.95) !important;
font-size: 14px !important;
line-height: 1.5 !important}

/* Link — brand yellow (specificity musi pobic stary #1a1a1a !important rule) */
html body #ck_dsclr_v2 .ck_dsclr__sub_v2 a,html body #ck_dsclr_v2 a[href],html body #ck_dsclr_v2.ck_dsclr_v2 a {
color: var(--fr-primary, #E2D700) !important;
text-decoration: underline !important;
font-weight: 700 !important}

html body #ck_dsclr_v2 .ck_dsclr__sub_v2 a:hover,html body #ck_dsclr_v2 a[href]:hover,html body #ck_dsclr_v2.ck_dsclr_v2 a:hover,html body #ck_dsclr_v2 .ck_dsclr__sub_v2 a:focus-visible {
color: var(--fr-light-accent, #F5E84A) !important;
background: transparent !important}

/* Zamknij button — brand yellow filled (zostawiamy systemowy ale upewniamy sie ze widoczny) */
html body #ck_dsclr_v2 .ck_dsclr__btn_v2,html body .ck_dsclr__btn_v2 {
background: var(--fr-primary, #E2D700) !important;
color: var(--fr-text-dark, #0F0F0E) !important;
font-weight: 700 !important;
padding: 8px 20px !important;
border-radius: 6px !important;
cursor: pointer !important}

html body #ck_dsclr_v2 .ck_dsclr__btn_v2:hover,html body .ck_dsclr__btn_v2:hover {
background: var(--fr-light-accent, #F5E84A) !important}

/* Close X (gora prawa) */
html body #ck_dsclr_v2 .ck_dsclr_x_v2,html body .ck_dsclr_x_v2 {
color: rgba(255, 255, 255, 0.7) !important}
html body #ck_dsclr_v2 .ck_dsclr_x_v2:hover {
color: var(--fr-primary, #E2D700) !important}

/* ─── §96c. Focus indicator dla cookie button (klawiatura A11y) ─── */
html body .ck_dsclr__btn_v2:focus-visible {
outline: 2px solid var(--fr-primary, #E2D700) !important;
outline-offset: 2px !important}

/* §97. MODELE WSPÓŁPRACY — tabela porównawcza 8% / 10% (Sprint B, v1.29)
   Layout: */

.fr-compare-models {
background: var(--fr-bg-alt, #faf8f3);
padding: clamp(56px, 8vw, 96px) 0}

.fr-compare-models__inner {
width: min(1180px, 92vw);
margin: 0 auto}

.fr-compare-models__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 3vw, 36px);
margin-top: clamp(32px, 5vw, 56px)}

@media (min-width: 768px) {
.fr-compare-models__grid {
grid-template-columns: 1fr 1fr}
}

/* ─── KARTA POJEDYNCZA ─── */
.fr-compare-model {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: clamp(14px, 1.5vw, 20px);
padding: clamp(28px, 4vw, 44px);
display: flex;
flex-direction: column;
gap: clamp(20px, 3vw, 28px);
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}

.fr-compare-model:hover,.fr-compare-model:focus-within {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.16)}

/* Premium accent na modelu Zarządzanie (10%) */
.fr-compare-model--manage {
border-color: rgba(226, 215, 0, 0.45);
background: linear-gradient(180deg, #fffceb 0%, #fff 12%)}

.fr-compare-model--manage:hover,.fr-compare-model--manage:focus-within {
border-color: #e2d700;
box-shadow: 0 12px 32px rgba(226, 215, 0, 0.18)}

/* ─── HEADER KARTY ─── */
.fr-compare-model__header {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: clamp(20px, 3vw, 28px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08)}

.fr-compare-model__badge {
display: inline-block;
align-self: flex-start;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.06);
color: #1a1a1a;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 100px}

.fr-compare-model__badge--accent {
background: #e2d700;
color: #1a1a1a}

.fr-compare-model__title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 400;
line-height: 1.15;
color: #1a1a1a;
margin: 0}

.fr-compare-model__subtitle {
font-family: 'Inter', sans-serif;
font-size: clamp(14px, 1.4vw, 15px);
font-weight: 400;
line-height: 1.55;
color: #4a4a4a;
margin: 0}

.fr-compare-model__price {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 8px}

.fr-compare-model__price-num {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(40px, 5vw, 56px);
font-weight: 400;
line-height: 1;
color: #1a1a1a}

.fr-compare-model--manage .fr-compare-model__price-num {
  color: #8a7300; /* AA contrast gold-deep */
}

.fr-compare-model__price-unit {
font-family: 'Inter', sans-serif;
font-size: clamp(13px, 1.3vw, 14px);
font-weight: 500;
color: #4a4a4a;
line-height: 1.45;
max-width: 220px}

.fr-compare-model__price-note {
font-family: 'Inter', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
font-weight: 400;
line-height: 1.55;
color: #6a6a6a;
margin: 4px 0 0}

/* ─── BODY KARTY (listy zakresów) ─── */
.fr-compare-model__body {
display: flex;
flex-direction: column;
gap: clamp(20px, 3vw, 28px)}

.fr-compare-model__section {
display: flex;
flex-direction: column;
gap: 12px}

.fr-compare-model__section-title {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1a1a1a;
margin: 0;
position: relative;
padding-left: 16px}

.fr-compare-model__section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #1a1a1a;
border-radius: 50%}

.fr-compare-model__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px}

.fr-compare-model__list li {
font-family: 'Inter', sans-serif;
font-size: clamp(13px, 1.35vw, 14.5px);
font-weight: 400;
line-height: 1.55;
color: #2a2a2a;
padding-left: 22px;
position: relative}

.fr-compare-model__list li::before {
content: '·';
position: absolute;
left: 8px;
top: 0;
font-weight: 700;
color: #9a9a9a;
font-size: 18px;
line-height: 1.4}

/* Lista z checkmarkami (zakres Fair Rentals = co dostajesz) */
.fr-compare-model__list--check li::before {
content: '✓';
font-size: 13px;
font-weight: 700;
color: #8a7300;
line-height: 1.6;
left: 4px}

.fr-compare-model--manage .fr-compare-model__list--check li::before {
color: #c4a900}

/* ─── FOOTER + CTA ─── */
.fr-compare-model__footer {
margin-top: auto;
padding-top: clamp(8px, 1.5vw, 14px)}

.fr-compare-model__footer .fr-btn {
width: 100%;
justify-content: center}

/* ─── WSPÓLNE WSPARCIE (aside) ─── */
.fr-compare-models__common {
margin-top: clamp(32px, 5vw, 48px);
padding: clamp(24px, 3vw, 36px);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: clamp(14px, 1.5vw, 20px)}

.fr-compare-models__common-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(20px, 2vw, 24px);
font-weight: 400;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 clamp(14px, 2vw, 20px)}

.fr-compare-models__common-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px}

@media (min-width: 768px) {
.fr-compare-models__common-list {
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(16px, 2vw, 28px)}
}

.fr-compare-models__common-list li {
font-family: 'Inter', sans-serif;
font-size: clamp(13px, 1.35vw, 14.5px);
font-weight: 400;
line-height: 1.55;
color: #2a2a2a}

.fr-compare-models__common-list li strong {
display: block;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px}

/* ─── Mobile-only ulepszenia ─── */
@media (max-width: 767px) {
.fr-compare-model {
padding: 24px 22px}

.fr-compare-model__price {
flex-wrap: wrap}

.fr-compare-model__price-unit {
max-width: 100%}
}

/* ─── Reduced motion (A11y) ─── */
@media (prefers-reduced-motion: reduce) {
.fr-compare-model {
transition: none}
.fr-compare-model:hover,
.fr-compare-model:focus-within {
transform: none}
}

/* §98. v1.30 SCROLLED HEADER LOGO FIX (2026-05-14)
   Problem: header.fr-header--scrolled collapse do ~80px wysokości, */

html body header.default13.fr-header--scrolled .navbar-brand img {
height: 48px !important;
max-height: 56px !important;
width: auto !important}

html body header.default13.fr-header--scrolled .navbar-brand {
padding: 8px 14px !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
align-self: center !important}

/* Mobile scrolled — jeszcze mniejsze logo (header krótszy na mobile) */
@media (max-width: 991.98px) {
html body header.default13.fr-header--scrolled .navbar-brand img {
height: 40px !important;
max-height: 48px !important}
}

/* §99. SPRINT F HIGH — PDF Agnieszka 2026-05-14 (21 punktów)
   Bundle HIGH priority fix-y wedug rangki visual UX (4-5h pracy). */

/* ─── §99a. Hover button — USUŃ przeskok (PDF P2) ───
   Klient: "Zostawić tylko zmianę koloru, usunąć skok." */
html body .fr-btn--primary:hover,html body .fr-btn--outline:hover,html body .fr-btn--ghost-light:hover,html body .fr-btn:hover {
transform: none !important}

/* Zachowujemy box-shadow + bg change jako visual feedback */
html body .fr-btn {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important}

/* ─── §99b. Hover kart apartamentów (PDF P6a, P6b) ───
   "Hover powiększa się cały blok ze zdjęciem — tylko kadr ma się powiększać"
   Fix: transform na .__img zamiast .__card */
html body .fr-apt-card:hover,html body .fr-offer-card:hover,html body article[class*="apt-card"]:hover,html body article[class*="offer-card"]:hover {
transform: none !important}

html body .fr-apt-card .fr-apt-card__img,html body .fr-apt-card img,html body .fr-offer-card img,html body article[class*="apt-card"] img {
transition: transform 0.4s ease !important}

html body .fr-apt-card:hover .fr-apt-card__img,html body .fr-apt-card:hover img:not(.fr-apt-card__icon img),html body .fr-offer-card:hover img,html body article[class*="apt-card"]:hover img {
transform: scale(1.04) !important}

/* ─── §99c. Kontrast tekstów na ciemnym tle (PDF P6c, P8) ───
   "Mało czytelne — szare na ciemnym. Zrobić bardziej widoczne." */

/* Karty apartamentów meta (m², osoby) */
html body .fr-apt-card__meta,html body .fr-apt-card__meta-item,html body .fr-offer-card__meta,html body [class*="apt-card"] [class*="meta"],html body [class*="offer-card"] [class*="meta"] {
color: rgba(255, 255, 255, 0.85) !important}

/* Hero stats trust bar — opis pod liczbami */
html body .fr-stats-asym__desc,html body .fr-stats-asym__hero-desc {
color: rgba(255, 255, 255, 0.78) !important}

/* Trust bar labels */
html body .fr-trust__bar-label {
color: rgba(255, 255, 255, 0.78) !important}

/* ─── §99d. Widget SZUKAJ button (PDF P4) ───
   "Powiększyć czcionkę i ikonę. Przycisk za duży vs pola — niespójność."
   Fix: button rozmiar w linii z polami search (min-height: 56) */
html body .fr-cmd-bar__submit,html body .fr-cmd-bar button[type="submit"],html body .fr-search-banner button[type="submit"] {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
padding: 14px 28px !important;
min-height: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important}

html body .fr-cmd-bar__submit svg,html body .fr-cmd-bar button[type="submit"] svg {
width: 20px !important;
height: 20px !important}

/* ─── §99e. Ucięte teksty na kartach apartamentów (PDF P13) ───
   "Dodać ellipsis (…) gdy tekst się nie mieści." */
html body .fr-apt-card__name,html body .fr-offer-card__title,html body [class*="apt-card"] h3,html body [class*="offer-card"] h3 {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important}

html body .fr-apt-card__desc,html body .fr-offer-card__desc,html body [class*="apt-card"] p,html body [class*="offer-card"] .description {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important}

/* ─── §99f. Cena wyróżniona kolorystycznie (PDF P12d, P14b, P15b) ───
   "Wyróżnić cenę kolorystycznie", "Bloczek z ceną w ciemnym kolorze",
   "Kolor ceny zlewa się z przyciskiem" */
html body .fr-apt-card__price,html body .fr-offer-card__price,html body [class*="apt-card"] [class*="price"],html body [class*="offer-card"] [class*="price"],html body .accommodation-price,html body .offer-price {
color: var(--fr-text-dark, #1a1a1a) !important;
font-weight: 700 !important;
background: rgba(226, 215, 0, 0.18) !important;
padding: 4px 10px !important;
border-radius: 6px !important;
display: inline-block !important}

/* ─── §99g v1.51 — USUNIETE v1.54 (klient: flagi inline zamiast dropdown) ───
   Stary block dropdown styling — przeniesiony do §90 v2.
   Konflikt z nowym podejsciem (inline flags) — caly block wycieto. */

/* ─── §99g+ v1.51 — USUNIETE v1.54 (klient: flagi inline zamiast dropdown) ───
   Stary block flag prefix + name dropdown — przeniesiony do §90 v2.
   Konflikt z nowym podejsciem (inline flags + kwadrat) — caly block wycieto. */

/* ─── §110 v2 v1.57 — Mobile hero parallax-slider FILL full height ───
   v1.54: poprawnie wylaczylo blurry bg-image i ustawilo img height 100%. */
@media (max-width: 991px) {
html body .parallax-slider {
background-image: none !important}
html body .parallax-slider .slick-list,
html body .parallax-slider .slick-track,
html body .parallax-slider .slick-slide,
html body .parallax-slider .slick-slide > div,
html body .parallax-slider .parallax-image,
html body .parallax-slider picture {
height: 100% !important;
min-height: 100% !important;
width: 100% !important;
display: block !important}
html body .parallax-slider .slick-slide img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
display: block !important}
}

/* §111 v2 v1.55 — Logo hide when mobile menu open (klient po v1.54) ───
   v1.66 USUNIETE: klientka prosi o cofnięcie do wersji z widocznym logo i */
@media (max-width: 991px) {
html body header.default13 .navbar-collapse,
html body header.default13 #navbar {
padding-top: 70px !important}
}

/* ─── §112 v2 v1.56 — Hero gray area FIX (poprawka po v1.55) ───
   v1.55 dodało bg-color na .fp-tableCell i .fr-hero-wrap co ZAKRYŁO .parallax-slider */
@media (max-width: 991px) {
  /* Dark fallback BEHIND parallax-slider — photo siedzi na wierzchu, bg poniżej slider */
html body .section.parallax {
background-color: rgb(15, 15, 14) !important}
  /* Search banner ma własne dark bg (rgb 15,15,14) — domyślnie OK.
     Między slider (844) a search banner (777) gap pokryje section.parallax bg. */
}

/* ─── §99g++ v1.51 — Mobile menu cleanup (PDF Uwagi_2 #5) ───
   Klient zgloszenie 2026-05-18: */

@media (max-width: 991px) {
  /* Remove thick focus outline on nav links */
html body header.default13 .navbar-nav .nav-link:focus,
html body header.default13 .navbar-nav .nav-link:focus-visible,
html body header.default13 .navbar-nav .nav-link.focus {
outline: none !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important}
html body header.default13 .navbar-nav .nav-link:focus-visible {
box-shadow: inset 3px 0 0 var(--fr-primary, #e2d700) !important}

  /* Remove rounded shadow boxes on items */
html body header.default13 .navbar-collapse .navbar-nav,
html body header.default13 .navbar-collapse .navbar-nav .nav-item {
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important}

html body header.default13 .navbar-collapse .nav-link {
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important}

  /* Subtle dividers between items */
html body header.default13 .navbar-collapse .nav-item + .nav-item .nav-link {
border-top: 1px solid rgba(0,0,0,0.06) !important}

  /* PATCH v1.66/v1.69: hamburger toggler — fixed top px (nie 50%).
   v1.66 używał top:50% + translateY(-50%) — działało gdy parent .navbar
   ma stały h=65px. ALE klientka v1.69: gdy menu open .navbar rośnie do */
html body header.default13 .navbar-toggler {
position: absolute !important;
top: 12px !important;
transform: none !important;
right: 16px !important;
z-index: 100 !important;
margin: 0 !important;
min-height: 40px !important;
min-width: 0 !important;
padding: 6px 12px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important}
html body header.default13 .navbar-toggler:focus,
html body header.default13 .navbar-toggler:focus-visible {
outline: 2px solid var(--fr-primary, #e2d700) !important;
outline-offset: 2px !important}

  /* Logo position — left, fixed top (nie 50% — analogicznie do hamburger).
     v1.69: top:12px = vertical center w belce 65px (logo h=40 → 12+40+13=65).
     Gdy menu open .navbar rośnie ale logo zostaje na top:12 = STICKY. */
html body header.default13 .navbar-brand,
html body header.default13 .logo {
position: absolute !important;
top: 12px !important;
transform: none !important;
left: 16px !important;
margin: 0 !important;
z-index: 100 !important}

  /* Reserve space at top of menu so it doesn't overlap logo/toggler */
html body header.default13 .navbar-collapse {
padding-top: 80px !important}
}

/* ─── §99g+++ v1.51 — Apartment offer: hide tel/email + desc-first (PDF Uwagi_2 #6) ───
   Klient zgloszenie: wylacz prezentacje tel/email w "Opcje dodatkowe" */
html body.page-offer .additional_info {
display: none !important}
html body #room_desc {
display: flex !important;
flex-direction: column !important}
html body #room_desc > .additional_info { order: 2 !important; margin-top: 32px !important}
html body #room_desc > .room_desc { order: 1 !important}

/* ─── §99i. Aktywne pozycje menu (PDF P11, P18) ───
   "Brak aktywnej pozycji menu na /offers" + "Aktywna kategoria mało czytelna" */
html body header .nav-link.active,html body header a[aria-current="page"],html body .navbar-nav .nav-link.active {
color: var(--fr-primary, #e2d700) !important;
font-weight: 700 !important;
position: relative}


/* ─── §99j. Strzałki kalendarza ucięte (PDF P3) ───
   "Strzałki w kalendarzu są ucięte" */
html body .litepicker .button-previous-month,html body .litepicker .button-next-month {
padding: 6px !important;
overflow: visible !important;
min-width: 28px !important;
min-height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important}

html body .litepicker .button-previous-month svg,html body .litepicker .button-next-month svg {
width: 14px !important;
height: 14px !important;
overflow: visible !important;
flex-shrink: 0 !important}

/* §99j-mobile — litepicker na mobile: tylko 1 miesiąc widoczny
   Bug: na mobile pokazuje 2 miesiące pionowo (wrzesień+październik),
   zajmuje zbyt dużo miejsca, kalendarz wychodzi poza viewport.
   Fix: max-width + zwijaj do 1 miesiąca + scroll arrows */
@media (max-width: 767px) {
  /* v1.67: width:auto powodował że Litepicker JS renderował 195px (sum
     month-item content) zamiast pełnej szerokości viewport (kalendarz
     wąski, dni-tygodnia overflowowały). Zmiana na fixed calc width. */
html body .litepicker {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important}
  /* v1.67b: subpage calendar (#calendar-data) — kalendarz dostępności na
     /offer/N. Parent tabs__item ma margin-right:30px + offer-desc-wrapper
     padding 15px → kalendarz tylko 290px na mobile (dni 33px = ciasno).
     Override: zmniejsz padding wrappera + remove tab margin = +44px szerokości. */
html body .offer-desc-wrapper {
padding-left: 8px !important;
padding-right: 8px !important}
html body .tabs__item {
margin-right: 0 !important;
width: 100% !important}
html body #calendar-data {
width: 100% !important;
padding: 0 0 30px !important}
html body #calendar-data .litepicker {
width: 100% !important;
max-width: 100% !important;
padding: 14px 8px !important}
html body .litepicker .container__months {
grid-template-columns: 1fr !important;
gap: 0 !important}
html body .litepicker .month-item:nth-child(2) {
    display: none !important; /* schowaj drugi miesiąc, ale strzałki nawigują */
}
html body .litepicker .month-item {
width: 100% !important;
max-width: 100% !important;
padding: 8px !important}
html body .litepicker .month-item-header {
padding: 0 4px !important}
}

/* ─── §99k. Stopka layout (PDF P10a) ───
   "Telefon i e-mail nie w jednej linii" */
html body footer .footer-contact,html body footer [class*="footer-contact"],html body footer .footer-info-row,html body footer p:has(a[href^="tel:"]),html body footer p:has(a[href^="mailto:"]) {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px 24px !important;
vertical-align: baseline !important}

/* ─── §99l. Back-to-top button position (PDF P26) ───
   "Przycisk powrót na górę chowa się po prawej stronie (off-screen)" */
html body .back-to-top,html body #back-to-top,html body [class*="back-to-top"],html body [class*="scroll-top"],html body .iai-scroll-top {
position: fixed !important;
right: 16px !important;
bottom: 16px !important;
left: auto !important;
z-index: 999 !important}

@media (max-width: 768px) {
html body .back-to-top,
html body #back-to-top,
html body [class*="back-to-top"],
html body [class*="scroll-top"],
html body .iai-scroll-top {
right: 12px !important;
bottom: 12px !important;
width: 44px !important;
height: 44px !important}
}

/* ─── §99m. Body horizontal scroll guard (PDF P29) ───
   "Możliwość przesunięcia strony w poziomie" — defensive overflow */
html, body {
overflow-x: hidden !important}

/* ─── §99n. Mobile menu redesign (PDF P24a-f) ───
   a) Logo mało czytelny przez cienie — zmniejszamy shadow */
@media (max-width: 991.98px) {

  /* Logo + burger w jednej linii, wyśrodkowane pionowo */
html body header.default13 .navbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 16px !important;
min-height: 64px !important}

html body header.default13 .navbar-brand {
align-self: center !important;
margin: 0 !important;
    box-shadow: 0 2px 8px rgba(26, 26, 24, 0.10) !important; /* mniejszy cień */
}

  /* v1.69: padding+min-height aligned z PATCH v1.66/v1.69 linia 11126
     (min-height: 40px, padding: 6px 12px). Wcześniej ta reguła nadpisywała
     z 48px+12px co dawało hamburger h=57 (wystawał z belki). */
html body header.default13 .navbar-toggler {
align-self: center !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.97) !important;
box-shadow: 0 2px 8px rgba(26, 26, 24, 0.10) !important;
border: none !important;
border-radius: 8px !important;
padding: 6px 12px !important;
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--fr-text-dark, #1a1a1a) !important}

  /* Dropdown menu otwarte — lepsze decorations */
html body header.default13 .navbar-collapse,
html body header.default13 #navbar.show,
html body header.default13 .navbar-collapse.show #navbar {
background: rgba(255, 255, 255, 0.98) !important;
border-radius: var(--fr-radius-md, 12px) !important;
box-shadow: 0 12px 32px rgba(26, 26, 24, 0.15) !important;
padding: 8px !important;
margin-top: 6px !important;
max-width: calc(100vw - 32px) !important;
z-index: 1020 !important}

  /* Items dropdown — odstępy, hover */
html body header.default13 .navbar-collapse .nav-link,
html body header.default13 .navbar-collapse a,
html body header.default13 #navbar .nav-link,
html body header.default13 #navbar a {
display: flex !important;
align-items: center !important;
padding: 14px 18px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
color: var(--fr-text-dark, #1a1a1a) !important;
border-radius: 8px !important;
border: 1px solid transparent !important;
background: transparent !important;
transition: background 0.2s ease, border-color 0.2s ease !important;
    white-space: nowrap !important; /* zapobiega wrap "NAJEM KORPORACYJNY" */
}

html body header.default13 .navbar-collapse .nav-link:hover,
html body header.default13 .navbar-collapse a:hover,
html body header.default13 #navbar a:hover {
background: rgba(226, 215, 0, 0.10) !important;
border-color: rgba(226, 215, 0, 0.30) !important;
border-radius: 0 !important;
color: var(--fr-text-dark, #1a1a1a) !important}

  /* Active dropdown item */
html body header.default13 .navbar-collapse .nav-link.active,
html body header.default13 #navbar .nav-link.active {
background: rgba(226, 215, 0, 0.16) !important;
border-color: var(--fr-primary, #e2d700) !important;
border-radius: 0 !important;
color: var(--fr-text-dark, #1a1a1a) !important;
font-weight: 700 !important}

  /* Po scrollu (PDF P24f) — minimal i clean */
html body header.default13.fr-header--scrolled .navbar {
min-height: 56px !important;
padding: 6px 14px !important}

html body header.default13.fr-header--scrolled .navbar-brand {
background: transparent !important;
box-shadow: none !important;
padding: 4px 8px !important}

html body header.default13.fr-header--scrolled .navbar-toggler {
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10) !important}
}

/* ─── §99o. Small mobile (≤480) — kompaktowy mobile menu ─── */
@media (max-width: 480px) {
html body header.default13 .navbar-brand img {
height: 36px !important;
max-height: 44px !important}

html body header.default13 .navbar-toggler {
padding: 10px 12px !important;
font-size: 11px !important}

html body header.default13 .navbar-toggler span {
    display: inline !important; /* keep "MENU" text */
}
}

/* ══════════════════════════════════════════════════════════════════════
   §99p. CRITICAL BUG FIX — Sprint B card <header> łapane przez system CSS
   (Damian feedback 2026-05-14: "lata jakis element na górze na /Obsluga-najmu")

   Problem: System Idosell CSS ma `header { position: fixed; top: 0 }`
   bez żadnej klasy — łapie WSZYSTKIE <header> w DOM, w tym nasze
   .fr-compare-model__header (header karty Sprint B Modele Współpracy).
   Efekt: header karty Sprint B renderuje się FIXED top:0, height 259px,
   przykrywa całą górną część strony.

   Fix: override position dla wszystkich <header> z klasami zaczynającymi
   się od fr- lub mc- (komponenty wewnętrzne, nie page header).
   ══════════════════════════════════════════════════════════════════════ */

html body article header,html body section header,html body main header:not(.default13):not([class^="default"]),html body header.fr-compare-model__header,html body header[class*="fr-compare-model__"],html body header[class*="fr-card__"],html body header[class*="fr-section__"] {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
max-width: 100% !important;
z-index: auto !important;
height: auto !important}

/* Page footer fixes — system CSS może łapać też <footer> w kartach */
html body article footer,html body section footer,html body footer[class*="fr-compare-model__"],html body footer[class*="fr-card__"] {
position: relative !important;
top: auto !important;
left: auto !important;
z-index: auto !important}

/* ══════════════════════════════════════════════════════════════════════
   §99q. CRITICAL CONTRAST FIX — .fr-btn--primary (PDF P12c Agnieszka)

   "Biały tekst na tle #E2D700 (żółty) — nieczytelny, zmienić na
   wyrazistsze kolory" — Agnieszka, PDF Uwagi_www, P12c

   Bug w base design system: .fr-btn--primary ma color: var(--fr-white)
   (biały) na background żółty (#E2D700) = kontrast 1.5:1 (WCAG fail).
   Powinno być: czarny tekst na żółtym = 11.5:1 (WCAG AAA).

   Dotyczy: WSZYSTKICH primary buttons w całej stronie — hero CTA,
   Sprint B modele (WYBIERAM CO-HOST/ZARZĄDZANIE), search SZUKAJ,
   final CTA, footer mailto buttons.
   ══════════════════════════════════════════════════════════════════════ */

html body .fr-btn--primary,html body .fr-btn.fr-btn--primary,html body a.fr-btn--primary,html body button.fr-btn--primary {
  color: #1a1a1a !important; /* black text na yellow bg */
font-weight: 700 !important}

html body .fr-btn--primary:hover,html body .fr-btn--primary:focus {
color: #000 !important}

/* Visited state — links z fr-btn--primary mogłyby zmieniać kolor na fioletowy */
html body a.fr-btn--primary:visited,html body a.fr-btn--primary:active {
color: #1a1a1a !important}

/* Override też dla searchbox SZUKAJ */
html body .fr-cmd-bar__submit,html body .fr-cmd-bar button[type="submit"],html body .fr-search-banner button[type="submit"] {
color: #1a1a1a !important;
font-weight: 700 !important}

/* §99r. FLAGI WERSJI JĘZYKOWEJ — równe wyrównanie (Damian 2026-05-14)
   "TE FLAGI PRZY WYBORZE JĘZYKA NADAL SĄ NIE RÓWNO" */

html body .page-top__language .flags a,html body .page-top__language_menu .flags a,html body header .page-top__language a[hreflang],html body header .language_menu a {
margin: 0 !important;
padding: 10px 14px !important;
display: grid !important;
grid-template-columns: 24px 1fr !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
border-radius: 6px !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--fr-text-dark, #1a1a1a) !important}

html body .page-top__language .flags a:hover,html body header .page-top__language a[hreflang]:hover {
background: rgba(0, 0, 0, 0.06) !important;
color: var(--fr-text-dark, #1a1a1a) !important}

/* Aktywny język (current page) */
html body .page-top__language .flags a.active,html body .page-top__language .flags a[aria-current="page"],html body header .page-top__language a.active {
background: rgba(226, 215, 0, 0.15) !important;
font-weight: 700 !important}

/* Flaga IMG — wyrównana w col 1 grid */
html body .page-top__language .flags a img.flag,html body .page-top__language_menu .flags a img.flag,html body header .page-top__language a img,html body header .language_menu a img {
display: block !important;
width: 24px !important;
height: 16px !important;
object-fit: cover !important;
margin: 0 !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) !important;
grid-column: 1 !important;
align-self: center !important;
justify-self: start !important}

/* Tekst języka — wyrównany w col 2 grid */
html body .page-top__language .flags a > *:not(img):not(.flag),html body header .page-top__language a > *:not(img) {
grid-column: 2 !important;
align-self: center !important;
justify-self: start !important;
text-align: left !important;
white-space: nowrap !important}

/* USUNIETE v1.60 — stara dropdown rule z fixed min-width 160px konfliktowala
   z mobile inline flags (3 flagi tylko ~104px). Patrz §90 v3/v4 dla nowego stylu. */

/* §100. SPRINT F MEDIUM — PDF Agnieszka punkty 14-17, 19-20, 22 (2026-05-15)
   Bundle MEDIUM priority — ~2.5h pracy: */

/* ─── §100a. PAGE-OFFER bloczek po prawej (PDF P14a, P14b, P15a, P15b) ───
   "Cena i Zarezerwuj teraz niewyśrodkowane"
   "Bloczek z ceną zrobić w ciemnym kolorze"
   "Kolor ceny zlewa się z przyciskiem" */

/* Ciemne tło dla całego bloczka po prawej */
html body.page-offer .col-lg-3,html body.page-offer .col-lg-3.offer-right-wrapper,html body.page-offer .offer-right-wrapper,html body.page-offer .accommodation-right,html body.page-offer .right-column,html body.page-offer aside[class*="right"] {
background: var(--fr-dark, #1a1a1a) !important;
color: var(--fr-cream, #faf6ed) !important;
border-radius: var(--fr-radius-md, 12px) !important;
padding: 24px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important}

/* Cena — wyróżniona kolorystycznie, własny accent */
html body.page-offer .col-lg-3 .price,html body.page-offer .col-lg-3 [class*="price"],html body.page-offer .offer-right-wrapper .price,html body.page-offer .accommodation-price-wrapper {
color: var(--fr-primary, #e2d700) !important;
font-weight: 800 !important;
font-size: clamp(24px, 2.4vw, 32px) !important;
text-align: center !important;
display: block !important;
margin: 12px 0 !important;
text-shadow: none !important}

/* Wszystkie teksty w bloczku — wyśrodkowane (P14a, P15a) */
html body.page-offer .col-lg-3,html body.page-offer .col-lg-3 *,html body.page-offer .offer-right-wrapper,html body.page-offer .offer-right-wrapper * {
text-align: center !important}

/* Labels (Cena, Doba, etc) — kontrast na dark */
html body.page-offer .col-lg-3 label,html body.page-offer .col-lg-3 .label,html body.page-offer .col-lg-3 small,html body.page-offer .offer-right-wrapper label {
color: rgba(255, 255, 255, 0.78) !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin-bottom: 4px !important}

/* ─── §100b. PAGE-OFFER ujednolicenie czcionek (PDF P16) ───
   "Ujednolicić rozmiar czcionki dla przejrzystości treści" */

html body.page-offer .offer-description p,html body.page-offer .offer-description li,html body.page-offer .accommodation-description p,html body.page-offer .accommodation-amenities li,html body.page-offer .offer-content p,html body.page-offer .offer-content li {
font-size: 15px !important;
line-height: 1.65 !important;
color: var(--fr-text-dark, #1a1a1a) !important}

html body.page-offer h2,html body.page-offer .accommodation-description h2,html body.page-offer .offer-content h2 {
font-size: clamp(22px, 2vw, 26px) !important;
line-height: 1.25 !important;
margin-top: 32px !important;
margin-bottom: 16px !important}

html body.page-offer h3,html body.page-offer .accommodation-description h3 {
font-size: clamp(18px, 1.8vw, 20px) !important;
line-height: 1.3 !important;
margin-top: 24px !important;
margin-bottom: 12px !important}

/* ─── §100c. PAGE-OFFER scrolled menu nachodzi na sekcje (PDF P17) ───
   "Przy scrollu menu nachodzi na sekcje" */

/* Anchored links — kompensacja sticky header height */
html body.page-offer section[id],html body.page-offer [id*="section"],html body.page-offer .anchor-section,html body.page-offer h2[id],html body.page-offer h3[id] {
  scroll-margin-top: 120px !important; /* desktop sticky header height */
}

@media (max-width: 991.98px) {
html body.page-offer section[id],
html body.page-offer [id*="section"],
html body.page-offer h2[id],
html body.page-offer h3[id] {
    scroll-margin-top: 80px !important; /* mobile header height */
}
}

/* ─── §100d. OBSŁUGA NAJMU nagłówek "Dla Właścicieli" (PDF P19) ───
   "Poprawić wygląd (odstępy obramowania, inne obramowanie)" */

html body.page-txt .fr-page-hero,html body[class*="obsluga"] .fr-page-hero,html body[class*="najem"] .fr-page-hero {
padding: 80px 24px 56px !important;
border-radius: 0 !important;
border-top: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important}

html body.page-txt .fr-page-hero__kicker,html body[class*="obsluga"] .fr-page-hero__kicker {
display: inline-block !important;
margin-bottom: 16px !important;
padding: 6px 14px !important;
background: rgba(226, 215, 0, 0.18) !important;
border-radius: 100px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--fr-text-dark, #1a1a1a) !important;
border: 1px solid rgba(226, 215, 0, 0.35) !important}

html body.page-txt .fr-page-hero__title,html body[class*="obsluga"] .fr-page-hero__title {
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.15 !important;
margin: 0 0 12px !important;
font-weight: 400 !important;
font-family: 'DM Serif Display', Georgia, serif !important}

html body.page-txt .fr-page-hero__lead,html body[class*="obsluga"] .fr-page-hero__lead {
font-size: clamp(15px, 1.5vw, 17px) !important;
line-height: 1.65 !important;
  /* v1.44: bylo color var(--fr-text-muted) (#7A736B sage gray) — na ciemnym
     overlay hero (linear-gradient 0.55-0.85 black z §66 lini 4102) kontrast
     byl tylko ~2.5:1 (FAIL WCAG AA 4.5:1). Klient: "ten napis jest slabo
     widoczny :/ kontrasty".
     Fix: white z opacity 0.95 + wzmocniony text-shadow — kontrast ~14:1 (AAA). */
color: rgba(255, 255, 255, 0.95) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55) !important;
max-width: 720px !important}

/* ─── §100e. Tel + email czytelność na każdej stronie (PDF P20, P22b) ───
   "Numer telefonu i e-mail nieczytelne na tym tle" */

/* Wzmocniony kontrast dla tel/mailto links */
html body a[href^="tel:"],html body a[href^="mailto:"] {
font-weight: 600 !important;
text-decoration: none !important;
color: var(--fr-text-dark, #1a1a1a) !important;
border-bottom: 2px solid rgba(226, 215, 0, 0.45) !important;
padding-bottom: 1px !important;
transition: border-color 0.2s ease, color 0.2s ease !important}

html body a[href^="tel:"]:hover,html body a[href^="mailto:"]:hover,html body a[href^="tel:"]:focus-visible,html body a[href^="mailto:"]:focus-visible {
border-bottom-color: var(--fr-primary, #e2d700) !important;
color: #000 !important}

/* Tel/mailto NA CIEMNYCH SEKCJACH (footer, page-offer) — odwrócony color */
html body footer a[href^="tel:"],html body footer a[href^="mailto:"],html body.page-offer a[href^="tel:"],html body.page-offer a[href^="mailto:"],html body .fr-final-cta a[href^="tel:"],html body .fr-final-cta a[href^="mailto:"] {
color: var(--fr-cream, #faf6ed) !important;
border-bottom-color: rgba(226, 215, 0, 0.55) !important}

html body footer a[href^="tel:"]:hover,html body footer a[href^="mailto:"]:hover,html body.page-offer a[href^="tel:"]:hover,html body .fr-final-cta a[href^="tel:"]:hover {
color: var(--fr-primary, #e2d700) !important}

/* ─── §100f. KONTAKT links "zobacz ofertę / sprawdź na mapie" (PDF P22a) ───
   "Linki mało czytelne — wyróżnić" */

html body.page-contact a:not(.fr-btn):not([class*="nav-link"]):not(.navbar-brand),html body.page-txt[class*="contact"] a:not(.fr-btn):not([class*="nav-link"]):not(.navbar-brand) {
color: var(--fr-text-dark, #1a1a1a) !important;
font-weight: 600 !important;
transition: text-decoration-color 0.2s ease, color 0.2s ease !important}

html body.page-contact a:not(.fr-btn):hover,html body.page-contact a:not(.fr-btn):focus-visible {
color: #000 !important;
text-decoration-color: var(--fr-primary-hover, #c8bd00) !important}

/* ─── §100g. KONTAKT — "Nasze lokalizacje" 100% width (PDF P22c) ───
   "Widget Nasze lokalizacje przesunąć poniżej Dane do przelewów */

html body.page-contact .fr-locations,html body.page-contact #locations,html body.page-contact [class*="map"],html body.page-contact [class*="location"],html body.page-contact .fr-contact-map,html body.page-contact iframe[src*="maps"] {
width: 100% !important;
max-width: 100% !important;
margin: 32px 0 !important;
border-radius: var(--fr-radius-md, 12px) !important;
overflow: hidden !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important}

/* Jeśli "Nasze lokalizacje" jest w grid col, force span full width */
html body.page-contact .fr-locations,html body.page-contact [class*="location-grid"] {
grid-column: 1 / -1 !important}

/* Lista lokalizacji wewnątrz — czytelne karty */
html body.page-contact .fr-location-card,html body.page-contact .location-item,html body.page-contact [class*="location"] li {
padding: 16px !important;
border-radius: 8px !important;
background: rgba(0, 0, 0, 0.03) !important;
margin-bottom: 8px !important}

html body.page-contact .fr-location-card h3,html body.page-contact [class*="location"] h3 {
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 4px !important}

/* ─── §100h. KONTAKT "Dane do przelewów" prezentacja ─── */

html body.page-contact .fr-bank-details,html body.page-contact #bank-details,html body.page-contact [class*="bank"] {
background: var(--fr-bg-alt, #faf6ed) !important;
padding: 24px !important;
border-radius: var(--fr-radius-md, 12px) !important;
margin: 24px 0 !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important}

html body.page-contact .fr-bank-details dt,html body.page-contact [class*="bank"] dt {
font-weight: 700 !important;
margin-top: 8px !important;
color: var(--fr-text-dark, #1a1a1a) !important}

html body.page-contact .fr-bank-details dd,html body.page-contact [class*="bank"] dd {
font-family: 'Inter', monospace !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
margin: 0 0 8px !important;
word-break: break-all !important}

/* §101. WCAG AA + UX AUDIT FIXES (2026-05-15)
   Po pełnym audycie UX (30 punktów): */

/* ─── §101a. Menu linki header — czarny tekst zamiast żółtego ───
   AUDIT P11: kontrast 1.50:1 = WCAG FAIL.
   Fix: tekst czarny (#0F0F0E) na białym tle (12.5:1 = AA+ pass).
   Żółty zostaje jako accent na hover/active. */
html body header.default13 .nav-link,html body header.default13 .navbar a:not(.navbar-brand):not([class*="btn"]):not(.language__toggler),html body header.default13 .navbar .nav-link,html body header .navbar-nav .nav-link,html body header .navbar-collapse .nav-link {
color: var(--fr-text-dark, #0F0F0E) !important;
font-weight: 600 !important}

/* Hover state — żółty accent (działa bo background szary nie biały) */
html body header.default13 .nav-link:hover,html body header.default13 .navbar a:not(.navbar-brand):not([class*="btn"]):not(.language__toggler):hover,html body header .navbar-nav .nav-link:hover,html body header .navbar-nav .nav-link:focus-visible {
  color: #806C00 !important; /* dark gold - ratio 5.8:1 vs white */
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 4px !important}

/* Aktywny link — wyrazna podkreślenie */
html body header.default13 .nav-link.active,html body header.default13 .nav-link[aria-current="page"],html body header .navbar-nav .nav-link.active {
color: var(--fr-text-dark, #0F0F0E) !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-decoration-color: var(--fr-primary, #E2D700) !important;
text-decoration-thickness: 3px !important;
text-underline-offset: 6px !important}

/* Page-index transparent header — TUTAJ menu ZOSTAJE biało/jasne
   bo header jest nad ciemnym hero image. */
html body.page-index header.default13:not(.fr-header--scrolled) .nav-link,html body.page-index header.default13:not(.fr-header--scrolled) .navbar a:not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
color: var(--fr-cream, #FAF6ED) !important;}

html body.page-index header.default13:not(.fr-header--scrolled) .nav-link:hover,html body.page-index header.default13:not(.fr-header--scrolled) .navbar a:not(.navbar-brand):not([class*="btn"]):not(.language__toggler):hover {
color: var(--fr-primary, #E2D700) !important;
text-decoration: none !important}

/* ─── §101b. .fr-btn--outline kontrast (AUDIT P12) ───
   Bug: żółty tekst na cream tle (1.41:1 = WCAG FAIL).
   Fix: ciemny tekst, żółty border zostaje (zachowuje brand). */
html body .fr-btn--outline,html body a.fr-btn--outline,html body button.fr-btn--outline {
color: var(--fr-text-dark, #0F0F0E) !important;
background: transparent !important;
border: 2px solid var(--fr-primary, #E2D700) !important;
font-weight: 700 !important}

html body .fr-btn--outline:hover,html body a.fr-btn--outline:hover,html body button.fr-btn--outline:hover {
background: var(--fr-primary, #E2D700) !important;
color: var(--fr-text-dark, #0F0F0E) !important;
border-color: var(--fr-primary, #E2D700) !important;
transform: none !important}

/* Hero outline button (na ciemnym tle z hero photo) — odwrotnie */
html body.page-index header + main .fr-btn--outline,html body.page-index .fr-hero-asym .fr-btn--outline,html body .fr-hero-asym__cta .fr-btn--outline {
color: var(--fr-cream, #FAF6ED) !important;
border-color: var(--fr-cream, #FAF6ED) !important}

html body.page-index header + main .fr-btn--outline:hover,html body .fr-hero-asym__cta .fr-btn--outline:hover {
background: var(--fr-cream, #FAF6ED) !important;
color: var(--fr-text-dark, #0F0F0E) !important;
border-color: var(--fr-cream, #FAF6ED) !important}

/* ─── §101c. Focus-visible state na WSZYSTKIE buttons + linki (AUDIT P21) ───
   Bug: SZUKAJ button :focus outline-style: none.
   Fix: jednolite focus-visible outline (3px solid gold + 2px offset). */
html body button:focus-visible,html body a:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [role="button"]:focus-visible,html body [tabindex]:focus-visible,html body .fr-btn:focus-visible,html body .fr-cmd-bar__submit:focus-visible {
outline: 3px solid var(--fr-primary, #E2D700) !important;
outline-offset: 3px !important;
border-radius: 4px}

/* Specific dla SZUKAJ button (mocniejszy contrast bo on jest na ciemnym tle) */
html body #fr-search button[type="submit"]:focus-visible,html body .fr-cmd-bar__submit:focus-visible {
outline: 3px solid #FFFFFF !important;
outline-offset: 4px !important;
box-shadow: 0 0 0 6px rgba(226, 215, 0, 0.55) !important}

/* ─── §101d. H1 offers list "Fair Rentals21ofert" (AUDIT P8) ───
   Bug: <small>21</small><small>ofert</small> bez spacji → screen reader */
html body.page-offers h1 small,html body.page-offers .offers-list h1 small,html body[class*="offers"] h1 small {
padding-left: 8px !important;
font-weight: 400 !important;
color: var(--fr-text-muted, #4a4a4a) !important;
font-size: 0.7em !important}

/* ─── §101e. Lazy loading helper class + offer cards (AUDIT P23) ───
   Bug: 76 obrazów ładuje się synchronicznie na /offers.
   Fix: klasa .fr-img-lazy z background-image placeholder
   + content-visibility dla off-screen cards. */
html body .fr-img-lazy,html body img.lazy,html body img[loading="lazy"] {
background: linear-gradient(135deg, #faf6ed 0%, #f0ebe0 50%, #faf6ed 100%);
background-size: 200% 100%;
animation: fr-img-shimmer 1.6s ease-in-out infinite}

@keyframes fr-img-shimmer {
0%, 100% { background-position: 100% 0}
50% { background-position: 0 0}
}

html body img[loading="lazy"][src] {
animation: none;
background: transparent}

/* Content-visibility na off-screen offer cards — poprawia perf */
html body.page-offers .offers-container > article,html body[class*="offers"] .offer-card,html body[class*="offers"] [class*="apt-card"] {
content-visibility: auto;
contain-intrinsic-size: auto 480px}

/* ─── §101f. Visually-hidden helper (sr-only) ───
   Dla H1 hidden (systemowe) — używać sr-only zamiast display:none
   żeby screen reader czytał ale visual nie pokazywał. */
.fr-sr-only,.sr-only,.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important}

/* ─── §101g. Powered by IdoBooking — wymóg licencyjny widoczność ───
   AUDIT P16: badge .powered_by visible:false.
   Fix: wymuszona widoczność (instinct: feedback_powered_by_idobooking_visible). */
html body .powered_by,html body .powered_by_logo,html body footer .powered_by,html body footer .powered_by_logo {
display: inline-flex !important;
align-items: center !important;
opacity: 0.85 !important;
visibility: visible !important;
pointer-events: auto !important;
font-size: 12px !important;
color: var(--fr-text-muted, #4a4a4a) !important}

html body .powered_by img,html body .powered_by_logo img,html body footer .powered_by img {
display: inline-block !important;
opacity: 0.85 !important;
max-height: 22px !important;
width: auto !important}

html body .powered_by:hover,html body .powered_by_logo:hover {
opacity: 1 !important}

/* §102. SPRINT C — Sekcja "O nas" / About us / Über uns (2026-05-15)
   Podstrona /txt/204/O-nas (PL + EN + DE). */

/* ─── §102a. PLACEHOLDER portretów (gold gradient + initials) ───
   TODO: docelowo klient dostarczy <img>, wtedy zastąpić div.placeholder. */
html body .fr-about__placeholder {
width: 100%;
height: 100%;
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #E2D700 0%, #C8BD00 35%, #A8A000 100%);
border-radius: var(--fr-radius-md, 12px);
position: relative;
overflow: hidden;
color: #1a1a1a}

html body .fr-about__placeholder::before {
content: '';
position: absolute;
inset: 0;
  background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.08) 0%, transparent 50%);
pointer-events: none}

html body .fr-about__placeholder-initials {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(72px, 10vw, 120px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
color: #1a1a1a;
position: relative;
z-index: 1}

html body .fr-about__placeholder-label {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.72);
position: relative;
z-index: 1}

html body .fr-about__placeholder--portrait {
aspect-ratio: 3 / 4;
min-height: 360px}

html body .fr-about__placeholder--team {
aspect-ratio: 4 / 3;
min-height: 320px}

/* ─── §102b. HISTORIA FIRMY (uses .fr-narrative__split, JUŻ istnieje) ───
   Override media height dla team photo placeholder */
html body .fr-about__team-photo {
border-radius: var(--fr-radius-md, 12px);
overflow: hidden;
min-height: 360px}

/* ─── §102c. WARTOŚCI (4 kolumny grid) ─── */
html body .fr-about__values {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 3vw, 32px);
margin-top: clamp(32px, 5vw, 48px)}

@media (min-width: 640px) {
html body .fr-about__values {
grid-template-columns: 1fr 1fr}
}

@media (min-width: 1024px) {
html body .fr-about__values {
grid-template-columns: repeat(4, 1fr)}
}

html body .fr-about__value {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--fr-radius-md, 12px);
padding: clamp(24px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease}

html body .fr-about__value:hover {
border-color: rgba(226, 215, 0, 0.45);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06)}

html body .fr-about__value-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(226, 215, 0, 0.18);
  color: #806C00; /* dark gold AA contrast */
display: inline-flex;
align-items: center;
justify-content: center}

html body .fr-about__value-icon svg {
width: 24px;
height: 24px}

html body .fr-about__value-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 400;
line-height: 1.2;
color: var(--fr-text-dark, #0F0F0E);
margin: 0}

html body .fr-about__value-text {
font-family: 'Inter', sans-serif;
font-size: clamp(13.5px, 1.4vw, 15px);
line-height: 1.6;
color: #4a4a4a;
margin: 0}

/* ─── §102d. ZESPÓŁ (2 portrety + bio) ─── */
html body .fr-about__team {
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 48px);
margin-top: clamp(32px, 5vw, 48px)}

@media (min-width: 768px) {
html body .fr-about__team {
grid-template-columns: 1fr 1fr}
}

/* SOLO modifier — gdy tylko 1 założycielka (np. Agnieszka Barańska solo) */
html body .fr-about__team.fr-about__team--solo {
grid-template-columns: 1fr !important;
max-width: 560px;
margin-left: auto;
margin-right: auto}

@media (min-width: 768px) {
html body .fr-about__team.fr-about__team--solo .fr-about__member {
display: grid;
grid-template-columns: minmax(0, 280px) 1fr;
gap: clamp(24px, 3vw, 40px);
align-items: center;
max-width: 720px;
margin: 0 auto}

html body .fr-about__team.fr-about__team--solo .fr-about__member-info {
text-align: left}

html body .fr-about__team.fr-about__team--solo .fr-about__member-bio {
margin-left: 0;
margin-right: 0}
}

html body .fr-about__member {
display: flex;
flex-direction: column;
gap: 20px}

html body .fr-about__member-photo {
border-radius: var(--fr-radius-md, 12px);
overflow: hidden;
aspect-ratio: 3 / 4;
max-width: 320px;
margin: 0 auto;
width: 100%}

html body .fr-about__member-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block}

html body .fr-about__member-info {
text-align: center}

html body .fr-about__member-name {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 400;
line-height: 1.2;
color: var(--fr-text-dark, #0F0F0E);
margin: 0 0 4px}

html body .fr-about__member-role {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
  color: #806C00; /* dark gold AA contrast */
margin: 0 0 16px}

html body .fr-about__member-bio {
font-family: 'Inter', sans-serif;
font-size: 14.5px;
line-height: 1.65;
color: #2a2a2a;
margin: 0 0 16px;
max-width: 460px;
margin-left: auto;
margin-right: auto}

html body .fr-about__member-contact {
font-size: 14px;
font-weight: 600}

html body .fr-about__member-contact a {
color: var(--fr-text-dark, #0F0F0E);
border-bottom: 2px solid rgba(226, 215, 0, 0.55);
text-decoration: none;
padding-bottom: 1px;
transition: border-color 0.2s ease}

html body .fr-about__member-contact a:hover,html body .fr-about__member-contact a:focus-visible {
border-bottom-color: var(--fr-primary, #E2D700)}

/* ─── §102e. STATY na ciemnym tle (4 kolumny) ─── */
html body .fr-about__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 3vw, 40px);
padding: clamp(40px, 6vw, 64px) 0}

@media (min-width: 768px) {
html body .fr-about__stats {
grid-template-columns: repeat(4, 1fr)}
}

html body .fr-about__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
padding: 0 8px}

html body .fr-about__stat-num {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 400;
line-height: 1;
color: var(--fr-primary, #E2D700)}

html body .fr-about__stat-label {
font-family: 'Inter', sans-serif;
font-size: clamp(12px, 1.2vw, 14px);
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.85);
max-width: 200px;
line-height: 1.4}

/* ─── §102f. Section spacing dla narratives na O nas ─── */
html body[class*="o-nas"] .fr-narrative,html body[class*="about"] .fr-narrative,html body[class*="ueber"] .fr-narrative {
padding: clamp(56px, 8vw, 88px) 0}

/* ─── §102g. Mobile adjustments ─── */
@media (max-width: 767px) {
html body .fr-about__member-photo {
max-width: 240px}

html body .fr-about__placeholder--portrait {
min-height: 280px}

html body .fr-about__placeholder-initials {
font-size: 64px}
}

@media (max-width: 480px) {
html body .fr-about__values {
gap: 16px}

html body .fr-about__value {
padding: 20px 18px}

html body .fr-about__stats {
gap: 16px;
padding: 32px 0}
}

/* §103. MENU OVERFLOW + KOMPAKTOWE ROZMIARY (2026-05-15)
   Po dodaniu pozycji "O nas" menu nie mieści się na średnich */

/* ─── §103a. OVERFLOW dropdown stylizacja ─── */

/* Trigger "..." */
html body header .menuOverflow.nav-item > span,html body header li.menuOverflow > span {
color: var(--fr-text-dark, #0F0F0E) !important;
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: 2px !important;
line-height: 1 !important;
cursor: pointer !important}

html body.page-index header.default13:not(.fr-header--scrolled) .menuOverflow.nav-item > span {
color: var(--fr-cream, #FAF6ED) !important;}

/* Button (a11y trigger) */
html body header .menuOverflow .nav-toggler {
position: absolute !important;
inset: 0 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
cursor: pointer !important}

/* Container hover */
html body header .menuOverflow.nav-item {
position: relative !important;
cursor: pointer !important;
padding: 0 16px !important}

html body header .menuOverflow.nav-item:hover > span {
color: var(--fr-primary-dark, #806C00) !important}

/* DROPDOWN — ul.menuOverflow.sub-navi */
html body header ul.menuOverflow.sub-navi,html body header .menuOverflow .sub-navi {
position: absolute !important;
top: 100% !important;
right: 0 !important;
margin-top: 8px !important;
padding: 8px !important;
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 10px !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
min-width: 200px !important;
list-style: none !important;
z-index: 1020 !important;
display: none !important}

/* Open state — pokazywany przez aria-expanded lub click handler */
html body header .menuOverflow[aria-expanded="true"] .sub-navi,html body header .menuOverflow.is-open .sub-navi,html body header .menuOverflow.open .sub-navi,html body header .menuOverflow:hover .sub-navi,html body header .menuOverflow:focus-within .sub-navi {
display: block !important}

/* Items w dropdown */
html body header ul.menuOverflow.sub-navi .nav-item,html body header .menuOverflow.sub-navi .nav-item {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important}

html body header ul.menuOverflow.sub-navi .nav-link,html body header .menuOverflow.sub-navi .nav-link,html body header ul.menuOverflow.sub-navi a,html body header .menuOverflow.sub-navi a {
display: block !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
color: var(--fr-text-dark, #0F0F0E) !important;
text-decoration: none !important;
border-radius: 6px !important;
white-space: nowrap !important;
transition: background 0.15s ease, color 0.15s ease !important}

html body header ul.menuOverflow.sub-navi .nav-link:hover,html body header ul.menuOverflow.sub-navi .nav-link:focus-visible,html body header .menuOverflow.sub-navi a:hover,html body header .menuOverflow.sub-navi a:focus-visible {
background: rgba(226, 215, 0, 0.18) !important;
color: var(--fr-text-dark, #0F0F0E) !important}

/* Active state — current page w overflow */
html body header ul.menuOverflow.sub-navi .nav-link.active,html body header ul.menuOverflow.sub-navi a[aria-current="page"] {
background: rgba(226, 215, 0, 0.28) !important;
color: var(--fr-text-dark, #0F0F0E) !important}

/* ─── §103b. KOMPAKTOWE MENU — więcej pozycji się mieści ───
   UWAGA SPECIFICITY: poprzednia warstwa custom.css używa
   `.nav-link.nav-link` + drugi selector z `:not()` chain x4
   (specificity 0,7,4). Aby je nadpisać używamy EXACT same group
   selector — cascade order decyduje (nasz CSS jest later). */

@media (min-width: 992px) {
html body header.default13 .nav-link.nav-link,
html body header.default13 .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
padding: 10px 14px !important;
font-size: 13px !important;
letter-spacing: 0.03em !important;
white-space: nowrap !important;
font-weight: 600 !important}

html body header.default13 .navbar-nav.navbar-nav {
gap: 4px !important}
}

@media (min-width: 1200px) {
html body header.default13 .nav-link.nav-link,
html body header.default13 .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
padding: 10px 16px !important;
font-size: 13.5px !important}

html body header.default13 .navbar-nav.navbar-nav {
gap: 6px !important}
}

@media (min-width: 1400px) {
html body header.default13 .nav-link.nav-link,
html body header.default13 .navbar a[href]:not(.logo):not(.navbar-brand):not([class*="btn"]):not(.language__toggler) {
padding: 12px 18px !important;
font-size: 14px !important}
}

/* §104. FIX BUGÓW POST-WGRANIA (2026-05-15 v2)
   Po wgraniu Sprint C + §101 i §103 wykryto 4 bugi: */

/* ─── §104a. O nas STATS — fr-narrative--dark modifier + auto-contrast ───
   Root cause: `--fr-dark` nie był defined w :root (dodany teraz wyżej).
   Plus inline `style="background: var(--fr-dark);"` w HTML jest mniej
   robust niż dedykowana klasa — używamy `.fr-narrative--dark`. */

/* DARK section modifier — wymusza ciemne tło + jasny tekst */
html body section.fr-narrative.fr-narrative--dark,html body .fr-narrative.fr-narrative--dark {
background: var(--fr-dark, #0F0F0E) !important;
color: var(--fr-cream, #F0EAE0) !important}

html body .fr-narrative--dark .fr-about__stat-num {
color: var(--fr-primary, #E2D700) !important}

html body .fr-narrative--dark .fr-about__stat-label {
color: rgba(240, 234, 224, 0.88) !important}

/* Default (LIGHT background) stats — ciemny tekst (gdy klient
   zapomni dodać --dark klasy, lub bg jest cream) */
html body section.fr-narrative:not(.fr-narrative--dark) .fr-about__stat-num {
color: var(--fr-primary-dark, #806C00) !important}

html body section.fr-narrative:not(.fr-narrative--dark) .fr-about__stat-label {
color: rgba(15, 15, 14, 0.78) !important}

/* ─── §104b. Footer adres — span linebreak fix ─── */
/* Chained class names (.footer-contact-adress.footer-contact-adress)
   dla specificity boost — pobija starsze rule z gap: 24px. */

html body footer .footer-contact-adress.footer-contact-adress,html body footer li.footer-contact-adress.footer-contact-adress,html body footer .footer__contact .footer-contact-adress.footer-contact-adress {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: center !important;
gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important}

html body footer .footer-contact-adress.footer-contact-adress span {
display: inline !important;
white-space: normal !important;
margin: 0 !important;
padding: 0 !important}

/* Cała lista contact — wyśrodkowanie
   Chained class boost dla specificity (system ma align-items: start). */
html body footer .footer__contact.footer__contact,html body footer ul.footer__contact.footer__contact {
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
text-align: center !important;
max-width: 600px !important}

html body footer .footer__contact.footer__contact li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: center !important;
width: auto !important;
align-self: center !important}

/* WSZYSTKIE li (phone, mail, terms) — wyśrodkowanie poziome
   Chained class boost dla specificity bo system ma justify-content: normal */
html body footer .footer-contact-phone.footer-contact-phone,html body footer .footer-contact-mail.footer-contact-mail,html body footer .footer-contact-terms.footer-contact-terms,html body footer .footer__contact li.footer-contact-phone,html body footer .footer__contact li.footer-contact-mail,html body footer .footer__contact li.footer-contact-terms {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: auto !important;
margin: 0 auto !important;
gap: 8px !important}

/* Linki tel/mail w stopce — własny styling */
html body footer .footer-contact-phone a,html body footer .footer-contact-mail a {
display: inline-flex !important;
align-items: center !important;
text-align: center !important;
white-space: nowrap !important}

/* ─── §104c. footer-contact-baner pasek pełna szerokość ───
   Chained class boost dla specificity. */

html body footer .footer-contact-baner.footer-contact-baner,html body .footer-contact-baner.footer-contact-baner {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 24px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 32px !important;
box-sizing: border-box !important;
flex-wrap: wrap !important}

/* Logo VISA/Mastercard wewnątrz */
html body footer .footer-contact-baner img,html body .footer-contact-baner img {
max-height: 28px !important;
width: auto !important;
vertical-align: middle !important;
opacity: 0.85 !important}

/* ─── §104d. Powered by IdoBooking — wymuś widoczność ─── */
/* SPECIFICITY HACK: poprzednia warstwa custom.css ma 3 rules
   z `display: none + width: 0 + height: 0` na .powered_by/.powered_by_logo.
   Pierwsza ma `html body img.powered_by_logo` (0,1,3).
   Aby je przebić używamy CHAINED class names (`.foo.foo`) które
   liczą się jako 2 klasy w specificity. */

/* Parent .footer__social — force visible (chained class boost) */
html body footer .footer__social.footer__social,html body footer .footer__wrapper .footer__social.footer__social,html body footer .row .footer__social.footer__social {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 0 !important;
margin: 0 auto !important;
width: 100% !important;
background: transparent !important}

/* Powered_by container — chained class names dla max specificity */
html body footer .footer__social.footer__social .powered_by.powered_by,html body footer .footer__social.footer__social a.powered_by_logo.powered_by_logo,html body footer .footer__social .powered_by_logo.powered_by_logo,html body footer .footer__wrapper .powered_by.powered_by,html body footer .row .powered_by.powered_by {
display: inline-flex !important;
visibility: visible !important;
opacity: 0.85 !important;
width: auto !important;
height: auto !important;
align-items: center !important;
pointer-events: auto !important}

html body footer .powered_by.powered_by:hover,html body footer .powered_by_logo.powered_by_logo:hover {
opacity: 1 !important}

/* IMG wewnątrz — chained class dla pobicia custom.css `width: 0 !important` */
html body footer .footer__social.footer__social img.powered_by_logo.powered_by_logo,html body footer .footer__social.footer__social .powered_by.powered_by img,html body footer img.powered_by_logo.powered_by_logo,html body footer .powered_by.powered_by img {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: 20px !important;
max-height: 28px !important;
  filter: brightness(0) invert(1) !important; /* ciemne logo → białe (na dark footer) */
}

/* §105. BLOG MODULE — v1.34 (Opcja A: IdoBooking subpages + JS)
   Lista wpisow na /pl/txt/300, posty na /pl/txt/301+. */

/* ─── §105a. Blog list hero + filters ─── */

.fr-blog-list-hero {
padding: clamp(80px, 14vh, 160px) 0 clamp(40px, 8vh, 80px);
text-align: center;
background: var(--fr-bg)}

.fr-blog-list-hero__kicker {
display: inline-block;
padding: 6px 18px;
font-family: var(--fr-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fr-primary-deep);
background: rgba(226, 215, 0, 0.18);
border-radius: 999px;
margin-bottom: 18px}

.fr-blog-list-hero__title {
font-family: var(--fr-font-display);
font-size: clamp(34px, 5.5vw, 64px);
line-height: 1.05;
font-weight: 400;
color: var(--fr-dark);
margin: 0 0 18px}

.fr-blog-list-hero__lead {
max-width: 680px;
margin: 0 auto;
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.7;
color: var(--fr-text-muted)}

.fr-blog-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 28px auto 0;
max-width: 720px}

.fr-blog-filter {
appearance: none;
font-family: var(--fr-font-body);
font-size: 14px;
font-weight: 500;
padding: 9px 18px;
border: 1px solid var(--fr-border-light);
background: var(--fr-white);
color: var(--fr-dark);
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease}

.fr-blog-filter:hover {
border-color: var(--fr-primary-deep);
background: rgba(226, 215, 0, 0.08)}

.fr-blog-filter.is-active {
background: var(--fr-dark);
border-color: var(--fr-dark);
color: var(--fr-white)}

/* ─── §105b. Blog cards grid ─── */

.fr-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(20px, 3vw, 36px);
max-width: 1240px;
margin: clamp(40px, 6vh, 72px) auto;
padding: 0 clamp(16px, 3vw, 32px)}

.fr-blog-card {
display: flex;
flex-direction: column;
background: var(--fr-white);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease;
text-decoration: none;
color: inherit}

.fr-blog-card:hover,.fr-blog-card:focus-visible {
transform: translateY(-4px);
box-shadow: var(--fr-shadow-md);
text-decoration: none;
color: inherit}

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

.fr-blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease}

.fr-blog-card:hover .fr-blog-card__img {
transform: scale(1.05)}

.fr-blog-card__category {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--fr-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 12px;
background: var(--fr-dark);
color: var(--fr-white);
border-radius: 999px}

.fr-blog-card__body {
padding: clamp(18px, 2.5vw, 26px);
display: flex;
flex-direction: column;
flex: 1}

.fr-blog-card__title {
font-family: var(--fr-font-display);
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.25;
font-weight: 400;
color: var(--fr-dark);
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden}

.fr-blog-card__excerpt {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.6;
color: var(--fr-text-muted);
margin: 0 0 18px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1}

.fr-blog-card__meta {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--fr-font-body);
font-size: 13px;
color: var(--fr-text-muted);
padding-top: 14px;
border-top: 1px solid var(--fr-border-light)}

.fr-blog-card__date {
display: inline-flex;
align-items: center;
gap: 6px}

.fr-blog-card__read-time {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px}

.fr-blog-empty {
grid-column: 1 / -1;
text-align: center;
padding: clamp(40px, 8vh, 80px) 20px;
font-family: var(--fr-font-body);
color: var(--fr-text-muted);
font-size: 16px}

/* ─── §105c. Blog post page (hero + body + CTA + related) ─── */

.fr-post-hero {
padding: clamp(80px, 14vh, 160px) 0 clamp(30px, 5vh, 60px);
text-align: center;
background: var(--fr-bg)}

.fr-post-hero__category {
display: inline-block;
padding: 6px 18px;
font-family: var(--fr-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fr-white);
background: var(--fr-dark);
border-radius: 999px;
margin-bottom: 24px}

.fr-post-hero__title {
font-family: var(--fr-font-display);
font-size: clamp(30px, 5vw, 56px);
line-height: 1.1;
font-weight: 400;
color: var(--fr-dark);
max-width: 880px;
margin: 0 auto 22px;
padding: 0 16px}

.fr-post-hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
font-family: var(--fr-font-body);
font-size: 14px;
color: var(--fr-text-muted)}

.fr-post-hero__author {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: var(--fr-dark)}

.fr-post-featured-img {
max-width: 1100px;
margin: 0 auto clamp(30px, 5vh, 60px);
padding: 0 clamp(16px, 3vw, 32px)}

.fr-post-featured-img img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--fr-radius-md)}

.fr-post-body {
max-width: 720px;
margin: 0 auto clamp(60px, 10vh, 120px);
padding: 0 clamp(16px, 4vw, 32px);
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.75;
color: var(--fr-text-body)}

.fr-post-body h2 {
font-family: var(--fr-font-display);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.3;
margin: 48px 0 18px;
color: var(--fr-dark)}

.fr-post-body h3 {
font-family: var(--fr-font-display);
font-size: clamp(20px, 2.5vw, 24px);
line-height: 1.35;
margin: 36px 0 14px;
color: var(--fr-dark)}

.fr-post-body p {
margin: 0 0 22px}

.fr-post-body a {
color: var(--fr-primary-deep);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px}

.fr-post-body a:hover {
text-decoration-thickness: 2px}

.fr-post-body ul,.fr-post-body ol {
margin: 0 0 22px;
padding-left: 28px}

.fr-post-body li {
margin: 0 0 10px}

.fr-post-body blockquote {
margin: 32px 0;
padding: 20px 28px;
border-left: 4px solid var(--fr-primary-deep);
background: var(--fr-bg);
font-family: var(--fr-font-display);
font-style: italic;
font-size: 18px;
color: var(--fr-dark)}

.fr-post-body img {
max-width: 100%;
height: auto;
border-radius: var(--fr-radius-sm);
margin: 28px 0}

.fr-post-cta {
margin: 48px auto;
padding: clamp(28px, 4vw, 40px);
background: var(--fr-dark);
color: var(--fr-white);
border-radius: var(--fr-radius-md);
text-align: center}

.fr-post-cta h3 {
font-family: var(--fr-font-display);
font-size: clamp(22px, 3vw, 28px);
margin: 0 0 12px;
color: var(--fr-white)}

.fr-post-cta p {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.6;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.85)}

.fr-post-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--fr-primary);
color: var(--fr-dark);
font-family: var(--fr-font-body);
font-weight: 600;
font-size: 15px;
border-radius: var(--fr-radius-sm);
text-decoration: none;
transition: background 0.18s ease}

.fr-post-cta__btn:hover {
background: var(--fr-light-accent);
text-decoration: none;
color: var(--fr-dark)}

.fr-post-related {
max-width: 1240px;
margin: 0 auto clamp(60px, 10vh, 120px);
padding: clamp(48px, 8vh, 80px) clamp(16px, 3vw, 32px) 0;
border-top: 1px solid var(--fr-border-light)}

.fr-post-related__title {
font-family: var(--fr-font-display);
font-size: clamp(24px, 3vw, 32px);
text-align: center;
margin: 0 0 36px;
color: var(--fr-dark)}

.fr-post-related__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(16px, 2.5vw, 28px)}

/* ─── §105d. Mobile blog adjustments ─── */

@media (max-width: 680px) {
.fr-blog-grid {
grid-template-columns: 1fr}
.fr-blog-filters {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding: 0 16px}
.fr-blog-filter {
flex-shrink: 0}
.fr-post-body {
font-size: 16px;
line-height: 1.7}
.fr-post-hero__meta {
gap: 10px;
font-size: 13px}
}

@media print {
.fr-post-hero { padding-top: 40px}
.fr-post-cta,
.fr-post-related { display: none}
}

/* §105e. BLOG v2 — Native panel rendering (v1.35)
   v2 zmiana: Posty uzywaja natywnych pol IdoBooking */

/* Intro nad lista (gdy klient ma tylko .fr-blog-list-mount, JS dodaje header) */
.fr-blog-list-intro {
max-width: 880px;
margin: clamp(20px, 4vh, 48px) auto clamp(20px, 4vh, 40px);
padding: 0 clamp(16px, 3vw, 32px);
text-align: center}

.fr-blog-list-intro__lead {
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.7;
color: var(--fr-text-muted);
margin: 14px 0 0}

/* Filtry centruje sie na stronie listy */
.fr-blog-list-mount .fr-blog-filters {
margin: 12px auto 0}

/* Mount point — przejmuje pozycjonowanie kontenera; wyrownujemy ku gorze
   bo IdoBooking renderuje H1 ".big-label" jako pierwszy w container */
body.page-txt main.page .container > .fr-blog-list-mount {
margin: 24px 0}

/* ─── §105f. POST PAGE meta bar (pod systemowym H1) ─── */

body.page-txt main.page h1.big-label + .fr-blog-post-meta,body.fr-is-blog-post .fr-blog-post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 18px 0 32px;
padding: 14px 0;
border-top: 1px solid var(--fr-border-light);
border-bottom: 1px solid var(--fr-border-light);
font-family: var(--fr-font-body);
font-size: 14px;
color: var(--fr-text-muted)}

.fr-blog-post-meta__category {
display: inline-block;
padding: 5px 14px;
background: var(--fr-dark);
color: var(--fr-white);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px}

.fr-blog-post-meta__date,.fr-blog-post-meta__author,.fr-blog-post-meta__read-time {
display: inline-flex;
align-items: center}

.fr-blog-post-meta__author {
font-weight: 500;
color: var(--fr-dark)}

.fr-blog-post-meta__read-time {
margin-left: auto}

/* ─── §105g. POST PAGE featured image (auto-injected if not in content) ─── */

.fr-blog-post-featured {
margin: 0 0 clamp(28px, 5vh, 48px)}

.fr-blog-post-featured img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--fr-radius-md);
display: block}

/* ─── §105h. POST PAGE typography upgrade (gdy body ma .fr-is-blog-post) ─── */

body.fr-is-blog-post main.page .container {
max-width: 760px;
margin: 0 auto;
padding-top: clamp(30px, 5vh, 60px);
padding-bottom: clamp(60px, 10vh, 120px)}

body.fr-is-blog-post main.page h1.big-label {
font-family: var(--fr-font-display);
font-size: clamp(28px, 4.5vw, 48px);
line-height: 1.15;
font-weight: 400;
color: var(--fr-dark);
margin: 0 0 18px}

body.fr-is-blog-post main.page .container > h2,body.fr-is-blog-post main.page .container > .row h2 {
font-family: var(--fr-font-display);
font-size: clamp(22px, 3vw, 30px);
line-height: 1.3;
margin: 40px 0 16px;
color: var(--fr-dark)}

body.fr-is-blog-post main.page .container > h3 {
font-family: var(--fr-font-display);
font-size: clamp(18px, 2.4vw, 22px);
line-height: 1.35;
margin: 30px 0 12px;
color: var(--fr-dark)}

body.fr-is-blog-post main.page .container > p,body.fr-is-blog-post main.page .container > .row p {
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.75;
color: var(--fr-text-body);
margin: 0 0 22px}

body.fr-is-blog-post main.page .container a {
color: var(--fr-primary-deep);
text-decoration: underline;
text-underline-offset: 3px}

body.fr-is-blog-post main.page .container ul,body.fr-is-blog-post main.page .container ol {
margin: 0 0 22px;
padding-left: 28px}

body.fr-is-blog-post main.page .container li {
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.75;
margin: 0 0 8px}

body.fr-is-blog-post main.page .container blockquote {
margin: 28px 0;
padding: 18px 24px;
border-left: 4px solid var(--fr-primary-deep);
background: var(--fr-bg);
font-family: var(--fr-font-display);
font-style: italic;
font-size: 18px;
color: var(--fr-dark)}

body.fr-is-blog-post main.page .container img {
max-width: 100%;
height: auto;
border-radius: var(--fr-radius-sm);
margin: 24px 0;
display: block}

/* ─── §105i. POST PAGE related (auto-injected po content) ─── */

.fr-blog-related {
max-width: 1240px;
margin: clamp(60px, 10vh, 100px) auto 0;
padding: clamp(40px, 6vh, 64px) clamp(16px, 3vw, 32px) 0;
border-top: 1px solid var(--fr-border-light)}

.fr-blog-related__title {
font-family: var(--fr-font-display);
font-size: clamp(22px, 3vw, 30px);
text-align: center;
margin: 0 0 32px;
color: var(--fr-dark)}

.fr-blog-related__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: clamp(16px, 2.5vw, 24px)}

/* Wewnatrz .container reset max-width na related */
body.fr-is-blog-post main.page .container .fr-blog-related {
max-width: none;
margin-left: calc(-1 * clamp(16px, 3vw, 32px));
margin-right: calc(-1 * clamp(16px, 3vw, 32px))}

/* ─── §105j. Mobile dla blog post page ─── */

@media (max-width: 680px) {
.fr-blog-post-meta {
gap: 8px;
font-size: 13px}
.fr-blog-post-meta__read-time {
margin-left: 0}
body.fr-is-blog-post main.page .container {
padding-top: 24px}
}

/* §105k. BLOG v4 — Systemic /news + /news/X styling (v1.37)
   Wzorzec z Apartamenty Parkowe — IdoBooking ma natywny modul */

/* Systemowa lista /news — fallback w przypadku gdy ktos wejdzie na surowy /news */
body.page-news main.page .container > h1.big-label {
font-family: var(--fr-font-display);
font-size: clamp(34px, 5.5vw, 56px);
text-align: center;
margin: clamp(40px, 8vh, 80px) 0 clamp(28px, 4vh, 48px);
color: var(--fr-dark)}

body.page-news .news-wrapper.row {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(20px, 3vw, 32px);
max-width: 1240px;
margin: 0 auto clamp(60px, 10vh, 100px);
padding: 0 clamp(16px, 3vw, 32px)}

body.page-news .news-item {
background: var(--fr-white);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-md);
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease;
  /* override Bootstrap col-* */
flex: none !important;
max-width: none !important;
width: auto !important;
padding: 0 !important}

body.page-news .news-item:hover {
transform: translateY(-4px);
box-shadow: var(--fr-shadow-md)}

body.page-news .news-item > a:first-child {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden}

body.page-news .news-item > a:first-child img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease}

body.page-news .news-item:hover > a:first-child img {
transform: scale(1.05)}

body.page-news .news-item .news-date {
display: block;
padding: 18px 22px 0;
font-family: var(--fr-font-body);
font-size: 13px;
color: var(--fr-text-muted);
letter-spacing: 0.04em}

body.page-news .news-item .news-content {
padding: 8px 22px 20px}

body.page-news .news-item .news-content h2,body.page-news .news-item .news-content h3,body.page-news .news-item .news-content .news-title {
font-family: var(--fr-font-display);
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.25;
margin: 0 0 10px;
color: var(--fr-dark)}

body.page-news .news-item .news-content p {
font-family: var(--fr-font-body);
font-size: 15px;
line-height: 1.6;
color: var(--fr-text-muted);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden}

body.page-news .news-item .more-news {
display: inline-block;
font-family: var(--fr-font-body);
font-size: 14px;
font-weight: 500;
color: var(--fr-primary-deep);
text-decoration: none;
background: transparent !important;
border: none !important;
padding: 0 22px 18px !important}

body.page-news .news-item .more-news:hover {
text-decoration: underline;
text-underline-offset: 3px}

/* Single news post page /news/X — stylizacja typografia */
body.page-news main.page .container article {
max-width: 760px;
margin: 0 auto;
padding: clamp(30px, 5vh, 60px) clamp(16px, 4vw, 32px) clamp(60px, 10vh, 120px)}

body.page-news main.page .container article h1.big-label {
font-family: var(--fr-font-display);
font-size: clamp(30px, 5vw, 52px);
line-height: 1.1;
font-weight: 400;
text-align: left;
margin: 0 0 14px;
color: var(--fr-dark)}

body.page-news main.page .container article .date-news {
display: block;
font-family: var(--fr-font-body);
font-size: 14px;
color: var(--fr-text-muted);
margin: 0 0 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--fr-border-light)}

body.page-news main.page .container article .news-wrapper {
font-family: var(--fr-font-body);
font-size: 17px;
line-height: 1.75;
color: var(--fr-text-body)}

body.page-news .news-wrapper h2,body.page-news .news-wrapper h3 {
font-family: var(--fr-font-display);
margin-top: 36px;
color: var(--fr-dark)}

body.page-news .news-wrapper p {
margin: 0 0 22px}

body.page-news .news-wrapper a {
color: var(--fr-primary-deep);
text-decoration: underline;
text-underline-offset: 3px}

body.page-news .news-wrapper img {
max-width: 100%;
height: auto;
border-radius: var(--fr-radius-sm);
margin: 24px 0}

body.page-news .news-wrapper blockquote {
margin: 28px 0;
padding: 18px 24px;
border-left: 4px solid var(--fr-primary-deep);
background: var(--fr-bg);
font-family: var(--fr-font-display);
font-style: italic;
color: var(--fr-dark)}

/* "Wroc do listy" link wstrzykiwany przez JS */
.fr-blog-back-to-list {
display: inline-block;
margin-top: clamp(40px, 6vh, 64px);
padding: 10px 20px;
font-family: var(--fr-font-body);
font-size: 14px;
font-weight: 500;
color: var(--fr-dark);
background: var(--fr-bg);
border: 1px solid var(--fr-border-light);
border-radius: var(--fr-radius-pill);
text-decoration: none !important;
transition: all 0.18s ease}

.fr-blog-back-to-list:hover {
background: var(--fr-dark);
color: var(--fr-white);
border-color: var(--fr-dark)}

@media (max-width: 680px) {
body.page-news .news-wrapper.row {
grid-template-columns: 1fr}
body.page-news main.page .container article {
padding-top: 20px}
}

/* §106. POST-DEPLOY FIXES (v1.38, 2026-05-15 sesja 7)
   Po wgraniu v1.37 i wlaczeniu modulu Aktualnosci klient zglosil: */

/* ─── §106a. Ukryj systemowy widget aktualnosci na HOMEPAGE ─── */
/* Klient zarzadza blogiem przez /txt/205/Blog + /news — NIE chce
   zeby karty newsow pojawialy sie tez na home automatycznie. */

html body.page-index .news-container,html body.page-index .news-wrapper,html body.page-index .news-list,html body.page-index .cmsnews,html body.page-index .section .news-container {
display: none !important}

/* ─── §106b. Dropdown menu (3 kropki) — fix hover gap ─── */
/* Klient: "najezdam na 3 kopki i chce kliknac blog, znika od razu".
   Przyczyna: 8px margin-top na .sub-navi → kursor traci hover na */

html body header .menuOverflow.nav-item,html body header li.menuOverflow {
padding-bottom: 12px !important}

html body header ul.menuOverflow.sub-navi,html body header .menuOverflow .sub-navi {
margin-top: 0 !important;
padding-top: 12px !important}

/* Pseudo-bridge — invisible row laczy trigger z dropdown gdyby browser
   mial bug z padding-top na popupie */
html body header ul.menuOverflow.sub-navi::before,html body header .menuOverflow .sub-navi::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
background: transparent;
pointer-events: auto}

/* ─── §106c. Dropdown menu na HOMEPAGE — spojnosc z transparent header ─── */
/* Klient: tlo dropdown bialy na home nie pasuje do hero photo.
   Rozwiazanie: zachowaj bialy bg (dobry kontrast), DODAJ subtelny gradient
   na gorze + delikatna ramka zeby smooth transition.
   Plus: arrow indicator laczacy trigger z dropdown. */

html body.page-index header.default13:not(.fr-header--scrolled) ul.menuOverflow.sub-navi,html body.page-index header.default13:not(.fr-header--scrolled) .menuOverflow .sub-navi {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
0 16px 40px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.12) !important}

/* Arrow indicator pod trigger "...": wskazuje wizualnie kierunek dropdown */
html body header .menuOverflow.nav-item:hover::after,html body header .menuOverflow.nav-item:focus-within::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(255, 255, 255, 0.98);
z-index: 1021}

/* ─── §106d. Powered_by — wymus widocznosc obrazka mimo lazy load null src ─── */
/* JS forceLoadPoweredBy w FR_KONIEC_BODY ustawia src=data-src.
   Tutaj CSS fallback: nawet jesli img bez src, kontener ma min-width
   zeby nie collapse'owal sie do 0px. */

html body footer .powered_by.powered_by,html body footer .powered_by_logo.powered_by_logo {
min-width: 120px !important;
min-height: 22px !important}

html body footer .powered_by.powered_by img,html body footer img.powered_by_logo.powered_by_logo {
min-width: 100px !important;
width: auto !important;
height: 20px !important;
  /* Jesli src null, pokaz placeholder text */
}

/* Fallback tekstowy gdy img bez src */
html body footer .powered_by.powered_by:has(img:not([src]))::after,html body footer .powered_by.powered_by:has(img[src=""])::after {
content: 'Powered by idoBooking';
font-family: var(--fr-font-body);
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.04em;
margin-left: 4px}

/* §107. POST-DEPLOY FIXES (v1.39, 2026-05-15 sesja 8)
   Live audit chrome-devtools wykryl 5 issues: */

/* ─── §107a. Featured apartment "od X zl/noc" badge — solid dark bg ─── */

html body .fr-apt-price,html body .fr-apt-img .fr-apt-price {
background: rgba(15, 15, 14, 0.88) !important;
color: var(--fr-primary) !important;
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
border-radius: 8px !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
0 4px 12px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.15) !important;
  /* Zachowaj position absolute z poprzedniego stylowania */
top: 14px !important;
left: 14px !important}

/* ─── §107b. "Zobacz wszystkie X apartamentow" outline btn na cream ─── */

/* Outline button na jasnych sekcjach (page-index cream backgrounds) */
html body.page-index .fr-btn.fr-btn--outline {
border: 2px solid var(--fr-dark) !important;
color: var(--fr-dark) !important;
background: transparent !important;
font-weight: 600 !important}

html body.page-index .fr-btn.fr-btn--outline:hover,html body.page-index .fr-btn.fr-btn--outline:focus-visible {
background: var(--fr-dark) !important;
color: var(--fr-white) !important;
border-color: var(--fr-dark) !important;}

/* Wyjatek: outline na ciemnym hero/dark sekcji (np. fr-final-cta) — cream zostaje */
html body .fr-final-cta .fr-btn--outline,html body section.fr-final-cta .fr-btn--outline,html body [class*="dark"] .fr-btn--outline {
border-color: var(--fr-cream, #F0EAE0) !important;
color: var(--fr-cream, #F0EAE0) !important}

/* ─── §107c. Offer page right sidebar (.offer-right-wrapper) — cream bg ─── */
/* Klient: "widzimy czarne tlo na sekcji" — zmieniamy na cream/white,
   tekst dark, cena highlighted gold accent + border-left */

html body.page-offer .offer-right-wrapper,html body.page-offer .col-lg-3.offer-right-wrapper,html body.page-offer [class*="offer-right"] {
background: var(--fr-bg) !important;
color: var(--fr-text-body) !important;
border-radius: var(--fr-radius-md) !important;
border: 1px solid var(--fr-border-light) !important;
padding: 24px 20px !important}

/* Cena w sidebarze — wyrazna gold akcent
   v1.41 fix: pastylka "OD 229,50 zl" (display:block, width:150px) ma */
html body.page-offer .offer-right-wrapper .offer-price,html body.page-offer .offer-right-wrapper .object-price,html body.page-offer [class*="offer-right"] [class*="price"] {
color: var(--fr-dark) !important;
margin-top: 12px !important;
margin-bottom: 16px !important;
margin-left: auto !important;
margin-right: auto !important}

html body.page-offer .offer-right-wrapper .offer-price small,html body.page-offer .offer-right-wrapper .object-price small {
color: var(--fr-text-muted) !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
display: block !important;
margin-bottom: 4px !important}

html body.page-offer .offer-right-wrapper .offer-price span,html body.page-offer .offer-right-wrapper .object-price strong.price,html body.page-offer .offer-right-wrapper .object-price span strong {
font-family: var(--fr-font-display) !important;
font-size: clamp(26px, 3vw, 32px) !important;
color: var(--fr-primary-deep) !important;
font-weight: 700 !important;
line-height: 1.1 !important}

/* Tekst w sidebarze (sprawdz dostepnosc itp.) */
html body.page-offer .offer-right-wrapper a:not(.accommodation-reservation):not([class*="btn"]),html body.page-offer .offer-right-wrapper p,html body.page-offer .offer-right-wrapper span:not(.btn):not(.button) {
color: var(--fr-text-body) !important}

html body.page-offer .offer-right-wrapper a:not(.accommodation-reservation):not([class*="btn"]):hover {
color: var(--fr-primary-deep) !important}

/* ─── §107d. .accommodation-reservation button — solid gold + padding ─── */
/* Klient: "nie rowna cena nie rowno napis zarezerwuj teraz w stosunku do przycisku"
   v1.40 fix: zmniejszony padding poziomy (24→14px) + mniejsze letter-spacing
   (0.08em→0.04em) zeby "ZAREZERWUJ TERAZ" miescil sie w 1 linii na sidebar 208px.
   Inner span styled przez wyzsza specificity (3 chained classes). */

html body .accommodation-reservation,html body a.accommodation-reservation,html body .room_rez .accommodation-reservation,html body .offer-right-wrapper .accommodation-reservation,html body.page-offer .offer-right-wrapper a.accommodation-reservation {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--fr-primary) !important;
color: var(--fr-dark) !important;
padding: 14px 14px !important;
border-radius: var(--fr-radius-pill) !important;
border: 2px solid var(--fr-primary) !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-align: center !important;
line-height: 1.2 !important;
height: auto !important;
min-height: 48px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
transition: all 0.18s ease !important;
cursor: pointer !important;
margin: 0 auto !important;
white-space: nowrap !important}

html body .accommodation-reservation:hover,html body .accommodation-reservation:focus-visible,html body.page-offer .offer-right-wrapper a.accommodation-reservation:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-dark) !important;
box-shadow: 0 6px 16px rgba(226, 215, 0, 0.4) !important}

/* Inner span (.btn.button.accommodation-leftbutton) — reset systemowych styli
   v1.40: wyzsza specificity (chained 3 klasy + body.page-offer) zeby pobic
   konkurujace regulalki w custom.css i systemowy template default13. */
html body .accommodation-reservation .btn.button.accommodation-leftbutton,html body.page-offer .accommodation-reservation .btn.button.accommodation-leftbutton,html body.page-offer .offer-right-wrapper .accommodation-reservation .btn.button.accommodation-leftbutton,html body .accommodation-reservation > span.btn.button {
background: transparent !important;
color: inherit !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
box-shadow: none !important}

/* ─── §107g. Cennik bottom button (.btn.btn-reverse w tabeli season-cell_main) ─── */
/* Klient: "zarezerwuj teraz nie jest rowno na przycisku" na dolnym cennik.
   Live audit: button NIE jest .accommodation-reservation — to inny element: */

html body.page-offer .price-list .btn.btn-reverse,html body.page-offer tr.season-cell_main .btn.btn-reverse,html body.page-offer tr.season-cell_main td .room_rez .btn.btn-reverse,html body .price-list-row .btn.btn-reverse {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 28px !important;
min-height: 46px !important;
line-height: 1.2 !important;
vertical-align: middle !important;
text-align: center !important;
letter-spacing: 0.04em !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: var(--fr-radius-pill) !important;
background: var(--fr-primary) !important;
color: var(--fr-dark) !important;
border: 2px solid var(--fr-primary) !important;
box-sizing: border-box !important;
white-space: nowrap !important;
transition: all 0.18s ease !important}

html body.page-offer .price-list .btn.btn-reverse:hover,html body.page-offer tr.season-cell_main .btn.btn-reverse:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-dark) !important;
box-shadow: 0 6px 16px rgba(226, 215, 0, 0.4) !important}

/* Rodzic <a> i <td> — vertical alignment + brak fl-content-shift */
html body.page-offer tr.season-cell_main td,html body.page-offer .price-list tr.season-cell_main td {
vertical-align: middle !important;
padding: 12px 16px !important}

html body.page-offer tr.season-cell_main td .room_rez {
display: flex !important;
justify-content: center !important;
margin: 0 !important}

html body.page-offer tr.season-cell_main td .room_rez > a {
display: inline-block !important;
text-decoration: none !important}

/* ─── §107h. .btn.btn-reverse — "Zobacz na mapie" + cennik bottom kontrast + alignment ─── */
/* Klient: "zobacz na mapie napis tez nie jest na srodku na podstronach ofert
   i napis tez powinien byc chyba czarny". */

html body .btn.btn-reverse,html body a.btn.btn-reverse,html body.page-offer .btn.btn-reverse,html body.page-offer .directions .btn.btn-reverse {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--fr-dark) !important;
background: var(--fr-primary) !important;
border: 2px solid var(--fr-primary) !important;
padding: 12px 28px !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
font-family: var(--fr-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
border-radius: var(--fr-radius-pill) !important;
min-height: 46px !important;
vertical-align: middle !important;
white-space: nowrap !important;
box-sizing: border-box !important;
transition: all 0.18s ease !important}

html body .btn.btn-reverse:hover,html body a.btn.btn-reverse:hover,html body.page-offer .btn.btn-reverse:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-dark) !important;
box-shadow: 0 6px 16px rgba(226, 215, 0, 0.4) !important}

/* ─── §107i. SZUKAJ button (.fr-cmd-bar__submit) — match INPUT height (52px) ─── */
/* Klient v1.43: "WYSOKOSC przycisku i tego POLA ma byc ROWNA, pole Wybierz
   date i pol goscie i przycisk szukaj MA MIEC TAKA SAMO WYSOKOSC". */

html body .fr-cmd-bar__submit,html body .fr-cmd-bar button[type="submit"],html body .fr-cmd-bar button.fr-cmd-bar__submit,html body .fr-search__submit,html body .fr-search-banner .fr-cmd-bar__submit,html body .fr-search-banner button[type="submit"],html body.page-index .fr-cmd-bar__submit,html body.page-index .fr-cmd-bar button[type="submit"],html body.page-index .fr-cmd-bar__form button.fr-cmd-bar__submit,html body.page-index .fr-search-banner .fr-cmd-bar__form button.fr-cmd-bar__submit,html body.page-index .fr-cmd-bar__form button[type="submit"].fr-cmd-bar__submit {
align-self: end !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 24px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
gap: 10px !important;
line-height: 1 !important}

html body .fr-cmd-bar__submit svg,html body .fr-cmd-bar button[type="submit"] svg,html body .fr-search-banner .fr-cmd-bar__submit svg,html body.page-index .fr-cmd-bar__submit svg,html body.page-index .fr-cmd-bar button[type="submit"] svg {
width: 20px !important;
height: 20px !important;
stroke-width: 2.5 !important}

/* ─── §107k. Litepicker pozycja — desktop default (under input), mobile center ─── */
/* Klient: "sprawdz ten little picker, nie widzisz, ze jest przesuniecie teraz?
   Prawa jego czesc jest jakas ucieta na koncu i widac kawalek zdjecia" */

@media (min-width: 992px) {
html body .litepicker:not(.mobilefriendly):not(.--static),
html body .litepicker[data-plugins*="mobilefriendly|keyboardnav"]:not(.mobilefriendly) {
    /* Litepicker jako modal w GORNEJ czesci viewportu (nie w centrum)
       Klient: centered pattern wyglada "przesuniety" — zmieniamy na
       top: 20% (modal blizej inputow) + horizontal center. */
top: 20% !important;
left: 50% !important;
transform: translateX(-50%) !important;
    /* Bezpieczny fallback dla zwojek viewportow */
max-width: calc(100vw - 32px) !important;
max-height: calc(100vh - 80px) !important;
overflow-y: auto !important}
}

/* §109z v1.51 — Litepicker --static (calendar tab na /offer/N) (PDF Uwagi_2 #1)
   Klient: "Na widgecie kalendarza widget przesuniety, brakuje miesiecy". */
html body .calendar-data .litepicker,html body .litepicker.--static,html body.page-offer .litepicker.--static {
position: relative !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
margin: 0 auto !important}

/* Ensure litepicker nie wystaje poza viewport prawej strony */
html body .litepicker {
max-width: calc(100vw - 32px) !important;
box-sizing: border-box !important}

/* ─── §107j. Litepicker arrows — zachowanie aspect ratio 11:16 ─── */
/* Klient: "przejscie strzaleczka w kolejne miesiace na littlepikerze
   jest nie jest rowne". */

html body .litepicker .button-previous-month svg,html body .litepicker .button-next-month svg {
width: 10px !important;
height: 14px !important;
fill: currentColor !important;
display: block !important}

/* Plus wymus button center alignment dla SVG */
html body .litepicker .button-previous-month,html body .litepicker .button-next-month {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important}

/* §108. POST-DEPLOY FIXES (v1.45, 2026-05-15 sesja 14)
   1. Compare-model footer dark bg → "czarne otoczki" za pill buttonami */

/* ─── §108a. Compare model footer — usun ciemne tlo (zostawia "otoczki") ─── */
/* Klient: "przyciski wybrania modelu, sa zaokraglone, ale itak maja jakies
   czarne otoczki". Live: .fr-compare-model__footer ma bg: rgb(10, 10, 9)
   (var --fr-dark-deep), wokol zaokraglonego pill buttona widac ciemny
   prostokat tla. Fix: zostaw bg footer jak reszta karty (transparent /
   cream), shadow + border z karty wystarczy. */

html body .fr-compare-model .fr-compare-model__footer,html body section.fr-compare-models .fr-compare-model .fr-compare-model__footer,html body article.fr-compare-model .fr-compare-model__footer {
background: transparent !important;
background-color: transparent !important;
padding: 24px !important;
border-top: 1px solid var(--fr-border-light) !important}

/* Cienie pill button — subtelne, nie obijaja sie o ciemny prostokat */
html body .fr-compare-model__footer .fr-btn--primary,html body .fr-compare-model__footer a.fr-btn {
box-shadow: 0 4px 14px rgba(226, 215, 0, 0.35) !important}

/* ─── §108b. Hero kicker na page-txt subpages — czytelny kontrast ─── */
/* Klient: "Dla Biznesu znaczek na gorze slabo widoczny".
   Live: .fr-page-hero__kicker color rgb(15,15,14) (dark) na bg
   rgba(226,215,0, 0.18) — subtelny zolty pill na dark overlay hero photo.
   Dark text na yellow-18% na dark = niski kontrast.
   Fix: solid yellow bg (1.0 opacity) + zachowanie dark text dla AA. */

html body.page-txt .fr-page-hero__kicker,html body.page-txt section.fr-page-hero .fr-page-hero__kicker {
background: var(--fr-primary) !important;
background-color: var(--fr-primary) !important;
color: var(--fr-dark) !important;
font-weight: 700 !important;
padding: 8px 18px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
letter-spacing: 0.12em !important}

/* ─── §108c. Zapytaj o oferte / Skontaktuj button — fix asymmetric padding ─── */
/* Klient: "przycisk zapytaj o oferte jakis inny zolty za mocno, swiecacy
   i do tego napis nie na srodku przycisku". */

html body .fr-final-cta .fr-btn--primary,html body .fr-btn.fr-btn--primary,html body a.fr-btn--primary,html body .fr-final-cta__cta-row .fr-btn--primary {
  padding: 14px 32px !important;            /* symmetric vertical */
  color: var(--fr-dark) !important;          /* z cream na dark */
background: var(--fr-primary) !important;
border: 2px solid var(--fr-primary) !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: var(--fr-radius-pill) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.2 !important;
min-height: 52px !important;
  box-shadow: 0 4px 14px rgba(226, 215, 0, 0.35) !important;  /* subtler glow */
transition: all 0.18s ease !important}

html body .fr-final-cta .fr-btn--primary:hover,html body .fr-btn.fr-btn--primary:hover,html body a.fr-btn--primary:hover {
background: var(--fr-light-accent) !important;
border-color: var(--fr-light-accent) !important;
color: var(--fr-dark) !important;
box-shadow: 0 6px 18px rgba(226, 215, 0, 0.45) !important}

/* §108d. Leaflet map fix — invalidateSize handled by JS in FR_KONIEC_BODY */
/* CSS-only safety net: ensure map container ma stable dimensions */
html body #map_container,html body .leaflet-container {
min-height: 420px !important;
height: 420px !important;
width: 100% !important;
background: var(--fr-bg) !important}

/* ============================================================
   §109. v1.47 — Audyt LIVE 2026-05-16 (6 fixów)
   ============================================================ */

/* §109a. Mapa /contact — przesunąć NAD treść (klient zgłosił:
   "Na contakt nie ma dalej mapy/ nie działa" — mapa była na top:4497px
   pod 4242px kontentu strony, klient nie zjeżdżał tak nisko).
   Fix: .contact wrapper → flex column, .leaflet-container → order: -1
   żeby pojawiła się NAD listą apartamentów i danymi firmy. */

html body .contact-page > .contact,html body .page.contact-page > .contact {
display: flex !important;
flex-direction: column !important}

html body .contact-page > .contact > .leaflet-container,html body .page.contact-page .leaflet-container {
order: -1 !important;
margin-bottom: 2.5rem !important;
margin-top: 1rem !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(15, 15, 14, 0.08) !important}

/* Mobile: mniejsza wysokość mapy żeby kontent kontaktu był widoczny szybciej */
@media (max-width: 767px) {
html body .contact-page .leaflet-container {
height: 320px !important;
min-height: 320px !important;
margin-bottom: 1.5rem !important}
}

/* §109a-fix: Leaflet panes recovery (bug systemowy IdoBooking)
   MCP audit 2026-05-16: .leaflet-map-pane miał height:2px mimo że
   mymap.getSize() = {x:1105, y:420}. mapPane CLIP'uje tiles → klient
   widzi pustą mapę z samymi +/- zoom buttons. CSS defensive force. */
html body .leaflet-container .leaflet-map-pane,html body .leaflet-container .leaflet-pane.leaflet-map-pane {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important}

html body .leaflet-container .leaflet-tile-pane,html body .leaflet-container .leaflet-pane.leaflet-tile-pane {
width: 100% !important;
height: 100% !important;
overflow: visible !important}

/* Zoom controls — defensive (klient mógł je widzieć ale tiles puste) */
html body .leaflet-container .leaflet-control-zoom {
z-index: 800 !important}

/* §109b-pre. v1.48b: ukryj filtr "Typ obiektu" (Fair Rentals ma tylko 1 typ
   = Apartament, filtr bezużyteczny). Klient zgłosił 2026-05-16.
   Selektor stabilny: każdy .filter_header ma unikalne ID systemowe. */
html body.page-offers .filter_items:has(#filter_header_objectTypes) {
display: none !important}
/* Fallback bez :has() — JS w boot() (hideObjectTypeFilter) */

/* §109b. /offers mobile — auto-expand filtrów
   Klient zgłosił: "nie da się kliknąc w rozwijanie filtrów są ukryte" */

@media (max-width: 991px) {
html body.page-offers .filter_content.collapse,
html body.page-offers .filter_content,
html body .page-offers .filter_content.collapse {
display: block !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important}

  /* Visual cue że header jest decorative (nie klikalny) */
html body.page-offers .filter_header {
cursor: default !important;
pointer-events: none !important;
border-bottom: 1px solid rgba(15, 15, 14, 0.08) !important;
margin-bottom: 0.75rem !important;
padding-bottom: 0.5rem !important}

  /* Spacing między grupami filtrów */
html body.page-offers .filter_items {
margin-bottom: 1.5rem !important;
padding-bottom: 1rem !important;
border-bottom: 1px dashed rgba(15, 15, 14, 0.12) !important}
html body.page-offers .filter_items:last-child {
border-bottom: none !important}
}

/* §109c. /offers — "Zastosuj filtry" button centering
   Klient zgłosił: "przycisk zastosuj filtry nie jest wyśrodkowany napis"
   Systemowy button ma display:inline-block + text-align:center, ale
   padding-left/right 28px asymetryczne lub wewnętrzny span niespakowany. */

html body.page-offers button.btn[type="submit"],html body.page-offers .filter_apply,html body.page-offers .btn.filter_submit,html body.page-offers .filters_form button.btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 24px !important;
width: 100% !important;
min-height: 48px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important}

/* Również: ujednolicić "FILTROWANIE" DIV toggle */
html body.page-offers .btn.btn-reverse {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important}

/* §109d. O nas hero — gradient (klient zgłosił: "cała strona na górze
   jest szara"). Systemowy bg dla page-txt to grey/transparent. Hero */

html body .page-txt .fr-page-hero:not([style*="background-image"]):not(.fr-page-hero--attractions),html body section.fr-page-hero:not([style*="background-image"]):not(.fr-page-hero--attractions) {
  background:
linear-gradient(135deg,
var(--fr-bg) 0%,
#fff 45%,
      var(--fr-bg-alt) 100%) !important;
position: relative !important}

/* Hero z inline bg-image (Dla-Biznesu, Obsluga-najmu) — fill cover */
html body section.fr-page-hero[style*="background-image"] {
background-color: transparent !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative !important}

/* Decorative accent ribbon (subtelny żółty pas u góry) */
html body section.fr-page-hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg,
var(--fr-primary) 0%,
var(--fr-light-accent) 50%,
    var(--fr-primary) 100%) !important;
z-index: 1 !important}

/* Hero kicker — zachowaj brand bg (już ma rgb(226,215,0)) */
html body section.fr-page-hero .fr-page-hero__kicker {
position: relative !important;
z-index: 2 !important}

/* §109e. DE/PL menuOverflow popup bg — match brand
   Klient zgłosił: "na zagranicznej wersji np. niemieckiej, jak się */

/* RESET — LI item wrapper transparent (był tu mój regression v1.47) */
html body li.menuOverflow,html body li.menuOverflow.nav-item {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important}

/* ONLY popup UL (.sub-navi) — dark brand bg */
html body ul.menuOverflow.sub-navi,html body .menuOverflow > ul.sub-navi {
background: rgba(15, 15, 14, 0.96) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(226, 215, 0, 0.15) !important;
border-radius: 12px !important;
  box-shadow:
0 12px 32px rgba(15, 15, 14, 0.18),
    0 4px 12px rgba(15, 15, 14, 0.12) !important;
padding: 8px 0 !important;
min-width: 200px !important}

html body ul.menuOverflow.sub-navi li {
background: transparent !important}

html body ul.menuOverflow.sub-navi li a,html body ul.menuOverflow.sub-navi .nav-link {
color: #fff !important;
font-weight: 600 !important;
padding: 10px 18px !important;
display: block !important;
transition: background 0.15s ease, color 0.15s ease !important}

html body ul.menuOverflow.sub-navi li a:hover,html body ul.menuOverflow.sub-navi .nav-link:hover {
background: rgba(226, 215, 0, 0.12) !important;
color: var(--fr-primary) !important}

/* §109f. Mobile grid /apt-grid — fix dla iPhone SE 320px
   Audyt v1.46: grid-template-columns hardcoded 320px → karta nie
   zmieści się na 320px viewport (iPhone SE). Fix: minmax(280px, 1fr)
   z fallback dla bardzo małych ekranów. */

@media (max-width: 767px) {
html body .fr-apt-grid {
grid-template-columns: minmax(280px, 1fr) !important;
gap: 1.25rem !important;
padding: 0 1rem !important}
}

@media (max-width: 359px) {
  /* iPhone SE 320 — ścieśniony grid bez padding side */
html body .fr-apt-grid {
grid-template-columns: 1fr !important;
padding: 0 0.5rem !important;
gap: 1rem !important}

html body .fr-apt-card .fr-apt-body {
padding: 1rem !important}
}

/* §109g. Notatka: tel: link cleanup — implementacja w JS
   (FR_KONIEC_BODY.html sekcja sanitizeTelLinks). Klient wpisał
   "+48 575092755" w panelu Dane firmy ze spacją po +48, system
   generuje tel:+48 575092755 (RFC 3966 niezgodne — wymaga URI bez
   whitespace). JS automatycznie czyści wszystkie a[href^="tel:"]. */

/* §109h. v1.48 — Google Maps iframe zamiast Leaflet (bug nieuleczalny)
   Klient zgłosił 2026-05-16: "jak przesuniesz mape to nie widac". */

/* Hide systemowy Leaflet container na /contact */
html body.contact-page .leaflet-container,html body .contact-page > .contact > .leaflet-container,html body .contact-page #map_container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important}

/* Google Maps iframe wrapper (inject'owany przez JS) */
html body .fr-google-map-wrap {
order: -1 !important;
width: 100% !important;
margin: 1rem 0 2.5rem !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(15, 15, 14, 0.08) !important;
position: relative !important;
background: var(--fr-bg) !important}

html body .fr-google-map-wrap iframe {
display: block !important;
width: 100% !important;
height: 420px !important;
border: 0 !important}

@media (max-width: 767px) {
html body .fr-google-map-wrap iframe {
height: 320px !important}
}

/* Caption pod mapą (opcjonalna) */
html body .fr-google-map-wrap__caption {
position: absolute !important;
bottom: 12px !important;
left: 12px !important;
background: rgba(15, 15, 14, 0.85) !important;
color: #fff !important;
padding: 6px 12px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
pointer-events: none !important;
z-index: 5 !important}

/* ════════════════════════════════════════════════════════════
   §113 — PATCH v1.70 HOTFIX (2026-05-20)
   Naprawia 3 P0 issues z live audytu v1.69:
   - Hamburger wystaje 5px poza header (override stary kod live linia ~11373)
   - Powered by IdoBooking niewidoczne (SVG _on_white na czarnej stopce)
   - WCAG contrast fails (yellow bg + white text → dark text 12.74:1)
   Reference: clients/fairrentals/v1.70-audit/RAPORT_PHASE1_2026-05-20.md
   ════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  /* §113a — Hamburger wymiary v1.70 (40px h + 6px 12px padding, override live) */
  html body header.default13 .navbar .navbar-toggler,
  html body header.default13 nav.navbar .navbar-toggler.navbar-toggler,
  html body header.default13 .menu-wrapper .navbar-toggler {
    min-height: 40px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
  }
}

/* §113b — Powered by IdoBooking — wariant z kolorami brand (klientka v1.70.2)
   v1.70.0: filter brightness(0) invert(1) → całkowicie BIAŁE logo (źle, klientka
   chce "ladne, normalne kolory").
   v1.70.2: filter:none + JS w body_bottom swap'uje img.src z _on_white.svg
   na _on_black.svg (oryginalne kolory brand IdoBooking: pomarańcz #ffb82a +
   biały tekst — czytelne na ciemnej stopce). */
html body .powered_by,
html body .powered_by_logo,
html body footer .powered_by,
html body footer .powered_by_logo {
  max-width: 160px !important;
  max-height: 40px !important;
  width: auto !important;
  height: 30px !important;
}
html body .powered_by .powered_by_logo,
html body footer img.powered_by_logo,
html body footer img[src*="powered_by_idoBooking"] {
  filter: none !important;
  opacity: 0.85 !important;
  max-width: 160px !important;
  max-height: 40px !important;
  width: auto !important;
  height: 30px !important;
}

/* §113c — WCAG 2.1 AA contrast fix: yellow bg + white text = 1.50 fail.
   Targety: #skiplink-0 (focus-visible), .navbar-reservation, .formbutton */
html body #skiplink-0,
html body #skiplink-0:hover,
html body #skiplink-0:focus,
html body #skiplink-0:focus-visible,
html body .navbar-reservation,
html body button.navbar-reservation,
html body .navbar-reservation:hover,
html body #iai_book_form .formbutton,
html body #iai_book_form button.formbutton,
html body #iai_book_form .formbutton:hover {
  color: #1a1a1a !important;
}

/* §113d — /offer/N sidebar .offer-price chip "Od XXX zl" + cena WHITE → DARK
   (klientka: "ceny na bialo" — to BYL bug na /offer/N, .offer-price na HOMEPAGE
   featured cards juz dark). */
html body .offer-right div.offer-price,
html body .offer-right div.offer-price *,
html body div.offer-right-top .offer-price,
html body div.offer-right-top .offer-price * {
  color: #1a1a1a !important;
}

/* §113e — Offer links Sprawdz dostepnosc / Zobacz cennik (yellow on cream 1.41) */
html body a.offerCalendar,
html body a.offerCalendar:hover,
html body a.offerCalendar:focus,
html body a.to-offer-prices,
html body a.to-offer-prices:hover,
html body a.to-offer-prices:focus {
  color: #1a1a1a !important;
  text-decoration: underline !important;
}

/* §113f — Homepage Dual CTA (Dla Wlascicieli/Biznesu) yellow on cream 1.41 */
html body .fr-dual-cta__kicker,
html body span.fr-dual-cta__kicker {
  color: #b8a800 !important;
}
html body .fr-dual-cta__link,
html body span.fr-dual-cta__link,
html body a.fr-dual-cta__link {
  color: #5a5400 !important;
}

/* §113g — Stats labels light gray (3.91:1) → darker (5.5+:1) */
html body .fr-stats-asym__label,
html body span.fr-stats-asym__label {
  color: #5a5550 !important;
}

/* §113h — Spacing /offer/N mobile: 10-12px → 16-18px breathing room
   Klientka: "elementy nie poodsuwane delikatnie" */
@media (max-width: 991.98px) {
  html body .offer-right a.offerCalendar.mt-3 {
    margin-top: 18px !important;
  }
  html body .offer-right a.to-offer-prices.mt-3 {
    margin-top: 18px !important;
  }
  html body .offer-right .accommodation-reservation {
    margin-top: 12px !important;
  }
}

/* §113i — Desktop nav-links white-on-white when scrolled (1.07:1) */
@media (min-width: 992px) {
  html body header.default13.fr-header--scrolled .navbar-nav .nav-link,
  html body header.default13.fr-header--scrolled .nav-link {
    color: #1a1a1a !important;
  }
  html body header.default13.fr-header--scrolled .navbar-nav .nav-link:hover {
    color: #b8a800 !important;
  }
}

/* §113j — Mobile: WYŁĄCZ scrolled-state shrink (klientka v1.70.1 feedback)
   Problem: gdy mobile user scrolluje, body dostaje .fr-header--scrolled class →
   navbar min-height: 64→56px (shrink -8px) ALE hamburger (h=49, top=12)
   nie zmienia się → bottom=61 > nowa header height 57 → wystaje 4px.
   Fix: na mobile (≤991px) zachowaj 64px navbar regardless of scroll.
   Logo: 32px constant na mobile (NIE rośnie do 40px scrolled state). */
@media (max-width: 991.98px) {
  html body header.default13.fr-header--scrolled .navbar,
  html body header.default13.fr-header--scrolled nav.navbar {
    min-height: 64px !important;
    padding: 8px 16px !important;
  }
  html body header.default13.fr-header--scrolled .menu-wrapper {
    height: auto !important;
  }
  html body header.default13.fr-header--scrolled .navbar-brand img,
  html body header.default13.fr-header--scrolled .logo img {
    height: 32px !important;
    max-height: 32px !important;
  }
}

/* §113k — /offer/N sidebar .offer-price chip — balon 150x150 → estetyczny prostokąt
   Pre: border-radius:50% + flex-column + flex-wrap:wrap + line-height:45px
        = kolisty chip 150x150 z "od" / "217,80" / "zl" w 3 liniach (estetyka słaba)
   Post: rounded rectangle (12px), horizontal layout, "od 217,80 zł" w jednej linii.
   Wymiary: 293x64 (na 390 viewport), kompaktowo i czytelnie.
   Klientka feedback: "zeby cena była równa w polu". */
html body .offer-right div.offer-price,
html body div.offer-right-top .offer-price {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 64px !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin-top: 4px !important;
  margin-bottom: 20px !important;
}
html body .offer-right div.offer-price small,
html body div.offer-right-top .offer-price small {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  opacity: 0.7 !important;
}
html body .offer-right div.offer-price span,
html body div.offer-right-top .offer-price span {
  display: inline-block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* §113l — /offer/N sidebar "ZAREZERWUJ TERAZ" button + linki — spacing
   pełniejszy touch target dla "Sprawdź dostępność" i "Zobacz cennik" (44x44 WCAG). */
html body .offer-right .accommodation-reservation {
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  padding: 16px 24px !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
}
html body .offer-right a.offerCalendar.mt-3,
html body .offer-right a.to-offer-prices.mt-3 {
  display: block !important;
  text-align: center !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  min-height: 44px !important;
  line-height: 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* §113m — Image cropping iPhone-safe (klientka: "kadrowanie inne na iPhone vs Android")
   Diagnoza: system IdoBooking renderuje 49 obrazów apartamentu z object-fit: fill
   (browser default). Slick carousel + a[href*="/offer/"] containers maja explicit
   width/height ale brak object-fit declaration → STRETCH default.
   Na iPhone Safari (DPR=3) renderowanie aspect-ratio dla img bez width/height attrs
   moze byc inne niz Android Chrome (DPR=2-2.5). Wynik: rozne kadrowanie zdjec.
   Fix: force object-fit: cover + object-position: center → identyczne na wszystkich
   urzadzeniach, proporcjonalne przyciecie (no stretch). */
html body .slick-slide img,
html body .slick-track img,
html body .container-hotspot img,
html body .ido-hot-spot img,
html body .offer img,
html body .gallery img,
html body .offer__box img,
html body a[href*="/offer/"] img,
html body .object-icon img,
html body main .pictures img,
html body main .object-gallery img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* §113n — Homepage mobile menu open: text-shadow halo (klientka v1.70.1)
   Pre: na body.page-index (homepage) nav-link ma text-shadow rgba(0,0,0,0.6) 0 2px 6px
        — to dla czytelności tekstu nad hero photo (default state, header transparent).
   Problem: gdy klient otwiera menu na mobile, .navbar-collapse pokazuje się NA BIAŁYM
   tle (nie na photo) — text-shadow nadal aplikuje i tworzy widoczne halo wokół liter.
   Na podstronach (np. /offers) text-shadow nie aplikuje bo selector ma `body.page-index`,
   więc menu open wygląda OK.
   Fix: na mobile (≤991px) gdy nav-link jest w .navbar-collapse / #navbar / .navbar-nav
   (czyli menu otwarty container), force text-shadow: none. Wyższa specificity (3 classes
   + 5 elements + !important) bije pierwszą regułę (4 classes + 4 elements). */
@media (max-width: 991.98px) {
  html body.page-index header.default13 .navbar-collapse .nav-link,
  html body.page-index header.default13 .navbar-collapse a,
  html body.page-index header.default13 #navbar .nav-link,
  html body.page-index header.default13 #navbar a,
  html body.page-index header.default13 .navbar-nav .nav-link,
  html body.page-index header.default13 .navbar-nav a {
    text-shadow: none !important;
  }
}

/* §113o — /offer/N sidebar sections spacing (klientka v1.70.1)
   Pre: 5 sekcji .offer-right w sidebar (chip+cta, Gwarancja benefits, Płatności+VISA,
        mapa, sticky bottom CTA) majA identyczne styling (24px 20px padding, 12px radius,
        cream bg, 1px border) ALE margin 0 → DOTYKAJA się (gaps 0/0/70/10px).
        Klientka: "żeby siebie nie dotykały, miały normalne przestrzenie".
   Post: unified 16px gap między każdą kolejną .offer-right sekcją.
        Reset Bootstrap mb-5 (3rem=48px) na 0, sterowanie przez adjacent sibling rule.
        Sticky bottom CTA: 24px gap od mapy (większy breathing). */
html body .offer-top .offer-right + .offer-right,
html body .offer-wrapper .offer-right + .offer-right {
  margin-top: 16px !important;
}
html body .offer-top .offer-right.mb-5,
html body .offer-wrapper .offer-right.mb-5 {
  margin-bottom: 0 !important;
}
html body .offer-top .offer-right.offer-right-bottom,
html body .offer-wrapper .offer-right.offer-right-bottom {
  margin-top: 24px !important;
}

/* §113p — REMOVED v1.70.3 (klientka rollback: cena się przesuwala poza chip
   po wymuszeniu height: 56px + radius pill). Zostawiamy §113k chip wymiary
   (prostokąt h=64 radius 12px) + system-style ZAREZERWUJ button (h=48 pill).
   Klientka: "wróćmy do poprzedniej wersji przycisku". */

/* §113q — "ZOBACZ NA MAPIE" 16px gap od mapy (user feedback Uwagi_3)
   Button #generateDirections jest w .directions container pod mapa Leaflet.
   Pre: margin-top: 0 → button dotyka mapy. Post: 16px breathing. */
html body a#generateDirections,
html body a.btn.btn-reverse#generateDirections,
html body .directions a#generateDirections {
  margin-top: 16px !important;
}

/* §113r — Logo + flagi WIDOCZNE przy menu open (klientka Uwagi_3 #3c)
   Cytat klientki: "Prosiłabym o zostawienie widocznego logotypu i wybory wersji
   językowych przy rozwiniętym menu. Znikanie może powodować dezorientację".
   Revert v1.69 decyzji która ukrywała logo przy menu open.
   Logo NIE może być ukrywane gdy aria-expanded="true" na hamburgerze. */
@media (max-width: 991.98px) {
  html body header.default13 .navbar-brand,
  html body header.default13 a.navbar-brand,
  html body header.default13 .logo {
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Override v1.55 :has(.navbar-toggler[aria-expanded="true"]) hide rule */
  html body header.default13:has(.navbar-toggler[aria-expanded="true"]) .navbar-brand,
  html body header.default13:has(.navbar-toggler[aria-expanded="true"]) .logo {
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Language flags visibility on menu open */
  html body header.default13 #language_menu,
  html body header.default13 .page-top__language,
  html body header.default13:has(.navbar-toggler[aria-expanded="true"]) #language_menu,
  html body header.default13:has(.navbar-toggler[aria-expanded="true"]) .page-top__language {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   §FR-CLIENT. Styles by Fair Rentals (klient — nie modyfikowac)
   Dodane przez klienta, zachowujemy w kazdej wersji CSS.
   Last sync: 2026-05-18 (v1.49)
   ════════════════════════════════════════════════════════════ */
/* ***************************** */
/* Styles by Fair Rentals */
@media (min-width: 979px) {
.page-offer .offer-wrapper {
       padding: 15px 15px 0 0 !important
}
}

.page-offer .offer-right.payment-info .payment-info-desc {
text-align: left !important}

.page-offer .offer-wrapper {
padding-bottom: 10px !important}

.page-offer .offer-right-bottom {
margin-top: 10px !important}

.page-offer .addonsList li {
padding-bottom: 0 !important;
margin-bottom: 0 !important}

.amenities_list {
margin-bottom: 10px !important}

.amenities_list > li {
padding-bottom: 10px !important;
margin-bottom: 0 !important}

@media (min-width: 979px) {
.tabs__item>span:after {
height: 3px !important}
}

.tabs {
padding-top: 30px !important}

.fr-narrative__split:nth-child(even) {
grid-template-columns: 1fr}

@media (min-width: 979px) {
.fr-narrative__split:nth-child(even) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important}
}

.footer.container .footer .footer__social_media {
flex-direction: row !important}

html body.page-contact [class*="--bank"] {
margin-top: 0 !important}

html body.page-contact [class*="--bank"] > li {
flex-direction: column;
margin-bottom: 10px}

html body.page-contact [class*="--bank"] > li span:first-child {
width: 100%;
font-weight: 400}

html body.page-contact [class*="--bank"] > li span:last-child {
font-weight: 800;
color: var(--fr-text-dark) !important}

html body.page-contact .contact__locations {
margin: 10px 0 !important;
padding: 20px 10px}

html body.page-contact .contact__locations .contact__item strong {
font-size: 1.4rem !important;
line-height: 1.3 !important;
}

html body.page-contact .contact__locations .contact__item .d-block {
	font-size: 13px;
}

html body.page-contact .contact__locations .contact__links {
	flex-direction: column;
}

html body.page-contact .contact__locations .contact__links a:first-child {
margin-bottom: 5px !important;
}

html body.page-contact .contact__locations .contact__links a:first-child:hover,
html body.page-contact .contact__locations .contact__links a:last-child:hover {
	color: #c8bd00 !important;
}

html body.page-contact .contact__locations .contact__links a:last-child {
margin: 0 !important;
border: 0 !important}

html body.page-contact .fr-google-map-wrap {
display: none !important}

@media (min-width: 1200px) {
html body.page-contact .contact__locations {
grid-template-columns: 50% auto !important}
}

.fr-apartments .fr-apt-price span {
color: var(--fr-light-gray) !important}

.fr-apartments .fr-apt-feature span {
color: var(--fr-light-gray) !important}

#backTop:hover {
	background: #806C00;
    border: 1px solid #806C00;
}
.footer__social_media li a .icon:before {
	color: #fff;
}
#navbar {
	border-top: 0 !important;
}
/* END §FR-CLIENT */