/* Buyer toast — Phase 1.3 styling.
 * Pulls from landing/shopsmart-tokens.css for colors. Visual mirrors the
 * cart-drawer undo toast. */

#ss-toast-root {
  position: fixed;
  inset: auto 0 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 9999;
}

.ss-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px;
  background: var(--navy, #0c1c33);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}

.ss-toast.ss-toast-in {
  transform: translateY(0);
  opacity: 1;
}

.ss-toast.ss-toast-leaving {
  transform: translateY(8px);
  opacity: 0;
}

/* Success used to be a flat green (#0f6b3d), off the ShopSmart palette.
   It now keeps the brand navy every other toast has, and the tick turns the
   light brand blue so a success still reads differently from a plain
   notice (#9BBAFF on the navy is about 8:1). */
.ss-toast-success { /* default navy */ }
.ss-toast-error   { background: #a8242b; }
.ss-toast-info    { /* default navy */ }

.ss-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
}

.ss-toast-action {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ss-toast-action:hover { background: rgba(255, 255, 255, 0.26); }

.ss-toast-close {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.7;
}
.ss-toast-close:hover { opacity: 1; }

@media (max-width: 600px) {
  #ss-toast-root { inset: auto 12px 16px 12px; }
  .ss-toast { width: 100%; max-width: none; }
}

/* SHOPS-INTERN-69: two other stylesheets also style .ss-toast, unscoped.
   ss-foundation.css made every toast position:fixed and centred it with
   left:50% + translate, which pulled it out of #ss-toast-root and its 12px
   phone insets, so with width:100% above it ran edge to edge. And
   shopsmart-tokens.css added a 3px left border plus a green "✓" in the same
   green as the success background, so the tick was invisible and the left
   edge looked padded wrong. The id outranks all three, so toasts rendered by
   buyer-toast.js keep this file's look; other .ss-toast users are untouched. */
#ss-toast-root .ss-toast {
  position: relative;
  left: auto;
  bottom: auto;
  translate: none;
  z-index: auto;
  border: 0;
  animation: none;
}
#ss-toast-root .ss-toast::before { color: #fff; }
#ss-toast-root .ss-toast-success::before { color: #9BBAFF; }

/* Dark theme sets --navy to #FFFFFF, and ss-theme-dark.css gives toasts their
   dark fill back for every kind EXCEPT success and error (those used to bring
   their own colour). Success is navy now, so give it the same fill here,
   or it would be white text on white. */
html[data-theme="dark"] #ss-toast-root .ss-toast-success { background: var(--ssd-fill-deep, #1A3B7A); }

/* The same foundation rule had been lifting the toast clear of the phone
   bottom nav; do that for the root instead now the toast sits inside it. */
@media (max-width: 767.98px) {
  html:not(.embedded) body.has-bottomnav #ss-toast-root {
    bottom: calc(var(--ss-bottomnav-h, 56px) + 12px + env(safe-area-inset-bottom, 0px));
  }
}

/* SHOPS-INTERN-30: above 600 each toast was only as wide as its own text, so
   two shown together ("Removed from wishlist" 242px over "Added to wishlist"
   212px) had different widths and the wider one stuck out past the other.
   The root now sizes to the widest toast, still centred above the bottom, and
   every toast stretches to it; a shared minimum keeps the short messages one
   width even when they come one at a time. The kind icon (shopsmart-tokens.css
   ::before, "i" narrower than the tick) gets one width too, so the messages
   start at the same x. Phones are full width already and are left as they are. */
@media (min-width: 601px) {
  #ss-toast-root {
    left: 0; right: 0; margin-inline: auto;
    width: -webkit-fit-content; width: fit-content;
    align-items: stretch;
  }
  #ss-toast-root .ss-toast { box-sizing: border-box; min-width: 288px; }
  #ss-toast-root .ss-toast::before { width: 1.1em; text-align: center; }
}