.wp-block-before-after-compare{
  --ba-accent: var(--wp--preset--color--accent, #f26522);
  --ba-before-bg: rgba(0,0,0,.35);
  --ba-before-txt: #ffffff;
  --ba-after-bg: var(--wp--preset--color--accent, #f26522);
  --ba-after-txt: #ffffff;
  --ba-overlay-col: #000000;
  --ba-overlay-a: .45;
  --ba-bg: var(--wp--preset--color--background, #ffffff);
  --ba-text: var(--wp--preset--color--base, #111111);
  --ba-radius: 14px;
  --ba-shadow: 0 10px 24px rgba(0,0,0,.08);
}

:where(.wp-block-before-after-compare){
  position: relative;
  display: block;
  border-radius: var(--ba-radius);
  box-shadow: var(--ba-shadow);
  background: var(--ba-bg);
  overflow: hidden;
}

/* Viewport follows image height (no fixed ratio on frontend) */
.wp-block-before-after-compare__viewport{
  position: relative;
  width: 100%;
  height: auto;
}

/* AFTER base */
.wp-block-before-after-compare__afterBase{
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.wp-block-before-after-compare__afterBase > .wp-block-before-after-compare__img{
  display: block; width: 100%; height: auto; object-fit: cover;
}

/* BEFORE (clipped) sits above */
.wp-block-before-after-compare__afterClip{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}
.wp-block-before-after-compare__afterClip > .wp-block-before-after-compare__img{
  display: block; width: 100%; height: auto; object-fit: cover;
}

/* Divider + Handle on top */
.wp-block-before-after-compare__divider{
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 6px solid var(--ba-accent);
  transform: translateX(-3px);
  z-index: 6;
  filter: none;
}
.wp-block-before-after-compare.is-vertical .wp-block-before-after-compare__divider{
  left: 0; right: 0; height: 0; width: auto;
  border-left: 0; border-top: 6px solid var(--ba-accent);
  transform: translateY(-3px);
}

.wp-block-before-after-compare__handle{
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px;
  border-radius: 999px;
  border: 0;
  background: var(--ba-accent);
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  outline: none;
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  z-index: 7;
}
.wp-block-before-after-compare.is-vertical .wp-block-before-after-compare__handle{ cursor: ns-resize; }
.wp-block-before-after-compare__knob{ width:0; height:0; border:0; }

/* remove old single-chevron */
.wp-block-before-after-compare__handle::after{ content:none; }

/* two-sided arrow icon (ONE-LINED SVG) */
.wp-block-before-after-compare__handle::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 60%;
  height: 60%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%208%20L3%2012%20L7%2016'/%3E%3Cpath%20d='M17%208%20L21%2012%20L17%2016'/%3E%3Cline%20x1='4'%20y1='12'%20x2='20'%20y2='12'/%3E%3C/svg%3E");
}

/* vertical double arrow = rotate the same SVG 90° */
.wp-block-before-after-compare.is-vertical .wp-block-before-after-compare__handle::before{
  transform: rotate(90deg);
}

.wp-block-before-after-compare__handle:focus-visible,
.wp-block-before-after-compare__handle:hover{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ba-accent) 30%, white), 0 6px 18px rgba(0,0,0,.28);
}

/* Overlay on BEFORE side only */
.wp-block-before-after-compare__afterClip::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--ba-overlay-col) calc(var(--ba-overlay-a) * 100%), transparent) 0%,
    color-mix(in oklab, var(--ba-overlay-col) calc(var(--ba-overlay-a) * 100%), transparent) 55%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 3;
}
.wp-block-before-after-compare.is-vertical .wp-block-before-after-compare__afterClip::before{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ba-overlay-col) calc(var(--ba-overlay-a) * 100%), transparent) 0%,
    color-mix(in oklab, var(--ba-overlay-col) calc(var(--ba-overlay-a) * 100%), transparent) 55%,
    transparent 80%
  );
}

/* ====== BADGES STUCK TO CORNERS (inside their layers) ====== */
/* Before badge: inside clip, bottom-left */
.wp-block-before-after-compare__afterClip > .wp-block-before-after-compare__label{
  position: absolute;
  bottom: -1px; left: -1px;
  padding: .55rem .9rem;
  border-radius: 10px;
  font: inherit; font-weight: 600; line-height: 1;
  background: var(--ba-before-bg); color: var(--ba-before-txt);
  z-index: 4; /* above before image + overlay */
}

/* After badge: inside AFTER base, bottom-right */
.wp-block-before-after-compare__afterBase > .wp-block-before-after-compare__label--after{
  position: absolute;
  bottom: -1px; right: -1px;
  padding: .55rem .9rem;
  border-radius: 10px;
  font: inherit; font-weight: 600; line-height: 1;
  background: var(--ba-after-bg); color: var(--ba-after-txt);
  z-index: 1; /* above after image */
}

/* Legacy fallback (if badges were siblings at viewport level) */
.wp-block-before-after-compare__viewport > .wp-block-before-after-compare__label{
  position: absolute; bottom: 14px; left: 14px;
}
.wp-block-before-after-compare__viewport > .wp-block-before-after-compare__label--after{
  position: absolute; bottom: 14px; right: 14px;
}

/* Editor helpers */
.ba-editor-pickers{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ba-editor-pickers .components-placeholder{ min-height: 180px; }
.ba-color-row{ display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.ba-color-row__label{ min-width: 220px; font-size: 12px; opacity: .85; }

/* Responsive handle + badges */
@media (max-width: 600px){
  .wp-block-before-after-compare__handle{ width: 40px; height: 40px; margin: -20px; }
  .wp-block-before-after-compare__afterClip > .wp-block-before-after-compare__label,
  .wp-block-before-after-compare__afterBase  > .wp-block-before-after-compare__label--after{
    bottom: 10px;
  }
}

/* left–right drag */
.wp-block-before-after-compare__handle{ cursor: ew-resize; }

/* up–down drag */
.wp-block-before-after-compare.is-vertical .wp-block-before-after-compare__handle{ cursor: ns-resize; }


/* === FIX for WP "stretch items" flex layouts === */
/* Let the whole block stretch, and let viewport fill the given height */
:where(.wp-block-before-after-compare){
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;          /* critical for flex children not to overflow */
}

/* Viewport becomes the flexible area */
.wp-block-before-after-compare__viewport{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Make both layers respect the viewport height */
.wp-block-before-after-compare__afterBase,
.wp-block-before-after-compare__afterClip{
  height: 100%;
}

/* When parent height is forced, fill it.
   When parent height is auto, % becomes auto → still keeps natural size. */
.wp-block-before-after-compare__afterBase > .wp-block-before-after-compare__img,
.wp-block-before-after-compare__afterClip > .wp-block-before-after-compare__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}