/* ===============================
   JX Slider (maxed CSS)
   =============================== */

/* Theme tokens (tweak as needed) */
.jx-slider {
  --jx-height: 320px;                 /* slide height; change or override per-instance */
  --jx-radius: 16px;                  /* corner radius */
  --jx-gap: 8px;                      /* space between dots */
  --jx-dot-size: 9px;                 /* dot diameter */
  --jx-accent: #2563eb;               /* brand accent (focus ring) */
  --jx-arrow-bg: rgba(0,0,0,.5);      /* arrow background */
  --jx-arrow-bg-hover: rgba(0,0,0,.7);
  --jx-arrow-color: #fff;
  --jx-dot-bg: #cfcfcf;
  --jx-dot-active: #111;
  --jx-shadow: 0 10px 20px rgba(0,0,0,.15);
  --jx-dots-offset: 10px;             /* distance from bottom */
}

/* Container */
.jx-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--jx-radius);
  background: #000;                   /* behind images */
  box-shadow: var(--jx-shadow);
  -webkit-tap-highlight-color: transparent;
}

/* Track */
.jx-track {
  display: flex;
  will-change: transform;
  transition: transform 300ms ease;
}

/* Slides */
.jx-slide {
  flex: 0 0 100%;
  max-width: 100%;
  user-select: none;
}
.jx-slide img {
  display: block;
  width: 100%;
  height: var(--jx-height);
  object-fit: cover;
  pointer-events: none;               /* smoother drags/swipes */
  -webkit-user-drag: none;
}

/* Arrows */
.jx-prev,
.jx-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 9999px;
  background: var(--jx-arrow-bg);
  color: var(--jx-arrow-color);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: saturate(120%) blur(2px);
  transition: background 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.jx-prev { left: 8px; }
.jx-next { right: 8px; }

.jx-prev:hover,
.jx-next:hover { background: var(--jx-arrow-bg-hover); }
.jx-prev:active,
.jx-next:active { transform: translateY(-50%) scale(0.98); }

.jx-prev:focus-visible,
.jx-next:focus-visible {
  outline: 2px solid var(--jx-accent);
  outline-offset: 2px;
}

/* Disabled arrows (non-loop mode, single slide, etc.) */
.jx-prev[disabled],
.jx-next[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* Dots / pagination */
.jx-dots {
  position: absolute;
  left: 50%;
  bottom: var(--jx-dots-offset);
  transform: translateX(-50%);
  display: flex;
  gap: var(--jx-gap);
  align-items: center;
  z-index: 4;
}
.jx-dot {
  width: var(--jx-dot-size);
  height: var(--jx-dot-size);
  border-radius: 50%;
  border: 0;
  background: var(--jx-dot-bg);
  cursor: pointer;
  padding: 0;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
}
.jx-dot:hover { transform: scale(1.15); }
.jx-dot:focus-visible {
  outline: 2px solid var(--jx-accent);
  outline-offset: 2px;
}
.jx-dot.is-active { background: var(--jx-dot-active); }

/* States while dragging (optional hooks) */
.jx-slider.is-dragging .jx-track { transition: none; }
.jx-slider.is-dragging { cursor: grabbing; }

/* If there’s only one slide, hide controls gracefully */
.jx-slider[data-slides="1"] .jx-prev,
.jx-slider[data-slides="1"] .jx-next,
.jx-slider[data-slides="1"] .jx-dots {
  display: none !important;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .jx-slider { --jx-height: 300px; }
}
@media (max-width: 768px) {
  .jx-slider { --jx-height: 260px; }
  .jx-prev, .jx-next { padding: 8px 12px; }
}
@media (max-width: 480px) {
  .jx-slider { --jx-height: 220px; --jx-dot-size: 8px; --jx-dots-offset: 8px; }
  .jx-prev { left: 6px; }
  .jx-next { right: 6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jx-track { transition: none; }
  .jx-prev, .jx-next, .jx-dot { transition: none; }
}

/* Dark mode tweak (optional) */
@media (prefers-color-scheme: dark) {
  .jx-slider { background: #0b0b0b; --jx-dot-bg: #555; --jx-dot-active: #eee; }
}

/* RTL support */
[dir="rtl"] .jx-prev { right: 8px; left: auto; }
[dir="rtl"] .jx-next { left: 8px; right: auto; }

/* Optional: full-width / aspect-ratio variant
   Use this if you prefer a fixed ratio instead of a fixed height:
   .jx-slider { aspect-ratio: 16/9; }
   .jx-slide img { height: 100%; }
*/