/* ============================================================
   KEY App — Home Slider v2 (clean, eye-pleasing)
   ============================================================ */

.home-slider.kv2-slider {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--card, #fff) !important;
  box-shadow: 0 10px 28px rgba(5,40,30,.10) !important;
  animation: fadeInUp .5s ease both !important;
}

.kv2-slider-track {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 180px !important;
  max-height: 260px !important;
  background: linear-gradient(135deg, #0a2e24, #041a14) !important;
  overflow: hidden !important;
}
@media (min-width: 720px) {
  .kv2-slider-track {
    aspect-ratio: 21 / 9 !important;
    max-height: 300px !important;
  }
}

.kv2-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .6s ease, visibility .6s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.kv2-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.kv2-slide-img {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: scale(1.02);
  transition: transform 6s ease;
}
.kv2-slide.active .kv2-slide-img {
  transform: scale(1.06);
}
.kv2-slide-img-placeholder {
  background: linear-gradient(135deg, #0a2e24, #041a14) !important;
}
.kv2-slide-img-placeholder::after {
  content: "🎞️";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  opacity: .25;
}

.kv2-slide-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    0deg,
    rgba(5,30,22,.85) 0%,
    rgba(5,30,22,.45) 45%,
    rgba(5,30,22,.05) 75%,
    rgba(5,30,22,0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.kv2-slide-body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  padding: 20px 22px 28px !important;
  color: #fff !important;
  z-index: 3 !important;
  max-width: 720px;
}
.kv2-slide-body h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  color: #fff !important;
  line-height: 1.4 !important;
  letter-spacing: -.2px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.45) !important;
}
.kv2-slide-body p {
  font-size: 13.5px !important;
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.9) !important;
  line-height: 1.75 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}
.kv2-slide-body a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0EA67D, #0891b2) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(14,166,125,.35) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  border: 0 !important;
}
.kv2-slide-body a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14,166,125,.45) !important;
}

.kv2-dots {
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(5,30,22,.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 4 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.kv2-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,.45) !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  min-height: 0 !important;
  min-width: 0 !important;
}
.kv2-dot:hover { background: rgba(255,255,255,.75) !important; }
.kv2-dot.active {
  width: 22px !important;
  border-radius: 4px !important;
  background: #0EA67D !important;
  box-shadow: 0 0 10px rgba(14,166,125,.5) !important;
}

/* Kill any leftover old slider styles */
.home-slide,
.home-slider-track,
.home-slider-dots,
.home-slider-dot { display: none !important; }

/* Hide any old banner ads in userMenu */
#userMenu .ad-banner { display: none !important; }

/* Mobile tweaks */
@media (max-width: 520px) {
  .kv2-slide-body { padding: 16px 16px 22px !important; }
  .kv2-slide-body h4 { font-size: 15.5px !important; }
  .kv2-slide-body p { font-size: 12px !important; margin-bottom: 10px !important; }
  .kv2-slide-body a { padding: 6px 12px !important; font-size: 11.5px !important; }
  .kv2-dots { bottom: 8px !important; padding: 5px 10px !important; }
}