/* ==========================================================================
   Blood Bank > Profile Manager — front-end page-chrome styling for the
   existing "প্রোফাইল" / Profile page (`/profile` route,
   assets/js/views/profile.js). Loaded AFTER assets/css/app.css and
   assets/css/profile.css.

   Every rule here is scoped under `.bbb-pm-*` classes (or modifier
   classes on the EXISTING `.acct-avatar-wrap` / `.donor-avatar`
   elements) that assets/js/views/profile.js only ever adds when Blood
   Bank > Profile Manager settings say to. Nothing in this file fires
   unless that JS adds the class/element, so the page's existing look
   is unaffected until an admin changes a setting.
   ========================================================================== */

.bbb-pm-header-banner {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 14px;
	background-size: cover;
	background-position: center;
}

.bbb-pm-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 14px;
}

/* Avatar shape overrides — the existing default is a 92px circle with a
   3px --surface-raised border (see .acct-avatar-wrap / .donor-avatar in
   profile.css). These only ever apply when Profile Manager's Avatar
   Style tab is not left at its defaults. */
.acct-avatar-wrap.bbb-pm-avatar-rounded_square,
.acct-avatar-wrap.bbb-pm-avatar-rounded_square .donor-avatar,
.acct-avatar-wrap.bbb-pm-avatar-rounded_square .acct-avatar-edit {
	border-radius: 18px;
}

.acct-avatar-wrap.bbb-pm-avatar-square,
.acct-avatar-wrap.bbb-pm-avatar-square .donor-avatar,
.acct-avatar-wrap.bbb-pm-avatar-square .acct-avatar-edit {
	border-radius: 4px;
}

.acct-avatar-wrap.bbb-pm-avatar-noborder .donor-avatar {
	border: none;
}

.bbb-pm-menu-list {
	margin: 4px 0 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bbb-pm-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var( --surface-raised );
	border-radius: 12px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
}

.bbb-pm-menu-item i {
	color: var( --accent );
	width: 18px;
	text-align: center;
}

#bbb-view.bbb-pm-bg-solid,
#bbb-view.bbb-pm-bg-image {
	background: var( --bbb-pm-bg, transparent );
}

#bbb-view.bbb-pm-bg-image {
	background-size: cover;
	background-position: center;
}