/* common.css - Wspólne style dla wszystkich urządzeń */
/* audiowide-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Audiowide";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/audiowide/audiowide-v21-latin_latin-ext-regular.woff2")
    format("woff2");
}
/* cabin-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/cabin/cabin-v34-latin-italic.woff2") format("woff2");
}
/* cabin-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/cabin/cabin-v34-latin-700.woff2") format("woff2");
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-v48-latin-regular.woff2") format("woff2");
}

* {
  margin: 0;
  padding: 0;
}

.warunki-klima,
.warunki-klima * {
  color: #000 !important;
  font-family: "Roboto", Arial, sans-serif !important;
}

@keyframes phoneIcon {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Wspólne style dla przycisków */
.smsOrder {
font-size: calc(var(--displayHeight) * 0.016);
  font-weight: bold;
  text-decoration: none;
  padding: 6px 4px;
  transition: background 0.3s;
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 7%;
  top: 58%;
  z-index: 10;
  height: auto;
  text-align: center;
  }

.ddButton,
.pricebutton,
.sync-button,
.btn-to-blog,
.btn-to-call,
.smsOrder {
  background-color: rgb(50, 130, 184);
  color: rgb(255, 255, 255);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
  box-shadow: 0 3px #999;
}

.ddButton:active,
.pricebutton:active,
.sync-button:active,
.btn-to-blog:active,
.btn-to-call:active,
.smsOrder:active {
  background-color: rgb(15, 76, 117);
  box-shadow: 0 0 #666;
  transform: translateY(3px);
  text-decoration: none !important;
 }

.ddButton:hover,
.pricebutton:hover,
.sync-button:hover,
.btn-to-call:hover,
.btn-to-call a:hover,
.smsOrder:hover {
  background-color: rgb(15, 76, 117);
  text-decoration: none !important;
 }

/* Wspólne style dla galerii */
.slide,
.sync-slide {
  display: none;
  max-width: 100%;
  cursor: pointer;
}

.slide.active,
.sync-slide.active {
  display: block;
}

.leftArrow,
.rightArrow,
.sync-arrow {
  position: absolute;
  opacity: 0.2;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  height: 100%;
  width: 7%;
  background-color: lightgray;
  overflow: hidden;
}

.leftArrow:hover,
.rightArrow:hover,
.sync-arrow:hover {
  opacity: 0.5;
}

.arrowIcon,
.sync-arrow i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(0, 0, 0);
}

/* Wspólne style dla modali */
.modalLightbox {
  display: none;
  width: 1%;
  height: 1%;
}

.modalLightbox.active {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 4;
}

.closeGalleryButton {
  position: absolute;
  top: 17px;
  right: 17px;
  transform: translate(50%, -50%);
  width: 25px;
  height: 25px;
  background-color: rgb(0, 0, 0);
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
}

.closeGalleryButton i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
  transition: 0.2s;
  font-size: 14px;
}

.closeGalleryButton i:hover {
  font-size: 25px;
}
.prevSlideButton,
.nextSlideButton {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  height: 60%;
  width: 5%;
  background-color: lightgray;
  opacity: 0.2;
  transition: 0.2s;
  z-index: 4;
  cursor: pointer;
}

.prevSlideButton:hover,
.nextSlideButton:hover {
  opacity: 0.5;
}

.prevSlideButton {
  left: 1px;
}

.nextSlideButton {
  right: 1px;
}

.prevSlideButton i,
.nextSlideButton i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(0, 0, 0);
}