/* Shahmeer Custom Sections - Desktop Monitor Slider (standalone single monitor, iMac-style) */

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

.scs-monitor-frame {
    position: relative;
    width: 640px;
    height: 400px;
    max-width: 100%;
    background: #111;
    border-radius: 14px;
    box-shadow: 0 0 0 3px #2b2b2b, 0 25px 50px rgba( 0, 0, 0, 0.45 );
    /* extra bottom padding = the thick chin below the screen */
    padding: 16px 16px 62px 16px;
    box-sizing: border-box;
    cursor: grab;
    /* --scs-r-scale is set responsively by the "Monitor Scale" control (desktop 1 /
       tablet 0.75 / mobile 0.5 by default) - scaling the WHOLE frame this way keeps
       the chin, neck and base stand proportional instead of stretching/cropping them
       the way a raw width:100% override used to. */
    transform: scale( var( --scs-r-scale, 1 ) );
    transform-origin: top center;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Entry animation: default is fully visible. The hidden pre-animation
   state only applies while the WRAPPER carries .scs-anim-pending and does
   NOT yet have .scs-in-view - both managed by the same proven
   scs-scroll-reveal.js system already used for every widget, so there's
   no separate observer here that could get stuck. Multiplies on top of the
   responsive scale above so it never fights the per-breakpoint control. */
.scs-desktop-monitor-slider.scs-anim-pending:not(.scs-in-view) .scs-monitor-frame {
    opacity: 0;
    transform: scale( calc( var( --scs-r-scale, 1 ) * 0.85 ) );
}

.scs-monitor-frame:active {
    cursor: grabbing;
}

.scs-monitor-frame .scs-phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.scs-device-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.scs-device-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3a3a3a;
    display: block;
}

.scs-monitor-frame::before {
    /* tapered neck */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -48px;
    transform: translateX(-50%);
    width: 28px;
    height: 50px;
    background: #111;
}

.scs-monitor-frame::after {
    /* wide flared base */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -64px;
    transform: translateX(-50%);
    width: 220px;
    height: 22px;
    border-radius: 12px;
    background: #111;
}

/* Fallback for content saved before the "Monitor Scale" control existed and
   never got a tablet/mobile value: shrink the whole frame (chin + stand included)
   instead of stretching width alone. The Elementor control below overrides this
   the moment the client sets an explicit value at any breakpoint. */
@media (max-width: 1024px) {
    .scs-monitor-frame {
        --scs-r-scale: 0.75;
    }
}

@media (max-width: 767px) {
    .scs-monitor-frame {
        --scs-r-scale: 0.5;
    }
}