/*
  Minimal Swiper "core" CSS.
  Elementor editor usually enqueues Swiper CSS, but frontend preview sometimes doesn't.
  These rules ensure layout/positioning works even without Swiper's stylesheet.
*/
.ades-pro-slider.swiper,
.dts-slider.swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Horizontal sliders can use a minimum height (helps when slide content is shorter). */
.ades-pro-slider.swiper:not(.swiper-vertical) {
  min-height: var(--ades-horizontal-min-height, 0px);
}

/* Vertical sliders need an explicit height; otherwise the container expands to all slides and looks "broken". */
.ades-pro-slider.swiper.swiper-vertical {
  height: var(--ades-vertical-height, 400px);
}

.ades-pro-slider .swiper-wrapper,
.dts-slider .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  width: 100%;
}

.ades-pro-slider .swiper-slide,
.dts-slider .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Vertical mode */
.ades-pro-slider.swiper-vertical > .swiper-wrapper,
.dts-slider.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

/* Hide controls when Swiper decides they're not needed */
.ades-pro-slider .swiper-button-lock,
.ades-pro-slider .swiper-pagination-lock,
.dts-slider .swiper-button-lock,
.dts-slider .swiper-pagination-lock {
  display: none;
}

/* Basic support for Swiper grid rows when Swiper's CSS isn't loaded */
.ades-pro-slider.swiper-grid > .swiper-wrapper,
.dts-slider.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.ades-pro-slider .swiper-wrapper.swiper-grid-column,
.dts-slider .swiper-wrapper.swiper-grid-column {
  flex-wrap: wrap;
}

/* ---------- Navigation (arrows) ---------- */
.ades-pro-slider .swiper-button-next,
.ades-pro-slider .swiper-button-prev,
.dts-slider .swiper-button-next,
.dts-slider .swiper-button-prev {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ades-nav-size, 44px);
  height: var(--ades-nav-size, 44px);
  border-radius: var(--ades-nav-radius, 9999px);
  color: var(--ades-nav-color, var(--swiper-theme-color, currentColor)) !important;
  background-color: var(--ades-nav-bg, transparent) !important;
  transform: translateY(-50%);
}

.ades-pro-slider .swiper-button-next:hover,
.ades-pro-slider .swiper-button-prev:hover,
.ades-pro-slider .swiper-button-next:focus,
.ades-pro-slider .swiper-button-prev:focus,
.ades-pro-slider .swiper-button-next:focus-visible,
.ades-pro-slider .swiper-button-prev:focus-visible,
.dts-slider .swiper-button-next:hover,
.dts-slider .swiper-button-prev:hover,
.dts-slider .swiper-button-next:focus,
.dts-slider .swiper-button-prev:focus,
.dts-slider .swiper-button-next:focus-visible,
.dts-slider .swiper-button-prev:focus-visible {
  color: var(--ades-nav-color-hover, var(--ades-nav-color, var(--swiper-theme-color, currentColor))) !important;
  background-color: var(--ades-nav-bg-hover, var(--ades-nav-bg, transparent)) !important;
}

.ades-pro-slider .swiper-button-prev,
.dts-slider .swiper-button-prev {
  left: var(--ades-nav-prev-x, 10px);
  transform: translateY(calc(-50% + var(--ades-nav-prev-y, 0px)));
}

.ades-pro-slider .swiper-button-next,
.dts-slider .swiper-button-next {
  right: var(--ades-nav-next-x, 10px);
  transform: translateY(calc(-50% + var(--ades-nav-next-y, 0px)));
}

/* RTL: swap arrow positions so offsets behave intuitively */
.ades-pro-slider.swiper-rtl .swiper-button-prev,
.dts-slider.swiper-rtl .swiper-button-prev {
  left: auto;
  right: var(--ades-nav-prev-x, 10px);
}

.ades-pro-slider.swiper-rtl .swiper-button-next,
.dts-slider.swiper-rtl .swiper-button-next {
  right: auto;
  left: var(--ades-nav-next-x, 10px);
}

/* Arrow icon (Elementor Icons control) */
.ades-pro-slider .swiper-button-next .ades-nav-icon,
.ades-pro-slider .swiper-button-prev .ades-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ades-nav-icon-size, 18px);
  line-height: 1;
  color: inherit;
}

.ades-pro-slider .swiper-button-next .ades-nav-icon i,
.ades-pro-slider .swiper-button-prev .ades-nav-icon i {
  font-size: var(--ades-nav-icon-size, 18px);
  line-height: 1;
  color: inherit;
}

.ades-pro-slider .swiper-button-next .ades-nav-icon svg,
.ades-pro-slider .swiper-button-prev .ades-nav-icon svg {
  width: var(--ades-nav-icon-size, 18px);
  height: var(--ades-nav-icon-size, 18px);
  fill: currentColor !important;
  stroke: currentColor !important;
}

.ades-pro-slider .swiper-button-next .ades-nav-icon svg *,
.ades-pro-slider .swiper-button-prev .ades-nav-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.ades-pro-slider .swiper-button-next::after,
.ades-pro-slider .swiper-button-prev::after,
.dts-slider .swiper-button-next::after,
.dts-slider .swiper-button-prev::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  margin: 0 auto;
}

/* If we're rendering Elementor icons, hide the fallback chevrons */
.ades-pro-slider.ades-has-nav-icons .swiper-button-next::after,
.ades-pro-slider.ades-has-nav-icons .swiper-button-prev::after {
  content: none;
}

.ades-pro-slider .swiper-button-next::after,
.dts-slider .swiper-button-next::after {
  transform: rotate(45deg);
}

.ades-pro-slider .swiper-button-prev::after,
.dts-slider .swiper-button-prev::after {
  transform: rotate(-135deg);
}

/* Disabled arrows */
.ades-pro-slider .swiper-button-disabled,
.dts-slider .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Pagination ---------- */
.ades-pro-slider .swiper-pagination,
.dts-slider .swiper-pagination {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
  color: var(--ades-pagination-color, var(--swiper-theme-color, currentColor));
}

/* Default pagination placement */
.ades-pro-slider .swiper-pagination,
.dts-slider .swiper-pagination {
  bottom: var(--ades-pagination-bottom, 10px);
  text-align: center;
}

/* Pagination variants (basic compatibility) */
.ades-pro-slider .swiper-pagination-bullets,
.dts-slider .swiper-pagination-bullets {
  line-height: 1;
  display: flex;
  justify-content: var(--ades-pagination-align, center);
  align-items: center;
}

.ades-pro-slider .swiper-pagination-bullet,
.dts-slider .swiper-pagination-bullet {
  margin: 0 calc(var(--ades-bullet-gap, 4px) / 2);
  border-radius: 9999px;
}

.ades-pro-slider .swiper-pagination-fraction,
.dts-slider .swiper-pagination-fraction {
  bottom: 12px;
}

.ades-pro-slider .swiper-pagination-progressbar,
.dts-slider .swiper-pagination-progressbar {
  left: 0;
  width: 100%;
}

/* Bullets (also used for numbered bullets) */
.ades-pro-slider .swiper-pagination-bullet,
.dts-slider .swiper-pagination-bullet {
  width: var(--ades-bullet-size, 10px);
  height: var(--ades-bullet-size, 10px);
  opacity: 0.25;
  background: var(--ades-bullet-color, currentColor);
  color: var(--ades-bullet-text-color, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.ades-pro-slider .swiper-pagination-bullet-active,
.dts-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--ades-bullet-active-color, currentColor);
  color: var(--ades-bullet-active-text-color, #fff);
}

/* If bullets contain numbers, make them larger/clickable */
.ades-pro-slider .swiper-pagination-bullet:not(:empty),
.dts-slider .swiper-pagination-bullet:not(:empty) {
  width: max(calc(var(--ades-bullet-size, 10px) * 2), 20px);
  height: max(calc(var(--ades-bullet-size, 10px) * 2), 20px);
  border-radius: 9999px;
}

/* Progressbar */
.ades-pro-slider .swiper-pagination-progressbar,
.dts-slider .swiper-pagination-progressbar {
  position: relative;
  background: transparent;
  height: var(--ades-progress-height, 4px);
  left: 0;
  width: 100%;
  bottom: 0;
}

/* Progressbar position */
.ades-pro-slider.ades-progress-top .swiper-pagination-progressbar {
  top: var(--ades-progress-offset, 0px);
  bottom: auto;
}

.ades-pro-slider.ades-progress-bottom .swiper-pagination-progressbar {
  bottom: var(--ades-progress-offset, 0px);
  top: auto;
}

.ades-pro-slider .swiper-pagination-progressbar::before,
.dts-slider .swiper-pagination-progressbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ades-progress-track-color, currentColor);
  opacity: var(--ades-progress-track-opacity, 0.2);
}

.ades-pro-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.dts-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--ades-progress-fill-color, currentColor);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform-origin: left top;
}

/* Ensure progressbar fill starts from correct side in RTL. */
.ades-pro-slider.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.dts-slider.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

/* Fraction */
.ades-pro-slider .swiper-pagination-fraction,
.dts-slider .swiper-pagination-fraction {
  font-size: 12px;
  opacity: 0.85;
  color: var(--ades-fraction-color, currentColor);
  display: flex;
  justify-content: var(--ades-pagination-align, center);
}

/* Vertical pagination side + layout (bullets/fraction) */
.ades-pro-slider.swiper-vertical .swiper-pagination {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}

.ades-pro-slider.ades-vert-pagination-left.swiper-vertical .swiper-pagination {
  left: var(--ades-vertical-pagination-x, 10px);
  right: auto;
}

.ades-pro-slider.ades-vert-pagination-right.swiper-vertical .swiper-pagination {
  right: var(--ades-vertical-pagination-x, 10px);
  left: auto;
}

.ades-pro-slider.swiper-vertical .swiper-pagination-bullets {
  flex-direction: column;
}

/* Effect container width (cube/flip/cards) */
.ades-pro-slider.ades-effect-cube,
.ades-pro-slider.ades-effect-flip,
.ades-pro-slider.ades-effect-cards {
  max-width: var(--ades-effect-container-width, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Autoplay progress bar (separate from Swiper pagination) */
.ades-pro-slider .ades-autoplay-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 11;
  pointer-events: none;
  opacity: 0.9;
}

.ades-pro-slider .ades-autoplay-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--swiper-theme-color, currentColor);
  transform: scaleX(0);
  transform-origin: left center;
}

.ades-pro-slider.swiper-rtl .ades-autoplay-progress span {
  transform-origin: right center;
}

/* ---------- Thumbnails strip (ades-thumbs) ---------- */
.ades-thumbs {
  box-sizing: border-box;
  width: 100%;
  height: var(--ades-thumbs-height, 80px);
  margin-top: 10px;
}

.ades-thumbs .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.ades-thumbs .swiper-slide {
  width: calc(100% / var(--ades-thumbs-per-view, 4));
  height: 100%;
  opacity: 0.4;
  box-sizing: border-box;
  padding: 2px;
}

.ades-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.ades-thumbs .slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive main slide sizing: prefer an aspect-ratio, fallback to a clamp() height
   Uses widget-controlled CSS variable --ades-horizontal-height as maximum fallback. */
.ades-pro-slider .slide-inner {
  width: 100%;
  overflow: hidden;
  /* Prefer a responsive aspect ratio for consistent layouts */
  aspect-ratio: 16 / 9;
}

.ades-pro-slider .slide-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* If a specific horizontal height is set by the widget, use it as a max-height
   while keeping the proportional aspect-ratio on larger screens. */
.ades-pro-slider[style*="--ades-horizontal-height"] .slide-inner {
  /* clamp(min, preferred, max) — allow variable to act as max fallback */
  height: clamp(180px, 30vh, var(--ades-horizontal-height));
  aspect-ratio: auto;
}

/* Small-screen tweaks */
@media (max-width: 480px) {
  .ades-pro-slider .slide-inner {
    aspect-ratio: 4 / 3;
  }
}