/* University of El Fasher — CR80 ID Card (8.56 × 5.4 cm) */

:root {
    --id-card-green: #0a4d42;
    --id-card-teal: #1a8f7d;
    --id-card-red: #e72626;
    --id-card-w: 8.56cm;
    --id-card-h: 5.4cm;
    --id-card-r: 0.318cm;
    --id-card-scale: 1.45;
}

.uof-id-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: .5rem 0 1.5rem;
}

.uof-id-card-locale-title {
    font-weight: 700;
    color: #145a4d;
    margin-bottom: .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #c9a227;
}

.uof-id-card-locale-wrap {
    margin: 0 auto;
    transform: scale(var(--id-card-scale));
    transform-origin: top center;
    margin-bottom: calc((var(--id-card-h) * var(--id-card-scale)) - var(--id-card-h) + .5rem);
}

.uof-id-card-layout-print .uof-id-card-locale-wrap {
    transform: none;
    margin-bottom: 1rem;
}

.uof-id-card-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
}

.uof-id-card-face {
    position: relative;
    width: var(--id-card-w);
    height: var(--id-card-h);
    flex-shrink: 0;
    border-radius: var(--id-card-r);
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .18);
    -webkit-font-smoothing: antialiased;
}

.uof-id-card-ltr {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.uof-id-card-rtl {
    font-family: 'Almarai', Arial, Tahoma, sans-serif;
}

.uof-id-card-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.uof-id-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.id-card-label {
    color: var(--id-card-teal);
    font-weight: 800;
    font-size: 2.5mm;
    line-height: 1.15;
    white-space: nowrap;
    flex-shrink: 0;
}

.id-card-label--caps {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.id-card-colon {
    color: var(--id-card-teal);
    font-weight: 800;
    font-size: 2.5mm;
    flex-shrink: 0;
}

.id-card-value {
    color: #111;
    font-weight: 800;
    font-size: 2.75mm;
    line-height: 1.15;
    text-shadow: 0 0 .5mm rgba(255, 255, 255, .9);
}

.id-card-date-value {
    color: #111;
    font-weight: 800;
    font-size: 2.35mm;
    direction: ltr;
    unicode-bidi: embed;
    flex: 0 0 auto;
}

.id-card-type-badge {
    display: inline-block;
    padding: .65mm 3.2mm;
    background: var(--id-card-green);
    color: #fff;
    font-size: 2.1mm;
    font-weight: 800;
    border-radius: 999px;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.15;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-card-type-badge--overlay {
    position: absolute;
    z-index: 3;
    top: 20.5%;
    left: 50%;
    transform: translateX(-50%);
}

.id-card-photo-wrap {
    position: absolute;
    top: 33%;
    left: 4%;
    width: 18%;
    height: 36.5%;
    z-index: 2;
    overflow: visible;
}

.uof-id-card-rtl .id-card-photo-wrap {
    left: auto;
    right: 4%;
}

.id-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
    position: relative;
    z-index: 1;
}

/* Seal + signature cluster under the photo */
.id-card-stamp-cluster {
    position: absolute;
    left: 50%;
    bottom: -45%;
    transform: translateX(-50%);
    width: 153%;
    height: 78%;
    z-index: 4;
    pointer-events: none;
}

.uof-id-card-rtl .id-card-stamp-cluster {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.id-card-photo-stamp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    opacity: .52;
    pointer-events: none;
    z-index: 1;
}

/* Signature in front of seal: EN bottom-right, AR bottom-left */
.id-card-official-signature {
    position: absolute;
    z-index: 2;
    bottom: -2%;
    inset-inline-end: -4%;
    width: 58%;
    max-height: 48%;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
    opacity: 1;
}

.uof-id-card-rtl .id-card-official-signature {
    object-position: bottom left;
}

.id-card-fields {
    position: absolute;
    left: 23.5%;
    right: 4%;
    top: 34%;
    bottom: 17%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .45mm;
    pointer-events: none;
}

.uof-id-card-rtl .id-card-fields {
    left: 4%;
    right: 23.5%;
}

.id-card-field {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: flex-start;
    gap: .2mm .3mm;
    white-space: normal;
    direction: ltr;
    text-align: left;
    flex: 0 1 auto;
}

.uof-id-card-rtl .id-card-field {
    direction: rtl;
    text-align: right;
}

.id-card-field .id-card-value--numeric {
    flex: 0 1 auto;
    min-width: auto;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
    overflow-wrap: normal;
}

.uof-id-card-rtl .id-card-field .id-card-value--numeric {
    text-align: right;
}

.id-card-field .id-card-value {
    flex: 1 1 10mm;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: unset;
}

.id-card-date {
    position: absolute;
    bottom: 9.5%;
    display: flex;
    align-items: baseline;
    gap: .35mm;
    white-space: nowrap;
    z-index: 2;
    direction: ltr;
}

.id-card-date--issue { left: 11.5%; }
.id-card-date--expiry { left: 57%; }

.uof-id-card-rtl .id-card-date--issue {
    left: auto;
    right: 11.5%;
    direction: rtl;
}

.uof-id-card-rtl .id-card-date--expiry {
    left: auto;
    right: 57%;
    direction: rtl;
}

.id-card-qr-wrap {
    position: absolute;
    top: 26%;
    right: 9%;
    left: auto;
    width: 24%;
    min-width: 14mm;
    text-align: center;
    z-index: 10;
}

.uof-id-card-rtl .id-card-qr-wrap {
    right: 9%;
    left: auto;
}

.id-card-qr-img {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    min-height: 16mm;
    aspect-ratio: 1;
    object-fit: contain;
    border: .4mm solid #fff;
    box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .2);
}

.id-card-qr-caption {
    margin-top: .9mm;
    font-size: 2.15mm;
    color: var(--id-card-teal);
    font-weight: 800;
    line-height: 1.15;
}

@media screen and (max-width: 900px) {
    .uof-id-card-locale-wrap {
        transform: scale(1.1);
        margin-bottom: calc((var(--id-card-h) * 1.1) - var(--id-card-h) + .5rem);
    }

    .uof-id-card-pair {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 575.98px) {
    .uof-id-card-locale-wrap {
        transform: scale(0.92);
        transform-origin: top center;
        margin-bottom: calc((var(--id-card-h) * 0.92) - var(--id-card-h) + .5rem);
    }

    .id-card-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
    }

    .id-card-toolbar .btn {
        flex: 1 1 auto;
        min-width: 140px;
    }
}

@media screen and (max-width: 400px) {
    .uof-id-card-locale-wrap {
        transform: scale(0.78);
        margin-bottom: calc((var(--id-card-h) * 0.78) - var(--id-card-h) + .5rem);
    }
}

@media print {
    :root {
        --id-card-scale: 1;
    }

    .id-card-toolbar,
    .no-print,
    .uof-id-card-locale-title,
    .id-card-print-controls {
        display: none !important;
    }

    body.id-card-print-page {
        padding: 0;
        margin: 0;
        background: #fff !important;
    }

    .uof-id-card-wrap {
        gap: .4cm;
        padding: 0;
    }

    .uof-id-card-locale-wrap {
        transform: none !important;
        margin-bottom: .4cm !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .uof-id-card-face {
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        width: var(--id-card-w);
        height: var(--id-card-h);
    }

    .uof-id-card-pair {
        gap: .25cm;
        justify-content: center;
    }

    /* A4: one locale (front+back) per page */
    body.id-card-print--a4 .uof-id-card-locale-block {
        break-after: page;
        page-break-after: always;
    }

    body.id-card-print--a4 .uof-id-card-locale-block:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* Plastic CR80: one face per card page (duplex: front then back) */
    body.id-card-print--plastic {
        width: 85.6mm;
        margin: 0;
        padding: 0;
    }

    body.id-card-print--plastic .uof-id-card-wrap--print,
    body.id-card-print--plastic .uof-id-card-locale-block,
    body.id-card-print--plastic .uof-id-card-locale-wrap,
    body.id-card-print--plastic .uof-id-card-pair--plastic {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        width: 85.6mm;
    }

    body.id-card-print--plastic .uof-id-card-pair--plastic {
        display: block;
    }

    body.id-card-print--plastic .uof-id-card-face {
        width: 85.6mm !important;
        height: 54mm !important;
        border-radius: 0;
        margin: 0;
        break-after: page;
        page-break-after: always;
    }

    body.id-card-print--plastic .uof-id-card-locale-block:last-child .uof-id-card-face:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}

.id-card-print-page .btn-uof-primary {
    background: #0a4d42;
    border-color: #0a4d42;
    color: #fff;
}

.id-card-print-page .btn-uof-primary:hover {
    background: #083d35;
    border-color: #083d35;
    color: #fff;
}

/* Screen: print controls + plastic preview */
.id-card-print-page {
    background: #e8efe9;
    min-height: 100vh;
    padding: 1rem 1rem 2rem;
}

.id-card-print-controls {
    max-width: 960px;
    margin: 0 auto 1.5rem;
}

.id-card-print-controls__panel {
    background: #fff;
    border: 1px solid #c5d6c9;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 18px rgba(10, 77, 66, .08);
}

.id-card-print-controls__title {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.id-card-print-controls__title > i {
    font-size: 1.5rem;
    color: #0a4d42;
    margin-top: .1rem;
}

.id-card-print-choice {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.id-card-print-choice__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .4rem .7rem;
    border: 1px solid #c5d6c9;
    border-radius: .5rem;
    background: #f7faf8;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: #145a4d;
}

.id-card-print-choice__item:has(input:checked) {
    background: #0a4d42;
    border-color: #0a4d42;
    color: #fff;
}

.id-card-print-choice__item input {
    accent-color: #c9a227;
}

.id-card-print-tip {
    font-size: .85rem;
    color: #3d5c52;
    background: #f0f7f3;
    border-radius: .5rem;
    padding: .65rem .85rem;
}

body.id-card-print--plastic .uof-id-card-locale-wrap {
    transform: none;
    margin-bottom: 1rem;
}

body.id-card-print--plastic .uof-id-card-pair--plastic {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

body.id-card-print--plastic .uof-id-card-wrap--print {
    align-items: center;
}

.uof-id-card-layout-plastic .uof-id-card-locale-wrap {
    transform: none;
    margin-bottom: 0;
}