html, body {
  height: 100%;
  margin: 0;
  font-family: Poppins;
  font-size: calc(var(--guide-font-size));
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width:100%;
  max-width:440px !important;
  margin: 0 auto;
}



main {
  flex: 1;
  background:#B8BA23;
}


.map-section {
  flex: 1;
  display: flex;
  justify-content: center; /* poziome wycentrowanie */
  align-items: center;     /* pionowe wycentrowanie */
  overflow: hidden;
}

.map-section svg {
  height: calc(100dvh - 50px); /* 50px = footer */
  width: auto;
  display: block;
  margin: 0 auto;
}

footer {
    height:50px;
}
  

.map-container #m1,
.map-container #m2,
.map-container #m3,
.map-container #m4,
.map-container #m5,
.map-container #m6,
.map-container #m7,
.map-container #m8,
.map-container #m9,
.map-container #m10,
.map-container #m11,
.map-container #m12,
.map-container #m13,
.map-container #m14,
.map-container #m15,
.map-container #m16,
.map-container #m17,
.map-container #m18,
.map-container #m19,
.map-container #m20
{
  cursor: pointer;
}


  
  h2 {
     font-size:  20px;
     font-weight: bold;
     padding-bottom: 10px;
  }

  main {
    flex: 1 0 auto;
  }

  .offcanvas-end {
    width: 70% !important;
    background:var(--guide-menu-tlo);
  }

  header {
    padding: 10px 20px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #ddd;
  }

  footer {
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    width: 100%;
  }

  footer .footer-icons i {
    color: #555;
    transition: color 0.3s;
  }

  footer .footer-icons i:hover {
    color: #0d6efd;
  }

  .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%280, 0, 0, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  .nav-link {
     font-weight: bold;
     color:var(--guide-menu-kolor);
     font-size:  calc(4px + var(--guide-font-size));
  }
  .nav-link:focus, .nav-link:hover {
     font-weight: bold;
     color:var(--guide-menu-kolor);
     text-decoration: underline;
  }
  
.nawigacja {
	cursor: pointer; 
	display: inline-block; 
	margin:10px; 
	padding:6px; 
	width:50px; 
	height:50px; 
	font-size: 24px;
	font-weight: bold;
	color: #16202F;
	border: 2px solid #16202F;
	border-radius: 50%;
}

.nawigacja_wybor {
	width: 24px; 
	font-size: 36px; 
	color: #16202F;
	background:transparent; 
	font-weight: bold; 
	text-align:center;
	border:0px;
	border-bottom: 2px solid transparent;
}

.nawigacja_info { 
    color:#FFFFFF; 
    font-weight:bold;
    text-align:center;
    font-size: 16px; 
}

.nawigacja_blad { 
    color:#A20801; 
    font-weight:bold;
    text-align:center;
    font-size: 14px; 
}

.tresc_tytul {
    font-size: calc(6px + var(--guide-font-size));
}

.eksponat_numer { 
    font-size: calc(-2px + var(--guide-font-size));
    color: #999999;
}
.eksponat_tytul2 {
    font-size: calc(4px + var(--guide-font-size));
    font-weight: bold;
}

.eksponat_nawigacja { 
    font-size: 20px; 
    line-height:26px;
    font-weight: bold;
}

.tlo {
    background:var(--guide-tlo);
}

.tlo_biale {
    background:#FFFFFF;
}

.nawigacja_jezyki {
	cursor: pointer; 
	display: inline-block;
	text-align:center;
	margin:10px; 
	padding:6px;
	width:50px; 
	height:50px; 
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
}

.nawigacja_jezyki2 {
	cursor: pointer; 
	display: inline-block; 
	margin:5px; 
	padding:4px;
	width:34px; 
	height:34px; 
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	border: 2px solid #000000;
	border-radius: 50%;
}

.sticky-logo {
    position: fixed;
    left: 0%;
    top: 35%;
    width: 100%;
    color: white;
    padding: 5px 5px;
    z-index: 50;
}



.sticky-bar {
    position: fixed;
    left: 0%;
    bottom: 14%;
    width: 100%;
    background: #0d6efd;
    color: white;
    padding: 15px 20px;
    z-index: 50;
    background:var(--guide-tlo);
}

.sticky-tresc {
    position: fixed;
    left: 0%;
    bottom: 62px;
    width: 100%;
    background: #0d6efd;
    color: white;
    z-index: 50;
    background:var(--guide-tlo);
}

.trans {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}


.play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #1db954;
  transition: transform 0.2s;
}

.play-btn svg {
  width: 48px;
  height: 48px;
  fill: #1db954;
  transition: fill 0.2s;
}

.play-btn:hover svg {
  fill: #1ff56f;
  transform: scale(1.05);
}  

.play-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  user-select: none;
}

.play-icon2 {
  width: 20px;
  height: 20px;
  cursor: pointer;
  user-select: none;
}
  

#progress {
  -webkit-appearance: none; /* usuwa domyślny styl */
  width: 100%;
  height: 3px;
  background: #FFFFFF;
  border-radius: 3px;
  outline: none;
}

/* Styl kropki (uchwytu) – Chrome, Safari, Edge */
#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* Styl kropki – Firefox */
#progress::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}

.podpis {
    font-size: calc(-3px + var(--guide-font-size));
}
.default {
   font-size:12px;
}
.time {
   font-size:12px;
}