/*
 * jQuery Nivo Slider (OpenCart 1.5 theme integration)
 */

/* =========================
   Base / desktop
   ========================= */
.nivoSlider {
  position: relative;
  border-radius: 12px;
}

.slideshow .nivoSlider {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background: #191919;
  margin: 0 !important;

  /* Clip rounded corners */
  overflow: hidden;
  border-radius: 12px;
}

/* --------- CRITICAL FIX ----------
   Hide ALL slides until the plugin says it’s ready.
   This prevents stacked images / “fast-forward” flash. */
.slideshow .nivoSlider.nivo-preinit > * {
  display: none !important;
}

/* Once ready, allow normal rendering */
.slideshow .nivoSlider.nivo-ready > * {
  display: block;
}

/* Nivo expects images absolutely positioned */
.nivoSlider img {
  position: absolute;
  top: 0;
  left: 0;
  display: none; /* safe: Nivo manages visibility */
}

/* Link wrapper created by Nivo */
.nivoSlider a.nivo-imageLink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 6;
  display: none;
}

/* Slices/boxes */
.nivo-slice,
.nivo-box {
  display: block;
  position: absolute;
  z-index: 5;
}

/* Caption */
.nivo-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #000;
  color: #fff;
  opacity: 0.8;
  width: 100%;
  z-index: 8;
}
.nivo-caption p { padding: 5px; margin: 0; }
.nivo-caption a { display: inline !important; }
.nivo-html-caption { display: none; }

/* Bullets */
.slideshow .nivo-controlNav {
  position: absolute;
  right: 10px;
  bottom: 5px;
  height: 22px;
  z-index: 99;
  text-align: center;
}
.slideshow .nivo-controlNav .nivo-control {
  display: block;
  float: left;
  width: 22px;
  height: 22px;
  margin-right: 3px;
  border: 0;
  text-indent: -9999px;
  background: url('../image/bullets.png') no-repeat;
  background-size: 22px auto; /* important */
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.slideshow .nivo-controlNav .nivo-control.active {
  background-position: 0 -22px;
}

/* Arrows */
.slideshow .nivo-directionNav .nivo-prevNav,
.slideshow .nivo-directionNav .nivo-nextNav {
  position: absolute;
  top: 45%;
  z-index: 200; /* above link */
  cursor: pointer;

  display: block;
  width: 30px;
  height: 30px;

  border: 0;
  text-indent: -9999px;

  background: url('../image/arrows.png') no-repeat;
  background-size: 60px 30px; /* prev+next sprite */
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.slideshow .nivo-directionNav .nivo-prevNav { left: 15px; }
.slideshow .nivo-directionNav .nivo-nextNav {
  right: 15px;
  background-position: -30px 0;
}

/* =========================
   Mobile (<= 999px)
   ========================= */
@media screen and (max-width: 999px), (hover: none) and (pointer: coarse) {

  /* Keep width fluid, height is set by JS */
  .slideshow .nivoSlider {
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Mobile uses swipe and pagination dots instead of arrow controls. */
  .slideshow .nivo-directionNav { display: none !important; }

  .slideshow .nivo-directionNav .nivo-prevNav,
  .slideshow .nivo-directionNav .nivo-nextNav {
    display: none !important;
  }

  /* Keep every banner dot compact and on one centered row. */
  .slideshow .nivo-controlNav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 1px !important;
    width: auto !important;
    height: 14px !important;
    z-index: 9999 !important;
  }
  .slideshow .nivo-controlNav .nivo-control {
    float: none !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    background-size: 14px auto !important;
  }
  .slideshow .nivo-controlNav .nivo-control.active {
    background-position: 0 -14px !important;
  }
}

/* =========================
   Slideshow placeholder (fast first paint)
   ========================= */

.slideshow-placeholder-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

.slideshow-placeholder-link{
  display:block;
}