/* ---------- Page shell ---------- */

.cp-account-page {
	padding-top: 8px;
	padding-bottom: 100px;
}

.cp-account__title {
	font-family: var(--cp-font-heading);
	font-weight: 600;
	font-size: clamp(30px, 3vw, 44px);
	margin: 10px 0 40px;
	letter-spacing: -0.02em;
}

.cp-account__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 800px) {
	.cp-account__layout {
		grid-template-columns: 1fr;
	}
}

/* ---------- Sidebar navigation ---------- */

.cp-account__sidebar .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
}

.woocommerce-MyAccount-navigation {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	padding: 12px;
	position: sticky;
	top: 100px;
}

@media (max-width: 800px) {
	.woocommerce-MyAccount-navigation {
		position: static;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--cp-radius-md);
	font-size: 14px;
	font-weight: 600;
	color: var(--cp-text-muted);
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus-visible {
	color: var(--cp-text);
	background: rgba(255, 255, 255, 0.04);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--cp-accent);
	background: rgba(88, 211, 107, 0.1);
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--cp-border);
}

/* ---------- Content area ---------- */

.cp-account__main {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	padding: 32px;
	box-sizing: border-box;
	color: var(--cp-text-muted);
	font-size: 14.5px;
	line-height: 1.8;
}

.cp-account__main h2,
.cp-account__main h3 {
	font-family: var(--cp-font-heading);
	font-weight: 600;
	color: var(--cp-text);
	letter-spacing: -0.01em;
}

.cp-account__main a {
	color: var(--cp-accent);
}

.cp-account__main mark {
	background: none;
	color: var(--cp-text);
	font-weight: 600;
}

/* ---------- Orders / downloads tables ---------- */

.cp-account__main .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	margin: 0 0 24px;
}

.cp-account__main .shop_table thead th {
	text-align: left;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-text-faint);
	padding: 0 12px 14px;
	border-bottom: 1px solid var(--cp-border);
}

.cp-account__main .shop_table tbody td,
.cp-account__main .shop_table tbody th {
	padding: 16px 12px;
	border-bottom: 1px solid var(--cp-border-soft);
	color: var(--cp-text-muted);
}

.cp-account__main .shop_table tbody tr:last-child td,
.cp-account__main .shop_table tbody tr:last-child th {
	border-bottom: none;
}

.cp-account__main .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

.cp-account__main .woocommerce-button,
.cp-account__main .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--cp-accent-border);
	color: var(--cp-accent);
	border-radius: var(--cp-radius-pill);
	padding: 8px 18px;
	font-size: 12.5px;
	font-weight: 600;
	margin-left: 8px;
	white-space: nowrap;
}

.cp-account__main .woocommerce-button:hover,
.cp-account__main .button:hover {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

.cp-account__main .woocommerce-button.cancel,
.cp-account__main .button.cancel {
	border-color: rgba(229, 72, 77, 0.4);
	color: #e5484d;
}

.cp-account__main .woocommerce-button.cancel:hover,
.cp-account__main .button.cancel:hover {
	background: #e5484d;
	color: #fff;
}

/* Order status colour cues */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--cp-accent);
	font-weight: 600;
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	color: #e6b350;
	font-weight: 600;
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: #e5484d;
	font-weight: 600;
}

@media (max-width: 700px) {
	.cp-account__main .shop_table_responsive thead {
		display: none;
	}

	.cp-account__main .shop_table_responsive tbody tr {
		display: block;
		padding: 12px 0;
	}

	.cp-account__main .shop_table_responsive tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border-bottom: none;
		padding: 6px 0;
	}

	.cp-account__main .shop_table_responsive tbody td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--cp-text-faint);
	}
}

/* ---------- Addresses ---------- */

.woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* WC's own woocommerce-layout.css sets .col2-set .col-1/.col-2 to
   float:left/right + width:48% (3 classes) — beats a plain single-class
   .woocommerce-Address selector, so reset both here (with the specificity
   to win) and size the two cards via flex-basis instead. Flexbox is used
   rather than grid here since grid's implicit auto-placement was — for
   reasons that didn't resolve even after fixing the width conflict —
   putting the two cards on separate rows in alternating columns instead of
   side by side; flex-basis sidesteps that ambiguity entirely. */
.cp-account-page .woocommerce-Addresses .col-1.woocommerce-Address,
.cp-account-page .woocommerce-Addresses .col-2.woocommerce-Address {
	float: none;
	width: auto;
	/* flex-grow:0 — with grow:1, an accidental sub-pixel-rounding wrap (the
	   exact-fit calc(50% - Npx) math leaves too little margin) makes the
	   single wrapped item balloon to fill the whole row instead of just
	   wrapping narrower. Basis matches half the container's 16px gap so
	   the two items plus gap sum to comfortably under 100%, leaving real
	   slack for rounding instead of a razor-thin ~2px margin. */
	flex: 0 1 calc(50% - 24px);
	min-width: 240px;
}

.woocommerce-Address {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	padding: 20px;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

/* WC's own woocommerce.css puts a float-clearfix ::before/::after
   (.woocommerce-account .addresses .title — 3 classes; content:" ";
   display:table) on .title — harmless in a block layout, but once this
   header becomes a flex container that empty pseudo-element becomes a real
   (if tiny) flex item, shoving the heading rightward by its own width plus
   one "gap". Needs 4 classes here to beat WC's 3 and actually kill it. */
.cp-account-page .woocommerce-Addresses .woocommerce-Address-title.title::before,
.cp-account-page .woocommerce-Addresses .woocommerce-Address-title.title::after {
	content: none;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: 15px;
	margin: 0;
}

.woocommerce-Address-title .edit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid var(--cp-accent-border);
	border-radius: var(--cp-radius-pill);
	color: var(--cp-accent);
}

.woocommerce-Address-title .edit .cp-icon {
	width: 16px;
	height: 16px;
}

.woocommerce-Address-title .edit:hover {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.8;
	color: var(--cp-text-muted);
}

/* ---------- Forms (edit account / addresses / login / register) ----------
   WC's own base rule (.woocommerce form .form-row .input-text — 3 classes +
   the form element) beats a plain single-class selector, so these all get
   the .cp-account-page ancestor for a safe specificity margin, matching the
   fix already proven on the checkout page. */

.cp-account-page .form-row {
	margin: 0 0 18px;
}

.cp-account-page .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cp-text-muted);
	margin-bottom: 8px;
}

.cp-account-page .form-row label .required {
	color: var(--cp-accent);
	text-decoration: none;
}

/* Login/register fields (form-login.php) render the input directly in the
   .form-row with no wrapper span, but edit-account/edit-address fields (the
   same markup checkout.php uses) wrap it in .woocommerce-input-wrapper — so
   both variants need matching here. */
.cp-account-page .form-row .woocommerce-Input.input-text,
.cp-account-page .form-row .woocommerce-input-wrapper .input-text,
.cp-account-page .form-row .woocommerce-input-wrapper textarea,
.cp-account-page .form-row select:not(.select2-hidden-accessible),
.cp-account-page .form-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cp-radius-md);
	padding: 12px 16px;
	color: var(--cp-text);
	font-family: var(--cp-font-body);
	font-size: 14px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.25s ease;
}

.cp-account-page .form-row .woocommerce-Input.input-text:focus,
.cp-account-page .form-row .woocommerce-input-wrapper .input-text:focus,
.cp-account-page .form-row .woocommerce-input-wrapper textarea:focus {
	border-color: var(--cp-accent-border);
}

.cp-account-page .form-row .woocommerce-input-wrapper .input-text::placeholder,
.cp-account-page .form-row .woocommerce-input-wrapper textarea::placeholder {
	color: var(--cp-text-faint);
}

/* ---------- select2 (country / state dropdowns) ----------
   Same fix as checkout.css: WC's own arrow SVG has a hardcoded black stroke,
   invisible on this dark theme, swapped for the theme's chevron via mask. */

.cp-account-page .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cp-radius-md);
	height: 44px;
	padding: 0 4px;
	box-sizing: border-box;
}

.cp-account-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--cp-text);
	line-height: normal;
	padding-left: 12px;
}

.cp-account-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	display: flex;
	align-items: center;
}

.cp-account-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
	background: var(--cp-text-muted);
	-webkit-mask: url('../icons/chevron-down.svg') no-repeat center / contain;
	mask: url('../icons/chevron-down.svg') no-repeat center / contain;
	width: 14px;
	height: 14px;
	border: none;
}

.cp-account-page .form-row-first,
.cp-account-page .form-row-last {
	display: inline-block;
	width: calc(50% - 10px);
}

.cp-account-page .form-row-first {
	margin-right: 20px;
}

@media (max-width: 500px) {
	.cp-account-page .form-row-first,
	.cp-account-page .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

.cp-account-page .clear {
	clear: both;
}

.cp-account-page fieldset {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	padding: 20px;
	margin: 0 0 20px;
}

.cp-account-page fieldset legend {
	font-weight: 600;
	color: var(--cp-text);
	padding: 0 8px;
}

.cp-account-page .woocommerce-form__input-checkbox {
	accent-color: var(--cp-accent);
	margin-right: 8px;
}

.cp-account-page button[type="submit"],
.cp-account-page input[type="submit"] {
	background: linear-gradient(160deg, var(--cp-accent), var(--cp-accent-dark));
	color: var(--cp-accent-ink);
	font-family: var(--cp-font-body);
	font-weight: 700;
	font-size: 14px;
	padding: 13px 28px;
	border: none;
	border-radius: var(--cp-radius-pill);
	cursor: pointer;
	box-shadow: var(--cp-shadow-glow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cp-account-page button[type="submit"]:hover,
.cp-account-page input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 42px rgba(88, 211, 107, 0.42);
}

/* ---------- Login / register (2-column when both are enabled) ---------- */

#customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

@media (max-width: 700px) {
	#customer_login.u-columns {
		grid-template-columns: 1fr;
	}
}

.u-column1,
.u-column2 {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	padding: 24px;
	box-sizing: border-box;
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	font-size: 13.5px;
	margin-bottom: 14px;
}

.woocommerce-LostPassword {
	font-size: 13px;
	margin-top: 12px;
}

/* ---------- Pagination (order history) ---------- */

.cp-account__main .woocommerce-pagination {
	margin-top: 24px;
}

.cp-account__main .woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* WC's own woocommerce.css sets a border here (and border-right on each
	   li below) to draw the classic joined-box pagination strip — neither
	   of these rules had a competing `border` declaration of their own, so
	   WC's border rendered unchallenged regardless of winning every other
	   property via specificity. */
	border: none;
}

.cp-account__main .woocommerce-pagination .page-numbers li {
	display: flex;
	border: none;
}

.cp-account__main .woocommerce-pagination a.page-numbers,
.cp-account__main .woocommerce-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: var(--cp-radius-pill);
	border: 1px solid transparent;
	color: var(--cp-text-muted);
	font-size: 13px;
	font-weight: 600;
	box-sizing: border-box;
}

.cp-account__main .woocommerce-pagination a.page-numbers:hover {
	border-color: var(--cp-accent-border);
	color: var(--cp-accent);
}

.cp-account__main .woocommerce-pagination span.page-numbers.current {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

/* ---------- Wordfence 2FA account tab ----------
   Wordfence ships its own admin-style white cards (.wfls-block) for the
   "Wordfence 2FA" endpoint under My Account. Restyled here to match the
   theme's other account cards instead of standing out as an unstyled
   plugin box. */

.cp-account-page .wfls-block {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	overflow: hidden;
	margin-bottom: 20px;
}

.cp-account-page .wfls-block-header {
	padding: 16px 24px;
}

.cp-account-page .wfls-block-header-border-bottom {
	border-bottom: 1px solid var(--cp-border);
}

.cp-account-page .wfls-block-title,
.cp-account-page .wfls-block-title strong {
	color: var(--cp-text);
	font-family: var(--cp-font-heading);
	font-weight: 600;
	font-size: 15px;
}

.cp-account-page .wfls-block-content {
	padding: 20px 24px 24px;
	color: var(--cp-text-muted);
	font-size: 14px;
	line-height: 1.7;
}

.cp-account-page .wfls-block-content p {
	margin: 0 0 12px;
}

.cp-account-page .wfls-block-content p:last-child {
	margin-bottom: 0;
}

.cp-account-page .wfls-btn.wfls-btn-default {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--cp-accent-border);
	color: var(--cp-accent);
	padding: 10px 22px;
	border-radius: var(--cp-radius-pill);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.cp-account-page .wfls-btn.wfls-btn-default:hover,
.cp-account-page .wfls-btn.wfls-btn-default:focus-visible {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}