/* Container positions */
.toast-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* clicks pass through except on toasts */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.toast-container.top-left     { top: 0; left: 0; align-items: flex-start; }
.toast-container.top-right    { top: 0; right: 0; align-items: flex-end; }
.toast-container.bottom-left  { bottom: 0; left: 0; align-items: flex-start; }
.toast-container.bottom-right { bottom: 0; right: 0; align-items: flex-end; }

/* Toast card */
.toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 14px;

/* Glassmorphism */
background: linear-gradient(
  135deg,
  rgba(68, 68, 68, 0.15), /* frosted glass white */
  color-mix(in srgb, var(--accent) 70%, transparent) /* fades into accent */
);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
box-shadow: 0 0 10px black; 
color: #fff;
text-shadow: 0 0 10px black;
position: relative;
overflow: hidden; /* for effects inside */

}


/* Variants tweak brightness slightly */
.toast--success { --accent: #22c55e; }
.toast--error   { --accent: #ef4444; }
.toast--warning { --accent: #f59e0b; }
.toast--info    { --accent: #60a5fa; }

.toast__icon {
  font-size: 20px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

.toast__message {
  line-height: 1.3;
  font-size: 15px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.toast__right { display: flex; align-items: start; gap: 8px; }

.toast__close {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  transition: transform .15s ease, opacity .15s ease;
}
.toast__close:hover { transform: scale(1.1); opacity: 1; }

/* Progress bar */
.toast__progress {
  position: absolute;
  left: 4px; right: 4px; bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.75));
  transform-origin: left center;
  animation: toast-progress var(--duration-ms, 3500ms) linear forwards;
  opacity: 0.9;
}

/* Animations */
.toast { opacity: 0; transform: translateY(8px) scale(0.98); }
.toast.toast--enter { animation: toast-in .22s ease-out forwards; }
.toast--leaving { animation: toast-out .18s ease-in forwards; }

@keyframes toast-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Pause animation on hover */
.toast.paused .toast__progress {
  animation-play-state: paused;
}