.customer-header-actions { display: flex; align-items: center; gap: 9px; }
.customer-header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.23); border-radius: 10px; color: #e8f5ef; background: rgba(255,255,255,.06); cursor: pointer; list-style: none; transition: background .2s, border-color .2s; }
.customer-header-icon::-webkit-details-marker { display: none; }
.customer-header-icon:hover, .customer-notifications[open] > summary { background: rgba(95,187,148,.18); border-color: #5fbb94; }
.customer-header-icon svg { width: 19px; height: 19px; }
.customer-notifications { position: relative; }
.customer-notification-count { position: absolute; inset-block-start: -6px; inset-inline-end: -5px; min-width: 18px; height: 18px; padding-inline: 4px; display: grid; place-items: center; border: 2px solid #333859; border-radius: 20px; background: #83d3af; color: #14163d; font: 700 10px/1 sans-serif; }
.customer-notification-panel { position: absolute; z-index: 101; inset-block-start: calc(100% + 16px); inset-inline-end: 0; width: 355px; max-width: calc(100vw - 32px); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(25,30,61,.93); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); box-shadow: 0 20px 60px rgba(6,10,30,.28); color: #edf2f8; font-family: var(--font-body-en, sans-serif); text-align: start; animation: notification-enter .22s cubic-bezier(.22,1,.36,1); }
html[dir="rtl"] .customer-notification-panel { font-family: var(--font-body-ar, sans-serif); }
.customer-notification-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-block-end: 1px solid rgba(255,255,255,.1); }
.customer-notification-heading h2, html[dir="rtl"] .customer-notification-heading h2 { margin: 0; max-width: none; font-family: inherit; font-size: .95rem; line-height: 1.5; font-weight: 600; letter-spacing: 0; text-transform: none; }
.customer-notification-heading > span { color: #b9c3d5; font-size: .68rem; white-space: nowrap; }
.customer-notification-items { max-height: min(390px, calc(100dvh - 260px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.customer-notification-item { display: flex; gap: 12px; padding: 17px 20px; border-block-end: 1px solid rgba(255,255,255,.07); }
.customer-notification-item:last-child { border-block-end: 0; }
.customer-notification-item.is-unread { background: rgba(95,187,148,.07); }
.customer-notification-dot { flex-shrink: 0; width: 6px; height: 6px; margin-block-start: 8px; border-radius: 50%; background: #626c86; }
.is-unread .customer-notification-dot { background: #81d5ae; box-shadow: 0 0 0 4px rgba(95,187,148,.1); }
.customer-notification-item > div { min-width: 0; }
.customer-notification-item p { margin: 0 0 6px; color: #e0e6f0; font-size: .81rem; line-height: 1.8; overflow-wrap: anywhere; }
.customer-notification-item time { display: block; color: #a1acc4; font-size: .68rem; }
.customer-notification-item form { margin-block-start: 8px; }
.customer-notification-item button { padding: 0; border: 0; background: none; font-family: inherit; font-size: .7rem; color: #93dbba; cursor: pointer; }
.customer-notification-item button:hover { text-decoration: underline; }
.customer-notification-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-block-start: 1px solid rgba(255,255,255,.1); color: #9ce1c0; font-size: .78rem; font-weight: 600; }
.customer-notification-all:hover { background: rgba(255,255,255,.04); }
.customer-notification-empty { display: grid; justify-items: center; gap: 16px; padding: 36px 20px; text-align: center; color: #bcc5d8; font-size: .8rem; }
.customer-notification-empty svg { width: 28px; height: 28px; color: #83c9aa; }
.customer-notification-empty p { margin: 0; }
#header .customer-header-icon { border-color: rgba(44,48,122,.2); color: #2c307a; }
@keyframes notification-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    .customer-header-actions { gap: 7px; }
    .customer-header-icon { width: 34px; height: 36px; }
    .customer-notification-panel { position: fixed; inset-block-start: 84px; inset-inline: 16px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .customer-notification-panel { animation: none; } }