/* ==========================================================================
   CarouFlex - Coverflow Style (v4 - Specific Overlay)
   ========================================================================== */

.crfxl-coverflow-container {
  position: relative; /* Needed for absolute positioning of nav */
  width: 100%;
  margin: 0 auto;
  min-height: 500px; 
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  /* font-size removed */
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.crfxl-coverflow-container .crfxl-coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8) translateZ(-400px);
  width: 60%;
  max-width: 400px;
  border-radius: 12px;
  background: #e0e0e0;
  overflow: hidden;
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.crfxl-coverflow-container .crfxl-coverflow-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crfxl-coverflow-container .crfxl-coverflow-card.crfxl-center {
  transform: translate(-50%, -50%) translateZ(0);
  opacity: 1;
  z-index: 10;
  width: 70%;
  max-width: 450px;
}
.crfxl-coverflow-container .crfxl-coverflow-card.crfxl-left {
  transform: translate(-150%, -50%) rotateY(30deg) translateZ(-100px);
  opacity: 0.5;
  z-index: 5;
}
.crfxl-coverflow-container .crfxl-coverflow-card.crfxl-right {
  transform: translate(50%, -50%) rotateY(-30deg) translateZ(-100px);
  opacity: 0.5;
  z-index: 5;
}

/* --- Positioning for Coverflow Arrows --- */
.crfxl-coverflow-btn-prev {
  left: 0.5rem; 
}
.crfxl-coverflow-btn-next {
  right: 0.5rem;
}
.crfxl-coverflow-container .crfxl-btn {
    z-index: 100; /* Ensure arrows are above cards */
}


/* --- Card Overlay (DEFAULT/LIGHT) --- */
.crfxl-coverflow-overlay-light .crfxl-coverflow-card-overlay {
  background: rgba(255, 255, 255, 0.9);
}
.crfxl-coverflow-overlay-light .crfxl-coverflow-overlay-title {
  color: #001534;
}
.crfxl-coverflow-overlay-light .crfxl-coverflow-overlay-link {
  background: #001534;
  color: #fff;
}
.crfxl-coverflow-overlay-light .crfxl-coverflow-overlay-link:hover {
  background: #001534;
}

/* --- NEW: Dark Overlay Preset --- */
.crfxl-coverflow-overlay-dark .crfxl-coverflow-card-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.crfxl-coverflow-overlay-dark .crfxl-coverflow-overlay-title {
  color: #fff;
}
.crfxl-coverflow-overlay-dark .crfxl-coverflow-overlay-link {
  background: #fff;
  color: #000;
}
.crfxl-coverflow-overlay-dark .crfxl-coverflow-overlay-link:hover {
  background: #eee;
}

/* --- Base Overlay Styles --- */
.crfxl-coverflow-card-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 1rem;
  transform: translateY(-50%);
  text-align: center;
  box-sizing: border-box;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
}
.crfxl-coverflow-card.crfxl-center:hover .crfxl-coverflow-card-overlay {
  opacity: 1;
}
.crfxl-coverflow-overlay-title,
.crfxl-coverflow-overlay-title h1,
.crfxl-coverflow-overlay-title h2,
.crfxl-coverflow-overlay-title h3 {
  font-weight: 600;
  margin: 0 0 0.75rem;
  /* font-size removed */
}
.crfxl-coverflow-overlay-link {
  display: inline-block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s ease;
  /* font-size removed */
}


/* --- Positioning for Coverflow Dots --- */
.crfxl-coverflow-dots {
  position: absolute;
  /* UPDATED: Changed bottom, added opacity and transition */
  bottom: 0px; 
  opacity: 0;
  transition: bottom 0.4s ease, opacity 0.4s ease;
  /* END UPDATE */
  left: 50%;
  transform: translateX(-50%);
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .crfxl-coverflow-container {
    min-height: 400px;
    font-size: 14px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card {
    width: 70%;
    max-width: 350px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-center {
    width: 80%;
    max-width: 400px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-left {
    transform: translate(-140%, -50%) rotateY(25deg) translateZ(-80px);
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-right {
    transform: translate(40%, -50%) rotateY(-25deg) translateZ(-80px);
  }
}

@media (max-width: 768px) {
  .crfxl-coverflow-container {
    min-height: 350px;
    font-size: 12px;
    margin: 40px auto 50px auto;
  } 
  .crfxl-coverflow-container .crfxl-coverflow-card {
    width: 80%;
    max-width: 300px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-center {
    width: 90%;
    max-width: 350px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-left {
    transform: translate(-130%, -50%) rotateY(20deg) translateZ(-60px);
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-right {
    transform: translate(30%, -50%) rotateY(-20deg) translateZ(-60px);
  }
  .crfxl-coverflow-btn-prev {
    left: 0.25rem;
  }
  .crfxl-coverflow-btn-next {
    right: 0.25rem;
  }
  .crfxl-coverflow-dots {
    /* UPDATED: Removed bottom and opacity rules */
  } 
}

@media (max-width: 480px) {
  .crfxl-coverflow-container {
    min-height: 300px;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card {
    width: 90%;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-center {
    width: 100%;
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-left {
    transform: translate(-120%, -50%) rotateY(15deg) translateZ(-50px);
  }
  .crfxl-coverflow-container .crfxl-coverflow-card.crfxl-right {
    transform: translate(20%, -50%) rotateY(-15deg) translateZ(-50px);
  }
}