/**
 * NuLabs cart & checkout UX polish (cosmetic only).
 * Systematic, consistent rounding across every field, control and button,
 * plus a brand-orange travelling-light glow on the Place Order button.
 * Targets stable WooCommerce Blocks class names; no markup/layout changes.
 * Loaded only on the cart and checkout pages.
 */

:root {
	--nla-radius: 14px;                         /* one radius everywhere */
	--nla-field-bg: #faf8f3;                    /* warm off-white */
	--nla-field-bg-focus: #fffdf8;
	--nla-border: rgba(50, 40, 30, 0.14);
	--nla-border-focus: rgba(40, 30, 20, 0.55);
	--nla-accent: #ff5700;                      /* NuLabs brand orange */
}

/* ======================================================================
 * 1) Fields = ONE rounded surface each (no double borders)
 * ==================================================================== */
.wc-block-components-text-input,
.wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--nla-field-bg) !important;
	border: 1px solid var(--nla-border) !important;
	border-radius: var(--nla-radius) !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Neutralise the OUTER select wrapper so it never adds a second ring. */
.wc-blocks-components-select {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Inner controls: transparent, no border, share the rounding. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select__select,
.wc-block-components-totals-coupon__input input {
	background-color: transparent !important;
	border: none !important;
	border-radius: var(--nla-radius) !important;
	box-shadow: none !important;
}

/* Gentle, on-brand focus on the single bordered surface. */
.wc-block-components-text-input:focus-within,
.wc-blocks-components-select .wc-blocks-components-select__container:focus-within {
	background-color: var(--nla-field-bg-focus) !important;
	border-color: var(--nla-border-focus) !important;
	box-shadow: 0 0 0 4px rgba(40, 30, 20, 0.06) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Softer floating-label colour. */
.wc-block-components-text-input label,
.wc-blocks-components-select label {
	color: rgba(40, 30, 20, 0.55) !important;
}

/* Force an even two-column grid for address fields (WooCommerce's own flex
   widths are scoped to shipping only, so billing's State stayed narrow and
   City grew wider). Grid guarantees equal halves regardless of those rules. */
.wc-block-components-address-form {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	column-gap: 12px !important;
	row-gap: 14px !important;
	align-items: start !important;
}
.wc-block-components-address-form > * {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
}
/* Full-width fields span both columns. */
.wc-block-components-address-form > .wc-block-components-country-input,
.wc-block-components-address-form > .wc-block-components-address-form__country,
.wc-block-components-address-form > [class*="__address_1"],
.wc-block-components-address-form > [class*="__address_2"],
.wc-block-components-address-form > .wc-block-components-address-form__company,
.wc-block-components-address-form > .wc-block-components-checkbox,
.wc-block-components-address-form > button {
	grid-column: 1 / -1 !important;
}
/* The Contact (email) section reuses .wc-block-components-address-form too —
   keep it a normal full-width block, not the two-column grid. */
.wc-block-checkout__contact-fields .wc-block-components-address-form {
	display: block !important;
}

/* The State dropdown carries an extra ~12px top margin that the text inputs
   don't, pushing its box down so it didn't line up with Suburb. Zero it so
   the two boxes in the row align on the same baseline. */
.wc-block-components-address-form .wc-blocks-components-select {
	margin-top: 0 !important;
}

/* ======================================================================
 * 2) Buttons = same rounding (cart & checkout)
 * ==================================================================== */
.wc-block-components-button,
.wc-block-components-checkout-return-to-cart-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button,
button.wc-block-components-button {
	border-radius: var(--nla-radius) !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	min-height: 50px;
}
.wc-block-components-totals-coupon__input {
	min-height: 50px;
	border-radius: var(--nla-radius) !important;
}

/* ======================================================================
 * 3) Payment method box rounded; coupon toggle noticeable & equal width
 * ==================================================================== */
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--nla-radius) !important;
	border: 1px solid var(--nla-border) !important;
	overflow: hidden;
	margin-bottom: 0 !important;
}
/* WooCommerce draws its own 4px pseudo-border around the payment group, which
   left a stray line at our rounded corners. Hide it; we provide the box, and
   the selected option gets a clean brand-orange inset highlight at our radius. */
.wc-block-components-radio-control--highlight-checked::after {
	display: none !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-radius: var(--nla-radius) !important;
	box-shadow: inset 0 0 0 1.5px var(--nla-accent) !important;
}

/* Order summary card — round to match everything else (was 5px). */
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var(--nla-radius) !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
	background: rgba(40, 30, 20, 0.045);
	border: 1px solid var(--nla-border);
	border-radius: var(--nla-radius);
	padding: 13px 16px !important;
	font-weight: 600 !important;
	transition: background-color .18s ease, border-color .18s ease;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
	background: rgba(40, 30, 20, 0.08);
}
.wc-block-components-totals-coupon .wc-block-components-panel__button::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3.7C3 3.31 3.31 3 3.7 3H12l8.7 8.7a1.6 1.6 0 0 1 0 2.26l-6.74 6.74a1.6 1.6 0 0 1-2.26 0L3 12V3.7Z' fill='%23ff5700'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon__form {
	width: 100% !important;
	box-sizing: border-box;
}
.wc-block-components-totals-coupon__content {
	margin-top: 12px !important;
}

/* ======================================================================
 * 4) Place Order — rounded + a brand-orange light travelling around the edge
 * ==================================================================== */
.wc-block-components-checkout-place-order-button {
	position: relative;
	z-index: 0;
	border-radius: var(--nla-radius) !important;
	background: #111111 !important;
	overflow: hidden !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 22px rgba(255, 87, 0, 0.18);
}
.wc-block-components-checkout-place-order-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 220%;
	aspect-ratio: 1;
	z-index: -1;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		rgba(255, 87, 0, 0.45) 288deg,
		#ff5700 312deg,
		#ff7a2e 330deg,
		#ff5700 348deg,
		rgba(255, 87, 0, 0.45) 360deg
	);
	animation: nla-orbit 4s linear infinite;
}
.wc-block-components-checkout-place-order-button::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;
	border-radius: calc(var(--nla-radius) - 2px);
	background: #111111;
}
@keyframes nla-orbit {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.wc-block-components-checkout-place-order-button::before { animation: none; }
}

/* ======================================================================
 * 5) Layout: Place Order + terms relocated under the Total (via JS).
 *    Keep the summary + button in view on desktop (no scrolling to pay);
 *    "Return to Cart" stays at the bottom-left of the form.
 * ==================================================================== */
@media (min-width: 880px) {
	.wc-block-checkout__sidebar {
		position: sticky !important;
		top: 16px;
		align-self: flex-start;
	}
}

/* Mobile / tablet (<880px): Place Order is NOT relocated (checkout-layout.js
   keeps it native at the bottom of the form). Flow: Order summary (top) →
   Contact → address → payment → Place Order (bottom).
   (Order summary expansion handled in checkout-layout.js so the toggle still
   works.) */
@media (max-width: 879px) {
	/* WooCommerce renders a SECOND order summary nested inside the actions
	   block on mobile (a pre-pay review) — duplicate of the one up top. Hide
	   it; we keep the single sidebar summary at the top, expanded. */
	.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
		display: none !important;
	}
	/* #1a: the REAL empty space above the summary is the checkout block's own
	   padding-top (24px). Reduce it so the page opens straight onto the
	   summary. (Previous margin tweaks on the title/sidebar couldn't remove
	   this — wrong element.) */
	.wp-block-woocommerce-checkout {
		padding-top: 8px !important;
	}
	.wc-block-components-checkout-order-summary__title {
		margin-top: 0 !important;
		border-top: none !important;
		padding-top: 0 !important;
	}
	/* #1b: "Order summary" sized FLUIDLY — ~34px on tablet (fills the space
	   nicely), ~22px on a phone (so it never crowds the price beside it). */
	.wc-block-components-checkout-order-summary__title-text {
		font-size: clamp(22px, 5vw, 34px) !important;
		font-weight: 400 !important;
		line-height: 1.15 !important;
	}
}

/* #2: fade the terms line ("By proceeding… Terms… Privacy"). */
.wc-block-checkout__terms {
	font-size: 12px !important;
	color: rgba(40, 30, 20, 0.5) !important;
}

/* ===== #3 (declutter payment → return-to-cart) ===== */
/* Credit Cards helper text: smaller + muted. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content,
.wc-block-checkout__payment-method .wc-block-components-radio-control__description {
	font-size: 13px !important;
	color: rgba(40, 30, 20, 0.7) !important;   /* #4: a touch darker, less faint */
	line-height: 1.45 !important;
}
/* "Add a note to your order": lighter label text. */
.wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkbox__label,
.wp-block-woocommerce-checkout-order-note-block label {
	font-size: 14px !important;
	color: rgba(40, 30, 20, 0.6) !important;
}
/* All checkout checkboxes the same, smaller size (Add a note + the marketing
   "I would like to receive…" opt-in) for consistency. */
.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	width: 16px !important;
	min-width: 16px !important;
	height: 16px !important;
}
.wc-block-checkout .wc-block-components-checkbox__mark {
	width: 11px !important;
	height: 11px !important;
}
/* Keep the radio circle, but make it smaller & more delicate, with a
   brand-orange dot when selected (matches the payment box highlight). */
.wc-block-checkout__payment-method .wc-block-components-radio-control__input {
	width: 18px !important;
	height: 18px !important;
	border-color: rgba(40, 30, 20, 0.3) !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked {
	border-color: var(--nla-accent) !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked::before {
	width: 8px !important;
	height: 8px !important;
	background: var(--nla-accent) !important;
}
/* Breathing room so Place Order stands apart from the text above it. */
.wc-block-checkout__main .wc-block-checkout__actions {
	margin-top: 18px !important;
}
/* ===== end #3 ===== */

/* The relocated pay block (built by checkout-layout.js). */
#nla-pay {
	margin-top: 16px;
}
#nla-pay .wc-block-checkout__terms {
	margin: 0 0 12px !important;
	padding: 0 2px !important;
	border: none !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	color: rgba(40, 30, 20, 0.6) !important;
	text-align: center;
}
#nla-pay .wc-block-components-checkout-place-order-button {
	width: 100% !important;
	margin: 0 !important;
}

/* Desktop only: with Place Order relocated, the bottom-left actions row holds
   just the Return to Cart link. (On mobile the button is back here.) */
@media (min-width: 880px) {
	.wc-block-checkout__main .wc-block-checkout__actions {
		justify-content: flex-start !important;
	}
}

/* ======================================================================
 * 6) Spacing & alignment tidy-ups
 * ==================================================================== */

/* (Field widths handled by the grid in section 1.) */

/* Round the collapsed address summary card (was 4px). */
.wc-block-components-address-card {
	border-radius: var(--nla-radius) !important;
}

/* Tighter vertical rhythm between sections (less scrolling, more compact). */
.wc-block-components-checkout-step {
	margin-bottom: 14px !important;
}
/* The empty "additional information" step (no extra fields here) was adding a
   big gap above "Add a note" after hydration. Remove it and its spacing. */
.wp-block-woocommerce-checkout-additional-information-block,
.wc-block-components-checkout-step--additional-information {
	display: none !important;
	margin: 0 !important;
}
/* Keep the "Add a note" block tight to the payment box above it. */
.wp-block-woocommerce-checkout-order-note-block {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* The Payment step's bottom margin is the remaining gap above "Add a note". */
.wc-block-checkout__payment-method.wc-block-components-checkout-step {
	margin-bottom: 8px !important;
}

/* Desktop only: terms are moved into the sidebar, so hide the now-empty terms
   wrapper in the form and pull Return to Cart up. (On mobile, terms stay here
   natively, so this must NOT hide them.) */
@media (min-width: 880px) {
	.wc-block-checkout__main .wp-block-woocommerce-checkout-terms-block {
		display: none !important;
	}
	.wc-block-checkout__main .wc-block-checkout__actions {
		margin-top: 4px !important;
		margin-bottom: 8px !important;
		padding-top: 0 !important;
	}
}