/* ============================================================
   DSP toast notifications (Worker 2)
   Professional slide-in toasts, vanilla CSS. The server-rendered
   .flash[data-dsp-toast] element is hidden here and converted to
   a toast by toast.js; <noscript> shows the plain flash instead.
   ============================================================ */
.flash[data-dsp-toast]{display:none}

.dsp-toasts{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;
  display:flex;flex-direction:column;gap:10px;align-items:center;
  max-width:min(420px,calc(100vw - 32px));
  pointer-events:none;
}
.dsp-toast{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--navy,#0A1A33);color:#fff;
  border-radius:12px;padding:12px 18px;
  border:1px solid var(--gold,#C9A227);
  box-shadow:0 8px 24px rgba(10,26,51,.4);
  transform:translateY(80px);opacity:0;
  transition:transform .18s ease-out,opacity .15s ease-out;
  font-size:14px;line-height:1.45;white-space:nowrap;
  max-width:calc(100vw - 32px);
}
.dsp-toast.show{transform:none;opacity:1}
.dsp-toast.ok{border-left-color:var(--green,#1d9d55)}
.dsp-toast.error{border-left-color:var(--red,#d23b3b)}
.dsp-toast.info{border-left-color:var(--gold,#C9A227)}
.dsp-toast .t-ic{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#0A1A33;background:var(--gold,#C9A227);
}
.dsp-toast.ok .t-ic{background:var(--green,#1d9d55);color:#fff}
.dsp-toast.error .t-ic{background:var(--red,#d23b3b);color:#fff}
.dsp-toast .t-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.dsp-toast .t-x{
  flex:0 0 auto;background:none;border:none;color:#9fb0c9;
  font-size:18px;line-height:1;cursor:pointer;padding:0 0 0 4px;
}
.dsp-toast .t-x:hover{color:#fff}

/* Mobile: bottom sheet style so thumbs can reach the dismiss button */
@media (max-width:640px){
  .dsp-toasts{top:auto;bottom:76px;left:12px;right:12px;max-width:none;transform:none}
  .dsp-toast{transform:translateY(140%)}
  .dsp-toast.show{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .dsp-toast{transition:none;transform:none}
}