/**
 * File: assets/account-navigation.css
 * Custom Account Navigation Sidebar Styling - Matching Figma Design
 */

/* ========================================
   Mobile: Default font family for all mobile templates
   ======================================== */

/** Removing the content padding from the mobile templates (mobile only) */
body.woocommerce-account.cpe-mobile-nav-enabled:not(.elementor-page) .tpc-site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-courses,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-package,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-certificates,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-dashboard,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-all-packages,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-free-courses,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-orders {
	font-family: Inter !important;
}

body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h1,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h2,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h3,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h4,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h5,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content h6,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content p,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content a,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content span,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content li,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content label,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content strong,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content em,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content button,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content input,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content select,
body.woocommerce-account.cpe-mobile-nav-enabled .woocommerce-MyAccount-content textarea,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h1,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h2,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h3,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h4,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h5,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content h6,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content p,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content a,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content span,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content li,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content label,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content strong,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content em,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content button,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content input,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content select,
body.woocommerce-account.cpe-mobile-nav-enabled .wdm-account-content textarea,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-courses *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-package *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-my-certificates *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-dashboard *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-all-packages *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-free-courses *,
body.woocommerce-account.cpe-mobile-nav-enabled .cpe-mobile-orders * {
	font-family: Inter !important;
}

/* ========================================
   Desktop Profile Header (picture + name, top-right)
   ======================================== */
.wdm-desktop-profile-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	margin-bottom: 40px;
}

.wdm-profile-header-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	border-left: 2px solid #e2e8f0;
	padding-left: 20px;
	margin-right: 10%;
}

.wdm-profile-header-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: cover;
}

.wdm-profile-header-name {
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
}

/* ========================================
   Orders Pagination (matches Course Credits design)
   ======================================== */
.wdm-orders-pagination,
.cpe-mobile-orders-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 30px;
	padding-top: 20px;
}

.wdm-orders-pagination .page-numbers,
.cpe-mobile-orders-pagination .page-numbers {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.wdm-orders-pagination .page-numbers li,
.cpe-mobile-orders-pagination .page-numbers li {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wdm-orders-pagination .page-numbers a,
.wdm-orders-pagination .page-numbers span,
.cpe-mobile-orders-pagination .page-numbers a,
.cpe-mobile-orders-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 16px;
	text-decoration: none;
	color: #334155;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.wdm-orders-pagination .page-numbers a:hover,
.cpe-mobile-orders-pagination .page-numbers a:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #334155;
}

.wdm-orders-pagination .page-numbers .current,
.cpe-mobile-orders-pagination .page-numbers .current {
	background: #005aab !important;
	color: #ffffff !important;
	border-color: #005aab !important;
	box-shadow: 0 1px 3px rgba(0, 90, 171, 0.3);
	cursor: default;
}

.wdm-orders-pagination .page-numbers .dots,
.cpe-mobile-orders-pagination .page-numbers .dots {
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: default;
}

.wdm-orders-pagination .page-numbers .prev,
.wdm-orders-pagination .page-numbers .next,
.cpe-mobile-orders-pagination .page-numbers .prev,
.cpe-mobile-orders-pagination .page-numbers .next {
	font-weight: 500;
}

/* ========================================
   Account Page Layout - Grid on .woocommerce div (direct parent of nav and content)
   ======================================== */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid !important;
	grid-template-columns: 280px 1fr !important;
	gap: 0 !important;
	align-items: start !important;
	width: 100% !important;
	box-sizing: border-box !important;
	/* padding-right: 30px !important; */
}

/* ========================================
   Remove width constraints from ALL parent containers to allow full width
   Based on theme structure: .edubin-container > .edubin-row > #primary > main > article > .entry-content > .woocommerce
   ======================================== */
body.woocommerce-account .tpc-site-content-inner.edubin-container,
body.woocommerce-account .edubin-page-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.woocommerce-account .edubin-main-content-inner.edubin-row {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.woocommerce-account #primary.content-area,
body.woocommerce-account .content-area {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.woocommerce-account #main.site-main,
body.woocommerce-account .site-main {
	max-width: 100% !important;
	width: 100% !important;
}

body.woocommerce-account article,
body.woocommerce-account .entry-content {
	max-width: 100% !important;
	width: 100% !important;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
	body.woocommerce-account .woocommerce {
		display: grid !important;
		grid-template-columns: 280px 1fr !important;
		gap: 30px !important;
		align-items: start !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ========================================
   Main Navigation Container
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation {
	background: #F3F8F6 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 30px 20px !important;
	margin: 0 !important;
	border: none !important;
	overflow: visible !important;
	position: sticky !important;
	top: 100px !important;
	width: 100% !important;
	max-width: 280px !important;
	box-sizing: border-box !important;
	grid-column: 1 !important;
	align-self: start !important;
}

/* ========================================
   Content Area - Everything after navigation in .woocommerce container
   ======================================== */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > *:not(.woocommerce-MyAccount-navigation) {
	grid-column: 2 !important;
	padding-left: 60px !important;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	background: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	padding: 60px !important;
	border: 1px solid #e5e7eb !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	grid-column: 2 !important;
}

/* Orders table styling */
body.woocommerce-account .woocommerce > table.woocommerce-orders-table,
body.woocommerce-account .woocommerce > table.shop_table,
body.woocommerce-account .woocommerce > table {
	grid-column: 2 !important;
	background: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	padding: 0 !important;
	border: 1px solid #e5e7eb !important;
	border-collapse: collapse !important;
	width: 100% !important;
	overflow-x: auto !important;
}

body.woocommerce-account .woocommerce > table th,
body.woocommerce-account .woocommerce > table td {
	padding: 12px 15px !important;
	text-align: left !important;
	border-bottom: 1px solid #e5e7eb !important;
}

body.woocommerce-account .woocommerce > table th {
	background: #f9fafb !important;
	font-weight: 600 !important;
}

/* Pagination links */
body.woocommerce-account .woocommerce > a.woocommerce-button,
body.woocommerce-account .woocommerce > a[href*="orders/"],
body.woocommerce-account .woocommerce > a {
	grid-column: 2 !important;
}

/* Paragraphs and other content */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > p {
	grid-column: 2 !important;
}

/* ========================================
   Navigation List
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important; /* Increased spacing to match design */
	border: none !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	list-style: none !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li::before,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li::after {
	display: none !important;
}

/* ========================================
   Navigation Links - Default State
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important; /* Increased icon-text gap */
	padding: 12px 20px !important; /* More horizontal padding */
	color: #1F3A56 !important; /* Darker blue-slate color from design */
	text-decoration: none !important;
	font-size: 16px !important; /* Increased font size */
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	position: relative !important;
	line-height: 1.5 !important;
	background: transparent !important;
	border-radius: 8px !important;
	border: none !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a::before,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a::after {
	display: none !important;
}

/* ========================================
   Icon Styling
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation .wdm-nav-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important; /* Slightly larger container */
	height: 24px !important;
	flex-shrink: 0 !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation .wdm-nav-icon svg {
	width: 20px !important; /* Slightly larger icons */
	height: 20px !important;
	opacity: 0.9 !important;
	transition: all 0.2s ease !important;
	stroke: #1F3A56 !important; /* Match text color for stroke-based icons */
	stroke-width: 1.8px !important;
}

/* Fill-based icons (dashboard, my-courses, my-certificates, course-credits): remove stroke
   so they don't appear thicker than stroke-based icons (packages, orders, etc.) */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="dashboard"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="my-courses"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="my-certificates"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="course-credits"] .wdm-nav-icon svg {
	stroke: none !important;
	stroke-width: 0 !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation .wdm-nav-label {
	flex: 1 !important;
}

/* ========================================
   Hover State
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a:hover {
	background: rgba(255, 255, 255, 0.5) !important; /* Subtle hover */
	color: #005B9C !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a:hover .wdm-nav-icon svg {
	opacity: 1 !important;
	stroke: #005B9C !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="dashboard"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="my-courses"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="my-certificates"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li[data-endpoint="course-credits"] a:hover .wdm-nav-icon svg {
	stroke: none !important;
}

/* ========================================
   Active State - Blue Pill Background (Figma Specs)
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active a,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active a:hover {
	background: #0257A1 !important; /* Exact color from Figma */
	color: #ffffff !important;
	font-family: 'Open Sans', sans-serif !important; /* Font family from Figma */
	font-weight: 700 !important; /* Bold from Figma */
	font-size: 18px !important; /* Font size from Figma */
	line-height: 25px !important; /* Line height from Figma */
	padding: 16px 24px !important; /* Padding from Figma: 16px vertical, 24px horizontal */
	gap: 24px !important; /* Gap between icon and text from Figma */
	border-radius: 16px !important; /* Border radius from Figma */
	box-shadow: 0px 20px 50px rgba(55, 69, 87, 0.1) !important; /* Shadow from Figma */
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	min-height: 69px !important; /* Height from Figma */
	height: auto !important; /* Allow height to adjust for wrapped text */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	overflow: visible !important; /* Allow text to wrap */
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active .wdm-nav-icon,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active a:hover .wdm-nav-icon {
	width: 32px !important; /* Icon size from Figma */
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	flex: none !important;
	order: 0 !important;
	flex-grow: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active a:hover .wdm-nav-icon svg {
	width: 32px !important; /* Icon size from Figma */
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	opacity: 1 !important;
	stroke: #ffffff !important;
	stroke-width: 2px !important;
	fill: none !important; /* Keep fill as none for stroke-based icons */
	color: #ffffff !important; /* Ensure currentColor is white */
	display: block !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

/* Fill-based icons when active: use fill (not stroke), no stroke */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="dashboard"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="my-courses"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="my-certificates"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="course-credits"] .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="dashboard"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="my-courses"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="my-certificates"] a:hover .wdm-nav-icon svg,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active[data-endpoint="course-credits"] a:hover .wdm-nav-icon svg {
	stroke: none !important;
	stroke-width: 0 !important;
	fill: currentColor !important; /* Fill-based icons need fill, not stroke */
}

nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li.is-active .wdm-nav-label {
	flex: 1 !important; /* Allow label to take remaining space and shrink */
	order: 1 !important;
	flex-grow: 1 !important;
	flex-shrink: 1 !important;
	min-width: 0 !important; /* Allow flex item to shrink below content size */
	width: auto !important;
	height: auto !important; /* Allow height to adjust for wrapping */
	line-height: 25px !important; /* Line height from Figma */
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 991px) {
	body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px 1fr !important;
		gap: 20px !important;
	}
	
	nav.woocommerce-MyAccount-navigation.wdm-account-navigation {
		max-width: 240px !important;
	}
}

@media (max-width: 768px) {
	body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	nav.woocommerce-MyAccount-navigation.wdm-account-navigation {
		padding: 16px !important;
		position: static !important;
		max-width: 100% !important;
		grid-row: auto !important;
	}

	nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul {
		flex-direction: column !important;
		gap: 4px !important;
		/* border: none !important; */
	}

	nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li a {
		padding: 10px 14px !important;
		font-size: 13px !important;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content,
	body.woocommerce-account .woocommerce > table {
		padding: 20px !important;
		grid-column: 1 !important;
	}
	
	body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > *:not(.woocommerce-MyAccount-navigation) {
		grid-column: 1 !important;
	}
}

/* ========================================
   Logout Link Special Styling - Removed to match other items
   ======================================== */
/* No special styling for logout anymore */

/* ========================================
   Override any theme conflicts
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li::marker {
	display: none !important;
	content: none !important;
}

/* Remove any bullets or list markers */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation ul li {
	list-style-type: none !important;
	list-style-image: none !important;
	list-style-position: inside !important;
}

/* ========================================
   Smooth Transitions
   ======================================== */
nav.woocommerce-MyAccount-navigation.wdm-account-navigation *,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation *::before,
nav.woocommerce-MyAccount-navigation.wdm-account-navigation *::after {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   Manage Your Groups Box
   ======================================== */
.wdm-manage-groups-box {
	margin-top: 30px !important;
	padding: 30px 20px !important;
	background: #0257A1 !important; /* Rectangle 111 */
	border-radius: 21px !important;
	text-align: center !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 20px !important;
	min-height: 264px !important;
}

/* Ellipse 128 - Top Right Overlay */
.wdm-manage-groups-box::before {
	content: '' !important;
	position: absolute !important;
	width: 279px !important;
	height: 247px !important;
	top: -145px !important; /* Calculated relative to container: 827 - 972 */
	left: 72px !important;  /* Calculated relative to container: 106 - 34 */
	background: linear-gradient(320.29deg, rgba(255, 255, 255, 0.4) -13.64%, rgba(255, 255, 255, 0) 35.52%) !important;
	border-radius: 50% !important;
	transform: matrix(-1, 0, 0, 1, 0, 0) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* Ellipse 129 - Bottom Left Overlay */
.wdm-manage-groups-box::after {
	content: '' !important;
	position: absolute !important;
	width: 352px !important;
	height: 309px !important;
	top: 140px !important;  /* Calculated relative to container: 1111 - 972 */
	left: -234px !important; /* Calculated relative to container: -199 - 34 */
	background: linear-gradient(130.99deg, rgba(255, 255, 255, 0.4) -16.86%, rgba(255, 255, 255, 0) 44.99%) !important;
	border-radius: 50% !important;
	transform: matrix(-1, 0, 0, 1, 0, 0) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* Logo container */
.wdm-groups-box-logo {
	position: relative !important;
	z-index: 1 !important;
	margin: 0 !important;
	background: #FFFFFF !important;
	width: 51px !important;
	height: 51px !important;
	border-radius: 17px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	flex: none !important;
	flex-grow: 0 !important;
}

.wdm-groups-box-logo img {
	width: 30px !important;
	height: 25px !important;
	object-fit: contain !important;
}

/* Title */
.wdm-groups-box-title {
	position: relative !important;
	z-index: 1 !important;
	color: #FFFFFF !important;
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 21px !important;
	line-height: 34px !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	flex: none !important;
	flex-grow: 0 !important;
}

/* Button */
.wdm-groups-box-button {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: center !important;
	background: #FFFFFF !important;
	color: #0257A1 !important;
	padding: 8px 10px !important;
	width: 180px !important;
	height: 43px !important;
	border-radius: 8.5px !important;
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	line-height: 25px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	border: none !important;
	box-sizing: border-box !important;
	flex: none !important;
	flex-grow: 0 !important;
}

.wdm-groups-box-button:hover {
	background: #f0f0f0 !important;
	color: #0257A1 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* ========================================
   Custom Endpoint Content Styling
   ======================================== */
.wdm-account-content {
	padding: 0 !important;
}

.wdm-account-content h2 {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	margin: 0 0 20px 0 !important;
	padding-bottom: 15px !important;
	border-bottom: 1px solid #e5e7eb !important;
}

/* Desktop: match dashboard / My Courses primary title weight (700). */
@media (min-width: 769px) {
	.wdm-account-content h2 {
		font-weight: 700 !important;
	}
}

.wdm-shortcode-placeholder {
	background: #f8fafc !important;
	border: 2px dashed #e5e7eb !important;
	border-radius: 8px !important;
	padding: 40px 20px !important;
	text-align: center !important;
}

.wdm-placeholder-message {
	color: #94a3b8 !important;
	font-size: 14px !important;
	margin: 0 !important;
}

.woocommerce .woocommerce-MyAccount-content{
	width: 100% !important;
}

/* ========================================
   Settings Form - 2 Column Layout
   ======================================== */
.wdm-settings-content .wdm-account-settings-form {
	width: 100%;
}

.wdm-settings-content fieldset {
	border: none !important;
	padding: 0 !important;
	margin: 0 0 30px 0 !important;
}

.wdm-settings-content fieldset legend {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 27px !important;
	color: #1e293b !important;
	padding: 0 0 20px 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
	border-bottom: none !important;
}

/* 2-Column Layout for Form Rows */
.wdm-settings-content .wdm-settings-row {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	margin-bottom: 20px !important;
}

.wdm-settings-content .wdm-settings-row .woocommerce-form-row {
	margin: 0 !important;
	width: 100% !important;
}

.wdm-settings-content .woocommerce-form-row label {
	display: block !important;
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 21px !important;
	color: #4b5563 !important;
	margin-bottom: 8px !important;
}

.wdm-settings-content .woocommerce-form-row label .required {
	color: #ef4444 !important;
	margin-left: 2px !important;
}

.wdm-settings-content .woocommerce-Input {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 21px !important;
	font-family: 'Open Sans', sans-serif !important;
	background: #ffffff !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.wdm-settings-content .woocommerce-Input:focus {
	outline: none !important;
	border-color: #0257A1 !important;
	box-shadow: 0 0 0 3px rgba(2, 87, 161, 0.1) !important;
}

.wdm-settings-content .woocommerce-Input::placeholder {
	color: #9ca3af !important;
	font-size: 14px !important;
}

.wdm-settings-content textarea.woocommerce-Input {
	resize: vertical !important;
	min-height: 100px !important;
}

/* Full-width Fields (Biographical Info) */
.wdm-settings-content .form-row-wide {
	width: 100% !important;
	margin: 20px 0 0 0 !important;
}

/* Profile Image Upload Section */
.wdm-profile-image-upload {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: 30px !important;
	align-items: start !important;
}

.wdm-profile-image-upload .wdm-current-profile-image {
	margin: 0 !important;
}

.wdm-profile-image-upload .wdm-current-profile-image img {
	max-width: 120px !important;
	max-height: 120px !important;
	border-radius: 8px !important;
	display: block !important;
}

.wdm-file-upload-area {
	position: relative !important;
	border: 2px dashed #d1d5db !important;
	border-radius: 8px !important;
	padding: 40px 20px !important;
	text-align: center !important;
	background: #f9fafb !important;
	transition: all 0.2s ease !important;
}

.wdm-file-upload-area:hover {
	border-color: #0257A1 !important;
	background: #f3f8fc !important;
}

.wdm-file-upload-area svg {
	width: 48px !important;
	height: 48px !important;
	margin: 0 auto 16px auto !important;
	color: #6b7280 !important;
	display: block !important;
}

.wdm-file-upload-area .wdm-upload-text {
	margin: 0 0 20px 0 !important;
	color: #4b5563 !important;
}

.wdm-file-upload-area .wdm-upload-text strong {
	display: block !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	margin-bottom: 4px !important;
}

.wdm-file-upload-area .wdm-upload-text small {
	display: block !important;
	font-size: 12px !important;
	color: #6b7280 !important;
}

.wdm-file-upload-area .wdm-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
}

.wdm-upload-button {
	background: #0257A1 !important;
	color: #ffffff !important;
	padding: 10px 24px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.wdm-upload-button:hover {
	background: #014783 !important;
	transform: none !important;
}

/* Form Action Buttons */
.wdm-settings-form-actions {
	display: flex !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	margin-top: 30px !important;
	padding-top: 20px !important;
	border-top: 1px solid #e5e7eb !important;
}

.wdm-settings-form-actions .button {
	padding: 12px 32px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: 'Open Sans', sans-serif !important;
	transition: all 0.2s ease !important;
	border: none !important;
	cursor: pointer !important;
}

.wdm-settings-form-actions .button-secondary {
	background: #ffffff !important;
	color: #4b5563 !important;
	border: 1px solid #d1d5db !important;
}

.wdm-settings-form-actions .button-secondary:hover {
	background: #f9fafb !important;
	border-color: #9ca3af !important;
}

.wdm-settings-form-actions .button-primary {
	background: #0257A1 !important;
	color: #ffffff !important;
}

.wdm-settings-form-actions .button-primary:hover {
	background: #014783 !important;
}

/* Profile Image Upload - Simple Version */
.wdm-profile-image-upload-simple {
	max-width: 100% !important;
}

.wdm-current-profile-image-display {
	position: relative !important;
	display: inline-block !important;
	margin-bottom: 20px !important;
}

.wdm-current-profile-image-display img {
	width: 120px !important;
	height: 120px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid #e5e7eb !important;
	display: block !important;
}

.wdm-remove-image-button {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	background: #ef4444 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
}

.wdm-remove-image-button:hover {
	background: #dc2626 !important;
	transform: scale(1.1) !important;
}

.wdm-remove-image-button svg {
	width: 16px !important;
	height: 16px !important;
}

.wdm-file-upload-simple {
	border: 2px dashed #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 20px !important;
	text-align: left !important;
	background-color: #fff !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
}

.wdm-file-upload-simple:hover,
.wdm-file-upload-simple.dragover {
	border-color: #0257A1 !important;
	background-color: #f8fafc !important;
}

.wdm-file-upload-simple svg {
	color: #64748b !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
}

.wdm-upload-simple-text {
	font-size: 14px !important;
	color: #475569 !important;
}

.wdm-upload-info {
	margin: 0 0 15px 0 !important;
	padding: 0 !important;
}

.wdm-upload-info small {
	font-size: 12px !important;
	color: #64748b !important;
}

.wdm-upload-button-simple {
	background-color: #fff !important;
	color: #0257A1 !important;
	border: 1px solid #0257A1 !important;
	padding: 8px 24px !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

.wdm-upload-button-simple:hover {
	background-color: #0257A1 !important;
	color: #fff !important;
}

.wdm-selected-filename {
	font-weight: 500 !important;
	font-size: 14px !important;
	color: #0257A1 !important;
	transition: all 0.3s ease !important;
}

/* Loading animation for upload */
@keyframes wdm-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.wdm-upload-button-simple:disabled {
	cursor: not-allowed !important;
	animation: wdm-pulse 1.5s ease-in-out infinite !important;
}

.wdm-remove-image-button:disabled {
	cursor: not-allowed !important;
	opacity: 0.5 !important;
}

/* Orders Page Styling */
.wdm-orders-content {
	padding: 0 !important;
}

.wdm-orders-content h2 {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	margin-bottom: 24px !important;
}

@media (min-width: 769px) {
	.wdm-orders-content h2 {
		font-weight: 700 !important;
	}
}

.wdm-orders-table-wrapper {
	background: #ffffff !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.wdm-orders-table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: transparent !important;
}

.wdm-orders-table thead {
	background: #d1f4e0 !important;
}

.wdm-orders-table thead tr {
	border-bottom: none !important;
}

.wdm-orders-header {
	padding: 16px 20px !important;
	text-align: left !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #1e293b !important;
	border: none !important;
	background: transparent !important;
}

.wdm-orders-header-actions {
	width: 140px !important;
}

.wdm-orders-table tbody tr {
	border-bottom: 1px solid #e5e7eb !important;
	transition: background-color 0.2s ease !important;
}

.wdm-orders-table tbody tr:last-child {
	border-bottom: none !important;
}

.wdm-orders-table tbody tr:hover {
	background-color: #f8fafc !important;
}

.wdm-orders-cell {
	padding: 16px 20px !important;
	font-size: 14px !important;
	color: #475569 !important;
	border: none !important;
	background: transparent !important;
}

.wdm-orders-cell-id {
	font-weight: 500 !important;
	color: #1e293b !important;
}

.wdm-orders-cell-date {
	color: #64748b !important;
}

.wdm-orders-cell-total {
	font-weight: 500 !important;
	color: #1e293b !important;
}

.wdm-order-status {
	display: inline-block !important;
	padding: 4px 12px !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.wdm-order-status-completed {
	background: transparent !important;
	color: #1e293b !important;
}

.wdm-order-status-processing {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.wdm-order-status-pending {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.wdm-order-status-on-hold {
	background: #e0e7ff !important;
	color: #3730a3 !important;
}

.wdm-order-status-cancelled,
.wdm-order-status-failed,
.wdm-order-status-refunded {
	background: #fee2e2 !important;
	color: #991b1b !important;
}

.wdm-order-view-btn {
	display: inline-block !important;
	padding: 8px 20px !important;
	background: #0257A1 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	border: none !important;
	text-align: center !important;
	white-space: nowrap !important;
}

.wdm-order-view-btn:hover {
	background: #014783 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 6px rgba(2, 87, 161, 0.2) !important;
}

.wdm-orders-total-wrapper {
	padding: 16px 20px !important;
	text-align: right !important;
	background: #ffffff !important;
	border-top: 2px solid #e5e7eb !important;
}

.wdm-orders-total-text {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
}

.wdm-orders-total-text .woocommerce-Price-amount {
	font-weight: 600 !important;
	color: #0257A1 !important;
}

.wdm-no-orders-message {
	padding: 40px 20px !important;
	text-align: center !important;
	background: #f8fafc !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	color: #64748b !important;
	font-size: 14px !important;
}

/* Responsive Design for Orders Table */
@media (max-width: 768px) {
	.wdm-orders-table thead {
		display: none !important;
	}

	.wdm-orders-table,
	.wdm-orders-table tbody,
	.wdm-orders-table tr,
	.wdm-orders-table td {
		display: block !important;
		width: 100% !important;
	}

	.wdm-orders-row {
		margin-bottom: 20px !important;
		border: 1px solid #e5e7eb !important;
		border-radius: 8px !important;
		overflow: hidden !important;
	}

	.wdm-orders-row:hover {
		background-color: transparent !important;
	}

	.wdm-orders-cell {
		padding: 12px 16px !important;
		border-bottom: 1px solid #f1f5f9 !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.wdm-orders-cell:last-child {
		border-bottom: none !important;
	}

	.wdm-orders-cell::before {
		content: attr(data-title) !important;
		font-weight: 600 !important;
		color: #64748b !important;
		margin-right: 10px !important;
	}

	.wdm-orders-cell-actions {
		justify-content: center !important;
	}

	.wdm-orders-cell-actions::before {
		display: none !important;
	}

	.wdm-order-view-btn {
		width: 100% !important;
		text-align: center !important;
	}

	.wdm-orders-total-wrapper {
		text-align: center !important;
		padding: 20px !important;
	}

	/* Orders pagination – mobile (matches course credits mobile) */
	.wdm-orders-pagination,
	.cpe-mobile-orders-pagination {
		margin-top: 24px;
		padding-top: 16px;
	}

	.wdm-orders-pagination .page-numbers,
	.cpe-mobile-orders-pagination .page-numbers {
		gap: 6px;
	}

	.wdm-orders-pagination .page-numbers a,
	.wdm-orders-pagination .page-numbers span,
	.cpe-mobile-orders-pagination .page-numbers a,
	.cpe-mobile-orders-pagination .page-numbers span {
		min-width: 40px;
		height: 40px;
		padding: 0 14px;
		font-size: 14px;
		border-radius: 8px;
	}
}

/* Address sub-section headings */
.wdm-settings-content .wdm-address-subheading {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #1e293b !important;
	margin: 0 0 16px 0 !important;
	padding-top: 8px !important;
}

.wdm-settings-content .woocommerce-billing-fields + .woocommerce-shipping-fields .wdm-address-subheading {
	margin-top: 8px !important;
	padding-top: 24px !important;
	border-top: 1px solid #e5e7eb !important;
}

/* Country / State select fields — height pins to 47px (12+12 padding + 21 line-height + 2 border) */
.wdm-settings-content select.woocommerce-Input {
	height: 47px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	cursor: pointer !important;
	color: #1e293b !important;
}

.wdm-settings-content select.woocommerce-Input option[value=""] {
	color: #9ca3af !important;
}

/* Select2 overrides — fixed 47px height matches .woocommerce-Input */
.wdm-settings-content .select2-container {
	width: 100% !important;
}

.wdm-settings-content .select2-container--default .select2-selection--single {
	height: 47px !important;
	padding: 0 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-family: 'Open Sans', sans-serif !important;
	background: #ffffff !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.wdm-settings-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 47px !important;
	color: #1e293b !important;
	font-size: 14px !important;
	font-family: 'Open Sans', sans-serif !important;
}

.wdm-settings-content .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 47px !important;
	top: 0 !important;
	right: 12px !important;
}

.wdm-settings-content .select2-container--default.select2-container--open .select2-selection--single,
.wdm-settings-content .select2-container--default .select2-selection--single:focus {
	border-color: #0257A1 !important;
	box-shadow: 0 0 0 3px rgba(2, 87, 161, 0.1) !important;
	outline: none !important;
}

.wdm-settings-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #9ca3af !important;
}

/* Mobile address sub-section headings */
.cpe-mobile-address-subheading {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #1e293b !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

.woocommerce-shipping-fields .cpe-mobile-address-subheading {
	margin-top: 8px !important;
	padding-top: 20px !important;
	border-top: 1px solid #e5e7eb !important;
}

/* Mobile country / state selects — height matches .cpe-mobile-form-input (47px) */
select.cpe-mobile-form-input {
	height: 47px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	cursor: pointer !important;
}

/* Responsive Design for Settings Form */
@media (max-width: 768px) {
	.wdm-settings-content .wdm-settings-row {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
	}
	
	.wdm-profile-image-upload {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	.wdm-profile-image-upload .wdm-current-profile-image {
		text-align: center !important;
	}
	
	.wdm-settings-form-actions {
		flex-direction: column !important;
	}
	
	.wdm-settings-form-actions .button {
		width: 100% !important;
	}
}