html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }
    #viewer {
      width: 100%;
      height: 100%;
    }
	
	



.white-bar {
  width: 100%;
  height: 90px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.nazov-bytu {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #000000;
  font-family: 'Poppins', sans-serif; /* voliteľné pekné písmo */
}


.podorys-obrazok {
  position: fixed;
  top: 9%;  /* pridaj px, inak to nefunguje */
  left: 0px;      /* pridaj px */
  width: 400px;
  z-index: 1000;
  pointer-events: none; /* ak nechceš, aby sa dalo na obrázok klikať */
}

/* Responzívne pre mobil */
@media (max-width: 600px) {
  .podorys-obrazok {
    bottom: 150px;  /* posun na menších obrazovkách */
    left: 15px;     /* menej od okraja */
    width: 180px;   /* menšia veľkosť */
  }
}

.foto-ikona {
  position: fixed;
  bottom: 60px;          /* vzdialenosť od spodku */
  left: 50%;             /* posun na stred zľava */
  transform: translateX(-50%); /* presné vycentrovanie */
  width: 60px;
  z-index: 1000;
  cursor: pointer;
}

.foto2-ikona {
  position: fixed;
  bottom: 60px;          /* vzdialenosť od spodku */
  left: 46%;             /* posun na stred zľava */
  transform: translateX(-50%); /* presné vycentrovanie */
  width: 50px;
  z-index: 1000;
  cursor: pointer;
}



.arrow-circle {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background-color: black;
    color: white;
    
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: background-color 0.3s, color 0.3s;
}
.arrow-circle:hover {
    background-color: white;
    color: black;
}

.logo-projektu {
      position: fixed;
    top: -10px;
    left: 20px;
    width: 160px;
    height: 120px;
    background-image: url('Icons/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;

}

	.yellow-bar {

    width: 100%; /* Šírka na celú obrazovku */
    padding: 10px; /* Odsadenie od okrajov */
    text-align: center; /* Zarovnanie obsahu na stred */
    position: fixed; /* Fixná pozícia */
    bottom: 0; /* Umiestnenie na spodok */
    left: 0; /* Umiestnenie odľava */
    z-index: 1000; /* Zabezpečenie, že lišta je nad ostatnými prvkami */
	transition: transform 0.5s ease; /* Prechod animácie */
}

.yellow-bar.hidden {
    transform: translateY(80%); /* Vysunutie lišty nahor */
}
.btn.add {
    background-color: #142f3dff; /* Nastavenie farby pozadia */
    color: white; /* Farba textu */
    border: 0px solid black; /* Nastavenie čierneho okraju s hrúbkou 1px */
    padding: 10px 20px; /* Odsadenie pre tlačidlo */
    font-size: 16px; /* Veľkosť písma */
 
    cursor: pointer; /* Ukazovateľ myši na tlačidlo */
    transition: background-color 0.3s; /* Efekt prechodu */
}

.btn.add:hover {
    background-color: #14b8eb; /* Zmena farby pri hover, voliteľné */
}
 .close-btn {
             background-color: white; /* Nastavenie farby pozadia */
		color: black; /* Farba textu */
		border: none; /* Bez okraja */
		padding: 12px 70px; /* Odsadenie pre tlačidlo */
		font-size: 16px; /* Veľkosť písma */
		font-weight: bold; /* Tučné písmo */
		border-radius: 20px; /* Zaoblené okraje */
		cursor: pointer; /* Ukazovateľ myši na tlačidlo */
		transition: background-color 0.3s; /* Efekt prechodu */
		text-decoration: none; /* Odstránenie podčiarknutia textu */
		
        }
.close-btn:hover {
    background-color: grey; /* Tmavší odtieň oranžovej */
	color: white;

}


.kontakt-formular {
  background-color: #ffffff;
  color: #000000;
  padding: 30px;
  max-width: 400px;
  margin: 40px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
}

.kontakt-formular label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.kontakt-formular input[type="text"],
.kontakt-formular input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 15px;
}

.kontakt-formular button {
  background-color: #007BFF;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.kontakt-formular button:hover {
  background-color: #0056b3;
}


.ikony-vpravo {
  position: fixed;
  right: 20px;
  bottom: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 1000;
}

.ikona {
  width: 60px;
  height: auto;
  cursor: pointer;
}
.ikona:hover {
  transform: scale(1.1);
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  z-index: 999;
  pointer-events: none;
}

.btn-toggle-developer {
  position: fixed;
  left: 80px;
  top: 20px;
  width: 230px;
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(to right, #ffffff, #f0f0f0);
  color: #333;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.center-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  border-radius: 16px;
}


	#coordsDisplay {
    position: absolute;
    bottom: 200px;
    left: 50px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
	display: none; /* Skryté na začiatku */
}

#nastaveniaPanel {
    position: relative; /* namiesto absolute */
    background: rgba(255, 255, 255, 1);
    padding: 10px;
    color: black;
    z-index: 20;

    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
    width: 100%; /* zaberie celú šírku tab-content */
}



#nastaveniaPanel label {
    cursor: pointer;
    user-select: none;
}


.footer-text {
    color: rgba(255, 255, 255, 0.5) !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    z-index: 9999 !important;
}


.holobyt-btn {
    position: fixed;
    left: 40px;
    bottom: 20px;
    width: 60px;
    height: 60px;

    background-image: url('Icons/holobyt.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
    z-index: 9999;

    /* trochu jemného tieňa na tmavom pozadí */
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* Hover pre PC */
.holobyt-btn:hover {
    background-image: url('Icons/holobyt_hover.png');
}


/* aktivny stav */
.holobyt-btn.active {
    background-image: url('Icons/holobyt_hover.png'); /* alebo iný obrázok pre zapnuté */
}

/* Responzívne pre mobil – menšie tlačidlo */
@media (max-width: 600px) {
    .holobyt-btn {
        width: 48px;
        height: 48px;
        left: 15px;
        bottom: 15px;
    }
}

.standard-btn {
    position: fixed;
    left: 200px; /* posuň doprava od holobytu, aby sa neprekrývali */
    bottom: 20px;
    width: 60px;
    height: 60px;

    background-image: url('Icons/standard.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
    z-index: 9999;

    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* Hover pre PC */
.standard-btn:hover {
    background-image: url('Icons/standard_hover.png');
}

/* Aktívny stav */
.standard-btn.active {
    background-image: url('Icons/standard_hover.png');
}

/* Mobilná verzia */
@media (max-width: 600px) {
    .standard-btn {
        width: 48px;
        height: 48px;
        left: 120px; /* úmerne posunuté od holobyty */
        bottom: 15px;
    }
}

.slider-control {
  -webkit-appearance: none;
  width: 160px;
  height: 6px;
  border-radius: 4px;
  background: #d6d6d6;
  outline: none;
  cursor: pointer;
  margin: 6px 0;
}

/* Aktívna farba pri hovere */
.slider-control:hover {
  background: #bfbfbf;
}

/* Gulička – Chrome, Safari, Edge */
.slider-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000000; /* čierna gulička */
  border: 2px solid #ffffff; /* biely okraj */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

/* Gulička – Firefox */
.slider-control::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000000; /* čierna gulička */
  border: 2px solid #ffffff; /* biely okraj */
  cursor: grab;
}



.podorys-btn {
    position: fixed;
    left: 120px;
    bottom: 20px;
    width: 60px;
    height: 60px;

    background-image: url('Icons/podorys.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
    z-index: 9999;

    /* jemný tieň na tmavom pozadí */
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* Hover pre PC */
.podorys-btn:hover {
    background-image: url('Icons/podorys_hover.png');
}

/* aktívny stav */
.podorys-btn.active {
    background-image: url('Icons/podorys_hover.png'); /* alebo iný obrázok pre zapnuté */
}

/* Responzívne pre mobil – menšie tlačidlo */
@media (max-width: 600px) {
    .podorys-btn {
        width: 48px;
        height: 48px;
        left: 80px;
        bottom: 15px;
    }
}

#workflowTabs {
	 display: none; /* Developer mód vypnutý na štarte */
  display: flex;
  gap: 10px;
  position: absolute;
  top: 90px;
  left: 20px;
  z-index: 999;
}

.tab-btn {
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: #e1e1e1;

  font-weight: bold;
  transition: 0.2s;
}

.tab-btn.active {
  background: #fff;
}

.tab-content {
  display: none;
  position: absolute;
  top: 120px;
  left: 20px;
  width: 600px;
  background: white;
  padding: 16px;
  z-index: 998;
  color: black;

  max-height: 800px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

.tab-content.active {
  display: block;
}

/* Legacy panel default hidden - zobrazí sa až klikom na Legacy tab */
#nastaveniaPanel {
  display: block;
}




#measureBtn {
  position: fixed;
  bottom: 400px;
  left: 250px;
  padding: 18px 28px;
  font-size: 50px;
  background-color: #ff4b4b;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

#measureBtn:hover {
  background-color: #ff6b6b;
  transform: scale(1.05);
}

#measureBtn.active {
  background-color: #2ecc71;
}

#measureBtn.active:hover {
  background-color: #50e58a;
}