/*
 * Toga Checkout Block branding.
 *
 * Scope discipline: the Checkout Block is a React application whose DOM
 * structure WooCommerce owns and changes between releases. Everything here is
 * therefore colour, type, spacing and focus state applied to WooCommerce's own
 * documented `wc-block-components-*` class names — no layout is reconstructed,
 * no element is repositioned, nothing depends on the order or nesting of the
 * block's internal nodes, and no !important is used except where WooCommerce's
 * own stylesheet sets the same property with equal specificity. A future
 * WooCommerce release that restyles checkout will lose the Toga skin, not the
 * checkout.
 */

/* -------------------------------------------------------------------- */
/* Wordmark                                                              */
/*                                                                       */
/* The checkout header previously rendered the site title as plain text  */
/* ("Toga" in the body font), which is the one place a customer most     */
/* needs to recognise the brand. patterns/header.php renders the         */
/* wordmark on every page including this one; these rules just give the  */
/* checkout page's own surroundings the same restraint.                  */
/* -------------------------------------------------------------------- */

.toga-checkout-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.toga-checkout-logo .toga-checkout-logo__img {
	display: block;
	width: auto;
	height: 34px;
	max-width: none;
}

.wc-block-checkout,
.wc-block-cart {
	font-family: var(--wp--preset--font-family--inter);
	color: var(--toga-ink);
}

.wc-block-checkout .wc-block-components-title,
.wc-block-cart .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--toga-ink);
}

/*
 * The order summary heading is its own component (not wc-block-components-title
 * like the step headings above), so it needs the same treatment named
 * separately.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--toga-ink);
}

/* -------------------------------------------------------------------- */
/* Section rhythm — Contact information, Shipping address, Shipping      */
/* options, Payment options each get the same generous, token-driven     */
/* spacing rather than WooCommerce's default block gap.                  */
/* -------------------------------------------------------------------- */

.wc-block-components-form .wc-block-components-checkout-step {
	margin-bottom: var(--toga-space-6);
}

.wc-block-components-checkout-step__heading-container {
	margin-bottom: var(--toga-space-4);
}

/* -------------------------------------------------------------------- */
/* Form fields — one border, one focus colour, everywhere                */
/* -------------------------------------------------------------------- */

.wc-block-components-text-input input.input-text,
.wc-block-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-textarea {
	font-family: var(--wp--preset--font-family--inter);
	border-color: color-mix(in srgb, var(--toga-ink) 25%, transparent);
	border-radius: 4px;
	color: var(--toga-ink);
	background-color: #fff;
}

.wc-block-components-text-input input.input-text:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	outline: 2px solid var(--toga-terracotta);
	outline-offset: 1px;
	box-shadow: none;
	border-color: var(--toga-terracotta);
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label {
	color: color-mix(in srgb, var(--toga-ink) 72%, transparent);
}

/* -------------------------------------------------------------------- */
/* Error states — one shape and one voice with the rest of the site      */
/*                                                                       */
/* The colour stays WooCommerce's own semantic red for the same          */
/* legibility reason brand.css already states for Dokan's status         */
/* colours: an error must read as an error before it reads as Toga.      */
/* -------------------------------------------------------------------- */

.wc-block-components-validation-error,
.wc-block-components-notice-banner.is-error {
	font-family: var(--wp--preset--font-family--inter);
	border-radius: 4px;
}

.wc-block-components-notice-banner {
	font-family: var(--wp--preset--font-family--inter);
	border-radius: 4px;
	border-left-width: 4px;
}

.wc-block-components-text-input.has-error input.input-text:focus {
	outline-color: currentColor;
}

/* -------------------------------------------------------------------- */
/* Quantity stepper — Cart Block's +/- control                          */
/* -------------------------------------------------------------------- */

.wc-block-components-quantity-selector__button {
	transition: var(--toga-transition);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--toga-terracotta);
}

.wc-block-components-quantity-selector__button:focus-visible {
	outline: 2px solid var(--toga-terracotta);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------- */
/* Order summary                                                         */
/* -------------------------------------------------------------------- */

.wp-block-woocommerce-checkout-order-summary-block {
	border-color: color-mix(in srgb, var(--toga-ink) 14%, transparent);
	border-radius: 10px;
	background-color: #fff;
}

.wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--inter);
	color: color-mix(in srgb, var(--toga-ink) 78%, transparent);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--toga-ink);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--inter);
	color: var(--toga-ink);
}

/* Keep summary thumbnails on the same ratio as the shop grid's cards. */
.wc-block-components-order-summary-item__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 4px;
}

/* -------------------------------------------------------------------- */
/* The one commitment: place order                                       */
/* -------------------------------------------------------------------- */

.wc-block-components-checkout-place-order-button {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	border-radius: 999px;
}

.wc-block-components-checkout-return-to-cart-button {
	font-family: var(--wp--preset--font-family--inter);
	color: var(--toga-terracotta);
}

.wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-components-checkout-return-to-cart-button:focus-visible {
	color: var(--toga-terracotta-hover);
}

/* -------------------------------------------------------------------- */
/* Shipping options / Payment options — native control accent            */
/* -------------------------------------------------------------------- */

.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input {
	accent-color: var(--toga-terracotta);
}

/* -------------------------------------------------------------------- */
/* The Toga phone control inside the Checkout Block                      */
/*                                                                       */
/* The operator code and local number are two separate Additional        */
/* Checkout Fields (WooCommerce's supported extension API), so they      */
/* arrive as two stacked full-width rows. This pairs them visually into  */
/* the single control the customer should perceive, using only the       */
/* block's own field wrappers.                                           */
/* -------------------------------------------------------------------- */

/*
 * Only the field's own wrapper is sized — the surrounding form's layout mode
 * is left entirely to WooCommerce, so this degrades to two ordinary stacked
 * rows (which is a perfectly usable phone entry) rather than to a broken
 * form, if WooCommerce ever changes how it lays the contact block out.
 */
@media (min-width: 520px) {
	.wc-block-components-address-form__toga-phone-code {
		max-width: 12rem;
	}
}