/* imagecomparisonslider-v1.css */

/* handle lines – horizontal only */
.imagecomparisonslider-horizontal .imagecomparisonslider-handle::before,
.imagecomparisonslider-horizontal .imagecomparisonslider-handle::after {
  content: "";
  display: block;
  background: #ffffff;
  position: absolute;
  z-index: 30;
  box-shadow: none;
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px;
}

/* overlay + labels */
.imagecomparisonslider-before-label,
.imagecomparisonslider-after-label,
.imagecomparisonslider-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}

.imagecomparisonslider-before-label,
.imagecomparisonslider-after-label {
  transition-property: opacity;
}

/* LABEL "BUBBLE" – no typography here */
.imagecomparisonslider-before-label::before,
.imagecomparisonslider-after-label::before {
  position: absolute;
  background: rgba(255,255,255,0.2);
  padding: 0 10px;            /* desktop/tablet: 10px left/right */
  border-radius: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

/* vertical centering (height ~38px) */
.imagecomparisonslider-horizontal .imagecomparisonslider-before-label::before,
.imagecomparisonslider-horizontal .imagecomparisonslider-after-label::before {
  top: 50%;
  margin-top: -19px;
}

/* default label visibility */
.imagecomparisonslider-before-label  { opacity: 0; }
.imagecomparisonslider-after-label   { opacity: 0; }

.imagecomparisonslider-before-label::before { content: attr(data-content); }
.imagecomparisonslider-after-label::before  { content: attr(data-content); }

/* desktop/tablet: distance from image edge */
.imagecomparisonslider-horizontal .imagecomparisonslider-before-label::before {
  left: 20px;   /* gap from LEFT edge */
}

.imagecomparisonslider-horizontal .imagecomparisonslider-after-label::before {
  right: 20px;  /* gap from RIGHT edge */
}

/* overlay fade */
.imagecomparisonslider-overlay {
  transition-property: background;
  background: rgba(0,0,0,0);
  z-index: 25;
}

.imagecomparisonslider-overlay:hover {
  background: rgba(0,0,0,0.3);
}

.imagecomparisonslider-overlay:hover .imagecomparisonslider-after-label,
.imagecomparisonslider-overlay:hover .imagecomparisonslider-before-label {
  opacity: 1;
}

/* container + layers */
.imagecomparisonslider-container {
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.imagecomparisonslider-container * {
  box-sizing: content-box;
}

.imagecomparisonslider-before {
  z-index: 1;
}

.imagecomparisonslider-after {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

/* absolutely stack both images so clip() can split them */
.imagecomparisonslider-before img,
.imagecomparisonslider-after img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* handle */
.imagecomparisonslider-handle {
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -28px;
  margin-top: -28px;
  border: 3px solid #ffffff;
  border-radius: 1000px;
  box-shadow: none;           /* no drop shadow */
  z-index: 40;
  cursor: pointer;
  animation: imagecomparisonslider-pulse 1.5s infinite;  /* always bouncing */
}

/* handle line offsets (horizontal) */
.imagecomparisonslider-horizontal .imagecomparisonslider-handle::before {
  bottom: 50%;
  margin-bottom: 27px;
}

.imagecomparisonslider-horizontal .imagecomparisonslider-handle::after {
  top: 50%;
  margin-top: 27px;
}

/* arrows */
.imagecomparisonslider-left-arrow,
.imagecomparisonslider-right-arrow {
  width: 0;
  height: 0;
  border: 10px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

.imagecomparisonslider-left-arrow {
  border-right: 10px solid #ffffff;
  left: 50%;
  margin-left: -28px;
}

.imagecomparisonslider-right-arrow {
  border-left: 10px solid #ffffff;
  right: 50%;
  margin-right: -28px;
}

/* pulse animation */
@keyframes imagecomparisonslider-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

/* keyboard focus */
.imagecomparisonslider-handle:focus {
  outline: 2px solid #ffffff;
}

/* ========= MOBILE (<= 767px) ========= */
@media (max-width: 767px) {
  .imagecomparisonslider-before-label::before,
  .imagecomparisonslider-after-label::before {
    padding: 0 5px;           /* mobile: 5px left/right padding */
  }

  .imagecomparisonslider-horizontal .imagecomparisonslider-before-label::before {
    left: 10px;               /* mobile: 10px from LEFT edge */
  }

  .imagecomparisonslider-horizontal .imagecomparisonslider-after-label::before {
    right: 10px;              /* mobile: 10px from RIGHT edge */
  }
}