/**
 * YayBoost Toast Manager (Sonner-style) styles.
 *
 * The manager (assets/js/toast-manager.js) owns positioning + stack transforms
 * inline; this file provides the corner containers, the shadcn-like card shell,
 * and the transition. Feature-specific inner markup keeps its own child styles;
 * feature-configured styling (e.g. the unlock notification's background color)
 * is applied inline by the feature and wins over the shell defaults.
 */

.yayboost-toast-stack {
  position: fixed;
  width: 356px;
  max-width: calc(100vw - 32px);
  /* Container itself must not block page clicks; only cards are interactive. */
  pointer-events: none;
  z-index: 1000000; /* above the modal lane (999999) so toasts (e.g. a popup's own form errors) stay visible over an open modal */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
}

.yayboost-toast-stack--bottom-right {
  right: 24px;
  bottom: 24px;
}

.yayboost-toast-stack--bottom-left {
  left: 24px;
  bottom: 24px;
}

.yayboost-toast-stack--bottom-center {
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}

.yayboost-toast-stack--top-right {
  right: 24px;
  top: 24px;
}

.yayboost-toast-stack--top-left {
  left: 24px;
  top: 24px;
}

.yayboost-toast-stack--top-center {
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
}

/* --- Card shell (shadcn / sonner) ---------------------------------------- */

.yayboost-toast {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  pointer-events: auto;
  transform-origin: center bottom;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  will-change: transform, opacity;

  /* shadcn "zinc" tokens + Sonner toast defaults */
  background: #ffffff;
  color: #18181b; /* zinc-900 foreground */
  border: 1px solid #e4e4e7; /* zinc-200 border */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sonner default */
  padding: 16px;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Top stacks anchor their cards to the top edge and grow downward (the JS sets
 * the matching +Y transforms), so the shell's bottom anchor must be flipped. */
.yayboost-toast-stack--top-right .yayboost-toast,
.yayboost-toast-stack--top-left .yayboost-toast,
.yayboost-toast-stack--top-center .yayboost-toast {
  top: 0;
  bottom: auto;
  transform-origin: center top;
}

/* Feature-specific card adaptations (e.g. the unlock notification's dark card
 * or the recent-purchase layout) live in each feature's own stylesheet, scoped
 * under `.yayboost-toast`, so this manager stays feature-agnostic. */

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 480px) {
  .yayboost-toast-stack {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .yayboost-toast-stack--bottom-center,
  .yayboost-toast-stack--top-center {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yayboost-toast {
    transition: opacity 0.2s ease;
  }
}