.pietro-mieszkania {background-color:;  margin-top:80px;   position: relative;top: -20px;width: 100%;height: auto; max-height: 855px;text-align:center;}
.pietro-mieszkania img {width: 1600px;max-height: 900px;max-width: 1600px;}
.pietro-mieszkania-mobilne {position: absolute;width:100px;height:600px;background-color:; top:24%;   }
.button-floor-mob {height: 60px;width: 60px; display: flex;justify-content: center;align-items: center;border-radius: 50%;border: 2px solid #d1c7bc;background-color:#102e4a;
color:#d1c7bc;font-size:20px;position:absolute;}
.ground-floor-mob {top:84%;right:15%;}
.fist-floor-mob {top:70%;right:15%;}
.second-floor-mob {top:56%;right:15%;}
.third-floor1-mob{top:42%;right:15%;}
.fourth-floor1-mob {top:28%;right:15%;}
.button-floor-mob:hover {color:#102e4a;background-color:#d1c7bc;}

/*PIĘTRA*/
.pietro-mieszkania div {position:absolute;opacity:0.5;}
.pietro-mieszkania a:hover div{background-color:#102e4a;opacity:0.3;}
.ground-floor {height:170px; width:1550px; top:596px; left:50px;
clip-path: polygon(1.2% 26%,65% 3%,88% 0%,91.7% 2%, 98.4% 13%, 98.4% 98%,98.4% 130%,1.2% 80%);background-color:;}
.fist-floor {height:192px; width:1550px; top:448px; left:50px;
clip-path: polygon(1.2% 57%,67% 4%,75% 0%,78% 7%,88% 1%,91.7% 16%,95% 14%, 98.4% 30%, 98.4% 90%,95% 82%,91.7% 81%,88% 78%,67% 79%, 1.2% 100%);}
.second-floor {height:260px; width:1550px; top:299px; left:50px;
clip-path: polygon(1.2% 68%,67% 6%,75% 0%,78% 9%,88% 1%,91.7% 20%,95% 17%, 98.4% 35%, 98.4% 80%,95% 67%,91.7% 70%,88% 57.5%,78% 63%,75% 58%,67% 61%, 1.2% 100%);}
.third-floor1 {height:180px; width:700px; top:300px; left:60px;
clip-path: polygon(1.2% 53%,60% 1%, 97% 38%, 1.2% 99%);}

.third-floor2 {height:202px; width:623px; top:148px; left:883px;
clip-path: polygon(0.8% 35%,53% 0%,60.9% 18%,85.3% 4%, 99.5% 50%, 99.5% 98%,95% 100%,85.3% 76.5%,60.9% 86.5%,53% 74.5%,0.8% 98%);}

.fourth-floor1 {height:175px; width:720px; top:225px; left:60px;
clip-path: polygon(1% 50%,45% 0%,61.5% 19%,68% 15%,74.3% 22.5%,74.3% 35%, 100% 80%,94% 82.5%,58.5% 45%,1.3% 98%);}

.fourth-floor2 {height:220px; width:620px; top:20px; left:880px;
clip-path: polygon(1% 42%,58% 0%,68% 29%,73% 26%,80.5% 47%,85% 44%, 99% 89%, 99% 100%,86% 61.5%,61.5% 75%,53.5% 58%,1% 90%);}


.mieszkania-tabela {align-content:flex-start;}
/* Kontener całej tabeli */
        .table-container {
            width: 100%;
            /*max-width: 1400px;*/
            margin: 0px auto;
            font-family: Arial, sans-serif;
        }

        /* Wspólny układ siatki dla nagłówka i wierszy - definiujemy 3 kolumny */
        .table-header, .table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr 2fr; /* Pierwsza kolumna szersza, reszta równa */
            padding: 12px;
            gap: 10px;
            align-items: center;
			color:#102e4a;
        }

        /* Styl nagłówka */
        .table-header {
            background-color: #d1c7bc;
            font-weight: bold;
            border-bottom: 3px solid #d1c7bc;
        }
		.table-header div, .table-row div {text-align:center;}
		

        /* Styl wiersza - teraz to zwykły znacznik <a>! */
        .table-row {
            color:#d1c7bc;
            text-decoration: none; /* Usuwamy podkreślenie linku */
            border-bottom: 2px solid #d1c7bc;
            transition: background-color 0.2s;
        }

        /* Efekt najechania na wiersz */
        .table-row:hover {
            background-color: #d1c7bc;
			border-bottom: 2px solid #102e4a;
        }
		        .table-row div {
				color:#d1c7bc;}
		        .table-row:hover div{
            color:#102e4a;
        }
#dane-tabela1 {display:none;}
.loading {position:relative;width:100%;margin:100px auto;text-align:center;}
.loading img {width:150px;}
.table-row .kolor-green {color: #2ecc71; /* Ładny zielony */}
.table-row .kolor-orange {color: #e67e22; /* Pomarańczowy dla miękkiej rezerwacji  */}
.table-row .kolor-gold {color: #e67e22; /* Złoty/Żółty dla rezerwacji color: #f1c40f;*/}
.table-row .kolor-red {color: #e74c3c; /* Czerwony dla sprzedanych i całej reszty */}
.mieszkania-linki-dopobrania {display: inline;margin-bottom:50px;}
.mieszkania-linki-dopobrania h5 {margin:10px 0px;}
.mieszkania-linki-dopobrania a {color:#d1c7bc;linki:#d1c7bc;}
.mieszkania-linki-dopobrania a:hover {color:#fff;linki:#fff;}
/*FILTR----------------------------------------*/
.panel-filtr {position:relative;width:calc(100%-60px);padding:0px 30px;display:flex;flex-wrap: wrap;margin-bottom:20px;}
.panel-filtr button {width:100px;height:40px;background-color:#d1c7bc;cursor:pointer;color:#102e4a;border-bottom: 2px solid #102e4a;}
.panel-filtr button:hover {background-color:#102e4a;color:#d1c7bc;border-bottom: 2px solid #d1c7bc;}
.panel-filtr h4 {width:100%;margin:10px 0px;}
    :root {
      --primary-color: #d1c7bc;
      --track-color: #d1c7bc;
    }
.wrapper {
      background:;   
      width: 400px;
	  margin:15px;
    }
.filtry-kontener {background:;height:200px;margin:15px;}
.filtry-button {display:flex;align-items:flex-end;}
/* Wyświetlanie aktualnych wartości pod tekstem */
    .price-input {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      font-size: 16px;
      font-weight: bold;
      color: #d1c7bc;
    }

    /* Kontener na suwaki */
    .slider-container {
      position: relative;
      height: 6px;
      background: #fff;
      border-radius: 3px;
    }

    /* Kolorowy pasek postępu pomiędzy suwakami */
    .slider-track {
      position: absolute;
      height: 100%;
      background: var(--primary-color);
      border-radius: 3px;
    }

    /* Wspólne style dla obu inputów range */
    .range-input {
      position: relative;
    }

    .range-input input {
      position: absolute;
      width: 100%;
      height: 6px;
      top: -6px;
      background: none;
      pointer-events: none; /* Pozwala klikać "przez" niewidoczne elementy inputu */
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    /* Style dla kółek suwaka (Webkit - Chrome/Safari/Edge/Opera) */
    .range-input input::-webkit-slider-thumb {
      height: 18px;
      width: 18px;
      border-radius: 50%;
      background: var(--primary-color);
      pointer-events: auto; /* Przywraca klikalność samego kółka */
      -webkit-appearance: none;
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0,0,0,0.2);
      transition: transform 0.1s;
    }

    .range-input input::-webkit-slider-thumb:active {
      transform: scale(1.2);
    }

    /* Style dla kółek suwaka (Firefox) */
    .range-input input::-moz-range-thumb {
      height: 18px;
      width: 18px;
      border: none;
      border-radius: 50%;
      background: var(--primary-color);
      pointer-events: auto;
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0,0,0,0.2);
      transition: transform 0.1s;
    }

    .range-input input::-moz-range-thumb:active {
      transform: scale(1.2);
    }
@media only screen and (max-width: 1610px) {		
		.pietro-mieszkania img {width: 1200px;}
.ground-floor {height:127px; width:1162px; top:446px; left:137px;}/*1,333*/
.fist-floor {height:144px; width:1162px; top:335px; left:137px;}
.second-floor {height:195px; width:1162px; top:222px; left:138px;}
.third-floor1 {height:135px; width:525px; top:229px; left:146px;}
.third-floor2 {height:151px; width:467px; top:113px; left:762px;}
.fourth-floor1 {height:131px; width:540px; top:170px; left:142px;}
.fourth-floor2 {height:165px; width:465px; top:16px; left:760px;}
.pietro-mieszkania-mobilne {background-color:;left:80px;height:500px;top:20%;}
.button-floor-mob {height: 50px;width: 50px;font-size:18px;}
.filtry-button {display:flex;max-height: 30px;}
}
@media only screen and (max-width: 1400px) {
	.ground-floor {left:37px;}/*1,333*/
	.fist-floor {  left:37px;}
.second-floor {  left:38px;}
.third-floor1 {  left:46px;}
.third-floor2 {  left:662px;}
.fourth-floor1 {  left:42px;}
.fourth-floor2 {  left:660px;}
.pietro-mieszkania-mobilne {left:0px;height:500px;top:22%;width:70px;}
.button-floor-mob {height: 50px;width: 50px;font-size:18px;}
.ground-floor-mob {top:80%;}
.fist-floor-mob {top:67%;}
.second-floor-mob {top:54%;}
.third-floor1-mob{top:41%;}
.fourth-floor1-mob {top:28%;}
}
@media only screen and (max-width: 1000px) {
.container-floor {width:100%;}
.pietro-mieszkania {display:none;}
.pietro-mieszkania-mobilne {position: relative;width:100%;height:auto;display:none;top:10px;}
.pietro-mieszkania-mobilne img {width: 100%;}
.pietro-mieszkania-mobilne {display:inline-block;background-image: url("../img/building2.png");background-size: auto 100%;background-position:top center;background-repeat: no-repeat;}
/*.table-container-menu {display:none;}*/
.button-floor-mob { display: flex;justify-content: center;align-items: center;border-radius: 50%;border: 3px solid #d1c7bc;background-color:#102e4a;
color:#d1c7bc;font-size:28px;position:absolute;}
.ground-floor-mob {top:73%;right:15%;}
.fist-floor-mob {top:60%;right:15%;}
.second-floor-mob {top:48%;right:15%;}
.third-floor1-mob{top:35%;right:15%;}
.fourth-floor1-mob {top:22%;right:15%;}
.panel-filtr {display:none;}
/*.table-header, .table-row {grid-template-columns: 1fr;}*/




}
        /* Responsywność: Na małych ekranach zmieniamy tabelę w pionowe karty */
        @media (max-width: 700px) {.mieszkania-tabela {overflow-x: scroll;}
		.table-container {min-width: 700px;}
		/*	#dane-tabela1 {display: grid;}
			.table-container {width: 50%;}
            .table-header {
				
                display:none ;  Ukrywamy nagłówek na telefonach 
            }*/
          /*  .table-row {
                grid-template-columns: 1fr; 
                border: 1px solid #ddd;
                margin-bottom: 10px;
                border-radius: 6px;
            }
			.button-floor-mob {height: 70px;width: 70px;font-size:24px;}*/
        }