/* intl-tel-input overrides */
.iti {
  width: 100%;
}
.iti__flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
  }
}

/* Swiper Customize */
:root {
  --swiper-theme-color: #fff !important;
  --swiper-navigation-size: 20px; /* Default small size */
}

/* Ensure Swiper fills container height */
.mySwiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mySwiper .swiper-wrapper {
  height: 100%;
}

.mySwiper .swiper-slide {
  height: 100% !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  :root {
    --swiper-navigation-size: 44px;
  }
}

.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Show arrows on hover only for larger screens to avoid clutter on mobile, or always show? 
   User asked "cursors to switch between imgs manually". 
   Usually arrows are good. Let's make them visible on hover of the container. 
*/
.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
  opacity: 1;
}

/* On mobile, maybe always visible or rely on swipe */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    opacity: 0.7; /* Always visible on mobile but smaller/transparent */
  }
}