/* Offline checkout overlay. Intentionally plain and theme-agnostic: it appears
   only when the connection is gone, so it must render correctly without having
   loaded anything the theme would normally provide. */
#nmbc-offline-checkout { position: fixed; inset: 0; z-index: 2147483000; display: flex;
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 16px; }
#nmbc-offline-checkout .nmbc-oc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); }
#nmbc-offline-checkout .nmbc-oc-panel { position: relative; width: 100%; max-width: 480px;
  background: #fff; color: #1a1a1a; border-radius: 12px; padding: 24px;
  box-shadow: 0 12px 48px rgba(0,0,0,.3); font: 15px/1.5 system-ui, -apple-system, sans-serif; }
#nmbc-offline-checkout h2 { margin: 0 0 8px; font-size: 20px; }
#nmbc-offline-checkout .nmbc-oc-note { margin: 0 0 16px; font-size: 13px; color: #555; }
#nmbc-offline-checkout .nmbc-oc-summary { margin-bottom: 16px; padding: 10px 12px;
  background: #f4f4f5; border-radius: 8px; font-size: 14px; }
#nmbc-offline-checkout .nmbc-oc-f { display: block; margin-bottom: 12px; }
#nmbc-offline-checkout .nmbc-oc-f span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
#nmbc-offline-checkout .nmbc-oc-f input,
#nmbc-offline-checkout .nmbc-oc-f select { width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid #c9c9cf; border-radius: 8px; font-size: 15px; background: #fff; color: inherit; }
#nmbc-offline-checkout .nmbc-oc-actions { display: flex; gap: 10px; margin-top: 18px; }
#nmbc-offline-checkout .nmbc-oc-actions button { flex: 1; padding: 11px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
#nmbc-offline-checkout .nmbc-oc-cancel { background: #fff; border-color: #c9c9cf; color: #1a1a1a; }
#nmbc-offline-checkout .nmbc-oc-submit { background: #1a1a1a; color: #fff; }
#nmbc-offline-checkout .nmbc-oc-submit:disabled { opacity: .5; cursor: default; }
#nmbc-offline-checkout .nmbc-oc-result:not(:empty) { margin-top: 14px; padding: 10px 12px;
  background: #eef6ee; border-radius: 8px; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  #nmbc-offline-checkout .nmbc-oc-panel { background: #1c1c1e; color: #f2f2f2; }
  #nmbc-offline-checkout .nmbc-oc-note { color: #a8a8ad; }
  #nmbc-offline-checkout .nmbc-oc-summary { background: #2a2a2e; }
  #nmbc-offline-checkout .nmbc-oc-f input,
  #nmbc-offline-checkout .nmbc-oc-f select { background: #2a2a2e; border-color: #444; color: #f2f2f2; }
  #nmbc-offline-checkout .nmbc-oc-cancel { background: #2a2a2e; border-color: #444; color: #f2f2f2; }
  #nmbc-offline-checkout .nmbc-oc-submit { background: #f2f2f2; color: #1a1a1a; }
  #nmbc-offline-checkout .nmbc-oc-result:not(:empty) { background: #23342a; }
}

/* The pending-order banner. Deliberately hard to miss and not dismissible: it is
   the only thing standing between "the customer thinks they ordered" and "the
   store never hears about it". Fixed to the bottom so it survives any theme
   header, and above everything else on the page. */
#nmbc-offline-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #8a4b00; color: #fff; box-shadow: 0 -2px 16px rgba(0,0,0,.25);
  font: 14px/1.45 system-ui, -apple-system, sans-serif; }
#nmbc-offline-banner .nmbc-ob-dot { flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #ffc46b; box-shadow: 0 0 0 0 rgba(255,196,107,.7); animation: nmbc-ob-pulse 2s infinite; }
#nmbc-offline-banner .nmbc-ob-text { flex: 1; }
@keyframes nmbc-ob-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,196,107,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(255,196,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,196,107,0); }
}
@media (prefers-reduced-motion: reduce) {
  #nmbc-offline-banner .nmbc-ob-dot { animation: none; }
}

/* The counterpart: a short confirmation so the banner disappearing is something
   the customer notices, rather than something they have to infer. */
#nmbc-offline-sent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000;
  padding: 12px 16px; background: #14532d; color: #fff;
  box-shadow: 0 -2px 16px rgba(0,0,0,.25);
  font: 14px/1.45 system-ui, -apple-system, sans-serif; }

@media (min-width: 640px) {
  #nmbc-offline-banner, #nmbc-offline-sent { left: auto; right: 16px; bottom: 16px;
    max-width: 420px; border-radius: 10px; }
}