/*
 * Return/Refund Requests (Phase 3N — docs/RETURN-REFUND-CUSTOMER-WORKFLOW.md).
 * Deliberately small: every form field, button, alert, empty-state, and
 * table structure is the existing design system (forms.css, buttons.css,
 * feedback.css, badges.css, account.css's Orders table). This file only
 * adds what genuinely didn't exist before: request-status badge colours,
 * the evidence-photo grid, the guest order-picker list, and the
 * request-detail definition list.
 */

/* --- Status badges — reuses .bholats-badge's base, adds one modifier per
   status. Colours follow this file's own semantic grouping: still-open/
   informational (blue-neutral), in-progress toward a resolution (warning
   tint), and resolved (success/error/neutral) — not one colour per status
   arbitrarily, so the badge colour itself communicates where a request
   sits in the lifecycle at a glance.

   Every selector below is doubled: a bare `.bholats-badge--status-X` rule
   (used by the wp-admin list table, which has no competing `mark` styling)
   PLUS a `.woocommerce-MyAccount-content mark.bholats-badge--status-X`
   rule at matching (0,2,1) specificity for the customer-facing My Account
   context. Found during Phase 3N.3's own end-to-end QA (screenshot review
   of the customer timeline, not assumed): WooCommerce core's own
   `.woocommerce-account .woocommerce-MyAccount-content mark` rule
   (woocommerce-layout.css) is also (0,2,1) and sets
   `background-color: transparent; color: inherit` — at equal specificity
   it was winning by whichever stylesheet happens to parse its matching
   rule last, silently making every status badge on every My Account
   return-request page invisible (transparent background, inherited black
   text) since Phase 3N originally shipped this markup. The exact same
   "match WooCommerce's own selector chain" fix pattern already
   established in docs/PHASE-3N2-GALLERY-DEFECT.md — see
   docs/RETURN-REFUND-QA.md for the live before/after verification. */
.bholats-badge--status-submitted,
.bholats-badge--status-review,
.bholats-badge--status-await_info,
.woocommerce-MyAccount-content mark.bholats-badge--status-submitted,
.woocommerce-MyAccount-content mark.bholats-badge--status-review,
.woocommerce-MyAccount-content mark.bholats-badge--status-await_info {
	background: color-mix(in srgb, var(--color-brand-blue) 12%, white);
	color: var(--color-brand-deep);
}

.bholats-badge--status-approved,
.bholats-badge--status-await_return,
.bholats-badge--status-item_recvd,
.bholats-badge--status-inspecting,
.bholats-badge--status-refund_pend,
.bholats-badge--status-replace_pnd,
.woocommerce-MyAccount-content mark.bholats-badge--status-approved,
.woocommerce-MyAccount-content mark.bholats-badge--status-await_return,
.woocommerce-MyAccount-content mark.bholats-badge--status-item_recvd,
.woocommerce-MyAccount-content mark.bholats-badge--status-inspecting,
.woocommerce-MyAccount-content mark.bholats-badge--status-refund_pend,
.woocommerce-MyAccount-content mark.bholats-badge--status-replace_pnd {
	background: var(--color-warning-bg);
	color: var(--color-warning);
}

.bholats-badge--status-refunded,
.bholats-badge--status-replaced,
.woocommerce-MyAccount-content mark.bholats-badge--status-refunded,
.woocommerce-MyAccount-content mark.bholats-badge--status-replaced {
	background: var(--color-success-bg);
	color: var(--color-success);
}

.bholats-badge--status-rejected,
.bholats-badge--status-insp_failed,
.woocommerce-MyAccount-content mark.bholats-badge--status-rejected,
.woocommerce-MyAccount-content mark.bholats-badge--status-insp_failed {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.bholats-badge--status-closed,
.woocommerce-MyAccount-content mark.bholats-badge--status-closed {
	background: var(--color-surface-muted);
	color: var(--color-text-secondary);
}

/* --- Form field stacking. forms.css's .bholats-field/.bholats-label/
   .bholats-input/.bholats-select/.bholats-textarea already style each
   individual control; this is only the vertical rhythm BETWEEN fields,
   which no existing generic class provides (the one close precedent,
   .bholats-contact-form in static-pages.css, is scoped to that specific
   shortcode's own page, not reusable here). --- */
.bholats-return-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 640px;
}

/* --- Evidence photo grid (My Account detail view + admin meta box) --- */
.bholats-return-evidence {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-3);
}

.bholats-return-evidence img {
	border-radius: var(--radius-sm);
	border: var(--border-width-sm) solid var(--color-border);
	object-fit: cover;
	width: 120px;
	height: 120px;
}

/* --- Guest/logged-in order picker (entry step) --- */
.bholats-return-order-picker {
	list-style: none;
	margin: var(--space-3) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* --- Request detail definition list --- */
.bholats-return-detail {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-2) var(--space-4);
	margin-block: var(--space-3);
}

.bholats-return-detail dt {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
}

.bholats-return-detail dd {
	margin: 0;
}

.bholats-return-updates {
	list-style: none;
	margin: var(--space-2) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bholats-return-updates li {
	padding: var(--space-3);
	background: var(--color-surface-muted);
	border-radius: var(--radius-sm);
}

.bholats-return-updates time {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

.bholats-return-cta {
	margin-top: var(--space-3);
}

/* account.css's `.woocommerce-MyAccount-content a { color: var(--color-brand-deep); }`
   (specificity 0,1,1) beats `.bholats-btn--primary`'s own `color`
   (specificity 0,1,0) purely on CSS specificity whenever a .bholats-btn
   link lives inside My Account — found via axe-core during this phase's
   own QA pass (2.87:1 contrast on the "Start a new request" button,
   fails the 4.5:1 minimum), the first time an <a class="bholats-btn"> has
   ever lived inside .woocommerce-MyAccount-content in this project.
   Restored here (matching or exceeding that selector's specificity)
   rather than editing account.css, since every other link that selector
   targets is intentionally styled by it. */
.woocommerce-MyAccount-content a.bholats-btn--primary {
	color: var(--color-text-on-brand);
}
.woocommerce-MyAccount-content a.bholats-btn--secondary {
	color: var(--color-brand-blue);
}

/* Honeypot field — off-screen, not display:none, matching the existing
   contact-form pattern (class-contact-form.php's own documented reasoning). */
.bholats-return-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 480px) {
	.bholats-return-detail {
		grid-template-columns: 1fr;
	}
}

/* --- Customer-facing progress timeline (Phase 3N.3). A vertical list, not
   a fixed-step horizontal tracker — the step count varies per request
   (a rejected request has far fewer steps than a completed refund), so a
   layout that assumes a known total step count was deliberately avoided. --- */
.bholats-return-timeline {
	list-style: none;
	margin: var(--space-4) 0;
	padding: 0;
	border-left: var(--border-width-md) solid var(--color-border);
}

.bholats-return-timeline li {
	position: relative;
	padding: 0 0 var(--space-4) var(--space-4);
}

.bholats-return-timeline li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--border-width-md) - 4px);
	top: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-brand-blue);
}

.bholats-return-timeline li:last-child {
	padding-bottom: 0;
}

.bholats-return-timeline li:last-child::before {
	background: var(--color-success);
}

.bholats-return-timeline__label {
	display: block;
	font-weight: var(--font-weight-semibold);
}

.bholats-return-timeline__date {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

/* --- Collection details card (My Account + admin) --- */
.bholats-return-collection {
	margin-block: var(--space-4);
	padding: var(--space-4);
	background: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.bholats-return-collection h3 {
	margin-top: 0;
}