/**
 * Lubiwood — FunnelKit (Aero) checkout restyle. CSS only, no JS.
 *
 * Scope: everything is nested under #wfacp-e-form (the Aero checkout form) so it
 * cannot leak to other pages. Some rules are prefixed with `body` to out-specify
 * FunnelKit's own inline <style> block (which uses `body #wfacp-e-form ...`).
 *
 * Target: the compact card design — soft card sections, tidy inputs, green
 * selected states on shipping + payment, a gift-style order bump, and a
 * full-width Place Order button.
 *
 * Selected states use :has(:checked) — pure CSS, no JavaScript.
 */

#wfacp-e-form {
	/* Palette — reuse the green the template already ships (#66B56A). */
	--lw-green: #66b56a;
	--lw-green-dark: #4f9e54;
	--lw-green-tint: #eef7ef;     /* selected-card background wash */
	--lw-green-border: #9cd0a0;   /* selected-card border         */
	--lw-ink: #1f2a24;
	--lw-muted: #6b7770;
	--lw-border: #e3e6e8;
	--lw-field-border: #d7dbde;
	--lw-radius: 12px;
	--lw-radius-sm: 9px;
	--lw-card-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 2px 8px rgba(16, 24, 20, 0.05);

	color: var(--lw-ink);
}

/* ------------------------------------------------------------------ *
 * 1. Section cards
 * ------------------------------------------------------------------ */
#wfacp-e-form .wfacp-section {
	background: #fff;
	border: 1px solid var(--lw-border);
	border-radius: var(--lw-radius);
	box-shadow: var(--lw-card-shadow);
	padding: 15px 18px;
	margin-bottom: 11px;
}

/* Section heading — tighter, bolder, less default top margin. Bumped up for
   readability: clamp() grows the title on both mobile and desktop over the
   theme/Elementor default without a fixed size that would fight responsive. */
#wfacp-e-form .wfacp-section > .wfacp-section-heading,
#wfacp-e-form .wfacp-section .elementor-widget-heading:first-child h2,
#wfacp-e-form .wfacp-section .elementor-widget-heading:first-child h3 {
	margin: 0 0 10px;
	font-size: clamp(22px, 4.6vw, 29px) !important;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ *
 * 2. Fields & inputs
 * ------------------------------------------------------------------ */
#wfacp-e-form .form-row {
	margin-bottom: 9px;
}

body #wfacp-e-form .wfacp_main_form .input-text,
body #wfacp-e-form .wfacp_main_form select,
body #wfacp-e-form .wfacp_main_form .select2-selection {
	min-height: 46px;
	border: 1px solid var(--lw-field-border);
	border-radius: var(--lw-radius-sm);
	padding: 11px 12px;
	/* !important: FunnelKit sets checkout input font-size with !important, so a
	   plain rule is overridden (this is why the size never visibly changed). */
	font-size: 17px !important;
	background-color: #fff;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder / greyed hint text — sized explicitly (FunnelKit otherwise shrinks
   it) so the field prompts read at the same comfortable size as typed input. */
body #wfacp-e-form .wfacp_main_form .input-text::placeholder,
body #wfacp-e-form .wfacp_main_form textarea::placeholder {
	font-size: 17px !important;
	opacity: 1;
}

body #wfacp-e-form .wfacp_main_form .input-text:focus,
body #wfacp-e-form .wfacp_main_form select:focus,
body #wfacp-e-form .wfacp_main_form .input-text:focus-visible {
	border-color: var(--lw-green);
	box-shadow: 0 0 0 3px rgba(102, 181, 106, 0.18);
	outline: none;
}

/* Field placeholder / label. FunnelKit Aero uses a FLOATING label
   (.wfacp-form-control-label) as the placeholder — it sits inside the empty field
   (FunnelKit sizes it 14px, 13px on mobile) then shrinks + floats up when filled.
   That resting label is the "field text" the shopper reads, so bump it here (the
   .form-row label class we targeted before does NOT match FunnelKit's label).
   Needs !important: FunnelKit's checkout CSS is !important-heavy. */
#wfacp-e-form .wfacp_main_form label.wfacp-form-control-label:not(.radio):not(.checkbox),
#wfacp-e-form .wfacp_main_form .form-row label {
	font-size: 17px !important;
	color: var(--lw-muted);
}

/* Checkbox row text (terms, ship-to-different, company, marketing consent) —
   bumped so the small print is comfortably readable. Shipping-method labels are
   NOT `.woocommerce-form__label-for-checkbox`, so they keep their own size. */
#wfacp-e-form .wfacp_main_form .woocommerce-form__label-for-checkbox,
#wfacp-e-form .wfacp_main_form .wfacp-checkbox-field label,
#wfacp-e-form .wfacp_main_form p.form-row.wfacp-terms-and-condition label,
#wfacp-e-form .wfacp_main_form .wfacp_checkout_terms_conditions label,
#wfacp-e-form .wfacp_main_form label.checkbox {
	font-size: 16.5px !important;
	line-height: 1.45 !important;
}

/* ------------------------------------------------------------------ *
 * 3. Shipping method rows  ->  big, clean, selectable cards
 *
 * Real markup (verified on dev):
 *   li.wfacp_single_shipping_method
 *     > div.wfacp_single_shipping        (flex row: option | price)
 *         > div.wfacp_shipping_radio     (radio + <label>)
 *             > input.shipping_method[radio]
 *             > label > .lubiwood-ship-badge-wrap (badge img + title)
 *                     + .lubiwood-wd-est-del--in-label (delivery subtitle)
 *         > div.wfacp_shipping_price      (.amount)
 *
 * FunnelKit ships its own `body #wfacp-e-form …` inline rules, so the layout
 * props here are `!important` to guarantee they win.
 * ------------------------------------------------------------------ */

/* Hide the redundant "Shipping method" field sub-label — the section already
   has a "Shipping Method" heading right above it (the "same text twice"). */
#wfacp-e-form .wfacp_shipping_options > .wfacp_border > label.label_shiping {
	display: none !important;
}

/* Shopify-style: ONE bordered container, methods stacked with thin dividers
   (not separate cards). Reset the FunnelKit shipping <table> wrapper first. */
body #wfacp-e-form .wfacp_shipping_table,
body #wfacp-e-form .wfacp_shipping_table tbody,
body #wfacp-e-form .wfacp_shipping_table tr,
body #wfacp-e-form .wfacp_shipping_table td {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}
body #wfacp-e-form ul.woocommerce-shipping-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--lw-field-border);
	border-radius: var(--lw-radius);
	overflow: hidden;
	background: #fff;
}

/* Each method = a row with a divider under it (last row has none). */
body #wfacp-e-form .wfacp_single_shipping_method {
	border: 0;
	border-bottom: 1px solid var(--lw-border);
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: #fff;
	position: relative;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body #wfacp-e-form .wfacp_single_shipping_method:last-child {
	border-bottom: 0;
}

/* Selected row: green wash + a green ring drawn on top of the dividers. */
body #wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) {
	background: var(--lw-green-tint);
	box-shadow: 0 0 0 2px var(--lw-green-border) inset;
	z-index: 1;
}

/* The WHOLE row is one grid: [ radio | badge | text | price ]. We promote the
   radio, badge, title, date and price into this grid with display:contents so the
   text column (minmax(0,1fr)) always takes the leftover width — FunnelKit's nested
   flex refuses to grow, which was squeezing the text and wrapping the title. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
	display: grid !important;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 16px;
	row-gap: 1px;
	padding: 16px 18px 16px 8px;
	width: 100%;
}

/* Unwrap the nested containers so their children land directly in the row grid. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_radio,
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_radio > label {
	display: contents !important;
}

/* BIG, obvious, green radio — vertically centred on the left.
   FunnelKit pins the radio with `position:absolute; top:2px`, which sticks it to
   the top of the (now two-line) row; force it back into normal flow so the flex
   `align-items:center` can centre it vertically. */
body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: static !important;
	top: auto !important;
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	justify-self: start;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #bcc5bf !important;
	border-radius: 50% !important;
	background: #fff !important;
	cursor: pointer;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Filled green centre dot. Painted with a radial-gradient background rather than
   ::after — Chromium does not reliably render pseudo-elements on an <input>. */
body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
	border-color: var(--lw-green) !important;
	background-color: #fff !important;
	background-image: radial-gradient(circle at center, var(--lw-green) 0 6px, transparent 7px) !important;
	box-shadow: 0 0 0 4px rgba(102, 181, 106, 0.20);
}

/* Unwrap the badge+title span so the <img> and title land in the row grid. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-wrap {
	display: contents !important;
}

/* BIG badge — column 2, spanning both text rows, vertically centred. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	width: 105px !important;
	height: 105px !important;
}

/* Title — column 3, top row (just above the date). */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lw-ink);
	white-space: normal !important;
	cursor: pointer;
}

/* Date — column 3, bottom row (under the title). The "Estimated delivery:" wording
   is hidden for a clean look — just the date. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
	grid-column: 3;
	grid-row: 2;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4;
	font-weight: 500;
	color: var(--lw-muted) !important;   /* quiet subtitle under the black name */
	cursor: pointer;
}
/* Show the "Estimated:" prefix (PHP renders it as the __label span). */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__label {
	display: inline !important;
	font-weight: 600;
	color: var(--lw-muted) !important;
}
/* Keep the date range on one piece so it never breaks as "26. / July". */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__dates {
	white-space: nowrap;
	color: var(--lw-muted) !important;
}

/* Price — column 4, right side, spanning both rows, vertically centred. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price {
	grid-column: 4;
	grid-row: 1 / 3;
	align-self: center;
	justify-self: end;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right;
}
/* Shopify-style: plain price, no pill — black, bold, right-aligned. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .amount,
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-amount {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--lw-ink) !important;
}
/* Currency symbol matches the price exactly — same size, weight and colour. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-currencySymbol {
	font-size: 1em !important;
	font-weight: inherit;
	color: inherit;
	vertical-align: baseline;
}

/* --- Carrier mode (shipping-carriers feature) ---------------------------------
   When that feature owns the row it emits .lubiwood-carrier-line (method name +
   "Popular" pill) in the label, plus a carrier logo <img> (or a text tag when
   the logo asset is missing).

   Layout, ALL viewports — a clean Shopify-style row:

       (POPULAR)  ← badge straddling the row's top border
       ( ) Method name                 price
           Estimated delivery line

   The radio and the price sit ON the title line. Carrier logos are hidden for
   now (still rendered in the DOM — delete the display:none rule to bring them
   back). Typography needs !important to beat FunnelKit's label rules. */
body #wfacp-e-form .wfacp_single_shipping_method {
	position: relative;
}
/* Carrier logos (and the no-asset text fallback) — hidden for now. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-logo,
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-tag {
	display: none !important;
}
/* The straddling pill must poke above the container's edge, so corner clipping
   moves from the UL (overflow:hidden) to the first/last rows — the selected
   row's green wash + inset ring follow the row's own radius, corners stay
   clean. The UL also gets a little headroom so the badge never kisses the
   section heading above. */
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) {
	overflow: visible;
	margin-top: 10px !important;
}
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) .wfacp_single_shipping_method:first-child {
	border-top-left-radius: var(--lw-radius);
	border-top-right-radius: var(--lw-radius);
}
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) .wfacp_single_shipping_method:last-child {
	border-bottom-left-radius: var(--lw-radius);
	border-bottom-right-radius: var(--lw-radius);
}
/* Row grid: [ radio | text | price ], est-delivery on its own second row. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_single_shipping {
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	grid-template-rows: auto auto !important;
	align-items: center !important;
}
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_radio,
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_radio > label {
	display: contents !important;
}
/* Radio ON the title line — level with the method name, not floating above it. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) input[type="radio"].shipping_method {
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-self: center !important;
	justify-self: start;
	margin: 0 !important;
}
/* Method name — the pill is lifted out of the flow, so this is just the title.
   position:relative makes this the pill's anchor: left:0 on the pill = exactly
   the title's left edge, whatever the row's padding/radio/gap add up to. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-line {
	display: block !important;
	position: relative !important;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	text-align: left !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.25;
	color: var(--lw-ink) !important;
	white-space: normal !important;
	cursor: pointer;
}
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-name {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--lw-ink) !important;
}
/* Estimated delivery — quiet second line under the name. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .lubiwood-wd-est-del--in-label {
	grid-column: 2 !important;
	grid-row: 2 !important;
	align-self: start;
	justify-self: start;
	text-align: left !important;
}
/* Price — right-aligned, level with the title/radio. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_price {
	grid-column: 3 !important;
	grid-row: 1 !important;
	align-self: center !important;
	justify-self: end !important;
}
/* "Popular" — a solid green badge straddling the row's top border, starting at
   the title's left edge. Anchored to .lubiwood-carrier-line (position:relative
   above): left:0 = the title's x at any viewport; the negative top is the
   measured distance from the title line up to the row's border (FunnelKit row
   inset 11px + row padding-top 10px desktop / 13px mobile), and translateY
   centres the badge ON that border. z-index lifts it over the selected row's
   green ring and the neighbouring row's background. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-pill {
	position: absolute !important;
	top: -21px;
	left: 0;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-block !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	border-radius: 999px;
	background: var(--lw-green) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5 !important;
	white-space: nowrap;
}
@media (max-width: 600px) {
	/* Same layout as desktop, scaled: the row's padding-top grows to 13px on
	   phones (deeper border offset) and the type sizes down a touch. */
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-pill {
		top: -24px;
		font-size: 9px !important;
		padding: 2px 8px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-line {
		font-size: 15px !important;
		padding-right: 6px;
	}
}

/* Phones — tighten the grid gaps/padding and scale the badge, title and price
   down a touch for the narrow row. Radio sits at the far-left edge; the price
   pill stays on the right. Layout (grid columns) is inherited from above. */
@media (max-width: 600px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		column-gap: 11px;
		padding: 13px 12px 13px 5px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		width: 68px !important;
		height: 68px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
		font-size: 16px !important;
		line-height: 1.15;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
		font-size: 12px !important;
	}
	/* Price — plain, sized down a touch for the narrow row. */
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .amount,
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-amount {
		font-size: 16px !important;
		padding: 0 !important;
	}
}

/* Very small phones (iPhone SE, 375px and below) — there isn't room for the icon
   AND a one-line title next to the price, so drop the icon and keep the row clean:
   the grid collapses to [ radio | title+date | price ] and the title gets the full
   width. Normal phones (376px+) keep the icon. */
@media (max-width: 375px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 12px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		display: none !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title,
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
		grid-column: 2;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price {
		grid-column: 3;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Payment methods  ->  selectable cards
 * ------------------------------------------------------------------ */
/* Shopify-style: ONE bordered container holding the gateways, split by dividers. */
#wfacp-e-form #payment ul.payment_methods,
#wfacp-e-form #payment .wc_payment_methods {
	border: 1px solid var(--lw-field-border) !important;
	border-radius: var(--lw-radius) !important;
	overflow: hidden;
	padding: 0 !important;
	margin: 0;
	display: block;
	background: #fff;
}

/* Each gateway = a row with a divider under it (last row has none). */
/* Deterministic grid: [radio] [label / description]. The radio is column 1; the label AND
   the description both sit in column 2, so the label never shifts when the description shows
   on the selected row (the old flex-wrap layout indented the selected label). */
body #wfacp-e-form #payment li.wc_payment_method {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 4px;
	/* min-height gives the short (unselected) rows more presence; the selected row is
	   already taller from its description so it's unaffected. */
	min-height: 74px;
	box-sizing: border-box;
	border: 0 !important;
	border-bottom: 1px solid var(--lw-border) !important;
	border-radius: 0 !important;
	background: #fff !important;
	padding: 18px !important;
	margin: 0 !important;
	list-style: none !important;
	position: relative;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Radio pinned to column 1, first row. */
body #wfacp-e-form #payment li.wc_payment_method > input[type="radio"],
body #wfacp-e-form #payment li.wc_payment_method > input.input-radio {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	align-self: center;
}
body #wfacp-e-form #payment li.wc_payment_method:last-child {
	border-bottom: 0 !important;
}

body #wfacp-e-form #payment li.wc_payment_method:has(input.input-radio:checked),
body #wfacp-e-form #payment li.wc_payment_method:has(input[type="radio"]:checked),
/* When only one gateway is available it is the chosen one — show it selected
   even though WooCommerce hides the lone radio. */
body #wfacp-e-form #payment li.wc_payment_method:only-child {
	background: var(--lw-green-tint) !important;
	box-shadow: 0 0 0 2px var(--lw-green-border) inset !important;
	z-index: 1;
}

body #wfacp-e-form #payment li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	min-width: 0;
	align-items: center;
	gap: 10px;
	/* !important: FunnelKit's wfacp-form.min.css sets a more-specific 14px/400 on payment
	   labels, so these need !important to win. */
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--lw-ink);
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}

/* Gateway icons (Stripe/PayPal/etc.) sit to the right. */
#wfacp-e-form #payment li.wc_payment_method > label img {
	margin-left: auto;
	max-height: 22px;
	width: auto;
}

/* The gateway description — calm helper text under the label, no extra box. */
#wfacp-e-form #payment li.wc_payment_method .payment_box {
	grid-column: 2; /* under the label (col 2), aligned with it */
	background: transparent;
	border: 0;
	margin: 2px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lw-muted);
}
#wfacp-e-form #payment li.wc_payment_method .payment_box p {
	margin: 0;
}
#wfacp-e-form #payment li.wc_payment_method .payment_box::before {
	display: none; /* kill WooCommerce's little triangle */
}

/* ------------------------------------------------------------------ *
 * 5. Order bump  ->  green "gift" card
 * ------------------------------------------------------------------ */
#wfob_wrap .wfob_bump,
#wfacp-e-form #wfob_wrap .wfob_bump {
	border: 2px dashed var(--lw-green-border);
	border-radius: var(--lw-radius);
	background: var(--lw-green-tint);
	padding: 14px 16px;
}

#wfob_wrap .wfob_bump:has(input:checked) {
	border-style: solid;
	box-shadow: 0 0 0 1px var(--lw-green-border) inset;
}

/* ------------------------------------------------------------------ *
 * 6. Place Order button  ->  full-width, brand green
 * ------------------------------------------------------------------ */
body #wfacp-e-form #place_order,
body #wfacp-e-form button[type="submit"]:not(.white):not(.black):not(.wfacp-coupon-btn) {
	width: 100%;
	min-height: 56px;
	border: 0;
	border-radius: var(--lw-radius);
	background-color: var(--lw-green);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px rgba(102, 181, 106, 0.28);
	transition: background-color 0.15s ease, transform 0.05s ease;
}

body #wfacp-e-form #place_order:hover,
body #wfacp-e-form button[type="submit"]:not(.white):not(.black):not(.wfacp-coupon-btn):hover {
	background-color: var(--lw-green-dark);
}

body #wfacp-e-form #place_order:active {
	transform: translateY(1px);
}

/* Coupon "Apply" button stays secondary, not full width. */
body #wfacp-e-form .wfacp-coupon-btn {
	width: auto;
	min-height: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 7. Order summary (right column) — light polish
 * ------------------------------------------------------------------ */
#wfacp-e-form .wfacp-order-summary,
#wfacp-e-form .wfacp_order_summary {
	border-radius: var(--lw-radius);
}

/* ------------------------------------------------------------------ *
 * 8. Image-1 polish — green radios, payment "Free" badge + logos
 * ------------------------------------------------------------------ */

/* Custom green radio dots on payment rows (shipping radios are handled in §3).
   Same armor as the §3 shipping radios: FunnelKit/WoodMart rules resize checked
   radios (they stretched into a green oval), so every box property is clamped
   with !important, and the centre dot is painted with a radial-gradient — the
   old ::after dot is unreliable on <input> in Chromium and inherited the
   stretch. */
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	min-height: 20px !important;
	max-height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #c5ccc7 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none;
	position: static !important;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio:checked {
	border-color: var(--lw-green) !important;
	background-color: #fff !important;
	background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
}
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio::before,
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio::after {
	display: none !important;
}

/* Shopify style: no "Free" badge on payment rows — just method name + logo. */
#wfacp-e-form #payment li.wc_payment_method > label::after {
	content: none !important;
	display: none !important;
}

/* Push the gateway logo/icons to the far right of the row. */
#wfacp-e-form #payment li.wc_payment_method > label > span,
#wfacp-e-form #payment li.wc_payment_method > label > img {
	margin-left: auto;
}
#wfacp-e-form #payment li.wc_payment_method > label img {
	max-height: 26px;
	width: auto;
}

/* NOTE: a previous version painted a COD "card" icon as a left background here with
   padding-left:32px. That made the COD label text start 32px further right than the other
   rows (read as a "shift"), so it was removed to keep all payment labels aligned. To bring a
   COD icon back, add it as an inline element on the RIGHT (like the card-network logos) rather
   than as left padding on the label. */

/* ------------------------------------------------------------------ *
 * 9. Remove the gold "trust coin" badges from the checkout sidebar
 *    (Secure Payments / Fast Shipping / Premium Quality / Customer
 *    Support). They are Elementor image widgets (ids cbwid01–cbwid04);
 *    the image-src selectors are a fallback in case a translated page
 *    uses different element ids. This stylesheet only loads on the
 *    FunnelKit checkout, so leaving these unscoped is safe.
 * ------------------------------------------------------------------ */
.elementor-element-cbwid01,
.elementor-element-cbwid02,
.elementor-element-cbwid03,
.elementor-element-cbwid04,
/* also collapse the now-empty columns that held them, so no gap is left */
.elementor-element-cbcol01,
.elementor-element-cbcol02,
.elementor-element-cbcol03,
.elementor-element-cbcol04,
.elementor-widget-image:has(img[src*="secure-payments"]),
.elementor-widget-image:has(img[src*="fast-shipping"]),
.elementor-widget-image:has(img[src*="premium-quality"]),
.elementor-widget-image:has(img[src*="customer-support"]),
/* "Shop with Confidence" trust checklist column (heading + icon list). */
.elementor-element-6522513d {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 10. Payment section: single container (§4), tame expanded gateway panels
 * ------------------------------------------------------------------ */

/* Kill only the OUTER wrapper box (the section is already a card); the payment
   LIST keeps its border — it's the Shopify-style container (§4). */
body #wfacp-e-form #payment.woocommerce-checkout-payment {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Expanded gateway panel (e.g. "Pay with Apple Pay") kept white by a theme
   rule — force it to blend into its (possibly green-tinted) row. */
body #wfacp-e-form #payment li.wc_payment_method {
	overflow: hidden;
}
body #wfacp-e-form #payment li.wc_payment_method .payment_box {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 * 11. Desktop compaction — the §3 shipping rows (105px badge) are
 *     oversized on large screens; shrink badge/radio/padding there.
 *     Mobile keeps the §3 sizes.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		padding: 10px 16px 10px 8px;
		column-gap: 12px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		width: 80px !important;
		height: 80px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
		box-shadow: 0 0 0 3px rgba(102, 181, 106, 0.20);
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
		font-size: 15px !important;
	}
}

/* "Add Apartment, suite, unit…" collapsible toggle: FunnelKit ships it in a
   soft red (rgb(221,117,117)) that reads like an error at checkout. Use the
   site's primary green instead (WoodMart --wd-primary-color; hex fallback =
   the same rgb(122,179,139) for non-WoodMart contexts). Scoped under
   #wfacp-e-form per the FK-reset rule. */
body #wfacp-e-form a.wfacp_collapsible,
body .wfacp_main_form a.wfacp_collapsible {
	/* !important: the color is baked into the checkout templates' Elementor
	   settings (#DD7575) and compiles at .elementor-<id> specificity. */
	color: var(--wd-primary-color, #7ab38b) !important;
}

/* ------------------------------------------------------------------ *
 * Mobile shipping-method rows — LEGACY BADGE MODE ONLY
 * ------------------------------------------------------------------ *
 * The old `.lubiwood-ship-badge*` markup (used when the shipping-carriers
 * feature is off) auto-flows badly on phones: parts land behind the radio and
 * the price/date collide. Drop those rows to a forgiving
 * [ radio | stacked text | price ] layout. Carrier-mode rows
 * (:has(.lubiwood-carrier-line)) are EXCLUDED — their phone layout is owned by
 * the "Carrier mode" section above, and these late rules must not fight it. */
@media (max-width: 575px) {
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_single_shipping {
		grid-template-columns: 28px minmax(0, 1fr) auto !important;
		grid-template-rows: auto !important;
		column-gap: 10px !important;
		row-gap: 2px !important;
		align-items: start !important;
		padding: 14px 14px 14px 6px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) input[type="radio"].shipping_method {
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-self: start !important;
		margin-top: 2px !important;
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
	}
	/* Every textual part stacks in column 2 (auto rows), so nothing lands behind
	   the radio. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-ship-badge-title,
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-wd-est-del--in-label {
		grid-column: 2 !important;
		grid-row: auto !important;
		align-self: start !important;
		margin-left: 0 !important;
		min-width: 0 !important;
	}
	/* Price: column 3, top row, right-aligned — never over the date. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_shipping_price,
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_shipping_price .amount {
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-self: start !important;
		white-space: nowrap !important;
		text-align: right !important;
	}
	/* Let the delivery date wrap rather than overrun into the price (all rows). */
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__dates {
		white-space: normal !important;
	}
	/* Shrink the legacy badge so it doesn't dominate the row. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-ship-badge {
		grid-column: 2 !important;
		grid-row: auto !important;
		width: auto !important;
		max-width: 46px !important;
		height: auto !important;
		max-height: 30px !important;
		align-self: start !important;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Place-order loader — viewport-centered
 *
 * WooCommerce blocks the checkout FORM while the order is placed and centres its
 * spinner on that (tall) form, so a shopper scrolled to the Place Order button
 * at the bottom sees a dimmed page but no spinner. This overlay is position:fixed
 * and always centres in the current viewport, so the feedback is visible however
 * far down the page the click happens. Shown/hidden by checkout-click.js when the
 * form enters/leaves its processing (blockUI) state.
 * ------------------------------------------------------------------ */
.lubiwood-checkout-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.lubiwood-checkout-loader.is-active {
	display: flex;
}
.lubiwood-checkout-loader__spinner {
	width: 56px;
	height: 56px;
	border: 4px solid rgba(102, 181, 106, 0.25);
	border-top-color: var(--lw-green, #66b56a);
	border-radius: 50%;
	animation: lubiwood-checkout-spin 0.7s linear infinite;
}
@keyframes lubiwood-checkout-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.lubiwood-checkout-loader__spinner { animation-duration: 1.6s; }
}

/* ------------------------------------------------------------------ *
 * 6. Trust badges — replace the bottom payment-logo strip
 * The checkout footer's static "Payment methods" logo image is hidden by
 * checkout-click.js, which injects this row in its place (brand green).
 * ------------------------------------------------------------------ */
.lubiwood-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 30px;
	padding: 4px 8px;
	line-height: 1.3;
}
.lubiwood-checkout-trust .lubiwood-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lw-ink, #1f2421);
}
.lubiwood-checkout-trust .lubiwood-trust-ico {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--lw-green, #66b56a);
}
.lubiwood-checkout-trust .lubiwood-trust-ico svg {
	width: 22px;
	height: 22px;
	display: block;
}
@media (max-width: 480px) {
	.lubiwood-checkout-trust { gap: 8px 18px; }
	.lubiwood-checkout-trust .lubiwood-trust-item { font-size: 14.5px; }
	.lubiwood-checkout-trust .lubiwood-trust-ico svg { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------------ *
 * Font resilience — a failed webfont must NEVER fall back to serif
 *
 * FunnelKit's compiled settings CSS declares bare `font-family: Karla` on its
 * containers and `Karla, Lato` on section headings — no generic fallback.
 * Neither Karla nor Lato is a system font, so whenever the Karla woff2 fails
 * to load client-side (flaky network, privacy extension, a cached bad
 * response) those elements render in the browser's DEFAULT SERIF (Times):
 * random serif headings/prices/bump text on an otherwise-sans checkout.
 * Re-declare the full stack on every text element of the canvas — same first
 * font, so nothing changes when Karla loads; the failure mode becomes clean
 * system sans. Icon-font elements are excluded so their glyphs keep working
 * (pseudo-element icons are unaffected either way: they declare their own
 * font-family on the pseudo itself).
 * ------------------------------------------------------------------ */
body .wfacp-template-container :where(div, section, form, h1, h2, h3, h4, h5, h6,
	p, span, label, a, li, ul, ol, dd, dt, td, th, table, bdi, small, strong, b,
	em, legend, blockquote, figcaption, address, button, input, select,
	textarea):not(i):not([class*="icon"]):not([class*="fa-"]) {
	font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif !important;
}

/* Section HEADINGS + order-summary totals: the `:where()` rule above has zero
 * specificity, so FunnelKit's compiled `.elementor-element-xxx h2/h3 { font-family:
 * Karla, Lato !important }` (two classes + element) outweighs it and these elements
 * stayed on `Karla, Lato` — i.e. SERIF when the Karla woff2 fails to load (Lato is
 * not a system font either). Re-declare the stack rooted at the `#wfacp-e-form` ID:
 * an ID (1,0,x) beats FunnelKit's class chain (0,2,x), so it wins and the fallback
 * is clean system-sans. Same first font (Karla) → no visual change when Karla loads.
 * (QA 2026-08-10: Croatian checkout headings — Način dostave / Plaćanje / Ukupno —
 * rendered serif; language-independent, all markets.) */
body #wfacp-e-form h1, body #wfacp-e-form h2, body #wfacp-e-form h3,
body #wfacp-e-form h4, body #wfacp-e-form h5, body #wfacp-e-form h6,
body #wfacp-e-form .wfacp-section-heading,
body #wfacp-e-form .wfacp-order-summary-toggle,
body #wfacp-e-form .wfacp_order_summary,
body #wfacp-e-form .wfacp_order_summary *:not(i):not([class*="icon"]):not([class*="fa-"]) {
	font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif !important;
}