.baqr-grid{
    display:grid;
    grid-template-columns:repeat(var(--baqr-cols,2),minmax(0,1fr));
    gap:24px;
}

.baqr-project,
.baqr-project *{
    box-sizing:border-box;
    font-family:"Plus Jakarta Sans", Arial, sans-serif;
}

.baqr-project{
    width:100%;
}

.baqr-comparison{
    --baqr-pos:50%;
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:4 / 3;
    border-radius:22px;
    background:#ececec;
    user-select:none;
    -webkit-user-select:none;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    isolation:isolate;
}

/* Both images always fill the same frame regardless of original image size */
.baqr-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center center !important;
    pointer-events:none;
}

.baqr-after-img{
    z-index:1;
}

.baqr-before-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:2;
    clip-path:inset(0 calc(100% - var(--baqr-pos)) 0 0);
    -webkit-clip-path:inset(0 calc(100% - var(--baqr-pos)) 0 0);
}

.baqr-before-wrap .baqr-before-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
}

.baqr-label{
    position:absolute;
    top:14px;
    z-index:7;
    padding:8px 15px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1;
    border-radius:999px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    letter-spacing:-0.01em;
}

.baqr-label-before{
    left:14px;
    background:rgba(35,35,35,.78);
}

.baqr-label-after{
    right:14px;
    background:#ff6a00;
}

.baqr-divider{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--baqr-pos);
    transform:translateX(-50%);
    width:2px;
    background:rgba(255,255,255,.96);
    z-index:5;
    pointer-events:none;
    box-shadow:0 0 2px rgba(0,0,0,.08);
}

/* Clean centre drag handle with proper left/right arrows */
.baqr-handle{
    position:absolute;
    left:var(--baqr-pos);
    top:50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#31557d;
    z-index:6;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.baqr-handle span{
    font-size:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:100%;
    height:100%;
}

.baqr-handle span::before,
.baqr-handle span::after{
    display:block;
    font-family:Arial, sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1;
    color:#31557d;
}

.baqr-handle span::before{
    content:"‹";
}

.baqr-handle span::after{
    content:"›";
}

.baqr-range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:ew-resize;
    z-index:10;
    margin:0;
    padding:0;
}

.baqr-front-qr{
    margin-top:12px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid #e5e5e5;
    border-radius:14px;
    background:#fff;
}

.baqr-front-qr-code{
    width:92px;
    height:92px;
    flex:0 0 92px;
}

.baqr-front-qr-code canvas,
.baqr-front-qr-code img{
    width:92px !important;
    height:92px !important;
    display:block;
}

.baqr-front-qr strong{
    font-weight:700;
}

.baqr-front-qr small{
    display:block;
    margin-top:4px;
    color:#777;
}

@media(max-width:767px){
    .baqr-grid{
        grid-template-columns:1fr;
    }

    .baqr-comparison{
        border-radius:16px;
    }

    .baqr-handle{
        width:36px;
        height:36px;
    }
}