/* =========================================================
   ACE 360 forms: required fields, inline errors, ACE Shield captcha
   Loaded after the theme's other stylesheets (see functions.php).
   ========================================================= */

/* ---------- required marker ---------- */
.field .req{color:var(--gold);margin-left:4px;font-weight:700}

/* keep a focused / scrolled-to field clear of the fixed site header */
.field input,.field select,.field textarea,.ace-cap,.ace-err{scroll-margin-top:120px}

/* ---------- inline validation ---------- */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#E5604F;
  box-shadow:0 0 0 4px rgba(229,96,79,.14);
}
.field.has-error .svc-check{border-color:rgba(229,96,79,.55)}
.ace-err{
  display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;
  font-size:.84rem;line-height:1.4;font-weight:500;color:#F3A79E;
  animation:aceErrIn .28s var(--ease,ease) both;
}
.ace-err::before{
  content:"!";flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:rgba(229,96,79,.18);border:1px solid rgba(229,96,79,.55);
  display:grid;place-items:center;font-size:.68rem;font-weight:800;line-height:1;color:#F3A79E;
}
form > .ace-err{margin:0 0 14px}
@keyframes aceErrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- ACE Shield ---------- */
.ace-cap{
  --cap-line:var(--line-2,#33343A);
  position:relative;margin:6px 0 18px;padding:16px;border-radius:18px;
  border:1px solid var(--cap-line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
/* soft gold sheen in the corner */
.ace-cap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,rgba(251,169,31,.10),transparent 55%);
  transition:opacity .4s;
}
.ace-cap > *{position:relative}

.ace-cap-top{display:flex;align-items:center;gap:12px}
.ace-cap-badge{
  flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  color:var(--gold,#FBA91F);background:var(--gold-soft,rgba(251,169,31,.12));
  border:1px solid rgba(251,169,31,.32);
  transition:color .35s,background .35s,border-color .35s,transform .35s;
}
.ace-cap-badge svg{width:22px;height:22px}
.ace-cap-tick{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .5s .1s var(--ease,ease)}
.ace-cap-heading{min-width:0;line-height:1.25}
.ace-cap-heading strong{
  display:block;font-family:var(--font-d,inherit);font-weight:600;font-size:.96rem;color:#fff;letter-spacing:-.01em;
}
.ace-cap-heading small{display:block;margin-top:2px;font-size:.78rem;color:var(--muted,#727781)}
.ace-cap-refresh{
  margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:var(--body,#A7ACB5);
  background:transparent;border:1px solid transparent;
  transition:color .2s,border-color .2s,background .2s,transform .4s var(--ease,ease);
}
.ace-cap-refresh svg{width:17px;height:17px}
.ace-cap-refresh:hover{color:var(--gold,#FBA91F);border-color:var(--cap-line);background:rgba(255,255,255,.03);transform:rotate(180deg)}

.ace-cap-prompt{margin:14px 0 12px;font-size:.98rem;color:#dfe1e6;min-height:1.5em}
.ace-cap-prompt b{
  color:var(--gold,#FBA91F);font-family:var(--font-d,inherit);font-weight:700;
  padding:2px 9px;margin-left:2px;border-radius:8px;background:rgba(251,169,31,.12);
  border:1px solid rgba(251,169,31,.28);white-space:nowrap;
}

/* the five picture tiles */
.ace-cap-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ace-cap-tiles[hidden],.ace-cap-textq[hidden]{display:none}
.ace-cap-tile,.ace-cap-skel{aspect-ratio:1;border-radius:15px;min-width:0}
.ace-cap-tile{
  display:grid;place-items:center;padding:0;cursor:pointer;
  color:#e9eaee;background:var(--bg-2,#0F1013);border:1.5px solid var(--cap-line);
  animation:aceTileIn .4s var(--ease,ease) both;animation-delay:calc(var(--i,0) * 55ms);
  transition:transform .22s var(--ease,ease),border-color .2s,color .2s,background .2s,box-shadow .22s;
}
.ace-cap-tile svg{width:52%;height:52%;transform:rotate(var(--r,0deg));transition:transform .3s var(--ease,ease)}
.ace-cap-tile:hover,
.ace-cap-tile:focus-visible{
  outline:none;transform:translateY(-4px);color:var(--gold,#FBA91F);border-color:var(--gold,#FBA91F);
  background:#101114;box-shadow:0 14px 26px -14px rgba(251,169,31,.65),0 0 0 3px rgba(251,169,31,.12);
}
.ace-cap-tile:hover svg,
.ace-cap-tile:focus-visible svg{transform:rotate(0) scale(1.08)}
.ace-cap-tile:active{transform:translateY(-1px) scale(.97)}
.ace-cap-tile.is-picked{color:var(--gold,#FBA91F);border-color:var(--gold,#FBA91F);background:rgba(251,169,31,.1)}
.ace-cap-tile.is-bad{color:#F3A79E;border-color:#E5604F;background:rgba(229,96,79,.1);animation:aceShake .42s}
.ace-cap[data-state="checking"] .ace-cap-tile,
.ace-cap[data-state="wrong"] .ace-cap-tile{pointer-events:none}
.ace-cap[data-state="checking"] .ace-cap-tile:not(.is-picked),
.ace-cap[data-state="wrong"] .ace-cap-tile:not(.is-bad){opacity:.4}

/* loading skeleton */
.ace-cap-skel{
  background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 70%);
  background-size:220% 100%;border:1.5px solid var(--cap-line);animation:aceShimmer 1.3s linear infinite;
}

/* text-question fallback */
.ace-cap-textq{display:flex;gap:10px;align-items:stretch}
.ace-cap .ace-cap-answer{
  width:96px;max-width:96px;flex:0 0 auto;text-align:center;font-family:var(--font-m,monospace);font-size:1.15rem;
  color:#fff;background:var(--bg-2,#0F1013);border:1.5px solid var(--cap-line);border-radius:12px;padding:10px 12px;
}
.ace-cap .ace-cap-answer:focus{outline:none;border-color:var(--gold,#FBA91F);box-shadow:0 0 0 4px rgba(251,169,31,.14)}
.ace-cap-go{
  padding:0 22px;border-radius:12px;cursor:pointer;font-family:var(--font-d,inherit);font-weight:600;font-size:.95rem;
  color:#000;background:var(--gold,#FBA91F);border:0;transition:background .2s,transform .2s;
}
.ace-cap-go:hover{background:var(--gold-2,#FFC15A);transform:translateY(-2px)}

.ace-cap-msg{margin:12px 0 0;min-height:1.2em;font-size:.84rem;font-weight:500;color:var(--body,#A7ACB5)}
.ace-cap-msg:empty{display:none}
.ace-cap-msg.is-err{color:#F3A79E}
.ace-cap-alt{
  display:block;margin:12px 0 0;padding:0;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;font-size:.8rem;color:var(--muted,#727781);text-decoration:underline;text-underline-offset:3px;
  transition:color .2s;
}
.ace-cap-alt:hover{color:var(--gold,#FBA91F)}

/* visitor tried to send without verifying */
.ace-cap.has-error{border-color:rgba(229,96,79,.6);box-shadow:0 0 0 4px rgba(229,96,79,.12);animation:aceShake .42s}

/* verified: collapse to a calm green confirmation */
.ace-cap[data-state="verified"]{
  --cap-line:rgba(46,204,113,.45);background:rgba(46,204,113,.07);padding-block:12px;
}
.ace-cap[data-state="verified"]::before{opacity:0}
.ace-cap[data-state="verified"] .ace-cap-badge{
  color:#3DDC84;background:rgba(46,204,113,.14);border-color:rgba(46,204,113,.5);
  animation:acePop .5s var(--ease,ease);
}
.ace-cap[data-state="verified"] .ace-cap-tick{stroke-dashoffset:0}
.ace-cap[data-state="verified"] .ace-cap-heading strong{color:#7EE0A6}
.ace-cap[data-state="verified"] .ace-cap-play,
.ace-cap[data-state="verified"] .ace-cap-alt,
.ace-cap[data-state="verified"] .ace-cap-refresh,
.ace-cap[data-state="verified"] .ace-cap-msg{display:none}

/* ---------- animation ---------- */
@keyframes aceTileIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes aceShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes aceShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes acePop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .ace-cap *,.ace-cap,.ace-err{animation:none !important;transition:none !important}
}

/* ---------- small screens ---------- */
@media (max-width:420px){
  .ace-cap{padding:14px}
  .ace-cap-tiles{gap:8px}
  .ace-cap-tile,.ace-cap-skel{border-radius:12px}
}