/* 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 */

.pp-av { display:flex; align-items:center; gap:8px; padding:6px;
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:9px;
  position:relative; overflow:hidden; transition:all .3s ease; }
.pp-av.is-ok { background:linear-gradient(135deg,#f0fdf4,#ecfdf5);
  border-color:rgba(16,185,129,.35); }
.pp-av.is-fail { background:linear-gradient(135deg,#fef2f2,#fee2e2);
  border-color:rgba(239,68,68,.35); }

.pp-av__box { flex-shrink:0; width:36px; height:36px;
  border:1px solid #e5e7eb; border-radius:6px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; transition:all .3s ease;
  position:relative; overflow:hidden; }
.pp-av.is-loading .pp-av__box { border-color:transparent; background:transparent; }
.pp-av.is-ok      .pp-av__box { border-color:#10b981; background:#10b981;
  animation:pp-av-pop .35s cubic-bezier(.34,1.56,.64,1); }
.pp-av.is-fail    .pp-av__box { border-color:#ef4444; background:#ef4444; }
@keyframes pp-av-pop { 0%{transform:scale(.5)} 50%{transform:scale(1.15)}
  100%{transform:scale(1)} }

.pp-av__spin { position:absolute; inset:3px; border-radius:50%;
  background:conic-gradient(#0ea5e9 0deg, #0ea5e9 var(--pp-av-deg,0deg),
    rgba(14,165,233,.15) var(--pp-av-deg,0deg),
    rgba(14,165,233,.15) 360deg);
  animation:pp-av-fill 3s linear forwards; }
.pp-av__spin::after  { content:''; position:absolute; inset:3px;
  background:#fff; border-radius:50%; }
.pp-av__spin::before { content:''; position:absolute; top:50%; left:50%;
  width:5px; height:5px; background:#0ea5e9; border-radius:50%;
  transform:translate(-50%,-50%); z-index:2;
  animation:pp-av-pulse-dot 1.4s 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:.4; transform:translate(-50%,-50%) scale(.8); }
  50%     { opacity:1;  transform:translate(-50%,-50%) scale(1.2); }
}
@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; transform:scale(.5); transition:all .3s ease;
  font-size:14px; }
.pp-av.is-ok .pp-av__check { opacity:1; transform:scale(1); }

.pp-av__text  { flex:1; min-width:0; }
.pp-av__label { font-size:13px; font-weight:600; color:#111827;
  line-height:1.2; letter-spacing:-.005em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.pp-av.is-ok   .pp-av__label { color:#059669; }
.pp-av.is-fail .pp-av__label { color:#dc2626; }
.pp-av__sub   { font-size:11px; color:#6b7280; margin-top:2px;
  line-height:1.3; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }

.pp-av__brand { flex-shrink:0; display:flex; flex-direction:column;
  align-items:flex-end; gap:1px; color:#9ca3af; opacity:.7;
  padding-right:4px; }
@media(max-width:380px){ .pp-av__brand { display:none; } }
.pp-av__brand-name { font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.pp-av__brand-tag  { font-size:8.5px; text-transform:uppercase;
  letter-spacing:.05em; }

/* 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 */
  animation:pp-av-slide-down .3s ease;
}
.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; }
@keyframes pp-av-slide-down { from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)} }

.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%); }
}