/* ==========================================================================
   MaxCloud Mart - WooCommerce My Account Custom Styles
   Premium dashboard redesign targeting the actual DOM structure
   ========================================================================== */

:root {
	--acc-navy: #0d142d;
	--acc-navy-light: #111936;
	--acc-blue: #62D4FF;
	--acc-purple: #6557FF;
	--acc-pink: #FF5CA8;
	--acc-bg: #f4f7fe;
	--acc-card-bg: #ffffff;
	--acc-text-dark: #0a1128;
	--acc-text-muted: #6b7280;
	--acc-border: #e5e7eb;
}

/* ==========================================================================
   1. OUTER WRAPPER OVERRIDES
   page.php wraps content in .max-w-4xl (only 896px). We must break out.
   Also content-page.php wraps in .entry-content.prose which constrains.
   ========================================================================== */

.woocommerce-account #primary.content-area {
	background-color: var(--acc-bg) !important;
	padding: 0 !important;
}

/* Kill the max-w-4xl constraint from page.php line 17 */
.woocommerce-account .max-w-4xl {
	max-width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Kill any prose constraints on the entry-content */
.woocommerce-account .entry-content {
	max-width: 100% !important;
	padding: 0 !important;
}

/* Also kill padding on site-container within the account page */
.woocommerce-account #primary > .site-container {
	max-width: 100% !important;
	padding: 0 !important;
}

/* Hide the duplicate entry-title rendered by content-page.php */
.woocommerce-account .entry-page > .entry-header {
	display: none !important;
}

/* Hide the entry-media too (no thumbnail on account page) */
.woocommerce-account .entry-page > .entry-media {
	display: none !important;
}

/* ==========================================================================
   2. MY ACCOUNT WRAPPER (.myaccount-page-area from my-account.php)
   ========================================================================== */

.myaccount-page-area {
	background-color: var(--acc-bg) !important;
	border: none !important;
	padding: 40px 0 80px !important;
	min-height: 70vh;
}

.myaccount-page-area > .site-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* "Customer Account" heading */
.myaccount-page-header {
	border-bottom: none !important;
	margin-bottom: 32px !important;
	padding-bottom: 0 !important;
}

.myaccount-page-header .page-title {
	font-size: 2rem;
	font-weight: 900;
	color: var(--acc-text-dark);
	letter-spacing: -0.5px;
}

/* ==========================================================================
   3. NAVIGATION SIDEBAR
   ========================================================================== */

/* Override the Tailwind bg-surface / border on the <nav> element */
.woocommerce-MyAccount-navigation {
	background: var(--acc-navy) !important;
	border-radius: 24px !important;
	border: none !important;
	box-shadow: 0 20px 50px rgba(10, 17, 40, 0.15) !important;
	padding: 10px !important;
	overflow: hidden;
	position: sticky;
	top: 100px;
	width: 100% !important;
	float: none !important;
}

/* Override Tailwind <ul> styles (flex flex-col divide-y) */
.woocommerce-MyAccount-navigation ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: none !important;
}

/* Remove Tailwind divide borders between li elements */
.woocommerce-MyAccount-navigation ul > li {
	border: none !important;
	padding: 0 !important;
}

/* Style all nav links - override Tailwind inline classes */
.woocommerce-MyAccount-navigation li a {
	color: rgba(255, 255, 255, 0.65) !important;
	background: transparent !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 14px 20px !important;
	border-radius: 16px !important;
	transition: all 0.25s ease !important;
	box-shadow: none !important;
	text-decoration: none !important;
	display: block !important;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: white !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* Active state */
.woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(101, 87, 255, 0.2) !important;
	color: white !important;
	font-weight: 700 !important;
	border-left: 3px solid var(--acc-purple) !important;
}

/* Logout link */
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--acc-pink) !important;
	margin-top: 8px;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: rgba(255, 92, 168, 0.1) !important;
	color: var(--acc-pink) !important;
}

/* ==========================================================================
   4. CONTENT AREA
   ========================================================================== */

/* Override Tailwind bg-surface / rounded-2xl / border / p-6 */
.woocommerce-MyAccount-content {
	background: var(--acc-card-bg) !important;
	border-radius: 28px !important;
	border: 1px solid var(--acc-border) !important;
	box-shadow: 0 15px 50px rgba(10, 17, 40, 0.06) !important;
	padding: 40px !important;
	width: 100% !important;
	float: none !important;
}

@media (max-width: 768px) {
	.woocommerce-MyAccount-content {
		padding: 24px 20px !important;
		border-radius: 20px !important;
	}
}

.woocommerce-MyAccount-content p {
	color: #4a5568;
	line-height: 1.75;
	font-size: 15px;
}

.woocommerce-MyAccount-content a:not(.button):not(.edit) {
	color: var(--acc-purple);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}

.woocommerce-MyAccount-content a:not(.button):not(.edit):hover {
	color: var(--acc-pink);
}

/* ==========================================================================
   5. ADDRESSES PAGE
   Uses body.woocommerce-account prefix for maximum specificity
   ========================================================================== */

/* Force the single-column address grid */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 24px !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* Override WooCommerce default float + width on address columns */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2,
body.woocommerce-account .woocommerce-MyAccount-content .addresses .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .addresses .col-2 {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 28px !important;
	background: var(--acc-bg) !important;
	border: 1px solid var(--acc-border) !important;
	border-radius: 20px !important;
	transition: box-shadow 0.3s ease !important;
	display: flex !important;
	flex-direction: column !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address:hover {
	box-shadow: 0 8px 25px rgba(10, 17, 40, 0.08);
}

/* Address title row */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title,
body.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 16px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--acc-border) !important;
	flex-wrap: nowrap !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	color: var(--acc-text-dark) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	flex-shrink: 0;
}

/* Style the "Edit" links as pill buttons */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	display: inline-flex !important;
	align-items: center;
	color: var(--acc-purple) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	padding: 6px 14px !important;
	border-radius: 8px !important;
	background: rgba(101, 87, 255, 0.08) !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
	flex-shrink: 0;
	margin-left: 12px;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {
	background: var(--acc-purple) !important;
	color: white !important;
}

/* Address text */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
	font-style: normal !important;
	line-height: 1.9 !important;
	color: #4a5568 !important;
	font-size: 14px !important;
}

/* ==========================================================================
   6. TABLES (Orders, Downloads)
   ========================================================================== */

.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid var(--acc-border) !important;
	margin-bottom: 24px !important;
}

.woocommerce-MyAccount-content table.shop_table thead {
	background: var(--acc-bg) !important;
}

.woocommerce-MyAccount-content table.shop_table th {
	padding: 14px 20px !important;
	font-weight: 800 !important;
	color: var(--acc-text-dark) !important;
	text-align: left !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.2px !important;
	border-bottom: 1px solid var(--acc-border) !important;
}

.woocommerce-MyAccount-content table.shop_table td {
	padding: 16px 20px !important;
	border-top: 1px solid #f3f4f6 !important;
	color: #4a5568 !important;
	font-size: 14px !important;
}

.woocommerce-MyAccount-content table.shop_table tbody tr {
	transition: background 0.15s ease;
}

.woocommerce-MyAccount-content table.shop_table tbody tr:hover {
	background: #f9fafb;
}

/* Table action buttons */
.woocommerce-MyAccount-content table.shop_table .button,
.woocommerce-MyAccount-content table.shop_table a.button {
	background: white !important;
	border: 1px solid var(--acc-border) !important;
	color: var(--acc-text-dark) !important;
	padding: 8px 16px !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	display: inline-block !important;
}

.woocommerce-MyAccount-content table.shop_table .button:hover,
.woocommerce-MyAccount-content table.shop_table a.button:hover {
	background: var(--acc-purple) !important;
	color: white !important;
	border-color: var(--acc-purple) !important;
}

/* ==========================================================================
   7. FORMS & INPUTS (Account Details, Edit Address)
   ========================================================================== */

.woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-MyAccount-content .form-row {
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content label {
	display: block;
	font-weight: 700;
	color: var(--acc-text-dark);
	margin-bottom: 8px;
	font-size: 14px;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	background: #f9fafb;
	color: var(--acc-text-dark);
	font-family: inherit;
	transition: all 0.25s ease;
	font-size: 15px;
	-webkit-appearance: none;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: var(--acc-purple);
	box-shadow: 0 0 0 4px rgba(101, 87, 255, 0.1);
	background: white;
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--acc-border);
	border-radius: 20px;
	padding: 28px;
	margin-top: 32px;
	background: #fafbff;
}

.woocommerce-MyAccount-content legend {
	font-weight: 800;
	color: var(--acc-text-dark);
	padding: 0 12px;
	font-size: 18px;
}

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

.woocommerce-MyAccount-content .button[type="submit"],
.woocommerce-MyAccount-content button.button:not(.wp-element-button),
.woocommerce-MyAccount-content input[type="submit"] {
	background: linear-gradient(135deg, var(--acc-purple), var(--acc-pink)) !important;
	color: white !important;
	padding: 14px 32px !important;
	border: none !important;
	border-radius: 50px !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 8px 20px rgba(101, 87, 255, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.woocommerce-MyAccount-content .button[type="submit"]:hover,
.woocommerce-MyAccount-content button.button:not(.wp-element-button):hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(101, 87, 255, 0.35) !important;
}

/* ==========================================================================
   9. NOTICES & MESSAGES
   ========================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	background: var(--acc-card-bg) !important;
	border-left: 4px solid var(--acc-purple);
	border-radius: 14px;
	padding: 18px 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	color: #4a5568;
	font-weight: 500;
	font-size: 14px;
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #ef4444;
}

.woocommerce-account .woocommerce-message {
	border-left-color: #10B981;
}

/* ==========================================================================
   10. DASHBOARD GREETING
   ========================================================================== */

.woocommerce-MyAccount-content > p:first-child {
	font-size: 16px;
	line-height: 1.8;
}

.woocommerce-MyAccount-content mark {
	background: rgba(101, 87, 255, 0.08) !important;
	color: var(--acc-purple) !important;
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 700;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
	.woocommerce-MyAccount-navigation {
		position: static !important;
		margin-bottom: 24px !important;
	}

	/* Horizontal scrolling nav on mobile */
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		gap: 6px !important;
		padding-bottom: 4px !important;
	}

	.woocommerce-MyAccount-navigation li a {
		white-space: nowrap !important;
		padding: 10px 16px !important;
		font-size: 13px !important;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout a {
		margin-top: 0 !important;
	}
}