/* =============================================================================
   Portfolio Image Maker for Elementor — widget.css
   =============================================================================

   TABLE OF CONTENTS
   1.  Custom Properties (design tokens)
   2.  Wrapper & Canvas
   3.  Ambient Blobs
   4.  Theme: Dark Studio
   5.  Theme: Light Minimal
   6.  iMac (Desktop) Mockup
   7.  iPhone (Mobile) Mockup
   8.  Screenshots
   9.  Placeholders
  10.  Responsive overrides
  ============================================================================= */


/* ---------------------------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------------------------- */
.pime-wrapper {
    /* Spacing tokens */
    --pime-canvas-w:      900px;
    --pime-canvas-h:      500px;

    /* Desktop slot (matches original spec) */
    --pime-desk-top:      90px;
    --pime-desk-left:     95px;
    --pime-desk-w:        560px;
    --pime-desk-h:        300px;

    /* Mobile slot (matches original spec) */
    --pime-mob-top:       120px;
    --pime-mob-right:     115px;
    --pime-mob-w:         150px;
    --pime-mob-h:         280px;

    /* Device shape */
    --pime-radius-desk:   8px;
    --pime-radius-mob:    20px;

    /* Dark-Studio palette */
    --pime-ds-bg1:        #0a0a14;
    --pime-ds-bg2:        #12122a;
    --pime-ds-device:     #1a1a2e;
    --pime-ds-bezel:      #16213e;
    --pime-ds-chin:       #1a1a2e;
    --pime-ds-neck:       #222244;
    --pime-ds-foot:       #1a1a2e;
    --pime-ds-glow1:      rgba(120, 40, 255, .35);
    --pime-ds-glow2:      rgba(30, 80, 255, .25);
    --pime-ds-btn:        #2a2a4a;
    --pime-ds-screen-bg:  #0a0a18;

    /* Light-Minimal palette */
    --pime-lm-bg1:        #f0f4f8;
    --pime-lm-bg2:        #dde6ee;
    --pime-lm-device:     #d8dee6;
    --pime-lm-bezel:      #c8cfd8;
    --pime-lm-chin:       #d0d7df;
    --pime-lm-neck:       #bec6cf;
    --pime-lm-foot:       #c0c8d0;
    --pime-lm-glow1:      rgba(100, 150, 255, .18);
    --pime-lm-glow2:      rgba(200, 220, 255, .22);
    --pime-lm-btn:        #b8bec8;
    --pime-lm-screen-bg:  #eef2f6;

    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   2. Wrapper & Canvas
   --------------------------------------------------------------------------- */
.pime-canvas {
    position:     relative;
    width:        var(--pime-canvas-w);
    height:       var(--pime-canvas-h);
    max-width:    100%;
    border-radius: 24px;
    overflow:     hidden;
    margin:       0 auto;
    box-sizing:   border-box;

    /* fallback shadow – overridable via Elementor slider */
    box-shadow: 0 60px 60px -20px rgba(0,0,0,.7);
}


/* ---------------------------------------------------------------------------
   3. Ambient Blobs
   --------------------------------------------------------------------------- */
.pime-blob {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(70px);
    pointer-events: none;
    z-index:       0;
    transition:    background .4s, width .4s, height .4s;
}

.pime-blob--1 {
    width:  340px;
    height: 340px;
    top:    -80px;
    left:   -60px;
}

.pime-blob--2 {
    width:  260px;
    height: 260px;
    bottom: -60px;
    right:  -40px;
}


/* ---------------------------------------------------------------------------
   4. Theme: Dark Studio
   --------------------------------------------------------------------------- */
.pime-theme-dark-studio {
    background: linear-gradient(135deg, var(--pime-ds-bg1) 0%, var(--pime-ds-bg2) 100%);
}

.pime-theme-dark-studio .pime-blob--1 { background: var(--pime-ds-glow1); }
.pime-theme-dark-studio .pime-blob--2 { background: var(--pime-ds-glow2); }

/* Device colours */
.pime-theme-dark-studio .pime-imac__body,
.pime-theme-dark-studio .pime-imac__bezel,
.pime-theme-dark-studio .pime-imac__chin    { background: var(--pime-ds-bezel); }
.pime-theme-dark-studio .pime-imac__neck    { background: var(--pime-ds-neck); }
.pime-theme-dark-studio .pime-imac__foot    { background: var(--pime-ds-foot); }
.pime-theme-dark-studio .pime-imac__screen  { background: var(--pime-ds-screen-bg); }
.pime-theme-dark-studio .pime-imac__camera  { background: #111; border-color: #333; }

.pime-theme-dark-studio .pime-iphone__frame { background: var(--pime-ds-device); }
.pime-theme-dark-studio .pime-iphone__screen { background: var(--pime-ds-screen-bg); }
.pime-theme-dark-studio .pime-iphone__island { background: #0a0a14; }
.pime-theme-dark-studio .pime-iphone__button--side,
.pime-theme-dark-studio .pime-iphone__button--vol-up,
.pime-theme-dark-studio .pime-iphone__button--vol-dn { background: var(--pime-ds-btn); }

/* Glow effect */
.pime-theme-dark-studio.pime-glow {
    box-shadow:
        0 60px 60px -20px rgba(0,0,0,.9),
        0 0 120px 20px rgba(120,40,255,.18),
        inset 0 0 60px rgba(30,80,255,.05);
}


/* ---------------------------------------------------------------------------
   5. Theme: Light Minimal
   --------------------------------------------------------------------------- */
.pime-theme-light-minimal {
    background: linear-gradient(135deg, var(--pime-lm-bg1) 0%, var(--pime-lm-bg2) 100%);
}

.pime-theme-light-minimal .pime-blob--1 { background: var(--pime-lm-glow1); }
.pime-theme-light-minimal .pime-blob--2 { background: var(--pime-lm-glow2); }

/* Device colours */
.pime-theme-light-minimal .pime-imac__body,
.pime-theme-light-minimal .pime-imac__bezel,
.pime-theme-light-minimal .pime-imac__chin  { background: var(--pime-lm-bezel); }
.pime-theme-light-minimal .pime-imac__neck  { background: var(--pime-lm-neck); }
.pime-theme-light-minimal .pime-imac__foot  { background: var(--pime-lm-foot); }
.pime-theme-light-minimal .pime-imac__screen { background: var(--pime-lm-screen-bg); }
.pime-theme-light-minimal .pime-imac__camera { background: #c0c8d0; border-color: #aab2bc; }

.pime-theme-light-minimal .pime-iphone__frame  { background: var(--pime-lm-device); }
.pime-theme-light-minimal .pime-iphone__screen { background: var(--pime-lm-screen-bg); }
.pime-theme-light-minimal .pime-iphone__island { background: #b8bec8; }
.pime-theme-light-minimal .pime-iphone__button--side,
.pime-theme-light-minimal .pime-iphone__button--vol-up,
.pime-theme-light-minimal .pime-iphone__button--vol-dn { background: var(--pime-lm-btn); }

/* Glow effect */
.pime-theme-light-minimal.pime-glow {
    box-shadow:
        0 40px 80px -10px rgba(100,140,200,.25),
        0 0 80px 10px rgba(200,220,255,.35),
        inset 0 0 40px rgba(100,150,255,.04);
}


/* ---------------------------------------------------------------------------
   6. iMac (Desktop) Mockup
   --------------------------------------------------------------------------- */

/* Outer position wrapper – matches original slot */
.pime-device--desktop {
    position: absolute;
    top:      var(--pime-desk-top);
    left:     var(--pime-desk-left);
    width:    var(--pime-desk-w);
    height:   var(--pime-desk-h);
    z-index:  2;
}

/* iMac assembly */
.pime-imac {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    height:         100%;
}

/* Main screen body */
.pime-imac__body {
    position:      relative;
    width:         100%;
    flex:          1;
    border-radius: 12px 12px 0 0;
    padding:       6px;
    box-sizing:    border-box;
    /* depth shadow on back face */
    box-shadow:
        0 -2px 0 rgba(255,255,255,.08) inset,
        0 10px 30px rgba(0,0,0,.5),
        0 2px 0 rgba(0,0,0,.3) inset;
}

/* Inner bezel ring */
.pime-imac__bezel {
    position:      relative;
    width:         100%;
    height:        100%;
    border-radius: 8px 8px 0 0;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    padding-top:   8px;
    box-sizing:    border-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Tiny camera dot */
.pime-imac__camera {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    border:        1px solid;
    margin-bottom: 4px;
    flex-shrink:   0;
    z-index:       1;
}

/* Screen viewport */
.pime-imac__screen {
    flex:          1;
    width:         calc(100% - 0px);
    overflow:      hidden;
    border-radius: 4px;
    position:      relative;
}

/* Chin strip under bezel */
.pime-imac__chin {
    width:         100%;
    height:        16px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

/* Neck column */
.pime-imac__neck {
    width:  18px;
    height: 20px;
    border-radius: 0 0 2px 2px;
}

/* Base foot */
.pime-imac__foot {
    width:         80px;
    height:        8px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}


/* ---------------------------------------------------------------------------
   7. iPhone (Mobile) Mockup
   --------------------------------------------------------------------------- */

/* Outer position wrapper – matches original slot */
.pime-device--mobile {
    position: absolute;
    top:      var(--pime-mob-top);
    right:    var(--pime-mob-right);
    width:    var(--pime-mob-w);
    height:   var(--pime-mob-h);
    z-index:  3;
}

.pime-iphone {
    width:  100%;
    height: 100%;
}

/* Main frame */
.pime-iphone__frame {
    position:       relative;
    width:          100%;
    height:         100%;
    border-radius:  30px;
    padding:        12px 8px;
    box-sizing:     border-box;
    overflow:       visible;
    box-shadow:
        0 20px 50px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 0 0 2px rgba(0,0,0,.4);
}

/* Dynamic island notch pill */
.pime-iphone__notch {
    position:       relative;
    display:        flex;
    justify-content: center;
    margin-bottom:  6px;
    z-index:        1;
}

.pime-iphone__island {
    display:        block;
    width:          44px;
    height:         12px;
    border-radius:  8px;
}

/* Screen area */
.pime-iphone__screen {
    width:          100%;
    height:         calc(100% - 26px);
    border-radius:  22px;
    overflow:       hidden;
    position:       relative;
}

/* Physical side buttons */
.pime-iphone__button {
    position:      absolute;
    border-radius: 2px;
}

.pime-iphone__button--side {
    right:  -3px;
    top:    60px;
    width:  3px;
    height: 52px;
    border-radius: 0 2px 2px 0;
}

.pime-iphone__button--vol-up {
    left:   -3px;
    top:    60px;
    width:  3px;
    height: 28px;
    border-radius: 2px 0 0 2px;
}

.pime-iphone__button--vol-dn {
    left:   -3px;
    top:    96px;
    width:  3px;
    height: 28px;
    border-radius: 2px 0 0 2px;
}


/* ---------------------------------------------------------------------------
   8. Screenshots
   --------------------------------------------------------------------------- */
.pime-screenshot {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: top center;
}

.pime-screenshot--desktop {
    border-radius: var(--pime-radius-desk);
}

.pime-screenshot--mobile {
    border-radius: var(--pime-radius-mob);
}


/* ---------------------------------------------------------------------------
   9. Placeholders
   --------------------------------------------------------------------------- */
.pime-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    font-family:     system-ui, sans-serif;
    font-size:       11px;
    text-align:      center;
    padding:         6px;
    box-sizing:      border-box;
    opacity:         .5;
}

.pime-placeholder--desktop { color: #aaa; }
.pime-placeholder--mobile  { color: #aaa; font-size: 9px; }


/* ---------------------------------------------------------------------------
   10. Responsive overrides
   --------------------------------------------------------------------------- */

/*
 * Scale-based approach: keep the 900×500 logical canvas,
 * shrink it via CSS transform on smaller screens so devices
 * maintain their absolute positions perfectly.
 */
.pime-canvas {
    transform-origin: top center;
    transition:       transform .2s;
}

@media (max-width: 960px) {
    .pime-wrapper {
        overflow: hidden;
        /* extra room for the transformed canvas shadow */
        padding-bottom: 20px;
    }

    .pime-canvas {
        /* Scale factor: viewport / 900 */
        --pime-scale: calc( (100vw - 40px) / 900 );
        transform:    scale( var(--pime-scale) );
        /* Keep the wrapper height correct after scaling */
        margin-bottom: calc( var(--pime-canvas-h) * (var(--pime-scale) - 1) );
    }
}

@media (max-width: 600px) {
    .pime-canvas {
        --pime-scale: calc( (100vw - 20px) / 900 );
        margin-bottom: calc( var(--pime-canvas-h) * (var(--pime-scale) - 1) );
    }
}

@media (max-width: 380px) {
    .pime-canvas {
        --pime-scale: calc( 100vw / 900 );
        margin-bottom: calc( var(--pime-canvas-h) * (var(--pime-scale) - 1) );
    }
}