/**
 * Public Retailer Return Request form.
 *
 * Front-end, not admin: this is rendered inside whatever theme the store uses,
 * so it must not import the admin design system (which is scoped under
 * `.rk-admin` and would leak a different design language onto a public page).
 * It is scoped under `.rk-return-form` and deliberately restrained — layout and
 * legibility only, no colours of its own, so it sits inside any theme rather
 * than fighting it.
 *
 * **It takes its colour from the page.** Every line here is drawn in
 * `currentColor` at low opacity or left to the theme outright, so a dark theme
 * gets dark borders and a light one gets light borders with no second palette to
 * maintain. `color-mix()` is what makes that possible; the plain `rgba( 0, 0, 0, … )`
 * declaration before each one is the fallback, and it is the value this file
 * used before the rebuild, so a browser without `color-mix()` sees exactly what
 * it saw then (AD-50).
 *
 * **What the redesign changed.** The `<fieldset>` boxes are gone — grouping is
 * now `role="group"` plus a heading in the markup, which carries the same
 * semantics without the box-in-a-box look — and the item rows are cards that can
 * be added to and removed from. Every control gained a `:focus-visible` ring,
 * because a form that restyles its own inputs owes the keyboard a visible
 * cursor. Nothing here removes an outline.
 *
 * Enqueued only on a page that actually contains the shortcode.
 */

.rk-return-form{
	position: relative;
	max-width: 640px;
}

/* Sections ------------------------------------------------------------------ */

.rk-return-form .rk-return-section{
	margin: 0 0 26px;
}

.rk-return-form .rk-return-section-title{
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	border-bottom-color: color-mix(in srgb, currentColor 16%, transparent);
}

/* Fields -------------------------------------------------------------------- */

.rk-return-form .rk-return-field{
	margin: 0 0 14px;
}

.rk-return-form label{
	display: block;
	font-weight: 600;
	margin: 0 0 5px;
	font-size: 16px;
}

/* Bold rather than coloured: an asterisk is the convention, and the `required`
   attribute is what actually announces the rule to a screen reader. */
.rk-return-form .rk-return-req{
	font-weight: 700;
}

.rk-return-form input[type="text"],
.rk-return-form input[type="email"],
.rk-return-form input[type="tel"],
.rk-return-form input[type="number"],
.rk-return-form textarea{
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-color: color-mix(in srgb, currentColor 32%, transparent);
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	outline: none !important;
}

.rk-return-form textarea{
	min-height: 96px;
	resize: vertical;
}

/* A restyled control still owes the keyboard a visible cursor. Only the ring is
   set: nothing in this file removes an outline. */
.rk-return-form input:focus-visible,
.rk-return-form textarea:focus-visible,
.rk-return-form button:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rk-return-form .rk-return-hint{
	font-size: .875rem;
	line-height: 1.5;
	opacity: .75;
	margin: -4px 0 14px;
}

/* Email and phone sit side by side on a wide screen, stacked on a narrow one. */
.rk-return-form .rk-return-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 14px;
}

/* Item rows ----------------------------------------------------------------- */

.rk-return-form .rk-return-items{
	margin: 0 0 14px;
}

.rk-return-form .rk-return-item{
	border: 1px solid rgba(0, 0, 0, .12);
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 12px;
	background: rgba(0, 0, 0, .02);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.rk-return-form .rk-return-item-head{
	text-align: right;
	margin: 0 0 8px;
}

.rk-return-form .rk-return-item-fields{
	display: grid;
	/* `minmax( 0, … )` because a grid cell defaults to `min-width: auto`, which
	   would let a long barcode widen the column and push the card off the page. */
	grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1.4fr);
	gap: 12px 14px;
	align-items: start;
}

/* The grid's own `gap` is the spacing inside a card; the field's bottom margin
   would add to it and leave the row uneven. */
.rk-return-form .rk-return-item-fields .rk-return-field{
	margin: 0;
}

.rk-return-form .rk-return-remove{
	padding: 4px 12px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-color: color-mix(in srgb, currentColor 26%, transparent);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: .8125rem;
	line-height: 1.5;
	cursor: pointer;
}

.rk-return-form .rk-return-remove:hover{
	border-color: currentColor;
}

.rk-return-form .rk-return-add{
	margin: 0;
}

.rk-return-form .rk-return-add-button{
	display: inline-block;
	padding: 9px 16px;
	border: 1px dashed rgba(0, 0, 0, .3);
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	font-size: 16px;
}

.rk-return-form .rk-return-add-button:hover{
	border-style: solid;
	border-color: currentColor;
}

/* Submit -------------------------------------------------------------------- */

.rk-return-form .rk-return-submit{
	margin: 26px 0 0;
}

/* The button keeps the theme's own treatment — its colour is the shop's brand,
   and overriding it would be this stylesheet insisting on a look of its own. All
   that is set is the box, so it measures the same as the controls above it. */
.rk-return-form .rk-return-submit button{
	padding: 12px 22px;
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	font-size: 16px;
}

/* Hidden from people, present for naive bots. Kept off-screen rather than
   display:none, because some bots skip fields that are not rendered. */
.rk-return-form .rk-return-honeypot{
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Result notices ------------------------------------------------------------ */

.rk-return-notice{
	max-width: 640px;
	padding: 14px 16px;
	border-radius: 8px;
	border-left: 4px solid;
	margin: 0 0 22px;
}

.rk-return-notice p{
	margin: 0 0 6px;
}

.rk-return-notice p:last-child{
	margin-bottom: 0;
}

.rk-return-notice-success{
	border-color: #2e7d32;
	background: rgba(46, 125, 50, .08);
}

.rk-return-notice-error{
	border-color: #c62828;
	background: rgba(198, 40, 40, .08);
}

/* Narrow screens ------------------------------------------------------------ */

@media (max-width: 600px){
	.rk-return-form .rk-return-row,
	.rk-return-form .rk-return-item-fields{
		grid-template-columns: 1fr;
	}

	.rk-return-form .rk-return-item{
		padding: 12px;
	}

	/* A control under 16px makes iOS Safari zoom the whole page on focus, which
	   throws the form off-centre mid-entry. The controls therefore keep the
	   page's own size on a phone instead of the field's. */
	.rk-return-form input[type="text"],
	.rk-return-form input[type="email"],
	.rk-return-form input[type="tel"],
	.rk-return-form input[type="number"],
	.rk-return-form textarea{
		font-size: 1rem;
	}

	.rk-return-form .rk-return-submit button{
		width: 100%;
	}
}

/* Utilities — deliberately last --------------------------------------------- */

/* These carry `display` and must beat the layout rules above, which is why the
   rule is the last one in the file rather than beside the controls it hides. A
   hidden row is cleared by the script, so nothing it held can be submitted from
   off-screen; a hidden Remove or Add item is a control the script has not yet
   made meaningful. */
.rk-return-form .rk-return-hidden{
	display: none;
}