/**
 * Eilmo Checkout Flow frontend styles.
 *
 * @package EilmoCheckout
 */

/* ==========================================================================
   Root
   ========================================================================== */

.eilmo-cf-checkout {
	--eilmo-cf-primary: #111827;
	--eilmo-cf-accent: #2563eb;

	--eilmo-cf-border: #e5e7eb;
	--eilmo-cf-border-strong: #d1d5db;

	--eilmo-cf-background: #ffffff;
	--eilmo-cf-muted-background: #f9fafb;
	--eilmo-cf-soft-background: #f3f4f6;

	--eilmo-cf-text: #111827;
	--eilmo-cf-muted-text: #6b7280;

	--eilmo-cf-success: #15803d;
	--eilmo-cf-warning: #b45309;
	--eilmo-cf-danger: #dc2626;

	--eilmo-cf-radius: 10px;
	--eilmo-cf-parent-radius: 12px;

	--eilmo-cf-gap: 16px;
	--eilmo-cf-card-gap: 16px;

	--eilmo-cf-summary-width: 360px;
	--eilmo-cf-summary-sticky-offset: 24px;

	--eilmo-cf-variation-columns-desktop: 3;
	--eilmo-cf-variation-columns-tablet: 2;
	--eilmo-cf-variation-columns-mobile: 2;

	--eilmo-cf-summary-z-index: 100250;
	--eilmo-cf-summary-backdrop-z-index: 100240;

	--eilmo-cf-mobile-bar-height: 72px;

	position: relative;

	box-sizing: border-box;

	width: 100%;

	overflow: visible;

	color: var(--eilmo-cf-text);
}

.eilmo-cf-checkout *,
.eilmo-cf-checkout *::before,
.eilmo-cf-checkout *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Checkout layout
   ========================================================================== */

.eilmo-cf-checkout__inner {
	display: grid;

	grid-template-columns: minmax(0, 1fr);

	gap: 24px;
	align-items: start;

	width: 100%;

	overflow: visible;
}

.eilmo-cf-checkout__main {
	min-width: 0;
	width: 100%;
}

.eilmo-cf-checkout__products {
	width: 100%;
}

.eilmo-cf-products {
	display: flex;
	flex-direction: column;

	gap: var(--eilmo-cf-gap);

	width: 100%;
}

.eilmo-cf-checkout__summary {
	min-width: 0;
	width: 100%;

	overflow: visible;
}

/* ==========================================================================
   Product card
   ========================================================================== */

.eilmo-cf-product-card {
	position: relative;

	display: grid;

	grid-template-columns: 96px minmax(0, 1fr);

	gap: var(--eilmo-cf-card-gap);
	align-items: center;

	width: 100%;

	margin: 0;
	padding: 16px;

	border: 1px solid var(--eilmo-cf-border);
	border-radius: var(--eilmo-cf-radius);

	background: var(--eilmo-cf-background);

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.eilmo-cf-product-card:hover {
	border-color: var(--eilmo-cf-border-strong);
}

/* ==========================================================================
   Selected card
   ========================================================================== */

.eilmo-cf-product-card--selected {
	border-color: var(--eilmo-cf-accent);

	background: var(--eilmo-cf-background);

	box-shadow: 0 0 0 1px var(--eilmo-cf-accent);
}

.eilmo-cf-product-card--selected::after {
	position: absolute;

	top: 10px;
	right: 10px;

	width: 9px;
	height: 9px;

	border: 2px solid var(--eilmo-cf-background);
	border-radius: 999px;

	background: var(--eilmo-cf-accent);

	box-shadow: 0 0 0 1px var(--eilmo-cf-accent);

	content: "";
}

/* ==========================================================================
   Product thumbnail
   ========================================================================== */

.eilmo-cf-product-card__thumbnail {
	display: block;

	width: 96px;
	height: 96px;

	overflow: hidden;

	border-radius: 8px;

	background: var(--eilmo-cf-muted-background);
}

.eilmo-cf-product-card__image {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	object-fit: cover;
}

/* ==========================================================================
   Product content
   ========================================================================== */

.eilmo-cf-product-card__content {
	display: flex;
	flex-direction: column;

	gap: 8px;

	min-width: 0;
	width: 100%;
}

/* ==========================================================================
   Product title
   ========================================================================== */

.eilmo-cf-product-card__title {
	margin: 0;
	padding: 0;

	color: var(--eilmo-cf-text);

	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;

	text-decoration: none;
}

.eilmo-cf-product-card__title-link,
.eilmo-cf-product-card__title-link:link,
.eilmo-cf-product-card__title-link:visited,
.eilmo-cf-product-card__title-link:hover,
.eilmo-cf-product-card__title-link:focus,
.eilmo-cf-product-card__title-link:active {
	color: inherit;

	text-decoration: none !important;

	box-shadow: none;
}

.eilmo-cf-product-card__title-link:hover,
.eilmo-cf-product-card__title-link:focus-visible {
	color: var(--eilmo-cf-accent);
}

/* ==========================================================================
   Product description
   ========================================================================== */

.eilmo-cf-product-card__description {
	color: var(--eilmo-cf-muted-text);

	font-size: 14px;
	line-height: 1.6;
}

.eilmo-cf-product-card__description p {
	margin-top: 0;
	margin-bottom: 8px;
}

.eilmo-cf-product-card__description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Product price
   ========================================================================== */

.eilmo-cf-product-card__price {
	color: var(--eilmo-cf-text);

	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.eilmo-cf-product-card__price del {
	margin-right: 6px;

	color: var(--eilmo-cf-muted-text);

	font-size: 14px;
	font-weight: 400;

	opacity: 0.75;
}

.eilmo-cf-product-card__price ins {
	color: inherit;

	font-weight: inherit;

	text-decoration: none;
}

/* ==========================================================================
   Product stock
   ========================================================================== */

.eilmo-cf-product-card__stock {
	display: flex;
	flex-wrap: wrap;

	gap: 6px 10px;
	align-items: center;

	font-size: 13px;
	line-height: 1.4;
}

.eilmo-cf-product-card__stock .stock {
	margin: 0;
}

.eilmo-cf-product-card__stock .in-stock {
	color: var(--eilmo-cf-success);
}

.eilmo-cf-product-card__stock .out-of-stock {
	color: var(--eilmo-cf-danger);
}

.eilmo-cf-product-card__stock .available-on-backorder {
	color: var(--eilmo-cf-warning);
}

.eilmo-cf-product-card__remaining-stock {
	color: var(--eilmo-cf-muted-text);
}

.eilmo-cf-product-card__unavailable {
	color: var(--eilmo-cf-danger);

	font-size: 13px;
	font-weight: 600;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.eilmo-cf-product-card__badges {
	display: flex;
	flex-wrap: wrap;

	gap: 6px;
}

.eilmo-cf-badge {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: fit-content;

	margin: 0;
	padding: 4px 8px;

	border: 0;
	border-radius: 999px;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	text-transform: uppercase;
}

.eilmo-cf-badge--sale {
	color: #ffffff;

	background: var(--eilmo-cf-danger);
}

/* ==========================================================================
   Quantity
   ========================================================================== */

.eilmo-cf-quantity {
	display: inline-grid !important;

	grid-template-columns: 40px 56px 40px !important;

	align-items: stretch;

	width: 136px !important;
	max-width: 136px !important;
	min-width: 136px !important;

	height: 40px;
	min-height: 40px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	border: 1px solid var(--eilmo-cf-border);
	border-radius: 8px;

	background: var(--eilmo-cf-background);
}

.eilmo-cf-checkout .eilmo-cf-quantity__button {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;

	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: var(--eilmo-cf-muted-background) !important;
	color: var(--eilmo-cf-text) !important;

	box-shadow: none !important;

	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1 !important;

	text-align: center !important;
	text-decoration: none !important;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		background-color 0.2s ease,
		opacity 0.2s ease;
}

.eilmo-cf-checkout .eilmo-cf-quantity__button:hover:not(:disabled),
.eilmo-cf-checkout .eilmo-cf-quantity__button:focus-visible:not(:disabled) {
	background: var(--eilmo-cf-soft-background) !important;
}

.eilmo-cf-checkout .eilmo-cf-quantity__button:disabled {
	cursor: not-allowed;

	opacity: 0.4;
}

.eilmo-cf-checkout .eilmo-cf-quantity__input {
	display: block !important;

	width: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;

	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;

	margin: 0 !important;
	padding: 0 4px !important;

	border: 0 !important;
	border-right: 1px solid var(--eilmo-cf-border) !important;
	border-left: 1px solid var(--eilmo-cf-border) !important;
	border-radius: 0 !important;

	background: var(--eilmo-cf-background) !important;
	color: var(--eilmo-cf-text) !important;

	box-shadow: none !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 40px !important;

	text-align: center !important;

	outline: 0 !important;

	appearance: textfield !important;
	-moz-appearance: textfield !important;
}

.eilmo-cf-checkout .eilmo-cf-quantity__input::-webkit-outer-spin-button,
.eilmo-cf-checkout .eilmo-cf-quantity__input::-webkit-inner-spin-button {
	margin: 0;

	appearance: none;
	-webkit-appearance: none;
}

.eilmo-cf-checkout .eilmo-cf-quantity__input:focus {
	box-shadow:
		inset 0 0 0 2px var(--eilmo-cf-accent) !important;
}

/* ==========================================================================
   Variable parent product
   ========================================================================== */

.eilmo-cf-variable-product {
	display: flex;
	flex-direction: column;

	gap: 16px;

	width: 100%;

	margin: 0;
	padding: 18px;

	border: 1px solid var(--eilmo-cf-border-strong);
	border-radius: var(--eilmo-cf-parent-radius);

	background: var(--eilmo-cf-background);
}

/* ==========================================================================
   Variable parent header
   ========================================================================== */

.eilmo-cf-variable-product__header {
	display: flex;
	flex-direction: column;

	gap: 6px;

	width: 100%;

	padding-bottom: 14px;

	border-bottom: 1px solid var(--eilmo-cf-border);
}

.eilmo-cf-variable-product__title {
	margin: 0;
	padding: 0;

	color: var(--eilmo-cf-text);

	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;

	text-decoration: none;
}

.eilmo-cf-variable-product__title-link,
.eilmo-cf-variable-product__title-link:link,
.eilmo-cf-variable-product__title-link:visited,
.eilmo-cf-variable-product__title-link:hover,
.eilmo-cf-variable-product__title-link:focus,
.eilmo-cf-variable-product__title-link:active {
	color: inherit;

	text-decoration: none !important;

	box-shadow: none !important;
}

.eilmo-cf-variable-product__title-link:hover,
.eilmo-cf-variable-product__title-link:focus-visible {
	color: var(--eilmo-cf-accent);
}

.eilmo-cf-variable-product__description {
	color: var(--eilmo-cf-muted-text);

	font-size: 14px;
	line-height: 1.6;
}

.eilmo-cf-variable-product__description p {
	margin-top: 0;
	margin-bottom: 8px;
}

.eilmo-cf-variable-product__description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Variation grid
   ========================================================================== */

.eilmo-cf-variable-product__variations {
	display: grid;

	grid-template-columns:
		repeat(
			var(--eilmo-cf-variation-columns-desktop, 3),
			minmax(0, 1fr)
		);

	gap: 10px;

	width: 100%;
}

/* ==========================================================================
   Variation card
   ========================================================================== */

.eilmo-cf-variable-product .eilmo-cf-product-card {
	margin: 0;
}

.eilmo-cf-product-card--variation {
	grid-template-columns: 78px minmax(0, 1fr);

	gap: 14px;
	align-items: center;

	padding: 13px;

	border-color: var(--eilmo-cf-border);

	background: var(--eilmo-cf-muted-background);
}

.eilmo-cf-product-card--variation:hover {
	background: var(--eilmo-cf-soft-background);
}

.eilmo-cf-product-card--variation.eilmo-cf-product-card--selected {
	background: var(--eilmo-cf-background);
}

.eilmo-cf-product-card--variation .eilmo-cf-product-card__thumbnail {
	width: 78px;
	height: 78px;

	background: var(--eilmo-cf-background);
}

.eilmo-cf-product-card--variation .eilmo-cf-product-card__title {
	font-size: 16px;
	font-weight: 600;

	text-decoration: none !important;
}

.eilmo-cf-product-card--variation .eilmo-cf-product-card__title a {
	color: inherit !important;

	text-decoration: none !important;

	pointer-events: none;
}

.eilmo-cf-product-card--variation .eilmo-cf-product-card__price {
	font-size: 16px;
}

/* ==========================================================================
   Summary
   ========================================================================== */

.eilmo-cf-summary-shell {
	position: relative;

	width: 100%;
}

.eilmo-cf-summary {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;

	overflow: hidden;

	border: 1px solid var(--eilmo-cf-border);
	border-radius: var(--eilmo-cf-parent-radius);

	background: var(--eilmo-cf-background);

	box-shadow:
		0 1px 2px rgb(17 24 39 / 4%),
		0 6px 20px rgb(17 24 39 / 4%);
}

/* ==========================================================================
   Summary drawer handle
   ========================================================================== */

.eilmo-cf-summary__drawer-handle {
	display: none;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 22px;

	padding-top: 8px;
}

.eilmo-cf-summary__drawer-handle span {
	display: block;

	width: 42px;
	height: 4px;

	border-radius: 999px;

	background: var(--eilmo-cf-border-strong);
}

/* ==========================================================================
   Summary header
   ========================================================================== */

.eilmo-cf-summary__header {
	display: flex;

	gap: 16px;

	align-items: center;
	justify-content: space-between;

	width: 100%;

	padding: 16px 18px;

	border-bottom: 1px solid var(--eilmo-cf-border);

	background: var(--eilmo-cf-muted-background);
}

.eilmo-cf-summary__title {
	margin: 0;
	padding: 0;

	color: var(--eilmo-cf-text);

	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.eilmo-cf-summary__close {
	display: none;

	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 999px;

	background: var(--eilmo-cf-soft-background);
	color: var(--eilmo-cf-text);

	box-shadow: none;

	font-family: inherit;
	font-size: 24px;
	line-height: 1;

	cursor: pointer;
}

/* ==========================================================================
   Summary rows
   ========================================================================== */

.eilmo-cf-summary__rows {
	display: flex;
	flex-direction: column;

	width: 100%;

	padding: 8px 18px 16px;
}

.eilmo-cf-summary__row {
	display: flex;

	gap: 20px;

	align-items: center;
	justify-content: space-between;

	width: 100%;

	padding: 9px 0;

	font-size: 14px;
	line-height: 1.4;
}

.eilmo-cf-summary__label {
	color: var(--eilmo-cf-muted-text);
}

.eilmo-cf-summary__amount {
	flex-shrink: 0;

	color: var(--eilmo-cf-text);

	font-weight: 600;

	text-align: right;
	white-space: nowrap;
}

.eilmo-cf-summary__row--discount
.eilmo-cf-summary__amount {
	color: var(--eilmo-cf-success);
}

.eilmo-cf-summary__separator {
	width: 100%;
	height: 1px;

	margin: 7px 0;

	background: var(--eilmo-cf-border);
}

.eilmo-cf-summary__row--total {
	padding: 12px 0;
}

.eilmo-cf-summary__row--total
.eilmo-cf-summary__label {
	color: var(--eilmo-cf-text);

	font-size: 16px;
	font-weight: 700;
}

.eilmo-cf-summary__row--total
.eilmo-cf-summary__amount {
	color: var(--eilmo-cf-primary);

	font-size: 19px;
	font-weight: 800;
}

.eilmo-cf-summary__row--pay-now {
	margin-top: 4px;

	padding: 11px 12px;

	border-radius: 8px;

	background: var(--eilmo-cf-muted-background);
}

.eilmo-cf-summary__row--pay-now
.eilmo-cf-summary__label {
	color: var(--eilmo-cf-text);

	font-weight: 700;
}

.eilmo-cf-summary__row--pay-now
.eilmo-cf-summary__amount {
	color: var(--eilmo-cf-accent);

	font-size: 16px;
	font-weight: 800;
}

/* ==========================================================================
   Summary backdrop
   ========================================================================== */

.eilmo-cf-summary-backdrop {
	position: fixed;

	inset: 0;

	z-index: var(--eilmo-cf-summary-backdrop-z-index);

	display: none;

	background: rgb(17 24 39 / 48%);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

/* ==========================================================================
   Summary compact bar
   ========================================================================== */

.eilmo-cf-summary-bar {
	display: none;

	margin: 0;
	padding: 0;

	border: 0;

	font: inherit;

	appearance: none;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1025px) {

	/* ----------------------------------------------------------------------
	   Desktop variation grid
	   ---------------------------------------------------------------------- */

	.eilmo-cf-variable-product__variations {
		grid-template-columns:
			repeat(
				var(--eilmo-cf-variation-columns-desktop, 3),
				minmax(0, 1fr)
			);
	}

	/* ----------------------------------------------------------------------
	   Desktop horizontal variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-desktop="horizontal"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: 78px minmax(0, 1fr);

		align-items: center;
	}

	/* ----------------------------------------------------------------------
	   Desktop vertical variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-desktop="vertical"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: minmax(0, 1fr);

		align-items: start;
	}

	.eilmo-cf-checkout[data-variation-layout-desktop="vertical"]
	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 100%;
		height: auto;

		aspect-ratio: 1 / 1;

		max-height: 180px;
	}

	/* ----------------------------------------------------------------------
	   Desktop summary below
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-desktop="below"]
	.eilmo-cf-checkout__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.eilmo-cf-checkout[data-summary-desktop="below"]
	.eilmo-cf-checkout__summary {
		position: relative;

		top: auto;

		width: 100%;

		height: auto;
	}

	/* ----------------------------------------------------------------------
	   Desktop summary right
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-desktop="right"]
	.eilmo-cf-checkout__inner,
	.eilmo-cf-checkout[data-summary-desktop="right_sticky"]
	.eilmo-cf-checkout__inner,
	.eilmo-cf-checkout[data-summary-desktop="right_fixed"]
	.eilmo-cf-checkout__inner {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(280px, var(--eilmo-cf-summary-width));
	}

	.eilmo-cf-checkout[data-summary-desktop="right"]
	.eilmo-cf-checkout__summary,
	.eilmo-cf-checkout[data-summary-desktop="right_sticky"]
	.eilmo-cf-checkout__summary,
	.eilmo-cf-checkout[data-summary-desktop="right_fixed"]
	.eilmo-cf-checkout__summary {
		width: var(--eilmo-cf-summary-width);

		max-width: 100%;
	}

	/* ----------------------------------------------------------------------
	   Desktop normal right summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-desktop="right"]
	.eilmo-cf-checkout__summary {
		position: relative;

		top: auto;

		align-self: start;

		height: fit-content;
	}

	/* ----------------------------------------------------------------------
	   Desktop sticky summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-desktop="right_sticky"]
	.eilmo-cf-checkout__summary {
		position: sticky;

		top: var(--eilmo-cf-summary-sticky-offset);

		align-self: start;

		height: fit-content;

		z-index: 20;
	}

	.eilmo-cf-checkout[data-summary-desktop="right_sticky"]
	.eilmo-cf-summary-shell {
		position: relative;

		top: auto;

		width: 100%;
	}

	/* ----------------------------------------------------------------------
	   Desktop fixed summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-desktop="right_fixed"]
	.eilmo-cf-checkout__summary {
		position: relative;

		align-self: start;

		height: fit-content;
	}

	.eilmo-cf-checkout[data-summary-desktop="right_fixed"]
	.eilmo-cf-summary-shell {
		position: fixed;

		top: var(--eilmo-cf-summary-sticky-offset);
		right: 24px;

		z-index: 100;

		width: var(--eilmo-cf-summary-width);

		max-width: calc(100vw - 48px);
	}

	/* ----------------------------------------------------------------------
	   Hide drawer controls on desktop
	   ---------------------------------------------------------------------- */

	.eilmo-cf-summary__drawer-handle,
	.eilmo-cf-summary__close,
	.eilmo-cf-summary-bar,
	.eilmo-cf-summary-backdrop {
		display: none;
	}
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

	.eilmo-cf-checkout {
		--eilmo-cf-card-gap: 12px;
	}

	/* ----------------------------------------------------------------------
	   Tablet variation grid
	   ---------------------------------------------------------------------- */

	.eilmo-cf-variable-product__variations {
		grid-template-columns:
			repeat(
				var(--eilmo-cf-variation-columns-tablet, 2),
				minmax(0, 1fr)
			);
	}

	.eilmo-cf-product-card {
		grid-template-columns: 80px minmax(0, 1fr);

		gap: 12px;

		padding: 14px;
	}

	.eilmo-cf-product-card__thumbnail {
		width: 80px;
		height: 80px;
	}

	.eilmo-cf-variable-product {
		padding: 15px;
	}

	.eilmo-cf-variable-product__title {
		font-size: 18px;
	}

	.eilmo-cf-product-card--variation {
		grid-template-columns: 68px minmax(0, 1fr);

		padding: 12px;
	}

	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 68px;
		height: 68px;
	}

	/* ----------------------------------------------------------------------
	   Tablet horizontal variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-tablet="horizontal"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: 68px minmax(0, 1fr);

		align-items: center;
	}

	/* ----------------------------------------------------------------------
	   Tablet vertical variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-tablet="vertical"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: minmax(0, 1fr);

		align-items: start;
	}

	.eilmo-cf-checkout[data-variation-layout-tablet="vertical"]
	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 100%;
		height: auto;

		aspect-ratio: 1 / 1;

		max-height: 160px;
	}

	/* ----------------------------------------------------------------------
	   Tablet summary below
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-tablet="below"]
	.eilmo-cf-checkout__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.eilmo-cf-checkout[data-summary-tablet="below"]
	.eilmo-cf-checkout__summary {
		position: relative;

		top: auto;

		width: 100%;

		height: auto;
	}

	/* ----------------------------------------------------------------------
	   Tablet sticky summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-tablet="right_sticky"]
	.eilmo-cf-checkout__inner {
		grid-template-columns:
			minmax(0, 1fr)
			320px;
	}

	.eilmo-cf-checkout[data-summary-tablet="right_sticky"]
	.eilmo-cf-checkout__summary {
		position: sticky;

		top: var(--eilmo-cf-summary-sticky-offset);

		align-self: start;

		width: 100%;

		height: fit-content;

		z-index: 20;
	}

	.eilmo-cf-checkout[data-summary-tablet="right_sticky"]
	.eilmo-cf-summary-shell {
		position: relative;

		top: auto;

		width: 100%;
	}

	/* ----------------------------------------------------------------------
	   Tablet bottom drawer foundation
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-tablet="bottom_drawer"]
	.eilmo-cf-checkout__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

	.eilmo-cf-checkout {
		--eilmo-cf-gap: 12px;
		--eilmo-cf-card-gap: 10px;
		--eilmo-cf-mobile-bar-height: 68px;
	}

	.eilmo-cf-checkout__inner {
		grid-template-columns: minmax(0, 1fr);

		gap: 18px;
	}

	/* ----------------------------------------------------------------------
	   Mobile variation grid
	   ---------------------------------------------------------------------- */

	.eilmo-cf-variable-product__variations {
		grid-template-columns:
			repeat(
				var(--eilmo-cf-variation-columns-mobile, 2),
				minmax(0, 1fr)
			);

		gap: 8px;
	}

	/* ----------------------------------------------------------------------
	   Mobile cards
	   ---------------------------------------------------------------------- */

	.eilmo-cf-product-card {
		grid-template-columns: 64px minmax(0, 1fr);

		gap: 10px;

		align-items: start;

		padding: 10px;
	}

	.eilmo-cf-product-card__thumbnail {
		width: 64px;
		height: 64px;
	}

	.eilmo-cf-product-card__content {
		gap: 6px;
	}

	.eilmo-cf-product-card__title {
		font-size: 15px;
	}

	.eilmo-cf-product-card__description {
		font-size: 13px;
	}

	.eilmo-cf-product-card__price {
		font-size: 15px;
	}

	/* ----------------------------------------------------------------------
	   Mobile variable parent
	   ---------------------------------------------------------------------- */

	.eilmo-cf-variable-product {
		gap: 12px;

		padding: 10px;

		border-radius: 10px;
	}

	.eilmo-cf-variable-product__header {
		padding-bottom: 10px;
	}

	.eilmo-cf-variable-product__title {
		font-size: 17px;
	}

	.eilmo-cf-variable-product__description {
		font-size: 13px;
	}

	/* ----------------------------------------------------------------------
	   Mobile variation cards
	   ---------------------------------------------------------------------- */

	.eilmo-cf-product-card--variation {
		grid-template-columns: 52px minmax(0, 1fr);

		gap: 8px;

		padding: 9px;
	}

	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 52px;
		height: 52px;
	}

	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__title {
		font-size: 14px;
	}

	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__price {
		font-size: 14px;
	}

	/* ----------------------------------------------------------------------
	   Mobile horizontal variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-mobile="horizontal"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: 52px minmax(0, 1fr);

		align-items: center;
	}

	/* ----------------------------------------------------------------------
	   Mobile vertical variation layout
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-variation-layout-mobile="vertical"]
	.eilmo-cf-product-card--variation {
		grid-template-columns: minmax(0, 1fr);

		align-items: start;
	}

	.eilmo-cf-checkout[data-variation-layout-mobile="vertical"]
	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 100%;
		height: auto;

		aspect-ratio: 1 / 1;

		max-height: 150px;
	}

	/* ----------------------------------------------------------------------
	   Mobile quantity
	   ---------------------------------------------------------------------- */

	.eilmo-cf-quantity {
		grid-template-columns: 34px 42px 34px !important;

		width: 110px !important;
		min-width: 110px !important;
		max-width: 110px !important;

		height: 34px;
		min-height: 34px;
	}

	.eilmo-cf-checkout .eilmo-cf-quantity__button {
		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;

		height: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;

		font-size: 17px !important;
	}

	.eilmo-cf-checkout .eilmo-cf-quantity__input {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;

		height: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;

		font-size: 13px !important;
		line-height: 34px !important;
	}

	/* ----------------------------------------------------------------------
	   Mobile summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-summary__header {
		padding: 13px 14px;
	}

	.eilmo-cf-summary__title {
		font-size: 16px;
	}

	.eilmo-cf-summary__rows {
		padding: 6px 14px 14px;
	}

	.eilmo-cf-summary__row {
		gap: 12px;

		padding: 8px 0;

		font-size: 13px;
	}

	/* ----------------------------------------------------------------------
	   Mobile inline summary
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-checkout__summary {
		position: relative;

		height: auto;
	}

	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-summary {
		position: relative;

		max-height: none;

		transform: none;

		visibility: visible;
	}

	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-summary-bar,
	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-summary-backdrop,
	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-summary__drawer-handle,
	.eilmo-cf-checkout[data-summary-mobile="inline"]
	.eilmo-cf-summary__close {
		display: none;
	}

	/* ----------------------------------------------------------------------
	   Mobile bottom drawer
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"] {
		padding-bottom:
			calc(
				var(--eilmo-cf-mobile-bar-height) +
				24px +
				env(safe-area-inset-bottom)
			);
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-checkout__summary {
		position: static;

		height: 0;
		min-height: 0;

		overflow: visible;
	}

	/*
	 * Create one dedicated stacking context for the
	 * mobile Summary drawer.
	 *
	 * This is especially important when Checkout Flow is
	 * rendered inside Cart Checkout / another modal drawer.
	 * The backdrop must darken the checkout behind the
	 * Summary, but it must never sit on top of the Summary.
	 */
	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-shell[data-summary-open="yes"] {
		position: relative;

		z-index: var(--eilmo-cf-summary-z-index);

		isolation: isolate;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary {
		position: fixed;

		right: 0;
		bottom: 0;
		left: 0;

		/*
		 * Local layer inside the Summary shell stacking
		 * context. Always above the local backdrop layer.
		 */
		z-index: 2 !important;

		width: 100%;

		max-height: min(82dvh, 720px);

		padding-bottom: env(safe-area-inset-bottom);

		border-radius: 20px 20px 0 0;

		box-shadow:
			0 -12px 40px rgb(17 24 39 / 18%);

		transform:
			translateY(calc(100% + 24px));

		visibility: hidden;

		transition:
			transform 0.3s ease,
			visibility 0.3s ease;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-shell[data-summary-open="yes"]
	.eilmo-cf-summary {
		transform: translateY(0);

		visibility: visible;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary__drawer-handle {
		display: flex;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary__close {
		display: flex;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-backdrop {
		display: block;

		/*
		 * Local backdrop layer.
		 * Must stay below .eilmo-cf-summary (z-index: 2).
		 */
		z-index: 1 !important;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-shell[data-summary-open="yes"]
	.eilmo-cf-summary-backdrop {
		opacity: 1;

		visibility: visible;

		pointer-events: auto;
	}

	/* ----------------------------------------------------------------------
	   Mobile fixed summary bar
	   ---------------------------------------------------------------------- */

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-bar {
		position: fixed;

		right: 10px;
		bottom:
			calc(
				10px +
				env(safe-area-inset-bottom)
			);
		left: 10px;

		z-index: var(--eilmo-cf-summary-z-index);

		display: flex;

		gap: 12px;

		align-items: center;
		justify-content: space-between;

		min-height: var(--eilmo-cf-mobile-bar-height);

		padding: 10px 12px;

		border: 1px solid var(--eilmo-cf-border);
		border-radius: 14px;

		background: var(--eilmo-cf-background);
		color: var(--eilmo-cf-text);

		box-shadow:
			0 8px 30px rgb(17 24 39 / 20%);

		cursor: pointer;

		text-align: left;
	}

	.eilmo-cf-checkout[data-summary-mobile="bottom_drawer"]
	.eilmo-cf-summary-shell[data-summary-open="yes"]
	.eilmo-cf-summary-bar {
		opacity: 0;

		pointer-events: none;

		transform: translateY(130%);
	}

	.eilmo-cf-summary-bar__totals {
		display: flex;

		flex: 1 1 auto;

		gap: 14px;

		align-items: center;

		min-width: 0;
	}

	.eilmo-cf-summary-bar__primary,
	.eilmo-cf-summary-bar__secondary {
		display: flex;
		flex-direction: column;

		gap: 1px;
	}

	.eilmo-cf-summary-bar__label,
	.eilmo-cf-summary-bar__secondary-label {
		color: var(--eilmo-cf-muted-text);

		font-size: 10px;
	}

	.eilmo-cf-summary-bar__amount {
		color: var(--eilmo-cf-primary);

		font-size: 16px;
		font-weight: 800;

		white-space: nowrap;
	}

	.eilmo-cf-summary-bar__secondary-amount {
		color: var(--eilmo-cf-accent);

		font-size: 13px;
		font-weight: 700;

		white-space: nowrap;
	}

	.eilmo-cf-summary-bar__action {
		display: inline-flex;

		gap: 6px;

		align-items: center;

		color: var(--eilmo-cf-accent);

		font-size: 12px;
		font-weight: 700;

		white-space: nowrap;
	}

	.eilmo-cf-summary-bar__arrow {
		display: inline-flex;

		align-items: center;
		justify-content: center;

		width: 22px;
		height: 22px;

		border-radius: 999px;

		background: var(--eilmo-cf-soft-background);
	}
}

/* ==========================================================================
   Very small mobile
   ========================================================================== */

@media (max-width: 420px) {

	.eilmo-cf-variable-product {
		padding: 8px;
	}

	.eilmo-cf-variable-product__variations {
		gap: 6px;
	}

	.eilmo-cf-product-card--variation {
		grid-template-columns: 46px minmax(0, 1fr);

		gap: 7px;

		padding: 8px;
	}

	.eilmo-cf-product-card--variation
	.eilmo-cf-product-card__thumbnail {
		width: 46px;
		height: 46px;
	}

	.eilmo-cf-summary-bar__secondary {
		display: none;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.eilmo-cf-checkout button:focus-visible,
.eilmo-cf-checkout a:focus-visible,
.eilmo-cf-checkout input:focus-visible,
.eilmo-cf-checkout select:focus-visible,
.eilmo-cf-checkout textarea:focus-visible {
	outline: 2px solid var(--eilmo-cf-accent);

	outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.eilmo-cf-checkout *,
	.eilmo-cf-checkout *::before,
	.eilmo-cf-checkout *::after {
		transition-duration: 0.01ms !important;

		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}



/* ==========================================================================
   Delivery Methods
   ========================================================================== */

.eilmo-cf-delivery {
	--eilmo-cf-delivery-border: #e5e7eb;
	--eilmo-cf-delivery-border-hover: #b8c4d6;
	--eilmo-cf-delivery-primary: #2563eb;
	--eilmo-cf-delivery-primary-soft: #eff6ff;
	--eilmo-cf-delivery-text: #111827;
	--eilmo-cf-delivery-muted: #6b7280;
	--eilmo-cf-delivery-bg: #ffffff;
	--eilmo-cf-delivery-free: #15803d;
	--eilmo-cf-delivery-free-bg: #f0fdf4;
	--eilmo-cf-delivery-danger: #dc2626;

	width: 100%;
	margin: 28px 0;
	padding: 0;
	box-sizing: border-box;
}

.eilmo-cf-delivery *,
.eilmo-cf-delivery *::before,
.eilmo-cf-delivery *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   Header
   ========================================================================== */

.eilmo-cf-delivery__header {
	margin: 0 0 16px;
}

.eilmo-cf-delivery__title {
	display: flex;
	align-items: center;
	gap: 4px;

	margin: 0;
	padding: 0;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;

	color: var(--eilmo-cf-delivery-text);
}

.eilmo-cf-delivery__required {
	color: var(--eilmo-cf-delivery-danger);
	font-weight: 700;
}


/* ==========================================================================
   Methods Grid
   ========================================================================== */

.eilmo-cf-delivery__methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;

	width: 100%;
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Delivery Method Card
   ========================================================================== */

.eilmo-cf-delivery-method {
	position: relative;

	display: flex;
	align-items: flex-start;
	gap: 12px;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 16px;

	border: 1px solid var(--eilmo-cf-delivery-border);
	border-radius: 12px;

	background: var(--eilmo-cf-delivery-bg);

	color: var(--eilmo-cf-delivery-text);

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.eilmo-cf-delivery-method:hover {
	border-color: var(--eilmo-cf-delivery-border-hover);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.eilmo-cf-delivery-method--selected {
	border-color: var(--eilmo-cf-delivery-primary);
	background: var(--eilmo-cf-delivery-primary-soft);
	box-shadow: 0 0 0 1px var(--eilmo-cf-delivery-primary);
}

.eilmo-cf-delivery-method--selected:hover {
	border-color: var(--eilmo-cf-delivery-primary);
}


/* ==========================================================================
   Native Radio Input
   ========================================================================== */

.eilmo-cf-delivery-method__input {
	position: absolute;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);

	border: 0;

	white-space: nowrap;
}

.eilmo-cf-delivery-method:has(
	.eilmo-cf-delivery-method__input:focus-visible
) {
	outline: 2px solid var(--eilmo-cf-delivery-primary);
	outline-offset: 3px;
}


/* ==========================================================================
   Custom Radio
   ========================================================================== */

.eilmo-cf-delivery-method__radio {
	position: relative;
	flex: 0 0 auto;

	width: 20px;
	height: 20px;

	margin-top: 1px;

	border: 2px solid #cbd5e1;
	border-radius: 50%;

	background: #ffffff;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.eilmo-cf-delivery-method--selected
	.eilmo-cf-delivery-method__radio {
	border-color: var(--eilmo-cf-delivery-primary);
}

.eilmo-cf-delivery-method--selected
	.eilmo-cf-delivery-method__radio::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 10px;
	height: 10px;

	border-radius: 50%;

	background: var(--eilmo-cf-delivery-primary);

	transform: translate(-50%, -50%);
}


/* ==========================================================================
   Method Content
   ========================================================================== */

.eilmo-cf-delivery-method__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;

	min-width: 0;
}

.eilmo-cf-delivery-method__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;

	width: 100%;
}

.eilmo-cf-delivery-method__label {
	min-width: 0;

	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;

	color: var(--eilmo-cf-delivery-text);

	word-break: break-word;
}

.eilmo-cf-delivery-method__price {
	flex: 0 0 auto;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;

	color: var(--eilmo-cf-delivery-text);

	white-space: nowrap;
}


/* ==========================================================================
   Free Delivery
   ========================================================================== */

.eilmo-cf-delivery-method--free
	.eilmo-cf-delivery-method__price {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;

	padding: 3px 10px;

	border-radius: 999px;

	background: var(--eilmo-cf-delivery-free-bg);

	color: var(--eilmo-cf-delivery-free);

	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.eilmo-cf-delivery-method--selected.eilmo-cf-delivery-method--free {
	border-color: var(--eilmo-cf-delivery-primary);
}


/* ==========================================================================
   Description
   ========================================================================== */

.eilmo-cf-delivery-method__description {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;

	color: var(--eilmo-cf-delivery-muted);
}

.eilmo-cf-delivery-method__description p {
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Empty / Error States
   ========================================================================== */

.eilmo-cf-delivery__notice {
	width: 100%;

	padding: 14px 16px;

	border: 1px solid var(--eilmo-cf-delivery-border);
	border-radius: 10px;

	background: #f8fafc;

	font-size: 14px;
	line-height: 1.5;

	color: var(--eilmo-cf-delivery-muted);
}

.eilmo-cf-delivery__error {
	margin-top: 10px;

	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;

	color: var(--eilmo-cf-delivery-danger);
}

.eilmo-cf-delivery--has-error
	.eilmo-cf-delivery-method {
	border-color: rgba(220, 38, 38, 0.35);
}


/* ==========================================================================
   Disabled State
   ========================================================================== */

.eilmo-cf-delivery-method:has(
	.eilmo-cf-delivery-method__input:disabled
) {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}


/* ==========================================================================
   Dynamic Hide Other Methods
   ========================================================================== */

.eilmo-cf-delivery-method[hidden],
.eilmo-cf-delivery__notice[hidden],
.eilmo-cf-delivery__error[hidden] {
	display: none !important;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {

	.eilmo-cf-delivery {
		margin: 24px 0;
	}

	.eilmo-cf-delivery__title {
		font-size: 19px;
	}

	.eilmo-cf-delivery-method {
		padding: 15px;
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

	.eilmo-cf-delivery {
		margin: 22px 0;
	}

	.eilmo-cf-delivery__header {
		margin-bottom: 12px;
	}

	.eilmo-cf-delivery__title {
		font-size: 18px;
	}

	.eilmo-cf-delivery__methods {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.eilmo-cf-delivery-method {
		gap: 10px;

		padding: 14px;

		border-radius: 10px;
	}

	.eilmo-cf-delivery-method__radio {
		width: 19px;
		height: 19px;
	}

	.eilmo-cf-delivery-method--selected
		.eilmo-cf-delivery-method__radio::after {
		width: 9px;
		height: 9px;
	}

	.eilmo-cf-delivery-method__top {
		gap: 10px;
	}

	.eilmo-cf-delivery-method__label,
	.eilmo-cf-delivery-method__price {
		font-size: 14px;
	}

	.eilmo-cf-delivery-method--free
		.eilmo-cf-delivery-method__price {
		min-height: 26px;

		padding: 3px 9px;

		font-size: 12px;
	}
}


/* ==========================================================================
   Small Mobile
   ========================================================================== */

@media (max-width: 420px) {

	.eilmo-cf-delivery-method {
		padding: 13px;
	}

	.eilmo-cf-delivery-method__top {
		align-items: center;
	}

	.eilmo-cf-delivery-method__label {
		font-size: 14px;
	}

	.eilmo-cf-delivery-method__description {
		font-size: 12px;
	}
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.eilmo-cf-delivery-method,
	.eilmo-cf-delivery-method__radio {
		transition: none;
	}
}


/**
 * Advance Payment.
 *
 * @package EilmoCheckout
 */

.eilmo-cf-advance-payment {
	margin-top: 32px;
}

.eilmo-cf-advance-payment__header {
	margin-bottom: 18px;
}

.eilmo-cf-advance-payment__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #111827;
}

/**
 * Payment option grid.
 */
.eilmo-cf-advance-payment__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/**
 * Payment option card.
 */
.eilmo-cf-advance-payment-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 20px;
	border: 1px solid #d9dee8;
	border-radius: 14px;
	background: #ffffff;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.eilmo-cf-advance-payment-option:hover {
	border-color: #9dbaf7;
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}

/**
 * Selected card.
 */
.eilmo-cf-advance-payment-option--selected {
	border-color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 1px #2563eb;
}

/**
 * Native radio hidden visually.
 */
.eilmo-cf-advance-payment-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Custom radio.
 */
.eilmo-cf-advance-payment-option__radio {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	background: #ffffff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.eilmo-cf-advance-payment-option--selected
	.eilmo-cf-advance-payment-option__radio {
	border-color: #2563eb;
}

.eilmo-cf-advance-payment-option--selected
	.eilmo-cf-advance-payment-option__radio::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2563eb;
	transform: translate(-50%, -50%);
}

/**
 * Focus accessibility.
 */
.eilmo-cf-advance-payment-option:has(
		.eilmo-cf-advance-payment-option__input:focus-visible
	) {
	outline: 3px solid rgba(37, 99, 235, 0.18);
	outline-offset: 2px;
}

/**
 * Content.
 */
.eilmo-cf-advance-payment-option__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 8px;
}

.eilmo-cf-advance-payment-option__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
}

.eilmo-cf-advance-payment-option__heading {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

/**
 * Main label.
 */
.eilmo-cf-advance-payment-option__label {
	font-size: 17px;
	font-weight: 650;
	line-height: 1.4;
	color: #111827;
}

.eilmo-cf-advance-payment-option__inline-amount {
	font-size: inherit;
	font-weight: 750;
	color: #111827;
}

/**
 * Right-side amount.
 */
.eilmo-cf-advance-payment-option__amount {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #111827;
	white-space: nowrap;
}

/**
 * Description.
 */
.eilmo-cf-advance-payment-option__description {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #64748b;
}

/**
 * Full-payment discount badge.
 */
.eilmo-cf-advance-payment-option__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 4px 9px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.eilmo-cf-advance-payment-option__badge[hidden] {
	display: none !important;
}

/**
 * Saving message.
 */
.eilmo-cf-advance-payment-option__saving {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: #15803d;
}

.eilmo-cf-advance-payment-option__saving[hidden] {
	display: none !important;
}

/**
 * Full-payment discount card.
 */
.eilmo-cf-advance-payment-option--full.eilmo-cf-advance-payment-option--discount {
	border-color: #bbf7d0;
}

.eilmo-cf-advance-payment-option--full.eilmo-cf-advance-payment-option--discount:hover {
	border-color: #86efac;
}

.eilmo-cf-advance-payment-option--full.eilmo-cf-advance-payment-option--discount.eilmo-cf-advance-payment-option--selected {
	border-color: #2563eb;
}

/**
 * Validation error.
 */
.eilmo-cf-advance-payment__error {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 13px;
	line-height: 1.45;
}

.eilmo-cf-advance-payment__error[hidden] {
	display: none !important;
}

/**
 * Old details block safety.
 *
 * The latest renderer no longer outputs Pay Now /
 * Remaining Due here because those values belong
 * in the checkout summary.
 */
.eilmo-cf-advance-payment__details {
	display: none !important;
}

/**
 * Tablet.
 */
@media (max-width: 1024px) {

	.eilmo-cf-advance-payment__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.eilmo-cf-advance-payment-option {
		padding: 17px;
	}

	.eilmo-cf-advance-payment-option__top {
		flex-direction: column;
		gap: 6px;
	}

	.eilmo-cf-advance-payment-option__amount {
		font-size: 16px;
	}
}

/**
 * Mobile.
 */
@media (max-width: 767px) {

	.eilmo-cf-advance-payment {
		margin-top: 24px;
	}

	.eilmo-cf-advance-payment__header {
		margin-bottom: 14px;
	}

	.eilmo-cf-advance-payment__title {
		font-size: 21px;
	}

	.eilmo-cf-advance-payment__options {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.eilmo-cf-advance-payment-option {
		gap: 12px;
		padding: 16px;
		border-radius: 12px;
	}

	.eilmo-cf-advance-payment-option__radio {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
	}

	.eilmo-cf-advance-payment-option--selected
		.eilmo-cf-advance-payment-option__radio::after {
		width: 9px;
		height: 9px;
	}

	.eilmo-cf-advance-payment-option__top {
		flex-direction: column;
		gap: 5px;
	}

	.eilmo-cf-advance-payment-option__heading {
		gap: 6px;
	}

	.eilmo-cf-advance-payment-option__label {
		font-size: 16px;
	}

	.eilmo-cf-advance-payment-option__amount {
		font-size: 16px;
	}

	.eilmo-cf-advance-payment-option__description {
		font-size: 13px;
		line-height: 1.5;
	}

	.eilmo-cf-advance-payment-option__saving {
		font-size: 12px;
	}

	.eilmo-cf-advance-payment-option__badge {
		min-height: 24px;
		padding: 3px 8px;
		font-size: 11px;
	}
}


/**
 * Automatic Discount Notice.
 */
.eilmo-cf-checkout__discount-notice {
	margin: 18px 0;
}

.eilmo-cf-discount-notice {
	padding: 16px 18px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
}

/**
 * Title.
 */
.eilmo-cf-discount-notice__title {
	margin: 0 0 12px;
	color: #111827;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

/**
 * Discount tiers.
 */
.eilmo-cf-discount-notice__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/**
 * Individual tier.
 */
.eilmo-cf-discount-notice__tier {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 145px;
	padding: 8px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
	color: #4b5563;
	font-size: 13px;
	line-height: 1.3;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

.eilmo-cf-discount-notice__range {
	white-space: nowrap;
}

.eilmo-cf-discount-notice__discount {
	color: #111827;
	font-weight: 700;
	white-space: nowrap;
}

/**
 * Completed tier.
 */
.eilmo-cf-discount-notice__tier--completed {
	border-color: #bbf7d0;
	background: #f0fdf4;
}

/**
 * Currently active tier.
 */
.eilmo-cf-discount-notice__tier--active {
	border-color: #22c55e;
	background: #f0fdf4;
	color: #166534;
}

.eilmo-cf-discount-notice__tier--active
	.eilmo-cf-discount-notice__discount {
	color: #15803d;
}

/**
 * Next available tier.
 */
.eilmo-cf-discount-notice__tier--next {
	border-color: #bfdbfe;
	background: #eff6ff;
}

.eilmo-cf-discount-notice__tier--next
	.eilmo-cf-discount-notice__discount {
	color: #2563eb;
}

/**
 * Dynamic status.
 */
.eilmo-cf-discount-notice__status {
	margin-top: 10px;
	color: #6b7280;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

.eilmo-cf-discount-notice__status[hidden] {
	display: none !important;
}

/**
 * Mobile.
 */
@media (max-width: 767px) {

	.eilmo-cf-checkout__discount-notice {
		margin: 14px 0;
	}

	.eilmo-cf-discount-notice {
		padding: 14px;
		border-radius: 10px;
	}

	.eilmo-cf-discount-notice__title {
		margin-bottom: 10px;
		font-size: 15px;
	}

	.eilmo-cf-discount-notice__tiers {
		display: grid;
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.eilmo-cf-discount-notice__tier {
		width: 100%;
		min-width: 0;
		padding: 8px 10px;
		font-size: 12px;
	}

	.eilmo-cf-discount-notice__status {
		margin-top: 9px;
		font-size: 12px;
	}
}


/* =========================================================
 * Coupon
 * ======================================================= */

.eilmo-cf-summary__coupon {
	width: 100%;
	margin: 14px 0 2px;
}

.eilmo-cf-coupon {
	width: 100%;
}

.eilmo-cf-coupon__header {
	margin-bottom: 10px;
}

.eilmo-cf-coupon__title {
	margin: 0 0 3px;
	color: #111827;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.eilmo-cf-coupon__description {
	margin: 0;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.5;
}

.eilmo-cf-coupon__form {
	width: 100%;
}

.eilmo-cf-coupon__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.eilmo-cf-coupon__controls {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 8px;
}

.eilmo-cf-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 13px;
	margin: 0;

	border: 1px solid #d1d5db !important;
	border-radius: 8px;

	background: #ffffff;
	color: #111827;

	outline: none !important;
	box-shadow: none !important;

	-webkit-appearance: none;
	appearance: none;

	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.eilmo-cf-coupon__input:hover {
	border-color: #9ca3af !important;
}

.eilmo-cf-coupon__input:focus,
.eilmo-cf-coupon__input:focus-visible {
	border-color: #2563eb !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10) !important;
}

.eilmo-cf-coupon__apply {
	flex: 0 0 auto;
	min-width: 104px;
	height: 42px;
	padding: 0 15px;
	margin: 0;
	border: 1px solid #111827;
	border-radius: 8px;
	background: #111827;
	color: #ffffff;
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease;
}

.eilmo-cf-coupon__apply:hover {
	border-color: #1f2937;
	background: #1f2937;
}

.eilmo-cf-coupon__apply:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.eilmo-cf-coupon__apply:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}


/* =========================================================
 * Applied Coupon
 * ======================================================= */

.eilmo-cf-coupon__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 11px;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	background: #f0fdf4;
}

.eilmo-cf-coupon__applied[hidden] {
	display: none !important;
}

.eilmo-cf-coupon__applied-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-width: 0;
	gap: 5px 8px;
}

.eilmo-cf-coupon__applied-code {
	color: #166534;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.eilmo-cf-coupon__applied-discount {
	color: #15803d;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.eilmo-cf-coupon__remove {
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #dc2626;
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.eilmo-cf-coupon__remove:hover {
	color: #b91c1c;
	text-decoration: underline;
}

.eilmo-cf-coupon__remove:focus-visible {
	outline: 2px solid #dc2626;
	outline-offset: 2px;
}


/* =========================================================
 * Coupon Message
 * ======================================================= */

.eilmo-cf-coupon__message {
	margin-top: 7px;
	color: #6b7280;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.eilmo-cf-coupon__message[hidden] {
	display: none !important;
}

.eilmo-cf-coupon__message--success {
	color: #15803d;
}

.eilmo-cf-coupon__message--error {
	color: #dc2626;
}


/* =========================================================
 * Loading State
 * ======================================================= */

.eilmo-cf-coupon.is-loading .eilmo-cf-coupon__input,
.eilmo-cf-coupon.is-loading .eilmo-cf-coupon__apply {
	pointer-events: none;
}

.eilmo-cf-coupon.is-loading .eilmo-cf-coupon__apply {
	opacity: 0.65;
}


/* =========================================================
 * Summary Coupon Separator Spacing
 * ======================================================= */

.eilmo-cf-summary__coupon + .eilmo-cf-summary__separator {
	margin-top: 16px;
}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 767px) {

	.eilmo-cf-summary__coupon {
		margin-top: 12px;
	}

	.eilmo-cf-coupon__controls {
		gap: 7px;
	}

	.eilmo-cf-coupon__input {
		height: 44px;
		font-size: 13px;
	}

	.eilmo-cf-coupon__apply {
		min-width: 96px;
		height: 44px;
		padding-right: 12px;
		padding-left: 12px;
	}

	.eilmo-cf-coupon__applied {
		padding: 10px;
	}

}


/* =========================================================
 * Very Small Mobile
 * ======================================================= */

@media (max-width: 420px) {

	.eilmo-cf-coupon__controls {
		flex-direction: column;
	}

	.eilmo-cf-coupon__apply {
		width: 100%;
	}

}



/* ==========================================================================
   Customer Information - Premium UI
   ========================================================================== */

.eilmo-cf-checkout__customer-information {
	margin-top: 24px;
}

.eilmo-cf-customer-form {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 24px;
	overflow: hidden;
	border: 1px solid #e6eaf0;
	border-radius: 16px;
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.02),
		0 8px 24px rgba(15, 23, 42, 0.035);
	box-sizing: border-box;
}

.eilmo-cf-customer-form *,
.eilmo-cf-customer-form *::before,
.eilmo-cf-customer-form *::after {
	box-sizing: border-box;
}

/* Header
--------------------------------------------- */

.eilmo-cf-customer-form .eilmo-cf-customer-form__header {
	position: relative;
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid #eef1f5;
}

.eilmo-cf-customer-form h3.eilmo-cf-customer-form__title {
	margin: 0;
	padding: 0;
	color: #172033;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.eilmo-cf-customer-form p.eilmo-cf-customer-form__description {
	max-width: 680px;
	margin: 6px 0 0;
	padding: 0;
	color: #758195;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
}

/* Fields Grid
--------------------------------------------- */

.eilmo-cf-customer-form .eilmo-cf-customer-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	width: 100%;
}

.eilmo-cf-customer-form[data-layout="one_column"]
	.eilmo-cf-customer-form__fields {
	grid-template-columns: minmax(0, 1fr);
}

.eilmo-cf-customer-form .eilmo-cf-customer-field {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.eilmo-cf-customer-form .eilmo-cf-customer-field--full {
	grid-column: 1 / -1;
}

.eilmo-cf-customer-form .eilmo-cf-customer-field--half {
	grid-column: span 1;
}

.eilmo-cf-customer-form[data-layout="one_column"]
	.eilmo-cf-customer-field--half,
.eilmo-cf-customer-form[data-layout="one_column"]
	.eilmo-cf-customer-field--full {
	grid-column: 1 / -1;
}

/* Labels
--------------------------------------------- */

.eilmo-cf-customer-form label.eilmo-cf-customer-field__label {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0 0 7px;
	padding: 0;
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

.eilmo-cf-customer-form
	label.eilmo-cf-customer-field__label
	.eilmo-cf-customer-field__required {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: #e5484d;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* Base Text Input
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control {
	display: block;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 14px;

	border: 1px solid #d9dee7;
	border-radius: 10px;

	background: #fbfcfe;
	color: #182234;

	outline: none;
	box-shadow: none;

	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;

	-webkit-appearance: none;
	appearance: none;

	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

/* Select
--------------------------------------------- */

.eilmo-cf-customer-form
	select.eilmo-cf-customer-field__control {
	display: block;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 38px 0 14px;

	border: 1px solid #d9dee7;
	border-radius: 10px;

	background-color: #fbfcfe;
	color: #182234;

	outline: none;
	box-shadow: none;

	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;

	cursor: pointer;

	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

/* Textarea
--------------------------------------------- */

.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 100px;
	margin: 0;
	padding: 13px 14px;

	border: 1px solid #d9dee7;
	border-radius: 10px;

	background: #fbfcfe;
	color: #182234;

	outline: none;
	box-shadow: none;

	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;

	resize: vertical;

	-webkit-appearance: none;
	appearance: none;

	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

/* Placeholder
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control::placeholder,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control::placeholder,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control::placeholder,
.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control::placeholder {
	color: #9aa4b4;
	opacity: 1;
}

/* Hover
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control:hover,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control:hover,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control:hover,
.eilmo-cf-customer-form
	select.eilmo-cf-customer-field__control:hover,
.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control:hover {
	border-color: #b8c1ce;
	background: #ffffff;
}

/* Focus
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control:focus-visible,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control:focus-visible,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control:focus-visible,
.eilmo-cf-customer-form
	select.eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	select.eilmo-cf-customer-field__control:focus-visible,
.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control:focus-visible {
	border-color: #3b82f6;
	background: #ffffff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09);
}

/* Disabled
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control:disabled,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control:disabled,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control:disabled,
.eilmo-cf-customer-form
	select.eilmo-cf-customer-field__control:disabled,
.eilmo-cf-customer-form
	textarea.eilmo-cf-customer-field__control:disabled {
	cursor: not-allowed;
	border-color: #e4e7ec;
	background: #f6f7f9;
	color: #98a2b3;
	opacity: 1;
}

/* Validation
--------------------------------------------- */

.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="text"].eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="email"].eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="tel"].eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	select.eilmo-cf-customer-field__control,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	textarea.eilmo-cf-customer-field__control {
	border-color: #e5484d;
	background: #fffdfd;
}

.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="text"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="email"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	input[type="tel"].eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	select.eilmo-cf-customer-field__control:focus,
.eilmo-cf-customer-form
	.eilmo-cf-customer-field--invalid
	textarea.eilmo-cf-customer-field__control:focus {
	border-color: #e5484d;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.08);
}

/* Field Error
--------------------------------------------- */

.eilmo-cf-customer-form
	span.eilmo-cf-customer-field__error {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	color: #d92d20;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.eilmo-cf-customer-form
	span.eilmo-cf-customer-field__error[hidden] {
	display: none;
}

/* General Form Error
--------------------------------------------- */

.eilmo-cf-customer-form
	div.eilmo-cf-customer-form__error {
	margin: 18px 0 0;
	padding: 11px 13px;

	border: 1px solid #fecaca;
	border-radius: 9px;

	background: #fff7f7;
	color: #b42318;

	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.eilmo-cf-customer-form
	div.eilmo-cf-customer-form__error[hidden] {
	display: none;
}

/* Autofill
--------------------------------------------- */

.eilmo-cf-customer-form
	input[type="text"].eilmo-cf-customer-field__control:-webkit-autofill,
.eilmo-cf-customer-form
	input[type="email"].eilmo-cf-customer-field__control:-webkit-autofill,
.eilmo-cf-customer-form
	input[type="tel"].eilmo-cf-customer-field__control:-webkit-autofill {
	-webkit-text-fill-color: #182234;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
	box-shadow: 0 0 0 1000px #ffffff inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* Hidden Field
--------------------------------------------- */

.eilmo-cf-customer-form input[type="hidden"] {
	display: none;
}

/* Tablet
--------------------------------------------- */

@media (max-width: 1024px) {

	.eilmo-cf-checkout__customer-information {
		margin-top: 20px;
	}

	.eilmo-cf-customer-form {
		padding: 22px;
		border-radius: 14px;
	}

	.eilmo-cf-customer-form
		.eilmo-cf-customer-form__fields {
		gap: 17px 18px;
	}
}

/* Mobile
--------------------------------------------- */

@media (max-width: 767px) {

	.eilmo-cf-checkout__customer-information {
		margin-top: 18px;
	}

	.eilmo-cf-customer-form {
		padding: 18px 16px;
		border-radius: 13px;
		box-shadow:
			0 1px 2px rgba(15, 23, 42, 0.02),
			0 5px 18px rgba(15, 23, 42, 0.025);
	}

	.eilmo-cf-customer-form
		.eilmo-cf-customer-form__header {
		margin-bottom: 18px;
		padding-bottom: 15px;
	}

	.eilmo-cf-customer-form
		h3.eilmo-cf-customer-form__title {
		font-size: 16px;
	}

	.eilmo-cf-customer-form
		p.eilmo-cf-customer-form__description {
		margin-top: 5px;
		font-size: 12.5px;
	}

	.eilmo-cf-customer-form
		.eilmo-cf-customer-form__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 15px;
	}

	.eilmo-cf-customer-form
		.eilmo-cf-customer-field--half,
	.eilmo-cf-customer-form
		.eilmo-cf-customer-field--full {
		grid-column: 1 / -1;
	}

	.eilmo-cf-customer-form
		label.eilmo-cf-customer-field__label {
		margin-bottom: 6px;
		font-size: 12.5px;
	}

	/*
	 * 16px avoids Safari automatic zoom.
	 */
	.eilmo-cf-customer-form
		input[type="text"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		input[type="email"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		input[type="tel"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		select.eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		textarea.eilmo-cf-customer-field__control {
		font-size: 16px;
	}

	.eilmo-cf-customer-form
		input[type="text"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		input[type="email"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		input[type="tel"].eilmo-cf-customer-field__control,
	.eilmo-cf-customer-form
		select.eilmo-cf-customer-field__control {
		height: 46px;
	}

	.eilmo-cf-customer-form
		textarea.eilmo-cf-customer-field__control {
		min-height: 90px;
	}
}


/* ==========================================================
 * Payment Methods
 * ========================================================== */

.eilmo-cf-checkout__payment-methods {
	width: 100%;
	margin: 20px 0 0;
}

.eilmo-cf-payment-methods {
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	margin: 0;
	background: #ffffff;
	border: 1px solid #e6eaf0;
	border-radius: 16px;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 6px 18px rgba(16, 24, 40, 0.04);
}

.eilmo-cf-payment-methods *,
.eilmo-cf-payment-methods *::before,
.eilmo-cf-payment-methods *::after {
	box-sizing: border-box;
}


/* ==========================================================
 * Header
 * ========================================================== */

.eilmo-cf-payment-methods__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 0 16px;
	margin: 0 0 18px;
	border-bottom: 1px solid #edf0f4;
}

.eilmo-cf-payment-methods__title {
	padding: 0;
	margin: 0;
	color: #172033;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}


/* ==========================================================
 * Payment Method List
 * ========================================================== */

.eilmo-cf-payment-methods__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
}


/* ==========================================================
 * Payment Method Card
 * ========================================================== */

.eilmo-cf-payment-method {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #dfe4eb;
	border-radius: 12px;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
}

.eilmo-cf-payment-method:hover {
	border-color: #b8c1ce;
}

.eilmo-cf-payment-method.is-selected {
	background: #ffffff;
	border-color: #3b82f6;
	box-shadow:
		0 0 0 3px rgba(59, 130, 246, 0.08),
		0 4px 12px rgba(16, 24, 40, 0.04);
}


/* ==========================================================
 * Payment Choice
 * ========================================================== */

.eilmo-cf-payment-method__choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-width: 0;
	padding: 16px;
	margin: 0;
	color: #172033;
	cursor: pointer;
	background: transparent;
	border: 0;
}


/* ==========================================================
 * Native Radio
 * ========================================================== */

.eilmo-cf-payment-method input[type="radio"].eilmo-cf-payment-method__radio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}


/* ==========================================================
 * Custom Radio Indicator
 * ========================================================== */

.eilmo-cf-payment-method__indicator {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: #ffffff;
	border: 1.5px solid #b8c1ce;
	border-radius: 50%;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.eilmo-cf-payment-method__indicator::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: #3b82f6;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.5);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.eilmo-cf-payment-method input[type="radio"].eilmo-cf-payment-method__radio:checked
	+ .eilmo-cf-payment-method__indicator {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.eilmo-cf-payment-method input[type="radio"].eilmo-cf-payment-method__radio:checked
	+ .eilmo-cf-payment-method__indicator::after {
	opacity: 1;
	transform: scale(1);
}

.eilmo-cf-payment-method input[type="radio"].eilmo-cf-payment-method__radio:focus-visible
	+ .eilmo-cf-payment-method__indicator {
	border-color: #3b82f6;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}


/* ==========================================================
 * Method Content
 * ========================================================== */

.eilmo-cf-payment-method__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.eilmo-cf-payment-method__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.eilmo-cf-payment-method__title {
	display: block;
	min-width: 0;
	color: #172033;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.45;
	word-break: break-word;
}

.eilmo-cf-payment-method__description {
	display: block;
	max-width: 620px;
	color: #667085;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
}


/* ==========================================================
 * Payment Icons
 * ========================================================== */

.eilmo-cf-payment-method .eilmo-cf-payment-method__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 110px;
	min-height: 24px;
}

.eilmo-cf-payment-method .eilmo-cf-payment-method__icon img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 30px;
	margin: 0;
	padding: 0;
	object-fit: contain;
	border: 0;
	box-shadow: none !important;
}


/* ==========================================================
 * Expanded Method Details
 * ========================================================== */

.eilmo-cf-payment-method__details {
	width: auto;
	margin: 0 16px 16px 48px;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e8edf3;
	border-radius: 10px;
}

.eilmo-cf-payment-method__details[hidden] {
	display: none !important;
}


/* ==========================================================
 * Manual Account Information
 * ========================================================== */

.eilmo-cf-payment-method__account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	width: 100%;
	padding: 0;
	margin: 0;
}

.eilmo-cf-payment-method__account-label {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.eilmo-cf-payment-method__account-value {
	color: #172033;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	word-break: break-word;
}


/* ==========================================================
 * Instructions
 * ========================================================== */

.eilmo-cf-payment-method__instructions {
	width: 100%;
	padding: 0;
	margin: 10px 0 0;
	color: #667085;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.eilmo-cf-payment-method__account
	+ .eilmo-cf-payment-method__instructions {
	padding-top: 10px;
	border-top: 1px solid #e8edf3;
}


/* ==========================================================
 * Transaction Field
 * ========================================================== */

.eilmo-cf-payment-method__transaction {
	width: 100%;
	padding: 0;
	margin: 14px 0 0;
}

.eilmo-cf-payment-method__transaction-label {
	display: block;
	padding: 0;
	margin: 0 0 7px;
	color: #344054;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.eilmo-cf-payment-method__required {
	margin-left: 2px;
	color: #e5484d;
}


/*
 * Explicit input type selector.
 * Helps prevent WooCommerce/theme input styles
 * from overriding the Eilmo payment field.
 */
.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input {
	display: block;
	width: 100% !important;
	min-width: 0;
	height: 46px !important;
	padding: 0 13px !important;
	margin: 0 !important;
	color: #172033 !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 44px;
	background: #ffffff !important;
	border: 1px solid #d9dee7 !important;
	border-radius: 10px !important;
	outline: none !important;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
}

.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input::placeholder {
	color: #98a2b3;
	opacity: 1;
}

.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:hover {
	background: #ffffff !important;
	border-color: #b8c1ce !important;
}

.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:focus,
.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:focus-visible {
	background: #ffffff !important;
	border-color: #3b82f6 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09) !important;
}

.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input[aria-invalid="true"] {
	border-color: #e5484d !important;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.08) !important;
}


/* ==========================================================
 * Transaction Field Autofill
 * ========================================================== */

.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:-webkit-autofill,
.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:-webkit-autofill:hover,
.eilmo-cf-payment-method
	input[type="text"].eilmo-cf-payment-method__transaction-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #172033;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	transition: background-color 9999s ease-in-out 0s;
}


/* ==========================================================
 * WooCommerce Gateway Fields
 * ========================================================== */

.eilmo-cf-payment-method__gateway-fields {
	width: 100%;
	padding: 0;
	margin: 0;
	color: #475467;
	font-size: 13px;
	line-height: 1.55;
}

.eilmo-cf-payment-method__account
	+ .eilmo-cf-payment-method__gateway-fields,
.eilmo-cf-payment-method__instructions
	+ .eilmo-cf-payment-method__gateway-fields {
	margin-top: 14px;
}

.eilmo-cf-payment-method__gateway-fields p {
	margin: 0 0 10px;
	color: #667085;
	font-size: 13px;
	line-height: 1.55;
}

.eilmo-cf-payment-method__gateway-fields p:last-child {
	margin-bottom: 0;
}


/*
 * WooCommerce / third-party gateway text inputs.
 */
.eilmo-cf-payment-method__gateway-fields input[type="text"],
.eilmo-cf-payment-method__gateway-fields input[type="email"],
.eilmo-cf-payment-method__gateway-fields input[type="tel"],
.eilmo-cf-payment-method__gateway-fields input[type="number"],
.eilmo-cf-payment-method__gateway-fields input[type="password"],
.eilmo-cf-payment-method__gateway-fields select,
.eilmo-cf-payment-method__gateway-fields textarea {
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	color: #172033;
	font-family: inherit;
	font-size: 14px;
	background: #ffffff;
	border: 1px solid #d9dee7;
	border-radius: 10px;
	outline: none;
	box-shadow: none;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.eilmo-cf-payment-method__gateway-fields input[type="text"],
.eilmo-cf-payment-method__gateway-fields input[type="email"],
.eilmo-cf-payment-method__gateway-fields input[type="tel"],
.eilmo-cf-payment-method__gateway-fields input[type="number"],
.eilmo-cf-payment-method__gateway-fields input[type="password"],
.eilmo-cf-payment-method__gateway-fields select {
	height: 46px;
	padding: 0 13px;
}

.eilmo-cf-payment-method__gateway-fields textarea {
	min-height: 96px;
	padding: 11px 13px;
	resize: vertical;
}

.eilmo-cf-payment-method__gateway-fields input[type="text"]:focus,
.eilmo-cf-payment-method__gateway-fields input[type="email"]:focus,
.eilmo-cf-payment-method__gateway-fields input[type="tel"]:focus,
.eilmo-cf-payment-method__gateway-fields input[type="number"]:focus,
.eilmo-cf-payment-method__gateway-fields input[type="password"]:focus,
.eilmo-cf-payment-method__gateway-fields select:focus,
.eilmo-cf-payment-method__gateway-fields textarea:focus {
	border-color: #3b82f6;
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09);
}


/*
 * WooCommerce form-row compatibility.
 */
.eilmo-cf-payment-method__gateway-fields .form-row {
	width: 100%;
	padding: 0;
	margin: 0 0 12px;
}

.eilmo-cf-payment-method__gateway-fields .form-row:last-child {
	margin-bottom: 0;
}

.eilmo-cf-payment-method__gateway-fields label {
	display: block;
	margin: 0 0 7px;
	color: #344054;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}


/* ==========================================================
 * Third-party Gateway Containers
 * ========================================================== */

.eilmo-cf-payment-method__gateway-fields iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	border: 0;
}

.eilmo-cf-payment-method__gateway-fields fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

.eilmo-cf-payment-method__gateway-fields ul,
.eilmo-cf-payment-method__gateway-fields ol {
	margin-top: 8px;
	margin-bottom: 8px;
}


/* ==========================================================
 * Errors
 * ========================================================== */

.eilmo-cf-payment-methods__error,
.eilmo-cf-payment-method__field-error {
	display: block;
	color: #e5484d;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
}

.eilmo-cf-payment-methods__error {
	padding: 10px 12px;
	margin: 14px 0 0;
	background: rgba(229, 72, 77, 0.05);
	border: 1px solid rgba(229, 72, 77, 0.14);
	border-radius: 8px;
}

.eilmo-cf-payment-method__field-error {
	margin: 6px 0 0;
}

.eilmo-cf-payment-methods__error[hidden],
.eilmo-cf-payment-method__field-error[hidden] {
	display: none !important;
}


/* ==========================================================
 * Empty State
 * ========================================================== */

.eilmo-cf-payment-methods__empty {
	width: 100%;
	padding: 15px 16px;
	margin: 0;
	color: #667085;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	background: #f8fafc;
	border: 1px dashed #d9dee7;
	border-radius: 10px;
}


/* ==========================================================
 * Disabled States
 * ========================================================== */

.eilmo-cf-payment-method input:disabled,
.eilmo-cf-payment-method select:disabled,
.eilmo-cf-payment-method textarea:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.eilmo-cf-payment-method:has(
	input[type="radio"].eilmo-cf-payment-method__radio:disabled
) {
	opacity: 0.65;
	cursor: not-allowed;
}

.eilmo-cf-payment-method:has(
	input[type="radio"].eilmo-cf-payment-method__radio:disabled
)
.eilmo-cf-payment-method__choice {
	cursor: not-allowed;
}


/* ==========================================================
 * Tablet
 * ========================================================== */

@media (max-width: 1024px) {

	.eilmo-cf-payment-methods {
		padding: 22px;
	}

	.eilmo-cf-payment-method__choice {
		padding: 15px;
	}

	.eilmo-cf-payment-method__details {
		margin-right: 15px;
		margin-bottom: 15px;
		margin-left: 47px;
	}

}


/* ==========================================================
 * Mobile
 * ========================================================== */

@media (max-width: 767px) {

	.eilmo-cf-payment-methods {
		padding: 16px;
		border-radius: 14px;
	}

	.eilmo-cf-payment-methods__header {
		padding-bottom: 14px;
		margin-bottom: 14px;
	}

	.eilmo-cf-payment-methods__title {
		font-size: 17px;
	}

	.eilmo-cf-payment-methods__list {
		gap: 10px;
	}

	.eilmo-cf-payment-method__choice {
		gap: 11px;
		padding: 14px;
	}

	.eilmo-cf-payment-method__indicator {
		width: 19px;
		height: 19px;
	}

	.eilmo-cf-payment-method__indicator::after {
		width: 7px;
		height: 7px;
	}

	.eilmo-cf-payment-method__heading {
		align-items: flex-start;
	}

	.eilmo-cf-payment-method__title {
		font-size: 14px;
	}

	.eilmo-cf-payment-method__description {
		font-size: 12.5px;
		line-height: 1.5;
	}

	.eilmo-cf-payment-method__icon {
		max-width: 80px;
	}

	.eilmo-cf-payment-method__icon img {
		max-height: 26px;
	}

	.eilmo-cf-payment-method__details {
		margin: 0 14px 14px;
		padding: 13px;
	}

	.eilmo-cf-payment-method__account {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	/*
	 * 16px prevents unwanted Safari/iOS zoom
	 * when focusing the transaction field.
	 */
	.eilmo-cf-payment-method
		input[type="text"].eilmo-cf-payment-method__transaction-input,
	.eilmo-cf-payment-method__gateway-fields input[type="text"],
	.eilmo-cf-payment-method__gateway-fields input[type="email"],
	.eilmo-cf-payment-method__gateway-fields input[type="tel"],
	.eilmo-cf-payment-method__gateway-fields input[type="number"],
	.eilmo-cf-payment-method__gateway-fields input[type="password"],
	.eilmo-cf-payment-method__gateway-fields select,
	.eilmo-cf-payment-method__gateway-fields textarea {
		font-size: 16px !important;
	}

}


/* ==========================================================
 * Very Small Mobile
 * ========================================================== */

@media (max-width: 420px) {

	.eilmo-cf-payment-methods {
		padding: 14px;
	}

	.eilmo-cf-payment-method__choice {
		padding: 13px;
	}

	.eilmo-cf-payment-method__heading {
		gap: 8px;
	}

	.eilmo-cf-payment-method__details {
		margin-right: 12px;
		margin-bottom: 12px;
		margin-left: 12px;
		padding: 12px;
	}

}


/* ==========================================================
 * Reduced Motion
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.eilmo-cf-payment-method,
	.eilmo-cf-payment-method__indicator,
	.eilmo-cf-payment-method__indicator::after,
	.eilmo-cf-payment-method
		input[type="text"].eilmo-cf-payment-method__transaction-input,
	.eilmo-cf-payment-method__gateway-fields input,
	.eilmo-cf-payment-method__gateway-fields select,
	.eilmo-cf-payment-method__gateway-fields textarea {
		transition: none;
	}

}


/**
 * --------------------------------------------------
 * Order Submit
 * --------------------------------------------------
 */

.eilmo-cf-checkout__order-submit {
	width: 100%;
	margin: 0;
}

.eilmo-cf-order-submit {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.eilmo-cf-order-submit *,
.eilmo-cf-order-submit *::before,
.eilmo-cf-order-submit *::after {
	box-sizing: border-box;
}

/**
 * Order Now button.
 */
.eilmo-cf-order-submit button.eilmo-cf-order-submit__button,
.eilmo-cf-order-submit .eilmo-cf-order-submit__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 14px 24px;
	border: 1px solid #111827;
	border-radius: 12px;
	background: #111827;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 8px 20px rgba(17, 24, 39, 0.12);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

.eilmo-cf-order-submit button.eilmo-cf-order-submit__button:hover:not(:disabled),
.eilmo-cf-order-submit .eilmo-cf-order-submit__button:hover:not(:disabled) {
	background: #1f2937;
	border-color: #1f2937;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.06),
		0 10px 24px rgba(17, 24, 39, 0.16);
	transform: translateY(-1px);
}

.eilmo-cf-order-submit button.eilmo-cf-order-submit__button:active:not(:disabled),
.eilmo-cf-order-submit .eilmo-cf-order-submit__button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 5px 14px rgba(17, 24, 39, 0.12);
}

.eilmo-cf-order-submit button.eilmo-cf-order-submit__button:focus,
.eilmo-cf-order-submit .eilmo-cf-order-submit__button:focus {
	outline: none;
}

.eilmo-cf-order-submit button.eilmo-cf-order-submit__button:focus-visible,
.eilmo-cf-order-submit .eilmo-cf-order-submit__button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.22);
	outline-offset: 3px;
}

.eilmo-cf-order-submit button.eilmo-cf-order-submit__button:disabled,
.eilmo-cf-order-submit .eilmo-cf-order-submit__button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/**
 * Button text.
 */
.eilmo-cf-order-submit__button-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	pointer-events: none;
}

/**
 * Loading spinner.
 */
.eilmo-cf-order-submit__spinner {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: eilmo-cf-order-spin 0.75s linear infinite;
	pointer-events: none;
}

.eilmo-cf-order-submit__spinner[hidden] {
	display: none !important;
}

@keyframes eilmo-cf-order-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/**
 * Loading state.
 */
.eilmo-cf-order-submit.is-loading
	.eilmo-cf-order-submit__button,
.eilmo-cf-order-submit__button.is-loading {
	cursor: wait;
}

/**
 * General notice.
 */
.eilmo-cf-order-submit__notice {
	width: 100%;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	background: #f0fdf4;
	color: #166534;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	word-break: break-word;
}

.eilmo-cf-order-submit__notice[hidden] {
	display: none !important;
}

/**
 * Error message.
 */
.eilmo-cf-order-submit__error {
	width: 100%;
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	word-break: break-word;
    margin-bottom: 16px;
}

.eilmo-cf-order-submit__error[hidden] {
	display: none !important;
}

/**
 * Keep theme/plugin button styles from overriding
 * the final checkout button.
 */
.eilmo-cf-checkout
	.eilmo-cf-order-submit
	button.eilmo-cf-order-submit__button {
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 14px 24px;
	border-width: 1px;
	border-style: solid;
	border-radius: 12px;
	background-image: none;
	text-transform: none;
	text-shadow: none;
}

/**
 * Tablet.
 */
@media (max-width: 1024px) {

	.eilmo-cf-order-submit button.eilmo-cf-order-submit__button,
	.eilmo-cf-order-submit .eilmo-cf-order-submit__button {
		min-height: 52px;
		padding: 13px 20px;
		font-size: 16px;
	}
}

/**
 * Mobile.
 */
@media (max-width: 767px) {

	.eilmo-cf-checkout__order-submit {
		width: 100%;
	}

	.eilmo-cf-order-submit {
		width: 100%;
	}

	.eilmo-cf-order-submit button.eilmo-cf-order-submit__button,
	.eilmo-cf-order-submit .eilmo-cf-order-submit__button {
		width: 100%;
		min-height: 52px;
		padding: 13px 18px;
		border-radius: 10px;
		font-size: 15px;
	}

	.eilmo-cf-order-submit__notice,
	.eilmo-cf-order-submit__error {
		padding: 11px 12px;
		border-radius: 9px;
		font-size: 13px;
        margin-bottom: 16px;
	}
}

/**
 * Very small screens.
 */
@media (max-width: 420px) {

	.eilmo-cf-order-submit button.eilmo-cf-order-submit__button,
	.eilmo-cf-order-submit .eilmo-cf-order-submit__button {
		min-height: 50px;
		padding: 12px 16px;
	}
}

/**
 * Reduced motion.
 */
@media (prefers-reduced-motion: reduce) {

	.eilmo-cf-order-submit__button {
		transition: none;
	}

	.eilmo-cf-order-submit__spinner {
		animation-duration: 1.5s;
	}
}


/**
 * --------------------------------------------------
 * Eilmo Checkout Flow
 * WooCommerce Order Received / Thank You Page
 * --------------------------------------------------
 */

body.woocommerce-order-received {
	--eilmo-order-bg: #f8fafc;
	--eilmo-order-card: #ffffff;
	--eilmo-order-text: #1d2939;
	--eilmo-order-muted: #667085;
	--eilmo-order-border: #e4e7ec;
	--eilmo-order-soft-border: #f0f2f5;
	--eilmo-order-accent: #3b82f6;
	--eilmo-order-success: #067647;
	--eilmo-order-success-bg: #ecfdf3;
	--eilmo-order-warning: #93370d;
	--eilmo-order-warning-bg: #fffaeb;
	--eilmo-order-danger: #b42318;
	--eilmo-order-danger-bg: #fef3f2;
}

body.woocommerce-order-received
	.woocommerce {
	width: 100%;
}

body.woocommerce-order-received
	.woocommerce-order {
	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
	padding: 42px 28px 70px;
	color: var(--eilmo-order-text);
	box-sizing: border-box;
}

body.woocommerce-order-received
	.woocommerce-order *,
body.woocommerce-order-received
	.woocommerce-order *::before,
body.woocommerce-order-received
	.woocommerce-order *::after {
	box-sizing: border-box;
}


/**
 * --------------------------------------------------
 * Order Received Heading
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-order
	> h1,
body.woocommerce-order-received
	.woocommerce-order
	.woocommerce-order-received-title {
	margin: 0 0 14px;
	color: var(--eilmo-order-text);
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

body.woocommerce-order-received
	.woocommerce-notice--success,
body.woocommerce-order-received
	.woocommerce-thankyou-order-received {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--eilmo-order-muted);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
}


/**
 * --------------------------------------------------
 * Order Overview
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-order-overview {
	display: grid;
	grid-template-columns:
		repeat(5, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin: 0 0 48px !important;
	padding: 0 !important;
	border: 1px solid var(--eilmo-order-border);
	border-radius: 16px;
	background: var(--eilmo-order-card);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 6px 20px rgba(16, 24, 40, 0.04);
	overflow: hidden;
	list-style: none;
}

body.woocommerce-order-received
	.woocommerce-order-overview
	li {
	min-width: 0;
	margin: 0 !important;
	padding: 22px 24px !important;
	border: 0 !important;
	border-right: 1px solid var(--eilmo-order-soft-border) !important;
	color: var(--eilmo-order-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.woocommerce-order-received
	.woocommerce-order-overview
	li:last-child {
	border-right: 0 !important;
}

body.woocommerce-order-received
	.woocommerce-order-overview
	li
	strong {
	display: block;
	margin-top: 7px;
	color: var(--eilmo-order-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	text-transform: none;
	overflow-wrap: anywhere;
}


/**
 * --------------------------------------------------
 * Sections
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-order-details,
body.woocommerce-order-received
	.woocommerce-customer-details {
	margin: 0 0 42px;
}

body.woocommerce-order-received
	.woocommerce-order-details
	> h2,
body.woocommerce-order-received
	.woocommerce-customer-details
	> h2 {
	margin: 0 0 18px;
	color: var(--eilmo-order-text);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}


/**
 * --------------------------------------------------
 * Order Details Table
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-table--order-details {
	width: 100%;
	margin: 0 !important;
	border: 1px solid var(--eilmo-order-border) !important;
	border-collapse: separate !important;
	border-spacing: 0;
	border-radius: 16px;
	background: var(--eilmo-order-card);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 6px 20px rgba(16, 24, 40, 0.035);
	overflow: hidden;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	th,
body.woocommerce-order-received
	.woocommerce-table--order-details
	td {
	padding: 17px 20px !important;
	border: 0 !important;
	border-right: 1px solid var(--eilmo-order-border) !important;
	border-bottom: 1px solid var(--eilmo-order-border) !important;
	background: var(--eilmo-order-card);
	color: var(--eilmo-order-text);
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tr
	> *:last-child {
	border-right: 0 !important;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tbody
	tr:last-child
	> *,
body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr:last-child
	> * {
	border-bottom: 0 !important;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	thead
	th {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	background: #f9fafb;
	color: #344054;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tbody
	tr:hover
	td {
	background: #fcfcfd;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.woocommerce-table__product-name {
	width: 60%;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.woocommerce-table__product-total {
	width: 40%;
	white-space: nowrap;
}


/**
 * Product Name
 */

body.woocommerce-order-received
	.woocommerce-table--order-details
	.woocommerce-table__product-name
	a {
	color: var(--eilmo-order-text);
	font-weight: 600;
	text-decoration: none;
	transition:
		color 0.2s ease;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.woocommerce-table__product-name
	a:hover {
	color: var(--eilmo-order-accent);
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.product-quantity {
	color: var(--eilmo-order-muted);
	font-weight: 600;
}


/**
 * Variation / Meta
 */

body.woocommerce-order-received
	.woocommerce-table--order-details
	.wc-item-meta {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.wc-item-meta
	li {
	margin: 3px 0;
	color: var(--eilmo-order-muted);
	font-size: 13px;
	line-height: 1.45;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	.wc-item-meta
	strong {
	color: #475467;
	font-weight: 600;
}


/**
 * --------------------------------------------------
 * Totals / Payment Information
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	th {
	width: 60%;
	background: #fcfcfd;
	color: #344054;
	font-weight: 600;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	td {
	width: 40%;
	color: var(--eilmo-order-text);
	font-weight: 600;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr:nth-last-child(-n + 5)
	th,
body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr:nth-last-child(-n + 5)
	td {
	background: #ffffff;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr
	.woocommerce-Price-amount {
	font-weight: 700;
}

body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr:nth-child(3)
	th,
body.woocommerce-order-received
	.woocommerce-table--order-details
	tfoot
	tr:nth-child(3)
	td {
	font-size: 17px;
	font-weight: 700;
}


/**
 * --------------------------------------------------
 * Customer Details
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-columns {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-column {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 24px 26px;
	border: 1px solid var(--eilmo-order-border);
	border-radius: 16px;
	background: var(--eilmo-order-card);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 5px 18px rgba(16, 24, 40, 0.03);
}

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-column
	> h2 {
	margin: 0 0 16px;
	color: var(--eilmo-order-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

body.woocommerce-order-received
	.woocommerce-customer-details
	address {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent;
	color: var(--eilmo-order-muted);
	font-size: 15px;
	font-style: normal;
	line-height: 1.8;
}

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-customer-details--phone,
body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-customer-details--email {
	margin: 10px 0 0;
	padding: 0;
	color: var(--eilmo-order-text);
	font-weight: 500;
}


/**
 * --------------------------------------------------
 * Links
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-order
	a {
	text-underline-offset: 3px;
}

body.woocommerce-order-received
	.woocommerce-order
	a:focus-visible {
	outline: 2px solid var(--eilmo-order-accent);
	outline-offset: 3px;
	border-radius: 3px;
}


/**
 * --------------------------------------------------
 * Tablet
 * --------------------------------------------------
 */

@media screen and (max-width: 1100px) {

	body.woocommerce-order-received
		.woocommerce-order-overview {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li {
		border-right: 1px solid var(--eilmo-order-soft-border) !important;
		border-bottom: 1px solid var(--eilmo-order-soft-border) !important;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li:nth-child(2n) {
		border-right: 0 !important;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li:last-child {
		grid-column: 1 / -1;
		border-right: 0 !important;
		border-bottom: 0 !important;
	}
}


/**
 * --------------------------------------------------
 * Mobile
 * --------------------------------------------------
 */

@media screen and (max-width: 782px) {

	body.woocommerce-order-received
		.woocommerce-order {
		padding:
			28px 16px
			50px;
	}

	body.woocommerce-order-received
		.woocommerce-order
		> h1,
	body.woocommerce-order-received
		.woocommerce-order
		.woocommerce-order-received-title {
		margin-bottom: 10px;
		font-size: 34px;
	}

	body.woocommerce-order-received
		.woocommerce-notice--success,
	body.woocommerce-order-received
		.woocommerce-thankyou-order-received {
		margin-bottom: 22px;
		font-size: 15px;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview {
		grid-template-columns: 1fr;
		margin-bottom: 34px !important;
		border-radius: 14px;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li,
	body.woocommerce-order-received
		.woocommerce-order-overview
		li:nth-child(2n),
	body.woocommerce-order-received
		.woocommerce-order-overview
		li:last-child {
		grid-column: auto;
		padding: 17px 18px !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--eilmo-order-soft-border) !important;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li:last-child {
		border-bottom: 0 !important;
	}

	body.woocommerce-order-received
		.woocommerce-order-details,
	body.woocommerce-order-received
		.woocommerce-customer-details {
		margin-bottom: 34px;
	}

	body.woocommerce-order-received
		.woocommerce-order-details
		> h2,
	body.woocommerce-order-received
		.woocommerce-customer-details
		> h2 {
		margin-bottom: 15px;
		font-size: 24px;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details {
		border-radius: 14px;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		th,
	body.woocommerce-order-received
		.woocommerce-table--order-details
		td {
		padding: 14px 13px !important;
		font-size: 14px;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		thead
		th {
		font-size: 12px;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		.woocommerce-table__product-name {
		width: 62%;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		.woocommerce-table__product-total {
		width: 38%;
		white-space: normal;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		tfoot
		th {
		width: 62%;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		tfoot
		td {
		width: 38%;
		overflow-wrap: anywhere;
	}

	body.woocommerce-order-received
		.woocommerce-customer-details
		.woocommerce-columns {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.woocommerce-order-received
		.woocommerce-customer-details
		.woocommerce-column {
		padding: 20px;
		border-radius: 14px;
	}
}


/**
 * --------------------------------------------------
 * Very Small Mobile
 * --------------------------------------------------
 */

@media screen and (max-width: 480px) {

	body.woocommerce-order-received
		.woocommerce-order {
		padding-right: 12px;
		padding-left: 12px;
	}

	body.woocommerce-order-received
		.woocommerce-table--order-details
		th,
	body.woocommerce-order-received
		.woocommerce-table--order-details
		td {
		padding: 12px 10px !important;
		font-size: 13px;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li
		strong {
		font-size: 15px;
	}
}

/**
 * --------------------------------------------------
 * WooCommerce Clearfix Reset
 * Order Received Page
 * --------------------------------------------------
 *
 * WooCommerce adds ::before / ::after clearfix
 * elements to order_details and col2-set.
 *
 * When Eilmo changes those containers to CSS Grid,
 * the pseudo elements become unwanted grid items.
 */

body.woocommerce-order-received
	.woocommerce-order
	.woocommerce-order-overview::before,
body.woocommerce-order-received
	.woocommerce-order
	.woocommerce-order-overview::after,
body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-columns::before,
body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-columns::after,
body.woocommerce-order-received
	.woocommerce-customer-details
	.col2-set::before,
body.woocommerce-order-received
	.woocommerce-customer-details
	.col2-set::after {
	content: none !important;
	display: none !important;
	clear: none !important;
}


/**
 * --------------------------------------------------
 * Order Overview Grid Fix
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-order-overview {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.woocommerce-order-received
	.woocommerce-order-overview
	li {
	min-width: 0;
	float: none !important;
	width: auto !important;
}

body.woocommerce-order-received
	.woocommerce-order-overview
	li
	strong {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
}


/**
 * --------------------------------------------------
 * Billing / Shipping Address Grid Fix
 * --------------------------------------------------
 */

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-columns--addresses,
body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-columns {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	width: 100%;
}

body.woocommerce-order-received
	.woocommerce-customer-details
	.woocommerce-column {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}


/**
 * Tablet
 */

@media screen and (max-width: 1100px) {

	body.woocommerce-order-received
		.woocommerce-order-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li:last-child {
		grid-column: 1 / -1;
	}
}


/**
 * Mobile
 */

@media screen and (max-width: 782px) {

	body.woocommerce-order-received
		.woocommerce-order-overview {
		grid-template-columns: 1fr;
	}

	body.woocommerce-order-received
		.woocommerce-order-overview
		li:last-child {
		grid-column: auto;
	}

	body.woocommerce-order-received
		.woocommerce-customer-details
		.woocommerce-columns--addresses,
	body.woocommerce-order-received
		.woocommerce-customer-details
		.woocommerce-columns {
		grid-template-columns: 1fr;
	}
}


/**
 * --------------------------------------------------
 * Eilmo Checkout Flow
 * WooCommerce Order Pay Page
 * --------------------------------------------------
 */

body.woocommerce-order-pay {
	--eilmo-pay-bg: #f8fafc;
	--eilmo-pay-card: #ffffff;
	--eilmo-pay-text: #1d2939;
	--eilmo-pay-muted: #667085;
	--eilmo-pay-border: #e4e7ec;
	--eilmo-pay-soft-border: #f0f2f5;
	--eilmo-pay-accent: #3b82f6;
	--eilmo-pay-accent-dark: #2563eb;
	--eilmo-pay-success: #067647;
	--eilmo-pay-warning: #b54708;
	--eilmo-pay-danger: #b42318;
}

body.woocommerce-order-pay
	.woocommerce {
	width: 100%;
}

body.woocommerce-order-pay
	.woocommerce
	> form,
body.woocommerce-order-pay
	form#order_review {
	width: 100%;
	max-width: 1480px;
	margin-right: auto;
	margin-left: auto;
}


/**
 * --------------------------------------------------
 * Pay For Order Heading
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce
	h1,
body.woocommerce-order-pay
	.woocommerce
	.woocommerce-order-pay-title {
	margin: 0 0 26px;
	color: var(--eilmo-pay-text);
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.035em;
}


/**
 * --------------------------------------------------
 * Order Review Table
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce
	.shop_table.order_details,
body.woocommerce-order-pay
	.woocommerce
	table.shop_table {
	width: 100%;
	margin: 0 0 32px !important;
	border: 1px solid var(--eilmo-pay-border) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 16px;
	background: var(--eilmo-pay-card);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 6px 20px rgba(16, 24, 40, 0.035);
	overflow: hidden;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	th,
body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	td {
	padding: 17px 18px !important;
	border: 0 !important;
	border-right: 1px solid var(--eilmo-pay-border) !important;
	border-bottom: 1px solid var(--eilmo-pay-border) !important;
	background: #ffffff;
	color: var(--eilmo-pay-text);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tr
	> *:last-child {
	border-right: 0 !important;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tbody
	tr:last-child
	> *,
body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tfoot
	tr:last-child
	> * {
	border-bottom: 0 !important;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	thead
	th {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	background: #f9fafb;
	color: #344054;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tbody
	tr:hover
	td {
	background: #fcfcfd;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tfoot
	th {
	background: #fcfcfd;
	color: #344054;
	font-weight: 600;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	tfoot
	td {
	color: var(--eilmo-pay-text);
	font-weight: 600;
}

body.woocommerce-order-pay
	.woocommerce
	table.shop_table
	.woocommerce-Price-amount {
	font-weight: 700;
}


/**
 * --------------------------------------------------
 * Payment Section
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce
	#payment {
	margin: 0;
	padding: 0;
	border: 1px solid var(--eilmo-pay-border);
	border-radius: 16px;
	background: var(--eilmo-pay-card);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 6px 20px rgba(16, 24, 40, 0.04);
	overflow: hidden;
}


/**
 * Payment Methods List
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	ul.payment_methods {
	margin: 0 !important;
	padding: 20px !important;
	border: 0 !important;
	background: #ffffff;
	list-style: none;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	ul.payment_methods
	> li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--eilmo-pay-soft-border);
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	ul.payment_methods
	> li:last-child {
	border-bottom: 0;
}


/**
 * Payment Method Radio / Label
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	.wc_payment_method
	> input.input-radio {
	margin: 0 10px 0 0;
	vertical-align: middle;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.wc_payment_method
	> label {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	margin: 0;
	padding: 14px 0;
	color: var(--eilmo-pay-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.wc_payment_method
	> label
	img {
	max-height: 28px;
	width: auto;
	margin-left: 10px;
}


/**
 * --------------------------------------------------
 * Gateway Payment Box
 * --------------------------------------------------
 *
 * Keep gateway internals functional.
 * Only style the outer WooCommerce payment_box.
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	div.payment_box {
	position: relative;
	margin: 2px 0 18px !important;
	padding: 20px !important;
	border: 1px solid var(--eilmo-pay-border);
	border-radius: 12px;
	background: #f8fafc !important;
	color: var(--eilmo-pay-text);
	box-shadow: none;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	div.payment_box::before {
	top: -9px !important;
	left: 20px !important;
	margin: 0 !important;
	border-width: 0 9px 9px !important;
	border-color:
		transparent
		transparent
		#f8fafc
		transparent !important;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	div.payment_box
	p {
	color: var(--eilmo-pay-muted);
	font-size: 14px;
	line-height: 1.6;
}


/**
 * Stripe / Gateway Embedded Area
 *
 * Avoid aggressive selectors here.
 * Stripe iframe / Payment Element remains native.
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	.payment_box
	fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.payment_box
	iframe {
	max-width: 100%;
}


/**
 * --------------------------------------------------
 * Privacy / Place Order Area
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	.form-row.place-order {
	margin: 0 !important;
	padding: 22px !important;
	border-top: 1px solid var(--eilmo-pay-soft-border);
	background: #fcfcfd;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.woocommerce-privacy-policy-text {
	margin: 0 0 20px;
	color: var(--eilmo-pay-muted);
	font-size: 14px;
	line-height: 1.65;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.woocommerce-privacy-policy-text
	p {
	margin: 0;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.woocommerce-privacy-policy-text
	a {
	color: var(--eilmo-pay-accent);
	font-weight: 500;
	text-decoration: none;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	.woocommerce-privacy-policy-text
	a:hover {
	text-decoration: underline;
}


/**
 * --------------------------------------------------
 * Pay For Order Button
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce
	#payment
	#place_order,
body.woocommerce-order-pay
	.woocommerce
	#payment
	button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	min-height: 52px;
	float: right;
	margin: 0 !important;
	padding: 13px 24px !important;
	border: 1px solid var(--eilmo-pay-accent) !important;
	border-radius: 10px;
	background: var(--eilmo-pay-accent) !important;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.08);
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease;
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	#place_order:hover,
body.woocommerce-order-pay
	.woocommerce
	#payment
	button.button.alt:hover {
	border-color: var(--eilmo-pay-accent-dark) !important;
	background: var(--eilmo-pay-accent-dark) !important;
	box-shadow:
		0 4px 12px rgba(37, 99, 235, 0.18);
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	#place_order:active,
body.woocommerce-order-pay
	.woocommerce
	#payment
	button.button.alt:active {
	transform: translateY(1px);
}

body.woocommerce-order-pay
	.woocommerce
	#payment
	#place_order:focus-visible,
body.woocommerce-order-pay
	.woocommerce
	#payment
	button.button.alt:focus-visible {
	outline: 3px solid rgba(59, 130, 246, 0.2);
	outline-offset: 3px;
}


/**
 * --------------------------------------------------
 * WooCommerce Notices
 * --------------------------------------------------
 */

body.woocommerce-order-pay
	.woocommerce-error,
body.woocommerce-order-pay
	.woocommerce-message,
body.woocommerce-order-pay
	.woocommerce-info {
	margin: 0 0 22px !important;
	padding: 15px 18px 15px 48px !important;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.55;
}


/**
 * --------------------------------------------------
 * WooCommerce Clearfix Protection
 * --------------------------------------------------
 *
 * Prevent old WooCommerce clearfix pseudo elements
 * from becoming unwanted layout items.
 */

body.woocommerce-order-pay
	.woocommerce
	#payment::before,
body.woocommerce-order-pay
	.woocommerce
	#payment::after,
body.woocommerce-order-pay
	.woocommerce
	.form-row.place-order::before,
body.woocommerce-order-pay
	.woocommerce
	.form-row.place-order::after {
	content: none !important;
	display: none !important;
	clear: none !important;
}


/**
 * --------------------------------------------------
 * Tablet
 * --------------------------------------------------
 */

@media screen and (max-width: 900px) {

	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		th,
	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		td {
		padding: 15px !important;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		ul.payment_methods {
		padding: 16px !important;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		div.payment_box {
		padding: 16px !important;
	}
}


/**
 * --------------------------------------------------
 * Mobile
 * --------------------------------------------------
 */

@media screen and (max-width: 782px) {

	body.woocommerce-order-pay
		.woocommerce
		h1,
	body.woocommerce-order-pay
		.woocommerce
		.woocommerce-order-pay-title {
		margin-bottom: 20px;
		font-size: 34px;
	}

	body.woocommerce-order-pay
		.woocommerce
		table.shop_table {
		border-radius: 14px;
	}

	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		th,
	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		td {
		padding: 13px 11px !important;
		font-size: 13px;
	}

	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		thead
		th {
		font-size: 11px;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment {
		border-radius: 14px;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		ul.payment_methods {
		padding: 14px !important;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		.wc_payment_method
		> label {
		min-height: 48px;
		font-size: 15px;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		div.payment_box {
		margin-bottom: 14px !important;
		padding: 14px !important;
		border-radius: 10px;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		.form-row.place-order {
		padding: 16px !important;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		#place_order,
	body.woocommerce-order-pay
		.woocommerce
		#payment
		button.button.alt {
		width: 100%;
		min-width: 0;
		float: none;
	}
}


/**
 * --------------------------------------------------
 * Small Mobile
 * --------------------------------------------------
 */

@media screen and (max-width: 480px) {

	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		th,
	body.woocommerce-order-pay
		.woocommerce
		table.shop_table
		td {
		padding: 11px 8px !important;
		font-size: 12px;
	}

	body.woocommerce-order-pay
		.woocommerce
		#payment
		.payment_box {
		padding: 12px !important;
	}
}


/**
 * Eilmo Checkout Flow - Combo Offers.
 *
 * @package EilmoCheckout
 */

/* =========================================================
 * Combo Offers Section
 * ========================================================= */

.eilmo-cf-combo-offers {
	width: 100%;
	margin: 0;
	padding: 0;
}

.eilmo-cf-combo-offers__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.eilmo-cf-combo-offers__title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #1d2327;
}

.eilmo-cf-combo-offers__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
}


/* =========================================================
 * Combo Offer Card
 * ========================================================= */

.eilmo-cf-combo-offer {
	position: relative;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	background: #ffffff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease,
		background-color 0.2s ease;
	overflow: hidden;
}

.eilmo-cf-combo-offer:hover {
	border-color: #b9c0c7;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.eilmo-cf-combo-offer.is-selected {
	border-color: #2271b1;
	background: #f7fbff;
	box-shadow:
		0 0 0 1px #2271b1,
		0 5px 16px rgba(34, 113, 177, 0.1);
}

.eilmo-cf-combo-offer.is-unavailable {
	opacity: 0.6;
	cursor: not-allowed;
	background: #f7f7f7;
}

.eilmo-cf-combo-offer.is-unavailable:hover {
	border-color: #e2e6ea;
	box-shadow: none;
	transform: none;
}


/* =========================================================
 * Full Card Click Area
 * ========================================================= */

.eilmo-cf-combo-offer__label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.eilmo-cf-combo-offer__label:hover,
.eilmo-cf-combo-offer__label:focus,
.eilmo-cf-combo-offer__label:active {
	color: inherit;
	text-decoration: none;
}

.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__label {
	cursor: not-allowed;
}


/* =========================================================
 * Checkbox / Radio
 * ========================================================= */

.eilmo-cf-combo-offer__selector {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.eilmo-cf-combo-offer__selector input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.eilmo-cf-combo-offer__control {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid #a7aaad;
	background: #ffffff;
	box-sizing: border-box;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.eilmo-cf-combo-offer__selector
	input[type="checkbox"]
	+ .eilmo-cf-combo-offer__control {
	border-radius: 5px;
}

.eilmo-cf-combo-offer__selector
	input[type="radio"]
	+ .eilmo-cf-combo-offer__control {
	border-radius: 50%;
}

.eilmo-cf-combo-offer__selector
	input:checked
	+ .eilmo-cf-combo-offer__control {
	border-color: #2271b1;
	background: #2271b1;
}

.eilmo-cf-combo-offer__selector
	input[type="checkbox"]:checked
	+ .eilmo-cf-combo-offer__control::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.eilmo-cf-combo-offer__selector
	input[type="radio"]:checked
	+ .eilmo-cf-combo-offer__control::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #ffffff;
}

.eilmo-cf-combo-offer__selector
	input:focus-visible
	+ .eilmo-cf-combo-offer__control {
	box-shadow:
		0 0 0 2px #ffffff,
		0 0 0 4px rgba(34, 113, 177, 0.3);
}

.eilmo-cf-combo-offer__selector
	input:disabled
	+ .eilmo-cf-combo-offer__control {
	border-color: #c7c7c7;
	background: #eeeeee;
}


/* =========================================================
 * Card Body
 * ========================================================= */

.eilmo-cf-combo-offer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 10px;
}

.eilmo-cf-combo-offer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.eilmo-cf-combo-offer__title {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #1d2327;
	word-break: break-word;
}


/* =========================================================
 * Badge
 * ========================================================= */

.eilmo-cf-combo-offer__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	padding: 4px 9px;
	border-radius: 999px;
	background: #f0f6fc;
	color: #135e96;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
}


/* =========================================================
 * Pricing
 * ========================================================= */

.eilmo-cf-combo-offer__pricing {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
	white-space: nowrap;
}

.eilmo-cf-combo-offer__regular-price {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #777777;
	text-decoration: line-through;
}

.eilmo-cf-combo-offer__regular-price .woocommerce-Price-amount,
.eilmo-cf-combo-offer__regular-price .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.eilmo-cf-combo-offer__price {
	display: block;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #2271b1;
}

.eilmo-cf-combo-offer__price .woocommerce-Price-amount,
.eilmo-cf-combo-offer__price .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}


/* =========================================================
 * Description
 * ========================================================= */

.eilmo-cf-combo-offer__description {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: #646970;
}

.eilmo-cf-combo-offer__description p {
	margin: 0;
	padding: 0;
}

.eilmo-cf-combo-offer__description p + p {
	margin-top: 6px;
}


/* =========================================================
 * Combo Product Items
 * ========================================================= */

.eilmo-cf-combo-offer__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.eilmo-cf-combo-offer__item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-width: 0;
	padding: 7px;
	border: 1px solid #edf0f2;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.7);
	box-sizing: border-box;
}

.eilmo-cf-combo-offer__item-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 7px;
	background: #f5f5f5;
	overflow: hidden;
}

.eilmo-cf-combo-offer__item-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
}

.eilmo-cf-combo-offer__item-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.eilmo-cf-combo-offer__item-title {
	display: block;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #2c3338;
	overflow-wrap: anywhere;
}

.eilmo-cf-combo-offer__item-meta {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	color: #787c82;
}


/* =========================================================
 * Footer
 * ========================================================= */

.eilmo-cf-combo-offer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding-top: 2px;
}

.eilmo-cf-combo-offer__saving {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: #008a20;
}

.eilmo-cf-combo-offer__saving .woocommerce-Price-amount,
.eilmo-cf-combo-offer__saving .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.eilmo-cf-combo-offer__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 5px 11px;
	border-radius: 7px;
	background: #f0f6fc;
	color: #135e96;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.eilmo-cf-combo-offer.is-selected
	.eilmo-cf-combo-offer__action {
	background: #2271b1;
	color: #ffffff;
}

.eilmo-cf-combo-offer__availability {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: #b32d2e;
}


/* =========================================================
 * Selected State
 * ========================================================= */

.eilmo-cf-combo-offer.is-selected
	.eilmo-cf-combo-offer__title {
	color: #135e96;
}

.eilmo-cf-combo-offer.is-selected
	.eilmo-cf-combo-offer__item {
	border-color: #d8eaf7;
	background: #ffffff;
}


/* =========================================================
 * Unavailable State
 * ========================================================= */

.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__title,
.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__description,
.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__price,
.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__regular-price,
.eilmo-cf-combo-offer.is-unavailable
	.eilmo-cf-combo-offer__saving {
	color: #8c8f94;
}


/* =========================================================
 * Checkout Placement
 * ========================================================= */

.eilmo-cf-checkout__combo-offers {
	width: 100%;
	margin: 0;
	padding: 0;
}


/* =========================================================
 * Tablet
 * ========================================================= */

@media (max-width: 1024px) {

	.eilmo-cf-combo-offers__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.eilmo-cf-combo-offer__label {
		padding: 14px;
	}

	.eilmo-cf-combo-offer__top {
		gap: 10px;
	}

	.eilmo-cf-combo-offer__price {
		font-size: 16px;
	}

}


/* =========================================================
 * Mobile
 * ========================================================= */

@media (max-width: 767px) {

	.eilmo-cf-combo-offers__header {
		margin-bottom: 12px;
	}

	.eilmo-cf-combo-offers__title {
		font-size: 17px;
	}

	.eilmo-cf-combo-offers__list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.eilmo-cf-combo-offer {
		border-radius: 10px;
	}

	.eilmo-cf-combo-offer__label {
		gap: 10px;
		padding: 13px;
	}

	.eilmo-cf-combo-offer__selector {
		width: 20px;
		height: 20px;
	}

	.eilmo-cf-combo-offer__control {
		width: 19px;
		height: 19px;
	}

	.eilmo-cf-combo-offer__top {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.eilmo-cf-combo-offer__title {
		font-size: 15px;
	}

	.eilmo-cf-combo-offer__pricing {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 7px;
		text-align: left;
	}

	.eilmo-cf-combo-offer__price {
		font-size: 16px;
	}

	.eilmo-cf-combo-offer__description {
		font-size: 12px;
	}

	.eilmo-cf-combo-offer__item {
		padding: 6px;
	}

	.eilmo-cf-combo-offer__item-image {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}

	.eilmo-cf-combo-offer__footer {
		gap: 8px;
	}

}


/* =========================================================
 * Small Mobile
 * ========================================================= */

@media (max-width: 420px) {

	.eilmo-cf-combo-offer__label {
		padding: 12px;
	}

	.eilmo-cf-combo-offer__footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.eilmo-cf-combo-offer__action {
		width: 100%;
		box-sizing: border-box;
	}

}


/* =========================================================
 * Reduced Motion
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.eilmo-cf-combo-offer,
	.eilmo-cf-combo-offer__control,
	.eilmo-cf-combo-offer__action {
		transition: none;
	}

}

/**
 * ---------------------------------------------
 * Order Bumps
 * ---------------------------------------------
 */

.eilmo-cf-checkout__order-bumps {
	width: 100%;
	margin: 0;
	padding: 0;
}

.eilmo-cf-order-bumps {
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	box-sizing: border-box;
}

.eilmo-cf-order-bumps *,
.eilmo-cf-order-bumps *::before,
.eilmo-cf-order-bumps *::after {
	box-sizing: border-box;
}

/**
 * Header.
 */
.eilmo-cf-order-bumps__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
}

.eilmo-cf-order-bumps__title {
	margin: 0;
	padding: 0;
	color: #111827;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

/**
 * Offers wrapper.
 */
.eilmo-cf-order-bumps__offers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/**
 * Single Order Bump card.
 */
.eilmo-cf-order-bump {
	position: relative;
	display: grid;
	grid-template-columns: auto 72px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 14px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.eilmo-cf-order-bump:hover {
	border-color: #cbd5e1;
	box-shadow: 0 5px 16px rgba(15, 23, 42, 0.07);
}

.eilmo-cf-order-bump:focus-within {
	border-color: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.1);
}

/**
 * Selected card.
 *
 * Modern browsers support :has().
 */
.eilmo-cf-order-bump:has(
	.eilmo-cf-order-bump__input:checked
) {
	border-color: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	background: var(
		--eilmo-cf-primary-soft-color,
		#f8fbff
	);
	box-shadow:
		0 0 0 1px
			var(
				--eilmo-cf-primary-color,
				#2563eb
			),
		0 5px 18px rgba(15, 23, 42, 0.07);
}

/**
 * Checkbox control.
 */
.eilmo-cf-order-bump__control {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

.eilmo-cf-order-bump__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.eilmo-cf-order-bump__check {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	background: #ffffff;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.eilmo-cf-order-bump__input:focus-visible +
.eilmo-cf-order-bump__check {
	border-color: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.14);
}

.eilmo-cf-order-bump__input:checked +
.eilmo-cf-order-bump__check {
	border-color: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	background: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
}

.eilmo-cf-order-bump__input:checked +
.eilmo-cf-order-bump__check::after {
	content: "";
	display: block;
	width: 6px;
	height: 11px;
	margin-top: -2px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.eilmo-cf-order-bump__input:disabled +
.eilmo-cf-order-bump__check {
	border-color: #e5e7eb;
	background: #f3f4f6;
	cursor: not-allowed;
}

/**
 * Product image.
 */
.eilmo-cf-order-bump__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0;
	padding: 5px;
	overflow: hidden;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	background: #ffffff;
}

.eilmo-cf-order-bump__thumbnail {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 7px;
	object-fit: contain;
	object-position: center;
}

/**
 * Content.
 */
.eilmo-cf-order-bump__content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

.eilmo-cf-order-bump__heading {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 7px;
	width: 100%;
}

.eilmo-cf-order-bump__title {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #111827;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

/**
 * Badge.
 */
.eilmo-cf-order-bump__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 22px;
	margin: 0;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/**
 * Description.
 */
.eilmo-cf-order-bump__description {
	margin: 0;
	padding: 0;
	color: #6b7280;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.eilmo-cf-order-bump__description p {
	margin: 0;
	padding: 0;
}

.eilmo-cf-order-bump__description p + p {
	margin-top: 5px;
}

/**
 * Price.
 */
.eilmo-cf-order-bump__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	width: 100%;
	margin-top: 1px;
}

.eilmo-cf-order-bump__regular-price {
	margin: 0;
	padding: 0;
	color: #9ca3af;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration-thickness: 1px;
}

.eilmo-cf-order-bump__offer-price {
	margin: 0;
	padding: 0;
	color: var(
		--eilmo-cf-primary-color,
		#2563eb
	);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.eilmo-cf-order-bump__quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 2px 6px;
	border-radius: 5px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

/**
 * WooCommerce price cleanup inside Order Bump.
 */
.eilmo-cf-order-bump__price .woocommerce-Price-amount,
.eilmo-cf-order-bump__price .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.eilmo-cf-order-bump__price ins {
	background: transparent;
	text-decoration: none;
}

/**
 * Single-selection mode.
 *
 * Visually use a round selector when the configured
 * selection behavior allows only one Order Bump.
 */
.eilmo-cf-order-bumps[data-selection-mode="single"]
.eilmo-cf-order-bump__check {
	border-radius: 50%;
}

.eilmo-cf-order-bumps[data-selection-mode="single"]
.eilmo-cf-order-bump__input:checked +
.eilmo-cf-order-bump__check::after {
	width: 8px;
	height: 8px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	transform: none;
}

/**
 * Disabled states.
 */
.eilmo-cf-order-bump:has(
	.eilmo-cf-order-bump__input:disabled
) {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

.eilmo-cf-order-bump:has(
	.eilmo-cf-order-bump__input:disabled
):hover {
	border-color: #e5e7eb;
	box-shadow: none;
	transform: none;
}

/**
 * ---------------------------------------------
 * Tablet
 * ---------------------------------------------
 */
@media (max-width: 1024px) {

	.eilmo-cf-order-bumps {
		margin-bottom: 18px;
	}

	.eilmo-cf-order-bump {
		grid-template-columns:
			auto
			68px
			minmax(0, 1fr);
		gap: 12px;
		padding: 13px;
	}

	.eilmo-cf-order-bump__image {
		width: 68px;
		height: 68px;
	}

	.eilmo-cf-order-bump__title {
		font-size: 14px;
	}

	.eilmo-cf-order-bump__offer-price {
		font-size: 15px;
	}
}

/**
 * ---------------------------------------------
 * Mobile
 * ---------------------------------------------
 */
@media (max-width: 767px) {

	.eilmo-cf-checkout__order-bumps {
		width: 100%;
	}

	.eilmo-cf-order-bumps {
		width: 100%;
		margin-bottom: 16px;
	}

	.eilmo-cf-order-bumps__header {
		margin-bottom: 10px;
	}

	.eilmo-cf-order-bumps__title {
		font-size: 16px;
		line-height: 1.4;
	}

	.eilmo-cf-order-bumps__offers {
		gap: 10px;
	}

	.eilmo-cf-order-bump {
		grid-template-columns:
			22px
			60px
			minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		padding: 11px;
		border-radius: 10px;
	}

	.eilmo-cf-order-bump__control {
		width: 22px;
		height: 22px;
	}

	.eilmo-cf-order-bump__check {
		width: 20px;
		height: 20px;
		border-radius: 5px;
	}

	.eilmo-cf-order-bump__input:checked +
	.eilmo-cf-order-bump__check::after {
		width: 5px;
		height: 10px;
	}

	.eilmo-cf-order-bump__image {
		width: 60px;
		height: 60px;
		padding: 4px;
		border-radius: 8px;
	}

	.eilmo-cf-order-bump__thumbnail {
		border-radius: 6px;
	}

	.eilmo-cf-order-bump__content {
		gap: 4px;
	}

	.eilmo-cf-order-bump__heading {
		gap: 5px;
	}

	.eilmo-cf-order-bump__title {
		font-size: 13px;
		line-height: 1.35;
	}

	.eilmo-cf-order-bump__badge {
		min-height: 19px;
		padding: 2px 6px;
		font-size: 9px;
	}

	.eilmo-cf-order-bump__description {
		display: -webkit-box;
		overflow: hidden;
		font-size: 11px;
		line-height: 1.4;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.eilmo-cf-order-bump__price {
		gap: 5px;
	}

	.eilmo-cf-order-bump__regular-price {
		font-size: 11px;
	}

	.eilmo-cf-order-bump__offer-price {
		font-size: 14px;
	}

	.eilmo-cf-order-bump__quantity {
		padding: 1px 5px;
		font-size: 9px;
	}
}

/**
 * ---------------------------------------------
 * Small Mobile
 * ---------------------------------------------
 */
@media (max-width: 420px) {

	.eilmo-cf-order-bump {
		grid-template-columns:
			20px
			54px
			minmax(0, 1fr);
		gap: 8px;
		padding: 10px;
	}

	.eilmo-cf-order-bump__control {
		width: 20px;
		height: 20px;
	}

	.eilmo-cf-order-bump__check {
		width: 19px;
		height: 19px;
	}

	.eilmo-cf-order-bump__image {
		width: 54px;
		height: 54px;
	}

	.eilmo-cf-order-bump__title {
		font-size: 12px;
	}

	.eilmo-cf-order-bump__description {
		font-size: 10px;
	}

	.eilmo-cf-order-bump__offer-price {
		font-size: 13px;
	}

	.eilmo-cf-order-bump__regular-price {
		font-size: 10px;
	}
}

/* =========================================================
 * WhatsApp Ordering
 * ======================================================= */

.eilmo-cf-checkout__whatsapp-order {
	margin-top: 12px;
}

.eilmo-cf-whatsapp-order__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	border-color: #25d366 !important;
	background: #25d366 !important;
	color: #fff !important;
}

.eilmo-cf-whatsapp-order__button::before {
	content: "";
	display: block;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;

	background-color: currentColor;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.8l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.4-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.3-138.2c-5.5-2.8-32.8-16.1-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.6-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.7 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.8l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.4-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.3-138.2c-5.5-2.8-32.8-16.1-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.6-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.7 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.eilmo-cf-whatsapp-order__button:hover {
	border-color: #20bd5a !important;
	background: #20bd5a !important;
	color: #fff !important;
}

.eilmo-cf-whatsapp-order__button:focus {
	border-color: #1da851 !important;
	background: #20bd5a !important;
	color: #fff !important;
	outline: none;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px rgba(37, 211, 102, 0.35);
}

.eilmo-cf-whatsapp-order__button:active {
	border-color: #1da851 !important;
	background: #1da851 !important;
	transform: translateY(1px);
}

/* ---------------------------------------------------------
 * Error
 * ------------------------------------------------------ */

.eilmo-cf-whatsapp-order__error {
	margin-top: 8px;
	color: #b32d2e;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}

.eilmo-cf-whatsapp-order__error[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------
 * Mobile
 * ------------------------------------------------------ */

@media screen and (max-width: 767px) {

	.eilmo-cf-checkout__whatsapp-order {
		margin-top: 10px;
	}

	.eilmo-cf-whatsapp-order__button {
		gap: 8px;
	}

	.eilmo-cf-whatsapp-order__button::before {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
	}
}