.awareness-dropdown-meta {
	font-family: "Kalameh", "Dana", sans-serif;
	direction: rtl;
	unicode-bidi: plaintext;
	font-feature-settings: "locl" 1;
}

/* If the element carries Persian language context, keep localized forms active */
:lang(fa) .awareness-dropdown-meta {
	font-feature-settings: "locl" 1;
}

@font-face {
	font-family: "Dana";
	src: url("../Fonts/Dana/Dana-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Kalameh font (Regular 400 and Medium 500) */
@font-face {
	font-family: "Kalameh";
	src: url("../Fonts/Kalameh/Kalameh-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Kalameh";
	src: url("../Fonts/Kalameh/Kalameh-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Use Dana for titles/headings */
h1, h2, h3, h4, h5, h6,
.notification-title,
.awareness-title {
	font-family: "Dana", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 500;
}
:root{--awareness-bell-color:#333333;--awareness-badge-bg:#ff4444;--awareness-badge-text:#ffffff;--awareness-hover-scale:1.1;--awareness-transition:all .3s ease;--awareness-alert-red:#ff1a1a}
.awareness-notification-wrapper{display:inline-block;position:relative}
.awareness-bell-link{position:relative;display:inline;align-items:center;justify-content:center;height:40px;line-height:1;text-decoration:none;padding-inline:10px;color:var(--wd-header-el-color, inherit)}
/* Ensure image icon sizes and transitions apply */
.awareness-bell-link .awareness-bell-icon{width:1.1em;height:auto;transition:var(--awareness-transition);padding:0.3em 0}
/* Hover effects for image icon */
.awareness-bell-link:hover .awareness-bell-icon{opacity:.85}
@font-face{font-family:'Dana';src:url('../Fonts/Dana/Dana-Bold.woff2') format('woff2'), url('../Fonts/Dana/Dana-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
.awareness-dropdown-footer{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px;border-top:1px solid rgba(0,0,0,.1)}
.awareness-dropdown .awareness-footer-link{display:inline-block;padding:10px 16px;background:#393c61;color:#ffffff !important;border-radius:999px;text-decoration:none;font-family:'Dana', sans-serif !important;font-weight:500;font-size:12px;line-height:1.4;transition:background .2s ease}
.awareness-dropdown .awareness-footer-link:hover{background:#6100ff;color:#ffffff !important}
.awareness-dropdown-footer{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:15px 0px 5px 20px;border-top:1px solid rgba(0,0,0,.1);}
.awareness-footer-link{font-family:'Kalameh', sans-serif;font-size:16px;line-height:1.6;color:inherit;text-decoration:none;}
.awareness-footer-link:hover{text-decoration:none}
.awareness-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:var(--awareness-badge-bg);color:var(--awareness-badge-text);border-radius:9px;font-size:12px;line-height:18px;text-align:center;transition:var(--awareness-transition)}
@keyframes awareness-badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.awareness-badge{animation:awareness-badge-pulse .8s ease}

/* Bell shake with pause, loops: 1s shake, 2s rest */
@keyframes awareness-bell-shake-loop{
	0%{transform:rotate(0deg)}
	5%{transform:rotate(10deg)}
	10%{transform:rotate(-10deg)}
	15%{transform:rotate(8deg)}
	20%{transform:rotate(-8deg)}
	25%{transform:rotate(6deg)}
	30%{transform:rotate(-6deg)}
	35%{transform:rotate(4deg)}
	40%{transform:rotate(-4deg)}
	45%{transform:rotate(2deg)}
	50%{transform:rotate(0deg)}
	/* Pause from 50% to 100% */
	100%{transform:rotate(0deg)}
}

/* When recent level-3 alerts exist: animate image bell */
.awareness-alert-high-recent .awareness-bell-link .awareness-bell-icon{transform-origin:50% 0; animation:awareness-bell-shake-loop 3s ease-in-out infinite}
@media (min-width:768px) and (max-width:1024px){.awareness-bell-link .awareness-bell-icon{width:1.1em;padding:0.3em 0}}
@media (min-width:1025px){.awareness-bell-link .awareness-bell-icon{width:1.1em;padding:0.3em 0}}

/* Dropdown styles */
.awareness-dropdown{position:absolute;top:calc(100% + 6px);right:0;left:auto;transform:none;min-width:280px;max-width:360px;width:max-content;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.10);padding:10px;display:none;z-index:9999;max-inline-size:calc(100vw - 20px);margin-inline:10px;overflow-wrap:anywhere}
.awareness-dropdown-header{font-family:'Kalameh', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; font-weight:500;font-size:16px;color:#111827;padding:6px 8px 10px 8px;border-bottom:1px solid rgba(0,0,0,.1)}
.awareness-dropdown-list{list-style:none;margin:0;padding:0;max-height:320px; overflow:auto; -webkit-overflow-scrolling:touch}
.awareness-dropdown-item{display:block;padding:0;border-bottom:none;}
.awareness-dropdown-row{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px 8px;border-bottom:1px solid #f3f4f6;width:100%;text-decoration:none;color:inherit;border-radius:0px;min-height:50px;transition:background .15s ease}
.awareness-dropdown-row:hover{background:#f7f8ff}
.awareness-dropdown-item:last-child .awareness-dropdown-row{border-bottom:none}
.awareness-dropdown-link{font-size:14px;font-weight:500;color:#111827;flex:1}
.awareness-dropdown-row:hover .awareness-dropdown-link{color:#6100ff}
.awareness-dropdown-meta{font-size:12px;color:#6b7280;white-space:nowrap;margin-left:8px}
.awareness-dropdown-empty{padding:12px 8px;font-size:16px;color:#6b7280; font-family: 'Dana', sans-serif !important;font-weight:500;}
.awareness-notification-wrapper:hover .awareness-dropdown{display:block}
.awareness-notification-wrapper.awareness-open .awareness-dropdown{display:block}

/* Responsive: keep dropdown inside viewport on small screens */
@media (max-width: 640px) {
	.awareness-notification-wrapper{position:static}
	.awareness-bell-link{height:44px;padding-inline:12px}
	.awareness-bell-link .awareness-bell-icon{width:1.1em;padding:0.3em 0}


	/* Disable hover-triggered dropdown on mobile to avoid flicker,
	   but keep it visible when explicitly opened */
	.awareness-notification-wrapper:hover:not(.awareness-open) .awareness-dropdown{display:none !important}

	/* Make dropdown a bottom sheet style on mobile */
	.awareness-dropdown{
		position:fixed;
		left:0; right:0; bottom:0; top:auto;
		max-width:100vw; min-width:100vw; width:100vw;
		border-radius:16px 16px 0 0;
		margin:0; padding:12px;
		box-shadow:0 -8px 24px rgba(0,0,0,.12);
		max-height:65vh; display:none; flex-direction:column; overflow:hidden; z-index:10001;
	}

	/* Backdrop to dim page when dropdown is open */
	.awareness-notification-wrapper.awareness-open::before{
		content:"";
		position:fixed;
		inset:0;
		background:rgba(0,0,0,.35);
		z-index:10000;
		pointer-events:none; /* do not block scroll/touch on dropdown */
	}

	/* When open, render as flex bottom sheet */
	.awareness-notification-wrapper.awareness-open .awareness-dropdown{display:flex}

	.awareness-dropdown-header{font-size:15px;padding:10px 12px}
	.awareness-dropdown-list{max-height:100%; flex:1; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y}
	.awareness-dropdown-row{padding:12px; align-items:baseline}
	.awareness-dropdown-row:hover{background:#f7f8ff}
	.awareness-dropdown-link{font-size:15px}
	.awareness-dropdown-meta{font-size:12px}
	.awareness-dropdown-footer{padding:10px 0 0 0;border-top:1px solid rgba(0,0,0,.08)}
	.awareness-dropdown .awareness-footer-link{font-size:13px;padding:10px 14px}

	/* Badge position adjust for smaller touch area */
	.awareness-badge{top:-2px; right:-2px}
}

/* Extra-small phones: tighten spacing */
@media (max-width: 380px) {
	.awareness-dropdown-item{gap:6px}
	.awareness-dropdown-link{font-size:14px}
}

/* Loading spinner styles */
.awareness-dropdown-loading {
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.awareness-loading-placeholder {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px 16px !important;
	border: none !important;
	font-family: 'Kalameh', sans-serif;
	font-size: 14px;
	color: #6b7280;
}

.awareness-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #f3f4f6;
	border-top-color: #393c61;
	border-radius: 50%;
	animation: awareness-spin 0.8s linear infinite;
}

@keyframes awareness-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Hide loading placeholder after content is loaded */
.awareness-dropdown-list:not(.awareness-dropdown-loading) .awareness-loading-placeholder {
	display: none !important;
}

/* Error state */
.awareness-dropdown-error {
	padding: 16px 12px !important;
	text-align: center;
	color: #dc2626;
	font-family: 'Kalameh', sans-serif;
	font-size: 13px;
	border: none !important;
}

/* List spacing variables and application */
:is(ul, ol) {
	--list-mb: 20px;
	--li-mb: 0px; /* requested change */
	--li-pl: 17px;
	margin-bottom: var(--list-mb);
	padding-right: var(--li-pl);
}
:is(ul, ol) > li {
	margin-bottom: var(--li-mb);
}