/* ==========================================================================
   Underdog — Notifications
   Base styles only. Everything here is overridable from the Elementor Style
   tab, which outputs higher-specificity rules scoped to the element wrapper.
   Colours read the portal theme variables first and fall back to the
   PurKratom palette.
   ========================================================================== */

.us-nt {
	--us-nt-hot: var(--hot, #c8256b);
	--us-nt-accent: var(--accent, #e8a33d);
	--us-nt-leaf: #57c79a;
	--us-nt-deep: var(--brand-deep, #2a1650);
	--us-nt-mono: var(--f-mono, "JetBrains Mono", ui-monospace, "Courier New", monospace);

	position: relative;
	display: block;
	max-width: 100%;
}

.us-nt *,
.us-nt *::before,
.us-nt *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Trigger
   -------------------------------------------------------------------------- */
.us-nt .us-nt__trigger-wrap {
	display: flex;
}

/* The trigger lays its icon, label and badge out with flex. Some themes set
   display on every button with !important, which would collapse that, so this
   one property is defended. Everything else about the trigger stays
   overridable from the Style tab. */
.us-nt .us-nt__trigger {
	display: inline-flex !important;
}

.us-nt--trigger-left .us-nt__trigger-wrap {
	justify-content: flex-start;
}

.us-nt--trigger-center .us-nt__trigger-wrap {
	justify-content: center;
}

.us-nt--trigger-right .us-nt__trigger-wrap {
	justify-content: flex-end;
}

.us-nt .us-nt__trigger {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	min-height: 0;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 100px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	transition: background .16s, border-color .16s, color .16s;
}

.us-nt .us-nt__trigger:hover {
	background: rgba(255, 255, 255, .16);
}

.us-nt .us-nt__trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	line-height: 0;
}

.us-nt .us-nt__trigger-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

.us-nt .us-nt__trigger-icon i {
	font-size: 18px;
	line-height: 1;
}

.us-nt .us-nt__trigger-label {
	white-space: nowrap;
}

/* Badge sits inline by default, or pinned to the corner of the trigger. */
.us-nt .us-nt__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 2px 7px;
	border-radius: 100px;
	background: var(--us-nt-hot);
	color: #fff;
	font-family: var(--us-nt-mono);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.us-nt--badge-pinned .us-nt__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	box-shadow: 0 0 0 2px var(--us-nt-deep);
}

.us-nt .us-nt__badge.is-empty {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */
.us-nt .us-nt__panel {
	background: #23153f;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 12px;
	padding: 16px 18px 18px;
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .6);
	min-width: 0;
}

.us-nt .us-nt__panel[hidden] {
	display: none !important;
}

/* Dropdown mode — floats over the page, anchored to the trigger. */
.us-nt--dropdown .us-nt__panel {
	position: absolute;
	z-index: 90;
	top: calc(100% + 10px);
	width: 380px;
	max-width: calc(100vw - 32px);
}

.us-nt--dropdown.us-nt--panel-left .us-nt__panel {
	left: 0;
}

.us-nt--dropdown.us-nt--panel-right .us-nt__panel {
	right: 0;
}

.us-nt--dropdown.us-nt--panel-center .us-nt__panel {
	left: 50%;
	transform: translateX(-50%);
}

/* Inline mode — expands in the flow and pushes content down. */
.us-nt--inline .us-nt__panel,
.us-nt--static .us-nt__panel {
	position: static;
	width: 100%;
	margin-top: 10px;
}

.us-nt--static .us-nt__panel {
	margin-top: 0;
}

/* Backdrop is only used by the mobile sheet. */
.us-nt .us-nt__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 89;
	background: rgba(10, 6, 20, .55);
}

/* Deliberately !important. This element is fixed and covers the whole
   viewport, so a stray theme rule making it visible takes the entire page
   down with it. The hidden attribute is the single source of truth. */
.us-nt .us-nt__backdrop[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   3. Panel header
   -------------------------------------------------------------------------- */
.us-nt .us-nt__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.us-nt .us-nt__title {
	font-family: var(--us-nt-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	margin: 0;
	min-width: 0;
}

.us-nt .us-nt__count {
	flex: none;
	font-family: var(--us-nt-mono);
	font-size: 10px;
	font-weight: 600;
	background: var(--us-nt-hot);
	color: #fff;
	border-radius: 100px;
	padding: 2px 8px;
	white-space: nowrap;
}

.us-nt .us-nt__count.is-empty {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Feed
   -------------------------------------------------------------------------- */
.us-nt .us-nt__feed {
	margin: 12px 0 0;
	padding: 0 8px 0 0;
	list-style: none;
	display: grid;
	gap: 13px;
	overflow-y: auto;
	max-height: 260px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.us-nt .us-nt__feed::-webkit-scrollbar {
	width: 5px;
}

.us-nt .us-nt__feed::-webkit-scrollbar-track {
	background: transparent;
}

.us-nt .us-nt__feed::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .28);
	border-radius: 9px;
}

/* --------------------------------------------------------------------------
   5. Notification item
   -------------------------------------------------------------------------- */
.us-nt .us-nt__item {
	border-left: 3px solid rgba(255, 255, 255, .22);
	padding: 0 0 0 11px;
	margin: 0;
	min-width: 0;
}

.us-nt .us-nt__item.is-urgent {
	border-left-color: var(--us-nt-hot);
}

.us-nt .us-nt__item.is-action {
	border-left-color: var(--us-nt-accent);
}

.us-nt .us-nt__item.is-done {
	border-left-color: var(--us-nt-leaf);
}

.us-nt .us-nt__tag {
	display: inline-block;
	font-family: var(--us-nt-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.us-nt .us-nt__item.is-urgent .us-nt__tag {
	color: #ff7fb2;
}

.us-nt .us-nt__item.is-action .us-nt__tag {
	color: var(--us-nt-accent);
}

.us-nt .us-nt__item.is-done .us-nt__tag {
	color: var(--us-nt-leaf);
}

.us-nt .us-nt__body {
	font-size: 13px;
	line-height: 1.45;
	margin: 2px 0 0;
	color: rgba(255, 255, 255, .93);
	overflow-wrap: anywhere;
}

.us-nt .us-nt__body a {
	color: #fff;
	text-underline-offset: 2px;
}

.us-nt .us-nt__time {
	font-family: var(--us-nt-mono);
	font-size: 10px;
	color: rgba(255, 255, 255, .45);
	margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   6. Footer link
   -------------------------------------------------------------------------- */
.us-nt .us-nt__foot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--us-nt-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	padding-bottom: 2px;
}

.us-nt .us-nt__foot:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   7. Empty state
   -------------------------------------------------------------------------- */
.us-nt .us-nt__empty {
	margin: 12px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   8. Motion
   -------------------------------------------------------------------------- */
.us-nt--dropdown .us-nt__panel,
.us-nt--inline .us-nt__panel {
	animation: us-nt-in .18s ease-out;
}

@keyframes us-nt-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.us-nt--dropdown.us-nt--panel-center .us-nt__panel {
	animation: us-nt-in-center .18s ease-out;
}

@keyframes us-nt-in-center {
	from {
		opacity: 0;
		transform: translate(-50%, -6px);
	}
}

/* --------------------------------------------------------------------------
   9. Responsive — the dropdown becomes a bottom sheet on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.us-nt--dropdown.is-open .us-nt__backdrop:not([hidden]) {
		display: block;
	}

	/* The sheet is pinned to the viewport edges, so it overrides the panel
	   width and anchor settings from the Style tab. Those are desktop
	   concerns; on a phone the sheet geometry is not negotiable. */
	.us-nt--dropdown .us-nt__panel,
	.us-nt--dropdown.us-nt--panel-left .us-nt__panel,
	.us-nt--dropdown.us-nt--panel-center .us-nt__panel,
	.us-nt--dropdown.us-nt--panel-right .us-nt__panel {
		position: fixed !important;
		z-index: 90;
		top: auto !important;
		right: 12px !important;
		bottom: 12px !important;
		left: 12px !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		max-height: 76vh;
		flex-direction: column;
		border-radius: 14px;
		animation: us-nt-sheet .22s ease-out;
	}

	/* Only the open sheet becomes a flex column. Applying display to the
	   closed panel here would outrank [hidden] and leave it on screen. */
	.us-nt--dropdown .us-nt__panel:not([hidden]) {
		display: flex;
	}

	.us-nt--dropdown .us-nt__panel .us-nt__feed {
		max-height: none;
		flex: 1 1 auto;
	}

	@keyframes us-nt-sheet {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

.us-nt .us-nt__trigger-label {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
.us-nt .us-nt__panel {
		animation: none !important;
	}

.us-nt .us-nt__trigger {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   10. Accessibility floor
   -------------------------------------------------------------------------- */

.us-nt :focus-visible {
	outline: 3px solid var(--us-nt-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.us-nt .us-nt__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}