/*
 * Jeevi IQ Test — certificate verification page (/verify/), 1.44.1.
 *
 * About-style design (owner, 2026-10-10). The page loads jiq-home.css (design
 * tokens, header, hero, .blk, .feats, .final, footer) and jiq-about.css (the
 * .ab-* hero parts) exactly as /about/ does; this file adds only the .vf-*
 * pieces. Every rule is scoped to body.jiq-verify-active.
 *
 * Note: the live theme forces Enriqueta (!important) on p, a, span, button,
 * h1-h6 and td — only <b>, <dd>, <label> and <input> can take another font,
 * which is why the monospace number below needs !important on spans.
 */

/* ---------- never depend on the theme's content width ----------
   Some themes cap every direct child of .entry-content (Twenty Twenty-One on
   the test site: 610px), which squeezes the page and pulls the hidden mobile
   menu into view. iqindia-2 does not, so on the live site this changes nothing. */
body.jiq-verify-active .entry-content > .site,
body.jiq-verify-active .entry-content > .msheet,
body.jiq-verify-active .entry-content > #vf-main,
body.jiq-verify-active .entry-content > .jiq-foot{max-width:none !important;margin-bottom:0 !important}
body.jiq-verify-active .entry-content > .site,
body.jiq-verify-active .entry-content > .msheet,
body.jiq-verify-active .entry-content > #vf-main{margin-top:0 !important}
/* Keep the design's 120px gap above the footer (jiq-home.css / jiq-foot.css). */
body.jiq-verify-active .entry-content > .jiq-foot{margin-top:120px !important}
body.jiq-verify-active .entry-content > #vf-main,
body.jiq-verify-active .entry-content > .jiq-foot{margin-left:0 !important;margin-right:0 !important}
/* Nothing under our footer (1.45.7, as jiq-about.css): the live theme's
   `.post, .page{margin:0 0 1.5em}` also hits <body class="page"> (25px of
   cream for everyone), and its Edit-link <footer class="entry-footer"> (editors
   only) picks up our footer's navy + 120px top margin. */
body.jiq-verify-active .entry-footer{display:none !important}
body.jiq-verify-active{margin-bottom:0 !important}

/* ---------- hero: status pill ---------- */
body.jiq-verify-active .vf-status{display:flex;width:max-content;max-width:100%;align-items:center;gap:9px;margin:0 0 16px;
  padding:6px 15px 6px 11px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.04em;line-height:1.2;
  border:1px solid transparent}
body.jiq-verify-active .vf-status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(255,255,255,.08)}
body.jiq-verify-active .vf-status--ok{color:#7CE7B4;background:rgba(18,183,106,.16);border-color:rgba(18,183,106,.45)}
body.jiq-verify-active .vf-status--bad{color:#FDA29B;background:rgba(240,68,56,.16);border-color:rgba(240,68,56,.45)}
body.jiq-verify-active .vf-status--warn{color:#FCD07A;background:rgba(245,166,35,.16);border-color:rgba(245,166,35,.45)}

/* ---------- hero: the certificate itself (shown whole, never cropped) ---------- */
body.jiq-verify-active .vf-cert-media{background:#fff;transform:perspective(1400px) rotateY(-5deg) rotateX(2deg)}
body.jiq-verify-active .vf-cert-media:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px)}
body.jiq-verify-active .vf-cert-media::after{display:none}
body.jiq-verify-active .vf-cert-media img{width:100%;height:auto;aspect-ratio:1180/830;object-fit:contain}
/* The badge hangs below the certificate so it never covers the QR corner. */
body.jiq-verify-active .vf-hero .vf-cert-media ~ .ab-b1{bottom:-34px;left:-18px}
body.jiq-verify-active .ab-badge .ic.vf-ic-ok{background:linear-gradient(135deg,#34D399,#12B76A);box-shadow:0 10px 20px -8px rgba(18,183,106,.6)}
body.jiq-verify-active .vf-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;letter-spacing:.05em}

/* ---------- hero: the number card (every state without a public certificate) ---------- */
body.jiq-verify-active .vf-seal{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:440px;margin:0 auto;padding:34px 30px 32px;text-align:center;background:#fff;border-radius:26px;
  box-shadow:0 50px 90px -40px rgba(3,14,28,.85),0 0 0 1px rgba(255,255,255,.10) inset;
  transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body.jiq-verify-active .vf-seal:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px)}
/* Lift the floating badge clear of the card's logo. */
body.jiq-verify-active .vf-seal ~ .ab-b2{top:-30px;right:-14px}
body.jiq-verify-active .vf-seal-logo{height:36px;width:auto;margin-bottom:8px}
body.jiq-verify-active .vf-seal-mark{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;margin:4px 0 6px;color:#fff;
  background:var(--gold-grad);box-shadow:0 18px 36px -14px rgba(228,85,31,.6)}
body.jiq-verify-active .vf-seal-mark svg{width:42px;height:42px}
body.jiq-verify-active .vf-seal--ok .vf-seal-mark{background:linear-gradient(135deg,#34D399,#12B76A);box-shadow:0 18px 36px -14px rgba(18,183,106,.6)}
body.jiq-verify-active .vf-seal--bad .vf-seal-mark{background:linear-gradient(135deg,#F97066,#D92D20);box-shadow:0 18px 36px -14px rgba(217,45,32,.55)}
body.jiq-verify-active .vf-seal--warn .vf-seal-mark{background:linear-gradient(135deg,#FDB022,#F79009)}
body.jiq-verify-active .vf-seal-label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
body.jiq-verify-active .vf-seal-no{font-size:26px;font-weight:700;color:var(--navy)}
body.jiq-verify-active .vf-seal-note{font-size:14px;color:var(--muted);max-width:28ch}

/* ---------- hero: actions ---------- */
body.jiq-verify-active .vf-hero .hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
body.jiq-verify-active .vf-ghost{color:#fff;font-weight:700;font-size:15.5px;padding:6px 0;border-bottom:1.5px solid rgba(255,255,255,.35);
  transition:border-color .2s}
body.jiq-verify-active .vf-ghost:hover{border-color:var(--gold)}
body.jiq-verify-active .vf-error{margin-top:14px;color:#FDA29B;font-weight:700}
body.jiq-verify-active .vf-admin{margin-top:16px;padding:10px 14px;border-left:3px solid var(--gold-2);background:rgba(255,255,255,.08);
  color:#fff;font-size:14px;border-radius:0}

/* ---------- the number box (hero = on navy; --light = on paper) ---------- */
body.jiq-verify-active .vf-form{margin-top:26px;max-width:580px}
body.jiq-verify-active .vf-label{display:block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
body.jiq-verify-active .vf-row{display:flex;flex-wrap:wrap;gap:8px;padding:7px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
body.jiq-verify-active .vf-input{flex:1 1 220px;min-width:0;height:54px;margin:0;padding:0 22px;border:0;border-radius:999px;
  background:#fff;color:var(--ink);font-family:var(--serif);font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:none;outline:none}
body.jiq-verify-active .vf-input::placeholder{color:var(--faint);letter-spacing:.06em}
body.jiq-verify-active .vf-input:focus{box-shadow:0 0 0 3px rgba(245,166,35,.55)}
body.jiq-verify-active .vf-btn{height:54px;padding:0 30px;flex:0 0 auto}
body.jiq-verify-active .vf-form--light{margin-top:0;max-width:none}
body.jiq-verify-active .vf-form--light .vf-label{color:var(--gold-3)}
body.jiq-verify-active .vf-form--light .vf-row{background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(5,22,39,.4)}
body.jiq-verify-active .vf-form--light .vf-input{background:var(--paper)}

/* ---------- certificate details ---------- */
body.jiq-verify-active .vf-anchor{scroll-margin-top:110px}
body.jiq-verify-active .vf-facts{max-width:880px;margin-top:40px;padding:8px 34px 28px;background:#fff;border-radius:24px;
  box-shadow:0 40px 80px -40px rgba(5,22,39,.45),0 0 0 1px rgba(233,228,220,.9)}
body.jiq-verify-active .vf-fact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;
  padding:17px 0;border-bottom:1px solid var(--line)}
body.jiq-verify-active .vf-fact dt{color:var(--muted);font-size:15px}
body.jiq-verify-active .vf-fact dd{margin:0;color:var(--navy);font-size:16.5px;font-weight:700;text-align:right;overflow-wrap:anywhere}
body.jiq-verify-active .vf-fact dd.vf-score{font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--gold-3)}
body.jiq-verify-active .vf-fact dd.vf-ok{color:#079455}
body.jiq-verify-active .vf-note{margin-top:20px;color:var(--faint);font-size:14px;line-height:1.65}

/* ---------- check another ---------- */
body.jiq-verify-active .vf-checkcard{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;
  padding:46px 50px;background:#fff;border-radius:28px;
  box-shadow:0 40px 80px -40px rgba(5,22,39,.45),0 0 0 1px rgba(233,228,220,.9)}
body.jiq-verify-active .vf-checkcard h2{margin-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  body.jiq-verify-active .vf-cert-media,
  body.jiq-verify-active .vf-seal{transform:none}
  body.jiq-verify-active .vf-checkcard{grid-template-columns:1fr;gap:22px}
}
@media (max-width:760px){
  body.jiq-verify-active .vf-row{border-radius:22px;padding:6px}
  body.jiq-verify-active .vf-input{flex-basis:100%;height:50px;border-radius:16px;font-size:16px}
  body.jiq-verify-active .vf-btn{flex:1 1 100%;height:50px}
  body.jiq-verify-active .vf-seal{padding:28px 20px 26px}
  body.jiq-verify-active .vf-seal-no{font-size:22px}
  body.jiq-verify-active .vf-facts{padding:4px 18px 22px;border-radius:20px}
  body.jiq-verify-active .vf-fact{padding:14px 0}
  body.jiq-verify-active .vf-checkcard{padding:30px 20px;border-radius:22px}
  /* The status pill above already says "Valid"; keep the QR corner clear. */
  body.jiq-verify-active .vf-hero .vf-cert-media ~ .ab-b1{display:none}
  /* Same for the QR hint: the text above the box already says it. */
  body.jiq-verify-active .vf-seal ~ .ab-b2{display:none}
}
@media (prefers-reduced-motion:reduce){
  body.jiq-verify-active .vf-seal,
  body.jiq-verify-active .vf-cert-media{transition:none}
}