/* widgets/main/toast/toast.css
 *
 * Canonical CSS for .kp-toast* (toast notifications).
 *
 * Single source of truth для toast styles. Consolidates four previous copies:
 *   - style.css L2592 + L3654 (two parallel blocks!)
 *   - modules/quests/quests.css (quests-style toast)
 *   - modules/arena/arena.css "fallback" copy (40+ рядків з warm-earth hardcoded values)
 *
 * v1.1.1.874 cleanup: видалено всі дублікати з тих файлів.
 * arena.css зберіг тільки arena-specific tier modifiers (.kp-toast--arena-ach.kp-toast--tier-*).
 *
 * JS consumers: public/themes/default/js/script.js (showToast()),
 *               public/themes/default/modules/quests/quests.js (achievement toasts).
 */

/* ─── Container ──────────────────────────────────────────────────── */
.kp-toast-container {
  position: fixed;
  top: calc(var(--k-header-height, 60px) + 16px);
  right: 16px;
  z-index: var(--k-z-toast, 800);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}

/* ─── Toast base ─────────────────────────────────────────────────── */
.kp-toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-card);
  border: 1px solid var(--k-border-default);
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-floating);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  animation: kp-toast-in 0.28s var(--k-ease-spring) both;
}

/* Slide-in transition variants used by JS (.show / .hide) */
.kp-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.kp-toast.hide {
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Exit animation triggered when toast is dismissed */
.kp-toast--exiting {
  animation: kp-toast-out 0.3s ease forwards;
}

/* ─── Sub-elements (icon, body, title, desc, reward) ─────────────── */
.kp-toast__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
  filter: drop-shadow(0 0 6px currentColor);
}

.kp-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kp-toast__title {
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-bold);
  line-height: 1.25;
  color: var(--k-text-primary);
}

.kp-toast__text,
.kp-toast__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--k-text-secondary);
}

.kp-toast__reward {
  font-size: 12px;
  color: var(--k-yellow);
  font-weight: var(--k-weight-bold);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ─── Status modifiers (success/warning/danger/error/info) ───────── */
.kp-toast--success { border-color: color-mix(in srgb, var(--k-green) 40%, var(--k-border-default)); }
.kp-toast--warning { border-color: color-mix(in srgb, var(--k-yellow) 40%, var(--k-border-default)); }
.kp-toast--danger,
.kp-toast--error   { border-color: color-mix(in srgb, var(--k-red) 40%, var(--k-border-default)); }
.kp-toast--info    { border-color: color-mix(in srgb, var(--k-cyan) 40%, var(--k-border-default)); }

/* ─── Auto-dismiss progress bar ──────────────────────────────────── */
.kp-toast__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--k-primary);
  animation: kp-toast-progress 4.5s linear forwards;
}

/* ─── Animations ─────────────────────────────────────────────────── */
@keyframes kp-toast-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes kp-toast-out {
  to { opacity: 0; transform: translate3d(0, -8px, 0) scale(.97); }
}

@keyframes kp-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ─── Mobile responsiveness ──────────────────────────────────────── */
@media (max-width: 720px) {
  .kp-toast {
    border-radius: var(--k-radius-lg);
    padding: 12px 14px;
  }
  .kp-toast-container {
    top: calc(var(--k-header-height, 60px) + 10px);
    right: 10px;
    left: 10px;
    width: auto;
  }
}