/* ========================================
   COMPARISON SLIDER - Before/After Reveal
   ======================================== */

.comparison-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Override any GeneratePress container styles */
.comparison-slider.gbp-section {
  display: block;
}

/* Left pane stays in flow to establish height */
.comparison-slider__pane--left {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Right pane overlays absolutely */
.comparison-slider__pane--right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  clip-path: inset(0 0 0 100%);
}

/* Make sure inner content fills properly */
.comparison-slider__pane > .gbp-section__inner {
  min-height: 100%;
}

/* Drag Handle */
.comparison-slider__handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  z-index: 5;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visible handle line */
.comparison-slider__handle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--accent-2) 0%,
    var(--global-color-10) 100%
  );
  border-radius: 2px;
}
.comparison-slider__handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  width: 25px;
  height: 100%;
  background: var(--accent);
  z-index: -1;
}

/* Pulse animation */
@keyframes grip-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(10, 189, 199, 0.3);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 6px 30px rgba(10, 189, 199, 0.5);
  }
}

.comparison-slider__grip {
  position: relative;
  width: 48px;
  height: 48px;
  background: var(--accent-2);
  border: 2px solid var(--global-color-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 189, 199, 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  animation: grip-pulse 2s ease-in-out infinite;
}

.comparison-slider__grip:hover {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(10, 189, 199, 0.5);
}

/* Arrows inside grip */
.comparison-slider__grip svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2;
}

.comparison-slider__grip svg:first-child {
  margin-right: -6px;
}

.comparison-slider__grip svg:last-child {
  margin-left: -6px;
}

/* Touch-friendly hit area */
.comparison-slider__hit-area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 100%;
  cursor: ew-resize;
}

/* Labels */
.comparison-slider__label {
  position: absolute;
  top: 48%;
  padding: 8px 16px;
  background: var(--accent);
  border: 2px solid var(--accent-2);
  border-radius: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  max-width: 200px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--accent-2);
  z-index: 5;
  pointer-events: none;
}

/* Shake animation */
@keyframes hint-shake {
  0%,
  85%,
  100% {
    transform: translateX(0);
  }
  88% {
    transform: translateX(-6px);
  }
  91% {
    transform: translateX(6px);
  }
  94% {
    transform: translateX(-4px);
  }
  97% {
    transform: translateX(4px);
  }
}

.comparison-slider__label--left {
  right: 65px;
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 0.3s ease 0.4s,
    transform 0.3s ease 0.4s;
}

/* Show left label only when hovering the flip-card-container */
.comparison-slider.in-view:not(.hint-expired) .comparison-slider__label--left,
.comparison-slider:has(.hint-area:hover) .comparison-slider__label--left,
.comparison-slider:has(.comparison-slider__handle:hover)
  .comparison-slider__label--left {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  animation: hint-shake 3s ease-in-out infinite;
  animation-delay: 1s;
}

.comparison-slider__label--left svg {
  width: 50px;
  height: 50px;
  fill: var(--accent-2);
}

.comparison-slider__label--right {
  left: 25px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.comparison-slider.is-revealing .comparison-slider__label--right {
  opacity: 1;
}

/* ========================================
   MOBILE DISABLED STATE (<768px)
   When data-disable-mobile="true" is set,
   JS adds .cs-mobile-disabled class.
   Both panes stack naturally, slider UI hidden.
   ======================================== */

@media (max-width: 767px) {

  .comparison-slider.cs-mobile-disabled {
    overflow: visible;
  }

  /* Right pane becomes normal flow, stacks below left */
  .comparison-slider.cs-mobile-disabled .comparison-slider__pane--right {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    clip-path: none !important;
  }

  /* Hide all slider UI elements */
  .comparison-slider.cs-mobile-disabled .comparison-slider__handle,
  .comparison-slider.cs-mobile-disabled .comparison-slider__grip,
  .comparison-slider.cs-mobile-disabled .comparison-slider__hit-area,
  .comparison-slider.cs-mobile-disabled .comparison-slider__label {
    display: none !important;
  }

  /* Ensure both panes display their content naturally */
  .comparison-slider.cs-mobile-disabled .comparison-slider__pane--left,
  .comparison-slider.cs-mobile-disabled .comparison-slider__pane--right {
    min-height: auto;
  }

  .comparison-slider.cs-mobile-disabled .comparison-slider__pane > .gbp-section__inner {
    min-height: auto;
  }
}