/* 
 * Guru Facility Widgets — Before/After Comparison [REBUILT]
 * Variable-driven layout engine for absolute precision.
 */

.gfw-ba-container {
    --gfw-handle-pos: 50; /* Unitless 0-100 */
    --gfw-handle-size: 44px;
    --gfw-handle-scale: 1.1;
    --gfw-handle-offset: 50;
    --gfw-divider-width: 3px;
    --gfw-label-x: 20px;
    --gfw-label-y: 20px;

    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    user-select: none;
    cursor: default;
    background-color: #f0f0f0;
}

/* Aspect Ratio / Height Fixes */
.gfw-ba-size-aspect .gfw-ba-container { height: auto !important; }
.gfw-ba-size-natural .gfw-ba-container { height: auto !important; }
.gfw-ba-size-natural .gfw-ba-before-wrap,
.gfw-ba-size-natural .gfw-ba-after-wrap { position: relative; height: auto; }
.gfw-ba-size-natural .gfw-ba-before-wrap { position: absolute; }
.gfw-ba-size-natural .gfw-ba-img { height: auto; }


.gfw-ba-interactive {
    cursor: ew-resize;
}

.gfw-ba-orientation-vertical.gfw-ba-interactive {
    cursor: ns-resize;
}

/* Base Image Wraps */
.gfw-ba-before-wrap,
.gfw-ba-after-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Top Image (Before) Clipping */
.gfw-ba-before-wrap {
    z-index: 2;
    /* Formula: (100 - %)% */
    clip-path: inset(0 calc(100% - (var(--gfw-handle-pos) * 1%)) 0 0);
}

.gfw-ba-orientation-vertical .gfw-ba-before-wrap {
    clip-path: inset(0 0 calc(100% - (var(--gfw-handle-pos) * 1%)) 0);
}

/* Global Image Styles */
.gfw-ba-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    object-fit: cover;
}

.gfw-ba-before-wrap::after,
.gfw-ba-after-wrap::after {
    transition: background 0.3s ease;
}



/* UI Structure */
.gfw-ba-divider-wrap {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: calc(var(--gfw-handle-pos) * 1%);
    width: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.gfw-ba-orientation-vertical .gfw-ba-divider-wrap {
    top: calc(var(--gfw-handle-pos) * 1%);
    bottom: auto;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    transform: translateY(-50%);
}

/* Divider Line */
.gfw-ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--gfw-divider-width, 3px);
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.gfw-ba-orientation-vertical .gfw-ba-divider {
    width: 100%;
    height: var(--gfw-divider-width, 3px);
    top: 50%;
    left: 0;
    bottom: auto;
    transform: translateY(-50%);
}

/* Handle Control */
.gfw-ba-handle {
    position: absolute;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gfw-handle-size);
    height: var(--gfw-handle-size);
    border-radius: 50%;
    background-color: #0b2239;
    color: #ffffff;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: auto;
    
    /* Precision Math for Boundaries */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Precision boundary fix for the non-sliding axis */
.gfw-ba-orientation-horizontal .gfw-ba-handle {
    top: calc( (var(--gfw-handle-offset, 50) / 100) * (100% - var(--gfw-handle-size)) + (var(--gfw-handle-size) / 2) );
}

.gfw-ba-orientation-vertical .gfw-ba-handle {
    left: calc( (var(--gfw-handle-offset, 50) / 100) * (100% - var(--gfw-handle-size)) + (var(--gfw-handle-size) / 2) );
}


.gfw-ba-container:hover .gfw-ba-handle {
    transform: translate(-50%, -50%) scale(var(--gfw-handle-scale, 1.1));
}

.gfw-ba-handle i,
.gfw-ba-handle svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: block;
}

/* Labels */
.gfw-ba-label {
    position: absolute;
    z-index: 5;
    background-color: rgba(11, 34, 57, 0.7);
    color: #ffffff;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    border-radius: 4px;
    font-family: inherit;
}

/* Label Positioning */
.gfw-ba-label--before {
    top: var(--gfw-label-y);
    left: var(--gfw-label-x);
}

.gfw-ba-label--after {
    top: var(--gfw-label-y);
    right: var(--gfw-label-x);
}

.gfw-ba-orientation-vertical .gfw-ba-label--before {
    top: var(--gfw-label-y);
    left: 50%;
    transform: translateX(-50%);
}

.gfw-ba-orientation-vertical .gfw-ba-label--after {
    bottom: var(--gfw-label-y);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Utility: Dragging state */
.gfw-ba-dragging {
    cursor: ew-resize !important;
}
.gfw-ba-orientation-vertical.gfw-ba-dragging {
    cursor: ns-resize !important;
}

/* Adaptive Labels (Fade on slide) */
.gfw-ba-adaptive-labels-yes .gfw-ba-label {
    transition: opacity 0.1s linear;
}

.gfw-ba-adaptive-labels-yes .gfw-ba-label--before {
    /* Fades between 15% and 30% of visibility */
    opacity: clamp(0, (var(--gfw-handle-pos) - 15) / 15, 1);
}

.gfw-ba-adaptive-labels-yes .gfw-ba-label--after {
    /* Fades between 70% and 85% of visibility */
    opacity: clamp(0, ((100 - var(--gfw-handle-pos)) - 15) / 15, 1);
}