/* Header redesign — applies site-wide (header_part.phtml is shared across every page).
   Layout/structure follows the new mockup; every color/font reuses the site's existing tokens
   (see agent/modules/pending/header/new.md) — never the mockup's own palette.
   Brand red #e74c3c / hover #ec7063 / accent #df4a37, neutral bg #d7dcde, neutral text #667686,
   hover bg #f1f3f4, font Lato. */

header.header-v2 {
	text-align: left;
}
.header-v2-row {
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 32px;
	gap: 20px;
	box-sizing: border-box;
}
.header-v2-left {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}
.header-v2-left .menu {
	position: static;
}
.header-v2-left .logo {
	margin-top: 0;
}

/* Centered search bar */
.header-v2-center {
	flex: 1 1 auto;
	max-width: 620px;
	margin: 0 auto;
}
.header-v2-center .search {
	width: 100%;
}
.header-v2-center .event-search-form {
	position: relative;
	display: block;
}
.header-v2-center input[type="text"] {
	width: 100%;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 20px;
	background-color: #f1f3f4;
	padding: 0 44px 0 18px;
	font-family: Lato, sans-serif;
	font-size: 13px;
	color: #34495e;
	box-sizing: border-box;
	transition: border-color .15s, background-color .15s;
}
.header-v2-center input[type="text"]::placeholder {
	color: #667686;
}
.header-v2-center input[type="text"]:focus {
	outline: none;
	background-color: #fff;
	border-color: #df4a37;
}
.header-v2-center input[type="submit"] {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	background-image: url(../images/icon-search.png);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
}
.header-v2-center input[type="submit"]:hover {
	background-color: #f1f3f4;
}

/* Right-hand icon cluster: flex + explicit order neutralizes the legacy float:right stacking,
   so visual order no longer depends on template/DOM order. Target order (left → right):
   Activity(bell) → Message → Add "+" → Avatar/Login. */
header.header-v2 .usermenu {
	position: static;
	margin-left: auto;
	flex-shrink: 0;
}
header.header-v2 .usermenu > ul {
	display: flex;
	align-items: center;
	gap: 18px;
}
header.header-v2 .usermenu > ul > li {
	float: none;
	margin-left: 0;
}
header.header-v2 .usermenu > ul > li.event-activity { order: 1; }
header.header-v2 .usermenu > ul > li.event-message { order: 2; }
header.header-v2 .usermenu > ul > li.header-v2-add-item { order: 3; }
header.header-v2 .usermenu > ul > li.header-v2-avatar-item,
header.header-v2 .usermenu > ul > li.header-v2-login-item { order: 4; }

/* Activity / Message icons — restyle as plain circular icon buttons, badge in brand red */
header.header-v2 .usermenu .icon.icon-activity,
header.header-v2 .usermenu .icon.icon-privatemessage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #f1f3f4;
	background-image: none !important;
	color: #667686;
	overflow: visible;
	/* These widgets render visible label text ("Activity" / "Private messages") as their link's
	   raw text content — legacy hides it via text-indent:-50000px, which doesn't play well with
	   flex + this rule's overflow:visible (needed so the badge can peek past the circle's edge).
	   font-size:0 hides the raw text instead; .notifcircle re-declares its own font-size below so
	   the badge number stays visible. */
	font-size: 0;
}
header.header-v2 .usermenu .icon.icon-activity:before,
header.header-v2 .usermenu .icon.icon-privatemessage:before {
	font-family: inherit;
}
header.header-v2 .usermenu .icon.icon-activity:hover,
header.header-v2 .usermenu .icon.icon-privatemessage:hover {
	background-color: #e74c3c;
	color: #fff;
}
/* Bell / chat glyphs drawn with a tiny inline SVG background (no new sprite assets needed) */
header.header-v2 .usermenu .icon.icon-activity {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667686' stroke-width='2'%3E%3Cpath d='M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
header.header-v2 .usermenu .icon.icon-activity:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E") !important;
	background-size: 18px;
}
header.header-v2 .usermenu .icon.icon-privatemessage {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667686' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
header.header-v2 .usermenu .icon.icon-privatemessage:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E") !important;
	background-size: 18px;
}
header.header-v2 .notifcircle {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background-color: #e74c3c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Add "+" — filled circular brand-red button.
   NOTE: legacy `.usermenu > ul > li > a { display:block; height:60px; }` (main.css) outweighs a
   single-class selector's specificity — every override below is written to beat it explicitly
   (header.header-v2 .usermenu > ul > li... chain), not just to add new declarations. */
header.header-v2 .usermenu > ul > li.header-v2-add-item > a.header-v2-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #e74c3c;
	color: #fff;
	transition: background-color .15s;
}
header.header-v2 .usermenu > ul > li.header-v2-add-item > a.header-v2-add-btn:hover {
	background-color: #ec7063;
}

/* Avatar + chevron */
header.header-v2 .header-v2-avatar-item .member {
	display: flex;
	align-items: center;
	gap: 4px;
}
header.header-v2 .header-v2-avatar-item .event-avatar {
	width: 36px;
	height: 36px;
	margin-top: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.header-v2-chevron {
	color: #667686;
}

/* Logged-out state */
header.header-v2 .usermenu > ul > li.header-v2-login-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
header.header-v2 .usermenu > ul > li.header-v2-login-item > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	width: auto;
	text-indent: 0;
}

@media (max-width: 860px) {
	.header-v2-center { display: none; }
}