/**
 * Public returns & claims portal — front-end stylesheet.
 *
 * QA #2: the portal templates under `templates/frontend/` (and the plugin's
 * WooCommerce My-Account request views) ship ~35 `wcrc-*` classes with no
 * stylesheet of their own. Logged-in customers only look styled because their
 * views render inside WooCommerce's account chrome; a plain page carrying the
 * `[wc_returns_claims_portal]` shortcode had no styling at all.
 *
 * Scope: every rule is nested under a portal / My-Account wrapper so the sheet
 * is inert on the rest of the site. It leans on a small grayscale palette plus
 * one accent and never assumes a theme is present — the portal page may be a
 * plain WordPress page with no WooCommerce styling in reach.
 */

.wcrc-portal-verify,
.wcrc-portal-order,
.wcrc-portal-tracking,
.wcrc-portal-expired,
.wcrc-portal-thank-you,
.wcrc-my-account,
.wcrc-my-account-detail {
	--wcrc-accent: #4f46e5;
	--wcrc-accent-dark: #4338ca;
	--wcrc-accent-soft: #eef0fd;
	--wcrc-ink: #16181d;
	--wcrc-muted: #5d6470;
	--wcrc-border: #e0e3ec;
	--wcrc-surface: #ffffff;
	--wcrc-canvas: #f6f7fb;
	--wcrc-green: #1a7f37;
	--wcrc-green-soft: #e6f4ea;
	--wcrc-amber: #8a5a00;
	--wcrc-amber-soft: #fdf3e0;
	--wcrc-red: #b32d2e;
	--wcrc-red-soft: #fcebec;
	--wcrc-radius: 8px;

	box-sizing: border-box;
	max-width: 760px;
	margin-inline: auto;
	color: var(--wcrc-ink);
	line-height: 1.55;
}

.wcrc-portal-verify *,
.wcrc-portal-order *,
.wcrc-portal-tracking *,
.wcrc-portal-expired *,
.wcrc-portal-thank-you *,
.wcrc-my-account *,
.wcrc-my-account-detail * {
	box-sizing: border-box;
}

/* Dynamic-toggle elements: the portal JS flips the `hidden` attribute to reveal
 * forms, the product grid, the IBAN block and the AJAX result. Force it to win
 * over a theme's `table { display: table }` etc. so a reveal is never leaked. */
.wcrc-portal-order [hidden],
.wcrc-portal-verify [hidden],
.wcrc-portal-tracking [hidden],
.wcrc-form[hidden] {
	display: none !important;
}

/* --- Headings ----------------------------------------------------------- */

.wcrc-portal-order__title,
.wcrc-portal-tracking__title,
.wcrc-portal-thank-you__title,
.wcrc-my-account-detail__title {
	margin: 0 0 0.25em;
	font-size: 1.5rem;
	line-height: 1.25;
}

.wcrc-portal-order__date {
	margin: 0 0 1.5rem;
	color: var(--wcrc-muted);
	font-size: 0.9rem;
}

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

.wcrc-portal-order__products,
.wcrc-form__products,
.wcrc-my-account__table,
.wcrc-my-account-detail__meta,
.wcrc-my-account-detail__items {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.wcrc-portal-order__products th,
.wcrc-form__products th,
.wcrc-my-account__table th,
.wcrc-my-account-detail__items th {
	padding: 0.6rem 0.75rem;
	border-bottom: 2px solid var(--wcrc-border);
	color: var(--wcrc-muted);
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.wcrc-portal-order__products td,
.wcrc-form__products td,
.wcrc-my-account__table td,
.wcrc-my-account-detail__items td,
.wcrc-my-account-detail__meta th,
.wcrc-my-account-detail__meta td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--wcrc-border);
	vertical-align: top;
	text-align: left;
}

.wcrc-my-account-detail__meta th {
	width: 40%;
	color: var(--wcrc-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* Blocked / non-eligible return line: muted so the eye skips it. */
.wcrc-line--blocked td {
	color: var(--wcrc-muted);
}

.wcrc-line__blocked-note {
	display: inline-flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wcrc-line__blocked-note small,
.wcrc-non-returnable__reason {
	display: block;
	color: var(--wcrc-muted);
	font-size: 0.82rem;
}

/* --- Returnability badges ---------------------------------------------- */

.wcrc-returnable,
.wcrc-non-returnable,
.wcrc-status {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.5;
}

.wcrc-returnable {
	background: var(--wcrc-green-soft);
	color: var(--wcrc-green);
}

.wcrc-non-returnable {
	background: var(--wcrc-canvas);
	color: var(--wcrc-muted);
}

.wcrc-non-returnable__reason {
	font-weight: 400;
}

/* Status pill (My-Account list + detail): neutral by default; the modifier
 * classes tint the common terminal states. */
.wcrc-status {
	background: var(--wcrc-accent-soft);
	color: var(--wcrc-accent-dark);
}

.wcrc-status--completed,
.wcrc-status--approved,
.wcrc-status--closed {
	background: var(--wcrc-green-soft);
	color: var(--wcrc-green);
}

.wcrc-status--rejected,
.wcrc-status--cancelled,
.wcrc-status--canceled {
	background: var(--wcrc-red-soft);
	color: var(--wcrc-red);
}

/* Deadline colour bands — mirror the admin/My-Account convention. */
.wcrc-deadline--green {
	color: var(--wcrc-green);
	font-weight: 600;
}

.wcrc-deadline--orange {
	color: var(--wcrc-amber);
	font-weight: 600;
}

.wcrc-deadline--red {
	color: var(--wcrc-red);
	font-weight: 600;
}

.wcrc-deadline--unknown {
	color: var(--wcrc-muted);
}

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

.wcrc-portal-order__notice {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border-radius: var(--wcrc-radius);
	border-left: 4px solid var(--wcrc-border);
	background: var(--wcrc-canvas);
	font-size: 0.95rem;
}

.wcrc-portal-order__notice--expired {
	border-left-color: var(--wcrc-red);
	background: var(--wcrc-red-soft);
}

.wcrc-portal-order__notice--non-returnable,
.wcrc-portal-order__notice--company {
	border-left-color: var(--wcrc-amber);
	background: var(--wcrc-amber-soft);
}

/* --- Action buttons row ------------------------------------------------- */

.wcrc-portal-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

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

.wcrc-form {
	margin-top: 1.5rem;
	padding: 1.25rem 1.25rem 0.5rem;
	border: 1px solid var(--wcrc-border);
	border-radius: var(--wcrc-radius);
	background: var(--wcrc-surface);
}

.wcrc-form__scope {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wcrc-border);
	border-radius: var(--wcrc-radius);
}

.wcrc-form__scope legend {
	padding: 0 0.4rem;
	font-weight: 600;
}

.wcrc-form__scope label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 1.25rem;
}

/* Row-selection column: keep it narrow and centred. */
.wcrc-form__select-col,
.wcrc-form__select-cell {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

.wcrc-form__products input[type="number"] {
	width: 5.5rem;
}

/* A disabled quantity input (its row unchecked) reads clearly as inactive. */
.wcrc-form__products input[type="number"]:disabled {
	background: var(--wcrc-canvas);
	color: var(--wcrc-muted);
	cursor: not-allowed;
	opacity: 0.7;
}

.wcrc-form .form-row,
.wcrc-portal-verify .form-row,
.wcrc-portal-tracking .form-row {
	margin: 0 0 1.15rem;
}

.wcrc-portal-verify label,
.wcrc-portal-tracking label,
.wcrc-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

/* Consent / inline checkbox rows: label wraps the control, so keep it inline. */
.wcrc-form .form-row label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

.wcrc-portal-verify input[type="text"],
.wcrc-portal-verify input[type="email"],
.wcrc-portal-tracking input[type="email"],
.wcrc-form input[type="text"],
.wcrc-form input[type="email"],
.wcrc-form input[type="number"],
.wcrc-form input[type="date"],
.wcrc-form input[type="file"],
.wcrc-form textarea,
.wcrc-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid #c7ccd8;
	border-radius: 6px;
	background: var(--wcrc-surface);
	color: var(--wcrc-ink);
	font-size: 1rem;
	line-height: 1.4;
}

.wcrc-form__products input[type="number"] {
	display: inline-block;
}

.wcrc-portal-verify input:focus,
.wcrc-portal-tracking input:focus,
.wcrc-form input:focus,
.wcrc-form textarea:focus,
.wcrc-form select:focus {
	outline: 2px solid var(--wcrc-accent);
	outline-offset: 1px;
	border-color: var(--wcrc-accent);
}

.wcrc-form textarea {
	min-height: 4.5rem;
	resize: vertical;
}

.wcrc-form__hint {
	display: block;
	margin-top: 0.3rem;
	color: var(--wcrc-muted);
	font-size: 0.85rem;
}

.wcrc-form .required,
.wcrc-portal-verify .required,
.wcrc-portal-tracking .required {
	color: var(--wcrc-red);
}

/* --- IBAN block --------------------------------------------------------- */

.wcrc-form__iban,
.wcrc-form__iban-owner {
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--wcrc-accent);
	background: var(--wcrc-accent-soft);
	border-radius: 0 var(--wcrc-radius) var(--wcrc-radius) 0;
}

.wcrc-form__iban-owner {
	margin-top: -0.4rem;
}

/* --- Buttons ------------------------------------------------------------ */

.wcrc-portal-verify .button,
.wcrc-portal-order .button,
.wcrc-portal-tracking .button,
.wcrc-portal-expired .button,
.wcrc-form .button,
.wcrc-my-account-detail .button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--wcrc-accent);
	border-radius: 6px;
	background: var(--wcrc-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wcrc-portal-verify .button:hover,
.wcrc-portal-order .button:hover,
.wcrc-portal-tracking .button:hover,
.wcrc-portal-expired .button:hover,
.wcrc-form .button:hover,
.wcrc-my-account-detail .button:hover {
	background: var(--wcrc-accent-dark);
	border-color: var(--wcrc-accent-dark);
	color: #fff;
}

.wcrc-portal-verify .button:focus-visible,
.wcrc-portal-order .button:focus-visible,
.wcrc-portal-tracking .button:focus-visible,
.wcrc-form .button:focus-visible,
.wcrc-my-account-detail .button:focus-visible {
	outline: 2px solid var(--wcrc-accent-dark);
	outline-offset: 2px;
}

.wcrc-form .button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Secondary look for the order-detail action buttons (return / claim). */
.wcrc-portal-order__actions .button {
	background: var(--wcrc-surface);
	color: var(--wcrc-accent-dark);
}

.wcrc-portal-order__actions .button:hover {
	background: var(--wcrc-accent-soft);
	color: var(--wcrc-accent-dark);
	border-color: var(--wcrc-accent);
}

/* --- Form / portal status messages ------------------------------------- */

.wcrc-form__message,
.wcrc-portal-verify__message,
.wcrc-portal-tracking__message,
.wcrc-form-message {
	margin: 0.5rem 0 1rem;
	color: var(--wcrc-red);
	font-weight: 600;
	min-height: 1.2em;
}

.wcrc-form__message:empty,
.wcrc-portal-verify__message:empty,
.wcrc-portal-tracking__message:empty,
.wcrc-form-message:empty {
	margin: 0;
	min-height: 0;
}

/* --- Thank-you fragment ------------------------------------------------- */

.wcrc-portal-thank-you {
	padding: 1.5rem;
	border: 1px solid var(--wcrc-green);
	border-radius: var(--wcrc-radius);
	background: var(--wcrc-green-soft);
}

.wcrc-portal-thank-you__title {
	margin-top: 0;
	color: var(--wcrc-green);
}

.wcrc-portal-thank-you__number {
	font-weight: 600;
}

.wcrc-portal-thank-you__deadline {
	margin-bottom: 0;
	color: var(--wcrc-ink);
}

.wcrc-portal-thank-you__deadline--pending {
	color: var(--wcrc-muted);
}

/* --- Expired / invalid link page --------------------------------------- */

.wcrc-portal-expired {
	padding: 1.5rem;
	border: 1px solid var(--wcrc-border);
	border-radius: var(--wcrc-radius);
	background: var(--wcrc-canvas);
	text-align: center;
}

.wcrc-portal-expired__message {
	margin-top: 0;
	color: var(--wcrc-muted);
}

/* --- Tracking ----------------------------------------------------------- */

.wcrc-portal-tracking__status {
	margin: 0 0 1.25rem;
}

.wcrc-portal-tracking__status-label {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wcrc-accent-soft);
	color: var(--wcrc-accent-dark);
	font-weight: 600;
}

.wcrc-portal-tracking__note,
.wcrc-portal-tracking__instructions {
	padding: 0.85rem 1rem;
	border-radius: var(--wcrc-radius);
	background: var(--wcrc-canvas);
}

.wcrc-portal-tracking__deadline {
	margin: 1.25rem 0;
}

.wcrc-portal-tracking__deadline-label {
	color: var(--wcrc-muted);
	font-weight: 600;
}

.wcrc-portal-tracking__renew-intro {
	margin-bottom: 1.25rem;
	color: var(--wcrc-muted);
}

/* --- Status-history timeline (tracking + My-Account) -------------------- */

.wcrc-portal-tracking__history,
.wcrc-status-history {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.wcrc-portal-tracking__history-item,
.wcrc-status-history__item {
	position: relative;
	margin: 0;
	padding: 0 0 1.1rem 1.25rem;
	border-left: 2px solid var(--wcrc-border);
}

.wcrc-portal-tracking__history-item:last-child,
.wcrc-status-history__item:last-child {
	padding-bottom: 0;
}

.wcrc-portal-tracking__history-item::before,
.wcrc-status-history__item::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 0.35rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wcrc-accent);
}

.wcrc-portal-tracking__history-date,
.wcrc-status-history__date {
	display: block;
	color: var(--wcrc-muted);
	font-size: 0.82rem;
}

.wcrc-portal-tracking__history-status,
.wcrc-status-history__label {
	display: block;
	font-weight: 600;
}

.wcrc-portal-tracking__history-note,
.wcrc-status-history__note {
	display: block;
	color: var(--wcrc-muted);
}

/* --- My-Account spacing ------------------------------------------------- */

.wcrc-my-account__empty {
	padding: 1.25rem;
	border: 1px solid var(--wcrc-border);
	border-radius: var(--wcrc-radius);
	background: var(--wcrc-canvas);
	color: var(--wcrc-muted);
	text-align: center;
}

.wcrc-my-account-detail__note,
.wcrc-my-account-detail__instructions,
.wcrc-my-account-detail__history {
	margin: 1.5rem 0;
}

.wcrc-my-account-detail__cancel {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wcrc-border);
}

/* --- My-Account orders table (order-actions cell) ----------------------- */

/* WooCommerce's `myaccount/orders.php` prints each action anchor back-to-back
 * with no separator, so the theme's "View" button and the buttons this plugin
 * appends ("Return goods" / "File a claim") touch. The selector is the
 * WooCommerce cell class, not a `wcrc-` wrapper — the actions cell is
 * WooCommerce's markup — but the sheet only loads on the account orders list
 * and the plugin's own account views.
 *
 * Three things this rule has to get right:
 *
 * - The gap goes on the RIGHT, not as a left margin on later siblings: the
 *   actions column is narrow enough that the buttons routinely wrap, and a
 *   left margin would indent every wrapped button out of line with the first.
 * - `td.` qualifies the selector so it outweighs WooCommerce's own
 *   `.my_account_orders .button { margin-right: 0.236em }` — same specificity,
 *   but `woocommerce.css` is enqueued after this sheet and would otherwise win
 *   on source order.
 * - Fixed px, not rem/em: both the root font size and the button font size are
 *   the theme's to shrink (the wp-env theme resolves 1rem to ~5.8px), which
 *   would collapse the gap back to a hairline. */
td.woocommerce-orders-table__cell-order-actions .button,
td.woocommerce-orders-table__cell-order-actions .woocommerce-button {
	margin-right: 8px;
	margin-bottom: 6px;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 600px) {
	.wcrc-portal-order__products,
	.wcrc-form__products {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.wcrc-portal-order__actions .button,
	.wcrc-form__submit {
		width: 100%;
		text-align: center;
	}

	.wcrc-form__scope label {
		display: flex;
		margin: 0 0 0.5rem;
	}
}