/**
 * M M Sanidaz — Cart + Checkout, shared
 * ------------------------------------------------------------------
 * One visual system for the whole funnel (Cart → Checkout → Confirmation):
 * page shell, legacy resets, heading + progress steps, panels, buttons,
 * form fields, notices, order totals and the "You save" line. Page-specific
 * layout lives in cart.css and checkout.css; markup hooks in
 * inc/commerce.php, inc/cart.php, inc/checkout.php.
 *
 * Everything is scoped to `body.mmsc-commerce #content` (Cart 252,
 * Checkout 253 incl. order-received): the ID outranks OceanWP's and
 * WooCommerce's own table/form rules without !important. !important is used
 * only against legacy rules that carry it themselves (Additional CSS, noted
 * at each use):
 *   `.page-id-253 p, div { color: black !important }` (every div site-wide)
 *   `strong { color: black !important; font-weight: 600 !important }`
 *   `.checkout { font-weight: 700 !important; color: #fff !important }`
 *   `.input-text { font-size: 20px !important; color: #000 !important }`
 *   `h1 { font-family: poppins !important }`, `.wc-forward { color: #000 !important }`
 */

body.mmsc-commerce {
	--mmsc-co-panel-bg: var(--mmsc-color-surface);
	--mmsc-co-panel-border: var(--mmsc-color-border);
	--mmsc-co-panel-radius: var(--mmsc-radius-md);
	--mmsc-co-panel-pad: 28px;
	--mmsc-co-field-h: 48px;
	--mmsc-co-rose-tint: rgba(185, 121, 132, 0.08);
	--mmsc-co-focus-ring: 0 0 0 3px rgba(213, 168, 75, 0.28);
}

@media (max-width: 599px) {
	body.mmsc-commerce {
		--mmsc-co-panel-pad: 18px;
	}
}

/* =================================================================
   1. Page shell
   ================================================================= */

/* Elementor's `html { scroll-behavior: smooth }` cancels jQuery's scroll
   animations — WooCommerce's scroll to checkout errors / cart notices never
   arrived, leaving a failed Place Order with no visible reason. */
html:has(> body.mmsc-commerce) {
	scroll-behavior: auto;
}

/* Reserved, always-empty right sidebar (no widgets on these pages). */
body.mmsc-commerce #right-sidebar {
	display: none;
}

body.mmsc-commerce #primary.content-area {
	float: none;
	width: 100%;
}

/* OceanWP Customizer: `#main #content-wrap { padding: 50px }` — a calmer,
   tighter top for a task page; generous bottom. */
body.mmsc-commerce #main #content-wrap {
	padding-top: 36px;
	padding-bottom: 80px;
}

body.mmsc-commerce #content {
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	line-height: 1.55;
}

/* Legacy resets (see header). `inherit` lets every block take the colour of
   the component it sits in. */
body.mmsc-commerce #content div,
body.mmsc-commerce #content p {
	color: inherit !important;
}

body.mmsc-commerce #content strong {
	color: inherit !important;
}

body.mmsc-commerce #content form.checkout {
	color: var(--mmsc-color-text) !important;
	font-weight: 400 !important;
}

body.mmsc-commerce #content a {
	color: var(--mmsc-color-text);
	text-decoration: none;
	transition: color var(--mmsc-transition-fast);
}

body.mmsc-commerce #content a:hover {
	color: var(--mmsc-color-primary);
}

body.mmsc-commerce #content :focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

body.mmsc-commerce .mmsc-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

/* WooCommerce's `.woocommerce` shortcode wrapper and OceanWP clearfix
   pseudo-elements would otherwise become phantom grid/flex items. */
body.mmsc-commerce #content .woocommerce::before,
body.mmsc-commerce #content .woocommerce::after {
	display: none;
}

/* =================================================================
   2. Heading + progress steps
   ================================================================= */

body.mmsc-commerce #content .mmsc-commerce-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 40px;
	margin: 0 0 28px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--mmsc-color-border);
}

body.mmsc-commerce #content .mmsc-commerce-head__text {
	min-width: 0;
}

/* h1 font-family !important: legacy `h1 { font-family: poppins !important }`. */
body.mmsc-commerce #content .mmsc-commerce-head__title,
body.mmsc-commerce #content .mmsc-cart-empty__title {
	margin: 0;
	font-family: var(--mmsc-font-heading) !important;
	font-size: 38px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--mmsc-color-text);
}

body.mmsc-commerce #content .mmsc-commerce-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 10px 0 0;
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text-muted) !important; /* legacy p/div colour */
}

body.mmsc-commerce #content .mmsc-commerce-head__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--mmsc-color-border);
}

body.mmsc-commerce #content .mmsc-commerce-head__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mmsc-color-success);
	font-weight: 500;
}

body.mmsc-commerce #content .mmsc-commerce-head__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var(--mmsc-color-text);
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 4px;
}

body.mmsc-commerce #content .mmsc-commerce-head__link:hover {
	color: var(--mmsc-color-primary);
	text-decoration-color: currentColor;
}

/* Steps */

body.mmsc-commerce #content .mmsc-steps__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.mmsc-commerce #content .mmsc-steps__step {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

body.mmsc-commerce #content .mmsc-steps__step + .mmsc-steps__step::before {
	content: "";
	flex: none;
	width: 36px;
	height: 1px;
	margin: 0 12px;
	background: var(--mmsc-color-border);
}

body.mmsc-commerce #content .mmsc-steps__step.is-done + .mmsc-steps__step::before {
	background: var(--mmsc-color-primary);
}

body.mmsc-commerce #content .mmsc-steps__inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mmsc-color-text-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
}

body.mmsc-commerce #content .mmsc-steps__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: 50%;
	background: var(--mmsc-color-surface);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

body.mmsc-commerce #content .mmsc-steps__step.is-current .mmsc-steps__inner {
	color: var(--mmsc-color-text);
	font-weight: 600;
}

body.mmsc-commerce #content .mmsc-steps__step.is-current .mmsc-steps__marker {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

body.mmsc-commerce #content .mmsc-steps__step.is-done .mmsc-steps__marker {
	border-color: var(--mmsc-color-primary);
	background: var(--mmsc-co-rose-tint);
	color: var(--mmsc-color-primary);
}

body.mmsc-commerce #content a.mmsc-steps__inner:hover {
	color: var(--mmsc-color-primary);
}

@media (max-width: 767px) {
	/* A true 16px page gutter on phones, in line with the header, instead
	   of OceanWP's 90%-wide container plus the Elementor section padding. */
	body.mmsc-commerce #main #content-wrap {
		width: auto;
		max-width: none;
		padding: 20px 16px 56px;
	}

	body.mmsc-commerce #content .elementor .e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	body.mmsc-commerce #content .mmsc-commerce-head {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 22px;
		margin-bottom: 20px;
		padding-bottom: 18px;
	}

	body.mmsc-commerce #content .mmsc-commerce-head__title,
	body.mmsc-commerce #content .mmsc-cart-empty__title {
		font-size: 30px;
	}

	body.mmsc-commerce #content .mmsc-steps__list {
		justify-content: space-between;
	}

	body.mmsc-commerce #content .mmsc-steps__step + .mmsc-steps__step {
		flex: 1 1 0;
	}

	body.mmsc-commerce #content .mmsc-steps__step + .mmsc-steps__step::before {
		flex: 1 1 auto;
		width: auto;
		min-width: 12px;
		margin: 0 10px;
	}

	body.mmsc-commerce #content .mmsc-steps__inner {
		gap: 6px;
		font-size: 12px;
	}

	body.mmsc-commerce #content .mmsc-steps__marker {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}
}

/* Phones: marker above label so all three steps (incl. "Confirmation")
   fit without clipping. Three equal columns centred on the page, so
   "Checkout" sits on the exact centre line; connectors are drawn from
   the previous marker to this one. */
@media (max-width: 599px) {
	body.mmsc-commerce #content .mmsc-steps__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		max-width: 380px;
		margin: 0 auto;
	}

	body.mmsc-commerce #content .mmsc-steps__step,
	body.mmsc-commerce #content .mmsc-steps__step + .mmsc-steps__step {
		position: relative;
		justify-content: center;
		align-items: flex-start;
		min-width: 0;
	}

	body.mmsc-commerce #content .mmsc-steps__step + .mmsc-steps__step::before {
		position: absolute;
		top: 13px;
		right: calc(50% + 21px);
		left: calc(-50% + 21px);
		width: auto;
		min-width: 0;
		margin: 0;
	}

	body.mmsc-commerce #content .mmsc-steps__inner {
		flex-direction: column;
		gap: 6px;
		min-width: 64px;
		color: var(--mmsc-color-text);
		font-size: 13px;
		line-height: 1.2;
		text-align: center;
	}

	body.mmsc-commerce #content .mmsc-steps__step:not(.is-current):not(.is-done) .mmsc-steps__inner {
		color: var(--mmsc-color-text-muted);
	}

	body.mmsc-commerce #content .mmsc-steps__marker {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
}

/* =================================================================
   3. Buttons
   ================================================================= */

/* Primary — the one dark action per view (Proceed to Checkout, Place
   Order, Continue Shopping on empty/confirmation). Same recipe as the
   product page's Add to Cart. Colour !important: legacy
   `.wc-forward { color: #000 !important }` / `.checkout` rules. */
body.mmsc-commerce #content .wc-proceed-to-checkout a.checkout-button,
body.mmsc-commerce #content #place_order,
body.mmsc-commerce #content .return-to-shop .button,
body.mmsc-commerce #content .mmsc-received-actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 var(--mmsc-space-5);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	box-shadow: none;
	color: var(--mmsc-color-surface) !important;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast), transform 120ms ease;
}

body.mmsc-commerce #content .wc-proceed-to-checkout a.checkout-button:hover,
body.mmsc-commerce #content #place_order:hover,
body.mmsc-commerce #content .return-to-shop .button:hover,
body.mmsc-commerce #content .mmsc-received-actions .button:hover {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface) !important;
}

body.mmsc-commerce #content .wc-proceed-to-checkout a.checkout-button:active,
body.mmsc-commerce #content #place_order:active {
	transform: translateY(1px);
}

body.mmsc-commerce #content .wc-proceed-to-checkout a.checkout-button:focus-visible,
body.mmsc-commerce #content #place_order:focus-visible,
body.mmsc-commerce #content .return-to-shop .button:focus-visible,
body.mmsc-commerce #content .mmsc-received-actions .button:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 3px;
}

/* Secondary — outlined (Apply coupon). */
body.mmsc-commerce #content button[name="apply_coupon"] {
	flex: none;
	min-height: var(--mmsc-co-field-h);
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	box-shadow: none;
	color: var(--mmsc-color-text) !important;
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

body.mmsc-commerce #content button[name="apply_coupon"]:hover {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

/* =================================================================
   4. Form fields (cart coupon + shipping calculator, checkout)
   ================================================================= */

/* font-size / colour !important: legacy `.input-text { font-size: 20px
   !important; color: #000 !important }` and post-1202.css `input { color:
   green !important; font-weight: bold }`. 16px on phones (below) so iOS
   never zooms into a focused field. */
body.mmsc-commerce #content input.input-text,
body.mmsc-commerce #content input[type="text"],
body.mmsc-commerce #content input[type="email"],
body.mmsc-commerce #content input[type="tel"],
body.mmsc-commerce #content input[type="password"],
body.mmsc-commerce #content textarea,
body.mmsc-commerce #content select {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--mmsc-co-field-h);
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background-color: var(--mmsc-color-surface);
	box-shadow: none;
	color: var(--mmsc-color-text) !important;
	font-family: var(--mmsc-font-body);
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	transition: border-color var(--mmsc-transition-fast), box-shadow var(--mmsc-transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

body.mmsc-commerce #content textarea {
	min-height: 104px;
	resize: vertical;
}

body.mmsc-commerce #content select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d716a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

body.mmsc-commerce #content input.input-text::placeholder,
body.mmsc-commerce #content textarea::placeholder {
	color: #a89c94;
	opacity: 1;
}

body.mmsc-commerce #content input.input-text:hover,
body.mmsc-commerce #content textarea:hover,
body.mmsc-commerce #content select:hover {
	border-color: #cbbfb4;
}

body.mmsc-commerce #content input.input-text:focus,
body.mmsc-commerce #content input[type="text"]:focus,
body.mmsc-commerce #content input[type="email"]:focus,
body.mmsc-commerce #content input[type="tel"]:focus,
body.mmsc-commerce #content input[type="password"]:focus,
body.mmsc-commerce #content textarea:focus,
body.mmsc-commerce #content select:focus {
	border-color: var(--mmsc-color-dark);
	box-shadow: var(--mmsc-co-focus-ring);
	outline: none;
}

@media (max-width: 767px) {
	body.mmsc-commerce #content input.input-text,
	body.mmsc-commerce #content input[type="text"],
	body.mmsc-commerce #content input[type="email"],
	body.mmsc-commerce #content input[type="tel"],
	body.mmsc-commerce #content input[type="password"],
	body.mmsc-commerce #content textarea,
	body.mmsc-commerce #content select {
		font-size: 16px !important;
	}
}

/* Labels */
body.mmsc-commerce #content .form-row label,
body.mmsc-commerce #content .shipping-calculator-form label {
	display: block;
	margin: 0 0 7px;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

body.mmsc-commerce #content .form-row .required {
	margin-left: 2px;
	border: 0;
	color: var(--mmsc-color-primary);
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	vertical-align: baseline;
	text-decoration: none;
	cursor: help;
}

body.mmsc-commerce #content .form-row .optional {
	color: var(--mmsc-color-text-muted);
	font-weight: 400;
}

body.mmsc-commerce #content .form-row {
	margin: 0;
	padding: 0;
}

/* Select2 / selectWoo (State) — matched to the native fields. */
body.mmsc-commerce .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: var(--mmsc-co-field-h);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	transition: border-color var(--mmsc-transition-fast), box-shadow var(--mmsc-transition-fast);
}

body.mmsc-commerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

body.mmsc-commerce .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #a89c94;
}

body.mmsc-commerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 100%;
}

body.mmsc-commerce .select2-container--default.select2-container--focus .select2-selection--single,
body.mmsc-commerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--mmsc-color-dark);
	box-shadow: var(--mmsc-co-focus-ring);
}

body.mmsc-commerce .select2-dropdown {
	border-color: var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	box-shadow: var(--mmsc-shadow-md);
	font-family: var(--mmsc-font-body);
	font-size: 14px;
	overflow: hidden;
}

body.mmsc-commerce .select2-search--dropdown .select2-search__field {
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	font-size: 16px;
}

body.mmsc-commerce .select2-results__option {
	padding: 9px 14px;
}

body.mmsc-commerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.mmsc-commerce .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

body.mmsc-commerce .select2-container--default .select2-results__option[aria-selected="true"],
body.mmsc-commerce .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--mmsc-co-rose-tint);
	color: var(--mmsc-color-text);
}

/* Validation (WooCommerce adds these classes to .form-row on blur/submit). */
body.mmsc-commerce #content .form-row.woocommerce-invalid input.input-text,
body.mmsc-commerce #content .form-row.woocommerce-invalid select,
body.mmsc-commerce #content .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--mmsc-color-error);
	background-color: #fffbfa;
}

body.mmsc-commerce #content .form-row.woocommerce-invalid label {
	color: var(--mmsc-color-error);
}

body.mmsc-commerce #content input.input-text.has-error {
	border-color: var(--mmsc-color-error);
	background-color: #fffbfa;
}

/* Inline coupon errors (WooCommerce 8.x+, cart + checkout coupon forms). */
body.mmsc-commerce #content .coupon-error-notice,
body.mmsc-commerce #content .checkout-inline-error-message,
body.mmsc-commerce #content .form-row .woocommerce-error:not(ul) {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mmsc-color-error) !important; /* legacy p/div colour */
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}

/* Checkboxes / radios. OceanWP draws its own (theme-blue) controls with
   `appearance: none` + ::before; these replace them in the funnel. */
body.mmsc-commerce #content input[type="checkbox"],
body.mmsc-commerce #content input[type="radio"] {
	display: inline-grid;
	place-content: center;
	flex: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1.5px solid #bdb0a5;
	border-radius: 4px;
	background: var(--mmsc-color-surface);
	box-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mmsc-transition-fast), background-color var(--mmsc-transition-fast);
}

body.mmsc-commerce #content input[type="radio"] {
	border-radius: 50%;
}

body.mmsc-commerce #content input[type="checkbox"]::before,
body.mmsc-commerce #content input[type="radio"]::before {
	content: "";
	position: static;
	display: block;
	width: 12px;
	height: 12px;
	margin: 0;
	border: 0;
	background: var(--mmsc-color-surface);
	font-size: 0;
	line-height: 0;
	transform: scale(0);
	transition: transform 120ms ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.mmsc-commerce #content input[type="radio"]::before {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mmsc-color-dark);
	-webkit-mask: none;
	mask: none;
}

body.mmsc-commerce #content input[type="checkbox"]:hover,
body.mmsc-commerce #content input[type="radio"]:hover {
	border-color: var(--mmsc-color-text-muted);
}

body.mmsc-commerce #content input[type="checkbox"]:checked {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
}

body.mmsc-commerce #content input[type="radio"]:checked {
	border-color: var(--mmsc-color-dark);
}

body.mmsc-commerce #content input[type="checkbox"]:checked::before,
body.mmsc-commerce #content input[type="radio"]:checked::before {
	transform: scale(1);
}

body.mmsc-commerce #content input[type="checkbox"]:focus-visible,
body.mmsc-commerce #content input[type="radio"]:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

body.mmsc-commerce #content .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--mmsc-color-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

body.mmsc-commerce #content .woocommerce-form__label-for-checkbox input {
	margin-top: 0;
}

/* =================================================================
   5. Notices (added / removed / coupon / errors) — one quiet style
   ================================================================= */

body.mmsc-commerce #content .woocommerce-notices-wrapper:empty {
	display: none;
}

body.mmsc-commerce #content .woocommerce-message,
body.mmsc-commerce #content .woocommerce-info,
body.mmsc-commerce #content .woocommerce-error,
body.mmsc-commerce #content .woocommerce-notice--error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
	padding: 14px 18px 14px 46px;
	border: 1px solid var(--mmsc-color-border);
	border-left: 3px solid var(--mmsc-color-primary);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	box-shadow: none;
	color: var(--mmsc-color-text) !important; /* legacy div colour */
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	list-style: none;
	outline: none;
}

body.mmsc-commerce #content .woocommerce-message {
	border-left-color: var(--mmsc-color-success);
}

body.mmsc-commerce #content .woocommerce-error,
body.mmsc-commerce #content .woocommerce-notice--error {
	border-left-color: var(--mmsc-color-error);
	background: #fffbfa;
}

/* One consistent line icon in place of OceanWP/WooCommerce icon fonts. */
body.mmsc-commerce #content .woocommerce-message::before,
body.mmsc-commerce #content .woocommerce-info::before,
body.mmsc-commerce #content .woocommerce-error::before,
body.mmsc-commerce #content .woocommerce-notice--error::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 16px;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: var(--mmsc-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.8v.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.8v.2'/%3E%3C/svg%3E") center / contain no-repeat;
	font-size: 0;
}

body.mmsc-commerce #content .woocommerce-message::before {
	background-color: var(--mmsc-color-success);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.6'/%3E%3C/svg%3E");
}

body.mmsc-commerce #content .woocommerce-error::before,
body.mmsc-commerce #content .woocommerce-notice--error::before {
	background-color: var(--mmsc-color-error);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.3v.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.3v.2'/%3E%3C/svg%3E");
}

/* Error lists: one message per line. */
body.mmsc-commerce #content ul.woocommerce-error {
	display: block;
}

body.mmsc-commerce #content ul.woocommerce-error li {
	margin: 0;
	padding: 2px 0;
	list-style: none;
}

body.mmsc-commerce #content ul.woocommerce-error li + li {
	margin-top: 2px;
}

body.mmsc-commerce #content ul.woocommerce-error li::before {
	display: none;
}

/* WooCommerce 10 wraps each checkout error in a link to its field;
   OceanWP styles `.woocommerce-error a` as a floated, uppercase,
   theme-blue button. Here it reads as the message it is. */
body.mmsc-commerce #content .woocommerce-error a {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mmsc-color-text);
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: rgba(179, 65, 61, 0.35);
	text-underline-offset: 3px;
}

body.mmsc-commerce #content .woocommerce-error a:hover {
	color: var(--mmsc-color-error);
	text-decoration-color: currentColor;
}

body.mmsc-commerce #content .woocommerce-error a strong {
	font-weight: 600 !important; /* legacy strong */
}

/* Inline notice actions ("Undo?", "View cart", "Log in", "Apply it here"). */
body.mmsc-commerce #content .woocommerce-message a,
body.mmsc-commerce #content .woocommerce-info a {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mmsc-color-text) !important; /* legacy .wc-forward */
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-primary);
	text-underline-offset: 4px;
}

body.mmsc-commerce #content .woocommerce-message a:hover,
body.mmsc-commerce #content .woocommerce-info a:hover {
	color: var(--mmsc-color-primary) !important;
}

body.mmsc-commerce #content .woocommerce-message a.button,
body.mmsc-commerce #content .woocommerce-info a.button {
	order: 2;
	margin-left: auto;
	float: none;
}

/* =================================================================
   6. Order totals — shared by the Cart summary and the Checkout review
   ================================================================= */

body.mmsc-commerce #content .cart_totals table.shop_table,
body.mmsc-commerce #content #order_review table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: none;
}

body.mmsc-commerce #content .cart_totals table.shop_table th,
body.mmsc-commerce #content .cart_totals table.shop_table td,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot th,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot td {
	padding: 7px 0;
	border: 0;
	background: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	vertical-align: top;
}

body.mmsc-commerce #content .cart_totals table.shop_table th,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot th {
	padding-right: 16px;
	color: var(--mmsc-color-text-muted);
	text-align: left;
	white-space: nowrap;
}

body.mmsc-commerce #content .cart_totals table.shop_table td,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot td {
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body.mmsc-commerce #content .cart_totals table.shop_table td::before {
	display: none;
}

/* Discount (coupon) rows */
body.mmsc-commerce #content .cart-discount th,
body.mmsc-commerce #content .cart-discount td,
body.mmsc-commerce #content .cart-discount .amount {
	color: var(--mmsc-color-sale) !important;
}

body.mmsc-commerce #content .cart-discount .woocommerce-remove-coupon {
	margin-left: 6px;
	color: var(--mmsc-color-text-muted);
	font-size: 12px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Shipping (#shipping_method: OceanWP pads it by ID) */
body.mmsc-commerce #content ul#shipping_method.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.mmsc-commerce #content ul#shipping_method.woocommerce-shipping-methods li {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	text-indent: 0;
}

body.mmsc-commerce #content ul#shipping_method.woocommerce-shipping-methods li:last-child {
	margin-bottom: 0;
}

/* In Checkout's order review OceanWP's own
   `.woocommerce #order_review table.shop_table ul#shipping_method…`
   (two IDs) outranks the rules above and adds 20px under the list and
   10px under each option — an empty band under the Shipping row. */
body.mmsc-commerce #content #order_review ul#shipping_method.woocommerce-shipping-methods,
body.mmsc-commerce #content #order_review ul#shipping_method.woocommerce-shipping-methods li {
	padding-bottom: 0;
}

body.mmsc-commerce #content .woocommerce-shipping-methods label {
	display: inline;
	margin: 0;
	font-weight: 500;
}

body.mmsc-commerce #content .woocommerce-shipping-destination,
body.mmsc-commerce #content .woocommerce-shipping-contents {
	margin: 4px 0 0;
	color: var(--mmsc-color-text-muted) !important; /* legacy p colour */
	font-size: 12.5px;
	line-height: 1.5;
}

body.mmsc-commerce #content .woocommerce-shipping-destination strong {
	color: var(--mmsc-color-text) !important; /* legacy strong */
	font-weight: 500 !important;
}

/* Order total */
body.mmsc-commerce #content .cart_totals table.shop_table tr.order-total th,
body.mmsc-commerce #content .cart_totals table.shop_table tr.order-total td,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--mmsc-color-border);
	color: var(--mmsc-color-text);
	vertical-align: baseline;
}

body.mmsc-commerce #content .cart_totals table.shop_table tr.order-total th,
body.mmsc-commerce #content #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-family: var(--mmsc-font-heading);
	font-size: 19px;
	font-weight: 600;
}

body.mmsc-commerce #content tr.order-total td strong,
body.mmsc-commerce #content tr.order-total td .amount {
	font-family: var(--mmsc-font-heading);
	font-size: 24px;
	font-weight: 600 !important; /* legacy strong */
	letter-spacing: -0.01em;
}

body.mmsc-commerce #content tr.order-total .includes_tax {
	display: block;
	margin-top: 2px;
	color: var(--mmsc-color-text-muted);
	font-size: 12px;
}

body.mmsc-commerce #content tr.order-total .includes_tax .amount {
	font-family: var(--mmsc-font-body);
	font-size: 12px;
	font-weight: 400 !important;
}

/* "You save ₹… on this order" */
body.mmsc-commerce #content tr.mmsc-savings td {
	padding: 12px 0 0;
	border: 0;
	text-align: left;
}

body.mmsc-commerce #content .mmsc-savings__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-co-rose-tint);
	color: var(--mmsc-color-sale);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

body.mmsc-commerce #content .mmsc-savings__amount,
body.mmsc-commerce #content .mmsc-savings__amount .amount {
	color: var(--mmsc-color-sale);
	font-weight: 600;
}

/* Reassurance line */
body.mmsc-commerce #content .mmsc-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--mmsc-color-text-muted) !important; /* legacy p colour */
	font-size: 12.5px;
	letter-spacing: 0.01em;
}

body.mmsc-commerce #content .mmsc-secure-note .mmsc-icon {
	color: var(--mmsc-color-success);
}

/* Prices inside the funnel take their size and colour from the component
   they sit in: an inline Customizer rule sets `.amount { font-size: 20px }`
   on every price, and WooCommerce colours them green. */
body.mmsc-commerce #content .amount,
body.mmsc-commerce #content .woocommerce-Price-amount bdi {
	color: inherit;
	font-size: inherit;
	font-variant-numeric: tabular-nums;
}

body.mmsc-commerce #content del,
body.mmsc-commerce #content del .woocommerce-Price-amount {
	color: var(--mmsc-color-text-muted);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

body.mmsc-commerce #content ins {
	background: none;
	text-decoration: none;
}

/* WooCommerce's blockUI overlay during AJAX updates: warm, not grey. */
body.mmsc-commerce #content .blockUI.blockOverlay {
	background: rgba(248, 245, 240, 0.7) !important; /* inline style from blockUI */
}

@media (prefers-reduced-motion: reduce) {
	body.mmsc-commerce #content * {
		transition: none !important;
	}
}