/* confirm.css — reusable confirmation micro-animations (Margherita)
   Namespaced cf- ; brand colors; respects prefers-reduced-motion.
   API in confirm.js. Load order: after components.css. */

:root{
  --cf-blue:#005096; --cf-green:#1f9c61; --cf-gold:#F8C026; --cf-ink:#14181F;
}

/* ---------- toast (spring) + check ---------- */
.cf-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,90px);
  z-index:99999; opacity:0;
  display:flex; align-items:center; gap:11px;
  background:var(--cf-ink); color:#fff; font:600 .9rem/1 'Fustat',system-ui,sans-serif;
  padding:13px 18px; border-radius:13px; max-width:90vw;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55);
}
.cf-toast.cf-show{ animation:cfToastIn .5s cubic-bezier(.2,1.25,.3,1) forwards; }
.cf-toast.cf-hide{ animation:cfToastOut .35s ease forwards; }
.cf-toast b{font-weight:800}
.cf-toast .cf-dot{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--cf-green);
  display:grid; place-items:center;
}
.cf-toast .cf-dot svg{width:13px;height:13px}
@keyframes cfToastIn{ to{ transform:translate(-50%,0); opacity:1; } }
@keyframes cfToastOut{ to{ transform:translate(-50%,90px); opacity:0; } }

/* ---------- standalone drawn check ---------- */
.cf-check-svg{ width:1em; height:1em; display:inline-block; vertical-align:middle; }
.cf-check-svg circle{ fill:none; stroke:var(--cf-green); stroke-width:6;
  stroke-dasharray:226; stroke-dashoffset:226; }
.cf-check-svg path{ fill:none; stroke:var(--cf-green); stroke-width:7; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.cf-check-svg.cf-play circle{ animation:cfDraw .5s cubic-bezier(.3,.7,.3,1) forwards; }
.cf-check-svg.cf-play path{ animation:cfDraw .35s .4s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes cfDraw{ to{ stroke-dashoffset:0; } }

/* dot check (used inside toast) — instant draw */
.cf-dot svg path{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24;
  animation:cfDraw .35s .15s ease forwards; }

/* ---------- button morph (loading spinner) ---------- */
.cf-btn-loading{ position:relative; color:transparent !important; pointer-events:none; }
.cf-btn-loading > *{ visibility:hidden; }
.cf-btn-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:cfSpin .7s linear infinite; visibility:visible;
}
@keyframes cfSpin{ to{ transform:rotate(360deg); } }

/* ---------- green "APPROVED" stamp (variant C) ---------- */
.cf-stamp-wrap{ position:fixed; inset:0; z-index:99998; display:grid; place-items:center;
  pointer-events:none; }
.cf-stamp{
  position:relative; color:var(--cf-green); border:3px solid var(--cf-green);
  border-radius:10px; padding:14px 26px; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.0); opacity:0; transform:scale(2.6) rotate(6deg);
  font-family:'Fustat',system-ui,sans-serif;
}
.cf-stamp .cf-bc{ font-size:2.1rem; line-height:1; }
.cf-stamp b{ display:block; font-weight:800; font-size:1.7rem; letter-spacing:.12em; }
.cf-stamp small{ display:block; font-weight:700; font-size:.62rem; letter-spacing:.18em; opacity:.85; }
.cf-stamp.cf-play{ animation:cfSlam .6s cubic-bezier(.4,1.4,.4,1) forwards; }
.cf-stamp::after{ content:""; position:absolute; inset:-6px; border-radius:14px;
  border:2px solid currentColor; opacity:0; }
.cf-stamp.cf-play::after{ animation:cfInk .6s .16s ease-out; }
@keyframes cfSlam{
  0%{ transform:scale(2.6) rotate(6deg); opacity:0; filter:blur(2px); }
  55%{ transform:scale(.92) rotate(4deg); opacity:1; filter:blur(0); }
  72%{ transform:scale(1.06) rotate(4deg); }
  100%{ transform:scale(1) rotate(4deg); opacity:.96; }
}
@keyframes cfInk{ 0%{ transform:scale(.6); opacity:.4; } 100%{ transform:scale(1.5); opacity:0; } }
.cf-stamp.cf-fade{ animation:cfStampOut .4s ease forwards; }
@keyframes cfStampOut{ to{ opacity:0; transform:scale(1.05) rotate(4deg); } }

/* ---------- rows green cascade ---------- */
.cf-row-ok{ transition:background .4s, color .4s; }
.cf-row-ok.cf-on{ background:rgba(31,156,97,.10); }

/* ---------- scan ring -> check ---------- */
.cf-scan{ position:relative; display:inline-grid; place-items:center; }
.cf-scan svg{ width:84px; height:84px; }
.cf-scan .cf-trk{ fill:none; stroke:#e7eaef; stroke-width:6; }
.cf-scan .cf-prg{ fill:none; stroke:var(--cf-blue); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:226; stroke-dashoffset:226; transform:rotate(-90deg); transform-origin:42px 42px; }
.cf-scan .cf-sck{ fill:none; stroke:var(--cf-green); stroke-width:6; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.cf-scan .cf-pct{ position:absolute; font:700 .9rem 'Fustat',system-ui,sans-serif; color:var(--cf-blue); }
.cf-scan.cf-play .cf-prg{ animation:cfDraw 1.1s ease forwards, cfGreen .01s 1.12s forwards; }
.cf-scan.cf-play .cf-sck{ animation:cfDraw .4s 1.18s ease forwards; }
.cf-scan.cf-play svg{ animation:cfPulse .5s 1.05s ease; }
@keyframes cfGreen{ to{ stroke:var(--cf-green); } }
@keyframes cfPulse{ 50%{ transform:scale(1.08); } }

/* ---------- indeterminate scanning ring (unknown-duration scans) ---------- */
.cf-scanning{ position:relative; width:84px; height:84px; margin:0 auto 14px; }
.cf-scanning svg{ width:84px; height:84px; transform:rotate(-90deg); }
.cf-scanning .cf-trk{ fill:none; stroke:#e7eaef; stroke-width:6; }
.cf-scanning .cf-arc{ fill:none; stroke:var(--cf-blue); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:60 226; animation:cfArc 1.1s linear infinite; }
@keyframes cfArc{ to{ stroke-dashoffset:-286; } }

@media (prefers-reduced-motion: reduce){
  .cf-scanning .cf-arc{ animation-duration:2.4s; }
  .cf-toast,.cf-toast.cf-show{ animation:none; opacity:1; transform:translate(-50%,0); }
  .cf-check-svg circle,.cf-check-svg path,.cf-dot svg path{ stroke-dashoffset:0 !important; animation:none !important; }
  .cf-stamp,.cf-stamp.cf-play{ animation:none; opacity:.96; transform:scale(1) rotate(4deg); }
  .cf-scan.cf-play .cf-prg,.cf-scan.cf-play .cf-sck{ animation:none; stroke-dashoffset:0; }
  .cf-btn-loading::after{ animation:none; }
}