/* autographcoa.com camera scanner: the camera icon inside the Verify box and
   the full-screen sheet it opens. Script: cert-scan.js (same folder).

   The icon sits inside the right end of the number box (owner's pick, option
   A of docs/mockups/cert-scan-button-options.html). Its button is `hidden`
   until the script finds a camera, and the box only makes room for it then
   (.acs-on), so a browser without one sees the box exactly as before. */

/* ---- the camera icon inside a lookup box -------------------------------- */
.acs-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.acs-wrap > input { flex: 1 1 auto; min-width: 0; width: 100%; }
.acs-wrap.acs-on > input { padding-right: 46px; }
.acs-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9px; background: transparent;
  color: #1d63c9; display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.acs-btn[hidden] { display: none; }
.acs-btn:hover, .acs-btn:focus-visible { background: #eaf1fb; outline: none; }
.acs-btn svg { width: 22px; height: 22px; display: block; }

/* Desktop header: the box has a fixed width there; widen it by the icon. */
.acoa-hdr .ah-verify .acs-wrap { flex: none; }
.acoa-hdr .ah-verify .acs-wrap > input { width: 150px; }
.acoa-hdr .ah-verify .acs-wrap.acs-on > input { width: 186px; }
.acoa-hdr .ah-verify .acs-btn { width: 34px; height: 34px; }
.acoa-hdr .ah-verify .acs-btn svg { width: 20px; height: 20px; }
@media (max-width: 1199px) {
  /* Phone/tablet menu: the box fills the row, as the input did. */
  .acoa-hdr .ah-verify .acs-wrap { flex: 1 1 auto; }
  .acoa-hdr .ah-verify .acs-wrap > input,
  .acoa-hdr .ah-verify .acs-wrap.acs-on > input { width: 100%; }
  .acoa-hdr .ah-verify .acs-btn { width: 40px; height: 40px; }
  .acoa-hdr .ah-verify .acs-btn svg { width: 22px; height: 22px; }
}

/* Footer: fixed width on desktop, fills the row on phones (base2.html). */
.acoa-footer .af-verify .acs-wrap { flex: none; }
.acoa-footer .af-verify .acs-wrap > input { width: 170px; }
.acoa-footer .af-verify .acs-wrap.acs-on > input { width: 206px; }
.acoa-footer .af-verify .acs-btn { width: 34px; height: 34px; }
.acoa-footer .af-verify .acs-btn svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .acoa-footer .af-verify .acs-wrap { flex: 1 1 auto; }
  .acoa-footer .af-verify .acs-wrap > input,
  .acoa-footer .af-verify .acs-wrap.acs-on > input { width: 100%; }
}

/* Homepage hero: the box is on a dark background, and the hero styles every
   button in its form as a blue Verify button (plus the Halloween glow), so
   undo that for the icon. */
.acoa-new .lookup .acs-btn { color: #fff; background: transparent; padding: 0; border: 0; border-radius: 9px;
  box-shadow: none; animation: none; font: inherit; }
.acoa-new .lookup .acs-wrap.acs-on > input { padding-right: 46px; }
.acoa-new .lookup .acs-btn:hover, .acoa-new .lookup .acs-btn:focus-visible { background: rgba(255,255,255,.12); }

/* /cert/ lookup page: centred text, so pad both sides alike. */
.acoa-lk .acs-wrap.acs-on > input { padding-left: 52px; padding-right: 52px; }
.acoa-lk .acs-btn { right: 7px; width: 42px; height: 42px; border-radius: 11px; }
.acoa-lk .acs-btn svg { width: 24px; height: 24px; }

/* ---- the scanner sheet --------------------------------------------------- */
.acs-open { overflow: hidden; }
.acs { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,28,.72); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-text-size-adjust: 100%; }
.acs[hidden] { display: none; }
.acs * { box-sizing: border-box; }
.acs-panel { position: relative; width: 100%; height: 100%; background: #000; color: #fff;
  display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 600px) and (min-height: 600px) {
  .acs-panel { max-width: 480px; max-height: 760px; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
}
.acs-top { display: flex; align-items: center; gap: 8px; padding: 10px 10px; padding-top: max(10px, env(safe-area-inset-top));
  background: #0d1626; flex: none; }
.acs-top .acs-t { flex: 1; text-align: center; font-weight: 700; font-size: 16px; }
.acs-ib { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.acs-ib[hidden] { visibility: hidden; display: grid; }
.acs-ib svg { width: 22px; height: 22px; }
.acs-ib.on { background: rgba(255,255,255,.18); }
.acs-cam { position: relative; flex: 1; overflow: hidden; background: #111; }
.acs-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acs-cam .acs-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.acs-box { position: absolute; left: 8%; right: 8%; top: 38%; height: 21%; border: 3px solid rgba(255,255,255,.95);
  border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); transition: border-color .15s; }
.acs-box.hit { border-color: #4ade80; }
.acs-hint { position: absolute; left: 0; right: 0; top: calc(38% - 34px); text-align: center; font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); z-index: 1; padding: 0 16px; }
.acs-st { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85); z-index: 1; padding: 0 16px; }
.acs-card { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: #fff; color: #0d1626;
  border-radius: 14px; padding: 12px 14px; border: 2px solid #16a34a; }
.acs-card[hidden] { display: none; }
.acs-card .acs-cl { font-size: 12px; color: #5b6475; }
.acs-card .acs-cn { font: 800 28px/1.2 Inter, Arial, sans-serif; letter-spacing: 2px; }
.acs-card input.acs-cn { width: 100%; border: 1px solid #dfe3ea; border-radius: 9px; padding: 4px 10px; margin: 3px 0;
  text-transform: uppercase; color: #0d1626; background: #fff; }
.acs-card .acs-cs { font-size: 13px; color: #5b6475; }
.acs-card.unsure { border-color: #f59e0b; }
.acs-bot { display: flex; gap: 10px; padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: #0d1626; flex: none; }
.acs-bot button { flex: 1; min-height: 48px; border-radius: 11px; font: 700 15px Inter, Arial, sans-serif; cursor: pointer;
  padding: 0 8px; -webkit-tap-highlight-color: transparent; }
.acs-b2 { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.acs-b1 { background: #1d63c9; color: #fff; border: 1px solid #1d63c9; }
/* Bootstrap's input[type=file]{display:block} would otherwise show it. */
.acs .acs-file { display: none !important; }
@media (prefers-reduced-motion: reduce) { .acs-box { transition: none; } }

/* The not-found page's "Scanned the wrong number? Scan again" line (after a
   scan; the line stays hidden until a camera is found). */
.acs-again-row[hidden] { display: none; }
.acs-again { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 7px 13px; border-radius: 10px;
  border: 1.5px solid #1d63c9; background: #fff; color: #1d63c9; font: 700 15px Inter, Arial, sans-serif; cursor: pointer; }
.acs-again svg { width: 20px; height: 20px; }