.notifications-body { margin: 0; min-height: 100vh; font-family: var(--site-font-body); color: var(--site-text); background: var(--site-bg); }
.notifications-body h1, .notifications-body h2 { font-family: var(--site-font-display); }
.notification-bell { position: relative; flex: 0 0 auto; color: var(--site-text); }
.notification-bell > summary { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 44px; min-height: 44px; padding: .5rem; border: 1px solid var(--site-border); border-radius: 50%; background: var(--site-surface-strong); cursor: pointer; list-style: none; }
.notification-bell > summary::-webkit-details-marker { display: none; }
.notification-bell svg { width: 20px; height: 20px; }
.notification-badge { font-size: .7rem; font-weight: 800; background: var(--site-accent); color: #171312; padding: .1rem .3rem; border-radius: 1rem; }
.notification-popover { position: absolute; right: 0; top: calc(100% + .5rem); width: min(340px, calc(100vw - 32px)); max-height: 65vh; overflow-y: auto; padding: 1rem; border: 1px solid var(--site-border); border-radius: 16px; background: var(--site-dialog-surface); box-shadow: var(--site-shadow); z-index: 110; }
.notification-popover p { margin: 0 0 .75rem; }
.notification-preview { list-style: none; padding: 0; margin: 0 0 .8rem; }
.notification-preview li { padding: .7rem 0; border-bottom: 1px solid var(--site-border); overflow-wrap: anywhere; }
.notification-preview a { color: var(--site-text); display: block; }
.notification-preview small { display: block; margin-top: .25rem; color: var(--site-muted); }
.notification-popover > a { color: var(--site-secondary); font-weight: 700; }
.notification-bell [hidden] { display: none; }
.notifications-page { max-width: 940px; margin: 0 auto; padding: 24px 20px 60px; color: var(--site-text); }
.notifications-heading, .notification-item { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; }
.notifications-heading h1 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 4vw, 2.2rem); }
.notifications-heading p, .notification-copy p { margin: 0; color: var(--site-muted); line-height: 1.5; }
.notifications-page button { padding: .6rem .85rem; border-radius: 10px; border: 1px solid var(--site-border); color: var(--site-text); background: var(--site-surface-strong); cursor: pointer; font: inherit; font-size: .85rem; }
.notifications-page button:disabled { opacity: .5; cursor: default; }
.notifications-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.notifications-filters a { color: var(--site-text); text-decoration: none; padding: .6rem .85rem; border: 1px solid var(--site-border); border-radius: 2rem; font-weight: 650; }
.notifications-filters a[aria-current] { background: var(--site-secondary-soft); border-color: var(--site-secondary); }
.notifications-filters span { font-size: .85em; margin-left: .3rem; }
.notifications-list { list-style: none; padding: 0; margin: 0; }
.notification-item { padding: 1.2rem; margin-bottom: .7rem; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-surface); }
.notification-item.is-unread { border-left: 3px solid var(--site-secondary); }
.notification-copy { min-width: 0; overflow-wrap: anywhere; }
.notification-copy h2 { font-size: 1rem; margin: .4rem 0; }
.notification-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--site-muted); font-size: .78rem; }
.notification-new { color: var(--site-secondary); font-weight: 700; }
.notification-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.notification-actions a { color: var(--site-secondary); font-weight: 700; font-size: .85rem; }
.notifications-note { color: var(--site-muted); font-size: .82rem; line-height: 1.6; margin-top: 1.4rem; }
.notifications-empty { padding: 2rem 1.2rem; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-surface); }
.notifications-empty h2 { font-size: 1.1rem; }
.notifications-empty p { color: var(--site-muted); line-height: 1.5; }
.notifications-page :focus-visible, .notification-bell :focus-visible { outline: 3px solid var(--site-secondary); outline-offset: 3px; }
.booking-review dl { display: grid; grid-template-columns: max-content 1fr; gap: .75rem 1rem; }
.booking-review dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 641px) and (max-width: 1040px) {
  .notification-popover { position: fixed; top: 86px; right: 12px; width: min(340px, calc(100% - 24px)); }
}
@media (max-width: 640px) {
  .site-header-inner:has(.notification-bell) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-header-inner:has(.notification-bell) .site-toggle-stack { grid-column: 1 / -1; justify-content: flex-end; }
  .notification-popover { position: fixed; top: 86px; right: 12px; width: min(340px, calc(100% - 24px)); }
  .notifications-heading, .notification-item { align-items: flex-start; flex-direction: column; gap: .85rem; }
  .notification-actions { justify-content: flex-start; }
  .booking-review dl { grid-template-columns: 1fr; gap: .4rem; }
  .booking-review dd { margin-bottom: .5rem; }
}
:root[data-display-mode="mobile"] .site-header-inner:has(.notification-bell) .site-toggle-stack { grid-column: 1 / -1; justify-content: flex-end; }
:root[data-display-mode="mobile"] .notification-popover { position: fixed; top: 86px; right: 12px; width: min(340px, calc(100% - 24px)); }