/*
 * My Account.
 *
 * Enqueued on is_account_page() only (functions.php).
 *
 * DELIBERATELY CSS-ONLY FOR THE AUTH FORMS.
 *
 * The Phase 6 plan lists form-login.php, form-lost-password.php,
 * form-reset-password.php, form-edit-account.php and form-edit-address.php as
 * templates to override. They are not overridden, and that is a considered
 * decision rather than an omission: WooCommerce's versions already carry
 * `wp_nonce_field()`, correct `autocomplete` tokens (`username`,
 * `current-password`, `new-password`), `required` + `aria-required`, and real
 * `<label for>` pairs. What they lack is styling, and styling is what CSS is
 * for.
 *
 * Retyping a form whose job is to accept credentials, purely to change how it
 * looks, is where a nonce or an autocomplete token quietly goes missing. The
 * shell, the navigation and the dashboard ARE overridden, because those needed
 * markup changes.
 */

/* ── Layout ────────────────────────────────────────────────────────*/

.kyrex-account {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.kyrex-account {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3rem;
	}
}

/* ── Navigation ────────────────────────────────────────────────────
   A vertical list at desktop; a horizontal, scrollable tab row on mobile,
   which is the same pattern as the occasion chips so the two read as one
   family. */

.kyrex-account__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.kyrex-account__nav-link {
	display: block;
	padding: 0.625rem 0.875rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	/* Keep each label on one line — "Account details" and "Log out" wrapped
	   awkwardly at 14rem with wider tracking. */
	white-space: nowrap;
	color: var(--kyrex-charcoal-muted);
	border-left: 2px solid transparent;
	border-radius: 0 var(--kyrex-radius-sm) var(--kyrex-radius-sm) 0;
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.kyrex-account__nav-link:hover {
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
}

.kyrex-account__nav-link:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
}

/* WooCommerce marks the current endpoint with `is-active` on the <li>, and the
   template also sets aria-current — so the state is conveyed to assistive
   technology as well as visually, not by colour alone. */
.woocommerce-MyAccount-navigation li.is-active .kyrex-account__nav-link {
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border-left-color: var(--kyrex-accent);
	font-weight: 600;
}

@media (max-width: 899px) {
	.kyrex-account__nav {
		overflow-x: auto;
		scrollbar-width: thin;
		border-bottom: 1px solid var(--kyrex-border);
		margin-bottom: 0.5rem;
	}

	.kyrex-account__nav-list {
		flex-direction: row;
		gap: 0.25rem;
		width: max-content;
		min-width: 100%;
	}

	.kyrex-account__nav-link {
		white-space: nowrap;
		border-left: 0;
		border-bottom: 2px solid transparent;
		border-radius: 0;
	}

	.woocommerce-MyAccount-navigation li.is-active .kyrex-account__nav-link {
		border-left: 0;
		border-bottom-color: var(--kyrex-accent);
		background: none;
	}
}

/* ── Content ───────────────────────────────────────────────────────*/

.kyrex-account__content h2,
.kyrex-account__content h3,
.kyrex-account h2 {
	font-family: var(--kyrex-font-display);
	font-weight: 600;
	color: var(--kyrex-charcoal);
	margin: 0 0 1rem;
}

.kyrex-account__content {
	font-family: var(--kyrex-font-body);
	color: var(--kyrex-charcoal);
}

.kyrex-account__greeting {
	font-size: 1.0625rem;
	margin: 0 0 1.25rem;
}

/* ── Dashboard: next booking ───────────────────────────────────────*/

.kyrex-account__next {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.kyrex-account__next-title {
	font-size: 1.25rem;
	margin: 0 0 0.375rem;
}

.kyrex-account__next-when {
	margin: 0 0 1rem;
	color: var(--kyrex-charcoal-muted);
	font-size: 0.9375rem;
}

.kyrex-account__next--empty {
	--kyrex-accent: var(--kyrex-border);
}

.kyrex-account__logout {
	margin-top: 2rem;
	font-size: 0.8125rem;
}

.kyrex-account__logout a {
	color: var(--kyrex-charcoal-muted);
	border-bottom: 1px solid var(--kyrex-gold);
	text-decoration: none;
}

/* ── Auth forms (styled, not rewritten) ────────────────────────────*/

/*
 * WooCommerce clears floats on this container with
 * `.col2-set::before / ::after { content: " "; display: table }`.
 *
 * In a GRID container those pseudo-elements are not decoration — they are grid
 * items. They took cells 1 and 3, so Login landed in column 2 row 1 and
 * Register in column 1 row 2: the two panels rendered diagonally offset from
 * each other. Nothing here floats any more, so the clearfix has no job left.
 */
.woocommerce-account .u-columns#customer_login::before,
.woocommerce-account .u-columns#customer_login::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .u-columns#customer_login {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.woocommerce-account .u-columns#customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .u-columns#customer_login .col-1,
.woocommerce-account .u-columns#customer_login .col-2 {
	width: 100%;
	float: none;
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-top: 3px solid var(--kyrex-accent);
	padding: 1.75rem;
}

.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 0 1.125rem;
	padding: 0;
}

.woocommerce-account label {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--kyrex-charcoal);
}

.woocommerce-account .required {
	color: var(--kyrex-wine);
	text-decoration: none;
	border: 0;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.9375rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-sm);
}

.woocommerce-account input:focus-visible,
.woocommerce-account textarea:focus-visible,
.woocommerce-account select:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 1px;
	border-color: var(--kyrex-charcoal);
}

/* "Remember me" wraps its checkbox in the label, so the whole line is a hit
   target rather than a 16px box. */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: auto;
	accent-color: var(--kyrex-charcoal);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--kyrex-charcoal-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--kyrex-gold);
}

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: 0.75rem;
	color: var(--kyrex-charcoal-muted);
}

/* ── Addresses ─────────────────────────────────────────────────────*/

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce-Address {
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	padding: 1.25rem;
	width: 100%;
	float: none;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.woocommerce-account address {
	font-style: normal;
	color: var(--kyrex-charcoal-muted);
	line-height: 1.6;
	margin: 0.5rem 0 0;
}

/* ── Orders table ──────────────────────────────────────────────────
   The Booking column is added by kyrex-core via
   `woocommerce_account_orders_columns` — see includes/Account.php for why
   that is a filter rather than a template override. */

.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-orders-table__header {
	text-align: left;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kyrex-charcoal-muted);
	padding: 0 0.75rem 0.75rem 0;
	border-bottom: 1px solid var(--kyrex-border);
}

.woocommerce-account .woocommerce-orders-table__cell {
	padding: 1rem 0.75rem 1rem 0;
	border-bottom: 1px solid var(--kyrex-border);
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.kyrex-order-booking {
	display: block;
	color: var(--kyrex-charcoal);
	font-weight: 600;
}

.kyrex-order-booking--none {
	color: var(--kyrex-charcoal-muted);
	font-weight: 400;
}

.kyrex-order-booking__more {
	display: block;
	font-size: 0.75rem;
	color: var(--kyrex-charcoal-muted);
}

.woocommerce-account .woocommerce-orders-table mark.order-status,
.woocommerce-account mark.order-status {
	background: none;
	color: var(--kyrex-charcoal);
	font-weight: 600;
}

/* Stacked cards at narrow widths, labels re-attached from data-title —
   the same treatment the cart table gets. */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-orders-table thead {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.woocommerce-account .woocommerce-orders-table tbody tr {
		display: block;
		padding: 1rem 0;
		border-bottom: 1px solid var(--kyrex-border);
	}

	.woocommerce-account .woocommerce-orders-table__cell {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.25rem 0;
		border-bottom: 0;
	}

	.woocommerce-account .woocommerce-orders-table__cell::before {
		content: attr(data-title);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--kyrex-charcoal-muted);
		flex: none;
	}
}

/* ── Single order view ─────────────────────────────────────────────
   Slot and add-ons already render here: they are visible order-item meta,
   which order-details-item.php prints via wc_display_item_meta(). Nothing
   needed adding — only styling. */

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	margin-top: 2rem;
}

.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
	text-align: left;
	padding: 0.75rem 0.75rem 0.75rem 0;
	border-bottom: 1px solid var(--kyrex-border);
	vertical-align: top;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta {
	list-style: none;
	margin: 0.375rem 0 0;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--kyrex-charcoal-muted);
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta li {
	margin: 0;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta strong {
	color: var(--kyrex-charcoal);
	font-weight: 600;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta p {
	display: inline;
	margin: 0;
}