.weblabs-before-after{
  --wba-accent:#c8a85a;
  --wba-dark:#0f2b33;
  --wba-muted:#d7dde0;

  --wba-anim:450ms;
  --wba-gap:40px;
  --wba-media-h:380px;

  --wba-handle-line:#fff;
  --wba-handle-bg:var(--wba-accent);
  --wba-handle-icon:#fff;
  --wba-handle-knob:74px;
  --wba-handle-bottom:22px;

  --wba-nav-bg:#f2f2f2;
  --wba-nav-icon:#5a5a5a;
  --wba-dot:var(--wba-muted);
  --wba-dot-active:var(--wba-dark);
  --wba-dot-sz:10px;

  position:relative;
  width:100%;
  contain:layout paint;
}

/* ===== header (deco LEFT, title + button) ===== */
.weblabs-before-after__header{
  position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-direction:row-reverse;
}

.weblabs-before-after__header-deco{
  flex: 0 0 auto;
  padding-top: 6px;
}
.weblabs-before-after__bar{
  display: block;
  width: 100px;
  height: 16px;
  background:var(--wba-accent);
}

.weblabs-before-after__line{
  width:2px;
  flex:1;
  background:var(--wba-dark);
  display:block;
  margin-top:10px;
  opacity:.9;
}
.weblabs-before-after__header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.weblabs-before-after__header-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--wba-dark);
  position:relative;
  display:inline-block;
  padding-bottom:10px;
  text-align:right;
}

.weblabs-before-after__header-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:#f4f4f4;
  color:var(--wba-dark);
  text-decoration:none;
  user-select:none;
}
.weblabs-before-after__header-title:after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  background:var(--wba-dark);
  margin-top:10px;
  margin-left:auto; /* align to right */
  opacity:.95;
}
/* ===== IMPORTANT: fix RTL reverse on range + slide order stability ===== */
.weblabs-before-after__media,
.weblabs-before-after__track,
.wba-compare,
.wba-range{
  direction:ltr !important; /* ✅ fixes opposite dragging in RTL pages */
  unicode-bidi:isolate;
}
.weblabs-before-after__header-btn.is-disabled{opacity:.6;cursor:not-allowed;}
.weblabs-before-after__header-btn-icon{display:inline-flex;align-items:center;justify-content:center;}

/* ===== layout (MEDIA LEFT, CONTENT RIGHT) ===== */
.weblabs-before-after__grid{
display: flex;
    gap: var(--wba-gap);
    align-items: stretch;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.weblabs-before-after__media{
  width: 700px;
  height:var(--wba-media-h);
  position:relative;
  overflow:hidden;
}
.weblabs-before-after__track{
  height:100%;
  display:flex;
  transition:transform var(--wba-anim) ease;
  will-change:transform;
}
.weblabs-before-after__slide{
  flex:0 0 100%;
  height:100%;
}

/* ===== Before/After compare (FIX: no scaling, real reveal) ===== */
.wba-compare{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  --wba-pos:50%;
  user-select:none;
  touch-action: pan-y;
}
.wba-compare{
  touch-action: none; /* 👈 اجازه drag واقعی */
}
.wba-layer{
  position:absolute;
  inset:0;
}
.wba-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ FIX: keep after FULL size and CLIP it (so it won't resize/scale) */
.wba-after{
  clip-path: inset(0 calc(100% - var(--wba-pos)) 0 0);
  will-change: clip-path;
}

/* ===== handle (BOTTOM, not center) ===== */
.wba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--wba-pos);
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom: var(--wba-handle-bottom);
  pointer-events:none;
}
.wba-handle-line{
  position:absolute;
  top:0;
  bottom:0;
  width:6px;
  background:var(--wba-handle-line);
  opacity:.95;
}
.wba-handle-knob{
  width:var(--wba-handle-knob);
  height:var(--wba-handle-knob);
  background:var(--wba-handle-bg);
  color:var(--wba-handle-icon);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:9;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.wba-handle-icon{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
}

/* input on top for dragging */
.wba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
}

/* ===== content ===== */
.weblabs-before-after__content{
 position: relative;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min-content;
    flex-grow: 1;
}
.weblabs-before-after__texttrack{
  position:relative;
  min-height:220px;
}
.weblabs-before-after__textslide{display:none;}
.weblabs-before-after__textslide.is-active{display:block;}

.weblabs-before-after__title{
  margin:0;
  font-size:36px;
  font-weight:900;
  line-height:1.25;
  color:var(--wba-dark);
  text-align:right;
}
.weblabs-before-after__desc{
  margin-top:14px;
  line-height:2;
  color:rgba(0,0,0,.65);
  text-align:right;
}
.weblabs-before-after__desc p{margin:0;}
.weblabs-before-after__desc p + p{margin-top:10px;}

/* ===== nav (BOTTOM RIGHT under text) ===== */
.weblabs-before-after__nav{
       margin-top: 26px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 14px;
    flex-direction: row-reverse;
}
.weblabs-before-after__dots{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.weblabs-before-after__dot{
  width:var(--wba-dot-sz);
  height:var(--wba-dot-sz);
  border:0;
  padding:0;
  background:var(--wba-dot);
  cursor:pointer;
  opacity:.9;
}
.weblabs-before-after__dot.is-active{
  background:var(--wba-dot-active);
}
.weblabs-before-after__arrows button{
  display:inline-flex;
  align-items:center;
  gap:10px;

}
.weblabs-before-after__arrows button{

    width: 46px;
    height: 46px;
}
.weblabs-before-after__arrow{
  width:44px;
  height:44px;
  border:0;
  background:var(--wba-nav-bg);
  color:var(--wba-nav-icon);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* mobile */
@media (max-width: 767px){
  .weblabs-before-after__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .weblabs-before-after__grid {
    align-items: center;
    flex-direction: column;
}
.weblabs-before-after__content {
    width: 100%;
    align-items: flex-start;
}
  .weblabs-before-after__media{height:320px;}
  .weblabs-before-after__title{font-size:26px;}
  .weblabs-before-after__nav{justify-content:flex-start;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .weblabs-before-after__track{transition:none !important;}
}