/* =========================================================
   Cert by TGRL - customer verification (v2.7.0)
   Every rule lives under .tgrl-cv, so the form and the report
   can sit inside any theme / page builder / container.
   Used by: [lab_report_verification] / built-in page (form)
            and the animated QR scan page (/?tgrl_cv=...).
   No inline style attributes anywhere (the scan page runs under a nonce CSP).
========================================================= */
.tgrl-cv {
    --cv-gold: #b8860b;
    --cv-gold-d: #986600;
    --cv-gold-l: #d4af37;
    --cv-line: #ead9a1;
    --cv-bg: #fffdf8;
    --cv-ink: #4c3709;
    --cv-ok: #15803d;
    --cv-bad: #b91c1c;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}
.tgrl-cv *, .tgrl-cv *::before, .tgrl-cv *::after { box-sizing: border-box; }
.tgrl-cv [hidden] { display: none !important; }

/* ---------------------------------------------------------
   FORM CARD
--------------------------------------------------------- */
.tgrl-cv .cv-card {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border: 1px solid #ead18a;
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(120, 80, 0, .10);
}
.tgrl-cv .cv-head { text-align: center; margin-bottom: 24px; }
.tgrl-cv .cv-head-icon {
    width: 44px; height: 44px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; font-size: 19px; font-weight: 800;
    background: linear-gradient(135deg, var(--cv-gold-l), #a66f00);
}
.tgrl-cv .cv-head h2 {
    margin: 0; padding: 0; color: var(--cv-gold-d);
    font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.25; font-weight: 700;
}
.tgrl-cv .cv-head p { margin: 7px 0 0; color: #888; font-size: 13px; line-height: 1.5; }

.tgrl-cv .cv-field { margin: 0 0 18px; }
.tgrl-cv .cv-field label {
    display: block; margin: 0 0 8px; color: #735000; font-size: 14px; font-weight: 700;
}
.tgrl-cv .cv-hint { margin: 7px 0 0; color: #8a7a55; font-size: 12px; line-height: 1.55; }
.tgrl-cv .cv-hint b { color: #5c430e; font-weight: 700; }

.tgrl-cv .cv-prefix-box,
.tgrl-cv .cv-weight-box {
    display: flex; align-items: stretch; width: 100%; height: 55px;
    border: 1px solid #dcc47b; border-radius: 12px; background: var(--cv-bg); overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tgrl-cv .cv-prefix-box:focus-within,
.tgrl-cv .cv-weight-box:focus-within {
    border-color: var(--cv-gold); background: #fff; box-shadow: 0 0 0 4px rgba(184, 134, 11, .12);
}
.tgrl-cv .cv-prefix {
    display: flex; align-items: center; padding: 0 4px 0 17px;
    color: var(--cv-gold-d); font-size: 17px; font-weight: 800; letter-spacing: 1.2px;
    user-select: none; -webkit-user-select: none;
}
.tgrl-cv .cv-no,
.tgrl-cv .cv-w {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0;
    padding: 0 17px 0 6px; border: 0; border-radius: 0; outline: none; box-shadow: none;
    background: transparent; color: #333;
    font-size: 17px; font-family: inherit; letter-spacing: .5px;
}
.tgrl-cv .cv-w { padding-left: 17px; }
.tgrl-cv .cv-no::placeholder,
.tgrl-cv .cv-w::placeholder { color: #b9b19a; letter-spacing: .5px; }
.tgrl-cv .cv-unit {
    flex: 0 0 auto; width: 112px; height: 100%; margin: 0; padding: 0 12px;
    border: 0; border-left: 1px solid #e6d49b; border-radius: 0; outline: none; box-shadow: none;
    background: #fbf3dc; color: #735000; font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}

.tgrl-cv .cv-submit {
    display: block; width: 100%; height: 55px; margin: 0; padding: 0;
    border: 0; border-radius: 12px; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--cv-gold-l), #a66f00);
    font-size: 16px; font-weight: 700; font-family: inherit;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.tgrl-cv .cv-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(166, 111, 0, .25); }
.tgrl-cv .cv-submit:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }

.tgrl-cv .cv-spin {
    display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
    animation: cv-spin .7s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   MESSAGES
--------------------------------------------------------- */
.tgrl-cv .cv-status:empty { display: none; }
.tgrl-cv .cv-msg {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-top: 18px; padding: 12px 15px; border-radius: 12px;
    font-size: 13px; font-weight: 700; text-align: center; line-height: 1.45;
}
.tgrl-cv .cv-msg-ok { border: 1px solid #86efac; background: #f0fdf4; color: var(--cv-ok); animation: cv-pop .5s ease both; }
.tgrl-cv .cv-msg-err { border: 1px solid #fecaca; background: #fff5f5; color: #991b1b; animation: cv-shake .45s ease both; }
.tgrl-cv .cv-msg-ok .cv-mini { width: 22px; height: 22px; flex: 0 0 auto; }
@keyframes cv-pop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cv-shake {
    0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* ---------------------------------------------------------
   REPORT CARD  (same markup for the form result and the scan reveal)
--------------------------------------------------------- */
.tgrl-cv .cv-report {
    width: 100%; margin-top: 26px; padding: 34px 38px;
    border: 1px solid #dfc46c; border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, var(--cv-bg) 100%);
    box-shadow: 0 18px 50px rgba(80, 55, 0, .10);
    color: #333; text-align: left;
}
.tgrl-cv .cv-rep-head {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding-bottom: 20px; border-bottom: 1px solid var(--cv-line);
}
.tgrl-cv .cv-lab-name { color: #996600; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 700; line-height: 1.3; }
.tgrl-cv .cv-lab-sub { margin-top: 6px; color: #858585; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
.tgrl-cv .cv-badge {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 13px;
    border: 1px solid #86efac; border-radius: 50px; background: #f0fdf4; color: var(--cv-ok);
    font-size: 10px; font-weight: 800; letter-spacing: .4px;
}
.tgrl-cv .cv-badge span {
    display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: #16a34a; color: #fff; font-size: 11px;
}

.tgrl-cv .cv-img {
    width: 100%; margin: 22px 0; padding: 15px;
    border: 1px solid #f0dfaa; border-radius: 16px; background: #fffaf0; text-align: center;
}
.tgrl-cv .cv-sv {
    position: relative; display: inline-block; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 10px;
    background: #fff; line-height: 0;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tgrl-cv .cv-sv canvas {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 300px; margin: 0 auto;
    pointer-events: none; opacity: 0; transition: opacity .5s ease;
}
.tgrl-cv .cv-sv.is-ready canvas { opacity: 1; }
.tgrl-cv .cv-sv.is-ready::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg); animation: cv-shine 1.5s ease .35s 1 both;
}
@keyframes cv-shine { 0% { left: -60%; } 100% { left: 130%; } }
.tgrl-cv .cv-sv-load {
    width: 220px; max-width: 70vw; height: 140px; display: flex; align-items: center; justify-content: center;
    color: #b79a4a; font-size: 12px; line-height: 1.4;
}
.tgrl-cv .cv-sv.is-ready .cv-sv-load { display: none; }
.tgrl-cv .cv-sv-shield { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.tgrl-cv .cv-sv.cv-sv-hide canvas { visibility: hidden; }

.tgrl-cv .cv-itembox {
    margin: 0 0 15px; padding: 17px 20px;
    border: 1px solid #e4c96e; border-left: 5px solid var(--cv-gold); border-radius: 13px;
    background: linear-gradient(135deg, #fffaf0, var(--cv-bg));
}
.tgrl-cv .cv-itembox span { display: block; margin-bottom: 5px; color: #a17e2d; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.tgrl-cv .cv-itembox strong {
    display: block; color: #5c430e; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.35; word-break: break-word;
}
.tgrl-cv .cv-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 14px; }
.tgrl-cv .cv-metabox { padding: 14px 17px; border: 1px solid #e7cf86; border-radius: 12px; background: #fffaf0; }
.tgrl-cv .cv-metabox span { display: block; margin-bottom: 5px; color: #977a38; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.tgrl-cv .cv-metabox strong { display: block; color: var(--cv-ink); font-size: 14px; line-height: 1.4; word-break: break-word; }
.tgrl-cv .cv-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 20px; padding: 9px 12px;
    border-bottom: 1px solid var(--cv-line); color: #777; font-size: 11px; line-height: 1.5;
}
.tgrl-cv .cv-note b { flex: 0 0 auto; color: #9a6800; font-weight: 700; }
.tgrl-cv .cv-note span { color: #666; word-break: break-word; }

.tgrl-cv .cv-sec-title {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
    color: var(--cv-gold-d); font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.tgrl-cv .cv-sec-title i { display: block; width: 4px; height: 16px; border-radius: 3px; background: var(--cv-gold); }
.tgrl-cv .cv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.tgrl-cv .cv-item { padding: 11px 14px; border: 1px solid #f0e3b8; border-radius: 11px; background: #fff; }
.tgrl-cv .cv-item span { display: block; margin-bottom: 3px; color: #9a8650; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.tgrl-cv .cv-item strong { display: block; color: #3f3010; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.tgrl-cv .cv-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cv-line); text-align: center; color: #8a8a8a; font-size: 11px; line-height: 1.6; }
.tgrl-cv .cv-foot strong { display: block; margin-top: 6px; color: #7a5600; font-size: 12px; }

/* details slide in one after another (index comes from --i, set by the script) */
.tgrl-cv .cv-in { animation: cv-slide .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes cv-slide { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------
   SCAN PAGE (page 1 = scanning, page 3 = reveal)
--------------------------------------------------------- */
body.tgrl-cv-page { margin: 0; min-height: 100vh; background: radial-gradient(120% 90% at 50% 0%, #17294f 0%, #0b1630 55%, #070e20 100%); }
.tgrl-cv.cv-scan {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 14px calc(30px + env(safe-area-inset-bottom, 0px)); color: #f3e3b0;
}
.tgrl-cv .cv-scan-stage { width: 100%; max-width: 360px; text-align: center; transition: opacity .35s ease, transform .35s ease; }
.tgrl-cv .cv-scan-stage.is-out { opacity: 0; transform: scale(.96); }
.tgrl-cv .cv-scan-brand { margin: 0 0 22px; color: #e9c766; font-family: Georgia, "Times New Roman", serif; font-size: 18px; letter-spacing: .6px; }

.tgrl-cv .cv-frame {
    position: relative; width: 220px; height: 220px; margin: 0 auto 26px; overflow: hidden; border-radius: 18px;
    background: radial-gradient(circle at 50% 45%, rgba(233, 199, 102, .13), rgba(233, 199, 102, 0) 70%);
}
.tgrl-cv .cv-corner { position: absolute; width: 34px; height: 34px; border: 0 solid #e9c766; animation: cv-corner 1.6s ease-in-out infinite; }
.tgrl-cv .cv-c1 { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; }
.tgrl-cv .cv-c2 { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 14px; }
.tgrl-cv .cv-c3 { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 14px; }
.tgrl-cv .cv-c4 { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }
@keyframes cv-corner { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.92); } }

.tgrl-cv .cv-gem-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; perspective: 520px; }
.tgrl-cv .cv-gem { display: block; overflow: visible; filter: drop-shadow(0 0 14px rgba(233, 199, 102, .55)); animation: cv-gem 3.2s linear infinite; }
.tgrl-cv .cv-gem-top { fill: #f2d77d; }
.tgrl-cv .cv-gem-bot { fill: #b8860b; }
.tgrl-cv .cv-gem-l { fill: none; stroke: #fff7d6; stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
@keyframes cv-gem { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

.tgrl-cv .cv-laser {
    position: absolute; left: 6px; right: 6px; top: 0; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(255, 90, 90, 0), #ff6b6b 20%, #ffd3d3 50%, #ff6b6b 80%, rgba(255, 90, 90, 0));
    box-shadow: 0 0 14px 3px rgba(255, 80, 80, .55);
    animation: cv-laser 2.1s ease-in-out infinite alternate;
}
@keyframes cv-laser { 0% { top: 3%; } 100% { top: 95%; } }

.tgrl-cv .cv-steps { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 270px; text-align: left; }
.tgrl-cv .cv-steps li { display: flex; align-items: center; gap: 12px; margin: 0 0 11px; color: rgba(243, 227, 176, .45); font-size: 14px; transition: color .3s ease; }
.tgrl-cv .cv-steps b {
    position: relative; flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid rgba(233, 199, 102, .35); border-radius: 50%;
    transition: background .3s ease, border-color .3s ease;
}
.tgrl-cv .cv-steps li.is-active { color: #f3e3b0; }
.tgrl-cv .cv-steps li.is-active b { border-color: #e9c766; border-top-color: transparent; animation: cv-spin .8s linear infinite; }
.tgrl-cv .cv-steps li.is-done { color: #b6f0c4; }
.tgrl-cv .cv-steps li.is-done b { border-color: #22c55e; background: #22c55e; }
.tgrl-cv .cv-steps li.is-done b::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.tgrl-cv .cv-prog { height: 6px; max-width: 270px; margin: 0 auto; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.tgrl-cv .cv-prog i { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b8860b, #f2d77d); transition: width .7s ease; }
.tgrl-cv .cv-scan-note { margin: 14px 0 0; color: rgba(243, 227, 176, .6); font-size: 12px; }

/* reveal */
.tgrl-cv .cv-reveal { width: 100%; max-width: 640px; margin: 0 auto; }
.tgrl-cv .cv-rv { text-align: center; padding: 4px 0 6px; }
.tgrl-cv .cv-shield { display: block; width: 92px; height: 92px; margin: 0 auto 8px; overflow: visible; }
.tgrl-cv .cv-sh-body { fill: rgba(34, 197, 94, 0); stroke: #22c55e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cv-draw .9s ease forwards, cv-fill-ok .5s ease .8s forwards; }
.tgrl-cv .cv-sh-tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cv-draw .55s ease .75s forwards; }
.tgrl-cv .cv-rv-bad .cv-sh-body { stroke: #ef4444; animation: cv-draw .9s ease forwards, cv-fill-bad .5s ease .8s forwards; }
.tgrl-cv .cv-rv-bad .cv-sh-x { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cv-draw .45s ease .75s forwards; }
.tgrl-cv .cv-rv-bad .cv-sh-x2 { animation-delay: 1s; }
.tgrl-cv .cv-rv-bad .cv-shield { animation: cv-shake .55s ease .9s both; }
@keyframes cv-draw { to { stroke-dashoffset: 0; } }
@keyframes cv-fill-ok { to { fill: rgba(34, 197, 94, .95); } }
@keyframes cv-fill-bad { to { fill: rgba(239, 68, 68, .95); } }
.tgrl-cv .cv-rv-title { margin: 6px 0 4px; font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #7ff0a1; animation: cv-pop .6s ease .9s both; }
.tgrl-cv .cv-rv-bad .cv-rv-title { color: #ff8a8a; }
.tgrl-cv .cv-rv-sub { margin: 0 auto; max-width: 420px; color: rgba(243, 227, 176, .8); font-size: 13.5px; line-height: 1.6; animation: cv-pop .6s ease 1.05s both; }
.tgrl-cv .cv-btn {
    display: inline-block; margin-top: 18px; padding: 13px 22px; border-radius: 12px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--cv-gold-l), #a66f00); color: #fff; font-size: 14px; font-weight: 700;
    font-family: inherit; text-decoration: none; animation: cv-pop .6s ease 1.2s both;
}
.tgrl-cv .cv-reveal .cv-report { margin-top: 18px; }

/* ---------------------------------------------------------
   SMALL SCREENS
--------------------------------------------------------- */
@media (max-width: 640px) {
    .tgrl-cv .cv-card { padding: 22px 16px; border-radius: 20px; }
    .tgrl-cv .cv-head h2 { font-size: 21px; }
    .tgrl-cv .cv-report { padding: 22px 16px; border-radius: 18px; }
    .tgrl-cv .cv-rep-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tgrl-cv .cv-lab-name { font-size: 20px; }
    .tgrl-cv .cv-meta, .tgrl-cv .cv-grid { grid-template-columns: 1fr; }
    .tgrl-cv .cv-unit { width: 96px; }
    .tgrl-cv .cv-no, .tgrl-cv .cv-w { font-size: 16px; }   /* 16px = no zoom-in on iPhone */
}

/* ---------------------------------------------------------
   MOTION + PRINT
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tgrl-cv .cv-laser, .tgrl-cv .cv-gem, .tgrl-cv .cv-corner { animation: none; }
    .tgrl-cv .cv-in, .tgrl-cv .cv-rv-title, .tgrl-cv .cv-rv-sub, .tgrl-cv .cv-btn { animation-duration: .01s; animation-delay: 0s; }
    .tgrl-cv .cv-sh-body, .tgrl-cv .cv-sh-tick, .tgrl-cv .cv-sh-x { animation-duration: .01s; animation-delay: 0s; }
    .tgrl-cv .cv-sv.is-ready::after { display: none; }
}
/* the certificate (v3.1.4): full width, not the small picture box */
.tgrl-cv .cv-docbox { padding: 12px; background: #fff; }
.tgrl-cv .cv-doc { display: block; width: 100%; max-width: 820px; border-radius: 8px; box-shadow: 0 10px 30px rgba(60, 40, 10, .18); }
.tgrl-cv .cv-doc canvas { width: 100%; max-height: none; }
.tgrl-cv .cv-doc .cv-sv-load { width: 100%; max-width: none; height: 220px; }
.tgrl-cv .cv-doc-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #8a7a4a; }
@media print {
    .tgrl-cv .cv-img, .tgrl-cv .cv-sv { display: none !important; }
}