/**
 * Frontend styles for Returns Desk — Self-Service Returns, Refunds & Exchanges.
 *
 * Every rule is namespaced under .returns-desk- so the plugin never restyles
 * a theme it was not asked to touch. Theme authors can override any of these
 * from a child theme because the selectors stay shallow.
 *
 * @package TillFoundry\ReturnsDesk
 */

.returns-desk {
	box-sizing: border-box;
	margin: 1.5em 0;
}

.returns-desk *,
.returns-desk *::before,
.returns-desk *::after {
	box-sizing: inherit;
}

.returns-desk-notice {
	padding: 0.75em 1em;
	border-inline-start: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.04);
}

.returns-desk-notice--success {
	color: #14622b;
}

.returns-desk-notice--error {
	color: #b32d2e;
}

.returns-desk-upsell {
	padding: 1em;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 4px;
}

.returns-desk-is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Status badges and tags
 * ---------------------------------------------------------------------- */

.returns-desk-status {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	font-size: 0.85em;
	line-height: 1.7;
	white-space: nowrap;
	background: #f0f0f1;
	color: #3c434a;
	vertical-align: middle;
}

.returns-desk-status--warning {
	background: #fcf9e8;
	color: #7a5c00;
}

.returns-desk-status--info {
	background: #eef4fb;
	color: #1d4f91;
}

.returns-desk-status--success {
	background: #edfaef;
	color: #14622b;
}

.returns-desk-status--error {
	background: #fcefef;
	color: #b32d2e;
}

.returns-desk-status--muted {
	background: #f0f0f1;
	color: #646970;
}

.returns-desk-tag {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.1em 0.5em;
	border-radius: 3px;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: #f0f0f1;
	color: #50575e;
}

/* -------------------------------------------------------------------------
 * Tables
 * ---------------------------------------------------------------------- */

.returns-desk-table,
.returns-desk-items {
	width: 100%;
	margin: 1em 0;
}

.returns-desk-table th,
.returns-desk-table td,
.returns-desk-items th,
.returns-desk-items td {
	text-align: start;
	vertical-align: middle;
}

.returns-desk-col-select {
	width: 4.5em;
	text-align: center;
}

.returns-desk-item--selected {
	background: rgba(0, 0, 0, 0.03);
}

/*
 * frontend.js marks a ticked row whose quantity is still 0 (and clears the
 * class again once the quantity changes). The offending select also carries
 * `aria-invalid`, which the rule below outlines, so this row tint and inline
 * marker are a second, non-colour-only signal that survives a theme that
 * overrides native focus/outline styles. The class was applied by the script
 * but had no rule of its own, so the row read as an ordinary selection.
 */
.returns-desk-item--invalid {
	background: rgba(179, 45, 46, 0.06);
}

.returns-desk-item--invalid > td:first-child {
	box-shadow: inset 3px 0 0 #b32d2e;
}

.returns-desk-variation {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

.returns-desk-actions {
	text-align: end;
}

/* -------------------------------------------------------------------------
 * Request form
 * ---------------------------------------------------------------------- */

.returns-desk-policy,
.returns-desk-withdrawal-info {
	margin: 1em 0;
	padding: 1em 1.25em;
	border-inline-start: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
}

.returns-desk-window {
	margin: 0.5em 0;
	font-weight: 600;
}

.returns-desk-window--statutory {
	font-weight: 400;
}

.returns-desk-error {
	margin: 0 0 1em;
}

.returns-desk-field {
	margin: 1em 0;
}

.returns-desk-field label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 600;
}

.returns-desk-field .description {
	display: block;
	font-size: 0.85em;
	opacity: 0.8;
}

/*
 * The summary is an aria-live region that JavaScript rewrites as the customer
 * ticks items. Give it a visible surface so the live update is noticeable to a
 * sighted customer, not only to a screen reader.
 */
.returns-desk-selection-summary {
	margin: 1em 0;
	padding: 0.6em 0.9em;
	border-inline-start: 4px solid currentColor;
	background: rgba( 0, 0, 0, 0.04 );
	font-weight: 600;
}

.returns-desk-empty {
	margin: 1em 0;
	padding: 0.75em 1em;
	border-inline-start: 4px solid rgba( 0, 0, 0, 0.2 );
	background: rgba( 0, 0, 0, 0.04 );
}

.returns-desk-held-files {
	margin: 0.75em 0;
	padding: 0.6em 0.9em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
}

.returns-desk-held-files ul {
	margin: 0.25em 0;
	padding-inline-start: 1.25em;
}

.returns-desk-required {
	color: #b32d2e;
	font-weight: 400;
}

.returns-desk-field input[aria-invalid="true"],
.returns-desk-items select[aria-invalid="true"],
.returns-desk-items input[aria-invalid="true"] {
	outline: 2px solid #b32d2e;
	outline-offset: 1px;
}

/*
 * Keep keyboard focus visible on every control the plugin renders, even in a
 * theme that removes default outlines. Scoped to the plugin container so no
 * theme styles are disturbed.
 */
.returns-desk a:focus-visible,
.returns-desk button:focus-visible,
.returns-desk input:focus-visible,
.returns-desk select:focus-visible,
.returns-desk textarea:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.returns-desk-resolutions,
.returns-desk-statutory {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
}

.returns-desk-resolutions legend,
.returns-desk-statutory legend {
	padding: 0 0.5em;
	font-weight: 600;
}

.returns-desk-resolution {
	margin: 0.35em 0;
}

.returns-desk-file-error {
	display: block;
	margin-top: 0.25em;
	color: #b32d2e;
}

.returns-desk-submit {
	margin-top: 1.5em;
}

.returns-desk-submit-status {
	margin-inline-start: 0.75em;
	font-size: 0.9em;
	color: #50575e;
}

.returns-desk-submit-status[role="alert"],
.returns-desk-file-error {
	color: #b32d2e;
}

/*
 * The session-expiry message is built as text plus an appended "Reload page"
 * link. Without a gutter the link renders flush against the sentence with no
 * separating space, so it reads as part of the last word.
 */
.returns-desk-reload {
	margin-inline-start: 0.5em;
}

.returns-desk-cancel-form {
	margin-top: 1.5em;
}

.returns-desk-cancel-form .returns-desk-submit-status {
	display: block;
	margin: 0.5em 0 0;
}

.returns-desk button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* -------------------------------------------------------------------------
 * Detail view and timeline
 * ---------------------------------------------------------------------- */

.returns-desk-back {
	margin-bottom: 0.5em;
}

.returns-desk-meta {
	opacity: 0.9;
}

.returns-desk-timeline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
	counter-reset: returns-desk-step;
}

.returns-desk-timeline__step {
	position: relative;
	flex: 1 1 0;
	min-width: 8em;
	/*
	 * The step number is pinned with `inset-inline-start`, so the gutter it
	 * sits in must be logical too. A physical left padding put the 2em gutter
	 * on the wrong side under RTL: the badge moved to the right edge while the
	 * text still reserved 2em on the left, and the two overlapped.
	 */
	padding-block: 0.75em;
	padding-inline: 2em 0.5em;
	border-top: 3px solid rgba(0, 0, 0, 0.15);
	color: rgba(0, 0, 0, 0.55);
	counter-increment: returns-desk-step;
}

.returns-desk-timeline__step::before {
	content: counter( returns-desk-step );
	position: absolute;
	inset-inline-start: 0;
	top: -1.05em;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(0, 0, 0, 0.2);
	color: rgba(0, 0, 0, 0.6);
	line-height: 1.7em;
	text-align: center;
	font-weight: 700;
}

.returns-desk-timeline__step.is-complete {
	border-top-color: #14622b;
	color: #14622b;
}

.returns-desk-timeline__step.is-complete::before {
	border-color: #14622b;
	color: #14622b;
}

.returns-desk-timeline__step.is-current {
	border-top-color: #2271b1;
	color: #2271b1;
	font-weight: 600;
}

.returns-desk-timeline__step.is-current::before {
	border-color: #2271b1;
	background: #2271b1;
	color: #fff;
}

.returns-desk-resolution-summary,
.returns-desk-statutory-summary,
.returns-desk-attachments {
	margin: 0.5em 0 1.5em;
	padding-inline-start: 1.25em;
}

.returns-desk-resolution-summary li,
.returns-desk-statutory-summary li,
.returns-desk-attachments li {
	margin: 0.25em 0;
}

/* -------------------------------------------------------------------------
 * Touch targets
 * ---------------------------------------------------------------------- */

/*
 * Every control the plugin renders must meet the 44x44px minimum target size.
 * A bare theme (or a minimal block theme) leaves a select 19px tall and the
 * submit button 21px tall, which is hard to hit with a thumb; the plugin owns
 * its own surfaces, so it guarantees the minimum rather than relying on the
 * active theme. Measured in Chromium at 380px and 1440px: every visible
 * control was 13-21px before this rule.
 *
 * Checkboxes and radios keep a smaller (24px) control because they are always
 * wrapped in, or paired with, a real <label>: the clickable target is the whole
 * label, not the glyph. Scaling the glyph to 44px would misalign the table and
 * misrepresent the control on desktop.
 */
.returns-desk button,
.returns-desk input[type="submit"],
.returns-desk input[type="button"],
.returns-desk input[type="text"],
.returns-desk input[type="email"],
.returns-desk input[type="tel"],
.returns-desk input[type="number"],
.returns-desk input[type="file"],
.returns-desk a.button,
.returns-desk select {
	min-height: 44px;
}

/* A numeric quantity select can be only two digits wide (30px); the minimum
 * width keeps the tap area square. */
.returns-desk select {
	min-width: 44px;
}

.returns-desk input[type="checkbox"],
.returns-desk input[type="radio"] {
	min-width: 24px;
	min-height: 24px;
}

/* The clickable target for a checkbox/radio is its label, so the label row
 * must clear 44px even though the control itself stays at 24px. */
.returns-desk-items td label,
.returns-desk-resolution label,
.returns-desk-statutory p label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
 * Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.returns-desk-is-loading {
		transition: opacity 120ms linear;
	}

	.returns-desk-timeline__step {
		transition: color 120ms linear, border-color 120ms linear;
	}
}

@media screen and (max-width: 600px) {
	.returns-desk-timeline__step {
		flex-basis: 100%;
		padding-inline-start: 2.5em;
	}
}

/* -------------------------------------------------------------------------
 * Responsive per-item tables
 * ---------------------------------------------------------------------- */

/*
 * The item tables carry WooCommerce's `shop_table_responsive` class, but that
 * stacked layout ships in WooCommerce's legacy stylesheet, which a block theme
 * or a store that has dequeued those styles may never load. Measured against a
 * bare theme at 380px the six-column request table was 446px wide and pushed
 * the page 90px past the viewport. Every cell already carries a `data-title`
 * from the template, so the plugin can stack its own table without touching a
 * single theme rule: the selector stays scoped to `.returns-desk-items`.
 *
 * 767px matches WooCommerce's own responsive breakpoint.
 */
@media screen and (max-width: 767px) {
	.returns-desk .returns-desk-items thead,
	.returns-desk .returns-desk-table thead {
		display: none;
	}

	.returns-desk .returns-desk-items tr,
	.returns-desk .returns-desk-table tr {
		display: block;
		padding: 0.5em 0;
		border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
	}

	.returns-desk .returns-desk-items th,
	.returns-desk .returns-desk-items td,
	.returns-desk .returns-desk-table th,
	.returns-desk .returns-desk-table td {
		display: block;
		width: auto;
		border: 0;
		text-align: start;
	}

	/* The visible field name replaces the hidden header row. Only cells that
	 * actually carry a label are prefixed, so the actions cell shows no stray
	 * separator. */
	.returns-desk .returns-desk-items td[data-title]::before,
	.returns-desk .returns-desk-table td[data-title]::before {
		content: attr( data-title ) ": ";
		font-weight: 600;
	}
}