/* ================================================
   Image Compare Section
   ================================================ */

/* 1. Component Variables */
.image-compare-box {
  --slider-handle-size: 48px;
  --slider-line-width: 2px;
  --slider-line-color: var(--genstore-surface-default, #fff);
  --label-padding: var(--genstore-spacing-gap-1600, 16px);
  --label-font-size: var(--genstore-fontSize-300, 14px);
}

/* 2. Base Layout */
.image-compare-box {
  width: 100%;
}
.image-compare-box.fixed-width {
    max-width: 1200px;
    margin: 0 auto;
  }

.image-compare__header {
  text-align: center;
  margin-bottom: var(--genstore-spacing-gap-3200, 32px);
}

.image-compare__wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: var(--genstore-borderRadius-400);
  user-select: none;
  touch-action: none;
  --aspect-ratio: 1.78;
  --aspect-padding: calc(100% / (var(--aspect-ratio)));
  padding-top: var(--aspect-padding);
}

.image-compare-box.image-height-adapt .image-compare__wrapper {
  height: auto;
  aspect-ratio: auto;
}

/* 3. Image Elements */
.image-compare__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-compare__image-inner {
  width: 100%;
  height: 100%;
}

.image-compare__img,
.image-compare__image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Before Image - always on top with clip-path */
.direction-horizontal .image-compare__image--before {
  clip-path: inset(0 calc(100% - var(--slider-position)) 0 0);
  z-index: 2;
}

/* After Image - clip left side to show only right portion */
.direction-horizontal .image-compare__image--after {
  z-index: 1;
  clip-path: inset(0 0 0 var(--slider-position));
}

/* Vertical mode */
.direction-vertical .image-compare__image--before {
  clip-path: inset(0 0 calc(100% - var(--slider-position)) 0);
  z-index: 2;
}

.direction-vertical .image-compare__image--after {
  z-index: 1;
  clip-path: inset(var(--slider-position) 0 0 0);
}

.image-compare__content {
  position: absolute;
  bottom: 24px;
  color: var(--genstore-neutral-texticon-900);
  left: 24px;
  max-width: 173px;
  text-align: left;
}

.image-compare__content .genstore-text-link a {
      width: 100%;
      color: var(--genstore-neutral-texticon-900, #141414);
    }

.image-compare__content .genstore-text-link a.xl_16 {
      font-size: var(--genstore-fontSize-300);
      padding: 0;
    }

/* After image label on right side */
.image-compare__image--after .image-compare__content .genstore-text-block {
      text-align: right;
    }
.image-compare__image--after .image-compare__content .genstore-text-link {
      text-align: right;
    }
.image-compare__image--after .image-compare__content {

    left: auto;
    right: 24px;
}

/* 5. Slider Handle */
.image-compare__slider {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Horizontal slider positioning */
.direction-horizontal .image-compare__slider {
  top: 0;
  bottom: 0;
  left: var(--slider-position);
  transform: translateX(-50%);
  width: var(--slider-handle-size);
  flex-direction: column;
}

/* Vertical slider positioning */
.direction-vertical .image-compare__slider {
  left: 0;
  right: 0;
  top: var(--slider-position);
  transform: translateY(-50%);
  height: var(--slider-handle-size);
  flex-direction: row;
}

.image-compare__slider-line {
  position: absolute;
  background: var(--genstore-neutral-background-default);
}

.direction-horizontal .image-compare__slider-line {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.direction-vertical .image-compare__slider-line {
  height: var(--slider-line-width);
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.image-compare__handle {
  padding: 14px;
  border-radius: 50%;
  background: var(--genstore-neutral-background-default);
  cursor: pointer;
  outline: none;
  border: none;
  pointer-events: auto;
  z-index: 5;
}

.image-compare__handle .image-compare__arrows {
    display: flex;
    align-items: center;
    gap: var(--genstore-spacing-gap-400, 4px);
    color: var(--genstore-neutral-texticon-900, #141414);
  }

.image-compare__handle .image-compare__arrows .svg-wrapper {
      width: 16px;
      height: 16px;
    }

/* Arrow rotations */
.image-compare__arrows .arrow-left {
  transform: rotate(90deg);
}

.image-compare__arrows .arrow-right {
  transform: rotate(-90deg);
}

.image-compare__arrows .arrow-up {
  transform: rotate(180deg);
}

/* 6. Focus states for accessibility */
.image-compare__handle:focus-visible {
  outline: 2px solid var(--genstore-brand-600, #0066cc);
  outline-offset: 2px;
}

/* 7. Dragging state - disable transitions */
.image-compare__wrapper.is-dragging .image-compare__image,
.image-compare__wrapper.is-dragging .image-compare__slider {
  transition: none;
}

/* 8. Smooth transitions when not dragging */
.image-compare__image {
  transition: clip-path 0.1s ease;
}

.image-compare__slider {
  transition:
    left 0.1s ease,
    top 0.1s ease;
}

.image-compare-container {
  border-radius: var(--genstore-borderRadius-400);
}

/* 9. Responsive Styles */
@media screen and (max-width: 749px) {
  .image-compare__content {
    gap: 0;
    left: 14px;
    bottom: 14px;
  }
    .image-compare__image--after .image-compare__content {
      left: auto;
      right: 14px;
    }
      .image-compare__handle .image-compare__arrows .svg-wrapper {
        width: 16px;
        height: 16px;
      }

  .image-compare-box {
    --slider-handle-size: 40px;
    --label-padding: var(--genstore-spacing-gap-1200, 12px);
    --label-font-size: var(--genstore-fontSize-200, 12px);
  }
}

/* 10. Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .image-compare__image,
  .image-compare__slider,
  .image-compare__handle {
    transition: none;
  }
}

/* 11. Print styles */
@media print {
  .image-compare__slider,
  .image-compare__handle {
    display: none !important;
  }

  .image-compare__image--before {
    clip-path: none !important;
  }

  .image-compare__image--after {
    display: none;
  }
}