/* ════════════════════════════════════════════════════════════
   Notyf - DrakeSpot brand restyle (2026-06-19)
   Reskins stock Notyf 3 into the fintech glass look. Loaded AFTER
   notyf.min.css so these rules win without !important. Per-type
   accent comes from .ds-toast--success / .ds-toast--error (the
   className set on each type in js/alpine/alpine-app.js →
   window.notyf config). Accent/line colors resolve from the
   --ds-* tokens defined in css/drakespot.css.
   ════════════════════════════════════════════════════════════ */

/* Stack: a little more breathing room around and between toasts */
.notyf {
  padding: 18px;
}
.notyf__toast {
  margin-bottom: 10px;
}

/* Per-type accent color */
.notyf__toast.ds-toast--success { --toast-accent: var(--ds-grn); }
.notyf__toast.ds-toast--error   { --toast-accent: #f87171; }

/* The card - dark glass, rounded, wider, accented left edge */
.notyf__toast {
  min-width: 320px;
  max-width: 400px;
  padding: 0;
  border-radius: 14px;
  background: rgba(14, 20, 36, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ds-line2);
  border-left: 3px solid var(--toast-accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* Drop the stock solid ripple; keep a faint accent corner glow */
.notyf__ripple {
  background: transparent;
}
.notyf__toast::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(130% 100% at 100% 0%,
              color-mix(in srgb, var(--toast-accent) 14%, transparent),
              transparent 58%);
}

/* Content row */
.notyf__wrapper {
  padding: 15px 18px;
  gap: 13px;
  z-index: 10;
}

/* Icon becomes a rounded accent chip (white glyph set in the JS config) */
.notyf__icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 14px;
  background: var(--toast-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--toast-accent) 45%, transparent);
}

/* Message - Inter, settled size/weight, brand text color */
.notyf__message {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #EBEFF8;
}