/* Normal Screen View */
.a4-container {
    width: 210mm;
    height: 296mm;
    background: white;
    margin: 40px auto !important; /* Centers the page on website */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 45mm; /* Gap from top of page */
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

.id-card-render {
    width: 85.6mm;
    margin-bottom: 15mm;
    border: 1px solid #ddd;
}

#crop-modal { display: none; }

/* Print Logic */
@media print {
    @page {
        size: A4;
        margin: 0 !important;
    }
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100%;
        overflow: hidden !important;
    }
    .no-print { display: none !important; }
    #final-section { display: block !important; margin: 0 !important; }
    .a4-container {
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        page-break-after: avoid !important;
    }
}

#rotate-slider {
    width: 100%;
}
#rotate-slider:active {
    cursor: grabbing;
}

/* Print Specific Rules */
@media print {
    @page { size: A4; margin: 0 !important; }
    html, body { margin: 0 !important; padding: 0 !important; height: 100%; overflow: hidden !important; }
    .no-print { display: none !important; }
    #final-section { display: block !important; margin: 0 !important; }
    .a4-container {
        margin: 0 auto !important; /* Centers the page in print preview */
        padding-top: 50mm !important; /* Extra gap for printer margins */
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
    }
}


#crop-modal .flex-col {
    width: 100%;
    clear: both; /* Ye ensure karega ki koi bhi element side mein na bhage */
}

input[type="range"] {
    display: block;
    width: 100%;
}