/* 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);
	/* Neutral panel surface: payment-method notes, inline info boxes. */
	--azc-soft: #f7f9fb;
	--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 ----------
   WooCommerce's own stylesheet targets this area through `#payment`, an ID.
   A plain class selector loses to it no matter how specific it looks, which is
   why the payment panel used to come out in Woo's lavender with a cut-off
   gateway banner sticking past the card edge. Every rule below carries the ID
   as well so it actually wins, and the block stays scoped to our wrapper so
   nothing leaks onto the rest of the shop. */
.azc-friendly-checkout .wc_payment_methods,
.azc-friendly-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	border-bottom: 0;
	text-align: left;
}

/* Woo paints #payment lavender. Our cards supply their own surface. */
.azc-friendly-checkout #payment {
	background: transparent;
	border-radius: 0;
}

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

.azc-friendly-checkout .wc_payment_method > label,
.azc-friendly-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	/* Gateway banners (toyyibPay, FPX bank strips) are far wider than a phone.
	   Let them drop to their own line instead of shoving the card open. */
	flex-wrap: wrap;
	gap: .7rem;
	min-width: 0;
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}

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

/* The gateway icon. `min-width: 0` is the important part: without it a flex
   item refuses to shrink below the image's natural width, so a 600px bank
   strip overflows the card and gets clipped by the viewport. */
.azc-friendly-checkout #payment ul.payment_methods li img,
.azc-friendly-checkout #payment ul.payment_methods li.payment_method_paypal img,
.azc-friendly-checkout #payment .payment_method_paypal img {
	max-width: 100%;
	max-height: 2.6em;
	width: auto;
	height: auto;
	min-width: 0;
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
	float: none;
	vertical-align: middle;
	box-shadow: none;
}

.azc-friendly-checkout .payment_box,
.azc-friendly-checkout #payment div.payment_box {
	position: relative;
	width: 100%;
	background: var(--azc-soft, #f7f9fb);
	border-radius: 10px;
	padding: .85rem 1rem;
	margin: .75rem 0 0;
	font-size: .95em;
	line-height: 1.55;
	color: var(--azc-muted);
}

/* Woo draws a little pointer above the box in its own lavender. Recolour it
   to match our surface rather than deleting it — it still shows which method
   the note belongs to. */
.azc-friendly-checkout #payment div.payment_box::before {
	border-bottom-color: var(--azc-soft, #f7f9fb);
	margin: -1em 0 0 1.5em;
}

.azc-friendly-checkout .payment_box p:last-child,
.azc-friendly-checkout #payment div.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);
	}
}