/**
 * Classic Foods Bakery – Checkout design (v1.2.0, corrections v1.2.1)
 *
 * Presentation only. Everything is scoped to the WooCommerce Checkout Block
 * (.wp-block-woocommerce-checkout), so the theme header, footer and other pages are untouched.
 * No element is removed from the DOM; layout changes use CSS only.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens & base                                                    */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout {
	--cfb-primary: #0b354b;
	--cfb-primary-hover: #082839;
	--cfb-white: #ffffff;
	--cfb-grey: #f5f7f8;
	--cfb-border: #d9e0e4;
	--cfb-teal: #e6f3f3;
	--cfb-teal-border: #b8dada;
	--cfb-text: #1c2a32;
	--cfb-muted: #5a6b74;
	--cfb-error: #cc1818;
	--cfb-error-bg: #fcf0f1;
	--cfb-error-border: #f1b8bb;
	--cfb-focus: 0 0 0 3px rgba(11, 53, 75, 0.18);
	--cfb-radius: 8px;
	--cfb-radius-lg: 10px;

	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--cfb-text);
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-woocommerce-checkout *,
.wp-block-woocommerce-checkout *::before,
.wp-block-woocommerce-checkout *::after {
	box-sizing: border-box;
}

.wp-block-woocommerce-checkout :where(input, select, textarea, button, label, h1, h2, h3, h4, p, span, a, div, legend) {
	font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* 2. Step headings                                                    */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	color: var(--cfb-primary);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--cfb-muted);
	font-size: 0.875rem;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	margin-bottom: 28px;
}

/* Food allergy step sits directly under Payment options without its own heading. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading,
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__description {
	display: none;
}

/* ------------------------------------------------------------------ */
/* 3. Form fields                                                      */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
	background-color: var(--cfb-white);
	border: 1px solid var(--cfb-border);
	border-radius: var(--cfb-radius);
	color: var(--cfb-text);
	font-size: 0.9375rem;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
	border-color: var(--cfb-primary);
	box-shadow: var(--cfb-focus);
	outline: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control label {
	color: var(--cfb-muted);
}

/* Red asterisk on required fields (as in the approved design). */
.wp-block-woocommerce-checkout .wc-block-components-text-input:has(input[required], input[aria-required="true"]) > label::after,
.wp-block-woocommerce-checkout .wc-blocks-components-select:has(select[required], select[aria-required="true"]) .wc-blocks-components-select__label::after,
.wp-block-woocommerce-checkout .wc-block-components-combobox:has(input[required], input[aria-required="true"]) label::after {
	content: " *";
	color: var(--cfb-error);
}

.wp-block-woocommerce-checkout .has-error input,
.wp-block-woocommerce-checkout .has-error select {
	border-color: var(--cfb-error);
}

.wp-block-woocommerce-checkout .wc-block-components-validation-error {
	color: var(--cfb-error);
}

/* Checkboxes */
.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--cfb-border);
	border-radius: 4px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--cfb-primary);
	border-color: var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--cfb-white);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	box-shadow: var(--cfb-focus);
	outline: none;
}

/* Radios (pickup branches, payment methods) */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:focus-visible {
	box-shadow: var(--cfb-focus);
	outline: none;
}

/* ------------------------------------------------------------------ */
/* 4. Contact information – First | Last / Phone | Email (2 columns)  */
/* ------------------------------------------------------------------ */
/* v1.2.1: every wrapper that contains a field is flattened (whatever its class name),
   so all four fields are direct grid items and can be placed exactly. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 16px;
	align-items: start;
}

.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content :is(div, span):not(.wc-block-components-text-input):has(.wc-block-components-text-input) {
	display: contents !important;
}

/* Anything that is not a field (create-account checkbox, notices, text) spans both columns. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content > *,
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content :is(.wc-block-components-checkbox, .wc-block-checkout__create-account, .wc-block-components-notice-banner, .wc-block-checkout__guest-checkout-notice, p) {
	grid-column: 1 / -1;
	min-width: 0;
	order: 10;
}

/* The four fields: equal width, no WooCommerce flex/margin offsets. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content .wc-block-components-text-input {
	grid-column: auto !important;
	position: relative;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	flex: none !important;
	margin: 0 !important;
	order: 5;
}

.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has([id$="cfb/first-name"]) { order: 1; }
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has([id$="cfb/last-name"]) { order: 2; }
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has([id$="cfb/phone"]) { order: 3; }
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has(input[type="email"]) { order: 4; }

/* Consistent box height; labels keep WooCommerce's in-field (floating) position. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input input {
	height: 50px;
	min-height: 50px;
	margin: 0;
}

/* Validation messages stay under their own field. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input .wc-block-components-validation-error {
	position: static;
}

/* ------------------------------------------------------------------ */
/* 5. Delivery option – Door Delivery / Store Pickup cards             */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 60px;
	margin: 0;
	padding: 14px 16px 14px 50px;
	background: var(--cfb-grey);
	border: 1px solid var(--cfb-border);
	border-radius: var(--cfb-radius-lg);
	box-shadow: none;
	color: var(--cfb-text);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Radio circle */
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 2px solid #8b9aa2;
	border-radius: 50%;
	background: var(--cfb-white);
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option:hover {
	border-color: var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option:focus-visible {
	outline: none;
	box-shadow: var(--cfb-focus);
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option--selected {
	background: var(--cfb-teal);
	border-color: var(--cfb-primary);
	box-shadow: inset 0 0 0 1px var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option--selected::before {
	border-color: var(--cfb-primary);
	background: var(--cfb-primary);
	box-shadow: inset 0 0 0 4px var(--cfb-white);
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option-icon {
	flex: 0 0 auto;
	color: var(--cfb-primary);
	fill: currentColor;
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option-title {
	color: var(--cfb-text);
	font-size: 1rem;
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option-price {
	display: none;
}

/* ------------------------------------------------------------------ */
/* 6. Store Pickup – branch names only                                 */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout-pickup-options-block :is(.wc-block-components-radio-control__description, .wc-block-components-radio-control__secondary-description, .wc-block-components-radio-control__secondary-label) {
	display: none !important;
}

.wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-radio-control__option {
	border-color: var(--cfb-border);
}

.wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-radio-control__option:has(input:checked) {
	background: var(--cfb-teal);
	box-shadow: inset 0 0 0 1px var(--cfb-primary);
}

.wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-radio-control__label {
	color: var(--cfb-text);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* 7. Door Delivery distance bar (below the delivery address)          */
/* ------------------------------------------------------------------ */
/* When the bar is showing, the single Door Delivery rate is already selected:
   hide the duplicate "Shipping options" heading and rate list so the bar sits
   directly under the address form. Shown again if there is no price yet. */
.wp-block-woocommerce-checkout-shipping-methods-block:has(.cfb-distance:not(.cfb-distance--error)) :is(.wc-block-components-checkout-step__heading, .wc-block-components-checkout-step__description, .wc-block-components-shipping-rates-control__package) {
	display: none;
}

.wp-block-woocommerce-checkout-shipping-methods-block:has(.cfb-distance) .wc-block-components-checkout-step__container {
	padding-top: 0;
}

.cfb-distance {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 12px;
	padding: 12px 14px;
	background: var(--cfb-teal);
	border: 1px solid var(--cfb-teal-border);
	border-radius: var(--cfb-radius-lg);
	color: var(--cfb-primary);
	font-size: 0.875rem;
	line-height: 1.4;
}

.cfb-distance__icon {
	flex: 0 0 auto;
	color: var(--cfb-primary);
}

.cfb-distance__facts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	min-width: 0;
}

.cfb-distance__item {
	white-space: nowrap;
}

.cfb-distance__item strong {
	font-weight: 700;
}

.cfb-distance__sep {
	width: 1px;
	height: 16px;
	background: var(--cfb-primary);
	opacity: 0.35;
}

.cfb-distance__charge {
	margin-left: auto;
	padding: 7px 14px;
	background: var(--cfb-primary);
	border-radius: 6px;
	color: var(--cfb-white);
	font-weight: 700;
	white-space: nowrap;
}

.cfb-distance--error {
	background: var(--cfb-error-bg);
	border-color: var(--cfb-error-border);
	color: var(--cfb-error);
}

/* ------------------------------------------------------------------ */
/* 8. Alerts (minimum order, payment and other notices)                */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-notice-banner {
	border-radius: var(--cfb-radius);
	font-size: 0.875rem;
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-error {
	background-color: var(--cfb-error-bg);
	border: 1px solid var(--cfb-error-border);
	color: #8a1116;
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--cfb-error);
	border-radius: 50%;
	fill: var(--cfb-white);
}

/* ------------------------------------------------------------------ */
/* 9. Food allergy field                                               */
/* ------------------------------------------------------------------ */
/* The details field is shown only while the allergy checkbox is ticked. */
.wp-block-woocommerce-checkout:has(input[id$="cfb/food-allergy"]:not(:checked)) .wc-block-components-text-input:has([id$="cfb/allergy-details"]) {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input:has([id$="cfb/allergy-details"]) input {
	min-height: 64px;
}

/* ------------------------------------------------------------------ */
/* 10. Place Order button                                              */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 14px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 54px;
	padding: 14px 24px;
	background-color: var(--cfb-primary) !important;
	border: 0;
	border-radius: var(--cfb-radius);
	color: var(--cfb-white) !important;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background-color: var(--cfb-primary-hover) !important;
	box-shadow: 0 6px 16px rgba(11, 53, 75, 0.25);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--cfb-white), 0 0 0 5px var(--cfb-primary);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	align-self: center;
	color: var(--cfb-primary);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* 11. Order summary (right column)                                    */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-block {
	padding: 4px 16px 16px;
	background: var(--cfb-white);
	border: 1px solid var(--cfb-border);
	border-radius: var(--cfb-radius-lg);
}

.wp-block-woocommerce-checkout-totals-block .wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-title {
	color: var(--cfb-primary);
	font-size: 1.25rem;
	font-weight: 700;
}

.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper {
	border-color: var(--cfb-border);
}

.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__value {
	font-size: 0.9375rem;
}

/* Highlighted Total row */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item {
	margin-top: 8px;
	padding: 14px 16px;
	background: var(--cfb-teal);
	border-radius: var(--cfb-radius);
}

.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--cfb-primary);
	font-size: 1.25rem;
	font-weight: 700;
}

/* Coupon */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--cfb-text);
	font-weight: 500;
}

.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__button {
	background: var(--cfb-primary);
	border-radius: var(--cfb-radius);
	color: var(--cfb-white);
}

/* Mobile order-summary toggle (WooCommerce collapses the sidebar on small screens) */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	color: var(--cfb-primary);
}

/* ------------------------------------------------------------------ */
/* 11a. Checkout product list – image, name and amount only (v1.2.1)  */
/* ------------------------------------------------------------------ */
/* Checkout only: this stylesheet is loaded by the Checkout Block integration, and every rule is
   scoped to the checkout order-summary block. The Cart page, emails and admin are not affected,
   and no product or order data is removed – it is only not displayed here. */
.wp-block-woocommerce-checkout-order-summary-cart-items-block :is(
	.wc-block-components-product-metadata,
	.wc-block-components-product-metadata__description,
	.wc-block-components-product-details,
	.wc-block-components-order-summary-item__individual-prices,
	.wc-block-components-order-summary-item__quantity,
	.wc-block-components-product-badge,
	.wc-block-components-sale-badge,
	.wc-block-components-product-low-stock-badge,
	.wc-block-components-product-backorder-badge
) {
	display: none !important;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item__image {
	flex: 0 0 52px;
	width: 52px;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item__image img {
	display: block;
	width: 52px;
	height: 52px;
	max-width: 52px;
	object-fit: cover;
	border: 1px solid var(--cfb-border);
	border-radius: var(--cfb-radius);
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-product-name {
	display: block;
	color: var(--cfb-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--cfb-text);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 11b. Food allergy checkbox label – smaller, lighter (v1.2.1)       */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-checkbox:has([id$="cfb/food-allergy"]) .wc-block-components-checkbox__label {
	color: var(--cfb-muted); /* #5a6b74 on white ≈ 5.6:1 contrast */
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox:has([id$="cfb/food-allergy"]) label {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ------------------------------------------------------------------ */
/* 12. Responsive                                                      */
/* ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout img,
.wp-block-woocommerce-checkout svg {
	max-width: 100%;
}

@media (max-width: 600px) {
	.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content,
	.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content .wc-block-components-text-input {
		grid-column: 1 / -1 !important;
	}

	.cfb-distance__charge {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}

	.cfb-distance__item {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-checkout * {
		transition: none !important;
	}
}