.new-order-alert {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 85;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  color: #111;
  background: #ffc400;
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .6);
  animation: new-order-pop .35s ease-out;
}

.new-order-alert[hidden] { display: none; }
.new-order-bell { font-size: 38px; animation: bell-ring .8s infinite; }
.new-order-alert p { margin: 0 0 3px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.new-order-alert strong,
.new-order-alert small { display: block; }
.new-order-alert small { margin-top: 4px; }
.new-order-alert .primary-button { width: auto; margin: 0; color: #fff; background: #111; white-space: nowrap; }

@keyframes new-order-pop {
  from { opacity: 0; transform: translateY(35px) scale(.96); }
}

@keyframes bell-ring {
  25% { transform: rotate(12deg); }
  75% { transform: rotate(-12deg); }
}

@media (max-width: 700px) {
  .new-order-alert { right: 16px; bottom: 16px; grid-template-columns: auto 1fr; }
  .new-order-alert .primary-button { grid-column: 1 / -1; width: 100%; }
}