/* MOBIN Notif — frontend styles (RTL-safe via logical properties) */

.mobin-notif-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	margin-inline: var(--mobin-bell-spacing, 8px);
}

.mobin-notif-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	margin: 0;
	padding: 6px;
	cursor: pointer;
	color: var(--mobin-bell-color, currentColor);
	line-height: 0;
}

.mobin-notif-bell-icon {
	display: block;
	transform-origin: 50% 0;
}

/* Only the bell icon shakes — the counter badge must stay put.
   Duration/keyframes are generated inline (see build_shake_css()) from the
   admin's shake/pause settings, so no static @keyframes rule lives here. */
.mobin-notif-bell.is-shaking .mobin-notif-bell-icon {
	animation-name: mobin-notif-shake;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.mobin-notif-badge {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--mobin-badge-bg, #e5342b);
	color: var(--mobin-badge-text, #fff);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 600;
}

.mobin-notif-badge[hidden] {
	display: none;
}

/* Always position:fixed (both mobile and desktop) and placed via JS
   (positionPanel() sets top/right from the bell's live getBoundingClientRect).
   This deliberately avoids position:absolute, which a theme's own nav/header
   wrapper can clip via `overflow: hidden` — fixed positioning escapes that.
   The outer box must NOT clip its own overflow either, otherwise the
   ::before caret (which sits above the box) gets cut off; scrolling happens
   inside .mobin-notif-panel-list instead. */
.mobin-notif-panel {
	position: fixed;
	width: 340px;
	max-width: calc(100vw - 20px);
	background: var(--mobin-panel-bg, #fff);
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
	z-index: 9999;
	direction: rtl;
	text-align: right;
	font-size: 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Vertical-only movement, deliberately no scale()/transform-origin: a
	   scale-based shrink kept visually drifting toward a corner whenever the
	   panel wasn't perfectly centered on the bell. A plain translateY always
	   moves straight up/down regardless of that. */
	transform: translateY(-10px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.mobin-notif-panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Small caret pointing back at the bell; its horizontal offset is computed
   in JS (positionPanel()) since the panel's own position is dynamic now. */
.mobin-notif-panel::before {
	content: "";
	position: absolute;
	top: -6px;
	right: var(--mobin-caret-offset, 14px);
	width: 12px;
	height: 12px;
	background: var(--mobin-panel-bg, #fff);
	transform: rotate(45deg);
}

.mobin-notif-panel-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--mobin-panel-bg, #fff);
	border-radius: 8px 8px 0 0;
}

.mobin-notif-panel-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #000;
	font-weight: 700;
	font-size: 16px;
}

.mobin-notif-title-icon {
	flex: none;
	color: #8c8f94;
}

.mobin-notif-mark-all {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
}

.mobin-notif-mark-all:hover {
	opacity: 1;
}

.mobin-notif-panel-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobin-notif-panel-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 18px;
	color: inherit;
	cursor: pointer;
}

.mobin-notif-panel-close:hover {
	background: rgba(0, 0, 0, 0.04);
}

.mobin-notif-panel-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	border-radius: 0 0 8px 8px;
}

.mobin-notif-empty {
	padding: 24px 16px;
	text-align: center;
	opacity: 0.6;
}

/* Each notification is its own bordered card so the gap set by the item
   spacing setting reads as visible separation, not just inner padding. */
.mobin-notif-item {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: 8px 12px;
}

.mobin-notif-item-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mobin-notif-item-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: inherit;
	cursor: pointer;
}

.mobin-notif-item-title > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobin-notif-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mobin-badge-bg, #e5342b);
	flex: none;
}

.mobin-notif-dot[hidden] {
	display: none;
}

.mobin-notif-item-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	font-size: 18px;
}

.mobin-notif-item-toggle:hover {
	opacity: 1;
}

.mobin-notif-item-toggle .fl-icon {
	display: inline-block;
	transition: transform 0.15s ease;
}

.mobin-notif-item-toggle[aria-expanded="true"] .fl-icon {
	transform: rotate(180deg);
}

.mobin-notif-item-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobin-notif-item-body.is-open {
	grid-template-rows: 1fr;
}

/* Cascading reveal: the box unfolds first, then the content fades/slides
   down into place a beat later, and reverses the same way on close (both
   directions transition every property — including margin-top — so nothing
   snaps instantly). */
.mobin-notif-item-body-inner {
	overflow: hidden;
	min-height: 0;
	line-height: 1.7;
	overflow-wrap: break-word;
	margin-top: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
}

.mobin-notif-item-body.is-open .mobin-notif-item-body-inner {
	margin-top: 8px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.25s ease 0.08s, transform 0.25s ease 0.08s, margin-top 0.2s ease;
}

@media (max-width: 768px) {
	.mobin-notif-panel {
		width: auto;
		max-width: none;
		/* A visible gap from both screen edges so the panel reads as a
		   floating bubble, not a full-bleed slab that's part of the page. */
		inset-inline: 12px;
	}

	.mobin-notif-panel-list {
		max-height: calc(100vh - 160px);
	}
}