/* ASOSH — public verification (/verify) */
.vf { padding: 0 0 96px; background: linear-gradient(var(--a-navy-900) 0 90px, var(--a-paper) 90px); }
.vf .a-container { max-width: 980px; }

/* lookup panel */
.vf-panel { position: relative; background: #fff; border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow-lg); padding: 26px 28px 22px; border: 1px solid var(--a-line-cool); }
.vf-types { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0 0 18px; padding: 0; }
.vf-type { margin: 0; cursor: pointer; }
.vf-type input { position: absolute; opacity: 0; pointer-events: none; }
.vf-type span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--a-line-cool); background: var(--a-paper); color: var(--a-text); font: 600 14px/1 var(--a-sans); transition: .2s var(--a-ease); }
.vf-type span i { color: var(--a-muted); transition: color .2s; }
.vf-type:hover span { border-color: var(--a-navy); }
.vf-type input:checked + span { background: var(--a-navy-900); border-color: var(--a-navy-900); color: #fff; box-shadow: 0 6px 16px -8px rgba(10, 27, 51, .6); }
.vf-type input:checked + span i { color: #ff8c92; }
.vf-type input:focus-visible + span { outline: 3px solid rgba(200, 32, 42, .35); outline-offset: 2px; }

.vf-row { display: flex; gap: 12px; }
.vf-input { flex: 1; position: relative; margin: 0; }
.vf-input i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--a-muted); }
.vf-input input { width: 100%; height: 58px; border-radius: 999px; border: 2px solid var(--a-line-cool); background: var(--a-paper); padding: 0 22px 0 48px; font: 600 18px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--a-ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.vf-input input::placeholder { font-weight: 400; color: #9aa3b2; letter-spacing: .02em; }
.vf-input input:focus { outline: 0; border-color: var(--a-navy); background: #fff; box-shadow: 0 0 0 4px rgba(24, 65, 106, .12); }
.vf-go { min-height: 58px; padding: 0 30px; }
.vf-help { margin: 14px 4px 0; font-size: 13.5px; color: var(--a-muted); }
.vf-help i { color: var(--a-navy); margin-right: 4px; }

/* result card */
.vf-result { margin-top: 34px; scroll-margin-top: calc(var(--a-header-h) + 20px); }
.vf-card { background: #fff; border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow); border: 1px solid var(--a-line-cool); overflow: hidden; animation: vfIn .6s var(--a-ease) both; }
@keyframes vfIn { from { opacity: 0; transform: translateY(18px); } }
.vf-card { --tone: #1f7a4d; --tone-bg: #e8f5ee; }
.vf-card.is-expired { --tone: #a35f00; --tone-bg: #fdf3e2; }
.vf-card.is-missing { --tone: var(--a-red-700); --tone-bg: var(--a-red-100); }
.vf-card__status { display: flex; align-items: center; gap: 16px; padding: 20px 28px; background: var(--tone-bg); border-bottom: 1px solid rgba(0, 0, 0, .05); }
.vf-card__status strong { display: block; font: 700 17px/1.3 var(--a-sans); color: var(--tone); }
.vf-card__status span:not(.vf-badge) { display: block; font-size: 14px; color: var(--a-text); margin-top: 3px; }
.vf-badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: #fff; font-size: 19px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .7); }
.is-valid .vf-badge { animation: vfPop .7s .25s var(--a-ease) both; }
@keyframes vfPop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } }

.vf-card__body { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 30px 28px 26px; position: relative; }
.vf-card__body::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 300px; height: 300px; background: url("../img/asosh/seal.svg") center / contain no-repeat; opacity: .05; pointer-events: none; }
.vf-photo { width: 150px; height: 180px; object-fit: cover; border-radius: 12px; border: 4px solid #fff; box-shadow: var(--a-shadow); background: var(--a-ivory); }
.vf-seal { width: 130px; height: 130px; margin: 6px auto 0; display: block; }
.vf-main { min-width: 0; position: relative; z-index: 1; }
.vf-name { font: 400 clamp(26px, 3.4vw, 36px)/1.15 var(--a-serif); color: var(--a-navy-900); margin: 8px 0 6px; overflow-wrap: anywhere; }
.vf-title { font: 600 16px/1.45 var(--a-sans); color: var(--a-text); margin: 0 0 20px; }
.vf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--a-line-cool); }
.vf-facts > div { padding: 12px 0; border-bottom: 1px solid var(--a-line-cool); }
.vf-facts > div:nth-child(odd) { padding-right: 18px; }
.vf-facts dt { font: 700 11px/1.2 var(--a-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); margin-bottom: 5px; }
.vf-facts dd { margin: 0; font: 600 15px/1.4 var(--a-sans); color: var(--a-ink); overflow-wrap: anywhere; }
.vf-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; letter-spacing: .03em; }
.vf-scopes { margin-top: 18px; }
.vf-scopes > span { font: 700 11px/1.2 var(--a-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); }
.vf-scopes ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vf-scopes li { padding: 6px 12px; border-radius: 999px; background: var(--a-ivory); border: 1px solid var(--a-line); font-size: 13px; color: var(--a-text); }

.vf-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 28px; background: var(--a-paper); border-top: 1px solid var(--a-line-cool); font-size: 13px; color: var(--a-muted); }
.vf-card__foot i { color: var(--a-navy); margin-right: 4px; }
.vf-actions { display: flex; gap: 8px; }
.vf-act { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--a-line-cool); background: #fff; border-radius: 999px; padding: 8px 14px; font: 600 13px/1 var(--a-sans); color: var(--a-navy-900); cursor: pointer; transition: .2s; }
.vf-act em { font-style: normal; }
.vf-act:hover { border-color: var(--a-navy); background: var(--a-ivory); }

.vf-miss { padding: 24px 28px 28px; color: var(--a-text); }
.vf-miss ul { margin: 0 0 16px; padding-left: 20px; }
.vf-miss li { margin-bottom: 6px; }

/* guide */
.vf-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.vf-guide__item { background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 24px 22px; }
.vf-guide__item span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--a-navy-900); color: #fff; font: 400 18px/1 var(--a-serif); margin-bottom: 14px; }
.vf-guide__item h3 { font: 700 17px/1.3 var(--a-sans); color: var(--a-ink); margin: 0 0 6px; }
.vf-guide__item p { margin: 0; font-size: 14.5px; color: var(--a-muted); line-height: 1.6; }
.vf-note { margin: 26px 0 0; font-size: 13.5px; color: var(--a-muted); text-align: center; }
.vf-note i { color: var(--a-navy); margin-right: 4px; }

@media (max-width: 767px) {
  .vf-panel { padding: 20px 16px 18px; }
  .vf-types { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
  .vf-types::-webkit-scrollbar { display: none; }
  .vf-type span { white-space: nowrap; }
  .vf-row { flex-direction: column; }
  .vf-go { width: 100%; }
  .vf-card__status, .vf-card__foot, .vf-miss { padding-left: 18px; padding-right: 18px; }
  .vf-card__body { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .vf-photo { width: 120px; height: 144px; }
  .vf-seal { width: 84px; height: 84px; margin: 0; }
  .vf-facts { grid-template-columns: 1fr; }
  .vf-facts > div:nth-child(odd) { padding-right: 0; }
  .vf-guide { grid-template-columns: 1fr; }
}

@media print {
  .ah, .af, .a-pagehead, .vf-panel, .vf-guide, .vf-note, .vf-actions, .a-totop, #asosh-preloader, .js-cookie-consent { display: none !important; }
  .vf { background: none; padding: 0; }
  .vf-card { box-shadow: none; animation: none; }
}