/* =============================================================
   Before/After Product Gallery — widget stylesheet
   Most values below come from CSS custom properties that the
   Elementor "Style" tab writes per-instance (see the widget's
   register_controls()). The values here are just the fallbacks.
   ============================================================= */
.wg-wrap{
  --ink:#181A2A;
  --sub:#6B7280;

  --wg-thumb-size: 168px;
  --wg-main-max:   560px;
  --wg-gap:        22px;
  --wg-col-gap:    18px;

  --wg-accent: #5B4FE9;
  --wg-glow:   rgba(91,79,233,.28);
  --wg-thumb-border: rgba(255,255,255,.95);
  --wg-thumb-active-border: #5B4FE9;
  --wg-main-radius: 32px;
  --wg-thumb-gap-mobile: 22px;
  --wg-thumb-row-side-gap: 0px;

  --wg-main-ratio-w: 1;
  --wg-main-ratio-h: 1;
  --wg-thumb-ratio-w: 1;
  --wg-thumb-ratio-h: 1;

  --wg-sat: 1.18;
  --wg-bri: 1.08;
  --wg-con: 1.06;

  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wg-wrap *{ box-sizing:border-box; }

.wg-gallery{
  display:grid;
  grid-template-columns:var(--wg-thumb-size) minmax(0, var(--wg-main-max));
  gap:var(--wg-col-gap);
  align-items:center;
  justify-content:center;
}

/* ---------------- LEFT: stacked thumbnails ---------------- */
.wg-thumbs-col{
  display:flex;
  flex-direction:column;
  gap:var(--wg-gap);
}

/* =====================================================================
   LIQUID-GLASS BORDER — shared by the 3 thumbnails and the main image.
   Base element: soft gradient fill + solid glass border (background is
   only visible where a photo doesn't fully cover it).
   ::before : a bright gradient ring drawn ON TOP of the photo (masked so
              only a thin band near the edge shows) — this is what keeps
              the glass edge visible even though the image covers 100%
              of the box. No reflection/glint blob — border only.
   ===================================================================== */
.wg-thumb,
.wg-main{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,252,255,.95) 35%, rgba(245,247,255,.90) 100%);
  border:3px solid var(--wg-thumb-border);
}
.wg-main{ transition:transform .25s ease, box-shadow .25s ease; }
.wg-thumb::before,
.wg-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.65) 22%,
    rgba(195,215,255,.45) 60%,
    rgba(255,255,255,.95) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -2px 2px rgba(210,220,255,.25);
  pointer-events:none;
}

.wg-thumb{
  width:var(--wg-thumb-size);
  height:auto;
  aspect-ratio:var(--wg-thumb-ratio-w, 1) / var(--wg-thumb-ratio-h, 1);
  padding:0;
  margin:0;
  border-radius:20px;
  cursor:pointer;
  outline:none;
  transition:none;
  -webkit-tap-highlight-color:transparent;
}
.wg-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  border-radius:inherit;
}
.wg-thumb.active{ border-color:var(--wg-thumb-active-border); }

/* ---------------- RIGHT: big 1:1 main viewer ---------------- */
.wg-main-outer{
  position:relative;
  width:100%;
  max-width:var(--wg-main-max);
  margin:0 auto;
}
.wg-main-outer::before{
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:calc(var(--wg-main-radius, 32px) + 16px);
  background:var(--wg-glow);
  filter:blur(18px);
  z-index:0;
}

.wg-main{
  width:100%;
  aspect-ratio:var(--wg-main-ratio-w, 1) / var(--wg-main-ratio-h, 1);
  border-radius:var(--wg-main-radius, 32px);
  z-index:1;
  background-color:#eef0f9;
}

/* ---------------- before/after mechanics ---------------- */
.ba-imgwrap{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.ba-imgwrap img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  border-radius:inherit;
}
.ba-before{ z-index:1; }
.ba-after{
  z-index:2;
  clip-path:inset(0 45% 0 0);
  filter:saturate(var(--wg-sat,1.18)) brightness(var(--wg-bri,1.08)) contrast(var(--wg-con,1.06));
  /* no transition here on purpose — hover/drag must track the cursor
     1:1 with zero lag. Smooth animation is added only for the "snap
     back to default" moments via the .smooth class below. */
}
.ba-after.smooth{ transition:clip-path .35s cubic-bezier(.22,.61,.36,1); }
.ba-divider{
  position:absolute; top:0; bottom:0; left:55%;
  width:3px; background:#fff; z-index:3;
  transform:translateX(-50%);
  cursor:ew-resize;
  box-shadow:0 0 12px rgba(0,0,0,.25);
}
.ba-divider.smooth{ transition:left .35s cubic-bezier(.22,.61,.36,1); }
.ba-handle{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; gap:2px;
  color:var(--wg-accent);
  font-size:13px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ---------------- Optional: thumbnails on the right (Style tab toggle) ---------------- */
@media (min-width:761px){
  .wg-wrap.wg-thumbs-right .wg-gallery{
    grid-template-columns: minmax(0, var(--wg-main-max)) var(--wg-thumb-size);
  }
}
.wg-wrap.wg-thumbs-right .wg-thumbs-col{ order:2; }
.wg-wrap.wg-thumbs-right .wg-main-outer{ order:1; }

/* ---------------- Responsive fallback ---------------- */
@media (max-width:760px){
  .wg-gallery{ grid-template-columns:1fr; }
  .wg-thumbs-col{
    flex-direction:row;
    order:2;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--wg-thumb-gap-mobile, var(--wg-gap));
    padding:0 var(--wg-thumb-row-side-gap, 0px);
  }
  .wg-main-outer{ order:1; }
  .wg-thumb{ width:88px; }
}