/* Conversion Pro — Checkout / Address visual re-skin (module 4).
 *
 * Reference: www.buy.stickme.in's real Cart/Address checkout — tokens below
 * are not guesses, they're getComputedStyle() values pulled directly off
 * that live reference (Cart "Confirm Order" step and the Address step),
 * replacing the earlier build's secondhand-doc palette (buy.stickme.in was
 * unreachable at that time; the working URL turned out to need a `www.`
 * prefix). Captured tokens:
 *   - Primary red:      #C4080E (segmented toggle active state, buttons,
 *                        focus rings, "Save Address" CTA)
 *   - Savings green:     #348118 (Bill Details discount/total rows)
 *   - Offers green:      #20994C (Offers & Discounts panel — see
 *                        coupons-drawer.css, kept as its own token since the
 *                        reference site itself uses a visibly different
 *                        green there than on the Bill Details panel)
 *   - Panel gray:        #F0F0F0 (Bill Details background)
 *   - Input border:      #6C7778
 *   - Label gray:        #4B5563
 *   - Radii:             8px (buttons, toggle wrapper), 6px (inputs)
 *   - Type:              Inter (body/labels), "Amazon Ember" (headings/CTAs)
 *
 * Payment step is explicitly OUT of scope per the user — it stays wired to
 * the existing gateway (Razorpay) with no visual rebuild. Only Cart and
 * Address are re-skinned here.
 *
 * Applies to BOTH the classic `[woocommerce_checkout]` shortcode and the
 * WooCommerce Checkout/Cart blocks — selectors are duplicated across both
 * markup families throughout, same approach already used in
 * product-card.css for the classic/blocks split on the shop loop.
 */

/* ---------- Layout polish ---------- */

.woocommerce-checkout .col2-set,
.wc-block-checkout__main,
.wp-block-woocommerce-checkout,
.woocommerce-cart-form,
.wc-block-cart {
	--cvp-accent: #C4080E;
	--cvp-saving: #348118;
	--cvp-panel-gray: #F0F0F0;
	--cvp-input-border: #6C7778;
	--cvp-label-gray: #4B5563;
	--cvp-border: #eee;
	font-family: Inter, -apple-system, sans-serif;
}

/* ---------- Step indicator (Cart -> Address -> Payment) ----------
 * Reference: three separate circular nodes (not two) — done/active are
 * solid green with a white checkmark/dash glyph, the pending node is an
 * empty gray-outlined circle. Connector between done->active is a solid
 * green line; the connector leading to the pending node is dotted gray. */

/* Small brand logo above the step track (container 1 in the reference
   mockup) — inserted by insertBrandLogo() in cart-payment-method.js (Cart
   page) and the equivalent block in checkout-blocks.js's
   initStepIndicator() (Address/Payment step), since neither template
   renders the theme's own header. */
.cvp-brand-logo {
	display: block;
	max-height: 64px;
	width: auto;
	margin: 0 auto 16px;
}

.cvp-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #999;
}
.cvp-checkout-steps__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.cvp-checkout-steps__label {
	font-weight: 600;
	color: #999;
}
.cvp-checkout-steps__step.is-active .cvp-checkout-steps__label,
.cvp-checkout-steps__step.is-done .cvp-checkout-steps__label {
	color: #000;
}
.cvp-checkout-steps__dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #ddd;
	color: #999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
}
.cvp-checkout-steps__step.is-active .cvp-checkout-steps__dot,
.cvp-checkout-steps__step.is-done .cvp-checkout-steps__dot {
	background: #20994C;
	border-color: #20994C;
	color: #fff;
}
.cvp-checkout-steps__sep {
	width: 60px;
	height: 0;
	border-top: 2px solid #ddd;
	margin: 0 -1px 26px;
}
.cvp-checkout-steps__sep.is-done {
	border-top-style: solid;
	border-top-color: #20994C;
}
.cvp-checkout-steps__sep:not(.is-done) {
	border-top-style: dotted;
}

/* ---------- Order summary / "Bill Details" panel ----------
 * Reference renders this as a flat gray (#F0F0F0) panel, not a white
 * bordered card — the "Bill Details" heading sits at 20px/500 directly
 * above it. */

.woocommerce-checkout-review-order,
.wc-block-components-sidebar,
.wc-block-checkout__sidebar,
.cart_totals,
.wc-block-cart__totals-title,
.wc-block-cart-totals {
	background: var( --cvp-panel-gray, #F0F0F0 );
	border: none;
	border-radius: 8px;
	padding: 20px !important;
}

.woocommerce-checkout-review-order-table thead th,
.wc-block-components-totals-item__label,
.cart_totals h2 {
	font-size: 20px;
	font-weight: 500;
	color: #000;
}

/* Reference site's sidebar has no "Cart Totals" heading at all — it goes
   straight from the panel into "Offers & Discounts". Motta's Cart block
   renders one by default (.wc-block-cart__totals-title, matched above for
   sites that DO want it styled) — hidden here since the reference has none. */
.wc-block-cart__totals-title {
	display: none !important;
}

/* Cart page's "Bill Details" totals block (Item Total / Prepaid Coupon /
   Delivery Fee / Order Total — see initBillDetails() in cart-payment-
   method.js, which relabels these rows and adds the heading below). The
   sidebar column already carries the same grey (--cvp-panel-gray) via the
   broad .wc-block-components-sidebar rule above, so this doesn't create a
   visible seam — it just gives the totals sub-block its own explicit
   rounded/padded shape as a distinct card, same as the reference's
   grouped "final summary" section, separate from the white Offers &
   Discounts / Payment Method cards above it. */
.wp-block-woocommerce-cart-order-summary-totals-block {
	background: var( --cvp-panel-gray, #F0F0F0 );
	border-radius: 8px;
	padding: 4px 20px 12px;
	margin-bottom: 20px;
}
/* "Estimated total" (relabeled "Order Total" by cart-payment-method.js's
   relabelBillRow()) renders in its own sibling wrapper right after the
   block above, not inside it — WooCommerce's Cart Block manages that node
   with React. An earlier version of this stylesheet's JS counterpart
   physically moved that sibling INTO the block above so they'd share one
   card visually; that broke live (moving a React-managed node confused
   the block's own re-rendering and made the Item Total row vanish
   entirely when switching to Cash on Delivery). Merging the two into one
   visual card with plain adjacent-sibling CSS instead avoids touching
   React's DOM at all — same look, no reconciliation risk. */
.wp-block-woocommerce-cart-order-summary-totals-block:has( + .wc-block-components-totals-wrapper ) {
	border-radius: 8px 8px 0 0;
	margin-bottom: 0;
}
.wp-block-woocommerce-cart-order-summary-totals-block + .wc-block-components-totals-wrapper {
	background: var( --cvp-panel-gray, #F0F0F0 );
	border-radius: 0 0 8px 8px;
	padding: 0 20px 12px;
	margin-bottom: 20px;
}
.cvp-bill-details-heading {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	margin: 12px 0 4px;
}
/* Prepaid Coupon / any other fee row — same savings green used elsewhere
   in Bill Details (--cvp-saving). */
.cvp-bill-row--fee .wc-block-components-totals-item__value {
	color: var( --cvp-saving, #348118 );
	font-weight: 600;
}
/* Delivery Fee placeholder — shown when WooCommerce can't determine a
   shipping rate yet (no address entered). Muted/italic so it reads as
   "not decided yet" rather than a real ₹0 amount. */
.cvp-bill-row--shipping-placeholder .wc-block-components-totals-item__value {
	color: #888;
	font-style: italic;
	font-weight: 400;
}
/* "Including ₹X in taxes" sub-line under Order Total — reference doesn't
   show it. CSS backup for initBillDetails()'s inline display:none, in
   case that JS runs before this specific row re-renders. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	display: none !important;
}

/* Discount / incentive line items (Prepaid Coupon, cart coupons) read as
   a savings row, matching the reference Bill Details panel's green. */
.woocommerce-checkout-review-order-table .fee td,
.woocommerce-checkout-review-order-table .cart-discount td,
.wc-block-components-totals-item:has(.wc-block-components-totals-item__label:is([class*="coupon"], [class*="discount"], [class*="fee"])) .wc-block-components-totals-item__value,
.wc-block-components-totals-item__value.is-negative {
	color: var( --cvp-saving, #348118 );
	font-weight: 600;
}

.woocommerce-checkout-review-order-table .order-total td,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
	font-weight: 700;
	color: #222;
}
/* Divider above Order Total so it reads as a distinct final line, not
   just another row in the list — same visual pattern as
   .cvp-bill-row--total on the Address/Payment step's own Bill Details box
   (checkout-blocks.js's renderBill()). */
.wc-block-components-totals-footer-item {
	border-top: 1px solid #ddd;
	margin-top: 8px;
	padding-top: 10px !important;
}

/* ---------- Form fields (Address step) ---------- */

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.wc-block-components-text-input label,
.wc-block-components-address-form label {
	font-size: 16px;
	font-weight: 400;
	color: var( --cvp-label-gray, #4B5563 );
}

.woocommerce-billing-fields input.input-text,
.woocommerce-shipping-fields input.input-text,
.woocommerce-additional-fields input.input-text,
.woocommerce-checkout select,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.select2-selection {
	border: 1px solid var( --cvp-input-border, #6C7778 ) !important;
	border-radius: 6px !important;
	padding: 12px !important;
	font-size: 16px !important;
	transition: border-color 0.15s ease;
}

.woocommerce-billing-fields input.input-text:focus,
.woocommerce-shipping-fields input.input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
	border-color: var( --cvp-accent, #C4080E ) !important;
	outline: none;
	box-shadow: 0 0 0 1px var( --cvp-accent, #C4080E );
}

/* Primary submit ("Save Address" / "Place Order") */
#place_order,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.woocommerce-checkout-review-order-table + .form-row .button,
button.checkout-button,
.wc-proceed-to-checkout .checkout-button {
	background: var( --cvp-accent, #C4080E ) !important;
	color: #fff !important;
	border: 1px solid var( --cvp-accent, #C4080E ) !important;
	border-radius: 8px !important;
	font-weight: 400;
	padding: 12px !important;
}

/* Cart page's own "Checkout" button (container 8 in the reference mockup)
   reads shorter/tighter than the shared rule above gives it, with
   slightly bolder text — narrower vertical padding instead of the general
   12px, and 600 weight instead of 400. */
.wc-block-cart__submit-button {
	padding: 8px 12px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

/* ---------- Payment method list — card treatment ---------- */

ul.wc_payment_methods li.wc_payment_method,
.wc-block-components-radio-control__option {
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Classic checkout's payment_method <li> has no padding of its own by
   default (unlike the Blocks radio option, which already reserves room
   for its radio dot) — safe to add here without the overlap risk the
   Blocks side has. */
ul.wc_payment_methods li.wc_payment_method {
	padding: 14px !important;
}

ul.wc_payment_methods li.wc_payment_method.selected,
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control__option.is-active {
	border-color: var( --cvp-accent, #C4080E );
	background: #FDF3F3;
}

ul.wc_payment_methods li.wc_payment_method label,
.wc-block-components-radio-control__option-layout__label {
	font-weight: 600;
}

/* ---------- COD verification notice (CVP_Cod_Gate / Blocks RouteException) ---------- */

.woocommerce-error,
.wc-block-store-notice.is-error,
.wc-block-components-notice-banner.is-error {
	border: 1px solid #C4080E !important;
	background: #FDF3F3 !important;
	color: #7A0509 !important;
	border-radius: 8px !important;
	font-weight: 600;
}

/* ---------- Delivery / Pickup segmented toggle ----------
 * Reference: a single pill-shaped wrapper (2px solid red border, 8px
 * radius, overflow hidden) containing two equal-width flat buttons —
 * active = solid red bg / white text, inactive = white bg / black text.
 * No gap between the two segments and no per-button border/radius; the
 * wrapper alone carries the shape. */

.cvp-delivery-pickup-toggle {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border: 2px solid var( --cvp-accent, #C4080E );
	border-radius: 8px;
	overflow: hidden;
	max-width: 430px;
}
/* Reported live, twice now: (1) the page read as un-elegant — data field
   boxes were taller than they needed to be, and the Save Address button
   ended up noticeably shorter than the fields above it once those weren't
   shrunk to match; (2) after the first pass, the Mobile Number row still
   showed a visible height mismatch between the "+91" prefix box and its
   input, and the State/Address Type dropdowns had their text clipped.
   Root cause of both (2) issues: WooCommerce's own Blocks checkout.css
   (wc-10.9.4) loads AFTER this stylesheet in the page's <link> order and
   carries same-specificity plain `input`/`select` rules of its own
   (padding: 12px, font-size: 16px, no explicit height) — with equal
   specificity, later source order wins, so WooCommerce's defaults were
   silently overriding every rule below that didn't carry !important,
   which is exactly why the computed height came out ~60px instead of the
   var(--cvp-field-height) this rule sets. Added !important throughout
   this block (matching the established pattern already used earlier in
   this file for the same WC-Blocks-cascade fight) so these rules always
   win regardless of stylesheet load order. Also shrunk the shared height
   itself ~18% (40px to 33px) per the "make it smaller" ask, and added an
   explicit line-height so <select> elements — which don't obey
   align-items centering the way flex children do — stay vertically
   centered instead of clipping their text against a too-short box. */
.cvp-address-step {
	--cvp-field-height: 33px;
}
.cvp-delivery-pickup-toggle button {
	flex: 1;
	height: var( --cvp-field-height ) !important;
	padding: 0 12px !important;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #000;
	font-size: 13px !important;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cvp-delivery-pickup-toggle button.is-active {
	background: var( --cvp-accent, #C4080E );
	color: #fff;
}

.cvp-store-address-card,
.cvp-store-address-card--blocks {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 16px;
	background: #FDF3F3;
}
.cvp-store-address-card strong,
.cvp-store-address-card--blocks strong {
	color: var( --cvp-accent, #C4080E );
	display: block;
	margin-bottom: 4px;
}

/* Native Blocks "Pickup locations" radio list — same card treatment as
   the payment method list above, for visual consistency between the two
   choice lists on the same page. */
.wc-block-checkout__pickup-option {
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 10px;
}
.wc-block-checkout__pickup-option[aria-checked="true"] {
	border-color: var( --cvp-accent, #C4080E );
	background: #FDF3F3;
}

/* ---------- Cart page: Order Items styling ----------
 * Reference row layout: small (~72px) square thumbnail, product name
 * clamped to two lines (not the full generated title), price line with a
 * green "X% off" read (no separate absolute "Save ₹X,XXX" line, no
 * separate right-aligned "Total" column at all — the price shown IS the
 * line total since these are simple/no-variation products), then a text
 * "Remove" pill and the red-outline quantity stepper side by side below
 * the price. WooCommerce's Cart block is a <table> by default (Product /
 * Total header + three <td>s per row); overridden to a flex row here
 * since the reference has neither of those things. */

.wc-block-cart-items__header {
	display: none !important;
}
.wc-block-cart-item__total {
	display: none !important;
}

.wc-block-cart-items,
.wc-block-cart-items tbody {
	display: block !important;
	width: 100%;
}
.wc-block-cart-items__row {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

/* Remove now lives here too (moved by moveRemoveButtonsUnderImage() in
   cart-payment-method.js) — flex column so it sits directly below the
   thumbnail, centered to its width, matching the reference layout instead
   of its old spot inline with the quantity stepper. */
.wc-block-cart-item__image {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 72px !important;
}
.wc-block-cart-item__image img {
	width: 72px !important;
	height: 72px !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}
.wc-block-cart-item__image .wc-block-cart-item__remove-link {
	order: 0;
}

.wc-block-cart-item__product {
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
}

/* !important on display: confirmed live the clamp was silently a no-op —
   -webkit-line-clamp only takes effect when display computes to
   -webkit-box (or flex + the standard line-clamp property), and Motta's
   own link styling was winning the specificity fight on `display`,
   leaving it at `block` (getComputedStyle confirmed: display:block,
   -webkit-line-clamp:2 — the clamp value was present but inert). Same
   class of bug as the quantity-stepper/Remove-link fixes elsewhere in
   this file. */
.wc-block-components-product-name {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	color: #000;
	text-decoration: none;
	word-break: break-word;
}

/* Left/right column width — 50/50 split, same as the Address/Payment
   step's .cvp-address-step (see below); WooCommerce's Cart block sidebar-
   layout flex container carries no explicit gap of its own (the sidebar's
   own 20px left padding is what visually separates the two columns —
   measured via getComputedStyle() live), so no gap needs to be subtracted
   here the way it does on the Address step. */
.wc-block-components-sidebar-layout.wc-block-cart {
	gap: 32px;
}
.wc-block-cart__main {
	flex: 0 0 calc( 50% - 16px ) !important;
	max-width: calc( 50% - 16px ) !important;
}
.wc-block-cart__sidebar {
	flex: 0 0 calc( 50% - 16px ) !important;
	max-width: calc( 50% - 16px ) !important;
	/* The sidebar's own 20px left padding (native to the block) was
	   previously doing double duty as the visual gap between columns —
	   now that the flex parent has an explicit gap of its own, drop it so
	   the two don't stack into an oversized gap. */
	padding-left: 0 !important;
}

.wc-block-cart-item__quantity {
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.wc-block-components-quantity-selector {
	display: inline-flex !important;
	border: 2px solid #C4080E !important;
	border-radius: 8px !important;
	overflow: hidden;
	background: #fff !important;
	width: auto !important;
	flex: 0 0 auto !important;
}
/* The "−"/"+" glyph itself is hidden (font-size:0) and replaced with a
   hand-drawn CSS icon (solid bars via ::before/::after, not a font glyph)
   after exhaustive live-site verification ruled out any duplicate element:
   getBoundingClientRect, elementsFromPoint's full hit-test stack (not just
   topmost), text-shadow/-webkit-text-stroke/transform/filter/blend-mode
   all checked clean, and a live DOM test swapping the actual character to
   a plain "-" still read as visually doubled. That points at font
   hinting/anti-aliasing of a thin horizontal stroke at a sub-pixel
   position (a well-known artifact for hairline glyphs at small sizes) —
   so the fix is to stop relying on the font to draw it at all. A plain
   CSS bar is pixel-snapped and can't double. */
.wc-block-components-quantity-selector__button {
	border: none !important;
	background: #fff !important;
	color: #C4080E !important;
	font-size: 0 !important;
	width: 40px !important;
	height: 40px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}
.wc-block-components-quantity-selector__button::before {
	content: "" !important;
	position: absolute !important;
	width: 14px !important;
	height: 2px !important;
	background: #C4080E !important;
	border-radius: 1px !important;
}
.wc-block-components-quantity-selector__button--plus::after {
	content: "" !important;
	position: absolute !important;
	width: 2px !important;
	height: 14px !important;
	background: #C4080E !important;
	border-radius: 1px !important;
}
.wc-block-components-quantity-selector__input {
	border: none !important;
	border-left: 1px solid #eee !important;
	border-right: 1px solid #eee !important;
	text-align: center;
	width: 40px !important;
	height: 40px !important;
	font-size: 15px !important;
	color: #000 !important;
	order: 1;
}
.wc-block-components-quantity-selector__button--minus {
	order: 0;
}
.wc-block-components-quantity-selector__button--plus {
	order: 2;
}

/* Reference's Remove is a plain text link — no icon at all. The block's
   own markup only carries an SVG with an aria-label; that icon is hidden
   below (rather than removed from the DOM, to keep the aria-label/click
   target intact). The visible label used to come from ::after generated
   content, but that rendered as three solid colored blocks instead of
   legible letters on the live site — reproduced at every font size from
   13px to 40px, so it wasn't a sizing problem, it was the generated-
   content text-rendering path itself misbehaving in this button/icon-font
   context. Fixed by having cart-payment-method.js's addRemoveLabels()
   inject a real <span class="cvp-remove-label"> text node instead, which
   goes through normal text layout. ::after content is turned off below. */
.wc-block-cart-item__remove-link {
	/* Motta's own woocommerce.css absolutely-positions this button
	   (position:absolute; top:50%; right:0) to float it over the row —
	   that rule was never overridden here, so despite every other
	   property being forced, the button was still stacking on top of
	   whatever it was placed beside. Escaping back to static positioning
	   is what actually lets it lay out correctly in its parent, whether
	   that's the old quantity row or (now) the image column it's moved
	   into by moveRemoveButtonsUnderImage() in cart-payment-method.js. */
	position: static !important;
	top: auto !important;
	right: auto !important;
	margin-top: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	height: auto !important;
	width: auto !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0;
	color: #C4080E !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-decoration: underline !important;
}
.wc-block-cart-item__remove-link:hover {
	opacity: 0.7;
}
.wc-block-cart-item__remove-link svg {
	display: none !important;
}
.wc-block-cart-item__remove-link::after {
	content: none !important;
}
.cvp-remove-label {
	font-size: 15px;
	font-weight: 400;
	color: #C4080E;
	text-decoration: underline;
	white-space: nowrap;
	font-family: Inter, -apple-system, sans-serif;
}

.wc-block-components-product-price__regular {
	color: #999;
	text-decoration: line-through;
	font-weight: 400;
}
/* Current/sale price reads bold — distinct from the lighter strikethrough
   regular price and the plain-weight qty/remove text next to it. */
.wc-block-components-product-price__value {
	font-weight: 700;
	color: #000;
}

/* The block's own separate "Save ₹X,XXX.XX" line (distinct from the "X%
   off" badge we add) lived in the now-hidden Total column — nothing
   further to hide here, noted for anyone re-reading this rule set later. */

/* WooCommerce Blocks doesn't natively render a "% off" reduction tag —
   .cvp-discount-badge is inserted next to the price by cart-payment-
   method.js's initOrderItemsExtras() from the same regular/sale prices
   already on the page, not a separate calculation. */
.cvp-discount-badge {
	color: #20994C;
	font-weight: 600;
	font-size: 13px;
	margin-left: 6px;
}

/* Reference site shows each section of the Cart page's right/left columns
   as its own bounded, visually distinct card with a gap between them
   (rather than one continuous flow of text) — "Confirm Order" + savings
   (built by initCartTitle()/initOrderItemsExtras() in cart-payment-
   method.js), Order Items, Offers & Discounts, and Payment Method each get
   this same white-card treatment; Bill Details keeps the grey panel look
   used throughout this file (--cvp-panel-gray) to visually separate it as
   the "final summary" section, matching the reference. */
.cvp-confirm-card,
.cvp-order-items-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.cvp-order-items__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	color: #000;
	padding: 0 0 16px;
}
.cvp-order-items__header .cvp-order-items__count {
	font-size: 16px;
	font-weight: 700;
}

.cvp-savings-banner {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #20994C;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 16px;
}
/* Client-supplied badge SVG (green scalloped "%" shape) already carries
   its own background/shape — no circle wrapper needed, unlike the plain
   "%" text glyph this replaced. */
.cvp-savings-banner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}
.cvp-savings-banner__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Reference relabels the Cart page's own title "Confirm Order" (see
   cart-payment-method.js's initCartTitle()). Explicit sizing rather than
   `inherit`: this store's Cart template has no page-title element at all
   (confirmed live), so initCartTitle() now inserts a brand-new <h1> in
   that case, which needs its own styling instead of inheriting from a
   theme rule that doesn't exist here — matches the 24px/700 size used for
   the equivalent heading on the Address/Payment step
   (.cvp-order-items-title). */
.cvp-confirm-order-title {
	font-size: 24px;
	font-weight: 700;
	color: #000;
	margin: 0 0 12px;
	text-align: left;
}
.cvp-confirm-card .cvp-savings-banner {
	margin-bottom: 0;
}

/* ---------- Cart page: Payment Method section ----------
 * Matches the reference exactly: white bordered radio cards, black filled
 * dot when selected, and a green-tinted live discount preview under Pay
 * Online driven by cart-payment-method.js (see that file + class-cvp-
 * cart-payment-method.php for why the numbers are real, not estimated). */

.cvp-cart-payment-method {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 20px;
}

/* Same white-card treatment for the Cart page's own "Offers & Discounts"
   row (coupons-drawer.css's plain .cvp-offers-summary rule only draws a
   bottom border, meant for the Address/Payment step's slot which already
   gets its own card wrapper — #cvp-offers-summary-slot .cvp-offers-summary
   further down this file). !important because load order between
   checkout.css and coupons-drawer.css isn't guaranteed (registered via two
   separate, independently-hooked wp_enqueue_style() calls with no explicit
   dependency between them). */
.wc-block-cart__sidebar .cvp-offers-summary {
	background: #fff !important;
	border: 1px solid #eee !important;
	border-bottom: 1px solid #eee !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	margin-bottom: 20px !important;
}
.cvp-cart-payment-method__title {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	margin: 0 0 10px;
}
.cvp-cart-payment-method__option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 10px;
	cursor: pointer;
}
.cvp-cart-payment-method__option.is-selected {
	border-color: #999;
}
.cvp-cart-payment-method__radio {
	margin-top: 2px;
}
.cvp-cart-payment-method__radio input {
	width: 18px;
	height: 18px;
	accent-color: #000;
}
.cvp-cart-payment-method__body {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.cvp-cart-payment-method__label {
	font-weight: 600;
	font-size: 15px;
	color: #000;
}
.cvp-cart-payment-method__sub {
	font-size: 13px;
	color: #6C7778;
}
.cvp-cart-payment-method__preview {
	display: block;
	margin-top: 10px;
	background: #EAF6EC;
	border-radius: 6px;
	padding: 10px 12px;
}
.cvp-cart-payment-method__preview:empty {
	display: none;
}
/* Flex row (not just block) so the badge icon and "X Pay Only Y" text
   stay on one line at any container width — display:block alone let the
   icon wrap onto its own line on narrower/mobile widths. */
.cvp-cart-payment-method__preview strong {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	color: #20994C;
	font-size: 15px;
}
.cvp-cart-payment-method__preview strong .cvp-savings-banner__icon {
	flex-shrink: 0;
}
/* Before-discount amount reads struck-through, same convention as the
   Order Items list's regular-price styling. */
.cvp-cart-payment-method__before {
	text-decoration: line-through;
	font-weight: 400;
	color: #888;
}
.cvp-cart-payment-method__preview span {
	display: block;
	color: #555;
	font-size: 12px;
	margin-top: 2px;
}

/* ---------- Address step (module 4b) ----------
   Replaces the Checkout block's native Contact/Pickup/Billing sections and
   Order-summary sidebar (all hidden via inline style in
   initAddressStep() — see checkout-blocks.js) with the reference site's own
   two-column "Shipping Address form + compact Bill Details" layout. */

/* Reported live: the whole Address/Payment step read as pushed toward the
   left half of the page with unused white space on the right. Root cause:
   the Checkout block's main content column and its sidebar are flex
   siblings, and the main column is sized to its own content
   (flex: 0 1 auto) rather than stretched. initAddressStep() (see
   checkout-blocks.js) hides that sidebar entirely via inline display:none
   to make room for this custom two-column step, but nothing then tells
   the now-only child to actually expand into the freed-up space — it
   stays pinned at its old, narrower intrinsic width, so this panel's own
   50/50 split gets computed against that narrower width instead of the
   full, already-centered checkout container. Force it to fill 100%. */
.wc-block-checkout__main {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

.cvp-address-step {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin: 8px 0 32px;
}
/* 50/50 left/right split (containers 3+4 vs 5-8 in the reference mockup) —
   the .cvp-address-step flex parent has an explicit 40px gap, so each side
   gives up half of that (20px) to keep the two percentages + gap summing
   to exactly 100% of the row width. */
.cvp-address-step__form {
	flex: 0 0 calc( 50% - 20px );
	min-width: 0;
	max-width: calc( 50% - 20px );
}
.cvp-address-step__bill {
	flex: 0 0 calc( 50% - 20px );
	max-width: calc( 50% - 20px );
	position: sticky;
	top: 24px;
}

.cvp-address-step__heading {
	font-size: 18px;
	font-weight: 700;
	margin: 4px 0 16px;
	color: #000;
}

.cvp-address-field {
	margin-bottom: 16px;
}
.cvp-address-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
	color: #333;
}
.cvp-req {
	color: #C4080E;
	margin-left: 2px;
}
.cvp-address-field input,
.cvp-address-field select {
	width: 100%;
	height: var( --cvp-field-height, 33px ) !important;
	padding: 0 12px !important;
	border: 1px solid #6C7778;
	border-radius: 6px;
	font-size: 13px !important;
	line-height: calc( var( --cvp-field-height, 33px ) - 2px ) !important;
	box-sizing: border-box;
	background: #fff;
	font-family: inherit;
}
.cvp-address-field input.cvp-field-error,
.cvp-address-field select.cvp-field-error {
	border-color: #C4080E;
}
.cvp-address-hint {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

.cvp-address-phone {
	display: flex;
}
.cvp-address-phone__prefix {
	display: flex;
	align-items: center;
	height: var( --cvp-field-height, 33px ) !important;
	padding: 0 12px !important;
	border: 1px solid #6C7778;
	border-right: none;
	border-radius: 6px 0 0 6px;
	background: #F0F0F0;
	font-size: 13px !important;
	color: #333;
	box-sizing: border-box;
}
.cvp-address-phone input {
	border-radius: 0 6px 6px 0 !important;
}

.cvp-address-pincode {
	display: flex;
	gap: 8px;
}
.cvp-address-pincode input {
	flex: 1;
}
/* .cvp-address-locate ("use my current location" pincode finder) removed
   per explicit user decision — could not be verified for real-world
   accuracy from this environment (no real GPS), so the button and its
   geolocation/reverse-geocoding JS were deleted rather than shipped
   untested. See initAddressStep() in checkout-blocks.js. */

.cvp-address-error {
	color: #C4080E;
	font-size: 13px;
	margin-top: 4px;
}

.cvp-bill {
	background: #F0F0F0;
	border-radius: 8px;
	padding: 20px;
}
.cvp-bill h4 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.cvp-bill-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 6px 0;
	color: #333;
}
.cvp-bill-row--total {
	border-top: 1px solid #ddd;
	margin-top: 8px;
	padding-top: 12px;
	font-weight: 700;
	color: #000;
}

/* Reported live a second time: this button's own padding-based sizing
   (padding: 8px 12px) came out roughly 80% as tall as the input fields
   sitting right above it once those fields kept their original, taller
   padding — the two were never actually sized off the same number.
   Locked to the same explicit --cvp-field-height every other control on
   this step now uses (see .cvp-address-step's own declaration above),
   with flex centering instead of line-height math, so it's guaranteed to
   match exactly rather than approximately. */
.cvp-address-save {
	width: 100%;
	height: var( --cvp-field-height, 33px ) !important;
	margin-top: 16px;
	padding: 0 12px !important;
	background: #C4080E;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cvp-address-save:hover {
	opacity: 0.9;
}
/* Stays visibly clickable-looking until every required field is valid —
   see updateSaveButtonState() in checkout-blocks.js, which toggles both
   the native `disabled` attribute (blocks the click) and this class. */
.cvp-address-save:disabled,
.cvp-address-save--disabled {
	background: #E0A2A5;
	cursor: not-allowed;
	opacity: 1;
}
.cvp-address-save:disabled:hover,
.cvp-address-save--disabled:hover {
	opacity: 1;
}

/* Address step's "Pickup at Store" card — a plain white card (pin icon,
   store name, address, timings, Maps link) shown in place of the
   delivery-address form when the shopper has picked Local Pickup.
   Deliberately a distinct, plainer style from the older, pink-tinted
   .cvp-store-address-card used on the Payment step's pickup recap
   (see initPickupCard() in checkout-blocks.js) — this one is modeled on
   the reference's flat white card look, not that one's tinted panel. */
.cvp-address-step__pickup-card {
	background: #fff;
	border: 1px solid var( --cvp-border, #eee );
	border-radius: 8px;
	padding: 16px 20px;
}
.cvp-address-step__pickup-card-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #000;
	margin: 0 0 8px;
}
.cvp-address-step__pickup-pin {
	font-size: 15px;
	line-height: 1;
}
.cvp-address-step__pickup-address,
.cvp-address-step__pickup-timings {
	font-size: 13px;
	color: #4B5563;
	margin: 0 0 6px;
}
.cvp-address-step__pickup-maps-link {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #C4080E;
	text-decoration: none;
}
.cvp-address-step__pickup-maps-link:hover {
	text-decoration: underline;
}

.cvp-edit-address-link {
	display: inline-block;
	background: none;
	border: none;
	color: #C4080E;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	margin: 0 0 16px;
}

.cvp-payment-step__fields .wc-block-components-checkout-step {
	margin-bottom: 20px;
}

/* ---------- Payment step: address recap card (module 4c) ----------
   Reference site's "Shipping Address ✓ Added" card at the top of the
   Confirm Order page's left column — the entered address as read-only
   text, a delivery estimate, a savings badge, and an edit-pencil icon.
   Replaces the old plain "‹ Edit Address" text link. */
.cvp-address-recap {
	background: #F0F0F0;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
.cvp-address-recap__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cvp-address-recap__title {
	font-size: 15px;
	font-weight: 700;
	color: #000;
}
.cvp-address-recap__badge {
	color: #20994C;
	font-weight: 600;
	font-size: 13px;
	margin-left: 4px;
}
.cvp-address-recap__edit {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	background: none !important;
	border: none !important;
	color: #C4080E;
	font-size: 16px;
	cursor: pointer;
	padding: 4px !important;
	margin: 0 !important;
	flex: 0 0 auto;
}
.cvp-address-recap__edit:hover {
	opacity: 0.7;
}
.cvp-address-recap__text {
	font-size: 14px;
	color: #333;
	margin: 8px 0 0;
	line-height: 1.4;
}
.cvp-address-recap__delivery {
	font-size: 13px;
	color: #666;
	margin: 6px 0 0;
}
.cvp-address-recap__savings {
	font-size: 13px;
	color: #20994C;
	font-weight: 600;
	margin: 6px 0 0;
}

/* ---------- Payment step: Order Items list (module 4c) ----------
   Reference site keeps the cart items visible/editable through Payment
   (thumbnail, name, price, qty stepper, remove) rather than hiding them
   once Address is saved. Styled to match the Cart page's own item rows. */
.cvp-order-items {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
.cvp-order-items h4 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.cvp-order-items__count {
	font-size: 13px;
	font-weight: 400;
	color: #666;
	margin-left: 4px;
}
.cvp-order-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid #f0f0f0;
}
.cvp-order-item:first-of-type {
	border-top: none;
	padding-top: 0;
}
/* Media column: image with the Remove button directly below it (matching
   the reference layout — Remove sits under the thumbnail, in its own
   column, not inline with the price/qty row), rather than the row-level
   placement used further down the checkout flow before this fix. */
.cvp-order-item__media {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	flex: 0 0 60px;
}
.cvp-order-item__img {
	width: 60px;
	height: 60px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	background: #f0f0f0;
}
.cvp-order-item__img--placeholder {
	background: #f0f0f0;
}
/* Icon+text button, matching the reference's gray pill under the image —
   deliberately a real text node (rendered by JS, see renderOrderItems() in
   checkout-blocks.js) rather than CSS ::after content: generated content
   was found to render as solid blocks instead of legible letters in this
   exact button context on the Cart page's own Remove link earlier in this
   build, so every Remove label site-wide now uses a real DOM text node. */
.cvp-order-item__remove {
	width: 60px !important;
	min-width: 0 !important;
	height: auto !important;
	background: #F0F0F0 !important;
	border: none !important;
	border-radius: 6px !important;
	color: #333 !important;
	font-size: 11px;
	cursor: pointer;
	padding: 6px 4px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.cvp-order-item__remove:hover {
	opacity: 0.7;
}
.cvp-order-item__remove svg {
	width: 14px;
	height: 14px;
}
.cvp-order-item__info {
	flex: 1;
	min-width: 0;
}
/* !important throughout: same Motta specificity fight as the button-width
   bug documented elsewhere in this file — without it, a long product title
   was rendering across 3+ lines uncllipped instead of clamping to 2 with
   an ellipsis, because a later/more-specific theme rule was winning on
   display/overflow. */
.cvp-order-item__name {
	font-size: 14px !important;
	color: #000 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	word-break: break-word;
	line-height: 1.35 !important;
	max-height: 2.7em;
}
.cvp-order-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}
.cvp-order-item__price-wrap {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}
.cvp-order-item__price-regular {
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
	font-weight: 400;
}
.cvp-order-item__qty {
	display: flex;
	align-items: center;
	border: 1px solid #C4080E;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 auto;
}
/* !important throughout: Motta's own button styling (a much wider default
   pill-button width, ~160px) otherwise wins over these rules with no
   specificity fight needed on its side — same class of bug already found
   and fixed on the Cart page's own quantity stepper earlier (font-size:0,
   position:absolute) and its Remove link (content:""), all from
   woocommerce.css's more-specific/later-loaded button rules. Confirmed via
   getComputedStyle(): before this fix the button computed to width:160px
   and the whole .cvp-order-item__qty flex child got squeezed to ~2px wide
   by the row's flexbox trying to fit three ~160px-wide buttons. */
.cvp-order-item__qty button {
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	background: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	color: #C4080E !important;
	font-size: 14px !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	line-height: 1 !important;
}
.cvp-order-item__qty span {
	min-width: 24px;
	text-align: center;
	font-size: 13px;
	color: #000;
}
.cvp-order-item__price {
	/* Normal weight on purpose — only the green "X% off" badge next to it
	   should read as bold, matching the reference (the current price and
	   the struck-through regular price are both regular weight there). */
	font-size: 14px;
	font-weight: 400;
	color: #000;
	white-space: nowrap;
}

/* ---------- Payment step: "Confirm Order" heading + savings banner
   (module 4c) ----------
   The reference site repeats "Confirm Order" and the green savings line
   across all three steps, not just the Cart page — this was missing
   entirely on the Address/Payment step before this fix. Rendered by
   renderTopBanner() in checkout-blocks.js, inserted above the address
   recap card at the top of the left column. */
.cvp-order-items-title {
	font-size: 24px;
	font-weight: 700;
	color: #000;
	margin: 0 0 12px;
}
#cvp-order-items-banner .cvp-savings-banner {
	margin-bottom: 20px;
}
/* Overrides the Cart-page .cvp-remove-label rule above (red, underlined,
   15px) for this icon+text gray-pill context, where the label reads as
   plain dark text under the trash icon instead. */
.cvp-order-item__remove .cvp-remove-label {
	font-size: 11px !important;
	line-height: 1 !important;
	color: #333 !important;
	text-decoration: none !important;
	font-weight: 400 !important;
}

/* ---------- Payment step: right-column slots (module 4c) ----------
   #cvp-offers-summary-slot and #cvp-payment-method-slot sit above the
   Bill Details box inside .cvp-address-step__bill, matching the reference
   right column's order: Offers & Discounts, Payment Method, Bill Details. */
#cvp-offers-summary-slot .cvp-offers-summary {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
#cvp-payment-method-slot {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

/* ---------- Cart page: trust-badge bar (module 4d) ---------- */
.cvp-trust-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	background: #FDF1F1;
	border: 1px solid #F5C6C6;
	border-radius: 8px;
	padding: 12px 20px;
	margin: 16px 0 24px;
}
.cvp-trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
}
.cvp-trust-bar__icon {
	font-size: 14px;
	line-height: 1;
}
@media ( max-width: 600px ) {
	.cvp-trust-bar {
		gap: 12px 16px;
		padding: 10px 14px;
	}
	.cvp-trust-bar__item {
		font-size: 12px;
	}
}

/* ---------- Cart page: pending-order nudge banner ----------
 * Surfaces WooCommerce's own existing payment-retry link for a logged-in
 * shopper's recent Pending Payment order (see CVP_Pending_Order_Nudge /
 * pending-order-nudge.js) — most commonly relevant right after cancelling
 * out of the Razorpay popup, which drops them back on a plain checkout
 * page with no memory of the order they were just trying to pay for. */
.cvp-pending-order-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #FFF8E6;
	border: 1px solid #F0D584;
	border-radius: 8px;
	padding: 12px 20px;
	margin: 0 0 16px;
	font-size: 13px;
	color: #5A4A16;
}
.cvp-pending-order-banner__cta {
	flex-shrink: 0;
	background: var( --cvp-accent, #C4080E );
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
.cvp-pending-order-banner__cta:hover {
	opacity: 0.9;
}
@media ( max-width: 600px ) {
	.cvp-pending-order-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 782px ) {
	.cvp-address-step {
		flex-direction: column;
	}
	.cvp-address-step__form,
	.cvp-address-step__bill {
		max-width: 100%;
	}
	.cvp-address-step__bill {
		width: 100%;
		flex-basis: auto;
		position: static;
	}
	.wc-block-cart__main,
	.wc-block-cart__sidebar {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

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

@media ( max-width: 480px ) {
	.cvp-checkout-steps {
		font-size: 10px;
	}
	.cvp-checkout-steps__dot {
		width: 22px;
		height: 22px;
		font-size: 12px;
	}
	.cvp-checkout-steps__sep {
		width: 24px;
		margin-bottom: 20px;
	}
	.cvp-delivery-pickup-toggle {
		max-width: 100%;
	}
}