.pdf-page {
    page-break-after: always;
    width: 100%;
}

.id-card,
.backside-card {
    width: 430px;
    height: 680px;
    margin: 20px auto;
    background: #fff;
    border: 6px solid #1d4d8b;
    border-radius: 10px;
    position: relative;
}

/* Front card background */
.id-card {
    background-image: url("https://snc.unboundcodes.com/assets/img/id_card_img/front_background_img1.png"),
    url("https://snc.unboundcodes.com/assets/img/id_card_img/front-background_img2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, center;
    background-size: 100% 270px, cover;
}

/* Back card background */
.backside-card {
    background-image: url("https://snc.unboundcodes.com/assets/img/id_card_img/front_background_img1.png"),
    url("https://snc.unboundcodes.com/assets/img/id_card_img/back_background_image.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, center;
    background-size: 100% 330px, cover;
}

.header-logo-snc {
    text-align: start;
    padding: 20px;
}

.header-logo-snc img {
    width: 130px;
}

.top-right-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: auto;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 6px solid #1d4d8b;
    margin: 10px auto;
    display: block;
}

.info-section {
    padding: 0 35px 10px 35px;
    flex: 1;
}

.info-section h3 {
    color: #1d4d8b;
    font-weight: 800;
    text-align: center;
    font-size: 24px;
    margin: 5px 0;
}

.info-section p {
    margin: 0;
    font-size: 19px;
    word-spacing: 2px;
    text-align: left;
}

.label {
    font-weight: 800;
    color:#1d4d8b;
}

.id-detail {
    margin-top: 20px;
}

.id-detail p {
    margin: 5px 0;
}

.company-link {
    text-align: center !important;
    margin-top: 30px;
}

.profile-designation,
.company-link p {
    text-align: center !important;
}

.company-link a {
    color: #28a745;
    text-decoration: none;
}

.information-section {
    padding: 30px 58px 13px 58px;
}

.information-section h5 {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #1d4d8b;
    margin-bottom: 10px;
}

.information-section ul {
    padding-left: 22px;
}

.information-section li {
    font-size: 19px;
    margin-bottom: 10px;
}

.qr-wrapper {
    text-align: center;
    margin-top: 20px;
}

.qr-wrapper img {
    width: 140px;
    height: 140px;
}

@media print {

    /* Reset all margins and padding */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: white;
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: 54mm 86mm;
        margin: 0;
    }

    /* Card container */
    .pdf-page {
        width: 54mm;
        height: 86mm;
        page-break-after: always;
        page-break-inside: avoid;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Both cards - PRESERVE EXACT BACKGROUNDS */
    .id-card {
        width: 54mm !important;
        height: 86mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid #1d4d8b !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        /* Explicitly set front backgrounds */
        background-image: url("https://snc.unboundcodes.com/assets/img/id_card_img/front_background_img1.png"),
        url("https://snc.unboundcodes.com/assets/img/id_card_img/front-background_img2.png") !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: bottom center, center !important;
        background-size: 100% 130px, cover !important;
        background-color: white !important;
    }

    .backside-card {
        width: 54mm !important;
        height: 86mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid #1d4d8b !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        /* Explicitly set back backgrounds */
        background-image: url("https://snc.unboundcodes.com/assets/img/id_card_img/front_background_img1.png"),
        url("https://snc.unboundcodes.com/assets/img/id_card_img/back_background_image.png") !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: bottom center, center !important;
        background-size: 100% 130px, cover !important;
        background-color: white !important;
    }

    /* Ensure backgrounds print */
    .id-card,
    .backside-card {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        forced-color-adjust: none !important;
    }

    /* Top right decoration */
    .top-right-img {
        position: absolute;
        top: 0;
        right: 0;
        width: 22mm !important;
        height: auto !important;
        z-index: 2;
    }

    /* Header logo */
    .header-logo-snc {
        position: relative;
        z-index: 3;
        padding: 2.5mm 2mm 1mm 2mm !important;
        text-align: left;
    }

    .header-logo-snc img {
        width: 18mm !important;
        height: auto !important;
    }

    /* Profile image */
    .profile-pic {
        width: 18mm !important;
        height: 18mm !important;
        border: 1mm solid #1d4d8b !important;
        border-radius: 50% !important;
        margin: 0.5mm auto !important;
        display: block;
        object-fit: cover;
        position: relative;
        z-index: 3;
        background: transparent !important;
    }

    /* Info section */
    .info-section {
        padding: 0 4mm !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 3;
        background: transparent !important;
    }

    /* Name */
    .info-section h3 {
        font-size: 8pt !important;
        font-weight: 800 !important;
        color:#1d4d8b !important;
        text-align: center;
        margin: 0.3mm 0 !important;
        line-height: 1.2;
        background: transparent !important;
    }

    /* Designation */
    .profile-designation {
        font-size: 6.5pt !important;
        text-align: center;
        margin: 0 0 0.8mm 0 !important;
        background: transparent !important;
        color: #000 !important;
    }

    /* Details */
    .id-detail {
        margin-top: 0.8mm !important;
    }

    .id-detail p {
        font-size: 7pt !important;
        margin: 0.7mm 0 !important;
        line-height: 1.15;
        background: transparent !important;
    }

    .label {
        width: 19mm !important;
        font-weight: 800 !important;
        color: #1d4d8b !important;
    }

    /* Company info */
    .company-link {
        margin-top: auto !important;
        padding: 0.5mm 0 1.5mm 0 !important;
        text-align: center;
        background: transparent !important;
    }

    .company-link p {
        font-size: 5.5pt !important;
        margin: 0.2mm 0 !important;
        background: transparent !important;
    }

    .company-link a {
        font-size: 5pt !important;
        color: #28a745 !important;
        text-decoration: none;
        background: transparent !important;
    }

    .fw-bold {
        font-weight: 800 !important;
        color:#1d4d8b !important;
    }

    /* Back side */
    .backheader-logos {
        text-align: center;
        margin: 2.5mm 0 0.5mm 0 !important;
        position: relative;
        z-index: 3;
    }

    .backheader-logos img {
        width: 20mm !important;
        height: auto !important;
    }

    .information-section {
        padding: 1mm 4.5mm !important;
        flex: 1;
        position: relative;
        z-index: 3;
        background: transparent !important;
    }

    .information-section h5 {
        font-size: 7.5pt !important;
        font-weight: 800 !important;
        color: #1d4d8b !important;
        text-align: center;
        margin: 0.5mm 0 2mm 0 !important;
        background: transparent !important;
    }

    .information-section ul {
        padding-left: 2.5mm !important;
        margin: 0;
    }

    .information-section li {
        font-size: 7pt !important;
        margin-bottom: 1.5mm !important;
        line-height: 1.15;
        background: transparent !important;
    }

    /* QR Code */
    .qr-wrapper {
        text-align: center;
        margin: 0mm 0 1.5mm 0 !important;
        z-index: 3;
    }

    .qr-wrapper img {
        width: 14mm !important;
        height: 14mm !important;

    }

    /* Ensure all text elements have transparent backgrounds */
    .info-section *,
    .information-section *,
    .company-link *,
    .id-detail * {
        background: transparent !important;
    }

    /* Ensure proper spacing and no white boxes */
    .id-card>*:not(.top-right-img),
    .backside-card>*:not(.top-right-img) {
        max-width: 100%;
        background: transparent !important;
    }
}





@media (max-width: 576px) {
    .id-card,
    .backside-card {
        width: 100%;
        max-width: 307px;
        height: auto;
        margin: 12px auto;
    }

    .profile-pic {
        width: 120px;
        height: 120px;
    }

    .top-right-img {
        width: 140px;
    }


    .backheader-logos img {
        max-width: 250px;
    }

    .information-section {
        padding: 30px 15px 13px 15px;
    }





    .qr-wrapper{
        margin-bottom: 15px;
    }
}

/* Chrome, Safari, Edge */
#contactNumber::-webkit-outer-spin-button, .no-spinner::-webkit-outer-spin-button,
#contactNumber::-webkit-inner-spin-button, .no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#contactNumber, .no-spinner {
    -moz-appearance: textfield;
}