/**
 * WD Coder – Device Mockup CSS v2.0.0
 * GPU-accelerated, zero layout shift, PageSpeed optimized.
 * Author: Muhammad Aqin – Webit Outsourcing
 */

/* ── Base layout ─────────────────────────────────────────── */
.wdc-dm-outer {
    display:flex;
    width:100%;
}
.wdc-dm-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.wdc-dm-device {
    position:relative;
    width:100%;
    display:inline-block;
    /* GPU layer for smooth transforms */
    transform:translateZ(0);
    will-change:transform;
    backface-visibility:hidden;
}

/* ── Viewport (the visible screen window) ────────────────── */
.wdc-dm-viewport {
    position:relative;
    overflow:hidden;
    height:420px;          /* default; overridden by Elementor responsive control */
    background:#000;
    /* These are overridden per-device to match bezel insets */
}

/* ── Scroll track (contains the image, moves on scroll) ─── */
.wdc-dm-scroll-track {
    position:relative;   /* NOT absolute - so scrollHeight = actual image height */
    width:100%;
    will-change:transform;
    transform:translateY(0) translateZ(0);
    /* JS sets transition dynamically */
}
.wdc-dm-scroll-track img {
    width:100%;
    display:block;
    /* No object-fit - let the image render at natural aspect ratio for scrolling */
    height:auto;
}

/* ── Overlay (hover color effect, set by Elementor) ─────── */
.wdc-dm-overlay {
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    transition:background .3s ease;
    z-index:2;
}

/* ── Placeholder ─────────────────────────────────────────── */
.wdc-dm-ph {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:#e8eaed;
    min-height:200px;
}
.wdc-dm-ph span {
    color:#9aa0ac;
    font-size:13px;
    font-weight:600;
    font-family:system-ui,sans-serif;
}

/* ── Label ───────────────────────────────────────────────── */
.wdc-dm-label {
    text-align:center;
    font-size:13px;
    color:#6b7280;
    font-weight:600;
    font-family:system-ui,sans-serif;
    margin-top:14px;
}

/* ═══════════════════════════════════════════════════════════
   BROWSER  (default)
═══════════════════════════════════════════════════════════ */
.wdc-dm-browser-body {
    border-radius:10px;
    overflow:hidden;
    border:2px solid rgba(0,0,0,.15);
}
.wdc-dm-bar {
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    background:#1a1a2e;
}
.wdc-dm-dot {
    width:11px; height:11px;
    border-radius:50%;
    flex-shrink:0;
}
.wdc-dm-dot--red   { background:#ff5f57; }
.wdc-dm-dot--amber { background:#ffbd2e; }
.wdc-dm-dot--green { background:#28c840; }
.wdc-dm-url-bar {
    flex:1;
    background:rgba(255,255,255,.08);
    border-radius:6px;
    padding:4px 12px;
    font-size:11px;
    color:rgba(255,255,255,.5);
    font-family:monospace;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.wdc-dm--browser .wdc-dm-viewport { border-radius:0; }

/* ═══════════════════════════════════════════════════════════
   LAPTOP STYLES
═══════════════════════════════════════════════════════════ */
.wdc-dm-laptop-body {
    border-radius:14px 14px 0 0;
    padding:16px 16px 0;
    border:2px solid rgba(255,255,255,.06);
}
.wdc-dm-laptop-body .wdc-dm-viewport {
    border-radius:6px 6px 0 0;
}
/* Notch bar (MacBook style) */
.wdc-dm-notch-bar {
    display:flex;
    justify-content:center;
    align-items:center;
    height:22px;
    margin-bottom:4px;
}
/* Hinge */
.wdc-dm-laptop-hinge {
    height:10px;
    border-radius:0 0 3px 3px;
    border-top:1px solid rgba(0,0,0,.4);
}
/* Base foot */
.wdc-dm-laptop-foot {
    height:20px;
    border-radius:0 0 12px 12px;
    clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);
    margin-top:-1px;
    opacity:.9;
}

/* Variant: slim bezel (laptop-2) */
.wdc-dm--laptop-2 .wdc-dm-laptop-body {
    padding:8px 8px 0;
    border-radius:10px 10px 0 0;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP / MONITOR
═══════════════════════════════════════════════════════════ */
.wdc-dm-monitor-body {
    border-radius:12px;
    padding:14px 14px 12px;
    border:2px solid rgba(255,255,255,.06);
}
.wdc-dm-monitor-bezel {
    display:flex;
    justify-content:center;
    padding-bottom:8px;
}
.wdc-dm-monitor-body .wdc-dm-viewport {
    border-radius:6px;
}

/* Neck */
.wdc-dm-monitor-neck {
    width:18%;
    height:36px;
    margin:0 auto;
    clip-path:polygon(30% 0%,70% 0%,85% 100%,15% 100%);
    margin-top:-1px;
    opacity:.9;
}
/* Foot */
.wdc-dm-monitor-foot {
    width:48%;
    height:12px;
    border-radius:6px;
    margin:0 auto;
    opacity:.85;
}

/* Variant: curved (desktop-2) — extra padding */
.wdc-dm--desktop-2 .wdc-dm-monitor-body {
    padding:18px 18px 14px;
    border-radius:16px;
}
/* Variant: flat (desktop-3) */
.wdc-dm--desktop-3 .wdc-dm-monitor-body {
    border-radius:6px;
    padding:10px 10px 8px;
}
.wdc-dm--desktop-3 .wdc-dm-monitor-neck { height:28px; }

/* ═══════════════════════════════════════════════════════════
   TABLET
═══════════════════════════════════════════════════════════ */
.wdc-dm-tablet-body {
    border-radius:22px;
    padding:16px 12px;
    border:2px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.wdc-dm-tablet--land {
    padding:12px 20px;
    flex-direction:row;
    gap:14px;
}
.wdc-dm-tablet-body .wdc-dm-viewport {
    border-radius:6px;
    width:100%;
}
.wdc-dm-tablet--land .wdc-dm-viewport {
    flex:1;
}
.wdc-dm-home-btn {
    width:32px; height:32px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.15);
    flex-shrink:0;
}
.wdc-dm-tablet--land .wdc-dm-home-btn {
    width:20px; height:20px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════════════ */
.wdc-dm-mobile-body {
    border-radius:36px;
    padding:14px 9px;
    border:2px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
}
.wdc-dm-mobile-body .wdc-dm-viewport {
    border-radius:10px;
    width:100%;
}
/* Notch (mobile-1 iPhone style) */
.wdc-dm-notch {
    width:100px; height:24px;
    background:inherit;
    border-radius:0 0 14px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
/* Punch camera (mobile-2 Android) */
.wdc-dm-punch-camera {
    width:10px; height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    align-self:flex-end;
    margin-right:16px;
    flex-shrink:0;
}
/* Speaker (classic) */
.wdc-dm-speaker {
    width:48px; height:5px;
    border-radius:3px;
    background:rgba(255,255,255,.18);
    flex-shrink:0;
}
/* Camera dot */
.wdc-dm-camera {
    width:8px; height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
    .wdc-dm-mobile-body { max-width:260px; }
    .wdc-dm-tablet--land { flex-direction:column; padding:12px; }
}
@media (max-width:480px) {
    .wdc-dm-laptop-foot { display:none; }
    .wdc-dm-monitor-neck,
    .wdc-dm-monitor-foot { display:none; }
}