/* User area sidebar — loaded only in _user_html_head.php (user templates).
   Scoped: every rule under .user-sidebar except the documented structural
   wrappers (.wrapper > .menu-box / .wrapper > .main-container). */
/* widen the user sidebar column so Bulgarian labels aren't squeezed
   (legacy: 200px box + padding left ~98px of text room) */
.wrapper > .menu-box {
	box-sizing: border-box;
	margin-right: 24px;
	width: 272px;
}
.wrapper > .main-container {
	box-sizing: border-box;
	width: calc(100% - 296px);
}

.user-sidebar {
	--us-primary: #009ee0;
	--us-primary-dark: #0284c7;
	--us-ink: #0f172a;
	--us-muted: #64748b;
	--us-border: #e2e8f0;
	--us-surface: #ffffff;

	background: var(--us-surface);
	background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
	border: 1px solid var(--us-border);
	border-radius: 18px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	box-sizing: border-box;
	padding: 16px;
}

/* ---------- head ---------- */
.user-sidebar .us-head {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--us-border);
}
.user-sidebar .us-head-icon {
	align-items: center;
	background: rgba(0, 158, 224, .12);
	border-radius: 12px;
	color: var(--us-primary-dark);
	display: inline-flex;
	font-size: 15px;
	height: 36px;
	justify-content: center;
	width: 36px;
	flex: 0 0 36px;
}
.user-sidebar .us-head-text { min-width: 0; }
.user-sidebar .us-head-title {
	color: var(--us-ink);
	display: block;
	font-size: 14px;
	font-weight: 700;
}
.user-sidebar .us-head-caption {
	color: var(--us-muted);
	display: block;
	font-size: 12px;
	line-height: 1.5;
	margin-top: 1px;
}

/* ---------- nav pills ---------- */
.user-sidebar .us-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.user-sidebar .us-nav li {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
/* override legacy .menu-box a / .menu-box a.active via higher specificity */
.wrapper > .menu-box .user-sidebar .us-nav a {
	align-items: center;
	background: transparent;
	border-radius: 12px;
	color: var(--us-ink);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	margin-bottom: 0;
	min-height: 52px;
	padding: 12px;
	position: relative;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.user-sidebar .us-nav a .menu-txt {
	display: inline;
	flex: 1;
	font-weight: 500;
	line-height: 1.5;
	min-width: 0;
	overflow-wrap: break-word;
	white-space: normal;
}
.wrapper > .menu-box .user-sidebar .us-nav a:hover {
	background: #f0f7fb;
	color: var(--us-primary-dark);
}
.wrapper > .menu-box .user-sidebar .us-nav a:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 158, 224, .3);
	outline: none;
}
.user-sidebar .us-ico {
	align-items: center;
	background: #f1f5f9;
	border-radius: 10px;
	color: var(--us-muted);
	display: inline-flex;
	flex: 0 0 32px;
	font-size: 13px;
	height: 32px;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
	width: 32px;
}
/* active state: pale blue tint + left indicator */
.wrapper > .menu-box .user-sidebar .us-nav a.active {
	background: rgba(0, 158, 224, .10);
	color: var(--us-primary-dark);
}
.user-sidebar .us-nav a.active::before {
	background: var(--us-primary);
	border-radius: 999px;
	content: '';
	height: 22px;
	left: -4px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
}
.user-sidebar .us-nav a.active .us-ico {
	background: var(--us-primary);
	color: #fff;
}

/* ---------- CTA ---------- */
.wrapper > .menu-box .user-sidebar .us-cta {
	align-items: center;
	background: rgba(0, 158, 224, .12);
	border-radius: 12px;
	color: var(--us-primary-dark);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	justify-content: flex-start;
	margin-bottom: 0;
	margin-top: 12px;
	min-height: 52px;
	padding: 12px;
	text-decoration: none;
	transition: background .15s ease;
}
.user-sidebar .us-cta .menu-txt {
	display: inline;
	flex: 1;
	font-weight: 600;
	line-height: 1.5;
	min-width: 0;
	overflow-wrap: break-word;
	white-space: normal;
}
.wrapper > .menu-box .user-sidebar .us-cta:hover {
	background: var(--us-primary);
	color: #fff;
}
.wrapper > .menu-box .user-sidebar .us-cta:hover .us-ico {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}
.wrapper > .menu-box .user-sidebar .us-cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 158, 224, .3);
	outline: none;
}
.user-sidebar .us-cta .us-ico {
	background: var(--us-primary);
	color: #fff;
}
.wrapper > .menu-box .user-sidebar .us-cta.active {
	background: var(--us-primary);
	color: #fff;
}
.user-sidebar .us-cta.active .us-ico {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* ---------- responsive ----------
   Stack the sidebar above content at 1100px (earlier than the legacy
   960px icon-only breakpoint) and restore labeled pills; Bulgarian
   labels need full text, not icons, on narrow laptops. These rules
   come after the desktop sibling overrides above and match their
   specificity so they win under 1100px. */
@media only screen and (max-width: 1100px) {
	.wrapper > .menu-box {
		float: none;
		margin-bottom: 20px;
		margin-right: 0;
		width: 100%;
	}
	.wrapper > .main-container {
		float: none;
		padding: 0;
		width: 100%;
	}
	.menu-box .menu-txt { display: inline; }

	.user-sidebar .us-nav {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	.user-sidebar .us-nav li { margin-bottom: 0; }
	.user-sidebar .us-head { padding-bottom: 12px; }
	.wrapper > .menu-box .user-sidebar .us-cta { width: 100%; box-sizing: border-box; }
}

@media only screen and (max-width: 720px) {
	.user-sidebar .us-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wrapper > .menu-box .user-sidebar .us-nav a { padding: 10px; }
}

@media only screen and (max-width: 420px) {
	.user-sidebar .us-nav { grid-template-columns: 1fr; }
	.user-sidebar .us-head-caption { display: none; }
}