/* ==========================================================================
   SlideDiff Frontend Styles
   ========================================================================== */

.slidediff-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 1.5em 0;
  line-height: 0; /* Prevents ghost whitespace below images */
  border-radius: 4px; /* Optional slight rounding */
  /* Fallback if JS doesn't set --sd-pos immediately */
  --sd-pos: var(--sd-start);
}

.slidediff-wrapper.has-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Prevent native image dragging that breaks the slider UX */
.slidediff-wrapper img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  height: auto;
  display: block;
}

/* --- The Layers --- */
.sd-layer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sd-layer-before {
  position: absolute;
  top: 0;
  left: 0;
  /* Hardware acceleration for smooth sliding */
  transform: translateZ(0);
  /* Horizontal Masking (Default) */
  clip-path: polygon(0 0, var(--sd-pos) 0, var(--sd-pos) 100%, 0 100%);
}

/* Vertical Masking */
.slidediff-wrapper[data-orientation="vertical"] .sd-layer-before {
  clip-path: polygon(0 0, 100% 0, 100% var(--sd-pos), 0 var(--sd-pos));
}

/* --- Labels --- */
.sd-label {
  position: absolute;
  top: 20px;
  padding: 6px 14px;
  background: var(--sd-label-bg);
  color: var(--sd-label-txt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
  z-index: 10;
  line-height: 1.2;
  font-family: inherit;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Let clicks pass through to the slider */
}

/* Horizontal Label Positioning */
.sd-label-before {
  left: 20px;
}
.sd-label-after {
  right: 20px;
}

/* Vertical Label Positioning (Overrides) */
.slidediff-wrapper[data-orientation="vertical"] .sd-label-before {
  top: 20px;
  left: 20px;
  right: auto;
}
.slidediff-wrapper[data-orientation="vertical"] .sd-label-after {
  top: auto;
  bottom: 20px;
  left: 20px;
  right: auto;
}

/* Visibility Settings */
.vis-hover {
  opacity: 0;
}
.slidediff-wrapper:hover .vis-hover {
  opacity: 1;
}

/* --- The Handle & Line --- */
.sd-handle {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center the line */
  transform: translateX(-50%);
  left: var(--sd-pos);
  top: 0;
  bottom: 0;
  width: 40px; /* Touch target size */
  cursor: ew-resize;
  touch-action: pan-y; /* Allows vertical scrolling on mobile */
}

/* Handle Orientation Adjustments */
.slidediff-wrapper[data-orientation="vertical"] .sd-handle {
  top: var(--sd-pos);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 40px;
  transform: translateY(-50%);
  cursor: ns-resize;
  touch-action: pan-x;
}

/* The actual visual line */
.sd-handle-line {
  position: absolute;
  background: var(--sd-handle-color);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Horizontal line */
.slidediff-wrapper[data-orientation="horizontal"] .sd-handle-line {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Vertical line */
.slidediff-wrapper[data-orientation="vertical"] .sd-handle-line {
  height: 2px;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Handle Buttons (Circle/Arrows Styles) --- */
.sd-handle-button {
  width: 36px;
  height: 36px;
  background: var(--sd-handle-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333; /* Icon color */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease;
  position: relative;
  z-index: 2;
}

.sd-handle:active .sd-handle-button {
  transform: scale(0.95);
}

/* SVGs inside the button */
.sd-handle-button svg {
  width: 18px;
  height: 18px;
}

/* Rotate arrows for vertical sliders */
.slidediff-wrapper[data-orientation="vertical"] .sd-handle-button {
  transform: rotate(90deg);
}

.slidediff-wrapper[data-orientation="vertical"]
  .sd-handle:active
  .sd-handle-button {
  transform: rotate(90deg) scale(0.95);
}

/* Apply specific Handle Styles */
.sd-handle.style-default .sd-handle-button {
  border-radius: 4px;
}
.sd-handle.style-circle .sd-handle-button svg {
  display: none;
} /* Just a plain circle */