/*
 * WooCommerce form fields, wherever they appear.
 *
 * Checkout and the cart's shipping calculator render the same `.form-row` /
 * `.input-text` / Select2 markup, so this treatment cannot live in either
 * page's stylesheet — that is the mistake that has bitten this theme three
 * times. Both wrap their fields in `.wc-form`; add the class to anything else
 * that renders WooCommerce fields.
 */

/* `.woocommerce form .form-row` (0,2,1) adds 3px of padding — outrank it. */
.wc-form .form-row,
.wc-form form .form-row {
	display: block;
	margin: 0 0 14px;
	padding: 0;
}

.wc-form .form-row label,
.wc-form form .form-row label {
	display: block;
	margin-block-end: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
}

.wc-form .form-row .required {
	color: var(--pdp-price);
	text-decoration: none;
}

/*
 * WooCommerce's own `.woocommerce form .form-row .input-text` (0,3,1) ends with
 * `height: auto`, so a plain `.wc-form .input-text` (0,2,0) never took effect —
 * text fields sat at 35px next to the 48px Select2 boxes. The longer selectors
 * below exist purely to outrank it; keep them when editing.
 */
.wc-form .input-text,
.wc-form select,
.wc-form form .form-row .input-text,
.wc-form form .form-row select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: normal;
	color: var(--color-text);
}

/* WooCommerce replaces country and state with Select2. Its own stylesheet sets
   the height on the wrapper and positions the text with a line-height on an
   inner span, so styling only the wrapper leaves the value sitting high. */
.wc-form .select2-container {
	width: 100% !important;
}

.wc-form .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-white);
}

.wc-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 38px 0 14px;
	line-height: 46px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text);
}

.wc-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	inset-inline-end: 10px;
}

.wc-form .select2-container--default.select2-container--focus .select2-selection--single,
.wc-form .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--color-primary);
}

.select2-dropdown {
	border-color: var(--color-border);
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--color-primary);
}

.wc-form textarea.input-text,
.wc-form form .form-row textarea.input-text {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
}

.wc-form .input-text:focus,
.wc-form select:focus,
.wc-form form .form-row .input-text:focus,
.wc-form form .form-row select:focus {
	border-color: var(--color-primary);
	outline: 2px solid var(--header-search-glow);
	outline-offset: 0;
}

/* Two-up rows for names and city/postcode, as most checkouts do. */
@media (min-width: 640px) {
	.wc-form .form-row-first,
	.wc-form .form-row-last {
		float: none;
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	.wc-form .form-row-first {
		margin-inline-end: 12px;
	}
}

.wc-form .woocommerce-invalid .input-text,
.wc-form .woocommerce-invalid select,
.wc-form .woocommerce-invalid .select2-container--default .select2-selection--single,
.wc-form .wc-form-invalid {
	border-color: var(--pdp-price);
}

/* A filled-in field is not an achievement worth a green border. */
.wc-form .woocommerce-validated .input-text,
.wc-form .woocommerce-validated select,
.wc-form .woocommerce-validated .select2-container--default .select2-selection--single {
	border-color: var(--color-border);
}