/* "Before / After" slider (child theme widget tcfd-before-after), after the Webflow
   smile gallery: the after photo covers the whole box, like the before photo, and is clipped
   from the handle to the right edge, so dragging reveals it instead of re-cropping it. */
.tcfd-ba { --tcfd-ba-pos: 50%; position: relative; overflow: hidden; width: 100%; height: 460px; }
/* .tcfd-ba img.* outranks Elementor's .elementor img { height: auto; max-width: 100% } */
.tcfd-ba img.tcfd-ba__before { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tcfd-ba__after { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 var(--tcfd-ba-pos)); }
.tcfd-ba img.tcfd-ba__after-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tcfd-ba__line { position: absolute; top: 0; bottom: 0; left: var(--tcfd-ba-pos); width: 2px; transform: translateX(-50%); background: #fff; z-index: 1; pointer-events: none; }
.tcfd-ba__handle { position: absolute; top: 50%; left: var(--tcfd-ba-pos); width: 42px; height: 42px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: #fff; color: #000; z-index: 2; pointer-events: none; }
.tcfd-ba__label { position: absolute; top: 24px; z-index: 3; padding: 4px 12px; background: #fff; color: #000; font-size: 16px; line-height: 1.5; pointer-events: none; }
.tcfd-ba__label--before { left: 24px; }
.tcfd-ba__label--after { right: 24px; }
/* The range input covers the photo: drag or click anywhere, or use the arrow keys */
.tcfd-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; background: transparent; }
.tcfd-ba:has(.tcfd-ba__range:focus-visible) .tcfd-ba__handle { outline: 2px solid #7B9261; outline-offset: 2px; }