/* JMP Toast: notifiche acquisti. Variabili impostate da toast.js con i valori del pannello. */
.jmp-toast {
  --jt-accent: #e00000;
  --jt-bottom: 24px;
  --jt-bottom-mobile: 16px;
  --jt-mobile-gap: 88px;
  --jt-side: 24px;
  --jt-text: #1a1a1a;
  --jt-muted: #707070;
  --jt-verified: #1d7f60;
  --jt-shift: 24px;

  position: fixed;
  bottom: calc(var(--jt-bottom) + env(safe-area-inset-bottom));
  z-index: 899; /* sotto il pannello WhatsApp (900) */
  width: min(380px, calc(100vw - 2 * var(--jt-side)));
  font-family: var(--ff-primary, inherit);
  color: var(--jt-text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--jt-shift));
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jmp-toast[hidden] {
  display: none;
}

.jmp-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.jmp-toast--bottom-left {
  left: max(var(--jt-side), env(safe-area-inset-left));
}

.jmp-toast--bottom-right {
  right: max(var(--jt-side), env(safe-area-inset-right));
}

.jmp-toast--bottom-center {
  left: 50%;
  translate: -50% 0;
}

/* Animazioni */
.jmp-toast--side.jmp-toast--bottom-left { transform: translateX(calc(-100% - var(--jt-side))); }
.jmp-toast--side.jmp-toast--bottom-right { transform: translateX(calc(100% + var(--jt-side))); }
.jmp-toast--side.jmp-toast--bottom-center { transform: translateY(var(--jt-shift)); }
.jmp-toast--fade { transform: none; }
.jmp-toast.is-visible { transform: none; }

.jmp-toast__card,
.jmp-toast__card:hover,
.jmp-toast__card:focus,
.jmp-toast__card:visited {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 36px 10px 10px;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 14%), 0 2px 6px rgb(0 0 0 / 6%);
  color: inherit;
  text-decoration: none;
}

.jmp-toast__card:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: 2px;
}

.jmp-toast__media {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f5f5;
}

.jmp-toast__media[hidden] {
  display: none;
}

.jmp-toast__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmp-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
}

.jmp-toast__who {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jmp-toast__name {
  color: var(--jt-accent);
  font-weight: 700;
}

.jmp-toast__country {
  margin-left: 4px;
  color: var(--jt-accent);
  opacity: 0.7;
  font-size: 13px;
}

.jmp-toast__country[hidden] {
  display: none;
}

.jmp-toast__what {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jmp-toast__product {
  font-weight: 600;
}

.jmp-toast__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: center;
  color: var(--jt-muted);
  font-size: 12px;
}

.jmp-toast__verified {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--jt-verified);
  font-weight: 600;
}

.jmp-toast__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--jt-muted);
  cursor: pointer;
}

.jmp-toast__close:hover,
.jmp-toast__close:focus-visible {
  background: #f1f1f1;
  color: var(--jt-text);
}

/* Mobile: compatto, lascia libero lo spazio della bolla WhatsApp a destra. */
@media (max-width: 767px) {
  .jmp-toast {
    --jt-side: 8px;
    --jt-shift: 16px;

    bottom: calc(var(--jt-bottom-mobile) + env(safe-area-inset-bottom));
    width: calc(100vw - 2 * var(--jt-side) - var(--jt-mobile-gap));
    max-width: 380px;
  }

  .jmp-toast--bottom-left,
  .jmp-toast--bottom-center {
    left: max(var(--jt-side), env(safe-area-inset-left));
    right: auto;
    translate: none;
  }

  .jmp-toast--bottom-right {
    right: calc(var(--jt-side) + var(--jt-mobile-gap));
  }

  .jmp-toast__card,
  .jmp-toast__card:hover,
  .jmp-toast__card:focus,
  .jmp-toast__card:visited {
    gap: 10px;
    padding: 8px 30px 8px 8px;
    border-radius: 12px;
  }

  .jmp-toast__media {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }

  .jmp-toast__body {
    font-size: 13px;
  }

  .jmp-toast__country {
    font-size: 12px;
  }

  .jmp-toast__meta {
    font-size: 11px;
  }

  .jmp-toast__close {
    top: 2px;
    right: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jmp-toast,
  .jmp-toast--side.jmp-toast--bottom-left,
  .jmp-toast--side.jmp-toast--bottom-right {
    transform: none;
    transition: opacity 0.2s linear;
  }
}