/* TTP Image Compare v1.1.1 */
.ttp-image-compare,
.ttp-image-compare *{ box-sizing:border-box; }
.ttp-image-compare [hidden]{ display:none !important; }

.ttp-image-compare{
  max-width:760px;
  margin:20px auto;
  color:#172033;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ttp-image-compare.alignwide{ max-width:980px; }
.ttp-image-compare.alignfull{ max-width:none; }

.ttp-image-compare.is-frame-card{
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow:0 16px 36px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.05);
}
.ttp-image-compare.is-frame-minimal{
  padding:10px;
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#fff;
}
.ttp-image-compare.is-frame-bare{ padding:0; }

.ttp-image-compare-media,
.ttp-image-compare-slider,
.ttp-image-compare-stack,
.ttp-image-compare-side-by-side,
.ttp-image-compare-panel{
  position:relative;
}

.ttp-image-compare-media{
  overflow:hidden;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#eff6ff;
}
.ttp-image-compare.is-frame-bare .ttp-image-compare-media{ border:0; }

.ttp-image-compare.is-ratio-wide .ttp-image-compare-media{ aspect-ratio:16 / 9; }
.ttp-image-compare.is-ratio-photo .ttp-image-compare-media{ aspect-ratio:4 / 3; }
.ttp-image-compare.is-ratio-square .ttp-image-compare-media{ aspect-ratio:1 / 1; }
.ttp-image-compare.is-ratio-portrait .ttp-image-compare-media{ aspect-ratio:4 / 5; }
.ttp-image-compare.is-mode-stacked .ttp-image-compare-media,
.ttp-image-compare.is-mode-side-by-side .ttp-image-compare-media{ aspect-ratio:auto; }

.ttp-image-compare-img,
.ttp-image-compare-placeholder{
  display:block;
  width:100%;
  height:100%;
}
.ttp-image-compare-img{ object-position:center; }
.ttp-image-compare-placeholder{
  display:grid;
  place-items:center;
  min-height:220px;
  color:#64748b;
  font-weight:650;
}

.ttp-image-compare-slider{
  height:100%;
  min-height:260px;
  --ttp-compare-position:50%;
  --ttp-compare-position-num:.5;
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.ttp-image-compare.is-direction-vertical .ttp-image-compare-slider{ cursor:ns-resize; }
.ttp-image-compare-slider.is-dragging{ cursor:grabbing; }
.ttp-image-compare-base,
.ttp-image-compare-overlay{
  position:absolute;
  inset:0;
}
.ttp-image-compare-overlay{
  width:var(--ttp-compare-position);
  overflow:hidden;
}
.ttp-image-compare-overlay .ttp-image-compare-img,
.ttp-image-compare-overlay .ttp-image-compare-placeholder{
  width:calc(100% / (var(--ttp-compare-position-num, .5)));
  max-width:none;
}
.ttp-image-compare.is-direction-vertical .ttp-image-compare-overlay{
  width:100%;
  height:var(--ttp-compare-position);
}
.ttp-image-compare.is-direction-vertical .ttp-image-compare-overlay .ttp-image-compare-img,
.ttp-image-compare.is-direction-vertical .ttp-image-compare-overlay .ttp-image-compare-placeholder{
  width:100%;
  height:calc(100% / (var(--ttp-compare-position-num, .5)));
}

.ttp-image-compare-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--ttp-compare-position);
  z-index:4;
  width:0;
  transform:translateX(-50%);
  border-left:2px solid rgba(255,255,255,.96);
  box-shadow:0 0 0 1px rgba(15,23,42,.16);
  pointer-events:none;
}
.ttp-image-compare.is-direction-vertical .ttp-image-compare-handle{
  top:var(--ttp-compare-position);
  right:0;
  bottom:auto;
  left:0;
  width:auto;
  height:0;
  transform:translateY(-50%);
  border-top:2px solid rgba(255,255,255,.96);
  border-left:0;
}
.ttp-image-compare-handle span{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:#fff;
  color:#172033;
  font-size:18px;
  font-weight:800;
  line-height:1;
  box-shadow:0 12px 28px rgba(15,23,42,.24);
}
.ttp-image-compare.is-handle-line .ttp-image-compare-handle span{
  width:18px;
  height:18px;
  font-size:0;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
}
.ttp-image-compare.is-handle-pill .ttp-image-compare-handle span{
  width:58px;
  height:34px;
  border-radius:999px;
  font-size:16px;
}
.ttp-image-compare.is-handle-contrast .ttp-image-compare-handle{
  border-color:#facc15;
  box-shadow:0 0 0 1px rgba(15,23,42,.55);
}
.ttp-image-compare.is-handle-contrast .ttp-image-compare-handle span{
  background:#111827;
  color:#facc15;
  box-shadow:0 14px 30px rgba(0,0,0,.36);
}

.ttp-image-compare-slider-input{
  position:absolute;
  inset:auto 16px 16px;
  z-index:5;
  width:calc(100% - 32px);
  accent-color:#2563eb;
  cursor:pointer;
  touch-action:pan-x;
}
.ttp-image-compare.is-direction-vertical .ttp-image-compare-slider-input{
  right:16px;
  bottom:16px;
  left:auto;
  width:42%;
  min-width:150px;
}

.ttp-image-compare-chip{
  position:absolute;
  z-index:3;
  display:inline-flex;
  max-width:calc(100% - 24px);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:12px;
  font-weight:750;
  line-height:1;
  box-shadow:0 10px 22px rgba(15,23,42,.18);
}
.ttp-image-compare-slider .is-before{ left:12px; top:12px; }
.ttp-image-compare-slider .is-after{ right:12px; top:12px; }
.ttp-image-compare.is-labels-bottom .ttp-image-compare-slider .is-before,
.ttp-image-compare.is-labels-bottom .ttp-image-compare-slider .is-after{ top:auto; bottom:12px; }
.ttp-image-compare.is-labels-bottom .ttp-image-compare-slider-input{ bottom:50px; }
.ttp-image-compare.is-labels-center .ttp-image-compare-slider .is-before{
  top:50%;
  left:12px;
  transform:translateY(-50%);
}
.ttp-image-compare.is-labels-center .ttp-image-compare-slider .is-after{
  top:50%;
  right:12px;
  transform:translateY(-50%);
}
.ttp-image-compare.is-labels-hidden .ttp-image-compare-chip{ display:none; }

.ttp-image-compare-stack,
.ttp-image-compare-side-by-side{
  gap:10px;
  height:auto;
  padding:10px;
}
.ttp-image-compare-stack{
  display:grid;
  grid-template-columns:1fr;
}
.ttp-image-compare-side-by-side{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.ttp-image-compare-panel{
  overflow:hidden;
  aspect-ratio:16 / 9;
  min-height:180px;
  border:1px solid #dbe3ef;
  border-radius:10px;
  background:#eff6ff;
}
.ttp-image-compare.is-ratio-photo .ttp-image-compare-panel{ aspect-ratio:4 / 3; }
.ttp-image-compare.is-ratio-square .ttp-image-compare-panel{ aspect-ratio:1 / 1; }
.ttp-image-compare.is-ratio-portrait .ttp-image-compare-panel{ aspect-ratio:4 / 5; }
.ttp-image-compare-panel .ttp-image-compare-chip{
  left:10px;
  top:10px;
}
.ttp-image-compare-panel-caption{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:26px 12px 10px;
  background:linear-gradient(180deg, transparent, rgba(15,23,42,.72));
  color:#fff;
  font-size:13px;
  line-height:1.35;
}

.ttp-image-compare-caption{
  margin:12px 2px 0;
  color:#475569;
  font-size:.95rem;
  line-height:1.45;
}

.ttp-image-compare-expand{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.64);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#172033;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  line-height:1;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}
.ttp-image-compare.is-labels-top .ttp-image-compare-expand{ top:52px; }
.ttp-image-compare-expand:hover,
.ttp-image-compare-expand:focus-visible{
  background:#fff;
  outline:2px solid rgba(37,99,235,.28);
  outline-offset:2px;
}

.ttp-image-compare-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
}
.ttp-image-compare-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.68);
  backdrop-filter:blur(6px);
}
.ttp-image-compare-lightbox-content{
  position:relative;
  z-index:1;
  width:min(1100px, 100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.34);
}
.ttp-image-compare-lightbox-content .ttp-image-compare-media{
  border:0;
  border-radius:16px;
}
.ttp-image-compare-lightbox-content .ttp-image-compare-slider{
  min-height:min(72vh, 680px);
}
.ttp-image-compare-lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:#fff;
  color:#172033;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  box-shadow:0 10px 26px rgba(15,23,42,.2);
}

@media (max-width: 720px){
  .ttp-image-compare.is-frame-card{ padding:14px; border-radius:12px; }
  .ttp-image-compare-panel{ min-height:180px; }
  .ttp-image-compare-side-by-side{ grid-template-columns:1fr; }
  .ttp-image-compare.is-mobile-scroll .ttp-image-compare-side-by-side{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .ttp-image-compare.is-mobile-scroll .ttp-image-compare-side-by-side .ttp-image-compare-panel{
    flex:0 0 86%;
    scroll-snap-align:start;
  }
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-media{ aspect-ratio:auto; }
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-slider{
    display:grid;
    gap:10px;
    height:auto;
    min-height:0;
    padding:10px;
  }
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-base,
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-overlay{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border:1px solid #dbe3ef;
    border-radius:10px;
  }
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-overlay .ttp-image-compare-img,
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-overlay .ttp-image-compare-placeholder{
    width:100%;
    height:100%;
  }
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-handle,
  .ttp-image-compare.is-mobile-stacked.is-mode-slider .ttp-image-compare-slider-input{ display:none; }
  .ttp-image-compare-lightbox{ padding:12px; }
}