/* ===== RESET ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Times New Roman";

}

/* ===== PRINT PAGE GRID (KEY PART) ===== */
.print-page {
    width: 211mm;
    padding: 3mm;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 🔥 2 cards per row */
    /*grid-template-columns: repeat(3, 63mm);*/   /* 🔥 3 cards per row */
    gap: 4mm 4mm; /* spacing like PDF */
}

/* ===== ID CARD SIZE (MATCH PDF) ===== */
.id-card {
    width: 100%;
    height: 56mm; /* 🔥 exact height */
    border: 2px solid #000;
    padding: 1mm;
    position: relative;
    overflow: hidden;
}

/* ===== HEADER ===== */
.header-block {
    text-align: center;
    margin-top: 1mm;
}

.red {
    color: #8b0000;
    font-weight: bold;
}

.blue {
    color: #0b2c6b;
    font-weight: bold;
}

.top-header {
    font-size: 10pt;
}

.sub-header {
    margin-top: 0mm;
    font-size: 9pt;
}

.exam-title {
    font-size: 10pt;
    margin-top: 0mm;
}

.valid {
    font-size: 9pt;
    margin-top: 0mm;
}

/* ===== BODY ===== */
.body {
    display: flex;
    margin-top: 0.5mm;
}

/* PHOTO */
.photo-box {
    width: 22mm;
    margin-top: -4mm;
    height: 28mm;
    overflow: hidden;
    flex-shrink: 0;
}

    .photo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* TEXT */
.details {
    flex: 1;
    text-align: left;
    padding-left: 4mm;
}

.role {
    text-align: left;
    font-size: 11pt;
    font-weight: bold;
    color: #0b2c6b;
    padding-left: 4mm;
}

.name {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 1mm;
}

.district {
    font-size: 9pt;
    font-weight: bold;
    margin-top: 1mm;
}

/* ===== SIGNATURE ===== */
.signature {
    position: absolute;
    right: 9mm;
    bottom: 2mm;
    text-align: center;
    font-size: 8pt;
}

    .signature img {
        width: 20mm;
        display: block;
        margin: 0 auto 1mm auto;
    }

    .sig-header {
        margin-top: 0mm;
        font-size: 8pt;
    }

/* ===== PRINT CONTROL ===== */
@media print {
    body {
        margin:10mm;
    }

    .id-card {
        page-break-inside: avoid;
    }
}