/* =====================================================
   Before After Slider — front.css
   ===================================================== */


.bas-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    line-height: 0;
    border-radius: 4px;
 
}

/* ── Images ── */
.bas-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* After layer — full, sits behind */
.bas-after-wrap {
    position: relative;
    width: 100%;
}

/* Before layer — sits on top, clipped */
.bas-before-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;          /* JS overrides this */
    height: 100%;
    overflow: hidden;
}

.bas-before-wrap .bas-img-before {
    width: 100%;
    max-width: none;     /* prevent shrink when container is narrow */
    position: absolute;
    top: 0;
    left: 0;
}

/* Vertical mode */
.bas-mode-vertical {
    cursor: ns-resize;
}
.bas-mode-vertical .bas-before-wrap {
    width: 100%;
    height: 50%;         /* JS overrides */
}

/* Button mode */
.bas-mode-button {
    cursor: default;
}

/* ── Divider ── */
.bas-divider {
    position: absolute;
    top: 0;
    left: 50%;           /* JS moves this */
    width: 2px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.4);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
}

.bas-mode-vertical .bas-divider {
    top: 50%;            /* JS moves this */
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* ── Handle ── */
.bas-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    pointer-events: none;
    gap: 2px;
    z-index: 11;
}

.bas-mode-vertical .bas-handle {
    top: 50%;
    left: 50%;
}

.bas-arrow {
    font-size: 18px;
    line-height: 1;
    color: #333;
}

.bas-mode-vertical .bas-arrow-left  { transform: rotate(90deg);  display: inline-block; }
.bas-mode-vertical .bas-arrow-right { transform: rotate(90deg);  display: inline-block; }

/* ── Labels (slider modes) ── */
.bas-label {
    position: absolute;
    bottom: 12px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 9;
    white-space: nowrap;
}

.bas-label-before { left: 10px; }
.bas-label-after  { right: 10px; }

.bas-mode-vertical .bas-label-before { bottom: auto; top: 10px;    left: 10px; }
.bas-mode-vertical .bas-label-after  { bottom: 10px; right: auto;  left: 10px; }

/* ── Toggle Button ── */
.bas-toggle-btn {
    position: absolute;
    z-index: 20;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    /* corners */
}

.bas-btn-pos-top-left     { top: 12px;    left: 12px; }
.bas-btn-pos-top-right    { top: 12px;    right: 12px; }
.bas-btn-pos-bottom-left  { bottom: 12px; left: 12px; }
.bas-btn-pos-bottom-right { bottom: 12px; right: 12px; }

.bas-btn-inner {
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: 100px;
    padding: 3px;
    gap: 0;
    min-width: 110px;
    transition: background .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.bas-btn-label {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-family: sans-serif;
    letter-spacing: .05em;
    color: #fff;
    padding: 5px 6px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: color .2s;
    white-space: nowrap;
}

.bas-btn-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: rgba(255,255,255,.9);
    border-radius: 100px;
    z-index: 1;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Active = showing After */
.bas-toggle-btn.bas-active .bas-btn-thumb {
    transform: translateX(calc(100% + 0px));
}

/* Label colors: active side gets dark text */
.bas-toggle-btn .bas-btn-before-label { color: #222; }
.bas-toggle-btn .bas-btn-after-label  { color: rgba(255,255,255,.85); }
.bas-toggle-btn.bas-active .bas-btn-before-label { color: rgba(255,255,255,.85); }
.bas-toggle-btn.bas-active .bas-btn-after-label  { color: #222; }

/* Accessibility focus */
.bas-toggle-btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}
.bas-divider:focus-visible {
    outline: none;
}

/* ── Button mode ───────────────────────────────────── */

.bas-mode-button-b,
.bas-mode-button-a {
    cursor: default;
}

.bas-mode-button-b .bas-before-wrap,
.bas-mode-button-a .bas-before-wrap {
    width: 100%;
    height: 100%;
}

.bas-mode-button-b .bas-before-wrap .bas-img-before,
.bas-mode-button-a .bas-before-wrap .bas-img-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hidden state controlled ONLY by JS/PHP */
.bas-before-wrap.bas-btn-hidden {
    display: none !important;
}