/* ==========================================
   SCREENSAVER OVERLAY STYLES
   Isolated CSS for screensaver functionality
   Fixed 1080x1920 portrait kiosk resolution
========================================== */

/* Main screensaver overlay container */
.screensaver-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  z-index: 9999;
  background-color: #000; /* Black background - content loads before animation */
  overflow: hidden;
  pointer-events: auto; /* Ensure touch events work */
  cursor: pointer; /* Visual feedback for touch */
  touch-action: manipulation; /* Optimize touch handling */
  -webkit-user-select: none; /* Prevent text selection on touch */
  user-select: none;
}

/* Default screensaver with municipality branding */
.screensaver-overlay .default-screensaver {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #D13239 0%, #8f1f24 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.screensaver-overlay .screensaver-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Municipality logo in screensaver - highly specific naming */
.screensaver-overlay .screensaver-municipality-logo {
  width: 300px;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 60px;
  animation: screensaverPulse 3s ease-in-out infinite;
}

/* Touch indicator container - scoped to screensaver overlay */
.screensaver-overlay .tts {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0; /* Start invisible - GSAP will handle animation */
  pointer-events: none; /* Allow clicks to pass through to overlay */
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* ico-touch.svg is a solid #fff fill, which works over the photographs and
   videos staff upload. The fallback slide is the Lagoa logo on white (see the
   ss-default branch in screensaver.html), where it would be invisible - and
   inverting a pure white fill gives exactly black. */
.screensaver-overlay #sswrapper.ss-default .tts {
  filter: invert(1);
}

/* Allow touches on carousel but not on interactive elements */
.screensaver-overlay .js-Carousel,
.screensaver-overlay #carousel {
  pointer-events: auto; /* Allow touches */
}

/* Only disable pointer events on dots to prevent interference */
.screensaver-overlay .js-Carousel-dots,
.screensaver-overlay .js-Carousel-dots * {
  pointer-events: none;
}

/* Touch icon - highly specific naming */
.screensaver-overlay .screensaver-touch-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

/* Touch text - highly specific naming */
.screensaver-overlay .screensaver-touch-text {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

/* Screensaver-specific animations */
@keyframes screensaverPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.9; 
  }
}

/* Removed screensaverFade keyframes - using GSAP for all animations */

/* TARGETED FIX: Work WITH vanilla-js-carousel library, not against it */

/* Fix #1: Add black background to carousel container to hide transition gaps */
.screensaver-overlay .js-Carousel {
  background-color: #000 !important; /* Override library's #272822 background */
}

/* Fix #2: Speed up transitions to minimize gap visibility */
.screensaver-overlay .js-Carousel > ul li {
  transition: margin-left 0.1s ease !important; /* Faster than library's 0.3s */
}

/* Fix #3: Ensure proper sizing within screensaver overlay */
.screensaver-overlay .js-Carousel {
  width: 1080px !important;
  height: 1920px !important;
}

.screensaver-overlay .js-Carousel > ul {
  height: 1920px !important; /* Override library's 200px */
}

.screensaver-overlay .js-Carousel > ul li {
  width: 1080px !important;
  height: 1920px !important;
}

/* Fix #4: Ensure images fill properly */
.screensaver-overlay .js-Carousel img {
  width: 1080px;
  height: 1920px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* INDICATORS: Proper carousel dots - override library defaults */
.screensaver-overlay #carousel > ul.js-Carousel-dots {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  pointer-events: none !important;
  /* CRITICAL: Override carousel height inheritance */
  height: auto !important;
  width: auto !important;
  /* CRITICAL: Reset any inherited flex properties */
  flex-direction: row !important;
}

.screensaver-overlay #carousel > ul.js-Carousel-dots li {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 6px !important;
  cursor: pointer !important;
  /* CRITICAL: Ensure dots don't inherit carousel sizing */
  display: block !important;
  float: none !important;
  position: relative !important;
  /* CRITICAL: Reset any transition inheritance */
  transition: background-color 0.2s ease !important;
}

.screensaver-overlay #carousel > ul.js-Carousel-dots li.js-Carousel-dot-active {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.screensaver-overlay .js-Carousel video,
.screensaver-overlay #carousel video {
  width: 1080px;
  height: 1920px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Basic carousel dots/indicators styling - ready for user adjustments */
.screensaver-overlay .js-Carousel-dots,
.screensaver-overlay .carousel-dots {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}





#carousel > ul.js-Carousel-dots {
    position: absolute; 
    bottom: 40px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}


#carousel > ul.js-Carousel-dots li {
	width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: white;
}


/* Hide navigation arrows but keep dots */
.screensaver-overlay .js-Carousel-nav {
  display: none !important;
}

/* Carousel track sizing */
.screensaver-overlay .js-Carousel-track,
.screensaver-overlay .carousel-track {
  width: 1080px;
  height: 1920px;
}

/* Splash elements sizing within screensaver overlay */
.screensaver-overlay .splash {
  width: 1080px;
  height: 1920px;
  background-size: cover;
  background-position: center;
}

/* Minimal interference with carousel */

/* Let carousel handle its own transitions naturally - minimal interference */