/* =========================================================
   VF COD Checkout — front-end styles
   Signature: a thin gold "seam" accent along the top edge of
   the card (echoes stitched-leather ledger books used in
   traditional Algerian souk bookkeeping) + a warm, tactile
   green/gold palette instead of generic checkout blue.
   ========================================================= */

.hanout-cod-wrap {
	--hanout-cod-primary: #0f4d3f;
	--hanout-cod-primary-dark: #0a3a2f;
	--hanout-cod-accent: #c9a24b;
	--hanout-cod-accent-soft: #f4e9d1;
	--hanout-cod-ink: #1c2622;
	--hanout-cod-muted: #6b7a75;
	--hanout-cod-bg: #ffffff;
	--hanout-cod-line: #e3e2dc;
	--hanout-cod-field-bg: #fbfbf9;
	--hanout-cod-error: #b3261e;
	--hanout-cod-radius: 14px;
	/* --hanout-cod-primary, --hanout-cod-accent, --hanout-cod-ink and --hanout-cod-bg
	   are overridden inline per-site from the admin color settings (see class-hanout-cod-assets.php),
	   so the text always stays legible against whatever background color is chosen. */
	font-family: -apple-system, "Segoe UI", "Tahoma", "Cairo", "Noto Kufi Arabic", sans-serif;
	direction: rtl;
	text-align: right;
	width: 100%;
	max-width: 480px;
	margin: 28px auto;
	color: var(--hanout-cod-ink);
	box-sizing: border-box;
}
.hanout-cod-wrap *,
.hanout-cod-wrap *::before,
.hanout-cod-wrap *::after { box-sizing: border-box; }

.hanout-cod-form {
	position: relative;
	background: var(--hanout-cod-bg);
	color: var(--hanout-cod-ink);
	border: 1px solid var(--hanout-cod-line);
	border-radius: var(--hanout-cod-radius);
	padding: 24px 20px 18px;
	box-shadow: 0 1px 2px rgba(15, 77, 63, 0.04), 0 10px 28px rgba(15, 77, 63, 0.08);
	overflow: hidden;
	animation: hanout-cod-card-in .45s cubic-bezier(.2,.8,.2,1) both;
}

/* ---- staggered field entrance ---- */
.hanout-cod-anim {
	animation: hanout-cod-field-in .4s cubic-bezier(.2,.8,.2,1) both;
}
.hanout-cod-anim:nth-child(1) { animation-delay: .03s; }
.hanout-cod-anim:nth-child(2) { animation-delay: .07s; }
.hanout-cod-anim:nth-child(3) { animation-delay: .11s; }
.hanout-cod-anim:nth-child(4) { animation-delay: .15s; }
.hanout-cod-anim:nth-child(5) { animation-delay: .19s; }
.hanout-cod-anim:nth-child(6) { animation-delay: .23s; }
.hanout-cod-anim:nth-child(7) { animation-delay: .27s; }
.hanout-cod-anim:nth-child(8) { animation-delay: .31s; }

@keyframes hanout-cod-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes hanout-cod-field-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- field groups & labels ---- */
.hanout-cod-field-group { margin-bottom: 14px; }
.hanout-cod-field-group.hanout-cod-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hanout-cod-field-group.hanout-cod-half > div { min-width: 0; }

.hanout-cod-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hanout-cod-muted);
	margin-bottom: 6px;
	letter-spacing: .1px;
}

/* ---- inputs ---- */
.hanout-cod-input-shell { position: relative; }
.hanout-cod-input-shell .hanout-cod-input { padding-inline-end: 40px !important; }
.hanout-cod-input-shell::after {
	content: "";
	position: absolute;
	inset-inline-end: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	opacity: .45;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	transition: opacity .15s ease;
}
.hanout-cod-icon-user::after {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNmI3YTc1JyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PSc4JyByPSc0Jy8+PHBhdGggZD0nTTQgMjBjMC00IDMuNi03IDgtN3M4IDMgOCA3Jy8+PC9zdmc+");
}
.hanout-cod-icon-phone::after {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNmI3YTc1JyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTUgNGg0bDIgNS0yLjUgMS41YTExIDExIDAgMCAwIDUgNUwxNSAxM2w1IDJ2NGEyIDIgMCAwIDEtMiAyQTE2IDE2IDAgMCAxIDMgNmEyIDIgMCAwIDEgMi0yeicvPjwvc3ZnPg==");
}
.hanout-cod-icon-pin::after {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNmI3YTc1JyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTEyIDIxcy03LTYuMi03LTExYTcgNyAwIDAgMSAxNCAwYzAgNC44LTcgMTEtNyAxMXonLz48Y2lyY2xlIGN4PScxMicgY3k9JzEwJyByPScyLjUnLz48L3N2Zz4=");
}
.hanout-cod-input-shell:focus-within::after { opacity: .75; }

/* Some themes (Hanout among them) apply broad, unscoped rules to every
   input/select/textarea on the page — a fixed height, their own padding,
   border, and background-image for the dropdown arrow. Those rules can
   collide with ours (e.g. a forced 35px height squeezing our line-height,
   visually distorting Arabic glyphs). Everything below is deliberately
   !important + scoped under .hanout-cod-wrap so our form always renders
   correctly regardless of what the active theme does elsewhere. */
.hanout-cod-wrap .hanout-cod-input {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	box-sizing: border-box !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	padding: 12px 14px !important;
	border: 1.5px solid var(--hanout-cod-line) !important;
	border-radius: 10px !important;
	background-color: var(--hanout-cod-field-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--hanout-cod-ink) !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}
/* Phone numbers: type text right-to-left in the box, just like the name field,
   instead of the browser's default LTR handling for type="tel". */
.hanout-cod-phone { direction: rtl; text-align: right; unicode-bidi: plaintext; }

.hanout-cod-wrap select.hanout-cod-input {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PSc5JyB2aWV3Qm94PScwIDAgMTQgOSc+PHBhdGggZD0nTTEgMWw2IDYgNi02JyBmaWxsPSdub25lJyBzdHJva2U9JyM2YjdhNzUnIHN0cm9rZS13aWR0aD0nMS42JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") !important;
	background-repeat: no-repeat !important;
	background-position: left 12px center !important;
	background-color: var(--hanout-cod-field-bg) !important;
	padding-left: 34px !important;
	padding-right: 14px !important;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.hanout-cod-wrap .hanout-cod-input:hover { border-color: #cfd3ce !important; }
.hanout-cod-wrap .hanout-cod-input:focus {
	outline: none !important;
	border-color: var(--hanout-cod-primary) !important;
	background-color: var(--hanout-cod-bg) !important;
	box-shadow: 0 0 0 3px rgba(15, 77, 63, 0.12) !important;
}
.hanout-cod-wrap .hanout-cod-input:disabled { opacity: .55; cursor: not-allowed; }
.hanout-cod-wrap .hanout-cod-input.hanout-cod-error { border-color: var(--hanout-cod-error) !important; }

.hanout-cod-variations { margin-bottom: 4px; }

/* ---- variation swatches (color dots / text pills) ---- */
.hanout-cod-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.hanout-cod-swatch {
	position: relative;
	border: 1.5px solid var(--hanout-cod-line);
	background: var(--hanout-cod-field-bg);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.hanout-cod-swatch:hover { transform: translateY(-1px); }
.hanout-cod-swatch.is-selected {
	border-color: var(--hanout-cod-primary);
	box-shadow: 0 0 0 3px rgba(15, 77, 63, 0.12);
}
.hanout-cod-swatch-text {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hanout-cod-ink);
}
.hanout-cod-swatch-text.is-selected { color: var(--hanout-cod-primary); }
.hanout-cod-swatch-color {
	width: 38px;
	height: 38px;
	padding: 3px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hanout-cod-swatch-dot {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--hanout-cod-swatch-color, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
	position: relative;
}
.hanout-cod-swatch-color.is-selected .hanout-cod-swatch-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--hanout-cod-bg), 0 0 0 4px var(--hanout-cod-primary);
}

/* ---- shipping method list (read from real WooCommerce shipping zones) ---- */
.hanout-cod-shipping-group { transition: opacity .25s ease; }
.hanout-cod-shipping-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hanout-cod-shipping-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid var(--hanout-cod-line);
	border-radius: 10px;
	background: var(--hanout-cod-field-bg);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	animation: hanout-cod-field-in .3s ease both;
}
.hanout-cod-shipping-option:hover { border-color: #cfd3ce; }
.hanout-cod-shipping-option.is-selected {
	border-color: var(--hanout-cod-primary);
	background: rgba(15, 77, 63, 0.05);
}
.hanout-cod-shipping-option input { accent-color: var(--hanout-cod-primary); width: 16px; height: 16px; }
.hanout-cod-shipping-option-main { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.hanout-cod-shipping-option-price { font-size: 13.5px; color: var(--hanout-cod-primary); font-weight: 700; white-space: nowrap; }
.hanout-cod-shipping-empty {
	font-size: 13px;
	color: var(--hanout-cod-muted);
	padding: 10px 12px;
	background: rgba(179,38,30,.05);
	border: 1px dashed var(--hanout-cod-line);
	border-radius: 8px;
}

/* ---- quantity + submit ---- */
.hanout-cod-footer {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 6px;
}

.hanout-cod-qty {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--hanout-cod-line);
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
}
.hanout-cod-wrap .hanout-cod-qty button {
	background: #f4f4f1 !important;
	border: none !important;
	width: 38px !important;
	height: 46px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: var(--hanout-cod-primary) !important;
	cursor: pointer;
	padding: 0 !important;
	transition: background .15s ease, transform .1s ease;
}
.hanout-cod-qty button:hover { background: var(--hanout-cod-accent-soft); }
.hanout-cod-qty button:active { transform: scale(.92); }
.hanout-cod-wrap .hanout-cod-qty-input {
	width: 42px !important;
	height: 46px !important;
	min-height: 0 !important;
	border: none !important;
	border-inline: 1.5px solid var(--hanout-cod-line) !important;
	text-align: center !important;
	font-size: 15px !important;
	padding: 0 !important;
	color: var(--hanout-cod-ink) !important;
	background: var(--hanout-cod-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	-moz-appearance: textfield !important;
}
.hanout-cod-qty-input::-webkit-outer-spin-button,
.hanout-cod-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hanout-cod-wrap .hanout-cod-submit {
	flex: 1 1 auto;
	position: relative;
	width: auto !important;
	background: linear-gradient(180deg, var(--hanout-cod-primary) 0%, var(--hanout-cod-primary-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	letter-spacing: .2px;
	padding: 0 18px !important;
	height: 46px !important;
	min-height: 0 !important;
	line-height: normal !important;
	box-sizing: border-box !important;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
	box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(15,77,63,.28) !important;
}
.hanout-cod-submit:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px rgba(15,77,63,.34) !important; }
.hanout-cod-submit:active { transform: translateY(1px); }
.hanout-cod-submit:disabled { cursor: progress; filter: grayscale(.15) brightness(.95); }

.hanout-cod-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	margin-inline-start: 8px;
	vertical-align: -3px;
	animation: hanout-cod-spin .7s linear infinite;
}
.hanout-cod-submit.is-loading .hanout-cod-spinner { display: inline-block; }
.hanout-cod-submit.is-loading .hanout-cod-submit-text { opacity: .85; }

@keyframes hanout-cod-spin { to { transform: rotate(360deg); } }

.hanout-cod-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--hanout-cod-line);
	font-size: 13.5px;
	color: var(--hanout-cod-muted);
}
.hanout-cod-total-price {
	font-size: 18px;
	color: var(--hanout-cod-primary);
	transition: color .2s ease;
}
.hanout-cod-total-price.is-updated { animation: hanout-cod-total-pulse .4s ease; }
@keyframes hanout-cod-total-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.hanout-cod-message {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	border-radius: 8px;
	display: none;
	padding: 10px 12px;
}
.hanout-cod-message.is-visible {
	display: block;
	animation: hanout-cod-field-in .25s ease both;
}
.hanout-cod-message.is-success {
	background: rgba(15,77,63,.08);
	color: var(--hanout-cod-primary-dark);
	border: 1px solid rgba(15,77,63,.18);
}
.hanout-cod-message.is-error {
	background: rgba(179,38,30,.08);
	color: var(--hanout-cod-error);
	border: 1px solid rgba(179,38,30,.18);
}

/* Scoped + !important on the visual properties: themes commonly restyle every
   <button> (background, colour, height…), which used to turn this into a solid
   theme-coloured block or an unreadable ghost button. */
.hanout-cod-wrap .hanout-cod-add-to-cart-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	background: transparent !important;
	border: 1.5px solid var(--hanout-cod-primary) !important;
	color: var(--hanout-cod-primary) !important;
	border-radius: 10px !important;
	height: 44px;
	min-height: 0;
	padding: 0 14px;
	box-sizing: border-box;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.hanout-cod-wrap .hanout-cod-add-to-cart-btn:hover { background: color-mix(in srgb, var(--hanout-cod-primary) 8%, transparent) !important; }
.hanout-cod-wrap .hanout-cod-add-to-cart-btn:active { transform: translateY(1px); }
.hanout-cod-wrap .hanout-cod-add-to-cart-btn:disabled { opacity: .75; cursor: default; }

.hanout-cod-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	background: var(--hanout-cod-bg);
	border: 1.5px solid #25d366;
	color: #128c4a;
	border-radius: 10px;
	height: 44px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	transition: background .15s ease, transform .12s ease;
}
.hanout-cod-whatsapp:hover { background: #eafff2; color: #0d6b38; transform: translateY(-1px); }
.hanout-cod-whatsapp-icon { font-size: 17px; }

.hanout-cod-optional {
	font-weight: 400;
	color: var(--hanout-cod-muted);
	font-size: 11.5px;
}

/* ---- special offer: two selectable cards (shown after variations) ---- */
.hanout-cod-offer-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.hanout-cod-offer-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 14px;
	border: 1.5px solid var(--hanout-cod-line);
	border-radius: 12px;
	background: var(--hanout-cod-field-bg);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.hanout-cod-offer-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.hanout-cod-offer-card.is-selected {
	border-color: var(--hanout-cod-primary);
	background: rgba(15, 77, 63, 0.05);
	box-shadow: 0 0 0 3px rgba(15, 77, 63, 0.1);
}

.hanout-cod-offer-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--hanout-cod-line);
	background: var(--hanout-cod-bg);
	position: relative;
	transition: border-color .15s ease, background .15s ease;
}
.hanout-cod-offer-card.is-selected .hanout-cod-offer-check {
	border-color: var(--hanout-cod-primary);
	background: var(--hanout-cod-primary);
}
.hanout-cod-offer-card.is-selected .hanout-cod-offer-check::after {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.hanout-cod-offer-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hanout-cod-offer-card-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hanout-cod-ink);
	line-height: 1.4;
}
.hanout-cod-offer-badge {
	align-self: flex-start;
	background: var(--hanout-cod-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.hanout-cod-offer-card-price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}
.hanout-cod-offer-price {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--hanout-cod-primary);
}
.hanout-cod-offer-original {
	font-size: 12px;
	color: var(--hanout-cod-muted);
	text-decoration: line-through;
}
.hanout-cod-offer-card-price .woocommerce-Price-amount {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--hanout-cod-primary);
}

/* ---- offer card size (site-wide, chosen in settings) ----
   "medium" matches the base rules above exactly, so a site that never
   sets this keeps looking exactly as it did before sizing existed. */
.hanout-cod-offer-group--compact .hanout-cod-offer-card { padding: 9px 11px; gap: 8px; }
.hanout-cod-offer-group--compact .hanout-cod-offer-check { width: 18px; height: 18px; }
.hanout-cod-offer-group--compact .hanout-cod-offer-card-title { font-size: 12px; }
.hanout-cod-offer-group--compact .hanout-cod-offer-badge { font-size: 10px; padding: 2px 8px; }
.hanout-cod-offer-group--compact .hanout-cod-offer-price,
.hanout-cod-offer-group--compact .hanout-cod-offer-card-price .woocommerce-Price-amount { font-size: 13.5px; }
.hanout-cod-offer-group--compact .hanout-cod-offer-original { font-size: 11px; }
.hanout-cod-offer-group--compact { gap: 8px; }

.hanout-cod-offer-group--large .hanout-cod-offer-card { padding: 17px 18px; gap: 14px; }
.hanout-cod-offer-group--large .hanout-cod-offer-check { width: 26px; height: 26px; }
.hanout-cod-offer-group--large .hanout-cod-offer-check::after { inset-inline-start: 8px; top: 4px; width: 6px; height: 11px; }
.hanout-cod-offer-group--large .hanout-cod-offer-card-title { font-size: 15.5px; }
.hanout-cod-offer-group--large .hanout-cod-offer-badge { font-size: 12.5px; padding: 4px 12px; }
.hanout-cod-offer-group--large .hanout-cod-offer-price,
.hanout-cod-offer-group--large .hanout-cod-offer-card-price .woocommerce-Price-amount { font-size: 18px; }
.hanout-cod-offer-group--large .hanout-cod-offer-original { font-size: 13.5px; }
.hanout-cod-offer-group--large { gap: 13px; }

/* 10 selectable entrance/attention animations for the offer banner */
.hanout-cod-anim-fade-up     { animation: hanout-cod-offer-fade-up .55s cubic-bezier(.2,.8,.2,1) both; }
.hanout-cod-anim-fade-in     { animation: hanout-cod-offer-fade-in .6s ease both; }
.hanout-cod-anim-slide-right { animation: hanout-cod-offer-slide-right .5s cubic-bezier(.2,.8,.2,1) both; }
.hanout-cod-anim-slide-left  { animation: hanout-cod-offer-slide-left .5s cubic-bezier(.2,.8,.2,1) both; }
.hanout-cod-anim-zoom-in     { animation: hanout-cod-offer-zoom-in .45s cubic-bezier(.2,.8,.2,1) both; }
.hanout-cod-anim-bounce-in   { animation: hanout-cod-offer-bounce-in .7s cubic-bezier(.28,1.4,.5,1) both; }
.hanout-cod-anim-flip-in     { animation: hanout-cod-offer-flip-in .6s ease both; }
.hanout-cod-anim-rotate-in   { animation: hanout-cod-offer-rotate-in .55s cubic-bezier(.2,.8,.2,1) both; }
.hanout-cod-anim-pulse       { animation: hanout-cod-offer-pulse 1.8s ease-in-out infinite; }
.hanout-cod-anim-shimmer     { position: relative; }
.hanout-cod-anim-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: hanout-cod-offer-shimmer 2.4s ease-in-out infinite;
}

@keyframes hanout-cod-offer-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hanout-cod-offer-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hanout-cod-offer-slide-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hanout-cod-offer-slide-left  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hanout-cod-offer-zoom-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes hanout-cod-offer-bounce-in {
	0%   { opacity: 0; transform: scale(.7); }
	60%  { opacity: 1; transform: scale(1.05); }
	80%  { transform: scale(.97); }
	100% { transform: scale(1); }
}
@keyframes hanout-cod-offer-flip-in {
	from { opacity: 0; transform: perspective(600px) rotateX(35deg); }
	to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}
@keyframes hanout-cod-offer-rotate-in {
	from { opacity: 0; transform: rotate(-6deg) scale(.9); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes hanout-cod-offer-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.02); }
}
@keyframes hanout-cod-offer-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =========================================================
   FORM THEMES — full alternate looks, selected in settings.
   "default" (no extra class needed) is the original design
   already documented above and stays completely unchanged.
   ========================================================= */

/* ---- Theme: purple_progress — gradient banner + progress bar ---- */
.hanout-cod-theme--purple_progress { --hanout-cod-theme-purple: #6c4cf0; --hanout-cod-theme-purple-dark: #5638d6; }
.hanout-cod-theme--purple_progress .hanout-cod-theme-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--hanout-cod-theme-purple) 0%, var(--hanout-cod-theme-purple-dark) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 18px;
	border-radius: var(--hanout-cod-radius) var(--hanout-cod-radius) 0 0;
	text-align: center;
}
.hanout-cod-theme-banner-icon { font-size: 18px; }
.hanout-cod-theme--purple_progress .hanout-cod-theme-progress {
	background: #fff;
	padding: 16px 20px 10px;
	border-inline: 1px solid var(--hanout-cod-line);
}
.hanout-cod-theme-progress-track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: #eceaf7;
	margin-bottom: 10px;
}
.hanout-cod-theme-progress-fill {
	position: relative;
	inset-inline-start: 0;
	top: 0;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--hanout-cod-theme-purple), var(--hanout-cod-accent, #e8a33d));
	transition: width .35s ease;
}
.hanout-cod-theme-progress-dot {
	/* A child of the fill bar, anchored to its trailing edge — this way
	   it always tracks the live width the JS sets, with no need to
	   separately recalculate its own position. */
	position: absolute;
	inset-inline-end: -13px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--hanout-cod-theme-purple);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}
.hanout-cod-theme-progress-label { font-size: 12px; color: var(--hanout-cod-muted); }
.hanout-cod-theme-progress-label b { color: var(--hanout-cod-theme-purple); }
.hanout-cod-theme--purple_progress .hanout-cod-form {
	border-radius: 0 0 var(--hanout-cod-radius) var(--hanout-cod-radius);
	border-top: none;
	margin-top: -1px;
}
.hanout-cod-theme--purple_progress .hanout-cod-form::before { display: none; }
.hanout-cod-theme--purple_progress .hanout-cod-input { border-radius: 999px !important; }
.hanout-cod-theme--purple_progress select.hanout-cod-input { padding-left: 40px !important; }
.hanout-cod-theme--purple_progress .hanout-cod-submit {
	background: linear-gradient(135deg, var(--hanout-cod-theme-purple) 0%, var(--hanout-cod-theme-purple-dark) 100%) !important;
	border-radius: 999px !important;
}
.hanout-cod-theme--purple_progress .hanout-cod-qty { border-radius: 999px; overflow: hidden; }
.hanout-cod-theme--purple_progress .hanout-cod-offer-check { border-color: var(--hanout-cod-theme-purple); }
.hanout-cod-theme--purple_progress .hanout-cod-offer-card.is-selected { border-color: var(--hanout-cod-theme-purple) !important; }
.hanout-cod-theme--purple_progress .hanout-cod-offer-card.is-selected .hanout-cod-offer-check { background: var(--hanout-cod-theme-purple) !important; }

/* ---- Theme: purple_delivery — same purple gradient + progress bar, but
   the shipping-method choice is pulled out of the field flow and shown
   centered, directly above the submit button ---- */
.hanout-cod-theme--purple_delivery { --hanout-cod-theme-purple: #6c4cf0; --hanout-cod-theme-purple-dark: #5638d6; }
.hanout-cod-theme--purple_delivery .hanout-cod-theme-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--hanout-cod-theme-purple) 0%, var(--hanout-cod-theme-purple-dark) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 18px;
	border-radius: var(--hanout-cod-radius) var(--hanout-cod-radius) 0 0;
	text-align: center;
}
.hanout-cod-theme--purple_delivery .hanout-cod-theme-progress {
	background: #fff;
	padding: 16px 20px 10px;
	border-inline: 1px solid var(--hanout-cod-line);
}
.hanout-cod-theme--purple_delivery .hanout-cod-form {
	border-radius: 0 0 var(--hanout-cod-radius) var(--hanout-cod-radius);
	border-top: none;
	margin-top: -1px;
}
.hanout-cod-theme--purple_delivery .hanout-cod-form::before { display: none; }
.hanout-cod-theme--purple_delivery .hanout-cod-input { border-radius: 999px !important; }
.hanout-cod-theme--purple_delivery select.hanout-cod-input { padding-left: 40px !important; }
.hanout-cod-theme--purple_delivery .hanout-cod-submit {
	background: linear-gradient(135deg, var(--hanout-cod-theme-purple) 0%, var(--hanout-cod-theme-purple-dark) 100%) !important;
	border-radius: 999px !important;
}
.hanout-cod-theme--purple_delivery .hanout-cod-qty { border-radius: 999px; overflow: hidden; }
.hanout-cod-theme--purple_delivery .hanout-cod-offer-check { border-color: var(--hanout-cod-theme-purple); }
.hanout-cod-theme--purple_delivery .hanout-cod-offer-card.is-selected { border-color: var(--hanout-cod-theme-purple) !important; }
.hanout-cod-theme--purple_delivery .hanout-cod-offer-card.is-selected .hanout-cod-offer-check { background: var(--hanout-cod-theme-purple) !important; }

/* Delivery block pulled to the bottom, centered, right above the submit button. */
.hanout-cod-shipping-group--centered {
	text-align: center;
	max-width: 420px;
	margin: 4px auto 6px;
}
.hanout-cod-shipping-group--centered .hanout-cod-label { display: block; margin-bottom: 10px; font-size: 14px; }
.hanout-cod-shipping-group--centered .hanout-cod-shipping-options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.hanout-cod-shipping-group--centered .hanout-cod-shipping-option {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 140px;
	border-radius: 999px;
}
.hanout-cod-theme--purple_delivery .hanout-cod-shipping-group--centered .hanout-cod-shipping-option.is-selected {
	border-color: var(--hanout-cod-theme-purple);
	background: #f4f1fd;
}
.hanout-cod-theme--purple_delivery .hanout-cod-shipping-group--centered .hanout-cod-shipping-option input { accent-color: var(--hanout-cod-theme-purple); }

/* ---- Theme: minimal_underline — no boxes, underlines only, editorial spacing ---- */
.hanout-cod-theme--minimal_underline .hanout-cod-form {
	border: none;
	box-shadow: none;
	padding: 6px 4px;
}
.hanout-cod-theme--minimal_underline .hanout-cod-form::before { display: none; }
.hanout-cod-theme--minimal_underline .hanout-cod-field-group { margin-bottom: 22px; }
.hanout-cod-theme--minimal_underline .hanout-cod-input {
	background: transparent !important;
	border: none !important;
	border-bottom: 1.5px solid var(--hanout-cod-line) !important;
	border-radius: 0 !important;
	padding-inline: 2px !important;
}
.hanout-cod-theme--minimal_underline .hanout-cod-input:focus {
	box-shadow: none !important;
	border-bottom-color: var(--hanout-cod-primary) !important;
}
.hanout-cod-theme--minimal_underline select.hanout-cod-input { background-position: left 2px center !important; padding-left: 22px !important; }
.hanout-cod-theme--minimal_underline .hanout-cod-label {
	text-transform: uppercase;
	letter-spacing: .6px;
	font-size: 11px;
}
.hanout-cod-theme--minimal_underline .hanout-cod-submit {
	background: transparent !important;
	color: var(--hanout-cod-primary) !important;
	border: 1.5px solid var(--hanout-cod-primary) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}
.hanout-cod-theme--minimal_underline .hanout-cod-submit:hover {
	background: var(--hanout-cod-primary) !important;
	color: #fff !important;
}
.hanout-cod-theme--minimal_underline .hanout-cod-qty { border-radius: 999px; }
.hanout-cod-theme--minimal_underline .hanout-cod-offer-card { border-radius: 4px; box-shadow: none; }

/* ---- Theme: stepper_wizard — a genuinely different structure: one step
   visible at a time (data + location/product + delivery/confirm), with a
   numbered progress indicator and Next/Previous navigation instead of a
   single long scroll. Reuses the purple accent color so it stays on-brand
   with the merchant's chosen palette, but nothing else about its layout
   resembles the other themes. ---- */
.hanout-cod-theme--stepper_wizard .hanout-cod-form {
	border: none;
	box-shadow: 0 10px 30px rgba(20, 20, 40, .08);
	border-radius: 18px;
	padding-top: 26px;
}
.hanout-cod-theme--stepper_wizard .hanout-cod-form::before { display: none; }
.hanout-cod-step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px 20px;
}
.hanout-cod-step-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	background: var(--hanout-cod-field-bg);
	color: #9aa1ae;
	border: 2px solid var(--hanout-cod-line);
	flex: 0 0 auto;
	transition: all .25s ease;
}
.hanout-cod-step-dot.is-active {
	background: var(--hanout-cod-theme-purple);
	border-color: var(--hanout-cod-theme-purple);
	color: #fff;
	transform: scale(1.12);
}
.hanout-cod-step-dot.is-done {
	background: #fff;
	border-color: var(--hanout-cod-theme-purple);
	color: var(--hanout-cod-theme-purple);
}
.hanout-cod-step-line {
	width: 34px;
	height: 2px;
	background: var(--hanout-cod-line);
	flex: 0 0 auto;
}
.hanout-cod-step-panel { display: none; padding: 0 22px; }
.hanout-cod-step-panel.is-active { display: block; animation: hanoutCodStepIn .3s ease; }
@keyframes hanoutCodStepIn {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.hanout-cod-step-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--hanout-cod-ink);
	margin-bottom: 14px;
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--hanout-cod-theme-purple);
}
.hanout-cod-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 18px 0 6px;
}
.hanout-cod-step-nav--final { justify-content: flex-start; }
.hanout-cod-step-nav button {
	border: none;
	border-radius: 999px;
	padding: 11px 26px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
.hanout-cod-step-next {
	background: var(--hanout-cod-theme-purple);
	color: #fff;
	margin-inline-start: auto;
}
.hanout-cod-step-prev {
	background: transparent;
	color: var(--hanout-cod-theme-purple);
	border: 1.5px solid var(--hanout-cod-theme-purple) !important;
}
.hanout-cod-theme--stepper_wizard [data-step="3"] .hanout-cod-footer,
.hanout-cod-theme--stepper_wizard [data-step="3"] .hanout-cod-summary {
	padding-inline: 0;
}
.hanout-cod-theme--stepper_wizard .hanout-cod-submit {
	background: linear-gradient(135deg, var(--hanout-cod-theme-purple), var(--hanout-cod-theme-purple-dark)) !important;
	border-radius: 999px !important;
}
.hanout-cod-theme--stepper_wizard .hanout-cod-input { border-radius: 12px !important; }
.hanout-cod-theme--stepper_wizard .hanout-cod-offer-card.is-selected { border-color: var(--hanout-cod-theme-purple) !important; }
.hanout-cod-theme--stepper_wizard .hanout-cod-offer-card.is-selected .hanout-cod-offer-check { background: var(--hanout-cod-theme-purple) !important; }

/* =========================================================
   OFFER STYLES — independent of form theme.
   ========================================================= */

/* ---- offer_style: badge_pill — dashed row, savings pill + percent ---- */
.hanout-cod-offer-style--badge_pill .hanout-cod-offer-card {
	border-style: dashed;
}
.hanout-cod-offer-style--badge_pill .hanout-cod-offer-card.is-selected { background: #eef0ef; border-style: solid; }
.hanout-cod-offer-savings {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}
.hanout-cod-offer-savings-pill {
	background: #ef7d2b;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.hanout-cod-offer-savings-percent {
	color: #2f9e44;
	font-size: 12px;
	font-weight: 700;
}

/* ---- offer_style: compact_strip — minimal single-line rows ---- */
.hanout-cod-offer-style--compact_strip.hanout-cod-offer-group { gap: 0; border: 1px solid var(--hanout-cod-line); border-radius: 10px; overflow: hidden; }
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-card {
	border: none;
	border-radius: 0;
	padding: 10px 14px;
	box-shadow: none !important;
}
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-card:not(:last-child) { border-bottom: 1px solid var(--hanout-cod-line); }
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-card.is-selected { box-shadow: none !important; background: rgba(15,77,63,.05); }
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-check { width: 16px; height: 16px; }
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-card-title { font-size: 12.5px; }
.hanout-cod-offer-style--compact_strip .hanout-cod-offer-badge { display: none; }

/* ---- offer_style: image_card — shows the merchant-chosen offer image ---- */
.hanout-cod-offer-card--has-image { align-items: center; }
.hanout-cod-offer-card-image {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--hanout-cod-line);
	background: var(--hanout-cod-field-bg);
}
.hanout-cod-offer-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hanout-cod-offer-style--image_card .hanout-cod-offer-card { align-items: center; }
.hanout-cod-offer-style--image_card .hanout-cod-offer-card-title { font-weight: 700; }

/* ---- offer_style: elegant — quiet, minimal, no badges/dashes ---- */
.hanout-cod-offer-style--elegant.hanout-cod-offer-group { gap: 10px; }
.hanout-cod-offer-style--elegant .hanout-cod-offer-card {
	border: 1px solid var(--hanout-cod-line);
	border-radius: 12px;
	box-shadow: none !important;
	background: transparent;
	padding: 14px 16px;
}
.hanout-cod-offer-style--elegant .hanout-cod-offer-card.is-selected {
	border-color: var(--hanout-cod-primary);
	background: color-mix(in srgb, var(--hanout-cod-primary) 6%, transparent);
}
.hanout-cod-offer-style--elegant .hanout-cod-offer-badge {
	background: transparent;
	color: var(--hanout-cod-primary);
	border: 1px solid var(--hanout-cod-primary);
	font-weight: 600;
}
.hanout-cod-offer-style--elegant .hanout-cod-offer-card-title { font-weight: 600; letter-spacing: .1px; }
.hanout-cod-offer-style--elegant .hanout-cod-offer-original { opacity: .6; }

/* =========================================================
   CUSTOM PRODUCT ATTRIBUTES (variation-swatches style builder)
   ========================================================= */
.hanout-cod-custom-attrs { display: contents; }
.hanout-cod-swatch-thumb {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	overflow: hidden;
	flex: 0 0 auto;
	border: 1px solid var(--hanout-cod-line);
}
.hanout-cod-swatch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hanout-cod-cattr-swatch.hanout-cod-swatch-text,
.hanout-cod-cattr-swatch { gap: 7px; }
.hanout-cod-swatch-price {
	font-size: 11px;
	font-weight: 700;
	color: var(--hanout-cod-primary);
	opacity: .85;
}
.hanout-cod-cattr-swatch.is-selected .hanout-cod-swatch-price { opacity: 1; }
/* On a round color swatch there's no room for the price inline — pin it
   as a small caption under the circle instead. */
.hanout-cod-swatch-color.hanout-cod-cattr-swatch { margin-bottom: 14px; }
.hanout-cod-swatch-color .hanout-cod-swatch-price {
	position: absolute;
	inset-inline-start: 50%;
	top: 100%;
	transform: translateX(-50%);
	white-space: nowrap;
	margin-top: 3px;
}

/* =========================================================
   ORDER SUMMARY — collapsible card (all themes): product line,
   live delivery price, grand total.
   ========================================================= */
.hanout-cod-summary {
	margin-top: 16px;
	border: 1px solid var(--hanout-cod-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--hanout-cod-field-bg);
}
.hanout-cod-summary-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 12px 14px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hanout-cod-ink);
	text-align: right;
}
.hanout-cod-summary-toggle-icon { font-size: 15px; }
.hanout-cod-summary-toggle-label { flex: 1 1 auto; }
.hanout-cod-summary-chevron {
	font-size: 15px;
	line-height: 1;
	transition: transform .2s ease;
	color: var(--hanout-cod-muted);
}
.hanout-cod-summary.is-collapsed .hanout-cod-summary-chevron { transform: rotate(-90deg); }
.hanout-cod-summary-body {
	padding: 0 14px 14px;
	border-top: 1px dashed var(--hanout-cod-line);
	padding-top: 10px;
}
.hanout-cod-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--hanout-cod-muted);
	padding: 6px 0;
}
.hanout-cod-summary-row + .hanout-cod-summary-row { border-top: 1px dashed var(--hanout-cod-line); }
.hanout-cod-summary-product-name { color: var(--hanout-cod-ink); font-weight: 600; }
.hanout-cod-summary-qty { color: var(--hanout-cod-muted); font-weight: 500; margin-inline-start: 4px; }
.hanout-cod-summary-line-price { font-weight: 600; color: var(--hanout-cod-ink); }
.hanout-cod-summary-shipping-price { font-weight: 600; color: var(--hanout-cod-ink); }
.hanout-cod-summary-shipping-price.hanout-cod-summary-placeholder { color: var(--hanout-cod-muted); font-weight: 500; font-style: italic; }
.hanout-cod-summary-row--total { padding-top: 10px; }
.hanout-cod-summary-row--total strong { font-size: 15.5px; }
.hanout-cod-summary-row--total .hanout-cod-total-price { color: var(--hanout-cod-primary); }
/* Static settings-page preview only (non-interactive). */
.hanout-cod-summary.is-collapsed-preview .hanout-cod-summary-toggle { pointer-events: none; }

/* =========================================================
   ANTI-SPAM HONEYPOT — invisible to real shoppers, tab-skipped,
   never shown even to screen readers/print.
   ========================================================= */
.hanout-cod-hp {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

/* =========================================================
   THEME: green_cart — condensed single-column layout, plain
   outlined fields, order-summary card shown above the footer,
   and a shopping-cart accent on the submit row.
   ========================================================= */
.hanout-cod-theme--green_cart .hanout-cod-form {
	box-shadow: none;
	border: 1px solid var(--hanout-cod-line);
	border-radius: 12px;
}
.hanout-cod-theme--green_cart .hanout-cod-form::before { display: none; }
.hanout-cod-theme--green_cart .hanout-cod-input {
	background: #fff !important;
	border: 1.5px solid var(--hanout-cod-line) !important;
	border-radius: 10px !important;
}
.hanout-cod-theme--green_cart .hanout-cod-input-shell::after { display: none; }
.hanout-cod-theme--green_cart .hanout-cod-input-shell .hanout-cod-input { padding-inline-end: 14px !important; }
.hanout-cod-theme--green_cart .hanout-cod-summary {
	margin-top: 4px;
	margin-bottom: 14px;
	border-color: var(--hanout-cod-primary);
	background: #f5faf8;
}
.hanout-cod-theme--green_cart .hanout-cod-footer { flex-direction: row-reverse; }
.hanout-cod-theme--green_cart .hanout-cod-submit {
	background: linear-gradient(180deg, #2fa87f 0%, var(--hanout-cod-primary) 100%) !important;
	border-radius: 10px !important;
}

@media (max-width: 340px) {
	.hanout-cod-wrap { max-width: 100%; }
	/* Only truly tiny/old screens fall back to one field per row — normal
	   phone widths (360px+) keep the two-column "compact" layout, since
	   that's exactly the context it's meant to shorten the form for. */
	.hanout-cod-field-group.hanout-cod-half { grid-template-columns: 1fr; }
	.hanout-cod-form { padding: 20px 14px 14px; }
}
@media (min-width: 341px) and (max-width: 480px) {
	.hanout-cod-wrap { max-width: 100%; }
	.hanout-cod-form { padding: 20px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.hanout-cod-form, .hanout-cod-anim, .hanout-cod-shipping-option, .hanout-cod-message,
	.hanout-cod-spinner, .hanout-cod-total-price,
	[class*="hanout-cod-anim-"] { animation: none !important; }
	.hanout-cod-anim-shimmer::after { display: none; }
	.hanout-cod-submit, .hanout-cod-qty button, .hanout-cod-whatsapp, .hanout-cod-swatch { transition: none; }
}

/* Field flagged by the pre-submit "required" check. */
.hanout-cod-wrap .hanout-cod-input.is-invalid { border-color: #d63638 !important; box-shadow: 0 0 0 3px rgba(214, 54, 56, .15) !important; }