/* Overrides for the demo emocard step - keep this file minimal and targeted */

/* Reset any global .step fixed sizes for the demo only */
.step.step--demo {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* wrapper ensures a stable layout and space for the iframe */
.step.step--demo .emocard-demo-wrapper {
    min-height: 520px; /* fallback for mobile */
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

/* Force portrait card appearance */
.step.step--demo .emocard-demo-frame {
    width: min(420px, 92vw) !important;
    aspect-ratio: 3 / 4;
    min-height: 520px !important;
    max-height: 100vh !important;
    height: auto !important;
}

@media (min-width: 768px) {
    .step.step--demo .emocard-demo-frame {
        width: 480px !important;
        min-height: 640px !important;
    }
}

@media (min-width: 1024px) {
    /* desktop fixes: Fixed reasonable size, centered, looking like a phone */
    .step.step--demo { 
        min-height: auto !important; 
        padding-bottom: 40px !important; /* Space at bottom */
    }
    
    .step.step--demo .emocard-demo-wrapper { 
        min-height: auto !important;
        height: auto !important;
        padding: 20px 0 !important; /* Breathing room inside wrapper */
    }

    .step.step--demo .emocard-demo-frame {
        /* Fixed dimensions for stability */
        width: 380px !important; 
        height: 506px !important; /* 380 * 4/3 approx */
        
        /* Reset constraints that might force it to expand */
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 3 / 4;
        
        /* Centering and styling */
        margin: 0 auto !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        border-radius: 20px !important; /* Ensure rounded corners */
    }
}