/* v1.1: centre the app and release it from narrow theme wrappers. */
html:has(#masteriyo-account-page),
body:has(#masteriyo-account-page) {
	overflow-x: clip !important;
}

body:has(#masteriyo-account-page) .site,
body:has(#masteriyo-account-page) .site-content,
body:has(#masteriyo-account-page) .content-area,
body:has(#masteriyo-account-page) .site-main,
body:has(#masteriyo-account-page) main,
body:has(#masteriyo-account-page) article,
body:has(#masteriyo-account-page) .entry-content,
body:has(#masteriyo-account-page) .container,
body:has(#masteriyo-account-page) .wrap,
body:has(#masteriyo-account-page) .page-content {
	width: 100% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body:has(#masteriyo-account-page) .content-area,
body:has(#masteriyo-account-page) .site-main,
body:has(#masteriyo-account-page) main,
body:has(#masteriyo-account-page) article,
body:has(#masteriyo-account-page) .entry-content,
body:has(#masteriyo-account-page) .page-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(#masteriyo-account-page) .widget-area,
body:has(#masteriyo-account-page) aside#secondary {
	display: none !important;
}

body:has(#masteriyo-account-page) #primary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

#masteriyo-account-page {
	box-sizing: border-box !important;
	width: min(1760px, calc(100vw - 32px)) !important;
	max-width: 1760px !important;
	min-height: calc(100vh - 180px) !important;
	margin: 0 auto !important;
	padding: clamp(22px, 3vw, 48px) !important;
	background: var(--bb-account-page) !important;
	box-shadow: 0 0 0 100vmax var(--bb-account-page) !important;
	clip-path: inset(0 -100vmax) !important;
}

#masteriyo-account-container {
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 780px) {
	#masteriyo-account-page {
		width: 100% !important;
		padding: 16px 12px 32px !important;
	}
}

/*
 * Blackburn Beauty account polish
 * Uses stable Masteriyo IDs/classes from the rendered account page.
 * Loaded late so it can override Chakra's generated styles.
 */

:root {
	--bb-account-page: #080b12;
	--bb-account-panel: #111621;
	--bb-account-panel-2: #171d2a;
	--bb-account-border: rgba(255, 255, 255, 0.13);
	--bb-account-text: #ffffff;
	--bb-account-muted: #c7ccd7;
	--bb-account-accent: #ff2fa8;
	--bb-account-accent-2: #8b5cf6;
	--bb-account-input: #ffffff;
	--bb-account-input-text: #11131a;
	--bb-account-radius: 18px;
	--bb-account-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* Remove the narrow theme content restriction only around the account app. */
.entry-content:has(#masteriyo-account-page),
.site-main:has(#masteriyo-account-page),
main:has(#masteriyo-account-page) {
	width: 100% !important;
	max-width: none !important;
}

#masteriyo-account-page {
	width: min(1520px, calc(100vw - 48px)) !important;
	max-width: 1520px !important;
	margin: 38px auto 70px !important;
	padding: 0 !important;
	color: var(--bb-account-text) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
}

#masteriyo-account-page,
#masteriyo-account-page .chakra-container {
	background: transparent !important;
}

#masteriyo-account-container {
	display: grid !important;
	grid-template-columns: 280px minmax(0, 1fr) !important;
	gap: 28px !important;
	width: 100% !important;
	max-width: none !important;
	align-items: start !important;
}

/* Sidebar */
#masteriyo-account-page .mto-account-sidebar {
	position: sticky !important;
	top: 24px !important;
	width: 280px !important;
	min-width: 280px !important;
	max-width: 280px !important;
	padding: 22px 16px !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: var(--bb-account-radius) !important;
	background: linear-gradient(180deg, #151a26 0%, #0d111a 100%) !important;
	box-shadow: var(--bb-account-shadow) !important;
	overflow: hidden !important;
}

#masteriyo-account-page .mto-account-sidebar h1,
#masteriyo-account-page .mto-account-sidebar h2,
#masteriyo-account-page .mto-account-sidebar h3,
#masteriyo-account-page .mto-account-sidebar h4,
#masteriyo-account-page .mto-account-sidebar h5,
#masteriyo-account-page .mto-account-sidebar p,
#masteriyo-account-page .mto-account-sidebar span,
#masteriyo-account-page .mto-account-sidebar svg {
	color: var(--bb-account-text) !important;
	fill: currentColor;
}

#masteriyo-account-page .mto-account-sidebar ul {
	display: grid !important;
	gap: 9px !important;
	margin: 18px 0 0 !important;
	padding: 0 !important;
}

#masteriyo-account-page .mto-account-sidebar li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#masteriyo-account-page .mto-account-sidebar a.chakra-link {
	display: flex !important;
	min-height: 54px !important;
	padding: 12px 14px !important;
	border: 1px solid transparent !important;
	border-radius: 13px !important;
	background: rgba(255, 255, 255, 0.035) !important;
	color: var(--bb-account-text) !important;
	text-decoration: none !important;
	transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

#masteriyo-account-page .mto-account-sidebar a.chakra-link:hover {
	transform: translateX(3px);
	border-color: rgba(255, 47, 168, .45) !important;
	background: rgba(255, 47, 168, .11) !important;
}

#masteriyo-account-page .mto-account-sidebar a.chakra-link.active,
#masteriyo-account-page .mto-account-sidebar a[aria-current="page"] {
	border-color: rgba(255, 47, 168, .72) !important;
	background: linear-gradient(90deg, rgba(255,47,168,.22), rgba(139,92,246,.13)) !important;
	box-shadow: inset 3px 0 0 var(--bb-account-accent) !important;
}

#masteriyo-account-page .account-sidebar-menu-item {
	font-size: 15px !important;
	font-weight: 750 !important;
	letter-spacing: .01em !important;
	color: var(--bb-account-text) !important;
}

/* Main wrapper */
#masteriyo-account-page .mto-account-wrapper {
	min-width: 0 !important;
	width: 100% !important;
	padding: clamp(22px, 3vw, 42px) !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #101521 0%, #0b0f17 100%) !important;
	box-shadow: var(--bb-account-shadow) !important;
	color: var(--bb-account-text) !important;
	overflow: hidden !important;
}

#masteriyo-account-page .mto-account-wrapper :where(h1,h2,h3,h4,h5,h6),
#masteriyo-account-page .mto-account-wrapper .chakra-heading {
	color: var(--bb-account-text) !important;
	opacity: 1 !important;
}

#masteriyo-account-page .mto-account-wrapper :where(p,span,label,small,li,td,th),
#masteriyo-account-page .mto-account-wrapper .chakra-text {
	color: var(--bb-account-muted) !important;
	opacity: 1 !important;
}

#masteriyo-account-page .mto-account-wrapper p:first-child,
#masteriyo-account-page .mto-account-wrapper .css-en-10dmpqj {
	color: var(--bb-account-text) !important;
	font-size: clamp(28px, 3vw, 42px) !important;
	font-weight: 850 !important;
	line-height: 1.12 !important;
}

/* Dashboard statistic cards: exact stable group structure from supplied HTML. */
#masteriyo-account-page .mto-dashboard-courses-stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 18px !important;
	width: 100% !important;
	margin-top: 28px !important;
}

#masteriyo-account-page .mto-dashboard-courses-stats > [role="group"] {
	min-width: 0 !important;
	min-height: 142px !important;
	padding: 24px !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: 17px !important;
	background: var(--bb-account-panel-2) !important;
	box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

#masteriyo-account-page .mto-dashboard-courses-stats > [role="group"] > div:first-child {
	display: grid !important;
	place-items: center !important;
	width: 54px !important;
	height: 54px !important;
	min-width: 54px !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, rgba(255,47,168,.24), rgba(139,92,246,.24)) !important;
	color: #fff !important;
}

#masteriyo-account-page .mto-dashboard-courses-stats > [role="group"] svg {
	width: 28px !important;
	height: 28px !important;
	color: #fff !important;
	fill: currentColor !important;
}

#masteriyo-account-page .mto-dashboard-courses-stats > [role="group"] p:first-child {
	color: #fff !important;
	font-size: 30px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
}

#masteriyo-account-page .mto-dashboard-courses-stats > [role="group"] p:last-child {
	color: var(--bb-account-muted) !important;
	font-size: 15px !important;
	font-weight: 650 !important;
}

/* General Masteriyo panels and white "squares". */
#masteriyo-account-page .mto-dashboard-courses-progress,
#masteriyo-account-page .mto-account-wrapper [role="group"],
#masteriyo-account-page .mto-account-wrapper [role="table"],
#masteriyo-account-page .mto-account-wrapper table,
#masteriyo-account-page .mto-account-wrapper form,
#masteriyo-account-page .mto-account-wrapper fieldset {
	border-color: var(--bb-account-border) !important;
}

#masteriyo-account-page .mto-dashboard-courses-progress {
	margin-top: 24px !important;
	padding: clamp(22px, 3vw, 34px) !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: 18px !important;
	background: var(--bb-account-panel) !important;
}

/* Chakra cards commonly rendered as white; limit this to direct content cards. */
#masteriyo-account-page .mto-account-wrapper > .chakra-stack > .chakra-stack,
#masteriyo-account-page .mto-account-wrapper .mto-dashboard-courses-progress > .chakra-stack {
	background-color: transparent !important;
}

#masteriyo-account-page .mto-account-wrapper :where(.chakra-card, [data-theme*="light"]) {
	background: var(--bb-account-panel-2) !important;
	color: var(--bb-account-text) !important;
	border-color: var(--bb-account-border) !important;
}

/* Buttons */
#masteriyo-account-page button.chakra-button,
#masteriyo-account-page a.chakra-button,
#masteriyo-account-page [role="button"] {
	min-height: 48px !important;
	min-width: 132px !important;
	padding: 12px 20px !important;
	border: 1px solid rgba(255, 47, 168, .65) !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, var(--bb-account-accent), var(--bb-account-accent-2)) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	white-space: normal !important;
	box-shadow: 0 9px 24px rgba(255, 47, 168, .18) !important;
}

#masteriyo-account-page button.chakra-button:hover,
#masteriyo-account-page a.chakra-button:hover,
#masteriyo-account-page [role="button"]:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

#masteriyo-account-page .mto-account-sidebar button[aria-label="Toggle sidebar"] {
	min-width: 44px !important;
	width: 44px !important;
	min-height: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 11px !important;
}

/* Inputs and select controls */
#masteriyo-account-page :where(input,select,textarea) {
	min-height: 48px !important;
	padding: 11px 14px !important;
	border: 1px solid #d6dae3 !important;
	border-radius: 10px !important;
	background: var(--bb-account-input) !important;
	color: var(--bb-account-input-text) !important;
	font-size: 16px !important;
	opacity: 1 !important;
}

#masteriyo-account-page textarea {
	min-height: 130px !important;
}

#masteriyo-account-page :where(input,textarea)::placeholder {
	color: #626875 !important;
	opacity: 1 !important;
}

#masteriyo-account-page :where(input,select,textarea):focus {
	outline: 3px solid rgba(255,47,168,.25) !important;
	border-color: var(--bb-account-accent) !important;
}

/* Tables */
#masteriyo-account-page table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	background: var(--bb-account-panel) !important;
}

#masteriyo-account-page :where(th,td) {
	padding: 15px 17px !important;
	border-color: var(--bb-account-border) !important;
	background: transparent !important;
}

#masteriyo-account-page th {
	color: #fff !important;
	font-weight: 800 !important;
	background: rgba(255,255,255,.045) !important;
}

/* Links and icons */
#masteriyo-account-page .mto-account-wrapper a:not(.chakra-button) {
	color: #ff72c6 !important;
	font-weight: 700 !important;
	text-underline-offset: 3px !important;
}

#masteriyo-account-page .mto-account-wrapper svg:not([width="220"]) {
	color: currentColor;
}

/* Empty-state artwork should not create a harsh white block. */
#masteriyo-account-page .mto-dashboard-courses-progress svg[width="220"] {
	max-width: 180px !important;
	height: auto !important;
	opacity: .86 !important;
	filter: drop-shadow(0 12px 30px rgba(0,0,0,.24)) !important;
}

/* WooCommerce account, kept separate and conservative. */
.woocommerce-account .woocommerce {
	display: grid !important;
	grid-template-columns: 260px minmax(0,1fr) !important;
	gap: 28px !important;
	max-width: 1400px !important;
	margin: 36px auto 70px !important;
	color: var(--bb-account-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	padding: 24px !important;
	border: 1px solid var(--bb-account-border) !important;
	border-radius: 18px !important;
	background: var(--bb-account-panel) !important;
	color: var(--bb-account-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block !important;
	padding: 13px 15px !important;
	border-radius: 10px !important;
	background: rgba(255,255,255,.04) !important;
	color: #fff !important;
	font-weight: 750 !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: linear-gradient(90deg, rgba(255,47,168,.22), rgba(139,92,246,.13)) !important;
	box-shadow: inset 3px 0 0 var(--bb-account-accent) !important;
}

.woocommerce-account .woocommerce-MyAccount-content :where(p,span,label,td) {
	color: var(--bb-account-muted) !important;
}

.woocommerce-account .woocommerce-MyAccount-content :where(h1,h2,h3,h4,h5,h6,th) {
	color: #fff !important;
}

.woocommerce-account .button,
.woocommerce-account button {
	min-height: 48px !important;
	padding: 12px 20px !important;
	border-radius: 11px !important;
	background: linear-gradient(135deg, var(--bb-account-accent), var(--bb-account-accent-2)) !important;
	color: #fff !important;
	font-weight: 800 !important;
}

.woocommerce-account :where(input,select,textarea) {
	min-height: 48px !important;
	padding: 11px 14px !important;
	background: #fff !important;
	color: #11131a !important;
	border-radius: 10px !important;
}

/* Responsive */
@media (max-width: 1050px) {
	#masteriyo-account-container {
		grid-template-columns: 230px minmax(0, 1fr) !important;
		gap: 18px !important;
	}

	#masteriyo-account-page .mto-account-sidebar {
		width: 230px !important;
		min-width: 230px !important;
		max-width: 230px !important;
	}

	#masteriyo-account-page .mto-dashboard-courses-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 780px) {
	#masteriyo-account-page {
		width: min(100% - 24px, 1520px) !important;
		margin-top: 20px !important;
	}

	#masteriyo-account-container {
		display: block !important;
	}

	#masteriyo-account-page .mto-account-sidebar {
		position: relative !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-bottom: 18px !important;
	}

	#masteriyo-account-page .mto-account-sidebar ul {
		grid-template-columns: repeat(2, minmax(0,1fr)) !important;
	}

	#masteriyo-account-page .mto-account-wrapper {
		padding: 22px 16px !important;
	}

	#masteriyo-account-page .mto-dashboard-courses-stats {
		grid-template-columns: 1fr !important;
	}

	.woocommerce-account .woocommerce {
		display: block !important;
		margin-inline: 12px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 18px !important;
	}
}

@media (max-width: 480px) {
	#masteriyo-account-page .mto-account-sidebar ul {
		grid-template-columns: 1fr !important;
	}

	#masteriyo-account-page button.chakra-button,
	#masteriyo-account-page a.chakra-button,
	#masteriyo-account-page [role="button"] {
		width: 100% !important;
		min-width: 0 !important;
	}
}