/**
 * D LUNAFAM — Contact
 * ------------------------------------------------------------------
 * page-wpforms-preview.php only. Built on design-tokens.css and the
 * shared page components in shared.css (section rhythm, eyebrow,
 * buttons); the real functional piece — Contact Form 7 (id 491) — is
 * restyled here purely via CSS against its own default markup/classes
 * (.wpcf7-form, .wpcf7-form-control-wrap, etc.). Nothing about the
 * form's fields, names, validation or submission handling changes.
 *
 * Breakpoints (matches design-tokens.css documentation):
 *   mobile: up to 479px · mobile-large: 480–767px · tablet: 768–1023px
 *   laptop: 1024–1279px · desktop: 1280px+
 */

.mmsc-contact {
	overflow-x: hidden;
}

/* Same fixed-header clearance fix as the homepage/About page (see
   homepage.css) — this template also skips OceanWP's #content-wrap, so
   it needs the same manual compensation for #site-header's legacy
   `position: fixed` Additional-CSS rule. Header itself untouched. */
/* (A 30px "fixed header clearance" used to sit here. header.css now
   offsets the body by the header's exact height at every width — 65px
   mobile top bar, 80px desktop — so the extra padding only opened a
   blank band under the header. Removed 2026-09-29.) */

/* 1. Hero ---------------------------------------------------------------
   Shorter and plainer than the homepage/About photo hero: an editorial
   text-only introduction, since no Contact-specific photography exists
   yet and this brief asks for a hero that doesn't need to dominate.
   Padding trimmed down from the original pass (was space-8/9 top,
   space-6/7 bottom) — reported as reading like excess empty space once
   seen live at full width, where there's no photography to justify a
   tall band the way the homepage/About heroes have. */

.mmsc-contact-hero {
	padding: var(--mmsc-space-6) 0 var(--mmsc-space-5);
	text-align: center;
}

@media (min-width: 768px) {
	.mmsc-contact-hero {
		padding: var(--mmsc-space-7) 0 var(--mmsc-space-6);
	}
}

.mmsc-contact-hero__title {
	font-size: var(--mmsc-text-2xl);
	margin: 0 0 var(--mmsc-space-3);
}

@media (min-width: 768px) {
	.mmsc-contact-hero__title {
		font-size: var(--mmsc-text-3xl);
	}
}

.mmsc-contact-hero__lede {
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
	max-width: 34em;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.mmsc-contact-hero__lede {
		font-size: var(--mmsc-text-lg);
	}
}

/* 2+3+4. Contact info + form ----------------------------------------------
   Mobile: intro/info stacked above the form. Desktop: intro/info in a
   fixed-width left column beside the form, per the brief's suggested
   [ FORM INTRO ] [ FORM ] layout. */

.mmsc-contact-main {
	background-color: var(--mmsc-color-surface);
}

.mmsc-contact-grid {
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-7);
}

@media (min-width: 1024px) {
	.mmsc-contact-grid {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--mmsc-space-9);
	}
}

.mmsc-contact-info {
	max-width: 560px;
}

@media (min-width: 1024px) {
	.mmsc-contact-info {
		width: 34%;
		max-width: 340px;
		position: sticky;
		top: var(--mmsc-space-7);
	}
}

.mmsc-contact-info h2 {
	font-size: var(--mmsc-text-2xl);
	margin: 0 0 var(--mmsc-space-3);
}

.mmsc-contact-info > p {
	color: var(--mmsc-color-text-muted);
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
	margin: 0 0 var(--mmsc-space-6);
}

/* Given its own card treatment (rather than a bare divider + two lines
   of text) so the left column carries visual weight comparable to the
   form card beside it, instead of trailing off into empty space below
   the intro paragraph. */
.mmsc-contact-info__item {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-4);
	padding: var(--mmsc-space-5);
	background-color: var(--mmsc-color-bg);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-md);
}

/* Phone, then Email. */
.mmsc-contact-info__item + .mmsc-contact-info__item {
	margin-top: var(--mmsc-space-3);
}

/* Hovering / focusing the number or address lights up its whole card
   (as the Wholesale page's Call / WhatsApp / Email cards do). */
.mmsc-contact-info__item {
	transition: border-color var(--mmsc-transition-fast);
}

.mmsc-contact-info__item:has(.mmsc-contact-info__value:hover),
.mmsc-contact-info__item:has(.mmsc-contact-info__value:focus-visible) {
	border-color: var(--mmsc-color-primary);
}

.mmsc-contact-info__value {
	overflow-wrap: anywhere;
}

.mmsc-contact-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--mmsc-radius-pill);
	background-color: var(--mmsc-color-surface);
	color: var(--mmsc-color-primary);
}

.mmsc-contact-info__icon svg {
	width: 20px;
	height: 20px;
}

.mmsc-contact-info__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mmsc-contact-info__label {
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mmsc-color-text-muted);
}

.mmsc-contact-info__value {
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	font-weight: 600;
	color: var(--mmsc-color-text);
	text-decoration: none;
}

.mmsc-contact-info__value:hover,
.mmsc-contact-info__value:focus-visible {
	color: var(--mmsc-color-primary);
}

/* Social profiles (inc/brand.php, shared .mmsc-social from footer.css). */
.mmsc-contact-social {
	margin-top: var(--mmsc-space-5);
}

.mmsc-contact-social .mmsc-contact-info__label {
	display: block;
	margin-bottom: var(--mmsc-space-2);
}

/* Contact Form 7 restyle --------------------------------------------------
   CF7's default template wraps every field as:
     <p><label>Field label<br><span class="wpcf7-form-control-wrap">
       <input/textarea/select></span><br></label></p>
   The <br> tags are pure legacy spacing scaffolding from that default
   template — safe to hide with CSS since they carry no field data —
   and `label` is made a column flex container so its own text node and
   the control wrapper stack with deliberate spacing instead of relying
   on those <br> tags. */

.mmsc-contact-form-wrap {
	max-width: 640px;
}

@media (min-width: 1024px) {
	.mmsc-contact-form-wrap {
		flex: 1;
	}
}

.mmsc-contact-form-wrap form br {
	display: none;
}

.mmsc-contact-form-wrap form p {
	margin: 0;
}

/* 2-column field grid on desktop/tablet -----------------------------------
   Reported as too tall/dense as a single column (13 fields stacked one
   per row). CF7's own markup wraps every field in its own <p> in a
   fixed order, so the grid below is built with plain CSS `:has()`
   against the field's existing `data-name` — no change to the form's
   markup, field order, names or validation. Short fields (name, email,
   phone, company, city, state, pincode, inquiry type, quantity) pair up
   two-to-a-row; fields that need the full line (address, message,
   file upload, consent, submit, the response banner) span both
   columns. */
.mmsc-contact-form-wrap form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mmsc-space-4);
}

@media (min-width: 600px) {
	.mmsc-contact-form-wrap form {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--mmsc-space-4);
		row-gap: var(--mmsc-space-4);
	}

	.mmsc-contact-form-wrap form > p:has(textarea),
	.mmsc-contact-form-wrap form > p:has(input[name="address"]),
	.mmsc-contact-form-wrap form > p:has(.wpcf7-checkbox),
	.mmsc-contact-form-wrap form > p:has(input[type="submit"]) {
		grid-column: 1 / -1;
	}
}

.mmsc-contact-form-wrap form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

.mmsc-contact-form-wrap form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	color: var(--mmsc-color-text);
}

.mmsc-contact-form-wrap .wpcf7-form-control-wrap {
	display: block;
}

.mmsc-contact-form-wrap .wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-base);
	font-weight: 400;
	/* !important: a leftover global rule from the old HFE "Footer"
	   template's generated stylesheet (post 1202 — see inc/footer.php's
	   docblock for the same file's already-documented duplicate-footer
	   leak) sets a sitewide `input { color: green !important }` that
	   this plugin still enqueues unconditionally even though its markup
	   was unhooked. Scoped to this form only, not a global CSS edit. */
	color: var(--mmsc-color-text) !important;
	background-color: var(--mmsc-color-bg);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	padding: 11px 14px;
	transition: border-color var(--mmsc-transition-fast), background-color var(--mmsc-transition-fast);
}

.mmsc-contact-form-wrap textarea.wpcf7-form-control {
	min-height: 96px;
	resize: vertical;
}

.mmsc-contact-form-wrap select.wpcf7-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%237D716A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

.mmsc-contact-form-wrap .wpcf7-form-control:hover {
	border-color: var(--mmsc-color-text-muted);
}

.mmsc-contact-form-wrap .wpcf7-form-control:focus,
.mmsc-contact-form-wrap .wpcf7-form-control:focus-visible {
	outline: none;
	border-color: var(--mmsc-color-primary);
	background-color: var(--mmsc-color-surface);
	box-shadow: 0 0 0 3px rgba(185, 121, 132, 0.15);
}

/* File input: browsers render this element inconsistently, so only its
   container and the (cross-browser-stylable) file-chooser button are
   themed — the "No file chosen" text stays native/system-rendered. */
.mmsc-contact-form-wrap input[type="file"].wpcf7-form-control {
	background-color: transparent;
	padding: 10px 12px;
}

.mmsc-contact-form-wrap input[type="file"].wpcf7-form-control::file-selector-button {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	color: var(--mmsc-color-text);
	background-color: var(--mmsc-color-surface);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	padding: 8px 14px;
	margin-right: var(--mmsc-space-3);
	cursor: pointer;
	transition: border-color var(--mmsc-transition-fast);
}

.mmsc-contact-form-wrap input[type="file"].wpcf7-form-control:hover::file-selector-button {
	border-color: var(--mmsc-color-primary);
}

/* Consent checkbox — CF7 nests the real, checkbox-associated <label>
   one level inside the outer "Consent *" group label; the row layout
   below overrides the column layout the generic `form label` rule above
   sets for every field, on this inner label specifically. */
/* CF7 gives the checkbox group's wrapper <span> the same
   `.wpcf7-form-control` class as real inputs, so the generic control
   rule above boxed it like a text field (ivory fill, border, padding) —
   and, being an inline span at width:100%, overflowed on mobile. Undo
   that for the group only; the checkbox itself carries the styling. */
.mmsc-contact-form-wrap .wpcf7-form-control.wpcf7-checkbox {
	display: block;
	width: auto;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.mmsc-contact-form-wrap .wpcf7-list-item {
	display: block;
	margin: 0;
}

.mmsc-contact-form-wrap .wpcf7-list-item label {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mmsc-space-3);
	font-weight: 400;
	font-size: var(--mmsc-text-base);
	line-height: 1.5;
	color: var(--mmsc-color-text);
	cursor: pointer;
}

/* Drawn checkbox (still the real, native input — same keyboard/space
   toggling, required check and screen-reader state): a squared-off box
   in the input border colour, filled espresso with an ivory tick when
   checked. 2px top offset centres it on the first 24px text line. */
.mmsc-contact-form-wrap input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-grid;
	place-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 2px 0 0;
	background-color: var(--mmsc-color-surface);
	border: 1.5px solid var(--mmsc-v2-input-border, #958980);
	border-radius: var(--mmsc-radius-sm);
	cursor: pointer;
	transition: background-color var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast);
}

.mmsc-contact-form-wrap input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	background-color: var(--mmsc-color-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: scale(0);
	transition: transform var(--mmsc-transition-fast);
}

.mmsc-contact-form-wrap input[type="checkbox"]:hover {
	border-color: var(--mmsc-color-text);
}

.mmsc-contact-form-wrap input[type="checkbox"]:checked {
	background-color: var(--mmsc-color-dark);
	border-color: var(--mmsc-color-dark);
}

.mmsc-contact-form-wrap input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.mmsc-contact-form-wrap input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Required-but-unticked after a submit attempt: CF7 flags the group
   span, which no longer draws a border, so the box itself turns red. */
.mmsc-contact-form-wrap .wpcf7-checkbox.wpcf7-not-valid input[type="checkbox"] {
	border-color: var(--mmsc-color-error);
}

/* Required-field validation state. CF7 adds `wpcf7-not-valid` to the
   offending control and a sibling `.wpcf7-not-valid-tip` with the
   message — both already screen-reader announced by CF7's own
   aria-live wiring, so the styling here only needs to be noticeable at
   a glance, not loud: a thin colored border rather than a heavy one,
   and a small plain-text tip instead of a bold/boxed line. Real CF7
   validation (required fields, email/tel format, consent) is
   untouched — this only restyles the same classes CF7 already adds. */
.mmsc-contact-form-wrap .wpcf7-not-valid {
	border-color: var(--mmsc-color-error) !important;
	background-color: var(--mmsc-color-surface);
}

.mmsc-contact-form-wrap .wpcf7-not-valid-tip {
	display: block;
	color: var(--mmsc-color-error);
	font-size: 13px;
	font-weight: 400;
	margin-top: 4px;
}

/* Submit button — same visual weight as .mmsc-btn--primary elsewhere on
   the site; duplicated rather than combined because CF7's own template
   renders a fixed `.wpcf7-submit` class that can't take an extra class
   without editing the form itself. */
.mmsc-contact-form-wrap .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 4px;
	padding: 13px 28px;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-button);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* !important — same sitewide post-1202.css leak noted above. */
	color: var(--mmsc-color-surface) !important;
	background-color: var(--mmsc-color-dark);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	cursor: pointer;
	transition: background-color var(--mmsc-transition-base), border-color var(--mmsc-transition-base);
}

@media (min-width: 480px) {
	.mmsc-contact-form-wrap .wpcf7-submit {
		width: auto;
	}
}

.mmsc-contact-form-wrap .wpcf7-submit:hover,
.mmsc-contact-form-wrap .wpcf7-submit:focus-visible {
	background-color: var(--mmsc-color-dark-hover);
	border-color: var(--mmsc-color-dark-hover);
}

.mmsc-contact-form-wrap .wpcf7-submit:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Submit row + CF7's own loading spinner. CF7 still shows/hides it (it
   is only visible while `form.submitting`); this just redraws its
   default 24px dark disc as a thin espresso ring beside the button, and
   keeps it on the button's line instead of wrapping below it. */
.mmsc-contact-form-wrap form > p:has(.wpcf7-submit) {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-3);
}

.mmsc-contact-form-wrap .wpcf7-submit {
	margin-top: 0;
}

.mmsc-contact-form-wrap .wpcf7-spinner {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: transparent;
	border: 2px solid var(--mmsc-color-border);
	border-top-color: var(--mmsc-color-dark);
	border-radius: 50%;
	opacity: 1;
}

.mmsc-contact-form-wrap form.submitting .wpcf7-spinner {
	animation: mmsc-contact-spin 0.8s linear infinite;
}

.mmsc-contact-form-wrap .wpcf7-spinner::before {
	content: none;
}

@keyframes mmsc-contact-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmsc-contact-form-wrap form.submitting .wpcf7-spinner {
		animation-duration: 2.4s;
	}
}

/* Mobile: the button is full width, so the ring sits inside its right
   edge (ivory on espresso) rather than squeezing the button. */
@media (max-width: 479px) {
	.mmsc-contact-form-wrap form > p:has(.wpcf7-submit) {
		position: relative;
	}

	.mmsc-contact-form-wrap .wpcf7-spinner {
		position: absolute;
		top: 50%;
		right: var(--mmsc-space-4);
		margin-top: -9px;
		border-color: rgba(248, 245, 240, 0.35);
		border-top-color: var(--mmsc-color-bg);
	}
}

/* Success / error response banner. CF7 6.x adds one of these classes to
   `.wpcf7-response-output` depending on outcome; success and error share
   the same box shape and only swap the accent color/background. */
.mmsc-contact-form-wrap .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	font-size: 14px;
	line-height: 1.5;
}

.mmsc-contact-form-wrap .wpcf7-mail-sent-ok {
	border-color: var(--mmsc-color-success);
	background-color: rgba(92, 122, 92, 0.06);
	color: var(--mmsc-color-success);
}

.mmsc-contact-form-wrap .wpcf7-validation-errors,
.mmsc-contact-form-wrap .wpcf7-mail-failed-error,
.mmsc-contact-form-wrap .wpcf7-aborted {
	border-color: var(--mmsc-color-error);
	background-color: rgba(179, 65, 61, 0.04);
	color: var(--mmsc-color-error);
}

.mmsc-contact-form-wrap .wpcf7-spam-blocked {
	border-color: var(--mmsc-color-border);
	background-color: var(--mmsc-color-bg);
	color: var(--mmsc-color-text-muted);
}

/* Success banner (CF7 6.x). CF7 6 no longer adds `.wpcf7-mail-sent-ok`;
   it marks success with `form.sent`, and its own
   `.wpcf7 form.sent .wpcf7-response-output` rule (2px bright green
   border, 2em margins) outranks the generic box rule above. Matched here
   at higher specificity, success state only, in the same soft-tint +
   3px left-accent language as the site's WooCommerce notices
   (commerce.css / palette-v2.css). Error/validation states untouched. */
.mmsc-contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--mmsc-color-border);
	border-left: 3px solid var(--mmsc-color-success);
	border-radius: var(--mmsc-radius-sm);
	background-color: var(--mmsc-v2-success-soft, #edf1ea);
	color: var(--mmsc-color-text);
	font-size: var(--mmsc-text-sm);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* 5. Wholesale callout ------------------------------------------------------
   Routes business visitors to the real wholesale destination without
   exposing wholesale pricing or logic here. Styled as a dark espresso
   card — the same "wholesale = dark panel" language the homepage's
   Retail/Wholesale split already established (see homepage.css's
   .mmsc-split__panel--wholesale) — rather than a plain light band, so
   it reads as a deliberate, on-brand callout instead of a generic CTA
   strip, and reduced padding so it doesn't run as tall as the original
   pass. */

.mmsc-contact-wholesale {
	padding: var(--mmsc-space-7) var(--mmsc-space-5);
}

.mmsc-contact-wholesale__card {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--mmsc-space-7) var(--mmsc-space-5);
	text-align: center;
	background-color: var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-lg);
}

@media (min-width: 768px) {
	.mmsc-contact-wholesale__card {
		padding: var(--mmsc-space-7) var(--mmsc-space-8);
	}
}

.mmsc-contact-wholesale__card h2 {
	font-size: var(--mmsc-text-2xl);
	color: var(--mmsc-color-surface);
	margin: 0 0 var(--mmsc-space-3);
}

.mmsc-contact-wholesale__card p {
	color: var(--mmsc-color-bg);
	opacity: 0.8;
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
	max-width: 44em;
	margin: 0 auto var(--mmsc-space-6);
}

.mmsc-contact-wholesale__card .mmsc-btn--primary {
	background-color: var(--mmsc-color-accent);
	border-color: var(--mmsc-color-accent);
	color: var(--mmsc-color-dark);
}

.mmsc-contact-wholesale__card .mmsc-btn--primary:hover,
.mmsc-contact-wholesale__card .mmsc-btn--primary:focus-visible {
	background-color: var(--mmsc-color-surface);
	border-color: var(--mmsc-color-surface);
	color: var(--mmsc-color-dark);
}