/*
 * Cart, checkout and order confirmation.
 * Only theme presets are used, so every style variation (and the merchant's own colors) carries through.
 */

:root {
	--fok-shop-card-bg: var(--wp--preset--color--surface);
	--fok-shop-field-bg: var(--wp--preset--color--base);
	--fok-shop-border: var(--wp--preset--color--line);
	--fok-shop-radius: var(--wp--custom--radius--medium, 14px);
	--fok-shop-radius-small: var(--wp--custom--radius--small, 6px);
	--fok-shop-pad: clamp(1rem, 2.5vw, 1.75rem);
}

/* Header link on checkout and order confirmation. */
.fok-back-link a {
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
	white-space: nowrap;
}

.fok-back-link a:hover,
.fok-back-link a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.fok-shop-page {
	accent-color: var(--wp--preset--color--contrast);
}

/* Cards: checkout steps, order summary, cart totals. */
.fok-shop-page .wc-block-components-checkout-step,
.fok-shop-page .wp-block-woocommerce-checkout-order-summary-block,
.fok-shop-page .wp-block-woocommerce-cart-totals-block,
.fok-shop-page .wc-block-cart-items {
	background: var(--fok-shop-card-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius);
}

.fok-shop-page .wc-block-components-checkout-step {
	padding: var(--fok-shop-pad);
	margin-bottom: 1rem;
}

.fok-shop-page .wc-block-components-checkout-step::after,
.fok-shop-page .wc-block-components-checkout-step__container::after {
	display: none;
}

.fok-shop-page .wc-block-components-checkout-step__heading {
	margin-top: 0;
}

.fok-shop-page .wc-block-components-checkout-step__title {
	font-family: var(--wp--custom--font--heading, inherit);
	font-weight: var(--wp--custom--font--heading-weight, 650);
	font-size: var(--wp--preset--font-size--large);
	text-transform: none;
}

.fok-shop-page .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container,
.fok-shop-page .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading {
	padding-left: 0;
}

.fok-shop-page .wc-block-components-checkout-step--with-step-number::before {
	display: none;
}

.fok-shop-page .wp-block-woocommerce-checkout-order-summary-block,
.fok-shop-page .wp-block-woocommerce-cart-totals-block {
	padding: var(--fok-shop-pad);
}

@media (min-width: 782px) {
	.fok-shop-page .wc-block-checkout__sidebar,
	.fok-shop-page .wc-block-cart__sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
		align-self: flex-start;
	}
}

/* Fields. */
.fok-shop-page .wc-block-components-text-input input,
.fok-shop-page .wc-block-components-form .wc-block-components-text-input input[type],
.fok-shop-page .wc-block-components-text-input input[type],
.fok-shop-page .wc-block-components-textarea,
.fok-shop-page .wc-blocks-components-select .wc-blocks-components-select__container,
.fok-shop-page .wc-block-components-combobox .wc-block-components-combobox-control input,
.fok-shop-page .wc-block-components-address-card,
.fok-shop-page .wc-block-checkout__add-note textarea {
	background: var(--fok-shop-field-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius-small);
	color: var(--wp--preset--color--contrast);
}

.fok-shop-page .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 0;
	background: transparent;
	color: inherit;
}

.fok-shop-page .wc-block-components-text-input input:focus,
.fok-shop-page .wc-block-components-textarea:focus,
.fok-shop-page .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

.fok-shop-page .wc-block-components-text-input label,
.fok-shop-page .wc-blocks-components-select__label {
	color: var(--wp--preset--color--muted);
}

/* Shipping and payment choices. */
.fok-shop-page .wc-block-components-radio-control__option,
.fok-shop-page .wc-block-components-radio-control-accordion-option {
	background: var(--fok-shop-field-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius-small);
	box-shadow: none;
}

.fok-shop-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option + .wc-block-components-radio-control__option,
.fok-shop-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	margin-top: 0.5rem;
}

.fok-shop-page .wc-block-components-radio-control--highlight-checked::after,
.fok-shop-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.fok-shop-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

.fok-shop-page .wc-block-components-radio-control__option--checked-option-highlighted,
.fok-shop-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

.fok-shop-page .wc-block-components-radio-control__input,
.fok-shop-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background: var(--fok-shop-field-bg);
	border-color: var(--wp--preset--color--muted);
}

.fok-shop-page .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--contrast);
}

.fok-shop-page .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--contrast);
}

.fok-shop-page .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--contrast);
}

/* Other selects in the checkout, such as the Food Online time picker. */
.fok-shop-page select:not(.wc-blocks-components-select__select),
.fok-shop-page .components-select-control__input {
	background-color: var(--fok-shop-field-bg) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius-small);
}

/* Order summary and totals. */
.fok-shop-page .wc-block-components-totals-wrapper,
.fok-shop-page .wc-block-components-order-summary,
.fok-shop-page .wc-block-components-checkout-order-summary__title {
	border-color: var(--fok-shop-border);
}

.fok-shop-page .wc-block-components-totals-footer-item {
	font-size: var(--wp--preset--font-size--large);
}

.fok-shop-page .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--contrast);
	border-color: var(--fok-shop-card-bg);
	color: var(--wp--preset--color--base);
}

.fok-shop-page .wc-block-components-panel__button,
.fok-shop-page .wc-block-components-totals-coupon__button {
	color: inherit;
}

/* Main buttons: follow the theme button style. */
.fok-shop-page input[type="submit"],
.fok-shop-page .button {
	max-width: 100%;
	box-sizing: border-box;
}

.fok-shop-page .wc-block-components-checkout-place-order-button,
.fok-shop-page .wc-block-cart__submit-button {
	min-height: 3.25rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* Cart items. */
.fok-shop-page .wc-block-cart-items {
	border-collapse: separate;
	overflow: hidden;
}

.fok-shop-page .wc-block-cart-items th,
.fok-shop-page .wc-block-cart-items td {
	border-color: var(--fok-shop-border);
}

.fok-shop-page .wc-block-cart-items .wc-block-cart-items__header th {
	padding: 1rem var(--fok-shop-pad);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.fok-shop-page .wc-block-cart-items .wc-block-cart-items__row td:first-child {
	padding-left: var(--fok-shop-pad);
}

.fok-shop-page .wc-block-cart-items .wc-block-cart-items__row td:last-child {
	padding-right: var(--fok-shop-pad);
}

.fok-shop-page .wc-block-cart-item__image img {
	border-radius: var(--fok-shop-radius-small);
}

.fok-shop-page .wc-block-components-quantity-selector {
	border-radius: var(--fok-shop-radius-small);
	border-color: var(--fok-shop-border);
	background: var(--fok-shop-field-bg);
}

/* Order confirmation. */
.fok-order-confirmation .wc-block-order-confirmation-status.alignwide {
	max-width: var(--wp--style--global--content-size);
}

.fok-order-confirmation .wc-block-order-confirmation-status {
	background: var(--fok-shop-card-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.fok-order-confirmation .wc-block-order-confirmation-status h1,
.fok-order-confirmation .wc-block-order-confirmation-status p:first-child {
	font-family: var(--wp--custom--font--heading, inherit);
	font-weight: var(--wp--custom--font--heading-weight, 650);
	font-size: var(--wp--preset--font-size--xx-large);
	margin-top: 0;
}

.fok-order-confirmation .wc-block-order-confirmation-summary ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.fok-order-confirmation .wc-block-order-confirmation-summary-list-item {
	background: var(--fok-shop-card-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius-small);
	padding: 0.9rem 1rem;
	margin: 0;
}

.fok-order-confirmation .wc-block-order-confirmation-summary-list-item__key {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.fok-order-confirmation .wc-block-order-confirmation-totals-wrapper,
.fok-order-confirmation .wc-block-order-confirmation-downloads-wrapper,
.fok-order-confirmation .wc-block-order-confirmation-shipping-wrapper,
.fok-order-confirmation .wc-block-order-confirmation-billing-wrapper,
.fok-order-confirmation .wc-block-order-confirmation-additional-fields-wrapper,
.fok-order-confirmation .wc-block-order-confirmation-additional-information:not(:empty) {
	background: var(--fok-shop-card-bg);
	border: 1px solid var(--fok-shop-border);
	border-radius: var(--fok-shop-radius);
	padding: var(--fok-shop-pad);
	height: 100%;
	box-sizing: border-box;
}

.fok-order-confirmation .wc-block-order-confirmation-totals-wrapper h3,
.fok-order-confirmation .wc-block-order-confirmation-shipping-wrapper h3,
.fok-order-confirmation .wc-block-order-confirmation-billing-wrapper h3,
.fok-order-confirmation .wc-block-order-confirmation-downloads-wrapper h3,
.fok-order-confirmation .wc-block-order-confirmation-additional-fields-wrapper h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large);
}

.fok-order-confirmation .wc-block-order-confirmation-totals table,
.fok-order-confirmation .wc-block-order-confirmation-totals th,
.fok-order-confirmation .wc-block-order-confirmation-totals td {
	border-color: var(--fok-shop-border);
}

.fok-order-confirmation .wc-block-order-confirmation-additional-information > :first-child {
	margin-top: 0;
}

.fok-order-confirmation .wc-block-order-confirmation-shipping-address,
.fok-order-confirmation .wc-block-order-confirmation-billing-address {
	border: 0;
	padding: 0;
}