/* Root slider shell */
.kds-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--kds-height, 60vh);
  overflow: hidden;
  background: #000;
  color: #fff;

  /* Default design tokens – can be overridden by theme or inline styles */
  --kds-content-bg: rgba(0,0,0,0.65);
  --kds-text-color: #ffffff;
  --kds-arrow-bg: rgba(0,0,0,0.6);
  --kds-arrow-hover-bg: rgba(0,0,0,0.8);
  --kds-arrow-color: #ffffff;
  --kds-arrow-hover-color: #ffffff;
  --kds-pag-color: rgba(255,255,255,0.45);
  --kds-pag-active: #ffffff;
}

/* Fit helpers */
.kds-fit-cover .kds-bg,
.kds-fit-cover .kds-bg-video {
  object-fit: cover;
}

.kds-fit-contain .kds-bg,
.kds-fit-contain .kds-bg-video {
  object-fit: contain;
  background-color: #000;
}

/* Track */
.kds-slider .kds-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slides */
.kds-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.kds-slide.kds-active {
  opacity: 1;
  z-index: 2;
}

/* Background image / video */
.kds-bg,
.kds-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  z-index: 1;
}

/* Content overlay grid */
.kds-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

/* Inner card */
.kds-inner {
  max-width: 800px;
  width: 100%;
  background-color: var(--kds-content-bg, rgba(0,0,0,0.65));
  padding: 1.5rem 1.75rem;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Text styles */
.kds-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--kds-text-color, #ffffff);
}

.kds-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kds-text-color, #ffffff);
}

/* Position helpers */
.kds-pos-top-left        { align-items:flex-start; justify-items:flex-start; }
.kds-pos-top-center      { align-items:flex-start; justify-items:center; }
.kds-pos-top-right       { align-items:flex-start; justify-items:flex-end; }
.kds-pos-center-left     { align-items:center; justify-items:flex-start; }
.kds-pos-center-center   { align-items:center; justify-items:center; }
.kds-pos-center-right    { align-items:center; justify-items:flex-end; }
.kds-pos-bottom-left     { align-items:flex-end; justify-items:flex-start; }
.kds-pos-bottom-center   { align-items:flex-end; justify-items:center; }
.kds-pos-bottom-right    { align-items:flex-end; justify-items:flex-end; }

/* Arrows */
.kds-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:none;
  background: var(--kds-arrow-bg, rgba(0,0,0,0.6));
  color: var(--kds-arrow-color, #ffffff);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  z-index: 10;
}

.kds-arrow-prev { left:16px; }
.kds-arrow-next { right:16px; }

.kds-arrow:hover {
  background: var(--kds-arrow-hover-bg, rgba(0,0,0,0.8));
  color: var(--kds-arrow-hover-color, #ffffff);
}

.kds-arrow:focus {
  outline:2px solid rgba(255,255,255,0.7);
  outline-offset:2px;
}

/* Pagination */
.kds-pagination {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index: 10;
}

.kds-page-bullet {
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  background: var(--kds-pag-color, rgba(255,255,255,0.45));
  cursor:pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.kds-page-bullet.is-active {
  width:18px;
  background: var(--kds-pag-active, #ffffff);
}

/* Themes */

/* Dark */
.kds-theme-dark {
  --kds-content-bg: rgba(0,0,0,0.7);
  --kds-text-color: #ffffff;
  --kds-arrow-bg: rgba(0,0,0,0.9);
  --kds-arrow-hover-bg: rgba(0,0,0,1);
  --kds-arrow-color: #ffffff;
  --kds-arrow-hover-color: #ffffff;
  --kds-pag-color: rgba(255,255,255,0.4);
  --kds-pag-active: #ffffff;
}

/* Glass */
.kds-theme-glass {
  --kds-content-bg: rgba(0,0,0,0.35);
  --kds-text-color: #ffffff;
  --kds-arrow-bg: rgba(255,255,255,0.16);
  --kds-arrow-hover-bg: rgba(255,255,255,0.35);
  --kds-arrow-color: #ffffff;
  --kds-arrow-hover-color: #ffffff;
  --kds-pag-color: rgba(255,255,255,0.55);
  --kds-pag-active: #ffffff;
}

/* Light */
.kds-theme-light {
  --kds-content-bg: #ffffff;
  --kds-text-color: #222222;
  --kds-arrow-bg: rgba(255,255,255,0.9);
  --kds-arrow-hover-bg: #ffffff;
  --kds-arrow-color: #222222;
  --kds-arrow-hover-color: #222222;
  --kds-pag-color: rgba(0,0,0,0.25);
  --kds-pag-active: #000000;
}

/* Outline */
.kds-theme-outline {
  --kds-content-bg: rgba(0,0,0,0.2);
  --kds-text-color: #ffffff;
  --kds-arrow-bg: transparent;
  --kds-arrow-hover-bg: rgba(255,255,255,0.12);
  --kds-arrow-color: #ffffff;
  --kds-arrow-hover-color: #ffffff;
  --kds-pag-color: transparent;
  --kds-pag-active: #ffffff;
}

/* Accent (teal) */
.kds-theme-accent {
  --kds-content-bg: rgba(15,118,110,0.85);
  --kds-text-color: #e0f2f1;
  --kds-arrow-bg: #0f766e;
  --kds-arrow-hover-bg: #115e59;
  --kds-arrow-color: #e0f2f1;
  --kds-arrow-hover-color: #e0f2f1;
  --kds-pag-color: rgba(45,212,191,0.5);
  --kds-pag-active: #5eead4;
}

/* Responsiveness */
@media (max-width: 768px) {
  .kds-slider {
    height: auto;
    min-height: 55vh;
  }

  .kds-overlay {
    padding: 1.25rem;
  }

  .kds-inner {
    max-width: 100%;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
  }

  .kds-title {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
  }

  .kds-text {
    font-size: 0.95rem;
  }

  .kds-arrow {
    width: 34px;
    height: 34px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }

  .kds-pagination {
    bottom: 12px;
    gap: 6px;
  }
}