.tdv-ba-container { width: 100%; }
.tdv-ba-inner { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); cursor: ew-resize; user-select: none; }
.tdv-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tdv-ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.tdv-ba-before-wrap .tdv-ba-img { width: var(--tdv-ba-img-w, 100%); max-width: none; }
.tdv-ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.tdv-ba-handle { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: ew-resize; }
.tdv-ba-tag { position: absolute; top: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: rgba(17,17,17,.65); color: #fff; }
.tdv-ba-tag--before { left: 12px; }
.tdv-ba-tag--after { right: 12px; }