@charset "UTF-8";
/* WC Plus core — retourformulieren (Mijn account + gastflow).
   Structuur + gedrag, geen styling-opinie. Bootstrap-vrij.
   Override-tokens: zet ze in het shop-theme op .wcp-returns-table / .wcp-returns-cta. */

/* Op smalle schermen scrollt de tabel binnen de wrapper in plaats van uit de pagina
   te lopen (dit deed Bootstrap .table-responsive; die klasse doet hier niets meer). */
.wcp-returns-table-wrap {
	overflow-x: auto;
}

.wcp-returns-table td {
	vertical-align: top;
}

.wcp-returns-item__label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	cursor: pointer;
}

.wcp-returns-item__label input[type="checkbox"] {
	margin-top: 0.3em;
}

.wcp-returns-item__sku {
	color: var(--wcp-returns-muted-color);
}

.wcp-returns-item__qty {
	width: 4.5em;
	text-align: center;
}

.wcp-returns-item__max {
	display: block;
	color: var(--wcp-returns-muted-color);
	margin-top: 0.25em;
}

.wcp-returns-item__reason {
	margin: 0;
	min-width: 12em;
}

/* Bestelnummer + besteldatum boven het retourformulier (#198). */
.wcp-returns-order {
	margin: 0 0 1rem;
	color: var(--wcp-returns-muted-color, var(--wcp-color-muted));
}
.wcp-returns-order strong {
	color: var(--wcp-color-text, inherit);
}

.wcp-returns-status,
.wcp-returns-status-note {
	font-size: 0.95em;
}

.wcp-returns-cta {
	margin-top: 0.5em;
}

/* ── Retourpagina (paginasjabloon wcp-returns.php, templates/pages/returns.php) ── */
.wcp-returns-page__intro { padding-block: 2rem 1rem; }
.wcp-returns-page__title { margin: 0 0 0.75rem; }
.wcp-returns-page__lead,
.wcp-returns-page__content { max-width: 46rem; color: var(--wcp-color-muted); }
.wcp-returns-page__steps { padding-block: 1rem 2rem; }
/* Lichte tint achter het formulierblok: zonder eigen achtergrond viel deze afsluitende sectie
   optisch niet los van de content erboven (geen enkel visueel onderscheid, zichtbaar op een site
   zonder eigen thema-opmaak voor dit blok, bv. de woocommerce-plus.nl-demo). */
.wcp-returns-page__form { padding-block: 3rem; background: var(--wcp-color-surface-alt, var(--wcp-color-light)); }

/* Stappen: genummerde kaarten naast elkaar, op mobiel onder elkaar met het nummer links. */
.wcp-return-steps {
	display: grid;
	grid-template-columns: repeat(var(--wcp-return-steps, 5), minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wcp-return-step;
}
.wcp-return-steps__item {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
	text-align: center;
}
.wcp-return-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background: var(--wcp-color-primary);
	color: #fff;
	font-weight: var(--wcp-font-weight-bold);
}
.wcp-return-steps__title { margin: 0 0 0.35rem; font-size: 1.0625rem; }
.wcp-return-steps__text { margin: 0; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); }
@media (max-width: 61.99rem) {
	.wcp-return-steps { grid-template-columns: 1fr; gap: 0.5rem; }
	.wcp-return-steps__item {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
		text-align: left;
		padding: 0.875rem 1rem;
	}
	.wcp-return-steps__number { margin: 0; grid-row: 1 / span 2; }
	.wcp-return-steps__title { grid-column: 2; }
	.wcp-return-steps__text { grid-column: 2; }
}

/* Formulierkaart onder de stappen. Standaard gecentreerd (max-width + auto-marges), zodat het
   opzoekformulier als een nette afsluiting oogt zonder dat een thema dat zelf hoeft te doen. */
.wcp-returns-form-card {
	max-width:     46rem;
	margin-inline: auto;
	text-align:    center;
}
.wcp-returns-form-card__title { margin: 0 0 0.5rem; font-size: 1.375rem; }
.wcp-returns-form-card__hint { margin: 0 0 1.25rem; color: var(--wcp-color-muted); }
.wcp-returns-form-card__form { text-align: left; }
.wcp-returns-form-card__form .form-row { margin-bottom: 1rem; }
.wcp-returns-form-card__form .woocommerce-error { margin-bottom: 1rem; }

/* Veld-iconen: zelfde mask-op-currentColor-techniek als wcp-icons.css (svg-icon__orders/mail/house),
   hier los toegepast zodat dit bestand niet van die laag hoeft af te hangen. Input krijgt linker-
   padding voor het icoon; icoon zelf gedimd (muted) zodat de placeholder/waarde blijft opvallen. */
.wcp-returns-lookup-form__field--order .woocommerce-input-wrapper,
.wcp-returns-lookup-form__field--email .woocommerce-input-wrapper,
.wcp-returns-lookup-form__field--postcode .woocommerce-input-wrapper {
	position: relative;
	display:  block;
}
.wcp-returns-lookup-form__field--order .woocommerce-input-wrapper::before,
.wcp-returns-lookup-form__field--email .woocommerce-input-wrapper::before,
.wcp-returns-lookup-form__field--postcode .woocommerce-input-wrapper::before {
	content:          '';
	position:         absolute;
	left:             0.875rem;
	top:              50%;
	transform:        translateY(-50%);
	width:            1.125em;
	height:           1.125em;
	mask-size:        contain;
	mask-repeat:      no-repeat;
	mask-position:    center;
	background-color: var(--wcp-color-muted);
	pointer-events:   none;
}
.wcp-returns-lookup-form__field--order .woocommerce-input-wrapper::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22 fill=%22currentColor%22%3E%3Cpath d=%22M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-120H640q-30 38-71.5 59T480-240q-47 0-88.5-21T320-320H200v120Zm280-120q38 0 69-22t43-58h168v-360H200v360h168q12 36 43 58t69 22ZM200-200h560-560Z%22/%3E%3C/svg%3E");
}
.wcp-returns-lookup-form__field--email .woocommerce-input-wrapper::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22currentColor%22%3E%3Cpath d=%22M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z%22/%3E%3C/svg%3E");
}
.wcp-returns-lookup-form__field--postcode .woocommerce-input-wrapper::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22 fill=%22currentColor%22%3E%3Cpath d=%22M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z%22/%3E%3C/svg%3E");
}
/* .woocommerce form .form-row input.input-text (wcp-components.css, algemene formulierstijl) is
   specifieker dan de kale ".wcp-returns-lookup-form__field--x input" hierboven en won dus altijd,
   ondanks dat deze regel later in de cascade staat — de linker-padding voor het icoon kwam daardoor
   nooit aan, en getypte tekst liep achter het icoon (op een site zonder eigen padding-override
   zichtbaar, bv. de woocommerce-plus.nl-demo). Zelfde specificiteit (3 klassen + 2 elementen) als die
   regel, dus wint deze weer op cascade-volgorde (returns.css laadt ná wcp-components.css). */
.woocommerce form .wcp-returns-lookup-form__field--order input.input-text,
.woocommerce form .wcp-returns-lookup-form__field--email input.input-text,
.woocommerce form .wcp-returns-lookup-form__field--postcode input.input-text {
	padding-left: 2.625rem;
}

/* WooCommerce's eigen "vereist veld"-zin (<small class="error error-required">, sinds WC 9.x) is
   bedoeld als hint die pas verschijnt zodra een rij als ongeldig gemarkeerd wordt — zonder deze regel
   staat 'm standaard al zichtbaar bij elk verplicht veld, ook vóór er iets is ingevuld. */
.wcp-returns-lookup-form .error-required {
	display: none;
}
.wcp-returns-lookup-form .woocommerce-invalid .error-required,
.wcp-returns-lookup-form .woocommerce-invalid-required-field .error-required {
	display:     inline-block;
	margin-top:  0.25rem;
	color:       var(--wcp-color-danger, #dc3545);
}


/* ── Retour aanmelden (#248): zelfde vormtaal als de rest van het account ──
   Het formulier is één kaart. Per product een klikbare kaart (vinkje, foto, naam/SKU, max.); aantal en reden
   verschijnen pas na aanvinken. Bestelnummer en -datum staan met de accountkop al bovenaan. Ook voor de gastflow. */
.wcp-account-has-header .wcp-returns-order { display: none; }

.wcp-returns-form {
	padding: 1.25rem 1.5rem 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
@media (max-width: 47.98rem) {
	.wcp-returns-form { padding: 1rem; }
}
.wcp-returns-form__title {
	margin: 0 0 0.875rem;
	font-size: 1.0625rem;
	font-weight: var(--wcp-font-weight-bold, 700);
}

.wcp-return-items {
	display: grid;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.wcp-return-item {
	margin: 0;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface, #fff);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.wcp-return-item:hover { border-color: color-mix(in srgb, var(--wcp-color-primary) 40%, var(--wcp-color-border)); }
.wcp-return-item:has(.wcp-return-item__check:checked) {
	border-color: var(--wcp-color-primary);
	background: color-mix(in srgb, var(--wcp-color-primary) 5%, #fff);
	box-shadow: 0 0 0 1px var(--wcp-color-primary);
}

.wcp-returns-form .wcp-return-item__head {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding: 0.75rem 1rem;
	cursor: pointer;
}
.wcp-returns-form .wcp-return-item__check {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wcp-color-primary);
}
.wcp-return-item__thumb {
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface-alt, #f6f8fa);
}
.wcp-return-item__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wcp-return-item__name { display: grid; gap: 0.1rem; font-weight: var(--wcp-font-weight-semibold, 600); line-height: 1.35; }
.wcp-returns-form .wcp-returns-item__sku { color: var(--wcp-color-muted); font-size: 0.8125rem; font-weight: var(--wcp-font-weight-normal, 400); }
.wcp-return-item__max { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); white-space: nowrap; }

/* Aantal en reden: pas na aanvinken, in de kaart onder het product. */
.wcp-return-item__fields {
	display: none;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 0.75rem 1rem;
	padding: 0 1rem 1rem calc(1rem + 1.125rem + 0.875rem); /* uitgelijnd met de foto */
}
.wcp-return-item:has(.wcp-return-item__check:checked) .wcp-return-item__fields { display: grid; }
.wcp-returns-form .wcp-return-item__fields .form-row { margin: 0; padding: 0; }
.wcp-returns-form .wcp-return-item__fields label {
	display: block;
	margin: 0 0 0.3rem;
	color: var(--wcp-color-muted);
	font-size: 0.75rem;
	font-weight: var(--wcp-font-weight-bold, 700);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.woocommerce .wcp-returns-form input.wcp-returns-item__qty {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: #fff;
	text-align: center;
}
.wcp-returns-form .wcp-returns-item__reason { min-width: 0; }
.wcp-returns-form .wcp-returns-item__reason select { width: 100%; background-color: #fff; }

.woocommerce .wcp-returns-form .form-row textarea.input-text,
.woocommerce .wcp-returns-form textarea {
	min-height: 6rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.5rem);
}
.wcp-returns-form > .form-row { margin: 0 0 1rem; padding: 0; }
.wcp-returns-form > .form-row > label { font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-returns-form button[type="submit"] { margin: 0; }

@media (max-width: 35.98rem) {
	.wcp-returns-form .wcp-return-item__head { grid-template-columns: auto auto minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem; }
	.wcp-return-item__max { grid-column: 3; }
	.wcp-return-item__thumb { width: 3rem; height: 3rem; }
	.wcp-return-item__fields { grid-template-columns: 6rem minmax(0, 1fr); padding: 0 0.75rem 0.75rem; }
}
/* "(optioneel)" van woocommerce_form_field: een reden is verplicht voor een aangevinkt product (server-side gecontroleerd);
   HTML-required kan niet, dan blokkeert de browser op de verborgen velden van niet-aangevinkte producten. */
.wcp-return-item__fields .optional { display: none; }