/* image Slider -> CSS TAB
   Size controls sirf IMAGE FRAME par lagte hain.
   Numbers + arrows wali row poori chaurai par rehti hai.
   Fallback: 720px wide, 16/11 ratio. */

.mana-carousel {
  position: relative;
  width: 100%;
}

.mana-carousel-frame {
  position: relative;
  width: var(--mana-w, 720px);
  max-width: 100%;                     /* container se bahar na jaye */
  height: var(--mana-h, auto);
  aspect-ratio: var(--mana-ratio, 16 / 11);
  overflow: hidden;
  /* active image ke size par frame smooth resize hota hai */
  transition: width .6s ease, height .6s ease;
}

/* slide hamesha frame ko bharti hai; frame ka size
   active image ke width/height controls se set hota hai */
.mana-slide.mana-slide.mana-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;      /* theme ka img{height:auto} override */
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;   /* dheema fade */
  pointer-events: none;
}
.mana-slide.mana-slide.mana-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.mana-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.mana-carousel-numbers {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #8c887e;
}
.mana-dash { color: #b6b2a7; }

.mana-num-btn.mana-num-btn.mana-num-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font: inherit;
  letter-spacing: inherit;
  color: #8c887e;
  cursor: pointer;
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.mana-num-btn.mana-num-btn.mana-num-btn:hover,
.mana-num-btn.mana-num-btn.mana-num-btn:focus,
.mana-num-btn.mana-num-btn.mana-num-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.mana-num-btn.active {
  color: #2b2a26 !important;
  font-weight: 700;
}

.mana-carousel-arrows { display: flex; gap: 22px; }

.mana-prev.mana-prev.mana-prev,
.mana-next.mana-next.mana-next {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  cursor: pointer;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6f6c62;
  transition: background-color .3s ease, color .3s ease;
}
.mana-prev.mana-prev.mana-prev:hover,
.mana-next.mana-next.mana-next:hover,
.mana-prev.mana-prev.mana-prev:focus,
.mana-next.mana-next.mana-next:focus {
  background-color: rgba(43, 42, 38, .08) !important;   /* hover background */
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #2b2a26;
}
.mana-prev.mana-prev.mana-prev:active,
.mana-next.mana-next.mana-next:active {
  background-color: rgba(43, 42, 38, .14) !important;
  box-shadow: none !important;
  outline: none !important;
}
.mana-carousel-arrows svg { width: 20px; height: 20px; display: block; }

/* mobile: fixed width/height chhoti screen par ignore */
@media (max-width: 767px) {
  .mana-carousel-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--mana-ratio, 16 / 11);
  }
  /* mobile par fixed size ignore */
  .mana-carousel-frame { transition: none; }
}