/* ========================================================================
 *  KX-PAY V2 dashboard  ·  08-toast.css
 * -----------------------------------------------------------------------
 *  Toast notifications
 *
 *  Lifted verbatim from V1 dashboard.html lines 1369-1393.
 *  Load order matters — see the numeric prefix.
 * =======================================================================
 */

  /* ------------------------------------------------------------- TOAST */
  /* Toast container — anchored top-center so notifications appear in the
     middle of the screen, just below the header. Easier to spot than the
     old top-right corner placement. */
  #toast-container {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 8px; z-index: 200;
    pointer-events: none;        /* so toasts never block clicks underneath */
    align-items: center;
  }
  .toast {
    background: #0f172a; color: white; padding: 10px 18px;
    border-radius: 6px; font-size: 13px; max-width: 480px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    animation: slideDown .2s ease-out;
    pointer-events: auto;        /* but the toast itself stays interactive */
    transition: opacity 0.3s;
  }
  .toast.error { background: #dc2626; }
  .toast.success { background: #059669; }
  @keyframes slideDown {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }