/* Core styles for Before After Divi Module */
.badivi-wrapper { position: relative; max-width: 100%; }
.badivi-wrapper .badivi-twentytwenty { position: relative; }
.badivi-wrapper img { display:block; width:100%; height:auto; }
.badivi-wrapper[data-enhanced="false"] .badivi-twentytwenty { display:flex; flex-direction:column; }
.badivi-wrapper[data-enhanced="false"] .badivi-twentytwenty img { margin-bottom:12px; }
.badivi-label { position:absolute; top:10px; z-index:30; background:rgba(0,0,0,.55); color:#fff; padding:4px 10px; font-size:14px; line-height:1; border-radius:3px; font-weight:500; pointer-events:none; }
.badivi-label-before { left:10px; }
.badivi-label-after { right:10px; }
.badivi-captions { display:flex; gap:1rem; margin-top:.5rem; font-size:14px; }
.badivi-caption { flex:1; background:#f7f7f7; padding:8px 10px; border-radius:4px; }
.badivi-wrapper.orientation-vertical .twentytwenty-horizontal { display:none; }
.badivi-wrapper.orientation-vertical .twentytwenty-vertical { display:block; }

/* Custom handle color via CSS variable */
.badivi-wrapper .twentytwenty-handle { background: var(--badivi-handle-color, #fff); border:2px solid #333; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.badivi-wrapper .twentytwenty-handle:focus { outline:2px solid #005fcc; outline-offset:2px; }
.badivi-wrapper .twentytwenty-handle { cursor: ew-resize; }
.badivi-wrapper.orientation-vertical .twentytwenty-handle { cursor: ns-resize; }
.badivi-warning { color:#b32d2e; font-weight:600; }

/* Native fallback implementation */
.badivi-wrapper[data-native="true"] .badivi-twentytwenty { display:none; }
.badivi-wrapper[data-native="true"] .badivi-native { position:relative; width:100%; line-height:0; overflow:hidden; user-select:none; touch-action:none; }
.badivi-wrapper[data-native="true"] .badivi-native img { display:block; width:100%; height:auto; max-width:100%; }
.badivi-wrapper[data-native="true"] .badivi-native img.badivi-after { position:absolute; top:0; left:0; clip-path:inset(0 0 0 50%); transition:clip-path var(--badivi-transition-speed,150ms) ease; }
.badivi-wrapper[data-native="true"][data-orientation="vertical"] .badivi-native img.badivi-after { clip-path:inset(50% 0 0 0); }
.badivi-wrapper[data-native="true"] .badivi-native-handle { position:absolute; top:0; bottom:0; width:var(--badivi-bar-thickness,2px); background:var(--badivi-handle-color,#fff); border:1px solid #333; box-shadow:0 0 0 1px rgba(0,0,0,.15); cursor:ew-resize; outline:none; z-index:40; display:flex; align-items:center; justify-content:center; }
.badivi-wrapper[data-native="true"][data-orientation="vertical"] .badivi-native-handle { left:0; right:0; height:2px; width:auto; cursor:ns-resize; }
.badivi-wrapper[data-native="true"] .badivi-native-handle:after { content:''; width:var(--badivi-handle-size,32px); height:var(--badivi-handle-size,32px); border-radius:50%; background:var(--badivi-handle-color,#fff); border:2px solid #333; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-arrow { position:absolute; font-size:10px; color:#000; text-shadow:0 1px 2px rgba(255,255,255,.7); }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-arrow-left { left:6px; }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-arrow-right { right:6px; }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-arrow-up { top:6px; }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-arrow-down { bottom:6px; }
.badivi-wrapper[data-native="true"] .badivi-native-handle .badivi-percentage { position:absolute; top:100%; left:50%; transform:translate(-50%,6px); background:rgba(0,0,0,.7); color:#fff; padding:2px 6px; font-size:11px; border-radius:3px; white-space:nowrap; pointer-events:none; }
.badivi-wrapper[data-native="true"] .badivi-native-handle:focus { outline:2px solid #005fcc; outline-offset:2px; }

/* Match arrow color to handle color when enabled */
.badivi-wrapper[data-arrows-match-handle="true"] .badivi-native-handle .badivi-arrow { color: var(--badivi-handle-color, #000); }