/* Shahmeer Custom Sections - Dual Phone Slider */

.scs-dual-phone-slider {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.scs-dual-phone-stage {
    position: relative;
    width: 320px;
    height: 560px;
}

.scs-dual-phone-stage .scs-phone-frame {
    width: 260px;
    height: 540px;
}

/* Back phone - static, positioned behind + offset via CSS vars set from Elementor controls */
.scs-dual-phone-stage .scs-back-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform:
        translate( var( --scs-back-x, -70px ), var( --scs-back-y, 30px ) )
        rotate( var( --scs-back-rot, -8deg ) )
        scale( var( --scs-back-scale, 0.9 ) );
    opacity: var( --scs-back-opacity, 0.85 );
    pointer-events: none;
}

/* Front phone - the sliding one, sits on top */
.scs-dual-phone-stage .scs-front-frame {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: grab;
}

.scs-dual-phone-stage .scs-front-frame:active {
    cursor: grabbing;
}

@media (max-width: 480px) {
    .scs-dual-phone-stage {
        width: 260px;
        height: 460px;
        transform: scale( 0.85 );
        transform-origin: top center;
    }
}