/* =================================================================
   Multi Device Mockup Generator – Device Frames
   Pixel-matched to reference image 2
   ================================================================= */

.mmg-device, .mmg-device *,
.mmg-device *::before, .mmg-device *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ================================================================
   iMac
   Outer silver body, thick BLACK bezel around screen, silver stand
   Total: 580w × ~430h
   Frame:  580 × 350  (silver body)
   Screen: 530 × 298  (16:9 screen inside 25px black bezel)
   Chin:   580 × 40   (silver with circle)
   Stand:  80 wide, 52 tall  (tapered)
   Base:   180w × 12h
   ================================================================ */
.mmg-imac { width: 580px; }

/* Outer silver body */
.mmg-imac .mmg-device-frame {
    background: linear-gradient(180deg, #e2e2e2 0%, #d0d0d0 100%);
    border-radius: 12px 12px 0 0;
    border: 2px solid #a8a8a8;
    border-bottom: none;
    padding: 22px 22px 0;
    position: relative;
}
/* Thick black inner bezel — fills entire area behind screen */
.mmg-imac .mmg-device-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0d0d0d;
    border-radius: 10px 10px 0 0;
    margin: 0;
}
/* Camera dot on top bezel */
.mmg-imac .mmg-device-frame::after {
    content: '';
    position: absolute;
    top: 10px; left: 50%; transform: translateX(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #333;
    z-index: 2;
}

/* Screen sits inside the black bezel
   Inner width = 580 - 2×22(pad) - 2×2(border) = 532px
   16:9 height  = 532 × 9/16 = 299px ≈ 300px → no right-side crop */
.mmg-imac .mmg-device-screen {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1px;
    height: 300px;
    overflow: hidden;
}
.mmg-imac .mmg-device-screen img.mmg-shot,
.mmg-imac .mmg-device-screen iframe {
    width: 100%; height: 100%;
    object-fit: fill;   /* show entire 1920×1080 screenshot, no cropping */
    display: block; border: 0;
}

/* Silver chin */
.mmg-imac .mmg-device-chin {
    background: linear-gradient(180deg,
        #d8d8d8 0%, #c8c8c8 30%, #bfbfbf 60%, #b8b8b8 100%);
    height: 40px;
    border-radius: 0 0 6px 6px;
    border: 2px solid #a8a8a8;
    border-top: 1px solid #b0b0b0;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
/* Apple-ish circle on chin */
.mmg-imac .mmg-device-chin::after {
    content: '';
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        #d8d8d8 0%, #aaa 60%, #999 100%);
    border: 1px solid #999;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6);
}

/* Tapered silver stand */
.mmg-imac .mmg-device-stand {
    width: 80px;
    height: 52px;
    margin: 0 auto;
    background: linear-gradient(180deg,
        #c0c0c0 0%, #d4d4d4 25%, #e0e0e0 50%, #d0d0d0 75%, #bbb 100%);
    clip-path: polygon(22% 0%, 78% 0%, 92% 100%, 8% 100%);
}

/* Wide flat base */
.mmg-imac .mmg-device-base {
    width: 178px;
    height: 12px;
    margin: 0 auto;
    background: linear-gradient(180deg, #d0d0d0 0%, #b8b8b8 100%);
    border-radius: 0 0 5px 5px;
    border: 1.5px solid #a0a0a0;
    border-top: none;
}

/* ================================================================
   MacBook — FOTO-FRAME
   Bild: 650×380px
   Screen-Bereich: top 7.37%, left 9.69%, width 80%, height 79.47%
   Gesamtbreite im Plugin: 520px → Höhe: 520 × (380/650) = 304px
   ================================================================ */
.mmg-macbook {
    width: 520px;
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.3));
}

/* Das Foto als kompletter Frame */
.mmg-macbook .mmg-device-frame {
    position: relative;
    width: 100%;
    padding-bottom: calc(380 / 650 * 100%); /* aspect ratio 650:380 */
    background: url('../images/device-macbook-new.png') center/100% 100% no-repeat;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ::before und ::after nicht benötigt */
.mmg-macbook .mmg-device-frame::before,
.mmg-macbook .mmg-device-frame::after { display: none; }

/* Screenshot genau über den Screen-Bereich legen */
.mmg-macbook .mmg-device-screen {
    position: absolute;
    top:    7.37%;
    left:   2.00%;
    width:  95.38%;
    height: 87.37%;
    background: #fff;
    overflow: hidden;
    border-radius: 2px;
    z-index: 1;
}
.mmg-macbook .mmg-device-screen img.mmg-shot,
.mmg-macbook .mmg-device-screen iframe {
    width: 100%; height: 100%;
    object-fit: fill;
    display: block; border: 0;
}

/* Hinge und Keyboard nicht mehr nötig — im Foto enthalten */
.mmg-macbook .mmg-device-hinge    { display: none; }
.mmg-macbook .mmg-device-keyboard { display: none; }
.mmg-macbook .mmg-device-trackpad { display: none; }

/* ================================================================
   iPad  — portrait
   All dark/black frame with camera + home button
   Total: 205w × ~310h
   Frame padding: 34 top, 30 bottom → screen 183×246
   ================================================================ */
.mmg-ipad { width: 205px; }

.mmg-ipad .mmg-device-frame {
    background: linear-gradient(160deg, #2c2c2c 0%, #181818 100%);
    border-radius: 18px;
    padding: 34px 11px 30px;
    border: 2px solid #3a3a3a;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 20px 60px rgba(0,0,0,.5);
}
/* camera */
.mmg-ipad .mmg-device-frame::before {
    content: '';
    position: absolute;
    top: 14px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 1px solid #3a3a3a;
}
/* home button */
.mmg-ipad .mmg-device-frame::after {
    content: '';
    position: absolute;
    bottom: 6px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #2a2a2a, #0c0c0c);
    border: 1.5px solid #444;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.06);
}

.mmg-ipad .mmg-device-screen {
    background: #fff;
    border-radius: 2px;
    height: 246px;
    overflow: hidden;
}
.mmg-ipad .mmg-device-screen img.mmg-shot,
.mmg-ipad .mmg-device-screen iframe {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top left;
    display: block; border: 0;
}

/* ================================================================
   iPhone — FOTO-FRAME
   Bild: 124×248px
   Screen-Bereich: top 8.87%, left 8.87%, width 83.06%, height 86.69%
   Gesamtbreite im Plugin: 130px → Höhe: 130 × (248/124) = 260px
   ================================================================ */
.mmg-iphone {
    width: 130px;
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
}

.mmg-iphone .mmg-device-frame {
    position: relative;
    width: 100%;
    padding-bottom: calc(248 / 124 * 100%); /* aspect ratio 124:248 = 1:2 */
    background: url('../images/device-iphone-new.png') center/100% 100% no-repeat;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.mmg-iphone .mmg-device-frame::before,
.mmg-iphone .mmg-device-frame::after { display: none; }

/* Side buttons nicht mehr nötig */
.mmg-iphone .mmg-btn-vol-up,
.mmg-iphone .mmg-btn-vol-down,
.mmg-iphone .mmg-btn-power { display: none; }

/* Screenshot genau über den Screen legen */
.mmg-iphone .mmg-device-screen {
    position: absolute;
    top:    5.24%;
    left:   8.87%;
    width:  81.45%;
    height: 89.92%;
    background: #fff;
    overflow: hidden;
    border-radius: 8px;
    z-index: 1;
}
.mmg-iphone .mmg-device-screen img.mmg-shot,
.mmg-iphone .mmg-device-screen iframe {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block; border: 0;
}

/* ================================================================
   Placeholder + shimmer
   ================================================================ */
.mmg-placeholder {
    width: 100%; height: 100%;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    color: #bbb;
    font: 11px/1.5 -apple-system, sans-serif;
    text-align: center; padding: 10px;
}

.mmg-device-screen .mmg-shimmer {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: mmg-shimmer 1.4s infinite;
}
@keyframes mmg-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}