/* Shahmeer Custom Sections - Triple Phone Slider */

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

.scs-triple-phone-stage {
    position: relative;
    width: 480px;
    max-width: 100%;
    height: 560px;
}

.scs-triple-phone-stage .scs-phone-frame {
    width: 240px;
    height: 500px;
    position: absolute;
    top: 30px;
    left: 50%;
    cursor: grab;
}

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

/* Center phone - straight, sharp, on top */
.scs-triple-phone-stage .scs-phone-center {
    z-index: 3;
    transform: translateX(-50%);
    opacity: 1;
}

/* Left phone - offset via CSS vars set from Elementor controls */
.scs-triple-phone-stage .scs-phone-left {
    z-index: 1;
    transform:
        translateX(-50%)
        translate( var( --scs-x, -110px ), var( --scs-y, 50px ) )
        rotate( var( --scs-rot, -8deg ) )
        scale( var( --scs-scale, 0.85 ) );
    opacity: var( --scs-opacity, 0.9 );
}

/* Right phone */
.scs-triple-phone-stage .scs-phone-right {
    z-index: 2;
    transform:
        translateX(-50%)
        translate( var( --scs-x, 110px ), var( --scs-y, 30px ) )
        rotate( var( --scs-rot, 8deg ) )
        scale( var( --scs-scale, 0.9 ) );
    opacity: var( --scs-opacity, 0.95 );
}

@media (max-width: 600px) {
    .scs-triple-phone-stage {
        width: 320px;
        height: 460px;
        transform: scale( 0.8 );
        transform-origin: top center;
    }
}