/**
 * GFS ROSTER — Ultimate Member Profile + Account Pages
 *
 * Styles both:
 *   - /user/{username}/ single member profile view (.um-profile)
 *   - /account/ logged-in account edit page (.um-account)
 *
 * Matches the design system: dark theme, amber accents, bracket-frame
 * containers, valid color tokens only.
 *
 * @package GFS_Roster
 */

/* ==========================================================================
   COMMON — wrappers
   ========================================================================== */

.um {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--base);
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 1rem;
}

.um a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.um a:hover {
	color: var(--wp--preset--color--warm-dark);
}

/* ==========================================================================
   SINGLE PROFILE — .um-profile
   ========================================================================== */

.um.um-profile {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(51, 74, 90, 0.15));
	padding: clamp(2rem, 4vw, 3rem);
	margin: 2rem auto;
	position: relative;
}

.um.um-profile::before,
.um.um-profile::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	pointer-events: none;
}

.um.um-profile::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--base);
	border-left: 1px solid var(--wp--preset--color--base);
}

.um.um-profile::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid var(--wp--preset--color--base);
	border-right: 1px solid var(--wp--preset--color--base);
}

/* Hide the WP page title on UM profile pages — UM renders its own header */
body.um-page-user h1.wp-block-post-title,
body.um-page-members.um-page-loggedin h1.wp-block-post-title {
	display: none !important;
}

/* Collapse the cover photo area when it's empty — saves vertical space */
.um.um-profile .um-header .um-cover[data-ratio]:not([data-ratio=""]) {
	min-height: 80px !important;
	max-height: 200px !important;
}

/* If admin and no cover photo is uploaded, hide the "add cover" placeholder for non-owners */
.um.um-profile .um-cover-e {
	min-height: 80px !important;
}

/* Cover photo area — flatten UM's light placeholder; keep dark theme */
.um.um-profile .um-cover {
	background: rgba(0, 0, 0, 0.3) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.um.um-profile .um-cover .um-cover-overlay {
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)) !important;
}

.um.um-profile .um-cover-add,
.um.um-profile .um-profile-photo-overlay {
	background: rgba(0, 0, 0, 0.6) !important;
	color: var(--wp--preset--color--base) !important;
}

.um.um-profile .um-cover-add a,
.um.um-profile .um-cover-add span,
.um.um-profile .um-profile-photo-overlay a {
	color: var(--wp--preset--color--base) !important;
}

.um.um-profile .um-cover-e {
	background: linear-gradient(135deg, rgba(102, 63, 24, 0.3), rgba(0, 0, 0, 0.6)) !important;
}

/* Profile photo block */
.um.um-profile .um-profile-photo {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	text-align: center;
	margin: 0 0 1.5rem !important;
}

.um.um-profile .um-profile-photo img {
	border: 2px solid var(--wp--preset--color--accent) !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Empty avatar placeholder (when no profile photo uploaded) */
.um.um-profile .um-profile-photo .um-avatar-default {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 2px solid var(--wp--preset--color--accent) !important;
}

/* Profile header (name + tagline) */
.um.um-profile .um-profile-meta {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	text-align: center;
	margin: 0 0 1.5rem !important;
}

.um.um-profile .um-profile-meta .um-name,
.um.um-profile .um-profile-meta h2.um-name {
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 4vw, 2.5rem) !important;
	font-weight: 600 !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.2 !important;
}

.um.um-profile .um-profile-meta .um-meta {
	color: var(--wp--preset--color--muted) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}

/* Our custom .gfs-profile-meta block — title, region, class year */
.gfs-profile-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0.5rem 0 1rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base);
}

.gfs-profile-meta__title {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.gfs-profile-meta__year {
	color: var(--wp--preset--color--muted);
}

/* Region badge — small uppercase chip */
.gfs-badge {
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Profile action bar (Edit Profile, Logout, etc.) */
.um.um-profile .um-profile-bar {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	margin: 0 0 2rem !important;
}

.um.um-profile .um-profile-edit-a,
.um.um-profile .um-profile-headericon a {
	color: var(--wp--preset--color--base) !important;
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--base) !important;
	border-radius: 0 !important;
	padding: 0.5rem 1.25rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin: 0 0.25rem !important;
	display: inline-block !important;
}

.um.um-profile .um-profile-edit-a:hover,
.um.um-profile .um-profile-headericon a:hover {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Profile nav (tabs: About / Posts / Comments) */
.um.um-profile .um-profile-nav {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
	padding: 0 !important;
	margin: 0 0 2rem !important;
}

.um.um-profile .um-profile-nav-item a {
	color: var(--wp--preset--color--muted) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0.85rem 1.25rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	position: relative !important;
}

/* Flex alignment scoped to the DESKTOP anchor only — UM renders a second
   mobile-only <a> (.uimob*-show) that must stay hidden on desktop. Using
   `display: inline-flex !important` on `a` would override UM's responsive
   `display: none` and duplicate every tab. */
.um.um-profile .um-profile-nav-item a.uimob800-hide,
.um.um-profile .um-profile-nav-item a.uimob500-hide,
.um.um-profile .um-profile-nav-item a.uimob340-hide {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1;
}

.um.um-profile .um-profile-nav-item a.uimob800-hide i,
.um.um-profile .um-profile-nav-item a.uimob500-hide i,
.um.um-profile .um-profile-nav-item a.uimob340-hide i {
	font-size: 1em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.um.um-profile .um-profile-nav-item a:hover {
	color: var(--wp--preset--color--base) !important;
}

.um.um-profile .um-profile-nav-item.active a,
.um.um-profile .um-profile-nav-item a.active {
	color: var(--wp--preset--color--base) !important;
}

.um.um-profile .um-profile-nav-item.active a::after,
.um.um-profile .um-profile-nav-item a.active::after {
	content: "" !important;
	position: absolute !important;
	left: 1rem !important;
	right: 1rem !important;
	bottom: -1px !important;
	height: 2px !important;
	background: var(--wp--preset--color--primary) !important;
}

/* Profile body — About tab fields, etc. */
.um.um-profile .um-profile-body {
	background: transparent !important;
	padding: 0 !important;
}

/* Edit mode: breathing room between .um-header's bottom rule and the first
   form field. Scoped to .um-editing — in view mode the tab nav (margin-bottom
   2rem) already provides this spacing. */
.um.um-profile.um-editing .um-profile-body {
	padding-top: 2.5rem !important;
}

/* =====================================================================
   About tab — injected by gfs_inject_profile_about_fields
   Sections: Bio, Details (title/region/year), Links & Portfolio
   ===================================================================== */

/* View mode: hide UM's native field rows (raw "CLASS YEAR / 2023" style
   output above the cards) — the designed About/Details/Links sections below
   present the same data. Our injected cards use .gfs-profile-* classes, not
   .um-field, so they are unaffected. */
.um.um-profile.um-viewing .um-form .um-field {
	display: none !important;
}

.gfs-profile-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 1.25rem 0 2rem;
	color: var(--wp--preset--color--base);
}

/* Bio reads best at full width; Details + Links pair up beside each other */
.gfs-profile-bio {
	grid-column: 1 / -1;
}

@media (max-width: 800px) {
	.gfs-profile-about {
		grid-template-columns: 1fr;
	}
}

/* Suppress UM's "profile is looking empty" note when we have content to inject. */
.um.um-profile .um-profile-body:has(.gfs-profile-about) .um-profile-note {
	display: none !important;
}

.gfs-profile-section {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 1.5rem 1.75rem;
}

.gfs-profile-section__title {
	margin: 0 0 1.1rem !important;
	font-family: var(--wp--preset--font-family--poppins) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--muted) !important;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bio — supports both plain text and rich HTML (when UM's
   "Allow HTML in user description" is enabled). Constrains the
   editor's inline styles so user content can't break the theme. */
.gfs-profile-bio__text {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.gfs-profile-bio__text p {
	margin: 0 0 0.9em;
	color: inherit;
}

.gfs-profile-bio__text p:last-child {
	margin-bottom: 0;
}

.gfs-profile-bio__text h1,
.gfs-profile-bio__text h2,
.gfs-profile-bio__text h3,
.gfs-profile-bio__text h4,
.gfs-profile-bio__text h5,
.gfs-profile-bio__text h6 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--base) !important;
	margin: 1.2em 0 0.5em !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gfs-profile-bio__text a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gfs-profile-bio__text a:hover,
.gfs-profile-bio__text a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.gfs-profile-bio__text ul,
.gfs-profile-bio__text ol {
	margin: 0 0 0.9em;
	padding-left: 1.4em;
}

.gfs-profile-bio__text li { margin: 0.2em 0; }

.gfs-profile-bio__text blockquote {
	margin: 0.8em 0;
	padding: 0.4em 0 0.4em 1em;
	border-left: 3px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

.gfs-profile-bio__text code {
	background: rgba(255, 255, 255, 0.08);
	padding: 0.1em 0.35em;
	border-radius: 3px;
	font-size: 0.92em;
}

.gfs-profile-bio__text img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 0.6em 0;
}

/* Neutralize editor-pasted inline colors/fonts that would clash with the theme. */
.gfs-profile-bio__text [style*="color"],
.gfs-profile-bio__text [style*="background"],
.gfs-profile-bio__text font[color] {
	color: inherit !important;
	background: transparent !important;
}

.gfs-profile-bio__text [style*="font-family"],
.gfs-profile-bio__text [style*="font-size"] {
	font-family: inherit !important;
	font-size: inherit !important;
}

/* Details — title / region / class year */
.gfs-profile-about-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem 2rem;
}

.gfs-profile-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.gfs-profile-field__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.gfs-profile-field__label i {
	color: var(--wp--preset--color--accent);
	font-size: 0.95em;
}

.gfs-profile-field__value {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

/* Links & Portfolio — social card grid */
.gfs-social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.75rem;
}

.gfs-social-list__item {
	margin: 0;
	padding: 0;
}

.gfs-social-link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.gfs-social-link:hover,
.gfs-social-link:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-1px);
}

.gfs-social-link__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	color: var(--wp--preset--color--accent);
	font-size: 1.1rem;
}

.gfs-social-link:hover .gfs-social-link__icon,
.gfs-social-link:focus-visible .gfs-social-link__icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.gfs-social-link__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.gfs-social-link__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.gfs-social-link__handle {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gfs-social-link__chevron {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	opacity: 0.6;
	font-size: 0.85rem;
}

.gfs-social-link:hover .gfs-social-link__chevron,
.gfs-social-link:focus-visible .gfs-social-link__chevron {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

/* Brand color hints on hover for each platform */
.gfs-social-link--linkedin:hover .gfs-social-link__icon  { background: #0a66c2; color: #fff; }
.gfs-social-link--instagram:hover .gfs-social-link__icon { background: #e1306c; color: #fff; }
.gfs-social-link--youtube:hover .gfs-social-link__icon   { background: #ff0000; color: #fff; }
.gfs-social-link--gfs_vimeo:hover .gfs-social-link__icon { background: #1ab7ea; color: #fff; }
.gfs-social-link--twitter:hover .gfs-social-link__icon   { background: #000;    color: #fff; }
.gfs-social-link--tiktok:hover .gfs-social-link__icon    { background: #25f4ee; color: #000; }

@media (max-width: 480px) {
	.gfs-profile-section { padding: 1.1rem 1.1rem; }
	.gfs-social-list { grid-template-columns: 1fr; }
}

/* Generic profile field display (UM's own .um-field on profile view) */
.um.um-profile .um-field {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 1rem !important;
	margin: 0 0 0.5rem !important;
}

.um.um-profile .um-field-label label {
	color: var(--wp--preset--color--muted) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.um.um-profile .um-field-area {
	color: var(--wp--preset--color--base) !important;
}

.um.um-profile .um-field-value {
	color: var(--wp--preset--color--base) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}

/* Social row */
.um.um-profile .um-profile-headericon {
	margin: 1rem 0 0;
}

.um.um-profile .um-profile-headericon a {
	color: var(--wp--preset--color--accent) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0.5rem !important;
	font-size: 1.25rem !important;
	margin: 0 0.25rem !important;
}

.um.um-profile .um-profile-headericon a:hover {
	color: var(--wp--preset--color--primary) !important;
	background: transparent !important;
}

/* ==========================================================================
   ACCOUNT EDIT PAGE — .um-account
   ========================================================================== */

body.um-page-account {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.um-page-account .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.um-page-account .wp-site-blocks > main {
	flex: 1 0 auto;
}

body.um-page-account .wp-site-blocks > footer {
	flex-shrink: 0;
}

.um-account {
	max-width: 1000px;
	margin: 2rem auto;
	padding: clamp(2rem, 4vw, 3rem);
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(51, 74, 90, 0.15));
	position: relative;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--base);
}

.um-account::before,
.um-account::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
}

.um-account::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--base);
	border-left: 1px solid var(--wp--preset--color--base);
}

.um-account::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid var(--wp--preset--color--base);
	border-right: 1px solid var(--wp--preset--color--base);
}

/* Section heading */
.um-account .um-account-heading,
.um-account .um-account-heading-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--base);
	margin: 0 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.um-account .um-account-heading i,
.um-account .um-account-heading .um-faicon {
	color: var(--wp--preset--color--accent);
}

/* Two-column layout: form wraps .um-account-side + .um-account-main as flex */
.um-account .um-form > form {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 2rem !important;
	align-items: flex-start !important;
}

.um-account .um-account-side {
	width: 240px !important;
	flex-shrink: 0 !important;
	float: none !important;
}

.um-account .um-account-main {
	flex: 1 !important;
	min-width: 0 !important;
	float: none !important;
	display: block !important;
}

@media (max-width: 768px) {
	.um-account .um-form > form {
		flex-direction: column !important;
	}
	.um-account .um-account-side {
		width: 100% !important;
	}
}

/* Hide all tabs by default — show only the one matching
   .um-account-main[data-current_tab]. Deliberately NO !important here:
   UM's account.js switches tabs with jQuery hide()/fadeIn() INLINE styles
   and, right after, enables/disables each tab's fields based on jQuery's
   :visible. An !important display:none used to beat fadeIn's inline style
   at that exact moment, so the freshly-opened tab counted as :not(:visible)
   and its inputs were left disabled (fields looked frozen after switching
   tabs). Without !important these rules only provide the pre-JS initial
   state and the inline styles win once the JS takes over. */
.um-account .um-account-tab {
	display: none;
}

.um-account .um-account-main[data-current_tab="general"] .um-account-tab-general,
.um-account .um-account-main[data-current_tab="password"] .um-account-tab-password,
.um-account .um-account-main[data-current_tab="privacy"] .um-account-tab-privacy,
.um-account .um-account-main[data-current_tab="delete"] .um-account-tab-delete,
.um-account .um-account-main[data-current_tab="notifications"] .um-account-tab-notifications {
	display: block;
}

/* Sidebar avatar + name block */
.um-account .um-account-side .um-account-meta {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 1.5rem !important;
	margin: 0 0 1rem !important;
	text-align: center !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.um-account .um-account-side .um-account-meta-img img {
	border: 2px solid var(--wp--preset--color--accent) !important;
	border-radius: 50% !important;
}

.um-account .um-account-side .um-account-name a {
	color: var(--wp--preset--color--base) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	text-decoration: none !important;
}

.um-account .um-account-side .um-account-profile-link a {
	color: var(--wp--preset--color--primary) !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* Sidebar tab list */
.um-account .um-account-side ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.um-account .um-account-side ul li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	/* UM paints each tab row #eee — kill it so the dark theme shows through */
	background: transparent !important;
}

.um-account .um-account-side .um-account-link {
	color: var(--wp--preset--color--muted) !important;
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding: 0.85rem 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.um-account .um-account-side .um-account-link.current,
.um-account .um-account-side .um-account-link:hover {
	color: var(--wp--preset--color--primary) !important;
}

.um-account .um-account-side .um-account-link .um-account-icon i {
	color: var(--wp--preset--color--accent) !important;
}

.um-account .um-account-side .um-account-link.current .um-account-icon i {
	color: var(--wp--preset--color--primary) !important;
}

.um-account .um-account-side .um-account-arrow {
	margin-left: auto !important;
	color: var(--wp--preset--color--muted) !important;
}

/* Hide the mobile-only avatar block on desktop (UM uimob500-show toggles class on resize) */
.um-account .um-account-meta.uimob340-show.uimob500-show {
	display: none !important;
}

/* Hide the mobile tab nav inside .um-account-main (uimob340-show) */
.um-account .um-account-nav.uimob340-show.uimob500-show {
	display: none !important;
}

@media (max-width: 500px) {
	.um-account .um-account-meta.uimob340-show.uimob500-show {
		display: block !important;
	}
	.um-account .um-account-nav.uimob340-show.uimob500-show {
		display: block !important;
	}
	.um-account .um-account-side {
		display: none !important;
	}
}

/* Form fields */
.um-account label,
.um-account .um-field-label label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted) !important;
	margin-bottom: 0.5rem;
	display: block;
}

.um-account input[type="text"],
.um-account input[type="email"],
.um-account input[type="url"],
.um-account input[type="password"],
.um-account input[type="tel"],
.um-account textarea,
.um-account select {
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	padding: 0.75rem 1rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	color: var(--wp--preset--color--base) !important;
	background: rgba(0, 0, 0, 0.4) !important;
	border-radius: 0 !important;
	width: 100% !important;
	height: auto !important;
	line-height: 1.4 !important;
	transition: border-color 200ms ease !important;
	box-shadow: none !important;
	appearance: none !important;
}

.um-account select option,
.um.um-profile select option,
.um.um-register select option {
	background: #000 !important;
	color: var(--wp--preset--color--base) !important;
}

.um-account input:focus,
.um-account textarea:focus,
.um-account select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary) !important;
}

.um-account input::placeholder,
.um-account textarea::placeholder {
	color: var(--wp--preset--color--muted) !important;
	opacity: 0.6 !important;
}

.um-account .um-field,
.um-account .um-row {
	margin-bottom: 1.25rem;
}

/* Submit / action buttons */
.um-account input[type="submit"],
.um-account button[type="submit"],
.um-account .um-button,
.um-account a.um-button {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	padding: 0.85rem 2rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	text-decoration: none !important;
	display: inline-block !important;
	text-align: center !important;
	line-height: 1.4 !important;
}

.um-account input[type="submit"]:hover,
.um-account button[type="submit"]:hover,
.um-account .um-button:hover,
.um-account a.um-button:hover {
	background: var(--wp--preset--color--warm-dark) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Privacy tab: "Request data" / "Request data erase" buttons. UM ships them
   as light-blue (#3ba1da) anchors and the theme's amber link color lands on
   top — unreadable. Restyle as the theme's secondary outline button
   (primary action on the page stays the amber "Update Privacy"). */
.um-account a.um-request-button,
.um-account a.um-request-button.um-export-data-button,
.um-account a.um-request-button.um-erase-data-button {
	background: transparent !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--base) !important;
	border-radius: 0 !important;
	padding: 0.7rem 1.75rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-block !important;
	line-height: 1.4 !important;
	transition: color 0.15s ease, border-color 0.15s ease !important;
}

.um-account a.um-request-button:hover,
.um-account a.um-request-button:focus {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	background: transparent !important;
}

/* Field error messages */
.um .um-field-error {
	background: rgba(222, 19, 167, 0.1) !important;
	border-left: 3px solid var(--wp--preset--color--highlight) !important;
	color: var(--wp--preset--color--highlight) !important;
	padding: 0.65rem 1rem !important;
	margin: 0.5rem 0 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}

/* Notice messages */
.um .um-notice,
.um .um-misc-msg {
	background: rgba(102, 148, 179, 0.1) !important;
	border-left: 3px solid var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	padding: 0.75rem 1rem !important;
	margin: 1rem 0 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}

/* Privacy tab checkboxes */
.um-account .um-account-privacy label {
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	color: var(--wp--preset--color--base) !important;
	cursor: pointer !important;
}

.um-account input[type="checkbox"],
.um-account input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	width: auto !important;
}

/* ==========================================================================
   AUTH FORMS — .um-login, .um-register, .um-password
   Login / Register / Password Reset pages — bracket-frame card layout.
   ========================================================================== */

/* Center the parent group that wraps the page title */
body.um-page-login main > .wp-block-group:has(.wp-block-post-title),
body.um-page-register main > .wp-block-group:has(.wp-block-post-title),
body.um-page-password-reset main > .wp-block-group:has(.wp-block-post-title),
body.um-page-logout main > .wp-block-group:has(.wp-block-post-title) {
	text-align: center !important;
}

body.um-page-login .wp-block-post-title,
body.um-page-register .wp-block-post-title,
body.um-page-password-reset .wp-block-post-title,
body.um-page-logout .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: clamp(2.5rem, 6vw, 4rem) !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: var(--wp--preset--color--base) !important;
	margin: clamp(2rem, 5vw, 4rem) auto 1.5rem !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Wrapper card for the auth form */
.um.um-login,
.um.um-register,
.um.um-password,
.um.um-logout {
	max-width: 520px !important;
	margin: 0 auto 4rem !important;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem) !important;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(51, 74, 90, 0.15)) !important;
	position: relative !important;
	width: 100% !important;
}

.um.um-login::before,
.um.um-register::before,
.um.um-password::before,
.um.um-logout::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 28px !important;
	height: 28px !important;
	border-top: 1px solid var(--wp--preset--color--base) !important;
	border-left: 1px solid var(--wp--preset--color--base) !important;
}

.um.um-login::after,
.um.um-register::after,
.um.um-password::after,
.um.um-logout::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 28px !important;
	height: 28px !important;
	border-bottom: 1px solid var(--wp--preset--color--base) !important;
	border-right: 1px solid var(--wp--preset--color--base) !important;
}

.um.um-login .um-form,
.um.um-register .um-form,
.um.um-password .um-form {
	max-width: none !important;
}

/* Field labels — .um-profile is included for the profile EDIT form
   (?um_action=edit); in view mode these selectors simply match nothing. */
.um.um-login .um-field-label label,
.um.um-register .um-field-label label,
.um.um-password .um-field-label label,
.um.um-profile .um-field-label label {
	color: var(--wp--preset--color--muted) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin: 0 0 0.5rem !important;
}

/* Inputs */
.um.um-login input[type="text"],
.um.um-login input[type="email"],
.um.um-login input[type="password"],
.um.um-register input[type="text"],
.um.um-register input[type="email"],
.um.um-register input[type="password"],
.um.um-register input[type="url"],
.um.um-register input[type="tel"],
.um.um-register textarea,
.um.um-register select,
.um.um-password input[type="text"],
.um.um-password input[type="email"],
.um.um-password input[type="password"],
.um.um-profile input[type="text"],
.um.um-profile input[type="email"],
.um.um-profile input[type="password"],
.um.um-profile input[type="url"],
.um.um-profile input[type="tel"],
.um.um-profile input[type="number"],
.um.um-profile textarea,
.um.um-profile select {
	background: rgba(0, 0, 0, 0.5) !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	width: 100% !important;
	height: auto !important;
	box-shadow: none !important;
	appearance: none !important;
}

/* UM's um-old-default.min.css is enqueued AFTER this sheet and forces
   `border: 1px solid #ddd !important` via `.um .um-form input[type=...]` /
   `.um .um-form textarea` — the same specificity as the 3-class selectors
   above, so UM wins the tie on source order. Doubling .um plus requiring
   .um-form outranks both its base rule and its :focus rule regardless of
   load order (same trick as :root:root for TEC). */
.um.um.um-login .um-form input[type="text"],
.um.um.um-login .um-form input[type="email"],
.um.um.um-login .um-form input[type="password"],
.um.um.um-register .um-form input[type="text"],
.um.um.um-register .um-form input[type="email"],
.um.um.um-register .um-form input[type="password"],
.um.um.um-register .um-form input[type="url"],
.um.um.um-register .um-form input[type="tel"],
.um.um.um-register .um-form textarea,
.um.um.um-register .um-form select,
.um.um.um-password .um-form input[type="text"],
.um.um.um-password .um-form input[type="email"],
.um.um.um-password .um-form input[type="password"],
.um.um.um-profile .um-form input[type="text"],
.um.um.um-profile .um-form input[type="email"],
.um.um.um-profile .um-form input[type="password"],
.um.um.um-profile .um-form input[type="url"],
.um.um.um-profile .um-form input[type="tel"],
.um.um.um-profile .um-form input[type="number"],
.um.um.um-profile .um-form textarea,
.um.um.um-profile .um-form select {
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.um.um.um-login .um-form input:focus,
.um.um.um-register .um-form input:focus,
.um.um.um-register .um-form textarea:focus,
.um.um.um-register .um-form select:focus,
.um.um.um-password .um-form input:focus,
.um.um.um-profile .um-form input:focus,
.um.um.um-profile .um-form textarea:focus,
.um.um.um-profile .um-form select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary) !important;
}

/* Browser autofill paints a pale-blue fill + dark text over our dark inputs
   (username/password get autofilled). `background` is ignored on autofilled
   fields — the opaque inset box-shadow is the only reliable override, and
   -webkit-text-fill-color beats the UA's forced text color. The shadow color
   must be solid (a translucent one would let the blue show through); #0b0b0b
   visually matches rgba(0,0,0,0.5) over the dark page background. */
.um.um-login input:-webkit-autofill,
.um.um-register input:-webkit-autofill,
.um.um-password input:-webkit-autofill,
.um.um-profile input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #0b0b0b inset !important;
	box-shadow: 0 0 0 1000px #0b0b0b inset !important;
	-webkit-text-fill-color: var(--wp--preset--color--base) !important;
	caret-color: var(--wp--preset--color--base) !important;
	transition: background-color 99999s ease-in-out 0s !important;
}

.um.um-login input:-webkit-autofill:focus,
.um.um-register input:-webkit-autofill:focus,
.um.um-password input:-webkit-autofill:focus,
.um.um-profile input:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px #0b0b0b inset, 0 0 0 1px var(--wp--preset--color--primary) !important;
}

/* Firefox equivalent (kept as a separate rule: an unrecognized selector in a
   shared list would invalidate the whole -webkit- rule above). */
.um.um-login input:autofill,
.um.um-register input:autofill,
.um.um-password input:autofill,
.um.um-profile input:autofill {
	box-shadow: 0 0 0 1000px #0b0b0b inset !important;
	-webkit-text-fill-color: var(--wp--preset--color--base) !important;
	caret-color: var(--wp--preset--color--base) !important;
}

.um.um-login input::placeholder,
.um.um-register input::placeholder,
.um.um-password input::placeholder,
.um.um-profile input::placeholder,
.um.um-profile textarea::placeholder {
	color: var(--wp--preset--color--muted) !important;
	opacity: 0.6 !important;
}

.um.um-login input:focus,
.um.um-register input:focus,
.um.um-register textarea:focus,
.um.um-register select:focus,
.um.um-password input:focus,
.um.um-profile input:focus,
.um.um-profile textarea:focus,
.um.um-profile select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary) !important;
	outline: 0 !important;
}

/* Field spacing */
.um.um-login .um-row,
.um.um-login .um-field,
.um.um-register .um-row,
.um.um-register .um-field,
.um.um-password .um-row,
.um.um-password .um-field {
	margin-bottom: 1.25rem !important;
}

/* "Keep me signed in" checkbox row */
.um.um-login .um-field-checkbox,
.um.um-register .um-field-checkbox {
	color: var(--wp--preset--color--base) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	cursor: pointer !important;
}

.um.um-login .um-field-checkbox-state,
.um.um-register .um-field-checkbox-state {
	background: rgba(0, 0, 0, 0.5) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	width: 20px !important;
	height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: none !important;
}

/* UM draws the checkbox with an icon-font glyph inside the state span,
   which stacks a second box on top of our styled square — hide the glyph
   and draw the checkmark ourselves (::after below). */
.um.um-login .um-field-checkbox-state i,
.um.um-register .um-field-checkbox-state i {
	display: none !important;
}

.um.um-login .um-field-checkbox.active .um-field-checkbox-state,
.um.um-register .um-field-checkbox.active .um-field-checkbox-state {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.um.um-login .um-field-checkbox.active .um-field-checkbox-state::after,
.um.um-register .um-field-checkbox.active .um-field-checkbox-state::after {
	content: "";
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--base);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-top: -2px;
}

/* Submit button — amber filled */
.um.um-login input[type="submit"],
.um.um-login .um-button,
.um.um-register input[type="submit"],
.um.um-register .um-button,
.um.um-password input[type="submit"],
.um.um-password .um-button {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	padding: 0.85rem 1.5rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	text-decoration: none !important;
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	line-height: 1.4 !important;
}

.um.um-login input[type="submit"]:hover,
.um.um-login .um-button:hover,
.um.um-register input[type="submit"]:hover,
.um.um-register .um-button:hover,
.um.um-password input[type="submit"]:hover,
.um.um-password .um-button:hover {
	background: var(--wp--preset--color--warm-dark) !important;
}

/* Alt button (Register on login page, vice versa) — outline white */
.um.um-login .um-button.um-alt,
.um.um-register .um-button.um-alt,
.um.um-password .um-button.um-alt {
	background: transparent !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--base) !important;
}

.um.um-login .um-button.um-alt:hover,
.um.um-register .um-button.um-alt:hover,
.um.um-password .um-button.um-alt:hover {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Two-button row (Login | Register) */
.um.um-login .um-col-alt .um-left,
.um.um-login .um-col-alt .um-right,
.um.um-register .um-col-alt .um-left,
.um.um-register .um-col-alt .um-right {
	width: 48% !important;
	box-sizing: border-box !important;
}

.um.um-login .um-col-alt .um-half,
.um.um-register .um-col-alt .um-half {
	width: 48% !important;
}

/* "Forgot your password?" link */
.um.um-login .um-link-alt,
.um.um-login .um-col-alt-b a,
.um.um-register .um-link-alt {
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	display: block !important;
	text-align: center !important;
	margin: 1rem 0 0 !important;
}

.um.um-login .um-link-alt:hover,
.um.um-login .um-col-alt-b a:hover {
	color: var(--wp--preset--color--warm-dark) !important;
}

/* Logout page — confirmation panel */
.um.um-logout .um-misc-with-img {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	margin: 0 0 1.5rem !important;
}

.um.um-logout .um-misc-img img {
	border: 2px solid var(--wp--preset--color--accent) !important;
}

.um.um-logout .um-misc-ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
}

.um.um-logout .um-misc-ul a {
	display: block !important;
	color: var(--wp--preset--color--base) !important;
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--base) !important;
	padding: 0.75rem 1.5rem !important;
	text-align: center !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.um.um-logout .um-misc-ul a:hover {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Honeypot / anti-spam field (hidden but accessible) */
.um.um-login .um_request_name,
.um.um-register .um_request_name {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* =====================================================================
   Select2 dropdowns (Program Location, etc.) — match the dark inputs.
   UM swaps native selects for select2 widgets, which ship with a white
   skin; restyle both the closed control and the floating options panel.
   ===================================================================== */
/* Specificity note: UM's um-styles.min.css paints the control white via
   `.um-field .select2.select2-container .select2-selection` (4 classes,
   !important), so these selectors must carry at least 5 classes to win. */
.um .um-field .select2.select2-container .select2-selection--single {
	background: rgba(0, 0, 0, 0.5) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	height: auto !important;
}

.um .um-field .select2.select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.4 !important;
	padding: 0.85rem 2.5rem 0.85rem 1rem !important;
	/* Empty selection (blank placeholder) collapses the span to 0px and the
	   control renders shorter than the text inputs — reserve one text line. */
	min-height: 1.4em !important;
	box-sizing: content-box !important;
}

.um .um-field .select2.select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--wp--preset--color--muted) !important;
}

.um .um-field .select2.select2-container .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 0.75rem !important;
}

.um .um-field .select2.select2-container .select2-selection--single .select2-selection__arrow b {
	border-color: var(--wp--preset--color--base) transparent transparent transparent !important;
}

.um .um-field .select2.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--wp--preset--color--base) transparent !important;
}

/* Amber highlight only while the panel is OPEN. select2 leaves its
   `--focus` class stuck on the control after picking an option, so keying
   the highlight off focus makes a closed, filled field look "active". */
.um .um-field .select2.select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary) !important;
}

/* The "×" clear button rendered when a value is selected. UM gives it
   line-height: 34px, which inflates the control height — pin it to the
   same line box as the field text so the height stays at 51px. */
.um .um-field .select2.select2-container .select2-selection--single .select2-selection__clear {
	color: var(--wp--preset--color--muted) !important;
	font-size: 1em !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	height: auto !important;
	margin-right: 0.5rem !important;
}

.um .um-field .select2.select2-container .select2-selection--single .select2-selection__clear:hover {
	color: var(--wp--preset--color--base) !important;
}

/* The options panel is appended to <body>, outside .um — style it
   globally. This stylesheet only loads on UM pages, so nothing else
   on the site picks these rules up. */
.select2-container--default .select2-dropdown {
	background: #000 !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(0, 0, 0, 0.5) !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	padding: 0.5rem 0.75rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	outline: 0 !important;
}

.select2-container--default .select2-results__option {
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	padding: 0.6rem 1rem !important;
}

/* Hover/keyboard highlight: soft white overlay instead of solid amber —
   white-on-amber is low contrast and made options hard to read while
   scanning. Matches the datepicker day-hover convention. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: rgba(255, 255, 255, 0.12) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Currently-selected option: amber text (brand accent) on a faint surface,
   like the datepicker's "current" marker. */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600 !important;
}

/* UM's um-styles.min.css dims every dropdown option to #666 via a 5-class
   !important selector (.um-field .select2-container.select2-container--open
   .select2-dropdown .select2-results li). Doubling the --open class outranks
   it regardless of load order; the dropdown only renders while open, so the
   scope costs nothing. */
.um-field .select2-container.select2-container--open.select2-container--open .select2-dropdown .select2-results li {
	color: var(--wp--preset--color--base) !important;
}

.um-field .select2-container.select2-container--open.select2-container--open .select2-dropdown .select2-results li[aria-selected="true"],
.um-field .select2-container.select2-container--open.select2-container--open .select2-dropdown .select2-results li[data-selected="true"] {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600 !important;
}