/* ==========================================================================
   Twinkle Trimmings - Advanced Stackable Toast System
   ========================================================================== */

/* 1. 虚拟容器：承载所有的 Toast，阻止点击穿透 */
#tt-toast-container {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  z-index: 99999999;
  pointer-events: none; /* 让鼠标能穿透容器点击下方的网页 */
  display: flex;
  flex-direction: column;
}

/* 2. 独立的 Toast 实例 */
.tt-toast-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--toast-theme-color, #7f4c15);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  pointer-events: auto; /* 恢复单体 Toast 的点击能力 */
  opacity: 0;
  /* 物理引擎过渡动画 */
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2),
    opacity 0.3s ease;
  will-change: transform, opacity;
}

/* 颜色变量映射 */
.tt-toast-type-success {
  --toast-theme-color: #525e31;
}
.tt-toast-type-info {
  --toast-theme-color: #7f4c15;
}
.tt-toast-type-warning {
  --toast-theme-color: #aa440f;
}
.tt-toast-type-error {
  --toast-theme-color: #aa440f;
}

/* 内部元素样式 */
.tt-toast-icon-wrap {
  width: 20px;
  height: 20px;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tt-toast-icon-wrap svg {
  width: 100%;
  height: 100%;
}
.tt-toast-msg {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}
.tt-toast-close-btn {
  cursor: pointer;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 5px;
  opacity: 0.6;
  transition: 0.2s;
  user-select: none;
  flex-shrink: 0;
}
.tt-toast-close-btn:hover {
  opacity: 1;
}

/* 专门针对 WooCommerce Undo 链接美化 */
.tt-toast-msg a.restore-item {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.tt-toast-msg a.restore-item:hover {
  color: #f0f0f0;
}

/* 进度条 */
.tt-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
}
.tt-toast-progress-bar {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  transform-origin: left;
}