.notification-widget { position:fixed; z-index:90; right:20px; bottom:20px; color:#252822; font-family:Arial,Helvetica,sans-serif; }
.notification-bell { position:relative; display:grid; place-items:center; width:52px; height:52px; border:1px solid #aab7a3; border-radius:50%; color:#3d593a; background:#fffefa; box-shadow:0 6px 24px #292d2626; cursor:pointer; }
.notification-bell svg {width:25px;height:25px}.notification-bell.is-ringing svg{animation:notification-ring .65s ease-in-out}
@keyframes notification-ring {0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
.notification-badge {position:absolute;right:-5px;top:-5px;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;border:2px solid #fffefa;border-radius:20px;background:#b73d32;color:#fff;font-size:11px;font-weight:bold;line-height:1}
.notification-panel {position:absolute;bottom:64px;right:0;width:min(365px,calc(100vw - 32px));max-height:min(65vh,550px);display:flex;flex-direction:column;border:1px solid #d7ddd1;border-radius:8px;background:#fffefa;box-shadow:0 16px 45px #292d2633;animation:notification-enter .24s ease both;overflow:hidden}
.notification-panel[hidden],.notification-toast[hidden],.notification-badge[hidden]{display:none!important}
.notification-panel-head {display:flex;justify-content:space-between;align-items:start;padding:20px 20px 12px}.notification-panel-head span{font-size:10px;letter-spacing:.1em;color:#617457;font-weight:bold}.notification-panel-head h2{font:26px/1.2 Georgia,serif;margin:4px 0 0}.notification-close{border:0;background:none;font-size:27px;line-height:1;cursor:pointer;color:#56684d}.notification-settings{display:flex;gap:12px;flex-wrap:wrap;padding:0 20px 12px;border-bottom:1px solid #e5e8df}.notification-settings button{padding:5px 0;border:0;background:none;color:#52694b;font-size:12px;text-decoration:underline;cursor:pointer}.notification-list{overflow:auto;padding:4px 20px 14px;overscroll-behavior:contain}.notification-list h3{margin:14px 0 4px;font:700 12px Arial;color:#71786d}.notification-item{display:grid;grid-template-columns:1fr auto 9px;gap:10px;align-items:center;min-height:58px;padding:8px 0;border-bottom:1px solid #efeee9;text-decoration:none;color:#252822;font-size:14px}.notification-item time{color:#6f716a;font-size:12px}.notification-dot,.order-unread{width:8px;height:8px;background:#b73d32;border-radius:50%;display:inline-block;transition:opacity .3s ease}.notification-empty{color:#6f716a;font-size:14px}.order-unread{margin-right:7px;vertical-align:middle}.order-unread.is-read{opacity:0}
.notification-toast{position:absolute;right:0;bottom:64px;width:min(325px,calc(100vw - 32px));padding:16px 18px;border:1px solid #d3decf;border-radius:7px;background:#f3f6ee;box-shadow:0 10px 34px #292d2624;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.notification-toast.is-visible{opacity:1;transform:translateY(0)}.notification-toast-title{display:block;font-size:14px;font-weight:bold}.notification-toast a{display:inline-block;margin-top:6px;color:#405c39;font-size:13px;font-weight:bold}.notification-panel:not([hidden])~.notification-bell{background:#e9efe4}.notification-panel:not([hidden])+.notification-bell{background:#e9efe4}.notification-widget:has(.notification-panel:not([hidden])) .notification-toast{display:none}
@keyframes notification-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:680px){.notification-widget{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}.notification-panel{max-height:min(70vh,560px)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .notification-widget *{animation:none!important;transition:none!important}}
html.motion-disabled .notification-widget *{animation:none!important;transition:none!important}

.notification-read-all[hidden] {display:none!important}

@media(hover:hover){.notification-bell:hover svg{animation:notification-ring .65s ease-in-out}}@media(prefers-reduced-motion:reduce){.notification-bell:hover svg,.notification-bell.is-ringing svg{animation:none!important}}html.motion-disabled .notification-bell:hover svg{animation:none}

.notification-inline-error{margin:8px 12px;padding:10px;border-radius:5px;background:#faeae8;color:#96372e;font-size:13px}

/* The chat and notification launchers travel together, while the panel stays accessible. */
.notification-bell { transition:transform .32s cubic-bezier(.2,.7,.2,1),background-color .25s ease,box-shadow .25s ease; }
body:has(.chat-widget.is-admin.is-open:not([hidden])) .notification-bell { transform:translateY(calc(-1 * (var(--open-chat-height, 0px) + 10px))); }
body:has(.chat-widget.is-admin.is-open:not([hidden])) .notification-panel { bottom:0; }
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .notification-bell{transition:none!important}}
html.motion-disabled .notification-bell{transition:none!important}

.notification-panel.is-closing{animation:notification-leave .24s ease both;pointer-events:none}@keyframes notification-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}