/* KioskTrx toast notifications (bottom-right, stacked, auto-dismiss) */

.kiosk-toasts {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: min(390px, calc(100vw - 40px));
  pointer-events: none;
}

.kiosk-toast {
  --toast-ink: #232222;
  --toast-strong: #232222;
  --toast-soft: #d6ff89;
  --toast-tint: #fbfff3;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 14px 20px 16px;
  border: 2.5px solid var(--toast-ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, var(--toast-tint) 100%);
  color: var(--toast-ink);
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  box-shadow: 5px 5px 0 var(--toast-ink), 0 18px 36px rgba(35, 34, 34, 0.16);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: bottom right;
  animation: kioskToastIn 0.5s cubic-bezier(0.2, 1.25, 0.4, 1) backwards;
  transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease, opacity 0.25s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.kiosk-toast:hover {
  box-shadow: 7px 7px 0 var(--toast-ink), 0 22px 40px rgba(35, 34, 34, 0.18);
}

.kiosk-toast + .kiosk-toast {
  margin-top: 14px;
}

.kiosk-toast--error {
  --toast-strong: #9e0b00;
  --toast-soft: #ffdbdf;
  --toast-tint: #fff6f7;
}

.kiosk-toast--warning {
  --toast-strong: #8a5300;
  --toast-soft: #ffe7a8;
  --toast-tint: #fffbf0;
}

.kiosk-toast--info {
  --toast-strong: #0b4f9e;
  --toast-soft: #d9ebff;
  --toast-tint: #f6faff;
}

.kiosk-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--toast-ink);
  border-radius: 4px;
  background: var(--toast-soft);
  color: var(--toast-strong);
  animation: kioskToastIconPop 0.5s 0.18s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}

.kiosk-toast--success .kiosk-toast__icon {
  color: var(--toast-ink);
}

.kiosk-toast__icon svg {
  width: 22px;
  height: 22px;
}

.kiosk-toast__body {
  min-width: 0;
  padding-top: 1px;
}

.kiosk-toast__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--toast-strong);
}

.kiosk-toast--success .kiosk-toast__title {
  color: var(--toast-ink);
}

.kiosk-toast__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.1px;
  color: #4a4848;
  overflow-wrap: anywhere;
}

.kiosk-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -3px -2px 0 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #5e5e5e;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kiosk-toast__close:hover,
.kiosk-toast__close:focus-visible {
  border-color: var(--toast-ink);
  background: #d6ff89;
  color: var(--toast-ink);
  outline: none;
}

.kiosk-toast__close:active {
  transform: scale(0.92);
}

.kiosk-toast__close svg {
  width: 14px;
  height: 14px;
}

.kiosk-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: var(--toast-strong);
  transform-origin: left center;
  animation: kioskToastProgress linear forwards;
}

.kiosk-toast--success .kiosk-toast__progress {
  background: linear-gradient(90deg, #232222 0%, #4d5a2e 100%);
}

.kiosk-toast:hover .kiosk-toast__progress,
.kiosk-toast:focus-within .kiosk-toast__progress {
  animation-play-state: paused;
}

.kiosk-toast.is-bumped {
  animation: kioskToastBump 0.45s ease;
}

.kiosk-toast.is-leaving {
  max-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transform: translateX(calc(100% + 40px)) rotate(2deg);
  pointer-events: none;
  animation: none;
}

@keyframes kioskToastIn {
  0% {
    opacity: 0;
    transform: translateX(calc(100% + 40px)) rotate(3deg);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes kioskToastIconPop {
  from {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes kioskToastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes kioskToastBump {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@media (max-width: 560px) {
  .kiosk-toasts {
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: auto;
    align-items: stretch;
  }

  .kiosk-toast {
    box-shadow: 4px 4px 0 var(--toast-ink), 0 14px 28px rgba(35, 34, 34, 0.16);
    transform-origin: bottom center;
    animation-name: kioskToastInUp;
  }

  .kiosk-toast.is-leaving {
    transform: translateY(28px);
  }

  @keyframes kioskToastInUp {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-toast,
  .kiosk-toast.is-bumped {
    animation: kioskToastFade 0.2s ease backwards;
  }

  .kiosk-toast__icon {
    animation: none;
  }

  .kiosk-toast.is-leaving {
    transform: none;
  }

  @keyframes kioskToastFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}