/**
 * Return requests in My Account.
 *
 * Inherits the Glozin theme tokens (--gz-*) so this reads as part of the shop rather than a
 * bolted-on plugin screen. Fallbacks are supplied for every custom property in case the tab
 * is rendered outside a Glozin context.
 */

.fj-returns {
	--fj-line: var(--gz-border-color, #ebebeb);
	--fj-dark: var(--gz-color-dark, #111111);
	--fj-base: var(--gz-color-base, #444444);
	--fj-mute: var(--gz-color-grey, #888888);
	--fj-ease: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fj-returns__section + .fj-returns__section {
	margin-top: 3rem;
}

.fj-returns__title {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fj-dark);
}

.fj-returns__intro {
	margin: 0 0 1.4rem;
	max-width: 62ch;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--fj-mute);
}

/* Order list ------------------------------------------------------------- */

.fj-returns__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fj-line);
}

.fj-returns__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--fj-line);
}

.fj-returns__order {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fj-dark);
}

.fj-returns__row--expired .fj-returns__order {
	font-weight: 500;
	color: var(--fj-base);
}

.fj-returns__date {
	font-size: 0.8125rem;
	color: var(--fj-mute);
}

.fj-returns__action,
.fj-returns__tag {
	margin-left: auto;
}

.fj-returns__link {
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--fj-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--fj-ease);
}

.fj-returns__link:hover,
.fj-returns__link:focus-visible {
	opacity: 0.55;
	color: var(--fj-dark);
}

.fj-returns__tag {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fj-mute);
	white-space: nowrap;
}

.fj-returns__note {
	margin: 1.3rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--fj-mute);
}

.fj-returns__note a {
	color: var(--fj-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.fj-returns__empty {
	margin: 0;
	padding: 1.6rem 0;
	border-top: 1px solid var(--fj-line);
	font-size: 0.875rem;
	color: var(--fj-mute);
}

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

.fj-returns__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.fj-returns__table th {
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--fj-line);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fj-mute);
	text-align: left;
}

.fj-returns__table td {
	padding: 1rem 0;
	border-bottom: 1px solid var(--fj-line);
	font-size: 0.875rem;
	color: var(--fj-base);
	vertical-align: middle;
}

.fj-returns__table .fj-col-end {
	text-align: right;
}

.fj-returns__table td.fj-col-strong {
	font-weight: 600;
	color: var(--fj-dark);
}

/* Status ----------------------------------------------------------------- */

.fj-status {
	display: inline-block;
	padding: 0.3em 0.75em;
	border-radius: 2em;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	background: oklch(0.962 0.002 260);
	color: var(--fj-base);
}

.fj-status--approved {
	background: oklch(0.95 0.035 155);
	color: oklch(0.44 0.1 155);
}

.fj-status--rejected {
	background: oklch(0.952 0.028 25);
	color: oklch(0.5 0.13 25);
}

.fj-status--received {
	background: oklch(0.93 0.004 260);
	color: var(--fj-dark);
}

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

.fj-return-form {
	margin: 0;
}

.fj-return-form__qty {
	min-width: 4.5rem;
}

.fj-return-field {
	margin: 1.6rem 0 0;
}

.fj-return-field > label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fj-dark);
}

.fj-return-field select {
	width: 100%;
	max-width: 24rem;
}

.fj-return-field textarea {
	width: 100%;
	max-width: 34rem;
}

.fj-return-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 2rem;
}

.fj-return-cancel {
	font-size: 0.875rem;
	color: var(--fj-mute);
	text-decoration: none;
	transition: color var(--fj-ease);
}

.fj-return-cancel:hover,
.fj-return-cancel:focus-visible {
	color: var(--fj-dark);
}

.fj-return-back {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--fj-dark);
}

@media (max-width: 575px) {
	.fj-returns__row {
		gap: 0.3rem;
	}

	.fj-returns__action,
	.fj-returns__tag {
		margin-left: 0;
		width: 100%;
	}

	.fj-returns__table th:not(:first-child),
	.fj-returns__table td:not(:first-child) {
		text-align: right;
	}
}