/* =============================================
   DISORDER ELEMENTS — Loop Carousel
   disorder-loop-carousel.css
   ============================================= */

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

/* ── Track wrapper: clips overflow ── */
.dlc-track-wrapper {
  overflow: hidden;
  width: 100%;
}

/* ── Track: flex row ── */
.dlc-track {
  display: flex;
  gap: var(--dlc-gap, 20px);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

/* Grabbing cursor only while actively dragging (set via JS) */
.dlc-track.is-dragging {
  cursor: grabbing !important;
}

/* ── Each card ── */
.dlc-item {
  flex: 0 0 auto;
  min-width: 0;
}

/* Remove Elementor-added sizing on inner containers */
.dlc-item .elementor-section,
.dlc-item .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Controls row ── */
.dlc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: var(--dlc-controls-mt, 28px);
  max-width: 100%;
}

/* ── Arrow buttons ── */
.dlc-arrow {
  width: var(--dlc-arrow-size, 40px) !important;
  height: var(--dlc-arrow-size, 40px) !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--dlc-arrow-bg, transparent) !important;
  border: var(--dlc-arrow-border-width, 1px) solid var(--dlc-arrow-border-color, rgba(255,255,255,0.12)) !important;
  border-radius: var(--dlc-arrow-border-radius, 50%) !important;
  color: var(--dlc-arrow-color, #ffffff) !important;
  cursor: pointer !important;
  transition: background 0.2s cubic-bezier(0.2,1,0.2,1),
              border-color 0.2s ease,
              color 0.2s ease,
              transform 0.15s cubic-bezier(0.2,1,0.2,1) !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}

.dlc-arrow svg {
  width: var(--dlc-arrow-icon, 16px) !important;
  height: var(--dlc-arrow-icon, 16px) !important;
  display: block !important;
  pointer-events: none !important;
}

.dlc-arrow:hover,
.dlc-arrow:focus,
.dlc-arrow:focus-visible {
  background: var(--dlc-arrow-bg-h, rgba(255,255,255,0.06)) !important;
  border-color: var(--dlc-arrow-border-h, rgba(255,255,255,0.4)) !important;
  color: var(--dlc-arrow-color-h, #ffffff) !important;
  box-shadow: none !important;
  outline: none !important;
}

.dlc-arrow:active {
  transform: scale(0.90) !important;
}

.dlc-arrow:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none !important;
}

/* ── Counter ── */
.dlc-counter {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  font-family: sans-serif;
  min-width: 16px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
  user-select: none;
}

/* ── Progress bars ── */
.dlc-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 260px;
}

.dlc-dot {
  flex: 1;
  height: var(--dlc-dot-h, 3px) !important;
  border-radius: var(--dlc-dot-h, 3px) !important;
  background: var(--dlc-dot-color, rgba(255,255,255,0.15)) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.3s ease !important;
  min-width: 0;
  box-shadow: none !important;
  outline: none !important;
}

.dlc-dot:hover,
.dlc-dot:focus {
  background: var(--dlc-dot-color, rgba(255,255,255,0.3)) !important;
  outline: none !important;
  box-shadow: none !important;
}

.dlc-dot.is-active {
  background: var(--dlc-dot-active, #e4d8b2) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .dlc-controls {
    gap: 10px;
	max-width:85%;
	margin-inline:auto;
  }
}