/*
 * SG Returns form. Deliberately light: everything is scoped under .sg-returns and the theme
 * keeps fonts, colours, inputs and buttons (the markup uses WooCommerce's .form-row, .input-text,
 * .button and .button.alt, which both System F and the VeloVixen theme already skin).
 * This file adds layout plus a handful of tokens. Neutral defaults suit any theme;
 * .sg-returns--sg swaps in System F values (cream, ink, one pink accent).
 */

.sg-returns {
	--sgr-accent: currentColor;
	--sgr-ink-soft: currentColor;
	--sgr-line: rgba(0, 0, 0, 0.16);
	--sgr-line-soft: rgba(0, 0, 0, 0.08);
	--sgr-surface: rgba(0, 0, 0, 0.035);
	--sgr-paper: transparent;
	--sgr-selected: rgba(0, 0, 0, 0.06);
	--sgr-error: #b0203c;
	--sgr-radius: 4px;
	--sgr-card-radius: 8px;
	--sgr-head-font: inherit;
	--sgr-hand-font: inherit;

	box-sizing: border-box;
	max-width: 46rem;
	margin: 0 0 2.5rem;
}

.sg-returns--sg {
	--sgr-accent: #E8356B;
	--sgr-ink-soft: #6B625A;
	--sgr-line: rgb(26 23 20 / 0.16);
	--sgr-line-soft: rgb(26 23 20 / 0.08);
	--sgr-surface: #EDE6D8;
	--sgr-paper: #FAF6EC;
	--sgr-selected: #F3E7D1;
	--sgr-error: #C72248;
	--sgr-head-font: var(--font-headline, "Epilogue"), system-ui, sans-serif;
	--sgr-hand-font: var(--font-hand, "Caveat"), cursive;
	color: #1A1714;
}

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

.sg-returns :focus-visible {
	outline: 2px solid var(--sgr-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.sg-returns .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sg-returns-signed-in {
	margin: 0 0 1.25rem;
	font-size: 0.9375em;
}

/* ------------------------------------------------------------ Progress */

.sg-returns__progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sg-returns__progress-step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--sgr-ink-soft);
}

.sg-returns__progress-num {
	display: inline-grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	border: 1px solid var(--sgr-line);
	border-radius: 50%;
	font-weight: 700;
	letter-spacing: 0;
}

.sg-returns__progress-step.is-current {
	color: inherit;
	font-weight: 700;
}

/* Neutral themes: a heavier ring in the text colour (currentColor can't be both fill and text). */
.sg-returns__progress-step.is-current .sg-returns__progress-num {
	border: 2px solid currentColor;
}

.sg-returns--sg .sg-returns__progress-step.is-current .sg-returns__progress-num {
	border: 1px solid var(--sgr-accent);
	background: var(--sgr-accent);
	color: #1A1714; /* brand rule: pink carries ink, not white */
}

.sg-returns__progress-step.is-done .sg-returns__progress-num {
	border-color: currentColor;
}

/* Narrow screens: only the current step keeps a visible label (the others stay readable to screen readers). */
@media (max-width: 479px) {
	.sg-returns__progress {
		flex-wrap: nowrap;
		gap: 0.625rem;
	}

	.sg-returns__progress-step:not(.is-current) .sg-returns__progress-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------ Headings and text */

.sg-returns__title {
	margin: 0 0 0.5rem;
	font-family: var(--sgr-head-font);
	line-height: 1.05;
}

/* The heading only takes focus from script (tabindex -1) so screen readers land on the new step;
   it is not interactive, so no ring. */
.sg-returns .sg-returns__title:focus,
.sg-returns .sg-returns__title:focus-visible {
	outline: none;
}

.sg-returns--sg .sg-returns__title {
	font-size: clamp(2rem, 7vw, 3rem);
	font-style: italic;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.sg-returns__dot {
	color: var(--sgr-accent);
}

.sg-returns__lede {
	margin: 0 0 1.5rem;
	max-width: 36rem;
}

.sg-returns__order-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

.sg-returns__order-number {
	font-weight: 700;
}

.sg-returns__order-date {
	color: var(--sgr-ink-soft);
}

.sg-returns__hint {
	display: block;
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	color: var(--sgr-ink-soft);
}

/* ------------------------------------------------------------ Forms */

.sg-returns__form {
	margin: 0;
}

.sg-returns form .sg-returns__field.form-row {
	margin: 0 0 1.25rem;
	padding: 0;
	float: none;
	width: 100%;
}

.sg-returns .sg-returns__field label {
	display: block;
	margin: 0 0 0.375rem;
	font-weight: 700;
}

.sg-returns .sg-returns__field .input-text {
	width: 100%;
}

.sg-returns__lookup-fields {
	display: grid;
	gap: 0 1.25rem;
}

@media (min-width: 640px) {
	.sg-returns__lookup-fields {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: end;
	}
}

/* Honeypot: off-screen, out of the tab order. Not aria-hidden (it holds a focusable input). */
.sg-returns__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sg-returns__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 0;
}

.sg-returns .sg-returns__submit[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.sg-returns__ready {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sgr-ink-soft);
}

/* Below the submit button, with room for two lines reserved, so messages never shift the form. */
.sg-returns__messages {
	min-height: 3.25rem;
	margin: 0.75rem 0 0;
}

.sg-returns__message {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.sg-returns__message--error {
	color: var(--sgr-error);
}

.sg-returns__message a {
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------------ Notices */

.sg-returns__notice {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem 0.875rem 1.125rem;
	border: 1px solid var(--sgr-line);
	border-radius: var(--sgr-card-radius);
	background: var(--sgr-paper);
	font-size: 0.9375rem;
}

.sg-returns__notice p {
	margin: 0;
}

.sg-returns__notice p + p {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------ Lines */

.sg-returns__lines {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sgr-line-soft);
}

.sg-returns__line {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 0.75rem 1rem;
	margin: 0;
	padding: 1.125rem 0.75rem;
	border-bottom: 1px solid var(--sgr-line-soft);
	transition: background-color 0.15s ease;
}

.sg-returns__line.is-selected {
	background: var(--sgr-selected);
}

.sg-returns__line-media {
	width: 4rem;
	height: 4rem;
	border-radius: 2px;
	background: var(--sgr-surface);
	overflow: hidden;
}

.sg-returns--sg .sg-returns__line-media {
	background: var(--sgr-paper);
	box-shadow: 0 1px 2px rgb(26 23 20 / 0.12), 0 6px 14px -8px rgb(26 23 20 / 0.25);
}

.sg-returns__line-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sg-returns__line-name {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}

.sg-returns__line-sku,
.sg-returns__line-bought {
	display: inline-block;
	margin: 0 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--sgr-ink-soft);
}

.sg-returns__line-note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	max-width: 30rem;
}

.sg-returns__badge {
	display: inline-block;
	margin: 0.5rem 0 0;
	padding: 0.1875rem 0.625rem;
	border: 1px solid var(--sgr-line);
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sg-returns__line.is-unavailable .sg-returns__line-media,
.sg-returns__line.is-unavailable .sg-returns__line-name {
	opacity: 0.55;
}

.sg-returns__line-controls {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

/* .form-row so the theme skins the reason select; undo Woo's own .form-row spacing. */
.sg-returns form .sg-returns__control.form-row {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

.sg-returns__control-label {
	display: block;
	margin: 0 0 0.3125rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sg-returns .sg-returns__reason {
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
}

.sg-returns .sg-returns__reason:disabled {
	opacity: 0.5;
}

@media (min-width: 640px) {
	.sg-returns__line {
		grid-template-columns: 4.5rem minmax(0, 1fr) 21rem;
		align-items: center;
	}

	.sg-returns__line-media {
		width: 4.5rem;
		height: 4.5rem;
	}

	.sg-returns__line-controls {
		grid-column: auto;
	}
}

/* Stepper: its own small controls, not theme buttons (theme pills are far too big here). */
.sg-returns__qty {
	display: inline-flex;
	align-items: stretch;
	height: 2.75rem;
	border: 1px solid var(--sgr-line);
	border-radius: 9999px;
	background: var(--sgr-paper);
}

.sg-returns .sg-returns__qty-btn {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

.sg-returns .sg-returns__qty-btn:hover:not(:disabled) {
	background: var(--sgr-selected);
	color: var(--sgr-accent);
}

.sg-returns .sg-returns__qty-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sg-returns .sg-returns__qty-input {
	width: 2.5rem;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sg-returns .sg-returns__qty-input::-webkit-outer-spin-button,
.sg-returns .sg-returns__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ------------------------------------------------------------ Refund or exchange */

.sg-returns__type {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sg-returns__type legend {
	margin: 0 0 0.75rem;
	padding: 0;
	font-weight: 700;
	font-size: 1.125rem;
}

.sg-returns--sg .sg-returns__type legend {
	font-family: var(--sgr-head-font);
	font-style: italic;
	font-weight: 800;
	font-size: 1.375rem;
}

.sg-returns__choices {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 480px) {
	.sg-returns__choices {
		grid-template-columns: 1fr 1fr;
	}
}

.sg-returns__choice {
	position: relative;
}

.sg-returns__choice-input {
	position: absolute;
	top: 1.125rem;
	left: 1rem;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--sgr-accent);
}

.sg-returns .sg-returns__choice-label {
	display: block;
	height: 100%;
	margin: 0;
	padding: 0.875rem 1rem 0.875rem 2.75rem;
	border: 1px solid var(--sgr-line);
	border-radius: var(--sgr-card-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sg-returns .sg-returns__choice-label:hover {
	border-color: currentColor;
}

.sg-returns__choice-input:checked + .sg-returns__choice-label {
	border-color: var(--sgr-accent);
	box-shadow: inset 0 0 0 1px var(--sgr-accent);
	background: var(--sgr-selected);
}

.sg-returns__choice-input:focus-visible + .sg-returns__choice-label {
	outline: 2px solid var(--sgr-accent);
	outline-offset: 3px;
}

.sg-returns__choice-title {
	display: block;
	font-weight: 700;
}

.sg-returns__choice-detail {
	display: block;
	font-size: 0.875rem;
	color: var(--sgr-ink-soft);
}

.sg-returns__comment {
	resize: vertical;
}

.sg-returns__counter {
	display: block;
	margin-top: 0.3125rem;
	font-size: 0.8125rem;
	text-align: right;
	color: var(--sgr-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Done: the parcel label */

.sg-returns__label {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.25rem 1.125rem;
	max-width: 26rem;
	border: 2px dashed var(--sgr-line);
	border-radius: var(--sgr-card-radius);
	background: var(--sgr-paper);
}

.sg-returns--sg .sg-returns__label {
	border-color: rgb(26 23 20 / 0.28);
	box-shadow: 0 1px 2px rgb(26 23 20 / 0.10), 0 18px 30px -22px rgb(26 23 20 / 0.45);
	transform: rotate(-0.6deg);
}

.sg-returns__label-head {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sgr-ink-soft);
}

.sg-returns__label-address {
	margin: 0 0 0.875rem;
	font-style: normal;
	line-height: 1.5;
}

.sg-returns__label-line {
	display: block;
}

.sg-returns__label-line.is-ref {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	box-shadow: inset 0 -0.45em 0 var(--sgr-selected);
}

.sg-returns--sg .sg-returns__label-line.is-ref {
	box-shadow: inset 0 -0.4em 0 rgb(232 53 107 / 0.28);
}

.sg-returns__label-tip {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

.sg-returns--sg .sg-returns__label-tip {
	font-family: var(--sgr-hand-font);
	font-size: 1.3125rem;
	line-height: 1.2;
}

.sg-returns__label-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.sg-returns__copy-status {
	font-size: 0.875rem;
	font-weight: 600;
}

.sg-returns__copy-buffer {
	position: fixed;
	top: 0;
	left: -9999px;
	opacity: 0;
}

.sg-returns__postage {
	margin: 0 0 1.25rem;
	max-width: 36rem;
}

.sg-returns__back a {
	font-weight: 700;
}

/* ------------------------------------------------------------ My Account list */

.sg-returns__intro,
.sg-returns__empty,
.sg-returns__older {
	margin: 0 0 1rem;
}

.sg-returns__empty {
	font-weight: 700;
}

.sg-returns .sg-returns__orders-action {
	text-align: right;
}

.sg-returns-order-action {
	margin: 1.25rem 0;
}

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

@media (prefers-reduced-motion: reduce) {
	.sg-returns__line,
	.sg-returns .sg-returns__choice-label {
		transition: none;
	}

	.sg-returns--sg .sg-returns__label {
		transform: none;
	}
}