/*
 * Mapa osiedla - oznaczenie statusow lokali.
 * Oryginalny arkusz domy-pro-*.css zna tylko "sprzedany" (przygaszony przycisk);
 * rezerwacja nie byla nigdzie widoczna.
 */

/* Dostepny: zielony. Bazowy kolor przyciskow byl piaskowy - ten sam co sprzedane,
   tylko jasniejszy, wiec statusy zlewaly sie ze soba. */
.house-button:not(.sold):not(.reserved) {
    background-color: #497F59;
    color: #fff;
}

.house-button:not(.sold):not(.reserved):hover {
    background-color: #3E7150;
}

/* Rezerwacja: klikalna, ale wyraznie odrozniona od wolnych lokali. */
.house-button.reserved {
    background-color: #E78A45;
    /* Bialy napis na tej pomaranczy dawal kontrast 2,59 — mocno ponizej progu
       WCAG AA. Ciemny daje 7,06 i pasuje do statusu "sprzedany", ktory juz
       ma ciemny napis na jasnej pomaranczy. */
    color: var(--ink, #151515);
    box-shadow: 0 0 0 3px rgba(231, 138, 69, 0.28);
}

.house-button.reserved:hover {
    background-color: #d47a38;
}

/* Sprzedany - to samo przygaszenie co w oryginale, tylko nazwane wprost. */
.house-button.sold {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

/* --- legenda --------------------------------------------------------- */

.b104-mapa-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    /* Legenda laduje na zdjeciu osiedla - bez wlasnego tla tekst ginie. */
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 1.25rem auto 0;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    font-family: var(--font, "Poppins", system-ui, sans-serif);
    font-size: 0.9rem;
    color: #151515;
    position: relative;
    z-index: 5;
}

.b104-mapa-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.b104-mapa-legenda i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.b104-mapa-legenda .lg-dostepny { background: #497F59; }
.b104-mapa-legenda .lg-rezerwacja { background: #E78A45; }
.b104-mapa-legenda .lg-sprzedany { background: #FFD49B; opacity: 0.5; }

/* Status w panelu domu - obok ceny. */
.dom-status {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    vertical-align: middle;
}

.dom-status.rezerwacja {
    background: #FDF1E0;
    color: #8a5210;
}

.dom-status.sprzedany {
    background: #FDECEA;
    color: #8a1c13;
}

@media (max-width: 600px) {
    .b104-mapa-legenda {
        gap: 0.85rem;
        font-size: 0.82rem;
    }
}

/* --- Wciagniete z arkusza wtyczki WordPressa domy-pro (assets/b104/domy-pro-6de84658.css).
   Przeniesione tutaj, zeby sekcja CMS nie siegala juz do katalogu po WordPressie. --- */
#domy-container {

position: relative;

width: 100%;

background: none;   /* plan jest teraz zwyklym <img> w srodku, patrz nizej */

height: auto; /* Dostosuj wysokość do swojego obrazu tła */

overflow: hidden;

}


.dom-buy-section {

display: flex;

justify-content: space-between; /* Rozdziela elementy w sekcji */

align-items: center; /* Wyrównanie w pionie */

margin-top: 10px; /* Opcjonalny margines na odseparowanie sekcji */

}

.dom-button-buy {

width: 170px;

text-align: center;

height: auto;

background: #FDE6C8;

color: #000;

border-radius: 8px;

padding: 10px 15px;

font-size: 16px;

font-family: 'Poppins', sans-serif;

cursor: pointer;

text-decoration: none;

}

.dom-button-description {

color: var(--white, #FFF);

font-family: 'Poppins', sans-serif;

font-size: 16px; /* Rozmiar czcionki zgodny z oczekiwaniem */

font-weight: 500;

cursor: pointer;

text-align: right; /* Wyrównanie tekstu w samym elemencie */

}

.dom-button-description {

color: var(--white, #FFF);

font-family: 'Poppins', sans-serif;

font-size: 16px; /* Zmniejszono rozmiar czcionki z 24px na 16px */

font-style: normal;

font-weight: 500;

line-height: normal;

margin-left: 10px;

cursor: pointer;

text-align: right; /* Upewnienie się, że tekst jest wyrównany do prawej */

}

/* Styl dla ceny w panelu - wyśrodkowana pod metrazem i pokojami */
#domy-panel .dom-cena {
    color: var(--white, #FFF);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-top: 8px;
}

/* Upewniamy się, że dom-info jest wyśrodkowany */
#domy-panel .dom-info {
    text-align: center;
}

.dom-button-description:hover {

text-decoration: underline;

}

/* Stylizacja przycisku domu */

.house-button {

position: absolute;

transform: translate(-50%, -50%); /* Centrowanie przycisku względem punktu */

width: 45px;

height: 45px;

background-color: var(--secendory, #FFD49B); /* Nowy kolor tła */

color: var(--black, #151515); /* Nowy kolor tekstu */

border: none;

border-radius: 56px; /* Zmiana kształtu przycisku */

font-family: 'DM Serif Display'; /* Nowa typografia */

font-size: 14px; /* Rozmiar tekstu */

font-style: normal;

font-weight: 400;

line-height: normal;

cursor: pointer;

text-decoration: none;

display: flex;

align-items: center;

justify-content: center;

transition: background-color 0.3s ease, transform 0.3s ease;

z-index: 500; /* Upewnij się, że przyciski są nad innymi elementami */

}

.house-button:hover {

background-color: #eb7e2b; /* Zmieniono kolor tła na hover */

transform: translate(-50%, -50%) scale(1.1); /* Powiększenie przycisku */

}

.house-button.active {

background-color: #024562; /* Zmieniono kolor tła aktywnego przycisku */

}

.house-button.disabled {

opacity: 0.5;

pointer-events: none;

cursor: default;

}

/* Responsywne Pozycjonowanie Przyciski */

@media screen and (max-width: 1200px) {

.house-button {

width: 50px;

height: 50px;

font-size: 12px;

}

}

@media screen and (max-width: 768px) {

.house-button {

width: 28px !important;

height: 28px !important;

font-size: 9px !important;

}

.dom-button-description {

font-size: 14px !important; /* Zmniejszono rozmiar czcionki z 24px na 16px */

margin-top: 15px !important;

}

.dom-button-buy {

max-width: 130px !important;

}

}

@media screen and (max-width: 1024px) {

.house-button {

width: 40px;

height: 40px;

font-size: 12px;

}

}

@media screen and (max-width: 768px) {

.house-button {

width: 35px;

height: 35px;

font-size: 10px;

}

}

/* Stylizacja Panelu Domów */

#domy-panel {

position: absolute; /* Pozostawiono absolute, aby panel nie podążał za scrollowaniem */

top: 23px;

right: 0;

width: 45%;

height: 100%; /* Pełna wysokość kontenera */

background: rgba(79, 137, 96, 0.90); /* Zmieniono na żądany kolor */

box-shadow: -2px 0 5px rgba(0,0,0,0.2);

transition: transform 0.3s ease;

padding: 20px;

box-sizing: border-box;

z-index: 1000;

overflow: auto;

transform: translateX(100%); /* Domyślnie schowany poza kontenerem */

}

#domy-panel.active {

transform: translateX(0); /* Widoczny panel */

}

.dom-pietro, .dom-parter {

color: white !important;

}

/* Przycisk zamknięcia panelu */

#domy-panel .dom-close-button {

display: block;

background: none;

border: none;

font-size: 24px;

color: white;

cursor: pointer;

z-index: 1001; /* Nad dom-header */

}

/* Stylizacja Nagłówka Panelu */

#domy-panel .dom-header {

display: flex;

align-items: center;

margin-bottom: 10px;

justify-content: space-between;

}

#domy-panel .dom-header h2 {

margin: 0;

font-family: 'Poppins', sans-serif;

font-size: 28px;

font-style: normal;

font-weight: 500;

line-height: normal;

color: white;

}

#domy-panel .dom-header .dom-info {

display: flex;

align-items: center;

justify-content: center;

font-family: 'Poppins', sans-serif;

font-size: 16px;

font-style: normal;

font-weight: 400;

line-height: normal;

color: white;

}

/* Metraż i pokoje w jednej linii, z separatorem */

#domy-panel .dom-metraz::after {

content: " | ";

margin: 0 5px;

}

/* Stylizacja Przyciski Kupna */

#domy-panel .dom-button-buy {

display: inline-block;

text-align: center;

padding: 10px;

margin-top: 20px; /* Dodano margines od góry, aby przycisk był pod zdjęciem */

font-size: 18px;

color: #000; /* Czarny kolor tekstu */

text-decoration: none;

border-radius: 8px; /* Zmieniono border-radius */

background: #FDE6C8; /* Zmieniono kolor tła */

cursor: pointer;

transition: background 0.3s ease, color 0.3s ease;

}

#domy-panel .dom-button-buy:hover {

background: #eb7e2b !important; /* Zmieniono kolor tła na hover */

}

#domy-panel .dom-button-buy.sold {

cursor: default;

pointer-events: none;

background: #777 !important;

}

/* Stylizacja Przełączników Parter/Piętro */

#domy-panel .dom-image {

text-align: center;

background: #fff; /* Białe tło pod obrazkiem */

padding: 10px;

border-radius: 10px;

position: relative; /* Aby umożliwić pozycjonowanie toggle-floor */

}

/* Przełączniki wewnątrz dom-image */

#domy-panel .dom-image .dom-toggle-floor {

position: absolute;

bottom: 10px; /* Przeniesiono do dolnej części */

left: 10px; /* Ustawiono na lewą stronę */

background: rgba(255, 255, 255, 0.8); /* Przezroczyste tło dla lepszej widoczności */

padding: 5px 10px;

border-radius: 5px;

display: flex;

gap: 10px;

}

#domy-panel .dom-toggle-floor button {

width: 85px;

height: 40px;

padding: 0;

border: none;

cursor: pointer;

border-radius: 8px; /* Zmieniono border-radius */

background: #B0ACAC; /* Zmieniono tło na nieaktywne */

font-size: 14px;

font-weight: 400;

line-height: 30px; /* aby tekst był wyśrodkowany pionowo */

text-align: center;

transition: background 0.3s ease, font-weight 0.3s ease;

}

#domy-panel .dom-toggle-floor button.active {

background: #6EB47E; /* Zmieniono tło na aktywne */

color: white;

font-family: 'Poppins', sans-serif;

border-radius: 8px;

}

#domy-panel .dom-image img {

max-width: 40%;

height: auto;

margin-bottom: 10px; /* Dodano margines na dole, aby odseparować obraz od przycisku kupna */

}

/* Dodatkowe stylizacje, jeśli potrzebne */

#domy-container .disabled {

opacity: 0.5;

pointer-events: none;

cursor: default;

}

/* Wersja mobilna */

@media (max-width: 768px) {

#domy-panel {

width: 100%;

height: 75% !important; /* Pełna wysokość kontenera */

transform: translateX(100%);

}

#domy-panel.active {

transform: translateX(0);

}

#domy-panel .dom-header h2 {

font-size: 20px;

}

#domy-panel .dom-button-buy {

font-size: 14px !important;

padding: 8px;

}

#domy-panel .dom-toggle-floor button {

width: 60px;

height: 28px;

font-size: 12px;

}

#domy-panel .dom-image img {

max-width: 80%;

}

/* Dostosowanie Przyciski Domów na Mniejszych Ekranach */

.house-button {

width: 33px;

height: 33px;

font-size: 10px;

}

/* Przełączanie między parter a piętro w mobile */

#domy-panel .dom-toggle-floor {

position: absolute;

bottom: 10px; /* Upewnienie się, że przełączniki są na dole */

left: 10px;

}

/* Przycisk zamknięcia w mobile */

#domy-panel .dom-close-button {

font-size: 20px;

}

/* Wyśrodkowanie przycisku opisu po usunięciu przycisku "Zapytaj o cenę" */
.dom-buy-section {
    justify-content: center !important;
}

/* NOWE - Responsive layout dla mobilnych - nagłówek w osobnych liniach */
    #domy-panel .dom-header {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    
    #domy-panel .dom-name {
        display: block;
        text-align: center;
        margin-bottom: 8px;
        order: 1;
    }
    
    #domy-panel .dom-info {
        display: block;
        text-align: center;
        margin-bottom: 8px;
        order: 2;
    }
    
    #domy-panel .dom-cena {
        display: block;
        text-align: center;
        margin-top: 0;
        order: 3;
    }

}

/* Dla desktopa - zachowanie dotychczasowego układu */
@media (min-width: 769px) {
    #domy-panel .dom-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* --- b104: plan osiedla jako obraz, nie tlo ---
   Kontener mial `height:800px` i `background-size:cover`: przy zwezaniu okna
   obraz byl przycinany po bokach, a przyciski domow (ustawione w procentach
   kontenera) przestawaly pokrywac sie z domami. Obraz w srodku nadaje
   kontenerowi swoje proporcje, wiec procenty trafiaja w to samo miejsce
   niezaleznie od szerokosci ekranu. */
.b104-map-plan{display:block;width:100%;height:auto}

/* --- b104: przyciski skaluja sie razem z planem ---
   Wczesniej przycisk mial staly rozmiar (45 px, na telefonie 28 px), wiec przy
   waskim ekranie zajmowal 13% wysokosci planu i szesnascie kolek zakrywalo
   rysunek. Teraz rozmiar liczy sie z szerokosci samego planu (jednostki `cqw`),
   czyli tak samo proporcjonalnie na kazdym ekranie. Dolna granica 22 px, zeby
   dalo sie w nie trafic palcem, gorna 45 px — tyle mialy na komputerze.

   `!important` jest konieczne: odziedziczony arkusz wtyczki ustawia rozmiary
   w kilku zapytaniach medialnych, takze z `!important`. */
#domy-container{container-type:inline-size}
.house-button{
  width:clamp(22px, 3.2cqw, 45px) !important;
  height:clamp(22px, 3.2cqw, 45px) !important;
  font-size:clamp(9px, 1.05cqw, 14px) !important;
}
.b104-map-wskazowka{display:none}
.b104-map-przewijak{overflow-x:visible}

/* --- b104: plan na telefonie szerszy niz ekran ---
   Przy 375 px plan mial 375x211 px: domy byly nieczytelne, a szesnascie
   znacznikow zachodzilo na siebie (najblizsza para 7A-7B dzielilo 15 px przy
   rozmiarze znacznika 24 px). Ponizej 769 px plan zostaje wiec szerszy niz
   ekran i przewija sie w bok palcem.

   900 px dobrane z pomiaru: znaczniki licza rozmiar z szerokosci planu
   (`3.2cqw`), wiec przy 900 px maja ~29 px, a 7A-7B dzieli ~36 px — czyli
   przestaja na siebie zachodzic i da sie w nie trafic palcem. */
@media (max-width: 768px) {
  .b104-map-przewijak{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }
  /* Plan 1150 px, ale pokazujemy tylko srodek: lewe 6% i prawe 14% to sama
     trawa bez domow. Ramka ma wiec 1150 - 69 - 161 = 920 px, a plan jest
     w niej przesuniety o -69 px. Znaczniki licza pozycje w procentach
     SZEROKOSCI PLANU, wiec zostaja tam, gdzie byly — nic nie trzeba
     przeliczac ani migrowac w bazie.
     Przy 1150 px znacznik ma ~37 px, a najblizsza para (7A-7B) 46 px. */
  .b104-map-kadr{
    width:920px;
    overflow:hidden;
  }
  .b104-map-kadr #domy-container{
    width:1150px;
    max-width:none;
    margin-left:-69px;
  }
  /* Wskazowka ma zostac na ekranie, kiedy plan jedzie w bok. */
  .b104-map-wskazowka{
    display:block;
    position:sticky;
    left:0;
    width:max-content;
    max-width:100%;
    /* padding, nie margin: przy position:sticky z left:0 margines z lewej
       nie odsuwa tekstu od krawedzi ekranu. */
    margin:0 0 .5rem;
    padding-left:1rem;
    font-size:13px;
    color:var(--muted, #69727d);
  }
}

/* --- b104: czcionka numerow domow ---
   Przyciski dziedziczyly "DM Serif Display" — krój ozdobny, w kółku 22-45 px
   praktycznie nieczytelny. Do wyboru cztery wyraźnie różne kroje, wszystkie
   z dysku (`/assets/fonts/`), bez zapytań do Google. Deklaracja @font-face nie
   pobiera pliku, dopóki krój nie zostanie użyty, więc trzy niewybrane nic nie
   kosztują. Wielkie litery + odstęp, bo "1A" czyta się lepiej niż "1a". */
/* @font-face dla tych krojow siedzi w site.css — sa uzywane takze
   w sekcji "03. Domy", a site.css laduje sie na kazdej stronie. */

.house-button{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:700 !important;
  font-variant-numeric:lining-nums tabular-nums;
}
.b104-map--waska .house-button{font-family:'Roboto Condensed', 'Poppins', sans-serif !important}
.b104-map--techniczna .house-button{font-family:'Share Tech Mono', monospace !important; font-weight:400 !important}
.b104-map--maszynowa .house-button{font-family:'JetBrains Mono', monospace !important}
.b104-map--strony .house-button{font-family:'Poppins', sans-serif !important}
.b104-map--czytelna .house-button{font-family:'Inter', 'Poppins', sans-serif !important}
.b104-map--rysunkowa .house-button{font-family:'IBM Plex Mono', monospace !important}
.b104-map--szeryfowa .house-button{font-family:'Source Serif 4', Georgia, serif !important}