/**
 * DROPEEGO - What's New
 */

/* =========================================================
   DESKTOP SECONDARY MENU
   ========================================================= */

#secondary-navigation #menu-item-17806 {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Existing "Whats New!" link */
#secondary-navigation #menu-item-17806 > a {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding-right: 0 !important;
}

/* Desktop trigger */
#secondary-navigation #menu-item-17806 > .dropeego-whats-new-trigger {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	cursor: pointer !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

/* =========================================================
   BELL
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-bell,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #f5773e !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	outline: none !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-bell:hover,
#secondary-navigation #menu-item-17806 .dropeego-whats-new-bell:focus,
#secondary-navigation #menu-item-17806 .dropeego-whats-new-bell:active,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:hover,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:focus,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:active {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #f5773e !important;
	outline: none !important;
	box-shadow: none !important;
}

/* SVG bell */
.dropeego-whats-new-bell svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

/* =========================================================
   NOTIFICATION COUNT
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-count,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-count {
	position: absolute !important;
	top: -5px !important;
	right: -5px !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #f5773e !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	box-shadow: none !important;
}

/* =========================================================
   NOTIFICATION PANEL
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-panel,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-panel {
	position: absolute !important;
	top: calc(100% + 10px) !important;
	right: 0 !important;
	z-index: 99999 !important;
	width: 340px !important;
	max-width: calc(100vw - 30px) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid rgba(55, 88, 109, 0.15) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
	overflow: hidden !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-panel[hidden],
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-panel[hidden] {
	display: none !important;
}

/* =========================================================
   PANEL HEADER
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-panel-header,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-panel-header {
	margin: 0 !important;
	padding: 14px 16px !important;
	background: #37586D !important;
	color: #ffffff !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
}

/* =========================================================
   NOTIFICATION LIST
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-list,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-list {
	max-height: 400px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto !important;
}

/* =========================================================
   NOTIFICATION ITEM
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(55, 88, 109, 0.10) !important;
	background: #ffffff !important;
	cursor: default !important;
	transition: background-color 0.2s ease !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item:last-child,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item:last-child {
	border-bottom: 0 !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item:hover,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item:hover {
	background: rgba(55, 88, 109, 0.05) !important;
}

/* =========================================================
   NOTIFICATION CONTENT
   ========================================================= */

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item-title,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item-title {
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
	color: #37586D !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item-content,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item-content {
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	color: #555555 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item-date,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item-date {
	margin: 0 !important;
	padding: 0 !important;
	color: #999999 !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
}

/* Notification link */
#secondary-navigation #menu-item-17806 .dropeego-whats-new-item-link,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item-link {
	display: inline-block !important;
	margin-top: 8px !important;
	color: #f5773e !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

#secondary-navigation #menu-item-17806 .dropeego-whats-new-item-link:hover,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-item-link:hover {
	color: #37586D !important;
	text-decoration: underline !important;
}

/* Empty state */
#secondary-navigation #menu-item-17806 .dropeego-whats-new-empty,
#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-empty {
	padding: 20px 16px !important;
	color: #777777 !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	/* Actual mobile Whats New menu item */
	#menu-mobile-menu #menu-item-19275 {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Whats New link */
	#menu-mobile-menu #menu-item-19275 > a {
		display: inline-flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Bell trigger - exactly 2px from Whats New */
	#menu-mobile-menu #menu-item-19275 > .dropeego-whats-new-trigger {
		position: relative !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 28px !important;
		width: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		height: 28px !important;
		min-height: 28px !important;
		max-height: 28px !important;
		margin: 0 0 0 2px !important;
		padding: 0 !important;
		gap: 0 !important;
		cursor: pointer !important;
		line-height: 1 !important;
	}

	/* Flat mobile bell */
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		flex: 0 0 28px !important;
		width: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		height: 28px !important;
		min-height: 28px !important;
		max-height: 28px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #f5773e !important;
		font-size: 0 !important;
		line-height: 1 !important;
		box-shadow: none !important;
		outline: none !important;
	}

	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:hover,
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:focus,
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell:active {
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #f5773e !important;
		outline: none !important;
		box-shadow: none !important;
	}

	/* Mobile SVG */
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-bell svg {
		display: block !important;
		width: 20px !important;
		height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		fill: none !important;
		stroke: currentColor !important;
		stroke-width: 2 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
	}

	/* Count belongs to the bell trigger */
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-count {
		top: -4px !important;
		right: -4px !important;
		min-width: 15px !important;
		height: 15px !important;
		padding: 0 3px !important;
		font-size: 9px !important;
		line-height: 15px !important;
	}

	/* Mobile panel */
	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-panel {
		position: fixed !important;
		top: 70px !important;
		right: 15px !important;
		left: 15px !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 90px) !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		border: 1px solid rgba(55, 88, 109, 0.15) !important;
		border-radius: 12px !important;
		box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18) !important;
		overflow: hidden !important;
	}

	#menu-mobile-menu #menu-item-19275 .dropeego-whats-new-panel[hidden] {
		display: none !important;
	}
}