/* Module: Orders */

/* ── Includes column (product thumbnails) ───────────────────────────────────── */
.col-includes { white-space: nowrap; }
.includes-thumb {
	display: inline-block;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border-color);
	background: var(--bg-subtle);
	object-fit: contain;
	margin-right: var(--sp-1);
	vertical-align: middle;
}
.includes-thumb--more {
	background: var(--color-primary);
	color: var(--text-inverted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-align: center;
	line-height: 35px;
	border-color: transparent;
}

/* ── Filter toolbar ─────────────────────────────────────────────────────────── */
.app-filter-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
	cursor: pointer;
}

.filter-chip:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.filter-chip--active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--text-inverted);
}

.filter-chip--active:hover {
	color: var(--text-inverted);
}

/* ── Order type badges ──────────────────────────────────────────────────────── */
.order-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--radius-lg);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.order-type-badge--warehouse {
	background: var(--color-purple-light);
	color: var(--color-purple-dark);
}

.order-type-badge--quote {
	background: var(--color-orange-light);
	color: var(--color-orange-dark);
}

.order-type-badge--regular {
	background: var(--bg-hover);
	color: var(--text-muted);
}
.order-type-badge--campaign {
	background: #fce7f3;
	color: #9d174d;
}
.order-type-badge--restock {
	background: #e0f2fe;
	color: #0369a1;
}

/* ── Order source badges (Partner / Guest / Campaign) ───────────────────────── */
.order-source-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 99px;
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	letter-spacing: .4px;
	text-transform: uppercase;
}
.order-source-badge--partner {
	background: var(--color-blue-light);
	color: var(--color-blue-dark);
}
.order-source-badge--guest {
	background: var(--color-green-light);
	color: var(--color-green-dark);
}
.order-source-badge--campaign {
	background: #fce7f3;
	color: #9d174d;
	text-transform: none;
	font-weight: var(--weight-medium);
	letter-spacing: 0;
}
.order-from-name {
	display: block;
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin-top: 3px;
}

.app-orders-page .app-orders-table {
	width: 100%;
}

/* Pagination */
.app-orders-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-6);
	border-top: 1px solid var(--border-color);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.app-orders-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

.app-orders-pagination a.page-numbers,
.app-orders-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	text-decoration: none;
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
}

.app-orders-pagination span.page-numbers.current {
	background: var(--color-primary);
	color: var(--text-inverted);
	border-color: var(--color-primary);
}

.app-orders-pagination a.page-numbers:hover {
	background: var(--bg-hover);
}

/* Empty state */
.app-orders-empty {
	padding: 56px var(--sp-8);
	text-align: center;
	color: var(--text-muted);
	font-size: var(--text-base);
}

/* ── Single order view (view-order.php) ─────────────────────── */
.view-order-card { padding: 0; overflow: hidden; }

/* WC injects its own table markup — style it to match the app */
.view-order-card .woocommerce-order-details,
.view-order-card .woocommerce-customer-details,
.view-order-card .woocommerce-order-downloads {
	margin: 0;
	padding: 0 var(--sp-6) var(--sp-5);
}
.view-order-card .woocommerce-order-details__title,
.view-order-card .woocommerce-column__title {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 18px 0 10px;
	border-bottom: 1px solid var(--border-color);
	margin: 0 0 14px;
}
.view-order-card table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.view-order-card table.woocommerce-table th {
	background: var(--bg-subtle);
	padding: var(--sp-2) var(--sp-3);
	text-align: left;
	border-bottom: 2px solid var(--border-color);
	font-weight: var(--weight-semibold);
	color: var(--text-muted);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.view-order-card table.woocommerce-table td {
	padding: 10px var(--sp-3);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
	vertical-align: top;
}
.view-order-card table.woocommerce-table tfoot td,
.view-order-card table.woocommerce-table tfoot th {
	border-top: 2px solid var(--border-color);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
}
.view-order-card .woocommerce-customer-details address {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--text-secondary);
	font-style: normal;
}
.view-order-card .woocommerce-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
@media (max-width: 640px) {
	.view-order-card .woocommerce-columns { grid-template-columns: 1fr; }
}
.view-order-card .woocommerce-column--billing-address {
	border-right: 1px solid var(--border-color);
}

/* Order notes card */
.view-order-notes-card { padding: 18px var(--sp-6); }
.view-order-notes-title {
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 14px;
}
.view-order-notes { list-style: none; margin: 0; padding: 0; }
.view-order-note {
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-color);
}
.view-order-note:last-child { border-bottom: none; }
.view-order-note__meta { font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: var(--sp-1); }
.view-order-note__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.view-order-note__text p { margin: 0; }


/* ════════════════════════════════════════════════════════════════
   VIEW-ORDER: PRODUCT CARDS GRID
   ════════════════════════════════════════════════════════════════ */

.vo-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4);
}
@media (max-width: 1150px) {
	.vo-product-grid { grid-template-columns: 1fr; }
}

.vo-product-card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.vo-product-card__body {
	display: flex;
	gap: var(--sp-5);
	padding: var(--sp-6);
	flex: 1;
	align-items: center;
}

.vo-product-card__img-wrap {
	flex-shrink: 0;
	width: 110px;
	height: 110px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: transparent;
}
.vo-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vo-product-card__info {
	flex: 1;
	min-width: 0;
}
.vo-product-card__cat {
	font-size: 10px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 6px;
}
.vo-product-card__name {
	font-size: 15px;
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	line-height: 1.3;
	margin-bottom: var(--sp-2);
}
.vo-product-card__attr {
	font-size: var(--text-xs);
	color: var(--text-muted);
	line-height: 1.6;
}
.vo-product-card__mp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	color: #5b21b6;
	background: var(--color-purple-light);
	padding: 2px var(--sp-2);
	border-radius: var(--sp-1);
	margin-top: 2px;
}
.vo-product-card__mp-badge svg { flex-shrink: 0; }
.vo-product-card__instructions {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-top: 6px;
}
.vo-product-card__instructions a,
.vo-instructions-toggle {
	color: var(--color-green);
	text-decoration: none;
	font-weight: var(--weight-semibold);
	margin-left: var(--sp-1);
}
.vo-instr-notes-view {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	min-height: 40px;
}
.vo-instr-notes-view .vo-instr-empty {
	color: var(--text-muted);
	font-style: normal;
}

.vo-instructions-text {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	background: var(--bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--sp-2) 10px;
	margin-top: 6px;
	line-height: 1.5;
}

/* Qty / price column */
.vo-product-card__qty-label {
	font-size: 10px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: center;
}

.vo-product-card__qty-col {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	min-width: 120px;
	padding-left: var(--sp-5);
	border-left: 1px solid var(--border-color);
}

@media (max-width: 500px) {
	.vo-product-card__body {
		flex-wrap: wrap;
	}
	.vo-product-card__img-wrap {
		flex: 1 1 0;
		width: auto;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.vo-product-card__info {
		flex: 1 1 0;
		min-width: 0;
	}
	.vo-product-card__qty-col {
		width: 100%;
		min-width: 0;
		align-items: stretch;
		padding-left: 0;
		padding-top: var(--sp-4);
		border-left: none;
		border-top: 1px solid var(--border-color);
	}
}
/* Flash animation when size split is saved */
@keyframes vq-card-flash {
	0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
	50%  { box-shadow: 0 0 0 8px rgba(16,185,129,0.15); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.vq-card--updated { animation: vq-card-flash 0.8s ease-out forwards; }

.vo-product-card__qty-box {
	font-size: 32px;
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	line-height: 1;
	border: 2px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--sp-2) 18px;
	text-align: center;
	white-space: nowrap;
}
.vo-product-card__unit-price {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-secondary);
	white-space: nowrap;
}
.vo-product-card__unit-label {
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-left: 2px;
}
.vo-product-card__total-row {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	border-top: 1px solid var(--border-color);
	padding-top: var(--sp-2);
	margin-top: var(--sp-1);
	white-space: nowrap;
}
.vo-product-card__total-label {
	font-size: 10px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	color: var(--text-muted);
	text-transform: uppercase;
}
.vo-product-card__total-val {
	font-size: 17px;
	font-weight: var(--weight-bold);
	color: var(--text-primary);
}

/* Savings bar at bottom of card */
.vo-product-card__savings {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 10px var(--sp-5);
	background: var(--color-green-light);
	color: var(--color-green-dark);
	font-size: var(--text-sm);
	border-top: 1px solid #bbf7d0;
}
.vo-product-card__savings strong { font-weight: var(--weight-bold); }
.vo-product-card__savings span { color: var(--color-green-dark); }


/* ════════════════════════════════════════════════════════════════
   VIEW-ORDER: TOTALS
   ════════════════════════════════════════════════════════════════ */

.vo-totals-card { padding: var(--sp-6); overflow: hidden; }
.vo-totals-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin-bottom: 0;
}
.vo-totals-table th,
.vo-totals-table td {
	padding: 10px var(--sp-5);
	border-bottom: 1px solid var(--border-color);
	text-align: right;
	color: var(--text-secondary);
}
.vo-totals-table th { text-align: left; font-weight: var(--weight-semibold); color: var(--text-muted); }
.vo-totals__grand th,
.vo-totals__grand td {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	color: var(--text-primary);
	border-bottom: none;
	border-top: none;
}
.vo-totals__vat-note {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--weight-normal);
	color: var(--text-secondary);
	margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════════
   VIEW-ORDER: SIZE SPLITTER
   ════════════════════════════════════════════════════════════════ */

.vo-splitter-card {
	padding: 0;
	overflow: hidden;
}

.vo-wishlist-notice {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 var(--sp-5) 14px;
	padding: 9px 14px;
	background: var(--color-orange-light);
	border: 1px solid #fde68a;
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-orange-dark);
}
.vo-wishlist-notice svg { flex-shrink: 0; color: var(--color-orange); }

.vo-splitter-title {
	padding: 14px var(--sp-5);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
}

.vo-splitter-body {
	display: grid;
	grid-template-columns: 220px 1fr;
}
@media (max-width: 680px) {
	.vo-splitter-body { grid-template-columns: 1fr; }
}

/* Left panel */
.vo-splitter-left {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border-right: 1px solid var(--border-color);
	background: var(--bg-subtle);
}
@media (max-width: 680px) {
	.vo-splitter-left { border-right: none; border-bottom: 1px solid var(--border-color); }
}
.vo-splitter-img-wrap {
	width: 100%;
	aspect-ratio: 1;
	max-width: 160px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1.5px solid var(--border-color);
	background: var(--bg-card);
	align-self: center;
}
.vo-splitter-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.vo-splitter-info { }
.vo-splitter-info__name {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--sp-1);
	line-height: 1.3;
}
.vo-splitter-info__attr {
	font-size: var(--text-xs);
	color: var(--text-muted);
	line-height: 1.6;
}
.vo-splitter-info__attr a { color: var(--color-green); font-weight: var(--weight-semibold); text-decoration: none; margin-left: var(--sp-1); }

/* Right panel */
.vo-splitter-right {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

/* Size grid – matches warehouse popup style */
.vo-splitter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(25%, 120px), 1fr));
	gap: 10px;
	min-width: 0;
}

.vo-splitter-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--sp-2);
}
.vo-splitter-cell__label {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	font-weight: var(--weight-medium);
	line-height: 1;
	white-space: nowrap;
	min-width: 0;
	flex: 1;
	text-align: center;
}
.vo-splitter-cell.has-qty .vo-splitter-cell__label {
	color: var(--text-primary);
	font-weight: var(--weight-semibold);
}
.vo-splitter-cell__qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--border-color);
	border-radius: 5px;
	height: 30px;
	min-width: 40px;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	background: var(--bg-card);
	line-height: 1;
	padding: 0 var(--sp-2);
}

/* Total row */
.vo-splitter-total {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-color);
	margin-top: var(--sp-1);
}
.vo-splitter-total__label {
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.vo-splitter-total__qty {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
}


/* ── Gender sections inside size splitter (shared with quotes.css) ──────────── */
.vq-gender-section { display: block; width: 100%; }
.vq-gender-header {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) 0 6px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--sp-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.vq-gender-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--text-muted); }
.vq-gender-label { flex: 1; }
.vq-gender-total {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	background: var(--bg-hover);
	border-radius: var(--radius-pill);
	padding: 1px 10px;
}
.vq-gender-cells {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(25%, 120px), 1fr));
	gap: 10px;
	margin-bottom: var(--sp-3);
}
.vq-gender-cells .vo-splitter-cell {
	flex: 0 0 auto;
	min-width: 0;
}

/* ── Color sections inside size splitter ──────────────────────────────────── */
.vq-color-header {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 0 5px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--sp-2);
	margin-top: var(--sp-1);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.vq-color-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--text-muted); }
.vq-color-label { flex: 1; }
.vq-color-total {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	background: var(--bg-hover);
	border-radius: var(--radius-pill);
	padding: 1px 10px;
}


/* ════════════════════════════════════════════════════════════════
   VIEW-ORDER: STATUS TIMELINE
   ════════════════════════════════════════════════════════════════ */

.vo-timeline-card { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

.vo-timeline {
	display: flex;
	align-items: flex-start;
}

.vo-timeline__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 0 0 auto;
	min-width: 72px;
	max-width: 100px;
}

.vo-timeline__line {
	flex: 1;
	height: 2px;
	background: var(--border-color);
	margin-top: var(--sp-4);
	transition: background var(--transition-base);
}
.vo-timeline__line.is-done { background: var(--color-primary); }

.vo-timeline__dot {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	border: 2px solid var(--border-color);
	background: var(--bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vo-timeline__dot svg { width: 14px; height: 14px; color: var(--text-inverted); display: none; }
.vo-timeline__dot.is-done {
	background: var(--color-primary);
	border-color: var(--color-primary);
}
.vo-timeline__dot.is-done svg { display: block; }
.vo-timeline__dot.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(28,29,37,.12);
}
.vo-timeline__dot.is-active svg { display: block; }

.vo-timeline__label {
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	color: var(--text-muted);
	margin-top: 7px;
	line-height: 1.3;
}
.vo-timeline__stage.is-done .vo-timeline__label,
.vo-timeline__stage.is-active .vo-timeline__label { color: var(--text-primary); }

.vo-timeline__date {
	font-size: 10px;
	color: var(--text-muted);
	margin-top: 3px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.vo-timeline { overflow-x: auto; padding-bottom: var(--sp-1); }
	.vo-timeline__stage { min-width: 62px; }
	.vo-timeline__label { font-size: 10px; }
}


/* ════════════════════════════════════════════════════════════════
   QUANTITY PRICING: bulk price table on product page
   ════════════════════════════════════════════════════════════════ */

.kw-qty-pricing-table {
	margin: var(--sp-4) 0;
	background: var(--bg-subtle);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	font-size: var(--text-sm);
}
.kw-qty-pricing-table__title {
	padding: 10px 14px;
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
}
.kw-qty-pricing-table table { width: 100%; border-collapse: collapse; }
.kw-qty-pricing-table th {
	padding: 7px 14px;
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}
.kw-qty-pricing-table td {
	padding: var(--sp-2) 14px;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-color);
}
.kw-qty-pricing-table tr:last-child td { border-bottom: none; }
.kw-qty-save-pct {
	background: var(--color-green-light);
	color: var(--color-green-dark);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	padding: 2px 7px;
	border-radius: var(--radius-pill);
}