/* cignyl-sftp 20260824 */
/* ------------------------------ */
/* v2 Carousel (shadcn-like)      */
/* ------------------------------ */

.v2-theme .v2-carousel {
  position: relative;
  width: 100%;
}

.v2-theme .v2-carousel__frame {
  position: relative;
  width: 100%;
}

.v2-theme .v2-carousel__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Default smooth scroll helps non-animated programmatic jumps feel animated. */
  scroll-behavior: smooth;
  /* JS may set an explicit height to match the active slide */
  transition: height 180ms ease-out;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

/* While animating via jQuery, disable scroll snapping and native smooth behavior */
.v2-theme .v2-carousel__viewport[data-v2-carousel-animating="true"] {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* hide scrollbars (best effort) */
.v2-theme .v2-carousel__viewport {
  scrollbar-width: none; /* Firefox */
}
.v2-theme .v2-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.v2-theme .v2-carousel__track {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.v2-theme .v2-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.v2-theme .v2-carousel__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius);
}

.v2-theme .v2-carousel--arrows-true {
  /* Used to offset slide content so nav buttons don't cover it */
  --v2-carousel-nav-size: 2.25rem;
  --v2-carousel-nav-gap: var(--v2-space-xsm);
}

/* Prevent arrow buttons from obscuring slide content */
.v2-theme .v2-carousel--arrows-true .v2-carousel__slide-inner {
  padding-left: calc(var(--v2-space-md) + var(--v2-carousel-nav-size) + var(--v2-carousel-nav-gap));
  padding-right: calc(var(--v2-space-md) + var(--v2-carousel-nav-size) + var(--v2-carousel-nav-gap));
}

.v2-theme .v2-carousel__empty {
  padding: var(--v2-space-md);
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background));
}

/* nav buttons */
.v2-theme .v2-carousel__nav {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.10);
  cursor: pointer;

  width: var(--v2-carousel-nav-size, 2.25rem);
  height: var(--v2-carousel-nav-size, 2.25rem);
  font-size: 0.875rem;

  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.v2-theme .v2-carousel__nav:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.v2-theme .v2-carousel__nav:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.v2-theme .v2-carousel__nav:disabled,
.v2-theme .v2-carousel__nav:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.v2-theme .v2-carousel__nav--prev {
  left: var(--v2-space-sm);
}

.v2-theme .v2-carousel__nav--next {
  right: var(--v2-space-sm);
}

/* dots */
.v2-theme .v2-carousel__dots {
  margin-top: var(--v2-space-sm);
  display: flex;
  justify-content: center;
  gap: var(--v2-space-xsm);
}

.v2-theme .v2-carousel__dot {
  all: unset;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--border));
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.v2-theme .v2-carousel__dot[data-state="active"] {
  background: hsl(var(--primary));
  transform: scale(1.1);
}

.v2-theme .v2-carousel__dot:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.v2-theme .v2-carousel__dot:disabled,
.v2-theme .v2-carousel__dot:disabled {
  opacity: 0.5;
  pointer-events: none;
}

