/* ── Auto Launch Before/After Slider ─────────────────────────────────────── */

.al-before-after {
    --al-ba-radius: 8px;
    --al-ba-handle: #ffffff;
    --al-ba-accent: #EC0400;

    position:    relative;
    overflow:    hidden;
    border-radius: var(--al-ba-radius);
    width:       100%;
    cursor:      col-resize;
    user-select: none;
    -webkit-user-select: none;
    display:     block;
}

/* ── Images ── */
.al-before-after img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    pointer-events: none;
}

.al-ba-after {
    position: absolute;
    inset:    0;
}

.al-ba-clip {
    position:  absolute;
    inset:     0;
    clip-path: inset(0 50% 0 0);
    will-change: clip-path;
}

.al-ba-before {
    position: absolute;
    inset:    0;
}

/* ── Handle ── */
.al-ba-handle {
    position:  absolute;
    top:       0;
    bottom:    0;
    left:      50%;
    transform: translateX(-50%);
    width:     44px;
    display:   flex;
    flex-direction: column;
    align-items: center;
    cursor:    col-resize;
    z-index:   10;
}

.al-ba-line {
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       50%;
    transform:  translateX(-50%);
    width:      3px;
    background: var(--al-ba-accent);
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

.al-ba-circle {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    width:       42px;
    height:      42px;
    border-radius: 50%;
    background:  var(--al-ba-accent);
    box-shadow:  0 2px 12px rgba(0,0,0,0.35);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  transform 0.15s ease, box-shadow 0.15s ease;
}

.al-before-after:hover .al-ba-circle,
.al-ba-handle:hover .al-ba-circle,
.al-ba-handle:active .al-ba-circle {
    transform:  translate(-50%, -50%) scale(1.12);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

.al-ba-arrows {
    font-size:   11px;
    color:       var(--al-ba-handle);
    line-height: 1;
    letter-spacing: -2px;
}

/* ── Labels ── */
.al-ba-label {
    position:    absolute;
    bottom:      14px;
    background:  rgba(0,0,0,0.48);
    font-size:   13px;
    font-weight: 600;
    padding:     4px 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index:     5;
}
/* When accent labels enabled, label background uses the accent color */
.al-ba-accent-labels .al-ba-label {
    background: var(--al-ba-accent);
}
.al-ba-label-before { left:  14px; }
.al-ba-label-after  { right: 14px; }

/* ── Responsive ── */
@media (max-width: 540px) {
    .al-ba-circle  { width: 34px; height: 34px; }
    .al-ba-arrows  { font-size: 9px; }
    .al-ba-label   { font-size: 11px; padding: 3px 8px; bottom: 8px; }
}