/*
 * My Account: the storefront's top bar, plus the orders card list.
 *
 * The .wvs-top-nav block below is the same bar the Vue storefront paints, and
 * has to stay in step with the copy inlined from src/styles/storefront.css.
 * It is duplicated rather than shared because storefront pages inline their CSS
 * (no request before the LCP paint) while account pages — private, never cached
 * — are better off with one small cacheable file.
 */

/* ── Layout: one column, no sidebar ─────────────────────────────────────── */

.woocommerce-account .wvs-account-nav {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.woocommerce-account .wvs-account-nav + .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	max-width: none;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Themes decorate account-menu links: an icon chip in a :before, a divider
 * under each item, their own display and padding. All of that assumes a
 * vertical list of text, and on this bar it shows up as stray squares and
 * lines. These resets carry two class names, so they outrank a theme rule
 * like `.woocommerce-MyAccount-navigation ul li a` (one class, three
 * elements) without reaching for !important.
 */
.wvs-account-nav .wvs-top-nav__link::before,
.wvs-account-nav .wvs-top-nav__link::after,
.wvs-account-nav .wvs-top-nav__item::before,
.wvs-account-nav .wvs-top-nav__item::after {
	content: none;
	display: none;
}

.wvs-account-nav .wvs-top-nav__item {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	list-style: none;
}

/* Structure only — colour stays with the rules below, so .is-active still wins. */
.wvs-account-nav .wvs-top-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .35rem .2rem;
	text-decoration: none;
}

/* ── Top bar (mirror of the storefront rules) ───────────────────────────── */

.wvs-top-nav { background: #fff; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; padding: 0 1rem; }
.wvs-top-nav__row, .wvs-top-nav__links { max-width: 1200px; margin-left: auto; margin-right: auto; }
.wvs-top-nav__row { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; }
.wvs-top-nav__search { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; border: 2px solid #2563eb; border-radius: 999px; background: #fff; padding-left: 2.1rem; }
.wvs-top-nav__search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); display: flex; color: #6b7280; pointer-events: none; }
.wvs-top-nav__search-icon svg { width: 18px; height: 18px; }
.wvs-top-nav__search-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: .95rem; color: #111827; padding: .55rem .25rem; -webkit-appearance: none; appearance: none; }
.wvs-top-nav__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.wvs-top-nav__search-btn { flex: none; border: 0; background: none; color: #2563eb; font: inherit; font-size: .95rem; font-weight: 700; padding: .55rem .95rem; border-radius: 999px; cursor: pointer; }
.wvs-top-nav__search-btn:hover { color: #1d4ed8; background: #eff6ff; }
.wvs-top-nav__search:focus-within { border-color: #1d4ed8; box-shadow: 0 0 0 3px #2563eb26; }
.wvs-top-nav__cart { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: #111827; text-decoration: none; border-radius: 50%; }
.wvs-top-nav__cart:hover { background: #f3f4f6; color: #111827; }
.wvs-top-nav__cart svg { width: 26px; height: 26px; }
.wvs-top-nav__links { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.wvs-top-nav__links::-webkit-scrollbar { display: none; }
.wvs-top-nav__list { display: flex; align-items: flex-start; gap: .25rem; list-style: none; margin: 0; padding: .15rem 0 .6rem; }
.wvs-top-nav__item { flex: none; }
.wvs-top-nav__link { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 4.6rem; padding: .35rem .2rem; color: #374151; text-decoration: none; font-size: .72rem; line-height: 1.2; text-align: center; border-radius: 8px; }
.wvs-top-nav__link:hover { background: #f9fafb; color: #111827; }
.wvs-top-nav__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #111827; }
.wvs-top-nav__icon svg { width: 24px; height: 24px; }
/* Two lines rather than an ellipsis: "Account details" is a real menu item, and
   "Account d…" tells a shopper nothing. Items stay the same width either way. */
.wvs-top-nav__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }

/* The endpoint being viewed. Colour alone would be too quiet on a phone. */
.wvs-top-nav__link.is-active { color: #1d4ed8; background: #eff6ff; font-weight: 600; }
.wvs-top-nav__link.is-active .wvs-top-nav__icon { color: #1d4ed8; }

@media (min-width: 768px) {
	.wvs-top-nav__list { flex-wrap: wrap; gap: .5rem; padding-bottom: .75rem; }
	.wvs-top-nav__link { width: 5.2rem; font-size: .75rem; }
}

/* ── Orders: status tabs ────────────────────────────────────────────────── */

.wvs-orders__tabs {
	margin: 0 0 1rem;
	border-bottom: 1px solid #e5e7eb;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.wvs-orders__tabs::-webkit-scrollbar { display: none; }

.wvs-orders__tablist {
	display: flex;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wvs-orders__tabitem { flex: none; }

.wvs-orders__tab {
	display: block;
	padding: .6rem .9rem;
	color: #4b5563;
	text-decoration: none;
	font-size: .9rem;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.wvs-orders__tab:hover { color: #111827; }

.wvs-orders__tab.is-active {
	color: #1d4ed8;
	font-weight: 600;
	border-bottom-color: #2563eb;
}

/* ── Orders: cards ──────────────────────────────────────────────────────── */

.wvs-orders__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.wvs-order {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}

.wvs-order__head {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: .65rem .85rem;
	border-bottom: 1px solid #f3f4f6;
	font-size: .85rem;
}

.wvs-order__number { font-weight: 700; color: #111827; text-decoration: none; }
.wvs-order__number:hover { color: #1d4ed8; }
.wvs-order__date { color: #6b7280; }

/* ── The two statuses, side by side ─────────────────────────────────────── */

.wvs-order__statuses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #f3f4f6;
}

.wvs-order__status {
	padding: .6rem .85rem;
	min-width: 0;
}

/* A divider between the columns, not around them. */
.wvs-order__status--parcel {
	border-left: 1px solid #f3f4f6;
	text-align: right;
}

.wvs-order__status-label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #9ca3af;
}

.wvs-order__status-value {
	display: block;
	margin-top: .15rem;
	font-size: .88rem;
	font-weight: 600;
	color: #c2410c;
	overflow-wrap: anywhere;
}

.wvs-order__status-note {
	display: block;
	margin-top: .1rem;
	font-size: .72rem;
	font-weight: 400;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* An order with no parcel yet is a statement of fact, not a warning. */
.wvs-order__status--parcel.is-untracked .wvs-order__status-value {
	color: #9ca3af;
	font-weight: 400;
	font-style: italic;
}

.wvs-order__status--delivered .wvs-order__status-value,
.wvs-order__status--wc-completed .wvs-order__status-value { color: #15803d; }

.wvs-order__status--wc-cancelled .wvs-order__status-value,
.wvs-order__status--wc-refunded .wvs-order__status-value,
.wvs-order__status--wc-failed .wvs-order__status-value,
.wvs-order__status--returned .wvs-order__status-value,
.wvs-order__status--failed .wvs-order__status-value { color: #b91c1c; }

.wvs-order__status--out_for_delivery .wvs-order__status-value { color: #1d4ed8; }
.wvs-order__status--pending .wvs-order__status-value,
.wvs-order__status--wc-pending .wvs-order__status-value { color: #6b7280; }

/* The whole product block is one link to the order. */
.wvs-order__items {
	display: block;
	padding: .25rem .85rem;
	color: inherit;
	text-decoration: none;
}

.wvs-order__item {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .6rem 0;
	border-bottom: 1px solid #f9fafb;
}

.wvs-order__item:last-child { border-bottom: 0; }

.wvs-order__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	overflow: hidden;
	background: #f3f4f6;
}

.wvs-order__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wvs-order__detail { flex: 1; min-width: 0; }

.wvs-order__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9rem;
	line-height: 1.35;
	color: #111827;
}

.wvs-order__meta {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	color: #6b7280;
}

.wvs-order__meta p { margin: 0; }

.wvs-order__amounts {
	flex: none;
	text-align: right;
	font-size: .85rem;
	line-height: 1.4;
}

.wvs-order__price { display: block; color: #111827; }
.wvs-order__price del { color: #9ca3af; font-size: .8em; }
.wvs-order__qty { display: block; color: #6b7280; }

.wvs-order__more {
	display: block;
	padding: .4rem 0 .6rem;
	font-size: .8rem;
	color: #6b7280;
	text-align: center;
}

.wvs-order__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .65rem .85rem;
	border-top: 1px solid #f3f4f6;
	font-size: .85rem;
	color: #6b7280;
}

.wvs-order__total strong { margin-left: .35rem; color: #111827; font-size: 1rem; }

.wvs-order__actions {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.wvs-order__action {
	display: inline-block;
	padding: .4rem .8rem;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #fff;
	color: #374151;
	font-size: .82rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.wvs-order__action:hover { border-color: #9ca3af; color: #111827; }

.wvs-order__action--pay,
.wvs-order__action--order-again {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
}

.wvs-order__action--pay:hover,
.wvs-order__action--order-again:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ── Orders: empty state and paging ─────────────────────────────────────── */

.wvs-orders__empty { padding: 2rem 1rem; text-align: center; color: #6b7280; }
.wvs-orders__shop { display: inline-block; margin-top: .5rem; }

.wvs-orders__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
	font-size: .85rem;
	color: #6b7280;
}

/* ── Single order: the parcel's journey ─────────────────────────────────── */

.wvs-track {
	margin: 0 0 1.25rem;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}

.wvs-track__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	padding: .75rem .9rem;
	background: #f8fafc;
	border-bottom: 1px solid #e5e7eb;
}

.wvs-track__label {
	flex: none;
	padding: .05rem .4rem;
	border-radius: 4px;
	background: #e5e7eb;
	color: #4b5563;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.wvs-track__order {
	margin: 0;
	padding: .5rem .9rem;
	border-bottom: 1px solid #f3f4f6;
	font-size: .85rem;
	color: #6b7280;
}

.wvs-track__state { font-weight: 700; color: #c2410c; }
.wvs-track--delivered .wvs-track__state { color: #15803d; }
.wvs-track--out_for_delivery .wvs-track__state { color: #1d4ed8; }
.wvs-track--returned .wvs-track__state,
.wvs-track--failed .wvs-track__state { color: #b91c1c; }

.wvs-track__text { color: #4b5563; font-size: .88rem; }

.wvs-track__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	margin: 0;
	padding: .6rem .9rem;
	font-size: .85rem;
	color: #6b7280;
	border-bottom: 1px solid #f3f4f6;
}

.wvs-track__number { font-variant-numeric: tabular-nums; color: #111827; }
.wvs-track__link { color: #2563eb; }

.wvs-track__events { list-style: none; margin: 0; padding: .6rem .9rem .9rem 1.6rem; }

.wvs-track__event {
	position: relative;
	padding: .45rem 0 .45rem .35rem;
	border-left: 2px solid #e5e7eb;
	font-size: .85rem;
	color: #6b7280;
}

.wvs-track__event::before {
	content: "";
	position: absolute;
	left: -5px;
	top: .75rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d1d5db;
}

.wvs-track__event.is-latest { color: #111827; }
.wvs-track__event.is-latest::before { background: #2563eb; }

.wvs-track__event-text { display: block; font-weight: 600; }
.wvs-track__event-desc { display: block; }
.wvs-track__event-time { display: block; font-size: .78rem; color: #9ca3af; }

@media (min-width: 768px) {
	.wvs-order__head, .wvs-order__foot, .wvs-order__items, .wvs-order__status { padding-left: 1.1rem; padding-right: 1.1rem; }
	.wvs-order__thumb { width: 80px; height: 80px; }
	.wvs-order__name { font-size: .95rem; }
}