/* ===========================================================
   🜂 TGK Toasts — Universal Notification System (v1.0)
   =========================================================== */

#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 9999;
  pointer-events: none;
}

/* ===========================================================
   ✦ Toast Base
   =========================================================== */

.tgk-toast {
  font-family: var(--font-body, "Inter", sans-serif);
  background: linear-gradient(
    135deg,
    rgba(255, 252, 235, 0.95),
    rgba(255, 246, 200, 0.92)
  );
  color: var(--text-strong, #3c2f0c);
  border: 1px solid rgba(186, 153, 60, 0.45);
  border-radius: var(--radius-xl, 12px);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(186, 153, 60, 0.18);
  backdrop-filter: blur(6px);
  animation: toastSlideIn 0.45s ease, toastFadeOut 0.5s ease 3s forwards;
  pointer-events: auto;
  opacity: 0.98;
  transform-origin: bottom right;
  max-width: 320px;
  line-height: 1.35;
}

/* ===========================================================
   ✦ Toast Variants
   =========================================================== */

.tgk-toast.success {
  border-color: rgba(100, 180, 80, 0.4);
  background: linear-gradient(
    135deg,
    rgba(235, 255, 240, 0.95),
    rgba(210, 255, 225, 0.9)
  );
  color: #1b3b22;
  box-shadow: 0 4px 16px rgba(90, 180, 90, 0.18);
}

.tgk-toast.error {
  border-color: rgba(255, 90, 60, 0.4);
  background: linear-gradient(
    135deg,
    rgba(255, 240, 235, 0.96),
    rgba(255, 225, 220, 0.9)
  );
  color: #4a1710;
  box-shadow: 0 4px 16px rgba(255, 100, 80, 0.15);
}

.tgk-toast.remove {
  border-color: rgba(255, 130, 0, 0.35);
  background: linear-gradient(
    135deg,
    rgba(255, 245, 225, 0.96),
    rgba(255, 235, 200, 0.9)
  );
  color: #503514;
  box-shadow: 0 4px 16px rgba(255, 165, 80, 0.15);
}

.tgk-toast.info {
  border-color: rgba(200, 170, 80, 0.4);
  background: linear-gradient(
    135deg,
    rgba(255, 253, 240, 0.95),
    rgba(255, 250, 225, 0.9)
  );
  color: #3f330e;
}

/* ===========================================================
   ✦ Animation Keyframes
   =========================================================== */

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastFadeOut {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

/* ===========================================================
   ✦ Dark Mode
   =========================================================== */

body.dark .tgk-toast {
  background: linear-gradient(
    135deg,
    rgba(40, 35, 20, 0.95),
    rgba(55, 50, 25, 0.9)
  );
  color: var(--text-light, #f8f5e6);
  border-color: rgba(255, 215, 128, 0.2);
  box-shadow: 0 4px 16px rgba(255, 215, 128, 0.08);
}

body.dark .tgk-toast.success {
  background: linear-gradient(135deg, rgba(30, 50, 35, 0.95), rgba(40, 60, 40, 0.9));
}

body.dark .tgk-toast.error {
  background: linear-gradient(135deg, rgba(55, 30, 25, 0.95), rgba(60, 35, 30, 0.9));
}

body.dark .tgk-toast.info {
  background: linear-gradient(135deg, rgba(45, 40, 25, 0.95), rgba(50, 45, 30, 0.9));
}

/* ===========================================================
   ✦ Mobile Adjustments
   =========================================================== */
@media (max-width: 640px) {
  #toast-container {
    right: 1rem;
    bottom: 1rem;
  }
  .tgk-toast {
    font-size: 0.85rem;
    max-width: 85vw;
  }
}