/* 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;
}

/* ---- Entry animation: self-playing CSS keyframe (no JS dependency), using
   a LOCAL keyframe rather than the shared scs-entrance-in one - the shared
   one resets to "transform: none" when done, which would wipe out the
   responsive --scs-r-scale transform above. This local version ends at
   scale(--scs-r-scale) instead, so it always composes correctly with the
   per-breakpoint Monitor Scale control. */
.scs-monitor-frame.scs-entrance {
    animation-name: scs-monitor-entrance-in;
}

@keyframes scs-monitor-entrance-in {
    from {
        opacity: 0;
        transform: scale( calc( var( --scs-r-scale, 1 ) * var( --scs-e-oscale, 1 ) ) ) translate( var( --scs-e-ox, 0px ), var( --scs-e-oy, 0px ) );
    }
    to {
        opacity: 1;
        transform: scale( var( --scs-r-scale, 1 ) );
    }
}

.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;
    }
}