/* ============================================================
   DentalMagic - Before/After slider dimension lock.
   Confirmed: img01 and img02 have the SAME natural size (1920x919).
   The misalignment was pure CSS (each image computed its own height,
   giving a few px difference). Fix: ONE fixed-ratio box; BOTH images
   height:100% + object-fit so their faces line up exactly.
   before-after.js keeps driving img02 width (full container px) for
   the horizontal reveal - that part was already correct.
   Load LAST (after before-after.min.css).
   ============================================================ */

/* Shared box: width-driven, height from the real image ratio. */
#myModal #badiv.ba-slider {
    position: relative !important;
    display: block !important;
    width: min(94vw, 1400px) !important;
    max-width: 100% !important;
    aspect-ratio: 1920 / 919 !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #000 !important;
    line-height: 0 !important;
}

/* BEFORE fills the whole box. */
#myModal #badiv.ba-slider > #img01 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* AFTER wrapper: full height, width driven by before-after.js drag. */
#myModal #badiv.ba-slider > .resize {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* AFTER image: SAME height as BEFORE (100% of the shared box).
   Width stays as before-after.js sets it (full container px) so the
   face aligns horizontally; height:100% kills the vertical drift. */
#myModal #badiv.ba-slider > .resize > #img02 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Handle full height. */
#myModal #badiv.ba-slider > .handle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 5 !important;
}