/* ===============================
   SLIDER BUTTONS (TOP)
================================ */

.slider_buttons {
  display: flex;
  gap: 16px;
}

/* базова кнопка */
.slider_btn {
  position: relative;
  width: 25px;
  height: 25px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4b44;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 27, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* hover / active */
.slider_btn:hover {
  background-color: #e5433d;
}

/* .slider_btn:active {
  transform: scale(0.96);
} */

/* ===============================
   SWIPER ARROWS
================================ */

/* прибираємо absolute-позиціонування swiper */
.slider_btn.swiper-button-prev,
.slider_btn.swiper-button-next {
  position: static;
  margin: 0;
}

/* стрілки */
.slider_btn.swiper-button-prev::after,
.slider_btn.swiper-button-next::after {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

/* ===============================
   DISABLED STATE
================================ */

.slider_btn.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

@media screen and (min-width: 1200px) {
  .slider_btn {
    position: relative;
    width: 40px;
    height: 40px;
  }
}