/* =========================
   WOORDS Toast System
   ========================= */

.toast-stack{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:10050;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:min(90vw,500px);
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  position:relative;
  width:min(90vw,500px);
  min-height:48px;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  padding:13px 56px;
  border-radius:18px;
  background:rgba(42,42,42,.96);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 14px 34px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.04) inset;
  color:#d4d4d4;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

.toast.show{
  opacity:1;
  transform:translate3d(0,0,0);
}

.toast.hide{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .32s ease, transform .32s ease;
}

.toast-body{
  min-width:0;
  text-align:center;
}

.toast-title{
  display:none;
}

.toast-message{
  margin:0;
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:.01em;
  color:#d4d4d4;
  text-align:center;
  word-wrap:break-word;
}

.toast.success::before{
  content:"✓";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#d8d8d8;
  font-size:14px;
  font-weight:700;
}

.toast.error::before{
  content:"!";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#d8d8d8;
  font-size:14px;
  font-weight:800;
}

.toast.info::before{
  content:"i";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#d8d8d8;
  font-size:13px;
  font-weight:800;
  font-style:normal;
}

.toast.loading::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:rgba(255,255,255,.65);
  animation:toastSpin .8s linear infinite;
}

.toast-close,
.toast-progress{
  display:none;
}

@keyframes toastSpin{
  to{ transform:translateY(-50%) rotate(360deg); }
}

@media (max-width:720px){
  .toast-stack{
    bottom:86px;
    width:min(92vw,420px);
  }

  .toast{
    width:min(92vw,420px);
    padding:12px 48px;
  }
}