/* ==========================================================================
   OSIEDLE RUMIANKOWA - THEMEFOREST GRADE REAL ESTATE STYLESHEET
   Plik: css/styles.css
   ========================================================================== */

/* --- 1. ZMIENNE CSS & DESIGN SYSTEM --- */
:root {
  /* Dynamiczny kolor wiodący z fallbackiem */
  --primary: #4e7a5a;
  --primary-hover: #3d6147;
  --primary-soft: rgba(78, 122, 90, 0.08);
  --gold: #c5a880;
  
  /* Ciemne tła i powierzchnie */
  --dark-900: #0d131a;
  --dark-800: #161f28;
  --dark-700: #232f3e;
  
  /* Odcienie tekstu i szarości */
  --text-body: #475569;
  --text-muted: #94a3b8;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;

  /* Typografia */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Promienie & Cienie */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;

  --shadow-subtle: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 20px 30px -10px rgba(15, 23, 42, 0.12);
  --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. BAZA & TYPOGRAFIA --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background-color: #ffffff;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title {
  color: var(--dark-900);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.font-serif {
  font-family: var(--font-serif);
}

section {
  padding: 100px 0;
  position: relative;
}

/* --- 3. NAWIGACJA (NAVBAR) --- */
#mainNav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 18px 0;
  transition: var(--transition);
}

.navbar-brand {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--primary) !important;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.navbar-brand span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  font-weight: 700;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-700) !important;
  padding: 8px 16px !important;
  transition: var(--transition);
  position: relative;
}

.nav-link:hover {
  color: var(--primary) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
}

.nav-link:hover::after {
  width: 60%;
}

/* Warianty tła paska nawigacji z konfiguratora */
#mainNav.nav-bg-glass {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#mainNav.nav-bg-glass .nav-link { color: #1e293b !important; }

#mainNav.nav-bg-white {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
#mainNav.nav-bg-white .nav-link { color: #1e293b !important; }

#mainNav.nav-bg-dark {
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b;
}
#mainNav.nav-bg-dark .nav-link,
#mainNav.nav-bg-dark .navbar-brand { color: #ffffff !important; }

#mainNav.nav-bg-transparent {
  background: transparent !important;
  border: none;
  box-shadow: none;
}
#mainNav.nav-bg-transparent .nav-link,
#mainNav.nav-bg-transparent .navbar-brand {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Rozszerzone warianty nawigacji z konfiguratora */
#mainNav.nav-bg-accent {
  background: var(--primary) !important;
  border-bottom: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
#mainNav.nav-bg-accent .nav-link,
#mainNav.nav-bg-accent .navbar-brand { color: #ffffff !important; }
#mainNav.nav-bg-accent .nav-link:hover { color: rgba(255, 255, 255, 0.82) !important; }
#mainNav.nav-bg-accent .nav-link::after { background: #ffffff; }

#mainNav.nav-bg-gradient {
  background: linear-gradient(120deg, var(--dark-900) 0%, var(--primary) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#mainNav.nav-bg-gradient .nav-link,
#mainNav.nav-bg-gradient .navbar-brand {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#mainNav.nav-bg-gradient .nav-link::after { background: #ffffff; }

/* --- 3c. POZYCJA NAWIGACJI (fixed / sticky / static / floating) ----------
   Pozycją sterują wyłącznie własne klasy (id + klasa), dlatego wybór w
   konfiguratorze wygrywa także z regułami motywów.
------------------------------------------------------------------------ */
#mainNav.nav-pos-fixed,
#mainNav.nav-pos-floating {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: auto;
  z-index: 1030;
}

#mainNav.nav-pos-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Pasek przewijany razem z treścią — hero przestaje być pod nim schowane. */
#mainNav.nav-pos-static {
  position: static;
  top: auto;
  z-index: 30;
}

/* Pływająca "wyspa": odsunięta od krawędzi, zaokrąglona, z cieniem. */
#mainNav.nav-pos-floating {
  left: 50%;
  right: auto;
  top: 16px;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 32px));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.3);
}

/* Zapas miejsca, gdy pasek nie jest już przypięty do okna. */
#mainNav.nav-pos-static + .hero-slider-wrapper,
#mainNav.nav-pos-static + header {
  min-height: 78vh;
}

/* Kotwice nie chowają się pod przyklejonym paskiem. */
section[id],
header[id],
div[id^="dostepne"] {
  scroll-margin-top: 96px;
}

/* --- 3d. WIELKOŚĆ / GĘSTOŚĆ NAWIGACJI ----------------------------------- */
#mainNav.nav-size-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}
#mainNav.nav-size-compact .navbar-brand { font-size: 1.1rem; }
#mainNav.nav-size-compact .navbar-brand span { font-size: 0.64rem; }
#mainNav.nav-size-compact .nav-link {
  padding: 6px 12px !important;
  font-size: 0.85rem;
}

#mainNav.nav-size-normal {
  padding-top: 16px;
  padding-bottom: 16px;
}

#mainNav.nav-size-spacious {
  padding-top: 26px;
  padding-bottom: 26px;
}
#mainNav.nav-size-spacious .navbar-brand { font-size: 1.55rem; }
#mainNav.nav-size-spacious .navbar-brand span { font-size: 0.78rem; }
#mainNav.nav-size-spacious .nav-link {
  padding: 12px 22px !important;
  font-size: 0.95rem;
}

/* --- 3e. UKŁAD NAWIGACJI (desktop). Na mobile pasek zawsze korzysta z
   bezpiecznego układu jednorzędowego + panelu hamburgera. ----------------- */
@media (min-width: 992px) {
  /* 1. Klasyczny: logo po lewej, menu po prawej. */
  #mainNav.nav-layout-split .navbar-collapse { justify-content: flex-end !important; }
  #mainNav.nav-layout-split .navbar-nav { margin-left: auto !important; }

  /* 2. Odwrócony: menu po lewej, logo po prawej. */
  #mainNav.nav-layout-links-left > .container { flex-direction: row-reverse; }
  #mainNav.nav-layout-links-left .navbar-collapse { justify-content: flex-start !important; }
  #mainNav.nav-layout-links-left .navbar-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* !important: marka ma klasę .text-start z Bootstrapa (text-align:left !important). */
  #mainNav.nav-layout-links-left .navbar-brand { text-align: right !important; }

  /* 3. Wyśrodkowany: logo nad wyśrodkowanym menu (dwa rzędy). */
  #mainNav.nav-layout-centered > .container {
    flex-wrap: wrap;
    justify-content: center;
  }
  #mainNav.nav-layout-centered .navbar-brand {
    order: 1;
    flex: 0 0 100%;
    margin: 0 auto 2px;
    /* !important: nadpisuje .text-start{text-align:left!important} z Bootstrapa. */
    text-align: center !important;
  }
  #mainNav.nav-layout-centered .navbar-collapse {
    order: 2;
    flex: 0 0 100%;
    justify-content: center !important;
  }
  #mainNav.nav-layout-centered .navbar-nav {
    width: 100%;
    margin: 4px auto 0 !important;
    justify-content: center;
  }

  /* 4. Pigułka: menu zamknięte w zaokrąglonej kapsule po prawej. */
  #mainNav.nav-layout-pill .navbar-collapse { justify-content: flex-end !important; }
  #mainNav.nav-layout-pill .navbar-nav {
    margin-left: auto !important;
    gap: 2px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.09);
  }
  #mainNav.nav-layout-pill .navbar-nav .nav-link {
    border-radius: 999px;
    padding: 9px 18px !important;
  }
  #mainNav.nav-layout-pill .navbar-nav .nav-link::after { display: none; }
  #mainNav.nav-layout-pill .navbar-nav .nav-link:hover { background: rgba(15, 23, 42, 0.06); }
  /* Ciemne warianty tła: kapsuła w jasnej tonacji. */
  #mainNav.nav-layout-pill.nav-bg-dark .navbar-nav,
  #mainNav.nav-layout-pill.nav-bg-accent .navbar-nav,
  #mainNav.nav-layout-pill.nav-bg-gradient .navbar-nav,
  #mainNav.nav-layout-pill.nav-bg-transparent .navbar-nav {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
  }
  #mainNav.nav-layout-pill.nav-bg-dark .navbar-nav .nav-link:hover,
  #mainNav.nav-layout-pill.nav-bg-accent .navbar-nav .nav-link:hover,
  #mainNav.nav-layout-pill.nav-bg-gradient .navbar-nav .nav-link:hover,
  #mainNav.nav-layout-pill.nav-bg-transparent .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* 5. Kapsuła: cały pasek (logo + menu) w zaokrąglonej ramce. */
  #mainNav.nav-layout-boxed > .container {
    max-width: 1180px;
    padding-left: 28px;
    padding-right: 28px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12);
  }
  #mainNav.nav-layout-boxed .navbar-collapse { justify-content: flex-end !important; }
  #mainNav.nav-layout-boxed .navbar-nav { margin-left: auto !important; }
  #mainNav.nav-layout-boxed.nav-bg-dark > .container,
  #mainNav.nav-layout-boxed.nav-bg-accent > .container,
  #mainNav.nav-layout-boxed.nav-bg-gradient > .container,
  #mainNav.nav-layout-boxed.nav-bg-transparent > .container {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  }
}

/* --- 4. HERO FULLSCREEN SLIDER Z PRZENIKANIEM (CROSS-FADE) --- */
.hero-slider-wrapper {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f172a;
}

.hero-slider-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.4s ease-in-out, transform 7s ease-out;
  pointer-events: none;
}

.hero-slide-item.active {
  opacity: 1;
  transform: scale(1.08);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    180deg, 
    rgba(15, 23, 42, 0.35) 0%, 
    rgba(15, 23, 42, 0.05) 50%, 
    rgba(15, 23, 42, 0.40) 100%
  );
  pointer-events: none;
}

/* Warianty nakładki Hero */
.hero-slider-wrapper.overlay-none .hero-overlay { display: none !important; }
.hero-slider-wrapper.overlay-light .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.35) 100%) !important;
}
.hero-slider-wrapper.overlay-dark .hero-overlay {
  background: rgba(15, 23, 42, 0.65) !important;
}

/* Warianty nakładki Hero — nowe efekty panelu konfiguratora */
.hero-slider-wrapper.overlay-warm .hero-overlay {
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.45) 0%, rgba(69, 26, 3, 0.18) 50%, rgba(41, 21, 3, 0.55) 100%) !important;
}
.hero-slider-wrapper.overlay-warm .hero-slide-item {
  filter: sepia(0.45) saturate(1.15) contrast(1.02);
}
.hero-slider-wrapper.overlay-brand .hero-overlay {
  background: var(--primary, #4e7a5a) !important;
  opacity: 0.42;
}
.hero-slider-wrapper.overlay-mono .hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.32) 50%, rgba(15, 23, 42, 0.62) 100%) !important;
}
.hero-slider-wrapper.overlay-mono .hero-slide-item {
  filter: grayscale(100%) contrast(1.08) brightness(0.95);
}
.hero-slider-wrapper.overlay-spotlight .hero-overlay {
  background: radial-gradient(circle at 50% 42%, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 55%, rgba(15, 23, 42, 0.80) 100%) !important;
}

.hero-content-container {
  position: relative;
  z-index: 3;
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-family: var(--font-serif);
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 20px;
  line-height: 1.1;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: #f8fafc !important;
  max-width: 650px;
  margin: 0 auto 35px;
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.btn-luxury {
  background: var(--primary);
  color: #ffffff !important;
  padding: 16px 36px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 25px rgba(78, 122, 90, 0.4);
  transition: var(--transition);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-block;
}

.btn-luxury:hover {
  background: var(--primary-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(78, 122, 90, 0.5);
}

.hero-dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 32px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-dot.active {
  background: #ffffff;
  width: 48px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* --- 5. OPIS INWESTYCJI --- */
#opisinwestycji {
  background: #ffffff;
}

.opnier {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 50px;
  position: relative;
  max-height: 320px;
  overflow: hidden;
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
}

.opnier:not(.hidebef)::after {
  content: "Kliknij, aby przeczytać pełny opis inwestycji ↓";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px 0 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.98) 80%);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
}

.opnier.hidebef {
  max-height: 2500px;
  cursor: default;
}

.opnier.hidebef::after {
  display: none;
}

/* --- 6. GALERIA --- */
#galeria {
  background: var(--bg-light);
}

.galitem {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #0f172a;
}

.galitem a {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  position: relative;
}

.galitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  cursor: pointer;
}

.galitem:hover img {
  transform: scale(1.06);
  opacity: 0.92;
}

.galitem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  color: #ffffff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.galitem:hover .galitem-overlay {
  opacity: 1;
}

/* Układ 1: Bento Grid (Zdjęcie wiodące + klocki) */
.galery-layout-bento .galery {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 220px;
  gap: 16px;
}
.galery-layout-bento .galitem:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.galery-layout-bento .galitem:nth-child(2) {
  grid-column: span 2;
}
@media (max-width: 991px) {
  .galery-layout-bento .galery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 200px;
  }
  .galery-layout-bento .galitem:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .galery-layout-bento .galitem:nth-child(2) {
    grid-column: span 2;
  }
}

/* Układ 2: Czysta Siatka (Równe 3 kolumny) */
.galery-layout-grid .galery {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}
.galery-layout-grid .galitem a {
  height: 280px;
}
@media (max-width: 991px) {
  .galery-layout-grid .galery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 576px) {
  .galery-layout-grid .galery {
    grid-template-columns: 1fr !important;
  }
}

/* Układ 3: Panoramiczny Strip (Przewijana taśma) */
.galery-layout-strip .galery {
  display: flex !important;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-snap-type: x mandatory;
}
.galery-layout-strip .galitem {
  flex: 0 0 380px;
  scroll-snap-align: start;
}
.galery-layout-strip .galitem a {
  height: 380px;
}

/* --- 7. OKOLICA & INFRASTRUKTURA --- */
.okolica-section {
  position: relative;
  color: #ffffff;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
}

#okolica.section-hidden {
  display: none !important;
}

/* Układ 1: Nowoczesne Karty Akcentowane (Modern Cards) */
.okolica-layout-modern .okolica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.okolica-layout-modern .okolica-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.okolica-layout-modern .okolica-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.okolica-layout-modern .card-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(78, 122, 90, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.okolica-layout-modern .card-icon-wrap svg {
  stroke: var(--primary);
}
.okolica-layout-modern .dist-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.okolica-layout-modern .dist-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-900);
}

/* Układ 2: Listwy Horyzontalne (Pill Rows) */
.okolica-layout-rows .okolica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.okolica-layout-rows .okolica-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 50px;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  color: var(--dark-900);
}
.okolica-layout-rows .card-icon-wrap {
  font-size: 1.4rem;
  color: var(--primary);
  margin-right: 16px;
}
.okolica-layout-rows .card-icon-wrap svg {
  stroke: var(--primary);
}
.okolica-layout-rows .card-body-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.okolica-layout-rows .dist-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}
.okolica-layout-rows .dist-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}

/* Układ 3: Ciemne Szkło Cyber-Glass */
.okolica-layout-glass .okolica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.okolica-layout-glass .okolica-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.okolica-layout-glass .card-icon-wrap {
  font-size: 2rem;
  color: #38bdf8;
  margin-bottom: 14px;
}
.okolica-layout-glass .card-icon-wrap svg {
  stroke: #38bdf8;
}
.okolica-layout-glass .dist-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 6px;
}
.okolica-layout-glass .dist-val {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
}

/* Układ 4: Oś Czasu (Timeline) */
.okolica-layout-timeline .okolica-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 34px;
}
.okolica-layout-timeline .okolica-grid::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.okolica-layout-timeline .okolica-card {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--dark-900);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.okolica-layout-timeline .okolica-card::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary, #4e7a5a);
  border: 3px solid #ffffff;
}
.okolica-layout-timeline .card-icon-wrap {
  font-size: 1.5rem;
  color: var(--primary, #4e7a5a);
  flex-shrink: 0;
}
.okolica-layout-timeline .card-icon-wrap svg { stroke: var(--primary, #4e7a5a); }
.okolica-layout-timeline .card-body-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}
.okolica-layout-timeline .dist-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}
.okolica-layout-timeline .dist-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary, #4e7a5a);
}

/* Układ 5: Duże Ikony na Górze */
.okolica-layout-icons-top .okolica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.okolica-layout-icons-top .okolica-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 34px 22px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.okolica-layout-icons-top .card-icon-wrap {
  font-size: 2.6rem;
  color: #ffffff;
  margin-bottom: 16px;
}
.okolica-layout-icons-top .card-icon-wrap svg { stroke: #ffffff; width: 42px; height: 42px; }
.okolica-layout-icons-top .card-body-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.okolica-layout-icons-top .dist-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}
.okolica-layout-icons-top .dist-val {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
}
@media (max-width: 991px) {
  .okolica-layout-icons-top .okolica-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .okolica-layout-icons-top .okolica-grid { grid-template-columns: 1fr; }
}

/* Układ 6: Obramowane Karty */
.okolica-layout-bordered .okolica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.okolica-layout-bordered .okolica-card {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  padding: 28px 22px;
  color: #ffffff;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.okolica-layout-bordered .okolica-card:hover {
  border-color: var(--primary, #4e7a5a);
  background: rgba(255, 255, 255, 0.06);
}
.okolica-layout-bordered .card-icon-wrap {
  font-size: 1.8rem;
  color: var(--primary, #4e7a5a);
  margin-bottom: 14px;
}
.okolica-layout-bordered .card-icon-wrap svg { stroke: var(--primary, #4e7a5a); }
.okolica-layout-bordered .dist-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}
.okolica-layout-bordered .dist-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
}
@media (max-width: 991px) {
  .okolica-layout-bordered .okolica-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .okolica-layout-bordered .okolica-grid { grid-template-columns: 1fr; }
}

/* Układ 7: Split Ciemny (Pół na pół) */
.okolica-layout-split .okolica-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.okolica-layout-split .okolica-card {
  background: rgba(15, 23, 42, 0.72);
  border-left: 4px solid var(--primary, #4e7a5a);
  border-radius: 12px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #ffffff;
}
.okolica-layout-split .card-icon-wrap {
  font-size: 2rem;
  color: var(--primary, #4e7a5a);
  flex-shrink: 0;
}
.okolica-layout-split .card-icon-wrap svg { stroke: var(--primary, #4e7a5a); }
.okolica-layout-split .card-body-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}
.okolica-layout-split .dist-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.okolica-layout-split .dist-val {
  font-size: 1.9rem;
  font-weight: 800;
  color: #ffffff;
}
@media (max-width: 768px) {
  .okolica-layout-split .okolica-grid { grid-template-columns: 1fr; }
}

/* --- 8. TABELA DOSTĘPNYCH LOKALI (ZWARTA I RESPONSYWNA) --- */
#dostepnemieszkania {
  background: #ffffff;
}

.table-luxury-wrapper {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--border-color);
  width: 100%;
  overflow-x: auto;
  margin-bottom: 2rem;
}

.table-luxury-wrapper table.table {
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0;
  table-layout: auto;
  font-size: 0.82rem;
  vertical-align: middle;
}

.table-luxury-wrapper table th {
  background: var(--dark-900);
  color: #ffffff;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 6px !important;
  border: none;
  white-space: nowrap;
  font-weight: 600;
  vertical-align: middle;
}

.table-luxury-wrapper table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.table-luxury-wrapper table tbody tr:hover {
  background-color: var(--primary-soft);
}

.table-luxury-wrapper table td {
  padding: 10px 5px !important;
  font-size: 0.85rem;
  color: var(--dark-700);
  vertical-align: middle;
  line-height: 1.35;
  white-space: normal;
}

.table-luxury-wrapper table td.col-address {
  max-width: 160px;
  text-align: left;
  font-size: 0.8rem;
  padding-left: 12px !important;
}

.table-luxury-wrapper table td.col-parking {
  max-width: 120px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.table-luxury-wrapper table td.col-price {
  white-space: nowrap !important;
  font-weight: 700;
}

.badge-status {
  padding: 4px 8px !important;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.68rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
}

.status-available {
  background: #dcfce7;
  color: #15803d;
}

.status-sold {
  background: #fee2e2;
  color: #b91c1c;
}

.status-reserved {
  background: #fef3c7;
  color: #b45309;
}

.btn-table-action {
  padding: 5px 10px !important;
  border-radius: var(--radius-sm);
  font-size: 0.74rem !important;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  display: inline-block;
  white-space: nowrap;
}

.btn-table-action.btn-active {
  background: var(--primary);
  color: #ffffff !important;
}

.btn-table-action.btn-active:hover {
  background: var(--primary-hover);
}

.btn-table-action.btn-disabled {
  background: #e2e8f0;
  color: #94a3b8 !important;
  pointer-events: none;
}

@media (min-width: 1200px) {
  .table-luxury-wrapper {
    overflow-x: hidden !important;
  }
}

/* --- 9. UDOGODNIENIA INWESTYCJI --- */
#udogodnienia {
  background: var(--bg-light);
}

/* Wariant 1: Nowoczesny Slider ze strzałkami */
.slideshow-wrapper {
  max-width: 780px;
  margin: 0 auto;
}

.slideshow-container {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: 55px 40px;
  position: relative;
  text-align: center;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.slide-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--dark-900) !important;
  line-height: 1.4;
  margin: 0;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--dark-900);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.1rem;
}

.slide-arrow:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.slide-arrow.prev { left: 16px; }
.slide-arrow.next { right: 16px; }

.udogodnienia-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  margin: 0 5px;
  cursor: pointer;
  transition: var(--transition);
}

.udogodnienia-dots .dot.active {
  background: var(--primary);
  width: 28px;
  border-radius: 10px;
}

/* Wariant 2: Siatka kafelków (Grid) */
.udogodnienia-layout-grid .slideshow-wrapper { display: none !important; }
.udogodnienia-grid-view { display: none; }
.udogodnienia-layout-grid .udogodnienia-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.udogodnienia-grid-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 35px 24px;
  text-align: center;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.udogodnienia-grid-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.grid-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}

.udogodnienia-grid-card h5 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-900);
  margin: 0;
}

/* Wariant 3: Minimalistyczna lista */
.udogodnienia-layout-list .slideshow-wrapper { display: none !important; }
.udogodnienia-list-view { display: none; }
.udogodnienia-layout-list .udogodnienia-list-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
}

.udogodnienia-list-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-left: 6px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-subtle);
}

.list-item-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.list-item-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-700);
}

/* Wariant 4: Numerowane Karty */
.udogodnienia-layout-cards .slideshow-wrapper { display: none !important; }
.udogodnienia-layout-cards .udogodnienia-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  counter-reset: udog;
}
.udogodnienia-layout-cards .udogodnienia-grid-card {
  counter-increment: udog;
  position: relative;
  text-align: left;
  padding: 30px 24px;
}
.udogodnienia-layout-cards .udogodnienia-grid-card::before {
  content: counter(udog, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-soft, rgba(78, 122, 90, 0.12));
}
.udogodnienia-layout-cards .grid-card-icon {
  margin: 0 0 16px;
}

/* Wariant 5: Oś Czasu (Timeline) */
.udogodnienia-layout-timeline .slideshow-wrapper { display: none !important; }
.udogodnienia-layout-timeline .udogodnienia-list-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 34px;
}
.udogodnienia-layout-timeline .udogodnienia-list-view::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--border-color, #e2e8f0);
}
.udogodnienia-layout-timeline .udogodnienia-list-item {
  position: relative;
  border: none;
  border-left: none;
  border-radius: 12px;
  margin-bottom: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-subtle, 0 4px 20px rgba(15, 23, 42, 0.05));
}
.udogodnienia-layout-timeline .udogodnienia-list-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary, #4e7a5a);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--border-color, #e2e8f0);
}

/* Wariant 6: Duży Baner */
.udogodnienia-layout-banner .slideshow-wrapper {
  display: block !important;
  max-width: 100%;
}
.udogodnienia-layout-banner .slideshow-container {
  background: linear-gradient(135deg, var(--primary, #4e7a5a) 0%, var(--dark-900, #0f172a) 100%);
  border: none;
  padding: 70px 40px;
  min-height: 280px;
}
.udogodnienia-layout-banner .slide-icon-circle {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.udogodnienia-layout-banner .slide-title {
  color: #ffffff !important;
  font-size: 1.9rem !important;
}

/* Wariant 7: Split Dwukolumnowy */
.udogodnienia-layout-split .slideshow-wrapper { display: none !important; }
.udogodnienia-layout-split .udogodnienia-grid-view {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  background: #ffffff;
}
.udogodnienia-layout-split .udogodnienia-grid-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding: 28px 26px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.udogodnienia-layout-split .udogodnienia-grid-card:nth-child(odd) {
  border-right: 1px solid var(--border-color, #e2e8f0);
}
.udogodnienia-layout-split .grid-card-icon {
  margin: 0;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .udogodnienia-layout-split .udogodnienia-grid-view { grid-template-columns: 1fr; }
  .udogodnienia-layout-split .udogodnienia-grid-card:nth-child(odd) { border-right: none; }
}

/* --- 10. STOPKA (FOOTER) --- */
.elegant-footer {
  background: var(--dark-900);
  color: var(--text-muted);
  padding-top: 90px;
  border-top: 1px solid var(--dark-800);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--dark-800);
}

.footer-section h3 {
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 12px;
}

.footer-section ul li a,
.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.92rem;
}

.footer-section ul li a:hover,
.footer-links a:hover {
  color: #ffffff;
  padding-left: 6px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  color: #cbd5e1;
}

.contact-item i {
  color: var(--gold);
  margin-top: 5px;
  font-size: 1rem;
}

.footer-bottom {
  background: #070b0f;
  padding: 24px 0;
  font-size: 0.85rem;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* --- 10b. WARIANTY WYGLĄDU STOPKI (KONFIGURATOR) --- */
/* 1. Ciemny Klasyk (footer-style-dark) — bazowy wygląd, bez nadpisań. */

/* 2. Jasna Stopka */
.elegant-footer.footer-style-light {
  background: #f6f8f7;
  color: #475569;
  border-top: 1px solid #e2e8f0;
}
.elegant-footer.footer-style-light .footer-content { border-bottom-color: #e2e8f0; }
.elegant-footer.footer-style-light .footer-section h3 { color: #0f172a; }
.elegant-footer.footer-style-light .footer-section h3::after { background: var(--primary); }
.elegant-footer.footer-style-light .footer-section ul li a,
.elegant-footer.footer-style-light .footer-links a { color: #64748b; }
.elegant-footer.footer-style-light .footer-section ul li a:hover,
.elegant-footer.footer-style-light .footer-links a:hover { color: var(--primary); }
.elegant-footer.footer-style-light .contact-item { color: #475569; }
.elegant-footer.footer-style-light .contact-item i { color: var(--primary); }
.elegant-footer.footer-style-light .footer-bottom { background: #eceff1; }
.elegant-footer.footer-style-light .footer-bottom .text-white-50 { color: #475569 !important; }
.elegant-footer.footer-style-light .footer-bottom a.text-white { color: #0f172a !important; }

/* 3. Pas Akcentu */
.elegant-footer.footer-style-accent {
  background: var(--dark-900);
  border-top: 4px solid var(--primary);
}
.elegant-footer.footer-style-accent .footer-section h3::after {
  background: var(--primary);
  width: 48px;
}
.elegant-footer.footer-style-accent .contact-item i { color: var(--primary); }

/* 4. Gradient Premium */
.elegant-footer.footer-style-gradient {
  background: linear-gradient(180deg, var(--dark-900) 0%, #05090d 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 5. Minimalistyczna (Kompakt) */
.elegant-footer.footer-style-minimal {
  padding-top: 56px;
  background: var(--dark-900);
  border-top: 1px solid var(--dark-800);
}
.elegant-footer.footer-style-minimal .footer-content {
  gap: 32px;
  padding-bottom: 36px;
}
.elegant-footer.footer-style-minimal .footer-section h3 {
  margin-bottom: 16px;
  padding-bottom: 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}
.elegant-footer.footer-style-minimal .footer-section h3::after { display: none; }
.elegant-footer.footer-style-minimal .footer-section ul li { margin-bottom: 8px; }
.elegant-footer.footer-style-minimal .contact-item { margin-bottom: 10px; }

/* 6. Karty Sekcji (Glass) */
.elegant-footer.footer-style-cards {
  background: var(--dark-900);
  border-top: 1px solid var(--dark-800);
}
.elegant-footer.footer-style-cards .footer-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 26px;
  transition: var(--transition);
}
.elegant-footer.footer-style-cards .footer-section:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--primary);
  transform: translateY(-4px);
}
.elegant-footer.footer-style-cards .footer-section h3::after { background: var(--primary); }

/* --- 11. SCROLL TO TOP --- */
.scroll-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: var(--transition);
  z-index: 1000;
}

.scroll-to-top:hover {
  background: var(--primary-hover);
  transform: translateY(-4px);
}

/* --- 12. RESPONSYWNOŚĆ --- */
@media (max-width: 991px) {
  #mainNav .navbar-collapse {
    background: #ffffff;
    padding: 24px;
    border-radius: var(--radius-md);
    margin-top: 15px;
    box-shadow: var(--shadow-hover);
  }
  .opnier {
    padding: 30px 20px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 60px 0;
  }
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  /* Stopka — pojedyncza kolumna na wąskich ekranach (wszystkie warianty) */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  .elegant-footer.footer-style-cards .footer-section { padding: 22px 20px; }
  .elegant-footer.footer-style-minimal .footer-content { gap: 26px; padding-bottom: 30px; }
}


/* ==========================================================================
   SEKCJA I MODAL INTERAKTYWNEJ MAPY OSIEDLA
   ========================================================================== */
.wizualizacja-section {
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-luxury-3d {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--primary);
  color: #ffffff !important;
  padding: 14px 34px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 20px var(--primary-soft);
  transition: var(--transition);
}

.btn-luxury-3d:hover {
  background: var(--primary-hover);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary);
  color: #ffffff !important;
}

.btn-luxury-3d .btn-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Stylistyka modalu */
.modal-wizualizacja .modal-content {
  height: 100vh;
}

.modal-wizualizacja .modal-header {
  background: #0d131a !important;
  border-bottom: 1px solid #1e293b !important;
}

.modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.iframe-loader {
  z-index: 0;
}


/* ==========================================================================
   WARIANTY MAPY OSIEDLA (PANEL KONFIGURATORA)
   ========================================================================== */
#wizualizacja.section-hidden {
  display: none !important;
}

/* Domyślnie ukrywamy widoki alternatywne */
.wizualizacja-view-banner,
.wizualizacja-view-card,
.wizualizacja-view-direct {
  display: none;
}

/* Wariant 1: Baner Pełny */
.wizualizacja-layout-banner .wizualizacja-view-banner {
  display: block;
}

/* Wariant 2: Karta 2-kolumnowa */
.wizualizacja-layout-card .wizualizacja-view-card {
  display: block;
}
.wizualizacja-preview-card {
  height: 380px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wizualizacja-preview-card:hover {
  transform: translateY(-6px) scale(1.02);
}
.preview-card-glass {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.wizualizacja-preview-card:hover .preview-card-glass {
  background: rgba(15, 23, 42, 0.35);
}
.preview-play-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 30px var(--primary);
  transition: transform 0.3s;
}
.wizualizacja-preview-card:hover .preview-play-btn {
  transform: scale(1.15);
}

/* Wariant 3: Mapa osadzona bezpośrednio */
.wizualizacja-layout-direct .wizualizacja-view-direct {
  display: block;
}
.direct-iframe-container {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Warianty 4-7: Nowe efekty panelu konfiguratora */
.wizualizacja-layout-hero .wizualizacja-view-banner,
.wizualizacja-layout-minimal .wizualizacja-view-banner {
  display: block;
}
.wizualizacja-layout-split .wizualizacja-view-card,
.wizualizacja-layout-glass .wizualizacja-view-card {
  display: block;
}

/* Wariant 4: Hero z Poświatą */
.wizualizacja-layout-hero .wizualizacja-view-banner .display-5 {
  text-shadow: 0 0 34px rgba(78, 122, 90, 0.65);
}
.wizualizacja-layout-hero .btn-luxury-3d {
  box-shadow: 0 0 45px var(--primary, #4e7a5a);
}

/* Wariant 5: Split (Treść / Podgląd) */
.wizualizacja-layout-split .wizualizacja-preview-card {
  height: 100%;
  min-height: 420px;
}

/* Wariant 6: Szklana Karta */
.wizualizacja-layout-glass .wizualizacja-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.wizualizacja-layout-glass .preview-card-glass {
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(20px);
}

/* Wariant 7: Minimalny Pasek */
.wizualizacja-layout-minimal .wizualizacja-view-banner {
  padding: 10px 0;
}
.wizualizacja-layout-minimal .wizualizacja-view-banner .lead {
  display: none;
}


/* ==========================================================================
   PERFEKCYJNA GALERIA FOTOGRAFICZNA (RESPONSYWNA & MODUŁOWA)
   ========================================================================== */
.galeria-section {
  background-color: var(--bg-light, #f8fafc);
  overflow: hidden;
}

.galery-wrapper {
  width: 100%;
}

/* Karta pojedynczego zdjęcia */
.galitem {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background: #0d131a;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.galitem:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.16);
}

.galitem a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  aspect-ratio: 4 / 3;
}

.galitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.galitem:hover img {
  transform: scale(1.08);
  filter: brightness(0.92);
}

/* Luksusowy overlay z ikoną lupy */
.galitem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(13, 19, 26, 0.1) 0%, rgba(13, 19, 26, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.overlay-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--dark-900, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.galitem:hover .galitem-overlay {
  opacity: 1;
}

.galitem:hover .overlay-icon {
  transform: scale(1);
  color: var(--primary, #4e7a5a);
}

/* --------------------------------------------------------------------------
   WARIANTY UKŁADU STEROWANE PRZEZ KONFIGURATOR
   -------------------------------------------------------------------------- */

/* WARIANT 1: Bento Editorial Showcase (Wiodący kadr z lewej) */
.galery-layout-bento .galery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.galery-layout-bento .galitem:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.galery-layout-bento .galitem:nth-child(1) a {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
}

@media (max-width: 991px) {
  .galery-layout-bento .galery {
    grid-template-columns: repeat(2, 1fr);
  }
  .galery-layout-bento .galitem:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .galery-layout-bento .galitem:nth-child(1) a {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 576px) {
  .galery-layout-bento .galery {
    grid-template-columns: 1fr;
  }
  .galery-layout-bento .galitem:nth-child(1) {
    grid-column: span 1;
  }
}

/* WARIANT 2: Czysta Siatka Architektoniczna (Classic 3-Columns) */
.galery-layout-grid .galery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .galery-layout-grid .galery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .galery-layout-grid .galery {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* WARIANT 3: Panoramiczny Strip (Przewijana taśma panoramiczna) */
.galery-layout-strip .galery {
  display: flex !important;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 5px 25px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.galery-layout-strip .galitem {
  flex: 0 0 380px;
  scroll-snap-align: start;
}

.galery-layout-strip .galitem a {
  aspect-ratio: 16 / 10;
}

@media (max-width: 768px) {
  .galery-layout-strip .galitem {
    flex: 0 0 85vw;
  }
}

/* WARIANT 4: Smart Masonry / Auto-Grid (Zrównoważony) */
.galery-layout-smart .galery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.galery-layout-smart .galitem a {
  aspect-ratio: 4 / 3;
}

/* WARIANT 5: Masonry (Kaskada kolumn) */
.galery-layout-masonry .galery {
  display: block !important;
  column-count: 3;
  column-gap: 20px;
}
.galery-layout-masonry .galitem {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}
.galery-layout-masonry .galitem a {
  aspect-ratio: auto;
  height: auto;
}
.galery-layout-masonry .galitem img {
  height: auto;
}
@media (max-width: 991px) {
  .galery-layout-masonry .galery { column-count: 2; }
}
@media (max-width: 576px) {
  .galery-layout-masonry .galery { column-count: 1; }
}

/* WARIANT 6: Mozaika (Równe kafle 2 kolumny) */
.galery-layout-mosaic .galery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.galery-layout-mosaic .galitem a {
  aspect-ratio: 1 / 1;
}
@media (max-width: 576px) {
  .galery-layout-mosaic .galery { grid-template-columns: 1fr; }
}

/* WARIANT 7: Karuzela (Scroll-Snap) */
.galery-layout-carousel .galery {
  display: flex !important;
  gap: 22px;
  overflow-x: auto;
  padding: 10px 5px 25px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.galery-layout-carousel .galitem {
  flex: 0 0 520px;
  scroll-snap-align: center;
}
.galery-layout-carousel .galitem a {
  aspect-ratio: 3 / 2;
}
@media (max-width: 768px) {
  .galery-layout-carousel .galitem { flex: 0 0 90vw; }
}

/* WARIANT 8: Polaroid (Ramki z przekrzywieniem) */
.galery-layout-polaroid .galery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px 0 40px;
}
.galery-layout-polaroid .galitem {
  background: #ffffff;
  padding: 12px 12px 44px;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}
.galery-layout-polaroid .galitem:nth-child(odd) { transform: rotate(-2deg); }
.galery-layout-polaroid .galitem:nth-child(even) { transform: rotate(2deg); }
.galery-layout-polaroid .galitem:hover { transform: rotate(0deg) translateY(-6px); }
.galery-layout-polaroid .galitem a { aspect-ratio: 1 / 1; }
@media (max-width: 991px) {
  .galery-layout-polaroid .galery { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 576px) {
  .galery-layout-polaroid .galery { grid-template-columns: 1fr; }
}


/* Gwarantowana widoczność i płynne przejście slajdów bez kolizji z Bootstrapem */
.mySlides {
  width: 100%;
  transition: opacity 0.4s ease-in-out;
}

.mySlides.slide-fade {
  animation: slideFadeAnim 0.4s ease-in-out;
}

@keyframes slideFadeAnim {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-content {
  width: 100%;
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  visibility: visible !important;
}

.slide-title {
  color: #0f172a !important; /* Czysty, głęboki grafit/czerń */
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ==========================================================================
   OPIS INWESTYCJI - WARIANTY UKŁADU & ZWIJANIE
   ========================================================================== */
#opisinwestycji.section-hidden {
  display: none !important;
}

.opis-section {
  background: #ffffff;
}

.opnier-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-body, #475569);
}

.opnier-content p:last-child {
  margin-bottom: 0;
}

/* Wariant 1: Rozwijana karta z mgiełką (Fold Card) */
.opis-layout-fold .opnier {
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  padding: 40px 45px 65px;
  position: relative;
  max-height: 280px;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: var(--shadow-subtle, 0 4px 20px -2px rgba(15, 23, 42, 0.05));
  user-select: none;
}

.opis-layout-fold .opnier:hover {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.opis-layout-fold .opnier:not(.hidebef)::after {
  content: "Kliknij, aby przeczytać pełny opis inwestycji ↓";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 70px 0 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.98) 75%);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary, #4e7a5a);
}

/* Rozwinięty stan fold card */
.opis-layout-fold .opnier.hidebef {
  max-height: 4000px;
  padding-bottom: 40px;
}

.opis-layout-fold .opnier.hidebef::after {
  display: none;
}

/* Wariant 2: Pełny Magazynowy Editorial (Full) */
.opis-layout-full .opnier {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-height: none !important;
  cursor: default;
  overflow: visible;
  user-select: text;
}

.opis-layout-full .opnier::after {
  display: none !important;
}

.opis-layout-full .opnier-content {
  font-size: 1.15rem;
  line-height: 1.95;
  color: #334155;
}

.opis-layout-full .opnier-content > p:first-of-type::first-letter {
  font-family: var(--font-title, serif);
  font-size: 3.5rem;
  float: left;
  line-height: 0.85;
  margin-right: 14px;
  color: var(--primary, #4e7a5a);
  font-weight: 700;
}

/* Wariant 3: Dwukolumnowy Split (Columns) */
.opis-layout-columns .opnier {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-height: none !important;
  cursor: default;
  overflow: visible;
  user-select: text;
}

.opis-layout-columns .opnier::after {
  display: none !important;
}

.opis-layout-columns .opnier-content {
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid var(--border-color, #e2e8f0);
  text-align: justify;
}

@media (max-width: 768px) {
  .opis-layout-fold .opnier {
    padding: 25px 20px 55px;
  }
  .opis-layout-columns .opnier-content {
    column-count: 1;
    column-rule: none;
    text-align: left;
  }
}

/* Warianty 4-7: Nowe efekty panelu konfiguratora */
/* Wspólny reset dla układów zawsze rozwiniętych */
.opis-layout-magazine .opnier,
.opis-layout-highlight .opnier,
.opis-layout-quote .opnier {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-height: none !important;
  cursor: default;
  overflow: visible;
  user-select: text;
}
.opis-layout-magazine .opnier::after,
.opis-layout-highlight .opnier::after,
.opis-layout-quote .opnier::after {
  display: none !important;
}

/* Wariant 4: Editorial Magazynowy (wąska kolumna z leadem) */
.opis-layout-magazine .opnier-content {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.12rem;
  line-height: 1.95;
  color: #334155;
}
.opis-layout-magazine .opnier-content > p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.75;
  font-weight: 500;
  color: var(--dark-900, #0f172a);
}

/* Wariant 5: Akcent Boczny (listwy) */
.opis-layout-highlight .opnier-content p {
  border-left: 4px solid var(--primary, #4e7a5a);
  padding-left: 20px;
  margin-bottom: 1.35rem;
}

/* Wariant 6: Pull-Quote (cytat otwierający) */
.opis-layout-quote .opnier-content {
  max-width: 820px;
  margin: 0 auto;
}
.opis-layout-quote .opnier-content > p:first-of-type {
  font-family: var(--font-serif, serif);
  font-size: 1.55rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--dark-900, #0f172a);
  border-left: 5px solid var(--primary, #4e7a5a);
  padding: 4px 0 4px 24px;
  margin-bottom: 1.6rem;
}

/* Wariant 7: Karta z Tłem (wyróżniona) */
.opis-layout-box .opnier {
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  padding: 42px 46px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  max-height: none !important;
  cursor: default;
  overflow: visible;
  user-select: text;
}
.opis-layout-box .opnier::after { display: none !important; }
.opis-layout-box .opnier-content { font-size: 1.06rem; line-height: 1.9; }

@media (max-width: 768px) {
  .opis-layout-box .opnier { padding: 26px 20px; }
}


/* ==========================================================================
   LOKALIZACJA W PRAKTYCE: SZTYWNE 3 NA GÓRZE, 3 NA DOLE (2x3)
   ========================================================================== */
.okolica-layout-modern .okolica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Dokładnie 3 w rzędzie */
  gap: 24px;
}

/* Responsywność dla układu 3x2 */
@media (max-width: 991px) {
  .okolica-layout-modern .okolica-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tabletach */
    gap: 18px;
  }
}

@media (max-width: 576px) {
  .okolica-layout-modern .okolica-grid {
    grid-template-columns: 1fr; /* 1 kolumna na telefonach */
    gap: 14px;
  }
}

/* ==========================================================================
   GALERIA: DOMYŚLNA RÓWNA SIATKA
   ========================================================================== */
/* Czysta Siatka 3 Kolumny (Równe proporcje kadrów) */
.galery-layout-grid .galery {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
}

.galery-layout-grid .galitem a {
  aspect-ratio: 4 / 3;
}

@media (max-width: 991px) {
  .galery-layout-grid .galery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .galery-layout-grid .galery {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}

/* Wymuszone ukrywanie sekcji Mapy */
#lokalizacja.section-hidden,
section#lokalizacja.section-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   POPRAWKI DLA WERSJI MOBILNEJ (SMARTFONY & TABLETY)
   ========================================================================== */

/* 1. Hamburger menu – wyraźny i biały na ciemnym pasku */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 6px 10px !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

/* Wymuszenie białego koloru ikonki hamburgera na ciemnych motywach */
.navbar-toggler-icon,
.nav-bg-dark .navbar-toggler-icon,
#mainNav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Rozwijane menu na telefonie */
@media (max-width: 991px) {
  #mainNav .navbar-collapse {
    background: #0f172a !important; /* Spójne z ciemnym tłem paska */
    padding: 20px !important;
    border-radius: 14px !important;
    margin-top: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
  }

  #mainNav .navbar-collapse .nav-link {
    color: #ffffff !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* Jasne warianty paska (szklany/biały): ciemna ikonka hamburgera i jasny panel menu.
   Bez tego biały pasek miał niewidoczną ikonkę, a rozwijane menu było ciemne. */
@media (max-width: 991px) {
  #mainNav.nav-bg-glass .navbar-toggler,
  #mainNav.nav-bg-white .navbar-toggler {
    border-color: rgba(15, 23, 42, 0.25) !important;
  }
  #mainNav.nav-bg-glass .navbar-toggler-icon,
  #mainNav.nav-bg-white .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  #mainNav.nav-bg-glass .navbar-collapse,
  #mainNav.nav-bg-white .navbar-collapse {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18) !important;
  }
  #mainNav.nav-bg-glass .navbar-collapse .nav-link,
  #mainNav.nav-bg-white .navbar-collapse .nav-link {
    color: #0f172a !important;
    border-bottom-color: rgba(15, 23, 42, 0.07);
  }

  /* Pływająca wyspa na telefonie: minimalny odstęp od krawędzi ekranu. */
  #mainNav.nav-pos-floating {
    top: 8px;
    width: calc(100% - 16px);
    border-radius: 14px;
  }
}

/* Wizualizacja 3D: paralaksa tylko na większych ekranach (wydajność mobile). */
.wizualizacja-section {
  background-attachment: fixed;
}
@media (max-width: 991px) {
  .wizualizacja-section {
    background-attachment: scroll;
  }
}

/* 2. Naprawa białego bloku udogodnień i opisu na telefonach */
@media (max-width: 768px) {
  /* Odstępy sekcji – koniec z nachodzeniem na stopkę */
  section {
    padding: 50px 0 !important;
  }

  /* Slider Udogodnień na mobilce */
  .slideshow-wrapper {
    padding: 0 10px;
  }

  .slideshow-container {
    padding: 35px 20px !important;
    min-height: 180px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    margin: 15px auto !important;
  }

  .slide-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
  }

  .slide-title {
    color: #0f172a !important; /* Wyraźny, ciemny tekst wewnątrz białego kasetonu */
    font-size: 1.15rem !important;
    text-align: center !important;
  }

  .slide-icon-circle {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
  }

  .slide-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
  }

  .slide-arrow.prev { left: 8px !important; }
  .slide-arrow.next { right: 8px !important; }

  /* Rozwijany Opis Inwestycji na telefonie */
  .opis-layout-fold .opnier {
    padding: 24px 18px 55px !important;
    border-radius: 16px !important;
  }

  .opis-layout-fold .opnier-content {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* Wyśrodkowanie przycisku konfiguratora na dole ekranu */
  .demo-customizer-wrapper {
    left: 15px !important;
    bottom: 15px !important;
  }

  .demo-customizer-toggle {
    width: 46px !important;
    height: 46px !important;
    font-size: 0.9rem !important;
  }

  /* Szuflada konfiguratora dostosowana do małego ekranu */
  .demo-customizer-drawer {
    width: 85vw !important;
    left: -85vw;
  }
}

/* ==========================================================================
   PERFEKCYJNIE SCHOWANA SZUFLADA KONFIGURATORA (ZERO WYSTAJĄCYCH KRAWĘDZI)
   ========================================================================== */
.demo-customizer-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: 340px;
    max-width: 85vw; /* Bezpieczna szerokość na każdym ekranie */
    height: 100vh;
    height: 100dvh; /* Obsługa dynamic viewport height na smartfonach */
    background: #ffffff;
    box-shadow: none; /* Brak cienia, gdy jest zamknięta */
    display: flex;
    flex-direction: column;
    z-index: 1000000;
    transform: translateX(-100%); /* Zawsze chowa się w 100% swojej szerokości */
    visibility: hidden; /* Całkowicie niewidoczna dla ekranu i dotyku */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.35s, 
                box-shadow 0.35s ease;
}

/* Stan aktywny (otwarty) */
.demo-customizer-drawer.active {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25); /* Cień pojawia się tylko po wysunięciu */
}

/* Wersja mobilna */
@media (max-width: 768px) {
    .demo-customizer-drawer {
        width: 300px;
        max-width: 85vw;
    }
}

/* ==========================================================================
   STAŁY, NIEZMIENNY KOLOR PRZYCISKU HAMBURGERA
   ========================================================================== */
#mainNav .navbar-toggler,
.navbar-toggler {
  background-color: #0f172a !important; /* Stałe, eleganckie ciemnogranatowe tło */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px 11px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

#mainNav .navbar-toggler:hover,
#mainNav .navbar-toggler:focus {
  background-color: #1e293b !important;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Wymuszenie czysto białych pasków hamburgera zawsze, bez względu na motyw i klasy paska */
#mainNav .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.35em !important;
  height: 1.35em !important;
  display: inline-block;
  vertical-align: middle;
}


/* ==========================================================================
   PLANY & CENNIK - ELASTYCZNE WARIANTY UKŁADU
   ========================================================================== */
#dostepnemieszkania.section-hidden {
  display: none !important;
}

.cennik-section {
  background: #ffffff;
}

/* 1. WARIANT: TABELA KOMPAKTOWA (Czysta, gęsta, nowoczesna) */
.cennik-layout-compact .table-luxury-wrapper {
  display: block;
}
.cennik-layout-compact .cennik-cards-view {
  display: none !important;
}
.cennik-layout-compact .table th {
  padding: 10px 8px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.cennik-layout-compact .table td {
  padding: 8px 6px;
  font-size: 0.82rem;
}

/* 2. WARIANT: TABELA PRZESTRONNA (Duże odstępy, luksusowy charakter) */
.cennik-layout-spacious .table-luxury-wrapper {
  display: block;
}
.cennik-layout-spacious .cennik-cards-view {
  display: none !important;
}
.cennik-layout-spacious .table th {
  padding: 18px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.cennik-layout-spacious .table td {
  padding: 20px 16px;
  font-size: 0.98rem;
}
.cennik-layout-spacious .badge-status {
  padding: 6px 14px;
  font-size: 0.78rem;
}
.cennik-layout-spacious .btn-table-action {
  padding: 8px 18px;
  font-size: 0.84rem;
}

/* 3. WARIANT: SIATKA KART (Cards View) */
.cennik-layout-cards .table-luxury-wrapper,
.cennik-layout-cards .cennik-scroll-hint {
  display: none !important;
}
.cennik-layout-cards .cennik-cards-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.cennik-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cennik-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.12);
  border-color: var(--primary, #4e7a5a);
}

.cennik-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.card-address {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-900, #0f172a);
  margin-bottom: 14px;
}

.card-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--bg-light, #f8fafc);
  border-radius: 10px;
  font-size: 0.86rem;
  margin-bottom: 16px;
}

.card-price-row {
  margin-bottom: 18px;
}

.card-price-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary, #4e7a5a);
}

/* 4. WARIANT: TABELA ZEBRA (Naprzemienna) */
.cennik-layout-striped .table-luxury-wrapper {
  display: block;
}
.cennik-layout-striped .cennik-cards-view {
  display: none !important;
}
.cennik-layout-striped .table tbody tr:nth-child(even) {
  background: var(--bg-light, #f8fafc);
}
.cennik-layout-striped .table td,
.cennik-layout-striped .table th {
  padding: 12px;
}

/* 5. WARIANT: STICKY HEADER TABELI */
.cennik-layout-sticky .table-luxury-wrapper {
  display: block;
  overflow-x: auto;
  max-height: 70vh;
}
.cennik-layout-sticky .cennik-cards-view {
  display: none !important;
}
.cennik-layout-sticky .table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--primary, #4e7a5a);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.cennik-layout-sticky .table td,
.cennik-layout-sticky .table th {
  padding: 12px 14px;
}

/* 6. WARIANT: MINIMAL (Bez ramek) */
.cennik-layout-minimal .table-luxury-wrapper {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cennik-layout-minimal .cennik-cards-view {
  display: none !important;
}
.cennik-layout-minimal .table {
  border-collapse: collapse;
}
.cennik-layout-minimal .table thead th {
  border: none;
  border-bottom: 2px solid var(--dark-900, #0f172a);
  background: transparent;
  color: var(--dark-900, #0f172a);
}
.cennik-layout-minimal .table tbody td {
  border: none;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.cennik-layout-minimal .table tbody tr:hover {
  background: transparent;
}

/* 7. WARIANT: WYRÓŻNIONE KARTY (Dostępne) */
.cennik-layout-featured .table-luxury-wrapper,
.cennik-layout-featured .cennik-scroll-hint {
  display: none !important;
}
.cennik-layout-featured .cennik-cards-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.cennik-layout-featured .cennik-card {
  border-width: 2px;
}
.cennik-layout-featured .cennik-card:hover {
  border-color: var(--primary, #4e7a5a);
  transform: translateY(-6px) scale(1.01);
}
.cennik-layout-featured .status-available {
  box-shadow: 0 0 0 3px rgba(78, 122, 90, 0.18);
}