/* ==========================================================================
   No1 Princess — "ordering paused" toast (ordering-paused.js, inc/ordering.php)
   A dark card at the bottom centre of the screen, above the header and the
   cart drawer. Loaded on every page, including WooCommerce's own (which don't
   load home.css), so the brand colours and font have fallbacks.
   ========================================================================== */
.np-toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 10000;
  display: flex; align-items: flex-start; gap: 12px;
  width: min(460px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 16px 14px 16px 20px; border-radius: 14px;
  background: var(--c-dark, #1d1d1b); color: var(--c-cream, #f6f4f1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}
.np-toast.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .25s ease, transform .3s ease, visibility 0s;
}
.np-toast.is-nudge { animation: np-toast-nudge .4s ease; }
@keyframes np-toast-nudge {
  0%, 100% { transform: translate(-50%, 0); }
  25% { transform: translate(calc(-50% - 6px), 0); }
  75% { transform: translate(calc(-50% + 6px), 0); }
}
.np-toast__msg {
  flex: 1 1 auto; margin: 0;
  font-family: var(--font-body, "Avenir", "Mulish", "Nunito Sans", system-ui, sans-serif);
  font-size: 15px; font-weight: 500; line-height: 1.5; color: inherit; text-align: left;
}
/* scoped under the toast so the parent theme's button styles don't win */
.np-toast .np-toast__close {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin: -2px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  box-shadow: none; cursor: pointer; opacity: .75;
  transition: opacity .2s ease, background-color .2s ease;
}
.np-toast .np-toast__close:hover,
.np-toast .np-toast__close:focus-visible { opacity: 1; background: rgba(246, 244, 241, 0.12); color: inherit; }
.np-toast .np-toast__close svg { display: block; width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .np-toast, .np-toast.is-visible { transition: opacity .2s ease, visibility 0s; transform: translate(-50%, 0); }
  .np-toast.is-nudge { animation: none; }
}