/* action-feedback.css
   Shared platform-wide visual feedback system for async actions
   (save, send, delete, archive, approve, etc). Designed to replace
   "click button, nothing visibly happens, then a toast" with real
   in-progress feedback — confirmed gap from the platform-wide audit:
   13+ transactional pages had zero spinner/progress indication while
   saving, only a disabled button and a silent wait.

   Include this file's <link>, then action-feedback.js's <script>, on
   any page. Call showActionFeedback('loading', 'Sending...') when an
   async action starts, then showActionFeedback('success', 'Sent!') or
   showActionFeedback('error', 'Could not send') when it resolves.
*/

.af-overlay{
  position:fixed;inset:0;background:rgba(14,29,51,0.55);
  display:none;align-items:center;justify-content:center;z-index:9998;
  opacity:0;transition:opacity 0.2s;
}
.af-overlay.show{display:flex;opacity:1;}

.af-card{
  background:#ffffff;border-radius:20px;padding:36px 44px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  min-width:220px;
  transform:scale(0.92);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.af-overlay.show .af-card{transform:scale(1);}

/* Spinner — shown during 'loading' state */
.af-spinner{
  width:54px;height:54px;border-radius:50%;
  border:4px solid #F5F7FA;border-top-color:#2E9E44;
  animation:af-spin 0.7s linear infinite;
}
@keyframes af-spin{to{transform:rotate(360deg);}}

/* Success checkmark — pops in, then the check itself draws on */
.af-check{
  width:54px;height:54px;border-radius:50%;background:#2E9E44;
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);
  animation:af-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes af-pop{to{transform:scale(1);}}
.af-check svg{width:26px;height:26px;}
.af-check svg path{
  stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:af-draw 0.35s ease-out 0.15s forwards;
}
@keyframes af-draw{to{stroke-dashoffset:0;}}

/* Failure X — same pop-in, different icon, no draw-on (instant, since
   a failure doesn't need the same celebratory feel) */
.af-fail{
  width:54px;height:54px;border-radius:50%;background:#E24B4A;
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);
  animation:af-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.af-fail i{font-size:26px;color:#fff;}

.af-label{font-size:14px;font-weight:600;color:#152948;text-align:center;}

/* Skeleton shimmer — for initial page/list loading, confirmed only
   covering 26/49 pages today. Same visual everywhere now. */
.af-skeleton{
  background:linear-gradient(90deg,#E5E9EF 25%,#eef1f5 37%,#E5E9EF 63%);
  background-size:400% 100%;
  animation:af-shimmer 1.4s infinite;
  border-radius:8px;
}
@keyframes af-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Page-entry fade — applied to the main content wrapper so pages don't
   just snap into existence. Confirmed zero coverage on pay.html,
   portal-dashboard.html, portal-login.html, sign-document.html,
   verify.html — now available everywhere via one class. */
.af-page-enter{animation:af-fade-up 0.35s ease-out;}
@keyframes af-fade-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Button press feedback — subtle scale-down on click, makes every
   button feel responsive rather than static. Add class af-btn to any
   existing button. */
.af-btn{transition:transform 0.1s ease, background 0.15s ease, opacity 0.15s ease;}
.af-btn:active{transform:scale(0.96);}