/* ========================================
   overlay-toast-1.css   トースト通知
======================================== */

:root {
  --tst-radius: 10px;
}

/* ===== デモコンテナ上書き ===== */
.demo-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  max-width: 480px;
}

.tst-demo-desc {
  font-size: 13px;
  color: #5A6A7A;
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ===== トリガーボタン群 ===== */
.tst-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tst-trigger-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.tst-trigger-btn:active { transform: scale(0.97); }

.tst-trigger-btn--success { background: #DCFCE7; color: #166534; }
.tst-trigger-btn--error   { background: #FEE2E2; color: #991B1B; }
.tst-trigger-btn--info    { background: #DBEAFE; color: #1E40AF; }
.tst-trigger-btn--warn    { background: #FEF3C7; color: #92400E; }

.tst-trigger-btn:hover { opacity: 0.8; }

/* ===== トーストコンテナ（右上固定） ===== */
.tst-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 340px;
  width: calc(100vw - 40px);
}

/* ===== トースト本体 ===== */
.tst-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border-radius: var(--tst-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  border-left: 4px solid transparent;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  /* 初期状態（非表示） */
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tst-toast--show { opacity: 1; transform: translateX(0); }
.tst-toast--hide { opacity: 0; transform: translateX(20px); }

/* タイプ別アクセントカラー */
.tst-toast--success { border-left-color: #22C55E; }
.tst-toast--error   { border-left-color: #EF4444; }
.tst-toast--info    { border-left-color: #3B82F6; }
.tst-toast--warn    { border-left-color: #F59E0B; }

/* ===== アイコン ===== */
.tst-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.tst-toast--success .tst-icon { background: #DCFCE7; color: #16A34A; }
.tst-toast--error   .tst-icon { background: #FEE2E2; color: #DC2626; }
.tst-toast--info    .tst-icon { background: #DBEAFE; color: #2563EB; }
.tst-toast--warn    .tst-icon { background: #FEF3C7; color: #D97706; }

/* ===== テキスト ===== */
.tst-body { flex: 1; min-width: 0; }

.tst-title {
  font-size: 13px; font-weight: 700; color: #1A2332;
  margin: 0 0 2px; line-height: 1.4;
}

.tst-msg {
  font-size: 12px; color: #5A6A7A;
  margin: 0; line-height: 1.5;
}

/* ===== 閉じるボタン ===== */
.tst-close {
  width: 20px; height: 20px;
  background: none; border: none;
  font-size: 12px; color: #9AA5B4;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  font-family: sans-serif;
}

.tst-close:hover { color: #5A6A7A; background: #F1F5F9; }

/* ===== プログレスバー（3秒カウントダウン） ===== */
.tst-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  border-radius: 0 0 0 var(--tst-radius);
  animation: tst-countdown 3s linear forwards;
}

.tst-toast--success .tst-progress { background: #22C55E; }
.tst-toast--error   .tst-progress { background: #EF4444; }
.tst-toast--info    .tst-progress { background: #3B82F6; }
.tst-toast--warn    .tst-progress { background: #F59E0B; }

@keyframes tst-countdown {
  from { width: 100%; }
  to   { width: 0; }
}

/* ===== リセットボタン ===== */
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}

.reset-btn:hover {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

.demo-controls { margin-top: 20px; text-align: right; }

/* ===== スマホ対応 ===== */
@media (max-width: 480px) {
  .tst-btn-group { gap: 8px; }
  .tst-trigger-btn { padding: 9px 16px; font-size: 12px; }
}