/*
 * Vendix on the WooCommerce cart, checkout, order and account pages, classic and
 * block: tables, totals, the payment box, the checkout columns, the place order
 * button while the order is processed, the account menu and the order received
 * page.
 *
 * Loads after woocommerce.css only where the cart, the checkout, an order, the
 * account or a store form of a plugin, such as a quote request, is shown
 * (vendix_theme_is_store_cart_page()).
 */

/* Tables, the cart and the checkout ------------------------------------- */

.woocommerce table.shop_table {
	border-color: var(--vt-border);
	border-radius: var(--vt-radius);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--vt-border);
	background-color: transparent;
}

.woocommerce-cart table.cart img {
	width: 64px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: auto;
	min-width: 10rem;
	min-height: 44px;
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-size: 1.25rem;
}

.woocommerce-page .select2-container .select2-selection--single {
	height: auto;
	min-height: 44px;
	border-color: #8c8f94;
	border-radius: var(--vt-radius);
}

.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
	padding-block: 0.6rem;
	line-height: 1.5;
}

.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

/* The payment box on the theme surface instead of WooCommerce's purple. */
.woocommerce-checkout #payment {
	border-radius: var(--vt-radius);
	background-color: var(--vt-surface);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: #ffffff;
	color: var(--vt-text);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-block-end-color: #ffffff;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-block-end-color: var(--vt-border);
}

/*
 * Classic checkout at 992px and up: the address forms on the start side, the
 * order and payment beside them. Anything else in the form runs over both
 * columns: the first such item, such as the error notices WooCommerce puts at
 * the start of the form, on the empty first row.
 */
@media (min-width: 992px) {
	form.woocommerce-checkout {
		display: grid;
		grid-template-areas:
			"notices notices"
			"details heading"
			"details review";
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		grid-template-rows: auto auto 1fr;
		column-gap: 3rem;
		align-items: start;
	}

	form.woocommerce-checkout > * {
		grid-column: 1 / -1;
	}

	form.woocommerce-checkout > #customer_details {
		grid-area: details;
	}

	form.woocommerce-checkout > #order_review_heading {
		grid-area: heading;
		margin-block-start: 0;
	}

	form.woocommerce-checkout > #order_review {
		grid-area: review;
	}

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		float: none;
		width: auto;
	}
}

/* The place order button while the order is processed ------------------ */

/*
 * From the click until WooCommerce has the answer, the place order button shows
 * that it is working: a spinner, or a still lock for visitors who reduce motion.
 * It keeps its colors, as it is busy, not unavailable, and what plugins print
 * below it, such as payment badges, keeps its place.
 *
 * Classic checkout: WooCommerce adds the processing class to the form and lays a
 * light veil over it (blockUI, z-index 1000). The button rises above the veil
 * inside the form, which then stacks on its own, so the button still passes
 * under a sticky header. As in the checkout block, the label gives way to the
 * spinner in the middle of the button, so the button keeps its width; screen
 * readers still read the label.
 */
form.checkout.processing {
	isolation: isolate;
}

form.checkout.processing #place_order {
	position: relative;
	z-index: 1001;
	cursor: progress;
	-webkit-text-fill-color: transparent;
}

/* The place of the classic spinner, and of the lock that replaces both spinners. */
form.checkout.processing #place_order::before,
.wc-block-components-checkout-place-order-button--loading .wc-block-components-spinner::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 1em;
	height: 1em;
	margin: auto;
}

/*
 * Checkout block: WooCommerce disables the button, hides its label and shows its
 * own spinner (--loading) while it processes the order and moves on to the order
 * received page. One step more specific than the block rules, which load after
 * this file.
 */
.wc-block-checkout__actions_row .wc-block-components-button.wc-block-components-checkout-place-order-button--loading:disabled {
	opacity: 1;
	cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
	form.checkout.processing #place_order::before {
		border: 2px solid currentColor;
		border-inline-end-color: transparent;
		border-radius: 50%;
		animation: vt-place-order-spin 0.8s linear infinite;
	}
}

/* A still lock in place of the spinner, also of the block's own spinner. */
@media (prefers-reduced-motion: reduce) {
	form.checkout.processing #place_order::before,
	.wc-block-components-checkout-place-order-button--loading .wc-block-components-spinner::before {
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.wc-block-components-checkout-place-order-button--loading .wc-block-components-spinner::after {
		display: none;
	}
}

@keyframes vt-place-order-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Blocks: the cart, the checkout and the order confirmation ------------- */

/* Content links are underlined (base.css); the buttons and product names of the blocks are not. */
.page-content a.wc-block-components-button,
.page-content a.wc-block-components-product-name {
	text-decoration: none;
}

/*
 * The block cart is a table too, and its quantity selector is made of a field and
 * two buttons. The element rules of base.css for tables, fields and buttons
 * (smaller table text, striped rows, cell line height, field padding, button line
 * height and corners) would change them, so these component rules give back the
 * values the cart block is designed with. They are no more specific than the
 * block rules and load before them, so the block keeps the last word.
 */
table.wc-block-cart-items {
	font-size: inherit;
}

table.wc-block-cart-items td,
table.wc-block-cart-items th {
	background-color: transparent;
}

table.wc-block-cart-items th {
	line-height: inherit;
	vertical-align: inherit;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	width: auto;
	padding: 0.4em 0;
	border-radius: 0;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	border-radius: 0;
	line-height: normal;
	white-space: normal;
}

/*
 * In a cart block narrower than 920px WooCommerce gives the product column a
 * fixed 132px and the total a column of its own after an empty one, which needs
 * 355px and gets cut on phones. The product column takes the room that is left
 * instead, so the row fits a phone. One step more specific than the block rules,
 * which load after this file.
 */
@container (max-width: 919px) {
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr) auto;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
	}
}

/*
 * A wide checkout block keeps its order summary in view, 24px below the top of
 * the window (is-sticky). Under a sticky theme header (vt-sticky-header,
 * header.js) the 24px start below the admin bar, a Vendix announcement bar fixed
 * at the top (its height on <html>, as in header-sticky.css) and the header
 * instead. More specific than the block rule, which loads after this file.
 */
.vt-sticky-header .wc-block-checkout__sidebar.is-sticky {
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--arnsc-announcement-room, var(--arnsmesu-announcement-room, 0px)) + var(--vt-sticky-header-height) + 24px);
}

/*
 * Chosen radios and checkboxes in the theme accent. The block styles load after
 * this file, so these selectors are one step more specific than theirs.
 */
.wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__input:checked {
	border-color: var(--vt-accent);
}

.wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__input:checked::before {
	background: var(--vt-accent);
}

.wc-block-components-checkbox label .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--vt-accent);
	background: var(--vt-accent);
}

.wc-block-components-checkbox label .wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
	fill: var(--vt-accent-contrast);
}

/* Account --------------------------------------------------------------- */

/* The account menu: a list above the content on phones, beside it at 768px and up. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--vt-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid var(--vt-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding-block: 0.75rem;
	color: var(--vt-heading);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--vt-accent);
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		grid-column: 2;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		margin-block-end: 0;
	}
}

.woocommerce form.login,
.woocommerce form.register {
	border-color: var(--vt-border);
	border-radius: var(--vt-radius);
}

/* Order received -------------------------------------------------------- */

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 0;
	padding: 0;
}

.woocommerce ul.order_details li {
	border-inline-end-color: var(--vt-border);
}

.woocommerce-order .woocommerce-thankyou-order-received {
	color: var(--vt-heading);
	font-size: 1.25rem;
	font-weight: 600;
}