/* Hidden by default on screen; revealed only during print. */
.show-in-print {
    display: none;
}

/* QR tray — shown on screen AND in print (single element, no duplicate). */
.qr-tray {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin: 0.5rem 0 1rem;
}

.qr-tray canvas,
.qr-tray img {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0;
}

.qr-tray-label {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
}

@media print {

    .hide-in-print {
        display: none;
    }

    .show-in-print {
        display: block !important;
    }

    /* QR tray keeps its flex layout in print */
    .qr-tray {
        page-break-inside: avoid;
        break-inside: avoid;
        border: none;
        background: transparent;
        padding: 0;
    }

    .qr-tray canvas,
    .qr-tray img {
        width: 90px !important;
        height: 90px !important;
    }

    body {
        background-color: white;
    }

    /* ── Template font normalization ─────────────────────────────────────
       Web fonts listed in template themes (Inter, Lora, Playfair Display…)
       are not guaranteed to load in print / headless-PDF context because
       the app intentionally avoids render-blocking Google Fonts imports.
       When the web font is absent the browser falls back through the
       declared stack, but the display-font stack (--tpl-font-display) and
       the body-font stack (--tpl-font) differ slightly, producing visibly
       inconsistent glyphs on the same page.

       Fix: pin every element inside .tpl-canvas to a single reliable
       system-font stack at print time.  The stack is ordered so that the
       native UI font is preferred on each platform — Segoe UI on Windows,
       San Francisco on macOS/iOS, Roboto on Android — then falls back to
       Helvetica Neue → Arial → sans-serif, all of which are universally
       present.  This keeps the document looking clean and consistent
       regardless of which template theme the clinic picked. */
    .tpl-canvas,
    .tpl-canvas * {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                     'Helvetica Neue', Arial, sans-serif !important;
    }

    .final-form {
        position: relative;
        padding: 5mm 15mm 20mm 15mm;
    }

    @page {
        margin: 0;
    }

    .break-avoid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    .footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 15mm;
        background-color: transparent !important;
        padding-right: 5mm;
        margin: 0;
    }

    .form-watermark {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
}