/* Azmeer Checkout — senior-friendly, mobile-first WooCommerce checkout.
   Scoped to .azc-friendly-checkout so it never leaks into the rest of the theme. */

.azc-friendly-checkout {
	--azc-text: #1f2430;
	--azc-muted: #5c6474;
	--azc-line: #d8dde6;
	--azc-focus: #0e7490;
	--azc-ok: #1f7a3d;
	--azc-err: #c0392b;
	/* Decorative accent — borders, radio/checkbox accents, step circles.
	   Overridden inline by the theme picker (AZC_Themes). */
	--azc-accent: #0891b2;
	/* Soft/line tints derived from the accent, used for the promo panel. */
	--azc-accent-soft: #f2fcfe;
	--azc-accent-line: #b3e9f3;
	/* Button surface. Dark enough to carry --azc-cta-text above the
	   WCAG AA 4.5:1 threshold; both are computed, not hand-picked. */
	--azc-cta: #0e7490;
	--azc-cta-dark: #0b5f76;
	--azc-cta-text: #ffffff;
	--azc-focus-ring: rgba(14, 116, 144, .28);
	--azc-radius: 14px;
	--azc-font: 18px;

	font-size: var(--azc-font);
	line-height: 1.65;
	color: var(--azc-text);
}

/* Borders + padding must count inside the width, otherwise 100%-wide inputs
   push the page sideways on a 390px phone. */
.azc-friendly-checkout,
.azc-friendly-checkout *,
.azc-friendly-checkout *::before,
.azc-friendly-checkout *::after {
	box-sizing: border-box;
}

.azc-friendly-checkout img,
.azc-friendly-checkout table {
	max-width: 100%;
}

/* ---------- Typography: big enough for 35–60+ readers ---------- */
.azc-friendly-checkout h3,
.azc-friendly-checkout .azc-step-title {
	font-size: 1.35em;
	font-weight: 700;
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}

.azc-friendly-checkout label {
	display: block;
	font-size: 1.02em;
	font-weight: 600;
	margin-bottom: .35em;
	color: var(--azc-text);
}

.azc-friendly-checkout .azc-hint {
	display: block;
	font-size: .88em;
	font-weight: 400;
	color: var(--azc-muted);
	margin-top: .25em;
}

/* Required marker readable, not a tiny red speck. */
.azc-friendly-checkout .required {
	color: var(--azc-err);
	font-weight: 700;
	text-decoration: none;
	margin-left: .15em;
}

.azc-friendly-checkout .optional {
	color: var(--azc-muted);
	font-weight: 400;
	font-size: .9em;
}

/* ---------- Inputs: large tap targets (min 52px) ---------- */
.azc-friendly-checkout .form-row {
	margin: 0 0 1.15rem;
	padding: 0;
}

/* Single full-name box: full width even if the theme still floats name rows. */
.azc-friendly-checkout .form-row.azc-full-name,
.azc-friendly-checkout p.azc-full-name {
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.azc-friendly-checkout input[type="text"],
.azc-friendly-checkout input[type="tel"],
.azc-friendly-checkout input[type="email"],
.azc-friendly-checkout input[type="number"],
.azc-friendly-checkout textarea,
.azc-friendly-checkout select,
.azc-friendly-checkout .select2-container .select2-selection--single {
	width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	font-size: 1.05em;
	font-family: inherit;
	color: var(--azc-text);
	background: #fff;
	border: 2px solid var(--azc-line);
	border-radius: var(--azc-radius);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.azc-friendly-checkout textarea {
	min-height: 96px;
	line-height: 1.55;
}

/* iOS: 16px+ prevents the auto zoom-in that disorients older users. */
.azc-friendly-checkout input,
.azc-friendly-checkout select,
.azc-friendly-checkout textarea {
	font-size: max(16px, 1.05em);
}

/*
 * Specificity guard against block themes.
 *
 * WooCommerce ships `woocommerce-blocktheme.css` with rules like
 * `.woocommerce-page form .form-row input.input-text { font-size: var(--wp--preset--font-size--small) }`
 * — that scores (0,3,2) and beats our (0,2,1) selectors above, shrinking every
 * field back to ~14px on themes such as Astra/Blocksy/Twenty Twenty-Four.
 * These rules match that specificity so the large, readable sizing survives.
 * Field height and padding are restated for the same reason.
 */
body.azc-checkout-page .azc-friendly-checkout form .form-row input.input-text,
body.azc-checkout-page .azc-friendly-checkout form .form-row textarea.input-text,
body.azc-checkout-page .azc-friendly-checkout form .form-row select,
body.azc-checkout-page .azc-friendly-checkout .form-row input.input-text,
body.azc-checkout-page .azc-friendly-checkout .form-row textarea.input-text,
body.azc-checkout-page .azc-friendly-checkout .form-row select,
body.azc-checkout-page .azc-friendly-checkout .input-text,
body.azc-checkout-page .azc-friendly-checkout .select2-container .select2-selection--single {
	min-height: 56px;
	padding: 14px 16px;
	font-size: max(16px, 1.05em);
	line-height: 1.5;
	font-family: inherit;
	border: 2px solid var(--azc-line);
	border-radius: var(--azc-radius);
	background: #fff;
	color: var(--azc-text);
}

body.azc-checkout-page .azc-friendly-checkout form .form-row textarea.input-text,
body.azc-checkout-page .azc-friendly-checkout .form-row textarea.input-text {
	min-height: 96px;
	line-height: 1.55;
}

/* Labels and the pay button get the same treatment — block themes reset both. */
body.azc-checkout-page .azc-friendly-checkout form .form-row label,
body.azc-checkout-page .azc-friendly-checkout .form-row label {
	font-size: 1.02em;
	line-height: 1.45;
}

body.azc-checkout-page .azc-friendly-checkout #place_order,
body.azc-checkout-page .azc-friendly-checkout .button#place_order {
	float: none;
	clear: both;
	width: 100%;
	min-height: 62px;
	font-size: 1.2em;
	line-height: 1.3;
}

.azc-friendly-checkout input:focus,
.azc-friendly-checkout textarea:focus,
.azc-friendly-checkout select:focus {
	border-color: var(--azc-focus);
	outline: 3px solid var(--azc-focus-ring);
	outline-offset: 1px;
}

/* Visible error state, not colour-only (accessibility). */
.azc-friendly-checkout .woocommerce-invalid input,
.azc-friendly-checkout .woocommerce-invalid select,
.azc-friendly-checkout .woocommerce-invalid textarea {
	border-color: var(--azc-err);
	background: #fff7f6;
}

.azc-friendly-checkout .woocommerce-validated input {
	border-color: var(--azc-ok);
}

/* Select2 (state dropdown) sizing. */
.azc-friendly-checkout .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.azc-friendly-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
	color: var(--azc-text);
}

.azc-friendly-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 54px;
	right: 10px;
}

/* Hidden forced fields (e.g. country locked to Malaysia). */
.azc-friendly-checkout .azc-hidden,
.azc-friendly-checkout p.azc-hidden {
	display: none !important;
}

/* WooCommerce adds its own English "(optional)" span. We add a Malay
   "(pilihan)" one, so hide Woo's to avoid "Emel (pilihan) (optional)". */
.azc-friendly-checkout label .optional {
	display: none !important;
}

.azc-friendly-checkout label .azc-optional {
	display: inline;
	font-weight: 400;
	color: var(--azc-muted, #6b7280);
}

/* ---------- Step headers so the flow feels guided ---------- */
.azc-friendly-checkout .azc-step {
	background: #fff;
	border: 2px solid var(--azc-line);
	border-radius: 18px;
	padding: 1.25rem 1.1rem;
	margin-bottom: 1.1rem;
}

.azc-friendly-checkout .azc-step-head {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: 1rem;
}

.azc-friendly-checkout .azc-step-num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--azc-accent);
	color: var(--azc-cta-text);
	font-weight: 700;
	font-size: 1.05em;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Promotion opt-in: big checkbox, tappable label ---------- */
.azc-friendly-checkout .azc-promo-optin {
	background: var(--azc-accent-soft);
	border: 2px solid var(--azc-accent-line);
	border-radius: var(--azc-radius);
	padding: 1rem 1.05rem;
	margin: 1.25rem 0;
}

.azc-friendly-checkout .azc-promo-optin label {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-weight: 500;
	font-size: 1em;
	line-height: 1.55;
	margin: 0;
	cursor: pointer;
	min-height: 44px;
}

.azc-friendly-checkout .azc-promo-optin input[type="checkbox"] {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 2px 0 0;
	accent-color: var(--azc-cta);
	cursor: pointer;
}

/* ---------- Order review table: readable, no cramped rows ---------- */
.azc-friendly-checkout .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1em;
}

.azc-friendly-checkout .shop_table th,
.azc-friendly-checkout .shop_table td {
	padding: .85rem .5rem;
	border-bottom: 1px solid var(--azc-line);
	text-align: left;
	vertical-align: top;
}

.azc-friendly-checkout .shop_table td:last-child,
.azc-friendly-checkout .shop_table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.azc-friendly-checkout .order-total th,
.azc-friendly-checkout .order-total td {
	font-size: 1.2em;
	font-weight: 700;
	border-bottom: none;
	padding-top: 1rem;
}

/* ---------- Payment methods: card-style, easy to hit ---------- */
.azc-friendly-checkout .wc_payment_methods {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.azc-friendly-checkout .wc_payment_method {
	border: 2px solid var(--azc-line);
	border-radius: var(--azc-radius);
	margin-bottom: .75rem;
	padding: .95rem 1rem;
	background: #fff;
}

.azc-friendly-checkout .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}

.azc-friendly-checkout .wc_payment_method input[type="radio"] {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	accent-color: var(--azc-cta);
	cursor: pointer;
}

.azc-friendly-checkout .payment_box {
	background: #f7f9fb;
	border-radius: 10px;
	padding: .85rem 1rem;
	margin-top: .75rem;
	font-size: .95em;
	color: var(--azc-muted);
}

.azc-friendly-checkout .payment_box p:last-child {
	margin-bottom: 0;
}

/* ---------- Place order button: unmissable ---------- */
.azc-friendly-checkout #place_order,
.azc-friendly-checkout .button.alt {
	display: block;
	/* Themes commonly float the pay button right. A floated button leaves the
	   normal flow, which collapses the trust strip below it to zero width and
	   stacks its text one word per line. Force it back into flow. */
	float: none;
	clear: both;
	width: 100%;
	min-height: 64px;
	padding: 18px 22px;
	font-size: 1.2em;
	font-weight: 700;
	font-family: inherit;
	line-height: 1.3;
	color: var(--azc-cta-text);
	background: var(--azc-cta);
	border: none;
	border-radius: var(--azc-radius);
	cursor: pointer;
	text-align: center;
	letter-spacing: .01em;
	transition: background .15s ease, transform .1s ease;
}

.azc-friendly-checkout #place_order:hover,
.azc-friendly-checkout .button.alt:hover {
	background: var(--azc-cta-dark);
	color: var(--azc-cta-text);
}

.azc-friendly-checkout #place_order:active {
	transform: translateY(1px);
}

.azc-friendly-checkout #place_order:focus-visible {
	outline: 3px solid var(--azc-focus);
	outline-offset: 3px;
}

/* ---------- Trust strip under the button ---------- */
/* Sits after a button the theme may float, so it has to clear the float and
   claim full width itself — otherwise it shrinks to 0px and wraps every word. */
.azc-friendly-checkout .azc-trust {
	display: flex;
	flex-wrap: wrap;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	gap: .5rem 1rem;
	justify-content: center;
	margin-top: 1rem;
	font-size: .92em;
	color: var(--azc-muted);
}

.azc-friendly-checkout .azc-trust span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
}

/* The wrapper must contain the floated button so following content is not
   dragged up alongside it. flow-root (not overflow:hidden) because the mobile
   sticky CTA below needs an ancestor that is NOT a scroll container. */
.azc-friendly-checkout .form-row.place-order,
.azc-friendly-checkout .place-order {
	display: flow-root;
}

/* ---------- Notices: large and clearly worded ---------- */
.azc-friendly-checkout .woocommerce-error,
.azc-friendly-checkout .woocommerce-message,
.azc-friendly-checkout .woocommerce-info {
	font-size: 1em;
	line-height: 1.6;
	border-radius: var(--azc-radius);
	padding: 1rem 1.1rem;
	list-style: none;
	margin: 0 0 1.25rem;
}

.azc-friendly-checkout .woocommerce-error {
	background: #fff5f4;
	border: 2px solid #f3c6c1;
	color: #7d211a;
}

.azc-friendly-checkout .woocommerce-error li {
	margin-left: 0;
	list-style: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	.azc-friendly-checkout {
		--azc-font: 17px;
	}

	.azc-friendly-checkout .azc-step {
		padding: 1.05rem .9rem;
		border-radius: 14px;
	}

	.azc-friendly-checkout .col2-set .col-1,
	.azc-friendly-checkout .col2-set .col-2 {
		width: 100%;
		float: none;
	}

	.azc-friendly-checkout .form-row-first,
	.azc-friendly-checkout .form-row-last {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	/* Sticky order button on mobile so it is always reachable. */
	.azc-friendly-checkout.azc-sticky-cta #place_order {
		position: sticky;
		bottom: 12px;
		z-index: 5;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	}
}

/* ---------- Respect user settings ---------- */
@media (prefers-reduced-motion: reduce) {
	.azc-friendly-checkout * {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-contrast: more) {
	.azc-friendly-checkout {
		--azc-line: #6b7280;
		--azc-muted: #374151;
	}
}


/* ---------- 3-step progress indicator ---------- */
.azc-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: none;
}

.azc-progress-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	text-align: center;
	font-size: .92em;
	color: #5c6474;
	position: relative;
}

.azc-progress-step::after {
	content: "";
	position: absolute;
	top: 19px;
	left: 60%;
	width: 80%;
	height: 3px;
	background: #d8dde6;
	border-radius: 2px;
	z-index: 0;
}

.azc-progress-step:last-child::after {
	display: none;
}

.azc-progress-num {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #eef1f5;
	color: #5c6474;
	font-weight: 700;
	font-size: 1.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #d8dde6;
}

.azc-progress-step.is-active .azc-progress-num {
	background: var(--azc-cta);
	border-color: var(--azc-cta);
	color: var(--azc-cta-text);
}

.azc-progress-step.is-active .azc-progress-label {
	color: #1f2430;
	font-weight: 700;
}

.azc-progress-label {
	line-height: 1.35;
	max-width: 9rem;
}

/* ---------- Order summary card above the form ---------- */
/* Rendered by AZC_Frontend::render_cart_card() at priority 9, so it sits
   inside .azc-friendly-checkout (wrapper opens at priority 5). */
.azc-friendly-checkout .azc-cart-card {
	border: 1px solid var(--azc-accent-line);
	border-radius: var(--azc-radius);
	background: var(--azc-accent-soft);
	padding: 1.1rem 1.15rem;
	margin: 0 0 1.6rem;
}

.azc-friendly-checkout .azc-cart-card__title {
	font-size: 1.12em;
	font-weight: 700;
	margin: 0 0 .85rem;
	color: var(--azc-text);
	letter-spacing: -.01em;
}

.azc-friendly-checkout .azc-cart-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.azc-friendly-checkout .azc-cart-item {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .75rem 0;
	border-top: 1px solid var(--azc-accent-line);
}

.azc-friendly-checkout .azc-cart-item:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Thumbnail box. Fixed size so rows line up even with odd image ratios,
   and position:relative anchors the discount badge. */
.azc-friendly-checkout .azc-cart-item__media {
	position: relative;
	flex: 0 0 76px;
	width: 76px;
}

.azc-friendly-checkout .azc-cart-item__media img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--azc-line);
	background: #fff;
	margin: 0;
}

.azc-friendly-checkout .azc-badge {
	position: absolute;
	top: -8px;
	left: -8px;
	background: var(--azc-err);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
	padding: .3em .45em;
	border-radius: 999px;
	white-space: nowrap;
}

.azc-friendly-checkout .azc-cart-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

.azc-friendly-checkout .azc-cart-item__name {
	display: block;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: .2rem;
}

.azc-friendly-checkout .azc-cart-item__prices {
	display: block;
	line-height: 1.5;
}

/* WooCommerce global styles put a background on <ins>; strip it so the
   sale price reads as plain text next to the struck-out original. */
.azc-friendly-checkout .azc-price-now {
	font-weight: 700;
	font-size: 1.06em;
	text-decoration: none;
	background: none;
	color: var(--azc-text);
}

.azc-friendly-checkout .azc-price-was {
	color: var(--azc-muted);
	font-size: .92em;
	text-decoration: line-through;
	margin-right: .35em;
}

.azc-friendly-checkout .azc-cart-item__qty {
	display: block;
	font-size: .9em;
	color: var(--azc-muted);
	margin-top: .15rem;
}

.azc-friendly-checkout .azc-cart-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .9rem;
	padding-top: .85rem;
	border-top: 2px solid var(--azc-accent-line);
}

.azc-friendly-checkout .azc-cart-card__label {
	font-weight: 600;
}

.azc-friendly-checkout .azc-cart-card__total {
	font-size: 1.3em;
	font-weight: 800;
	color: var(--azc-cta-dark);
	white-space: nowrap;
}

.azc-friendly-checkout .azc-cart-card__saving {
	margin: .55rem 0 0;
	font-size: .95em;
	font-weight: 600;
	color: var(--azc-ok);
}

@media (max-width: 480px) {
	.azc-friendly-checkout .azc-cart-card {
		padding: .9rem;
	}

	.azc-friendly-checkout .azc-cart-item__media,
	.azc-friendly-checkout .azc-cart-item__media img {
		flex-basis: 62px;
		width: 62px;
	}

	.azc-friendly-checkout .azc-cart-item__media img {
		height: 62px;
	}
}

/* Field hint text rendered by WooCommerce descriptions. */
.azc-friendly-checkout .description,
.azc-friendly-checkout .woocommerce-input-wrapper + .description {
	display: block;
	font-size: .89em;
	color: #5c6474;
	margin-top: .35em;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.azc-progress-label {
		font-size: .82em;
		max-width: 6.5rem;
	}
}

/* ------------------------------------------------------------------
   Offer picker — one checkout link, several products, shopper chooses.
   Deliberately NOT scoped to .azc-friendly-checkout: the picker also
   renders on landing pages via [azmeer_offer], where that wrapper does
   not exist. Falls back to its own values when the theme vars are absent.
   ------------------------------------------------------------------ */

.azc-offer {
	--azc-o-accent: var(--azc-accent, #0891b2);
	--azc-o-cta: var(--azc-cta, #0e7490);
	--azc-o-line: var(--azc-line, #d8dde6);
	--azc-o-text: var(--azc-text, #1f2430);
	--azc-o-muted: var(--azc-muted, #5c6474);
	--azc-o-radius: var(--azc-radius, 14px);

	box-sizing: border-box;
	margin: 0 0 1.4rem;
	padding: 1.1rem 1.1rem 1.2rem;
	border: 1px solid var(--azc-o-line);
	border-radius: var(--azc-o-radius);
	background: #fff;
	color: var(--azc-o-text);
	font-size: var(--azc-font, 18px);
	line-height: 1.6;
}

.azc-offer *,
.azc-offer *::before,
.azc-offer *::after {
	box-sizing: border-box;
}

.azc-offer.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* Themes routinely add margin/padding/background to bare <form> elements,
   which would push the picker off-centre inside its own card. */
.azc-offer__form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.azc-offer__title {
	margin: 0 0 .25rem;
	font-size: 1.16em;
	line-height: 1.3;
	font-weight: 700;
}

.azc-offer__sub {
	margin: 0 0 .5rem;
	color: var(--azc-o-muted);
	font-size: .93em;
}

.azc-offer__rule {
	margin: 0 0 .85rem;
	padding: .5rem .7rem;
	border-radius: 10px;
	background: var(--azc-accent-soft, #f2fcfe);
	border: 1px solid var(--azc-accent-line, #b3e9f3);
	font-size: .9em;
	font-weight: 600;
}

.azc-offer__error {
	margin: 0 0 .85rem;
	padding: .55rem .7rem;
	border-radius: 10px;
	background: #fdf1f0;
	border: 1px solid #f0c4bf;
	color: var(--azc-err, #c0392b);
	font-size: .92em;
	font-weight: 600;
}

.azc-offer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

.azc-offer__item {
	margin: 0;
	padding: 0;
	border: 2px solid var(--azc-o-line);
	border-radius: var(--azc-o-radius);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.azc-offer__item.is-selected {
	border-color: var(--azc-o-accent);
	background: var(--azc-accent-soft, #f2fcfe);
	box-shadow: 0 2px 10px rgba(8, 145, 178, .12);
}

.azc-offer__item.is-oos {
	opacity: .55;
}

/* Whole row is the tap target — essential for 35-60+ shoppers on a phone. */
.azc-offer__label {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	padding: .7rem;
	cursor: pointer;
	font-weight: 400;
}

.azc-offer__item.is-oos .azc-offer__label,
.azc-offer__item.is-locked .azc-offer__label {
	cursor: default;
}

.azc-offer__control {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Big enough to hit with a thumb. */
.azc-offer__input {
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--azc-o-accent);
	flex: 0 0 26px;
}

.azc-offer__media {
	position: relative;
	flex: 0 0 76px;
	width: 76px;
	line-height: 0;
}

.azc-offer__media img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--azc-o-line);
	background: #f6f7f9;
	display: block;
}

.azc-offer__badge {
	position: absolute;
	top: -8px;
	left: -6px;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: var(--azc-o-cta);
	color: #fff;
	font-size: .68em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.azc-offer__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.azc-offer__name {
	font-weight: 700;
	line-height: 1.35;
}

.azc-offer__desc {
	font-size: .87em;
	color: var(--azc-o-muted);
}

.azc-offer__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	margin-top: .1rem;
}

.azc-offer__price del {
	color: var(--azc-o-muted);
	font-size: .87em;
	text-decoration-thickness: 1px;
}

.azc-offer__price ins,
.azc-offer__now {
	text-decoration: none;
	font-weight: 700;
	color: var(--azc-o-cta);
}

.azc-offer__unit {
	font-size: .82em;
	color: var(--azc-o-muted);
}

.azc-offer__oos,
.azc-offer__locked {
	font-size: .82em;
	font-weight: 600;
	color: var(--azc-o-muted);
}

.azc-offer__qty {
	flex: 0 0 auto;
}

.azc-offer__qty-input {
	min-height: 46px;
	min-width: 68px;
	padding: .3rem .5rem;
	border: 1px solid var(--azc-o-line);
	border-radius: 10px;
	font-size: .95em;
	background: #fff;
	color: inherit;
}

.azc-offer__actions {
	margin: .9rem 0 0;
}

.azc-offer__update {
	min-height: 50px;
	padding: .6rem 1.2rem;
	border: 0;
	border-radius: 12px;
	background: var(--azc-o-cta);
	color: var(--azc-cta-text, #fff);
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
}

.azc-offer__input:focus-visible + .azc-offer__media,
.azc-offer__input:focus-visible,
.azc-offer__qty-input:focus-visible,
.azc-offer__update:focus-visible {
	outline: 3px solid var(--azc-o-accent);
	outline-offset: 2px;
}

.azc-offer--standalone {
	max-width: 640px;
	margin-inline: auto;
}

/* "Semua wajib" mode: every row is compulsory, so a column of permanently
   ticked, disabled boxes only invites the shopper to try clicking them. Show a
   plain checkmark instead and keep the row read-only. */
.azc-offer--all .azc-offer__input {
	display: none;
}

.azc-offer--all .azc-offer__control::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--azc-o-accent);
	color: #fff;
	font-size: .9em;
	font-weight: 700;
	line-height: 1;
}

.azc-offer--all .azc-offer__item.is-selected {
	/* Nothing is optional, so a "chosen" highlight carries no information. */
	background: transparent;
	box-shadow: none;
}

@media (max-width: 480px) {
	.azc-offer {
		padding: .85rem;
	}

	.azc-offer__label {
		gap: .55rem;
		padding: .6rem;
		flex-wrap: wrap;
	}

	.azc-offer__media,
	.azc-offer__media img {
		flex-basis: 60px;
		width: 60px;
	}

	.azc-offer__media img {
		height: 60px;
	}

	/* Quantity drops to its own line so the name is never squeezed. */
	.azc-offer__qty {
		flex: 1 0 100%;
		padding-left: calc(26px + 60px + 1.1rem);
	}
}