/* MagicDiagram header bell (Nov 4, 2026). Markup from engine/modules/md_site.php, logic in js/md-bell.js, data from
   /md-news.php. MagicDiagram's colours: pink #F63A69, magenta #B91EAB. The button is a fixed 44 px square from the first
   paint and the badge is absolute, so loading the count never moves the header. */
.md-bell {position: relative; flex: 0 0 auto; width: 44px; height: 44px; align-self: center; margin-right: 6px;}
.md-bell__btn {display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px;
	margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: #444; cursor: pointer; box-shadow: none;
	-webkit-tap-highlight-color: transparent;}
.md-bell__btn:hover, .md-bell__btn[aria-expanded="true"] {background: #fbeaf3; color: #B91EAB;}
.md-bell__btn:focus {outline: none;}
.md-bell__btn:focus-visible {outline: 2px solid #B91EAB; outline-offset: 2px;}
.md-bell__btn svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.md-bell__badge {position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	border-radius: 9px; border: 2px solid #fff; background: #F63A69; color: #fff; font: 700 11px/14px "Open Sans", Arial, sans-serif;
	text-align: center; letter-spacing: 0;}
.md-bell__badge[hidden] {display: none;}

.md-bell__panel {position: absolute; top: calc(100% + 8px); right: -6px; z-index: 1100; width: 380px; max-height: min(560px, 75vh);
	display: flex; flex-direction: column; background: #fff; border: 1px solid #f1d4e6; border-radius: 14px;
	box-shadow: 0 12px 32px rgba(60, 20, 55, .14); text-align: left; overflow: hidden;}
.md-bell__panel[hidden] {display: none;}
.md-bell__head {display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 10px 18px;
	border-bottom: 1px solid #f3e6ee; background: linear-gradient(135deg, #fff2f6 0%, #f8eefb 100%);}
.md-bell__title {font: 700 16px/1.3 "Open Sans", Arial, sans-serif; color: #2b2b30;}
.md-bell__close {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0;
	border-radius: 8px; background: none; color: #7a7f88; cursor: pointer; box-shadow: none;}
.md-bell__close:hover {background: #fbeaf3; color: #B91EAB;}
.md-bell__close svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;}
.md-bell__list {overflow-y: auto; overscroll-behavior: contain; padding: 6px 0;}
.md-bell__item {display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 18px;
	color: #2b2b30 !important; text-decoration: none !important;}
.md-bell__item:hover {background: #fdf6fa;}
.md-bell__item + .md-bell__item {border-top: 1px solid #f6eef3;}
.md-bell__media {width: 56px; height: 42px; border-radius: 8px; overflow: hidden; background: #fbeaf3;
	display: flex; align-items: center; justify-content: center; color: #B91EAB;}
.md-bell__media img {display: block; width: 100%; height: 100%; object-fit: cover;}
.md-bell__media svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.md-bell__t {display: block; font: 600 15px/1.35 "Open Sans", Arial, sans-serif; color: #2b2b30;}
.md-bell__x {display: block; margin-top: 3px; font: 400 13.5px/1.5 "Open Sans", Arial, sans-serif; color: #6b6f78;}
.md-bell__d {display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 500 12.5px/1.3 "Open Sans", Arial, sans-serif; color: #8a8f98;}
.md-bell__item--new .md-bell__d::before {content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F63A69;}
.md-bell__empty {padding: 28px 18px; font: 400 14px/1.5 "Open Sans", Arial, sans-serif; color: #6b6f78;}
.md-bell__shade {display: none;}

/* phone bar: the bell sits left of the menu button; the panel is a full width sheet from the top */
.md-bell-col {display: flex; justify-content: flex-end; padding-right: 0;}
.md-bell-col .md-bell {margin-right: 0;}
@media (max-width: 767px) {
.md-bell__panel {position: fixed; top: 0; left: 0; right: 0; width: auto; max-height: 85vh; border: 0; border-radius: 0 0 16px 16px;
	box-shadow: 0 16px 40px rgba(60, 20, 55, .2); z-index: 2147483647;}
.md-bell__head {padding: 12px 8px 10px 20px;}
.md-bell__close {width: 44px; height: 44px;}
.md-bell__item {padding: 14px 20px;}
.md-bell__shade {display: block; position: fixed; inset: 0; z-index: 2147483646; background: rgba(30, 20, 30, .35);}
.md-bell__shade[hidden] {display: none;}
}