:root {
    --certificate-a4-width: 210mm;
    --certificate-a4-height: 297mm;
    --certificate-letter-width: 216mm;
    --certificate-letter-height: 279mm;
    --certificate-padding: 18mm;
    --certificate-text-color: #111827;
    --certificate-page-bg: #ffffff;
}

.certificate-page {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--certificate-padding);
    background: var(--certificate-page-bg);
    color: var(--certificate-text-color);
    font-family: Georgia, "Times New Roman", serif;
    overflow: hidden;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

    .certificate-page:last-child {
        page-break-after: auto;
    }

    .certificate-page.certificate-portrait {
        width: var(--certificate-a4-width);
        min-height: var(--certificate-a4-height);
    }

    .certificate-page.certificate-landscape {
        width: var(--certificate-a4-height);
        min-height: var(--certificate-a4-width);
    }

    .certificate-page.certificate-a4.certificate-portrait,
    .certificate-page[data-page-size="A4"].certificate-portrait {
        width: var(--certificate-a4-width);
        min-height: var(--certificate-a4-height);
    }

    .certificate-page.certificate-a4.certificate-landscape,
    .certificate-page[data-page-size="A4"].certificate-landscape {
        width: var(--certificate-a4-height);
        min-height: var(--certificate-a4-width);
    }

    .certificate-page.certificate-letter.certificate-portrait,
    .certificate-page[data-page-size="Letter"].certificate-portrait {
        width: var(--certificate-letter-width);
        min-height: var(--certificate-letter-height);
    }

    .certificate-page.certificate-letter.certificate-landscape,
    .certificate-page[data-page-size="Letter"].certificate-landscape {
        width: var(--certificate-letter-height);
        min-height: var(--certificate-letter-width);
    }

.certificate-header,
.certificate-body,
.certificate-footer {
    position: relative;
    z-index: 2;
    width: 100%;
}

.certificate-body {
    min-height: 150mm;
}

.certificate-page table {
    border-collapse: collapse;
}

.certificate-page img,
.certificate-page svg,
.certificate-page canvas {
    max-width: 100%;
}

.certificate-page hr {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.45);
    margin: 18px 0;
}

.certificate-preview-box .certificate-page,
.certificate-preview-stage .certificate-page {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

        body * {
            visibility: hidden;
        }

    .certificate-print-area,
    .certificate-print-area * {
        visibility: visible;
    }

    .certificate-print-area {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

        .certificate-print-area .certificate-page {
            margin: 0 !important;
            box-shadow: none !important;
            page-break-after: auto;
        }

            .certificate-print-area .certificate-page.certificate-portrait {
                width: var(--certificate-a4-width) !important;
                min-height: var(--certificate-a4-height) !important;
            }

            .certificate-print-area .certificate-page.certificate-landscape {
                width: var(--certificate-a4-height) !important;
                min-height: var(--certificate-a4-width) !important;
            }
}