/* ============================================================
   My Account Pages — Premium UI
   Scope: body.woocommerce-account
   Mirrors the checkout.css design language — same tokens,
   same card style, same form field treatment.
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────────────────────── */
body.woocommerce-account {
	--ac-white:        #ffffff;
	--ac-bg:           #f4f4f5;
	--ac-card-bg:      #ffffff;
	--ac-border:       #e4e4e7;
	--ac-border-hover: #a1a1aa;
	--ac-border-focus: #0a0a0a;
	--ac-text:         #0a0a0a;
	--ac-muted:        #71717a;
	--ac-danger:       #dc2626;
	--ac-shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--ac-shadow-md:    0 2px 8px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
	--ac-shadow-focus: 0 0 0 3px rgba(0,0,0,0.07);
	--ac-shadow-btn:   0 6px 20px rgba(0,0,0,0.22);
	--ac-radius-sm:    8px;
	--ac-radius-md:    12px;
	--ac-radius-lg:    16px;
	--ac-ease:         0.2s ease;
}

/* ── Page background ─────────────────────────────────────────────────────── */
body.woocommerce-account {
	background: var(--ac-bg) !important;
}

/* ── Hide WordPress page chrome ──────────────────────────────────────────── */
body.woocommerce-account .entry-header,
body.woocommerce-account h1.entry-title,
body.woocommerce-account .entry-footer {
	display: none !important;
}

body.woocommerce-account .entry-content,
body.woocommerce-account article.type-page {
	padding: 0 !important;
	margin: 0 !important;
}

/* Full-width main — section provides its own container */
body.woocommerce-account main.site-main {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	background: var(--ac-bg) !important;
}

/* ── Account section wrapper ─────────────────────────────────────────────── */
body.woocommerce-account .woocommerce {
	display: flex !important;
	gap: 28px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 48px 24px 80px !important;
	align-items: flex-start !important;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 220px !important;
	flex-shrink: 0 !important;
	position: sticky !important;
	top: 24px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px !important;
	background: var(--ac-card-bg) !important;
	border: 1px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-md) !important;
	box-shadow: var(--ac-shadow-sm) !important;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block !important;
	padding: 10px 14px !important;
	border-radius: var(--ac-radius-sm) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--ac-muted) !important;
	text-decoration: none !important;
	transition: background var(--ac-ease), color var(--ac-ease) !important;
	line-height: 1.4 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--ac-bg) !important;
	color: var(--ac-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--ac-text) !important;
	color: var(--ac-white) !important;
	font-weight: 600 !important;
}

/* Logout — red tint on hover */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #fff1f1 !important;
	color: var(--ac-danger) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout.is-active a {
	background: var(--ac-danger) !important;
	color: var(--ac-white) !important;
}

/* ============================================================
   CONTENT CARD
   ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 !important;
	min-width: 0 !important;
	background: var(--ac-card-bg) !important;
	border: 1px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-md) !important;
	padding: 36px 36px 40px !important;
	box-shadow: var(--ac-shadow-sm) !important;
}

/* Section headings inside content */
body.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ac-text) !important;
	text-transform: none !important;
	letter-spacing: -0.2px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ac-text) !important;
	text-transform: none !important;
	margin: 0 0 14px !important;
}

/* Intro text */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 13.5px !important;
	color: var(--ac-muted) !important;
	margin-bottom: 24px !important;
}

/* ============================================================
   FORM FIELDS  (matches checkout.css exactly)
   ============================================================ */

/* Labels */
body.woocommerce-account .woocommerce-MyAccount-content label,
body.woocommerce-account .woocommerce-MyAccount-content .form-row label,
body.woocommerce-account .woocommerce-MyAccount-content legend {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #000000 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: 6px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content label .required,
body.woocommerce-account .woocommerce-MyAccount-content label .optional {
	font-size: 11px !important;
	color: var(--ac-muted) !important;
	font-weight: 400 !important;
}

/* Text inputs */
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input.woocommerce-Input {
	height: 48px !important;
	width: 100% !important;
	padding: 0 14px !important;
	background: var(--ac-white) !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: var(--ac-text) !important;
	transition: border-color var(--ac-ease), box-shadow var(--ac-ease) !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content input.woocommerce-Input:focus {
	border-color: var(--ac-border-focus) !important;
	box-shadow: var(--ac-shadow-focus) !important;
}

/* Native <select> */
body.woocommerce-account .woocommerce-MyAccount-content select {
	height: 48px !important;
	width: 100% !important;
	padding: 0 14px !important;
	background: var(--ac-white) !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: var(--ac-text) !important;
	transition: border-color var(--ac-ease) !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Select2 container */
body.woocommerce-account .woocommerce-MyAccount-content .select2-container {
	width: 100% !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
	height: 48px !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	background: var(--ac-white) !important;
	transition: border-color var(--ac-ease), box-shadow var(--ac-ease) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	height: 48px !important;
	line-height: 48px !important;
	padding: 0 40px 0 14px !important;
	font-size: 14px !important;
	color: var(--ac-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
	right: 12px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-account .woocommerce-MyAccount-content .select2-container--focus .select2-selection--single {
	border-color: var(--ac-border-focus) !important;
	box-shadow: var(--ac-shadow-focus) !important;
}

/* Password input wrapper */
body.woocommerce-account .woocommerce-MyAccount-content .password-input {
	position: relative !important;
	display: block !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .password-input input {
	padding-right: 46px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	color: var(--ac-muted) !important;
	font-size: 13px !important;
	line-height: 1 !important;
}

/* form-row spacing */
body.woocommerce-account .woocommerce-MyAccount-content .form-row,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row {
	margin-bottom: 16px !important;
	padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--first {
	float: left !important;
	width: calc(50% - 8px) !important;
	clear: left !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row-last,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--last {
	float: right !important;
	width: calc(50% - 8px) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row-wide,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--wide {
	width: 100% !important;
	clear: both !important;
	float: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .clear {
	clear: both !important;
}

/* Validation error highlight */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-invalid input,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-invalid select {
	border-color: var(--ac-danger) !important;
}

/* ── Fieldset (Password Change section) ──────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-md) !important;
	padding: 24px !important;
	margin: 24px 0 !important;
	background: #fafafa !important;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--ac-text) !important;
	text-transform: none !important;
	padding: 0 10px !important;
	margin-bottom: 0 !important;
	letter-spacing: 0 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 52px !important;
	padding: 0 32px !important;
	background: var(--ac-text) !important;
	background-color: var(--ac-text) !important;
	color: var(--ac-white) !important;
	border: none !important;
	border-radius: var(--ac-radius-lg) !important;
	font-size: 15px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background var(--ac-ease), transform var(--ac-ease), box-shadow var(--ac-ease) !important;
	text-decoration: none !important;
	margin-top: 8px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: #222222 !important;
	background-color: #222222 !important;
	color: var(--ac-white) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--ac-shadow-btn) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:active,
body.woocommerce-account .woocommerce-MyAccount-content .button:active {
	transform: translateY(0) !important;
	box-shadow: none !important;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
	background: #f0f9ff !important;
	border: 1px solid #bae6fd !important;
	border-left: 4px solid #0ea5e9 !important;
	border-radius: var(--ac-radius-sm) !important;
	padding: 14px 18px !important;
	font-size: 13.5px !important;
	color: var(--ac-text) !important;
	margin-bottom: 20px !important;
	list-style: none !important;
	box-shadow: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	border-left-color: #22c55e !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
	background: #fff1f2 !important;
	border-color: #fecdd3 !important;
	border-left-color: var(--ac-danger) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a {
	color: #fff !important;
	font-weight: 600 !important;
}

/* Remove WC's default triangle decoration */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
	content: none !important;
}

/* ============================================================
   ADDRESSES PAGE
   ============================================================ */

/* Two-column address grid */
body.woocommerce-account .woocommerce-MyAccount-content .u-columns.addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	background: var(--ac-bg) !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-md) !important;
	padding: 22px 24px 24px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 14px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--ac-border) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	font-size: 14px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ac-muted) !important;
	text-decoration: none !important;
	border: 1px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	padding: 5px 12px !important;
	transition: border-color var(--ac-ease), color var(--ac-ease) !important;
	white-space: nowrap !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
	border-color: var(--ac-text) !important;
	color: var(--ac-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
	font-size: 13.5px !important;
	color: var(--ac-muted) !important;
	font-style: normal !important;
	line-height: 1.65 !important;
}

/* ============================================================
   ORDERS TABLE
   ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 13.5px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table thead th,
body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead th {
	padding: 10px 16px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	color: var(--ac-muted) !important;
	border-bottom: 1.5px solid var(--ac-border) !important;
	background: transparent !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td,
body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td {
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--ac-border) !important;
	color: var(--ac-text) !important;
	vertical-align: middle !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child td {
	border-bottom: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	font-weight: 700 !important;
	color: var(--ac-text) !important;
	text-decoration: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
	text-decoration: underline !important;
}

/* Order status badge */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table mark.order-status {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	background: #f4f4f5 !important;
	color: var(--ac-muted) !important;
	box-shadow: none !important;
}

/* View order link in table */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table .button {
	height: 34px !important;
	padding: 0 14px !important;
	font-size: 12.5px !important;
	border-radius: var(--ac-radius-sm) !important;
	margin-top: 0 !important;
}

/* ── Display name description ────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content span#account_display_name_description {
	font-size: 12px !important;
	color: var(--ac-muted) !important;
	display: block !important;
	margin-top: 6px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content span#account_display_name_description em {
	font-style: normal !important;
}

/* ── Dashboard welcome text ──────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content > p {
	font-size: 14px !important;
	color: var(--ac-muted) !important;
	line-height: 1.65 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content > p a {
	color: var(--ac-text) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
	body.woocommerce-account .woocommerce {
		flex-direction: column !important;
		padding: 28px 16px 60px !important;
		gap: 20px !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100% !important;
		position: static !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		flex: 0 0 auto !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: 8px 12px !important;
		font-size: 13px !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		padding: 24px 20px 28px !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .u-columns.addresses {
		grid-template-columns: 1fr !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
	body.woocommerce-account .woocommerce-MyAccount-content .form-row-last,
	body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--first,
	body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--last {
		width: 100% !important;
		float: none !important;
	}
}