static/css/preview.css

/* Aadhaar Preview & Capture Styles - Aadhaar Pro */

.preview-area {
    display: none !important; /* Hide during normal usage */
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

/* Workspace Styles (Standard A4) */
#workspace {
    position: relative;
    width: 794px !important;
    height: 1123px !important;
    background-color: white !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden !important;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

/* Base text element */
.text-element {
    position: absolute;
    z-index: 10;
    color: black;
    line-height: 1;
    letter-spacing: -0.21px;
    white-space: normal;
    word-wrap: break-word;
    font-family: 'AadhaarEnglish', Arial, sans-serif;
}

/* Section Containers */
.inrol-section {
    position: absolute;
    top: 385px;
    left: 90px;
    width: 400px;
    height: auto;
    z-index: 10;
}

.inroltext {
    position: relative;
    font-size: 8px;
    line-height: 1.55;
    margin-top: 23px;
    margin-left: 5px;
    color: black;
    font-family: 'AadhaarEnglish', Arial, sans-serif;
}

.signature-section {
    position: absolute;
    z-index: 10;
    top: 585px;
    left: 75px;
    width: 80px;
    height: 40px;
}

.signature {
    font-size: 6.7px;
    letter-spacing: -0.15px;
    color: #444; /* Subtle gray for "Not Verified" */
}

.signature-text {
    position: relative;
    top: 5.2px;
    font-size: 5px;
    line-height: 0.9;
    color: black;
}

.qr-code {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.qr-code-image {
    position: absolute !important;
    top: 557px !important;
    left: 223px !important;
    width: 163px !important;
    height: 163px !important;
}

.qr-code-image-2 {
    position: absolute !important;
    top: 850px !important;
    left: 600px !important;
    width: 150px !important;
    height: 150px !important;
}

.left-panel {
    position: absolute;
    top: 741px;
    left: 68px;
    width: 250px;
    height: auto;
    z-index: 10;
}

.fixed-image {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 69px;
    height: 83px;
    object-fit: cover;
    z-index: 11;
}

.name-section {
    position: absolute;
    top: 121px;
    left: 80px;
    width: 150px;
    height: auto;
}

/* Specific Field Styles */
.hindi-name, .address-hi-label, .address-hi-text, .gender-text {
    font-family: 'AadhaarHindi', Arial, sans-serif;
}

.hindi-name { top: 0px; font-size: 8px; left: 3px; }
.english-name { top: 13px; font-size: 8px; left: 3px; letter-spacing: 0.2px; }
.dob-text { top: 26px; font-size: 8px; left: 3px; font-family: 'AadhaarDigits', Arial, sans-serif; }
.gender-text { top: 40px; font-size: 8px; left: 3px; }

.aadhar-no-top { top: 738px; left: 140px; font-size: 18px; font-family: 'AadhaarDigits';  }
.aadhar-no-middle { top: 258px; left: 78px; font-size: 15px; font-family: 'AadhaarDigits'; font-weight: bold; }
.aadhar-no-bottom { top: 149px; left: 98px; font-size: 15px; font-family: 'AadhaarDigits'; font-weight: bold; width: 119px; }

.enrolment-no { top: 0px; left: 0px; font-size: 12px; font-family: 'AadhaarDigits'; }

.inrol-date {
    position: absolute;
    transform: rotate(-90deg);
    transform-origin: center center;
    font-size: 6.5px !important;
    left: -110px;
    top: 163px;
}

.address-section {
    position: absolute;
    top: 852px;
    left: 420px;
    width: 180px;
    height: auto;
    z-index: 10;
}

.address-hi-label { top: 3px; font-size: 8px; left: 0; }
.address-hi-text { top: 10.5px; font-size: 7.65px; line-height: 1.06; left: 0; width: 100%; }
.address-en-label { top: 42px; font-size: 8px; left: 0; }
.address-en-text { top: 50px; font-size: 7.65px; line-height: 1.09; left: 0; width: 100%; }

.download-date {
    position: absolute;
    transform: rotate(-90deg);
    transform-origin: center center;
    font-size: 6.5px !important;
    left: -108px;
    top: 50px;
}

@media print {
    @page { size: A4; margin: 0; }
    body { background: white !important; }
    .workspace { box-shadow: none !important; }
}