/*
 * Checkout skin.
 *
 * Only rules that match live markup are kept. Anything the FunnelKit settings
 * now handle (mobile mini-cart, quantity switcher, sidebar coupon, address
 * fields) has been removed rather than left hiding dead elements.
 */

:root {
	/* On :root, not .wfacp_main_wrapper -- the form fields render outside that
	   wrapper, so a scoped token resolves empty and kills the whole shorthand. */
	--ck-accent: #1571a8;
	--ck-border: #d5d9de;
	--ck-radius: 6px;
}

/* ------------------------------------------------------------------ fields */
/* Floating labels need headroom, or the value sits against the label. */
body #wfacp-e-form .wfacp_main_form .wfacp-form-control,
body .wfacp_main_wrapper .wfacp-form-control.wfacp-form-control,
body .wfacp_main_wrapper .input-text.input-text {
	font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
	padding: 22px 14px 10px !important;
	font-size: 16px !important;   /* below 16px, iOS Safari zooms the page when a field is focused */
	line-height: 1.3 !important;
	height: auto !important;
	border: 1px solid #d5d9de !important;
	border-radius: 6px !important;
	background: #fff;
}
body .wfacp_main_wrapper .wfacp-form-control.wfacp-form-control:focus {
	border-color: #1571a8 !important;
	box-shadow: 0 0 0 3px rgb(21 113 168 / 15%);
	outline: none;
}

/* ------------------------------------------------------------------ action */
/* FunnelKit scopes its rules as `body #wfacp-e-form .wfacp_main_form`, so this
   has to match that depth to win. */
body #wfacp-e-form .wfacp_main_form #place_order,
body #wfacp-e-form #place_order,
body .wfacp_main_wrapper #place_order {
	background: #f6c324 !important;
	border-color: #f6c324 !important;
	color: #14181d !important;
	font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(1.05rem, .95rem + .6vw, 1.45rem) !important;
	width: 100% !important;
	padding: 18px 22px !important;
	border-radius: var(--ck-radius) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
body #wfacp-e-form .wfacp_main_form #place_order:hover,
body .wfacp_main_wrapper #place_order:hover {
	background: #e8b70f !important;
	border-color: #e8b70f !important;
}
body #wfacp-e-form #place_order::before,
body .wfacp_main_wrapper #place_order::before {
	content: "";
	width: .95em; height: .95em; flex: none;
	background-color: currentColor;
	-webkit-mask: var(--ol-cart) center / contain no-repeat;
	mask: var(--ol-cart) center / contain no-repeat;
}

/* -------------------------------------------------------------- page chrome */
/* The padlock is an icon-font glyph missing from the self-hosted face. */
#row-tIEocZpEua h1::before,
#row-tIEocZpEua h2::before {
	content: "";
	display: inline-block;
	width: .78em; height: .78em;
	margin-right: .38em;
	vertical-align: -0.04em;
	background-color: currentColor;
	-webkit-mask: var(--ol-lock) center / contain no-repeat;
	mask: var(--ol-lock) center / contain no-repeat;
	font-family: inherit !important;
}

/* Benefit ticks, right column only -- the row also holds the form, and the
   payment options must never be marked up as checklist items. */
#col-_RK0yV0hb4 li {
	list-style: none !important;
	position: relative;
	padding-left: 1.9em;
	margin-bottom: .55em;
}
#col-_RK0yV0hb4 li::before {
	content: "";
	position: absolute;
	left: 0; top: .18em;
	width: 1.15em; height: 1.15em;
	background-color: #22a45d;
	-webkit-mask: var(--ol-check) center / contain no-repeat;
	mask: var(--ol-check) center / contain no-repeat;
}
.wfacp_main_wrapper li::before { content: none !important; }
.wfacp_main_wrapper li { padding-left: 0 !important; }

/* Countdown layout only; size, weight and colour come from the page's own
   .count / .label rules. */
.olt-row { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 2.2rem); }
.olt { display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------- single-item UX --
 * One product, so the switcher's remove control would only empty the cart.
 * The coupon is not part of this offer, and the wallet buttons pushed the form
 * below the fold. All three still render, so all three rules are load-bearing.
 */
.product-remove,
#product_switching_field .product-remove { display: none !important; }
.wfacp-coupon-section,
.wfacp_main_wrapper .checkout_coupon { display: none !important; }
.fkwcs_stripe_smart_button_wrapper { display: none !important; }

:root {
	--ol-lock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48h160v-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192v-48C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z"/></svg>');
	--ol-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm139 135L226 369c-6 8-18 9-25 2L117 287c-7-7-7-18 0-25l21-21c7-7 18-7 25 0l48 47 141-188c6-8 18-9 25-3l21 16c8 6 9 17 3 25z"/></svg>');
	--ol-cart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>');
}

/* Turning off the quantity switcher leaves this header row holding a single
   orphaned "Price" label with nothing to align against. It is the only wrapper
   of its kind and carries no price value, so the whole row goes. */
.wfacp-product-switch-title .wfacp_qty_price_wrap { display: none !important; }