/**
 * Checkout — Lovable parity (https://flanfudge-direct.lovable.app/checkout)
 *
 * Block + classic checkout. 2/3 form card + 1/3 sticky “Your order” sidebar.
 *
 * @package FlanFudge
 */

/* Hide duplicate page title — H1 lives in .ff-checkout-page-head */
body.flanfudge-shop.woocommerce-checkout:not(.woocommerce-order-received) .ff-shop-header {
	display: none;
}

body.flanfudge-shop.woocommerce-checkout .flanfudge-shop-content {
	max-width: none;
}

/* ----- Page head (title + guest note) ----- */

.ff-checkout-page-head {
	margin-bottom: var(--ff-space-6);
}

.ff-checkout-page-head__title {
	font-family: var(--ff-font-display);
	font-size: clamp(1.875rem, 2vw + 1rem, 2.25rem);
	font-weight: var(--ff-weight-medium);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ff-foreground);
	margin: 0 0 var(--ff-space-2);
}

.ff-checkout-page-head__note {
	font-size: var(--ff-text-xs);
	color: var(--ff-muted-fg);
	margin: 0;
}

/* ----- Empty cart on /checkout/ ----- */

.ff-checkout-empty {
	text-align: center;
	padding: clamp(64px, 12vw, 96px) var(--ff-gutter);
}

.ff-checkout-empty__title {
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-3xl);
	font-weight: var(--ff-weight-medium);
	color: var(--ff-foreground);
	margin: 0 0 var(--ff-space-4);
}

.ff-checkout-empty__link {
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-medium);
	color: var(--ff-sage);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ff-checkout-empty__link:hover {
	color: var(--ff-foreground);
}

/* =========================================================================
 * WooCommerce Blocks checkout
 * ========================================================================= */

body.flanfudge-shop.woocommerce-checkout .wp-block-woocommerce-checkout,
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout {
	max-width: none;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-10);
	align-items: start;
	margin: 0;
	padding: 0;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-sidebar {
	width: 100%;
}

body.flanfudge-shop.woocommerce-checkout
.wc-block-components-sidebar-layout .wc-block-components-main {
	width: 100%;
}

@media (min-width: 1024px) {
	body.flanfudge-shop.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
		grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	}
}

/* Main column — white card (Lovable: rounded-2xl bg-card ring-1) */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main {
	background: var(--ff-card);
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius-xl);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 0 0 1px var(--ff-border);
	min-width: 0;
}

/* Sidebar — mist summary card */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__sidebar {
	min-width: 0;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary {
	background: color-mix(in oklch, var(--ff-mist) 60%, transparent);
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius-xl);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 0 0 1px var(--ff-border);
	position: sticky;
	top: 7rem;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary.is-large {
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-order-summary__title,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-order-summary h2 {
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	font-weight: var(--ff-weight-medium);
	letter-spacing: -0.01em;
	color: var(--ff-foreground);
	margin: 0 0 var(--ff-space-4);
}

/* Hide duplicate checkout titles inside the main card */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main > .wc-block-components-title:first-child,
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-fields-block > .wc-block-components-title:first-child {
	display: none;
}

/* Step sections */
body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-step {
	margin: 0 0 var(--ff-space-6);
	padding: 0 0 var(--ff-space-6);
	border-bottom: 1px solid color-mix(in oklch, var(--ff-border) 80%, transparent);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-step:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	font-weight: var(--ff-weight-medium);
	color: var(--ff-foreground);
	letter-spacing: -0.01em;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-step__description {
	font-size: var(--ff-text-xs);
	color: var(--ff-muted-fg);
}

/*
 * WC Blocks adds a second bordered/radius shell on step content and shipping
 * rates. The main column (.wc-block-checkout__main) is already the card.
 */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step__content {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wc-block-components-shipping-rates-control {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}

/* Shipping method label should sit inline with its radio input */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout {
	display: flex;
	align-items: center;
	width: 100%;
	gap: var(--ff-space-2);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--ff-space-2);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__main .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
}

/* Match shipping fieldset option cards to payment fieldset */
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option,
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control-accordion-option {
	border: 0;
	border-radius: 0;
	background: var(--ff-card);
	padding: 16px 16px 16px 40px;
	margin-bottom: 0;
}

body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked,
body.flanfudge-shop.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control-accordion-option--checked-option {
	border-color: var(--ff-foreground);
	background: color-mix(in oklch, var(--ff-mist) 60%, transparent);
}

/* Labels + inputs (Lovable: rounded-xl border bg-cream) */
body.flanfudge-shop.woocommerce-checkout .wc-block-components-text-input label,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-combobox label,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-select-input label,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-size: var(--ff-text-xs);
	font-weight: var(--ff-weight-medium);
	color: color-mix(in oklch, var(--ff-foreground) 70%, transparent);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-text-input input,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-combobox input,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-combobox button,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-select-input select,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-textarea textarea {
	border-radius: var(--ff-radius-xl);
	border: 1px solid var(--ff-border);
	background: var(--ff-cream);
	color: var(--ff-foreground);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	min-height: 42px;
	padding: 10px 12px;
	box-shadow: none;
	transition: border-color var(--ff-dur-fast) var(--ff-ease);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-text-input input:focus,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-combobox input:focus,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-select-input select:focus,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-textarea textarea:focus {
	border-color: var(--ff-foreground);
	outline: none;
	box-shadow: 0 0 0 3px rgb(31 42 36 / 0.08);
}

/* ----- Delivery date (above shipping methods) ----- */

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery {
	margin: var(--ff-space-5) 0 var(--ff-space-6);
	padding: 0;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-5);
	max-width: 20rem;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__label {
	display: block;
	font-size: var(--ff-text-xs);
	font-weight: var(--ff-weight-medium);
	color: color-mix(in oklch, var(--ff-foreground) 70%, transparent);
	margin: 0 0 var(--ff-space-2);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__label .required {
	color: var(--ff-foreground);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input,
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__select {
	width: 100%;
	border-radius: var(--ff-radius-xl);
	border: 1px solid var(--ff-border);
	background: var(--ff-cream);
	color: var(--ff-foreground);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	min-height: 42px;
	padding: 10px 40px 10px 12px;
	box-shadow: none;
	appearance: none;
	transition: border-color var(--ff-dur-fast) var(--ff-ease);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__control {
	position: relative;
	display: block;
	cursor: pointer;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__control .ff-checkout-delivery__input,
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__control .ff-checkout-delivery__select {
	cursor: pointer;
}

/* Date input — theme calendar icon on the right; native picker clickable in that zone */
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__control--date .ff-checkout-delivery__input {
	position: relative;
	z-index: 1;
	padding-right: 44px;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
	color-scheme: light;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input[type="date"]::-webkit-inner-spin-button,
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input[type="date"]::-webkit-clear-button {
	display: none;
	-webkit-appearance: none;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__icon {
	position: absolute;
	right: 14px;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	pointer-events: none;
	color: color-mix(in oklch, var(--ff-foreground) 50%, transparent);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__icon--calendar {
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v3M16 3v3M4 10h16'/%3E%3C/svg%3E") center / contain no-repeat;
	-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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v3M16 3v3M4 10h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__icon--chevron {
	width: 8px;
	height: 8px;
	background: none;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__input:focus,
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__select:focus {
	border-color: var(--ff-foreground);
	outline: none;
	box-shadow: 0 0 0 3px rgb(31 42 36 / 0.08);
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__note {
	margin: var(--ff-space-4) 0 0;
	font-size: var(--ff-text-xs);
	color: var(--ff-muted-fg);
	line-height: 1.5;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery.has-error .ff-checkout-delivery__input,
body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery.has-error .ff-checkout-delivery__select {
	border-color: #b42318;
}

body.flanfudge-shop.woocommerce-checkout .ff-checkout-delivery__error {
	margin: var(--ff-space-3) 0 0;
	font-size: var(--ff-text-xs);
	color: #b42318;
}

body.flanfudge-shop.woocommerce-order-received .ff-order-delivery {
	margin-top: var(--ff-space-6);
}

body.flanfudge-shop.woocommerce-order-received .ff-order-delivery__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.flanfudge-shop.woocommerce-order-received .ff-order-delivery__list li {
	margin: 0 0 var(--ff-space-2);
}

/* Place order + secondary actions */
body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-button:not(.is-link) {
	border-radius: var(--ff-radius-pill);
	background: var(--ff-foreground);
	color: var(--ff-cream);
	border: 1px solid var(--ff-foreground);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-semibold);
	min-height: 48px;
	padding: 0 24px;
	transition: background-color var(--ff-dur-fast) var(--ff-ease),
		border-color var(--ff-dur-fast) var(--ff-ease);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button:hover,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
	background: var(--ff-olive-soft);
	border-color: var(--ff-olive-soft);
	color: var(--ff-cream);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-button.is-link,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	color: color-mix(in oklch, var(--ff-foreground) 70%, transparent);
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-medium);
}

/* Order summary line items */
body.flanfudge-shop.woocommerce-checkout .wc-block-components-order-summary-item {
	font-size: var(--ff-text-sm);
	color: var(--ff-foreground);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-totals-item,
body.flanfudge-shop.woocommerce-checkout .wc-block-components-totals-footer-item {
	font-size: var(--ff-text-sm);
}

body.flanfudge-shop.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-lg);
	font-weight: var(--ff-weight-semibold);
}

/* Express payment row — keep compact */
body.flanfudge-shop.woocommerce-checkout .wc-block-components-express-payment {
	margin-bottom: var(--ff-space-4);
}

/* =========================================================================
 * Classic shortcode checkout (fallback)
 * ========================================================================= */

@media (min-width: 1024px) {
	body.flanfudge-shop.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
		gap: var(--ff-space-10);
	}
}

body.flanfudge-shop.woocommerce-checkout form.checkout .col2-set,
body.flanfudge-shop.woocommerce-checkout form.checkout #customer_details {
	background: var(--ff-card);
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius-xl);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 0 0 1px var(--ff-border);
}

body.flanfudge-shop.woocommerce-checkout .woocommerce-checkout-review-order {
	background: color-mix(in oklch, var(--ff-mist) 60%, transparent);
	top: 7rem;
}

body.flanfudge-shop.woocommerce-checkout .woocommerce-checkout-review-order::before {
	content: "Your order";
}