/*
 * WooCommerce: form fields and buttons (cart, checkout, account, single product).
 * Loaded only on WooCommerce pages (see functions.php).
 *
 * Kept as CSS because WooCommerce prints its own form markup, and the Bricks Woo elements have no
 * padding or radius controls for inputs and buttons. Layout, cards, headings and table typography
 * are set on the Bricks templates (classes woo-card, Product Card component).
 * Fields match the estimate form: rounded, no border, green text; light grey because they sit on
 * the white woo-card panels.
 */

/* Fields */
/* .quantity .qty sits outside :is() so it doesn't raise the specificity of the whole list (fieldset rule below must win) */
.woocommerce :is(form .input-text, form select, input[name="coupon_code"]),
.woocommerce .quantity .qty,
.woocommerce .select2-container .select2-selection--single {
	min-height: 4.8rem;
	padding: 1.2rem 1.6rem;
	background: var(--color-light-grey);
	border: 0;
	border-radius: 0.7rem;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-primary);
	box-shadow: none;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 2.4rem;
	color: var(--color-primary);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 1.6rem;
	width: 1.4rem;
	height: 0.8rem;
	transform: translateY(-50%);
	/* Same chevron as the shop's category filter, in place of select2's triangle */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234F5A22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.woocommerce :is(form .input-text, form select, input[name="coupon_code"]):focus,
.woocommerce .quantity .qty:focus,
.woocommerce .select2-container--focus .select2-selection--single {
	outline: none;
	box-shadow: inset 0 0 0 0.2rem var(--color-primary);
}

.woocommerce form .form-row {
	margin-bottom: 1.6rem;
}

/* Single product quantity: the Bricks plus/minus sit either side of the field */
.woocommerce .quantity {
	border-radius: 0.7rem;
	overflow: hidden;
}

.woocommerce .quantity :is(.minus, .plus) {
	background: var(--color-light);
	border: 0;
	color: var(--color-primary);
}

/* On the product page the stepper sits on the grey page, not a white card, so the field is white too */
.woocommerce form.cart .quantity .qty {
	background: var(--color-light);
}

/* Buttons: same as the site's primary button */
.woocommerce :is(.button, button.button, a.button, input.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.8rem;
	padding: 1.4rem 2.2rem;
	background: var(--color-primary);
	border: 0;
	border-radius: 0.7rem;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-light);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--default-transition), color var(--default-transition), box-shadow var(--default-transition);
}

.woocommerce :is(.button, button.button, a.button, input.button):hover {
	background: color-mix(in srgb, var(--color-primary), var(--color-dark) 20%);
	color: var(--color-light);
}

/* Secondary actions (update cart, apply coupon) are outlined so "Proceed to checkout" leads */
.woocommerce :is(button[name="update_cart"], button[name="apply_coupon"]) {
	background: transparent;
	box-shadow: inset 0 0 0 0.1rem var(--color-primary);
	color: var(--color-primary);
}

.woocommerce :is(button[name="update_cart"], button[name="apply_coupon"]):hover {
	background: var(--color-primary);
	color: var(--color-light);
}

.woocommerce :is(.button, button.button):disabled,
.woocommerce :is(.button, button.button)[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce :is(.button, button.button):focus-visible {
	outline: 0.2rem solid var(--color-primary);
	outline-offset: 0.2rem;
}

/* Checkout: headings Bricks doesn't reach (order notes) match the billing title; no table/payment borders inside the white cards */
.woocommerce :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3 {
	margin: 0 0 1.6rem;
}

.woocommerce .woocommerce-additional-fields h3 {
	margin-top: 1.6rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primary);
}

.woocommerce .woocommerce-additional-fields label {
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--color-primary);
}

.woocommerce table.shop_table,
.woocommerce-checkout #payment {
	border: 0;
}

.woocommerce-checkout #payment {
	border-radius: 0.7rem;
}

/* Totals tables: room between the label column and the values; labels line up with the first line */
.woocommerce :is(.cart_totals, .woocommerce-checkout-review-order-table) th {
	padding-right: 1.6rem;
	vertical-align: top;
}

/* "Deliver to a different address?": checkbox before the text, styled as a sub-heading */
.woocommerce #ship-to-different-address {
	margin: 1.6rem 0;
}

.woocommerce #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primary);
	cursor: pointer;
}

/* Shipping options in the cart and checkout totals: radio beside its label (site radios are display:grid) */
.woocommerce ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
}

.woocommerce ul#shipping_method li label {
	display: inline;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-dark);
	cursor: pointer;
}

.woocommerce :is(.woocommerce-shipping-destination, .shipping-calculator-button) {
	font-size: 1.4rem;
	line-height: 1.5;
}

.woocommerce .shipping-calculator-button {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* Required marker and invalid fields (same red as the estimate form errors) */
.woocommerce form .required {
	border: 0;
	color: #b3261e;
	text-decoration: none;
}

.woocommerce form .woocommerce-invalid :is(.input-text, select),
.woocommerce form .woocommerce-invalid .select2-selection--single {
	box-shadow: inset 0 0 0 0.2rem #b3261e;
}

.woocommerce .checkout-inline-error-message {
	margin: 0.6rem 0 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: #b3261e;
}

/* Country/state dropdown list */
.select2-container .select2-dropdown {
	border: 0;
	border-radius: 0.7rem;
	box-shadow: 0 0.8rem 2.4rem rgb(0 0 0 / 0.12);
	overflow: hidden;
	font-size: 1.6rem;
}

.select2-container .select2-search__field {
	padding: 0.8rem 1.2rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--color-light-grey);
}

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

/* Account details: the "Password change" fieldset is a grey panel; its legend sits inside as a heading */
.woocommerce fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 1.6rem;
	padding: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primary);
}

.woocommerce fieldset legend + * {
	clear: both;
}

/* Fields inside a grey panel are white, so they stay visible */
.woocommerce fieldset :is(.input-text, select) {
	background: var(--color-light);
}

/* Notices: success (green tint), info (outlined), error (red tint). Woo's icon font glyphs are dropped */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2rem;
	margin: 0;
	padding: 1.6rem 2rem;
	list-style: none;
	border: 0;
	border-radius: 0.7rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: none;
}

body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) + :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin-top: 1.2rem;
}

body .woocommerce-message {
	background: color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
	color: var(--color-primary);
}

body .woocommerce-info {
	background: var(--color-light);
	box-shadow: inset 0 0 0 0.1rem rgb(0 0 0 / 0.1);
	color: var(--color-dark);
}

body .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	background: color-mix(in srgb, #b3261e 7%, var(--color-light));
	box-shadow: inset 0 0 0 0.1rem color-mix(in srgb, #b3261e 25%, transparent);
	color: #b3261e;
}

body .woocommerce-error li {
	margin: 0;
}

body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* The notice's own button ("View cart", "Continue shopping") sits on the right */
body :is(.woocommerce-message, .woocommerce-info) .button {
	order: 2;
	min-height: 4rem;
	padding: 1rem 1.8rem;
}

/* AJAX add to cart on the product cards: Woo adds a "View cart" link after the button */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 1rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce :is(.button, button.button, a.button, input.button) {
		transition: none;
	}
}