/* Auto-verify widget — shared across pastepanel.com platform signup AND every
   tenant signup. Namespaced under .pp-av to avoid collision with theme CSS.
   Source of truth: /static/vendor/auto-verify/widget.css */

/* ── REDESIGN 2026-05-25: premium polish for tenant signup pages ── */
/* User edit 2026-05-25: removed transitions/animations on state changes
   per request (instant flip to ok/fail/challenge, no fade/pop/slide). */
/* Compact base — same height in loading/ok/fail states per user request 2026-05-25 */
.pp-av { display:flex; align-items:center; gap:10px; padding:6px 10px;
  background:linear-gradient(180deg,#fafbfc 0%,#f4f6f9 100%);
  border:1px solid #e3e8ef; border-radius:9px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  position:relative; overflow:hidden; }
.pp-av.is-loading::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 0%, transparent 38%,
    rgba(99,179,237,.07) 50%, transparent 62%, transparent 100%);
  background-size:200% 100%;
  animation:pp-av-shimmer 2.2s ease-in-out infinite;
  pointer-events:none; }
@keyframes pp-av-shimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
/* is-ok / is-fail keep the same dimensions as loading (base is already compact) —
   only colour/border/shadow change between states. */
.pp-av.is-ok { background:linear-gradient(180deg,#ecfdf5 0%,#d1fae5 100%);
  border-color:#34d399;
  box-shadow:0 1px 2px rgba(16,185,129,.10); }
.pp-av.is-ok::before { display:none; }
.pp-av.is-fail { background:linear-gradient(180deg,#fef2f2 0%,#fee2e2 100%);
  border-color:#f87171;
  box-shadow:0 1px 2px rgba(239,68,68,.10); }
.pp-av.is-fail::before { display:none; }

.pp-av__box { flex-shrink:0; width:26px; height:26px;
  border:1.5px solid #e3e8ef; border-radius:7px;
  background:linear-gradient(180deg,#fff 0%,#f9fafb 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6); }
.pp-av.is-loading .pp-av__box { border-color:transparent; background:transparent;
  box-shadow:none; }
.pp-av.is-ok .pp-av__box {
  border-color:#10b981;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  box-shadow:0 2px 8px rgba(16,185,129,.35), inset 0 1px 1px rgba(255,255,255,.25); }
.pp-av.is-fail .pp-av__box {
  border-color:#ef4444;
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  box-shadow:0 2px 8px rgba(239,68,68,.30); }

.pp-av__spin { position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    #3b82f6 0deg, #60a5fa var(--pp-av-deg,0deg),
    rgba(59,130,246,.10) var(--pp-av-deg,0deg),
    rgba(59,130,246,.10) 360deg);
  /* fill duration shortened to 850ms so the spinner reaches 360° BEFORE the
     1000ms JS wait fires the state flip — no half-circle freeze frame. */
  animation:pp-av-fill .85s linear forwards; }
.pp-av__spin::after  { content:''; position:absolute; inset:2.5px;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.08); }
.pp-av__spin::before { content:''; position:absolute; top:50%; left:50%;
  width:4px; height:4px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-radius:50%;
  transform:translate(-50%,-50%); z-index:2;
  box-shadow:0 0 8px rgba(59,130,246,.5);
  animation:pp-av-pulse-dot 1.2s ease-in-out infinite; }
@keyframes pp-av-fill { from{--pp-av-deg:0deg} to{--pp-av-deg:360deg} }
@keyframes pp-av-pulse-dot {
  0%,100% { opacity:.45; transform:translate(-50%,-50%) scale(.75); }
  50%     { opacity:1;   transform:translate(-50%,-50%) scale(1.25); }
}
@property --pp-av-deg { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.pp-av.is-ok .pp-av__spin, .pp-av.is-fail .pp-av__spin { display:none; }

.pp-av__check { opacity:0; font-size:13px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.pp-av.is-ok .pp-av__check { opacity:1; }

.pp-av__text  { flex:1; min-width:0; }
.pp-av__label { font-size:12.5px; font-weight:600; color:#0f172a;
  line-height:1.25; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.pp-av.is-ok   .pp-av__label { color:#047857; }
.pp-av.is-fail .pp-av__label { color:#b91c1c; }
.pp-av__sub   { font-size:10.5px; color:#64748b; margin-top:1px;
  line-height:1.35; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-weight:500; }
.pp-av.is-ok .pp-av__sub   { color:#059669; }
.pp-av.is-fail .pp-av__sub { color:#dc2626; }

.pp-av__brand { flex-shrink:0; display:flex; align-items:center; gap:5px;
  padding:3px 6px 3px 5px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(99,179,237,.18);
  border-radius:7px;
  color:#475569;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.pp-av__brand::before {
  content:''; flex-shrink:0;
  width:11px; height:11px; border-radius:3px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4z'/></svg>") center/11px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4z'/></svg>") center/11px no-repeat;
}
.pp-av__brand-name { font-size:10.5px; font-weight:700;
  letter-spacing:.01em; color:#1e3a8a; }
.pp-av__brand-tag  { display:none; }
@media(max-width:420px){ .pp-av__brand { display:none; } }

/* Challenge container — wraps math captcha OR slider puzzle in a clean,
   bordered card. Same outer styling for both so the UX is consistent.
   The card auto-fits the parent form/card width but is capped at 420px so
   it never gets absurdly wide on tenants whose form sits in a wide card
   (a 700px-wide captcha makes the piece look tiny). On narrow tenants
   the card shrinks all the way down to the parent width. */
.pp-av__challenge {
  position:relative;
  margin-top:10px;
  padding:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(10,25,41,.04);
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:480px;  /* align with the form inputs above, capped only on
                       very wide tenant themes to avoid an absurd block */
  /* No slide-down animation — challenge appears instantly per user request. */
}
.pp-av {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:480px;
}

/* Math captcha input doesn't need to stretch the whole row — once it
   reaches ~280px the OTP-sized digits are readable enough; anything
   wider just looks ungainly on tablets/desktops. */
.pp-av__cap-input { max-width:280px; }

.pp-av__hint {
  display:flex; align-items:center; gap:6px;
  margin:0 0 8px; padding-right:26px; /* room for absolute reload */
  font-size:11px; font-weight:500; color:#374151;
  line-height:1.3;
}
.pp-av__hint::before {
  content:''; flex-shrink:0;
  width:14px; height:14px; border-radius:4px;
  background:linear-gradient(135deg,#3399FF,#007FFF);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/></svg>") center/12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/></svg>") center/12px no-repeat;
}

/* Math captcha — compact row */
.pp-av__cap-row { display:flex; align-items:center; gap:8px; }
.pp-av__cap-img {
  height:40px; flex-shrink:0;
  background:#fff; border:1px solid #d1d5db; border-radius:7px;
  padding:3px 8px;
  display:flex; align-items:center;
  box-shadow:inset 0 1px 2px rgba(10,25,41,.05);
}
.pp-av__cap-img img { height:30px; display:block; }
.pp-av__cap-input {
  flex:1; min-width:0;
  height:40px; padding:0 12px;
  border:1px solid #d1d5db; border-radius:7px;
  font-size:16px; font-weight:600;
  text-align:center; letter-spacing:.08em;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  background:#fff; color:#0A1929;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.pp-av__cap-input::placeholder { font-weight:400; letter-spacing:0; color:#9ca3af; }
.pp-av__cap-input:focus {
  border-color:#007FFF;
  box-shadow:0 0 0 3px rgba(0,127,255,.15);
}

/* Footer — single compact row, no dashed border. Reload is floated to
   the top-right of the card via absolute positioning so we save the
   whole row's worth of vertical space. */
.pp-av__challenge-foot {
  display:flex; align-items:center; margin-top:6px;
  font-size:10px; color:#9ca3af;
}
.pp-av__challenge-foot .pp-av__safe {
  display:inline-flex; align-items:center; gap:4px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.pp-av__challenge-foot .pp-av__safe::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.18);
}
/* Puzzle variant: floats over the colourful stage. */
.pp-av__reload {
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0;
  background:rgba(255,255,255,.85); color:#374151;
  border:1px solid rgba(10,25,41,.08); border-radius:6px;
  cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 1px 2px rgba(10,25,41,.08);
  transition:background .15s, color .15s, transform .2s;
}
.pp-av__reload:hover { background:#fff; color:#007FFF; }
.pp-av__reload:active { transform:rotate(-90deg); }

/* Math variant: lives inside .pp-av__cap-row as a third flex child,
   sitting flush to the right of the answer input — no overlap. */
.pp-av__reload--inline {
  position:static; top:auto; right:auto;
  flex-shrink:0;
  width:40px; height:40px;
  background:#fff; color:#374151;
  border:1px solid #d1d5db; border-radius:7px;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.pp-av__reload--inline:hover { background:#F3F6F9; }

/* ── Puzzle CAPTCHA ── */
.pp-pz { display:flex; flex-direction:column; gap:10px; }
.pp-pz__stage { position:relative; max-width:100%; border-radius:10px;
  overflow:hidden; border:1px solid #e5e7eb; background:#f3f6f9; user-select:none; }
.pp-pz__stage img { display:block; max-width:100%; }
.pp-pz__panel { width:100%; height:auto; pointer-events:none; }
.pp-pz__piece { position:absolute; width:auto; height:auto;
  pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  will-change:left; }
.pp-pz__rail { position:relative; height:38px; border-radius:999px;
  background:#eef2f7; border:1px solid #e5e7eb; }
.pp-pz__rail-fill { position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#3399FF 0%,#007FFF 100%); opacity:.18; }
.pp-pz__handle { position:absolute; top:50%; left:0;
  transform:translate(0,-50%);
  width:46px; height:34px; border:1px solid #cbd5e1; background:#fff;
  border-radius:8px; color:#0A1929; cursor:grab;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(10,25,41,.10);
  transition:transform .15s, border-color .15s, background .15s; }
.pp-pz__handle:hover { border-color:#94a3b8; background:#F3F6F9; }
.pp-pz__handle:active, .pp-pz__handle.is-dragging { cursor:grabbing;
  border-color:#007FFF; background:#E6F2FF; transform:translate(0,-50%) scale(1.04); }
.pp-pz__handle i { font-size:13px; pointer-events:none; }
.pp-pz.is-ok .pp-pz__handle { border-color:#1AA251; background:#E8F8EE; color:#0F7A3B; }
.pp-pz.is-ok .pp-pz__rail-fill { background:linear-gradient(90deg,#1AA251 0%,#16C45F 100%); opacity:.25; }
.pp-pz.is-err .pp-pz__handle { border-color:#EB0014; background:#FCEBED; color:#9B0010; animation:pp-pz-shake .4s; }
.pp-pz__status { font-size:11.5px; color:#6b7280; text-align:center;
  min-height:1.2em; line-height:1.3; }
.pp-pz.is-ok .pp-pz__status { color:#1AA251; font-weight:600; }
.pp-pz.is-err .pp-pz__status { color:#EB0014; font-weight:600; }
@keyframes pp-pz-shake {
  10%,90% { transform:translate(-2px,-50%); }
  20%,80% { transform:translate(3px,-50%); }
  30%,50%,70% { transform:translate(-4px,-50%); }
  40%,60% { transform:translate(4px,-50%); }
}