/* ==========================================================================
   Certificate — A4 landscape 297:210. All sizes in container-query units (cqw) so the
   same markup scales from a thumbnail to a full-page print (1cqw = 1% of the sheet width).
   Typeface DB Heavent (same as the learner site's certificate).
   ========================================================================== */
.rv-cert-wrap { container-type: inline-size; width: 100%; }
.rv-cert {
  position: relative; width: 100%; aspect-ratio: 297 / 210; overflow: hidden;
  background: #FCF9F2; color: #18272A; font-family: var(--rv-font-cert);
  border-radius: 2px; box-shadow: 0 1px 2px rgba(24, 39, 42, .08), 0 8px 24px rgba(24, 39, 42, .10);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rv-cert__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rv-cert--cream .rv-cert__bg {
  background:
    radial-gradient(60% 70% at 8% 22%, rgba(0, 194, 214, .10), transparent 62%),
    radial-gradient(45% 55% at 92% 88%, rgba(239, 227, 202, .70), transparent 70%),
    #FCF9F2;
}
.rv-cert--cyan .rv-cert__bg {
  background:
    radial-gradient(120% 60% at 0% 100%, rgba(0, 194, 214, .22), transparent 55%),
    radial-gradient(90% 50% at 100% 0%, rgba(0, 194, 214, .16), transparent 55%),
    repeating-radial-gradient(circle at 0% 100%, rgba(0, 127, 140, .06) 0 .35cqw, transparent .35cqw 1.6cqw),
    #F7FEFF;
}
.rv-cert--white .rv-cert__bg { background: #FFFFFF; }
.rv-cert--photo .rv-cert__bg { background-image: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .9)), var(--cert-bg); }
.rv-cert__frame { position: absolute; inset: 2.2cqw; border: .35cqw solid #00A6B8; outline: .12cqw solid rgba(0, 166, 184, .45); outline-offset: .7cqw; }
.rv-cert--white .rv-cert__frame { border-width: .18cqw; border-color: #9CA3AF; outline: none; }
.rv-cert__corner { position: absolute; width: 4.2cqw; height: 4.2cqw; color: #00A6B8; }
.rv-cert__corner svg { width: 100%; height: 100%; }
.rv-cert__corner--tl { left: 1.4cqw; top: 1.4cqw; }
.rv-cert__corner--tr { right: 1.4cqw; top: 1.4cqw; transform: scaleX(-1); }
.rv-cert__corner--bl { left: 1.4cqw; bottom: 1.4cqw; transform: scaleY(-1); }
.rv-cert__corner--br { right: 1.4cqw; bottom: 1.4cqw; transform: scale(-1, -1); }
.rv-cert--white .rv-cert__corner { display: none; }
.rv-cert__watermark { position: absolute; left: 50%; top: 52%; width: 34cqw; transform: translate(-50%, -50%); opacity: .05; pointer-events: none; }
.rv-cert__inner { position: absolute; inset: 5cqw 7cqw 3.4cqw; display: flex; flex-direction: column; }
.rv-cert__top { display: flex; align-items: flex-start; justify-content: space-between; }
.rv-cert__logo { width: 9cqw; height: auto; }
.rv-cert__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .9cqw; }
.rv-cert__no { text-align: right; font-size: 1.15cqw; line-height: 1.4; color: #465255; }
.rv-cert__no span { display: block; }
.rv-cert__no b { font-size: 1.5cqw; letter-spacing: .06em; color: #18272A; }
.rv-cert__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5cqw; min-height: 0; }
.rv-cert__kicker { margin: 0; font-size: 1.25cqw; letter-spacing: .35em; text-transform: uppercase; color: #007F8C; }
.rv-cert__title { margin: 0; font-size: 4.6cqw; line-height: 1.05; font-weight: 700; color: #18272A; }
.rv-cert__rule { display: flex; align-items: center; gap: .8cqw; margin: .4cqw 0 .8cqw; }
.rv-cert__rule i { width: 9cqw; height: .12cqw; background: rgba(0, 127, 140, .5); }
.rv-cert__rule b { width: .9cqw; height: .9cqw; background: #00C2D6; transform: rotate(45deg); }
.rv-cert__lead { margin: 0; font-size: 1.55cqw; color: #465255; }
.rv-cert__name { margin: .2cqw 0 .4cqw; max-width: 100%; font-size: 4.1cqw; line-height: 1.15; font-weight: 700; color: #005560; white-space: nowrap; overflow: hidden; }
.rv-cert__course { margin: .2cqw 0; max-width: 100%; font-size: 2.3cqw; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; }
.rv-cert__date { margin: .4cqw 0 0; font-size: 1.45cqw; color: #465255; }
/* signers: 1–4 in one centred row (left → right = the design's order) — the signature box keeps the same height for
   every signer so the lines and names line up; the width per signer shrinks with the count (data-count) */
.rv-cert__foot { display: flex; justify-content: center; padding: 0 2cqw; }
.rv-cert__signs { display: flex; align-items: flex-start; justify-content: center; gap: 3cqw; width: 100%; }
.rv-cert__sign { display: flex; flex-direction: column; align-items: center; flex: 0 1 24cqw; width: 24cqw; min-width: 0; font-size: 1.35cqw; text-align: center; }
.rv-cert__signs[data-count="3"] .rv-cert__sign { flex-basis: 21cqw; width: 21cqw; }
.rv-cert__signs[data-count="4"] .rv-cert__sign { flex-basis: 17.5cqw; width: 17.5cqw; font-size: 1.25cqw; }
.rv-cert__sig { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 5cqw; }
.rv-cert__sig-svg, .rv-cert__sig-img { width: 100%; max-width: 16cqw; height: 5cqw; object-fit: contain; }
.rv-cert__line { width: 100%; height: .1cqw; background: #465255; margin: .2cqw 0 .5cqw; }
.rv-cert__sign b { display: block; max-width: 100%; font-weight: 600; white-space: nowrap; overflow: hidden; }
.rv-cert__sign small { font-size: 1.1cqw; line-height: 1.3; color: #465255; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rv-cert__seal { display: flex; flex-direction: column; align-items: center; gap: .4cqw; font-size: 1cqw; color: #465255; }
.rv-cert__qr { width: 7.5cqw; height: 7.5cqw; background: #fff; padding: .5cqw; border: .1cqw solid rgba(0, 0, 0, .08); }
.rv-cert__qr svg { width: 100%; height: 100%; display: block; }
.rv-cert__mock { margin: 1cqw 0 0; text-align: center; font-size: .95cqw; color: #7A8587; }
.rv-cert__ribbon { position: absolute; z-index: 2; top: 3.2cqw; right: -6cqw; width: 26cqw; transform: rotate(35deg); background: #F59E0B; color: #fff; text-align: center; font: 700 1.6cqw/2.6cqw var(--rv-font-family); letter-spacing: .1em; }
.rv-cert__ribbon--revoked { background: #B42318; }
.rv-cert.is-revoked .rv-cert__inner { opacity: .55; }

/* print — only #rv-print-root (certificate A4 landscape, billing documents A4 portrait).
   The @page size is injected per print job by RVA.printer.a4 — never set a global @page here. */
#rv-print-root { display: none; }
@media print {
  body.rv-printing > *:not(#rv-print-root) { display: none !important; }
  body.rv-printing #rv-print-root { display: block; }
  body.rv-printing #rv-print-root .rv-cert-wrap { width: 297mm; }
  body.rv-printing #rv-print-root .rv-cert { width: 297mm; height: 210mm; box-shadow: none; border-radius: 0; }
}