/* CF7 Simple Multi-Step (Styled)
 * Modern + minimalist styling to match an "emerald/pencil" theme.
 * Default = emerald style (dark surface + green active step).
 *
 * Optional: Add one of these classes to the CF7 shortcode:
 *   html_class="cf7sm-skin-emerald"  (default)
 *   html_class="cf7sm-skin-pencil"
 *
 * Example shortcode:
 *   [contact-form-7 id="123" title="Enquiry" html_class="cf7sm-skin-emerald"]
 */

/* Enhance only when JS activates it */
.wpcf7 form.cf7sm-enhanced {
	/* default skin variables (emerald) */
	--cf7sm-bg: #2f3b35;
	--cf7sm-surface: #ffffff;
	--cf7sm-accent: #2e8b43;
	--cf7sm-text: rgba(255,255,255,.92);
	--cf7sm-muted: rgba(255,255,255,.7);
	--cf7sm-text-dark: #1f1f1f;
	--cf7sm-border: rgba(0,0,0,.12);
	--cf7sm-radius: 18px;
	--cf7sm-gap: 18px;

	max-width: 860px;
	margin-left: auto;
	margin-right: auto;

	background: var(--cf7sm-bg);
	color: var(--cf7sm-text);

	border-radius: var(--cf7sm-radius);
	padding: 26px 28px 28px;

	box-shadow: 0 18px 45px rgba(0,0,0,.25);
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.12);
}

/* Keep sizing predictable inside the form (themes often change box-sizing globally) */
.wpcf7 form.cf7sm-enhanced *,
.wpcf7 form.cf7sm-enhanced *::before,
.wpcf7 form.cf7sm-enhanced *::after {
	box-sizing: inherit;
}

/* Give the user a clear "fill me" affordance */
.wpcf7 form.cf7sm-enhanced:focus-within {
	outline: 2px solid var(--cf7sm-accent);
	outline-offset: 4px;
}

/* Pencil skin (light/neutral) */
.wpcf7 form.cf7sm-enhanced.cf7sm-skin-pencil {
	--cf7sm-bg: #f4f4f2;
	--cf7sm-surface: #ffffff;
	--cf7sm-accent: #2f3b35;
	--cf7sm-text: rgba(0,0,0,.86);
	--cf7sm-muted: rgba(0,0,0,.62);
	--cf7sm-text-dark: rgba(0,0,0,.86);
	--cf7sm-border: rgba(0,0,0,.12);

	border-color: rgba(0,0,0,.10);
	box-shadow: 0 14px 35px rgba(0,0,0,.15);
}

/* If user didn't choose a skin, keep emerald look */
.wpcf7 form.cf7sm-enhanced:not(.cf7sm-skin-pencil):not(.cf7sm-skin-emerald) {
	/* treat as emerald */
}

/* Prefer emerald class if present */
.wpcf7 form.cf7sm-enhanced.cf7sm-skin-emerald {}

/* Hide the repeated step header (progress already shows titles) */
.wpcf7 form.cf7sm-enhanced .cf7sm-step-header { display: none; }

/* Progress tabs (top bar) */
.wpcf7 form.cf7sm-enhanced .cf7sm-progress {
	list-style: none;
	margin: 0 0 18px 0;
	padding: 0;

	background: var(--cf7sm-surface);
	border-radius: 14px;
	overflow: hidden;

	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;

	box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.wpcf7 form.cf7sm-enhanced .cf7sm-progress li {
	flex: 1 1 0;
	padding: 12px 10px;

	text-align: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;

	color: rgba(0,0,0,.72);
	background: transparent;

	border: 0;
	border-right: 1px solid rgba(0,0,0,.08);

	user-select: none;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-progress li:last-child {
	border-right: 0;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-progress li.is-active {
	background: var(--cf7sm-accent);
	color: #fff;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-progress li.is-complete {
	color: rgba(0,0,0,.6);
	background: rgba(0,0,0,.04);
}

/* Steps */
.wpcf7 form.cf7sm-enhanced .cf7sm-step {
	display: none;
	/* Theme-safe reset: many themes add big padding/margins to <section> */
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}
.wpcf7 form.cf7sm-enhanced .cf7sm-step.is-active { display: block; }

.wpcf7 form.cf7sm-enhanced .cf7sm-step-body {
	padding: 14px;
	margin: 0 !important;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
}

.wpcf7 form.cf7sm-enhanced.cf7sm-skin-pencil .cf7sm-step-body {
	background: rgba(255,255,255,.95);
	border-color: rgba(0,0,0,.08);
}

/* Layout (rows/cols) */
.wpcf7 form.cf7sm-enhanced .cf7sm-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--cf7sm-gap);
	margin: 0 0 var(--cf7sm-gap) 0;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-col { min-width: 0; }
.wpcf7 form.cf7sm-enhanced .cf7sm-col-12 { grid-column: span 12; }
.wpcf7 form.cf7sm-enhanced .cf7sm-col-6 { grid-column: span 6; }

@media (max-width: 768px) {
	.wpcf7 form.cf7sm-enhanced .cf7sm-col-6 { grid-column: span 12; }
	/* Constrain the form so it can never exceed the visible viewport width
	   (some themes add side paddings to the content column). */
	.wpcf7 form.cf7sm-enhanced {
		padding: 18px 14px 18px;
		max-width: calc(100vw - 24px);
		margin-left: auto;
		margin-right: auto;
	}
	/* Avoid any child creating horizontal overflow on small screens */
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress,
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body,
	.wpcf7 form.cf7sm-enhanced .cf7sm-nav { max-width: 100%; }
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body { overflow-x: hidden; }

	/* Mobile progress: keep it compact (single row) and allow horizontal scroll
	   so it doesn't take over the viewport height. */
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		/* Keep a small separation from fields without wasting vertical space */
		margin-bottom: 6px;
		box-shadow: none;
	}
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress::-webkit-scrollbar { display: none; }
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress li {
		flex: 0 0 auto;
		min-width: 110px;
		padding: 9px 10px;
		font-size: 11px;
		border-bottom: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress li {
		min-width: 96px;
		padding: 8px 9px;
		font-size: 10.5px;
	}
	.wpcf7 form.cf7sm-enhanced label { font-size: 13px; margin: 0 0 8px 0; }
}

/* Reduce visual weight of the progress bar on the dark/emerald skin (mobile only) */
@media (max-width: 768px) {
	.wpcf7 form.cf7sm-enhanced:not(.cf7sm-skin-pencil) .cf7sm-progress {
		background: rgba(255,255,255,.10);
		border: 1px solid rgba(255,255,255,.18);
	}
	.wpcf7 form.cf7sm-enhanced:not(.cf7sm-skin-pencil) .cf7sm-progress li {
		color: rgba(255,255,255,.88);
		border-right: 1px solid rgba(255,255,255,.14);
	}
	.wpcf7 form.cf7sm-enhanced:not(.cf7sm-skin-pencil) .cf7sm-progress li.is-complete {
		background: rgba(255,255,255,.06);
		color: rgba(255,255,255,.72);
	}
	.wpcf7 form.cf7sm-enhanced:not(.cf7sm-skin-pencil) .cf7sm-progress li.is-active {
		background: rgba(46,139,67,.35);
		color: #fff;
	}
}

/* Labels and helper text inside form */
.wpcf7 form.cf7sm-enhanced label {
	display: block;
	color: var(--cf7sm-text);
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 10px 0;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-step p,
.wpcf7 form.cf7sm-enhanced .cf7sm-step .wpcf7-form-control-wrap {
	color: var(--cf7sm-text);
}

/* Inputs: make wide + modern */
.wpcf7 form.cf7sm-enhanced input[type="text"],
.wpcf7 form.cf7sm-enhanced input[type="email"],
.wpcf7 form.cf7sm-enhanced input[type="tel"],
.wpcf7 form.cf7sm-enhanced input[type="number"],
.wpcf7 form.cf7sm-enhanced input[type="url"],
.wpcf7 form.cf7sm-enhanced select,
.wpcf7 form.cf7sm-enhanced textarea {
	width: 100% !important;
	max-width: 100% !important;

	background: var(--cf7sm-surface);
	color: var(--cf7sm-text-dark);

	border: 1px solid var(--cf7sm-border);
	border-radius: 12px;

	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.3;

	box-shadow: 0 1px 0 rgba(0,0,0,.06);
	outline: none;
}

.wpcf7 form.cf7sm-enhanced textarea {
	min-height: 120px;
	resize: vertical;
}

/* Focus: clearly highlight the field being filled (especially on mobile) */
.wpcf7 form.cf7sm-enhanced input[type="text"]:focus,
.wpcf7 form.cf7sm-enhanced input[type="email"]:focus,
.wpcf7 form.cf7sm-enhanced input[type="tel"]:focus,
.wpcf7 form.cf7sm-enhanced input[type="number"]:focus,
.wpcf7 form.cf7sm-enhanced input[type="url"]:focus,
.wpcf7 form.cf7sm-enhanced select:focus,
.wpcf7 form.cf7sm-enhanced textarea:focus {
	border-color: var(--cf7sm-accent);
	outline: 2px solid var(--cf7sm-accent);
	outline-offset: 2px;
}

/* Ensure single-field steps look wide and balanced */
.wpcf7 form.cf7sm-enhanced .cf7sm-col-12 label,
.wpcf7 form.cf7sm-enhanced .cf7sm-col-12 .wpcf7-form-control-wrap {
	width: 100%;
}

/* Navigation buttons */
.wpcf7 form.cf7sm-enhanced .cf7sm-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

/* Mobile: keep action buttons visible and prevent layout from overflowing the viewport */
@media (max-width: 768px) {
	.wpcf7 form.cf7sm-enhanced { overflow-x: hidden; }

	/* Reduce extra vertical space inside the step body on mobile */
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body{
		padding: 10px !important;
	}
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body .cf7sm-row{
		margin-bottom: 12px !important;
	}
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body .cf7sm-row:last-child{
		margin-bottom: 0 !important;
	}
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body > *:last-child{
		margin-bottom: 0 !important;
	}


	/* Make sure the button bar is always reachable (even if a theme adds spacing to sections) */
	.wpcf7 form.cf7sm-enhanced .cf7sm-nav {
		position: sticky;
		bottom: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 20;
		margin-top: 12px;
		padding: 10px;
		border-radius: 14px;
		backdrop-filter: blur(6px);
		background: rgba(255,255,255,.10);
		border: 1px solid rgba(255,255,255,.14);
	}

	.wpcf7 form.cf7sm-enhanced.cf7sm-skin-pencil .cf7sm-nav {
		background: rgba(255,255,255,.85);
		border-color: rgba(0,0,0,.10);
	}

	/* Extra space so the sticky bar doesn't cover the last input */
	.wpcf7 form.cf7sm-enhanced .cf7sm-step-body {
		/* Slightly tighter on mobile; bottom padding reserved for sticky nav */
		padding: 10px;
		padding-bottom: 64px;
	}
}

.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-prev,
.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-next {
	appearance: none;
	border: 0;
	border-radius: 12px;

	background: rgba(255,255,255,.92);
	color: rgba(0,0,0,.82);

	padding: 12px 18px;
	font-weight: 700;
	font-size: 14px;

	cursor: pointer;
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
	transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}

.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-prev:hover,
.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-next:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 28px rgba(0,0,0,.22);
}

.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-prev[disabled],
.wpcf7 form.cf7sm-enhanced .cf7sm-nav .cf7sm-next[disabled] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Submit button style (minimal + matches accent) */
.wpcf7 form.cf7sm-enhanced input.wpcf7-submit,
.wpcf7 form.cf7sm-enhanced button.wpcf7-submit {
	background: var(--cf7sm-accent);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 12px 18px;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 14px 26px rgba(0,0,0,.22);
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	width: 100%;
}

.wpcf7 form.cf7sm-enhanced input.wpcf7-submit:hover,
.wpcf7 form.cf7sm-enhanced button.wpcf7-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 30px rgba(0,0,0,.26);
}

/* Local invalid highlight */
.wpcf7 form.cf7sm-enhanced .cf7sm-local-invalid input,
.wpcf7 form.cf7sm-enhanced .cf7sm-local-invalid select,
.wpcf7 form.cf7sm-enhanced .cf7sm-local-invalid textarea {
	outline: 2px solid #d63638;
	outline-offset: 2px;
}

/* CF7 validation tip colors on dark background */
.wpcf7 form.cf7sm-enhanced .wpcf7-not-valid-tip {
	color: #ffd6d6;
	font-size: 13px;
	margin-top: 6px;
}


/* --- Fixes based on theme interactions --- */

/* 1) Prevent "justified" / stretched label text (some themes apply text-align:justify) */
.wpcf7 form.cf7sm-enhanced label {
  text-align: left !important;
  text-justify: auto !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
}

/* 2) Ensure two-field rows align nicely */
.wpcf7 form.cf7sm-enhanced .cf7sm-row {
  align-items: start;
}
.wpcf7 form.cf7sm-enhanced .cf7sm-col label {
  margin-bottom: 8px;
}

/* 3) First step: when Previous is hidden, keep Next aligned to the right */
.wpcf7 form.cf7sm-enhanced .cf7sm-nav.is-first {
  justify-content: flex-end;
}


/* 4) Make controls align evenly across columns (avoid stagger when labels wrap) */
.wpcf7 form.cf7sm-enhanced .cf7sm-col > label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  /* Reserve consistent label block height so controls align */
  min-height: 44px;
}

/* Normalize select/input heights (themes sometimes apply different heights) */
.wpcf7 form.cf7sm-enhanced input[type="text"],
.wpcf7 form.cf7sm-enhanced input[type="email"],
.wpcf7 form.cf7sm-enhanced input[type="tel"],
.wpcf7 form.cf7sm-enhanced input[type="number"],
.wpcf7 form.cf7sm-enhanced input[type="url"],
.wpcf7 form.cf7sm-enhanced select {
  min-height: 44px;
}


/* 5) Perfect alignment: wrap label text into a fixed-height block so controls start at same Y */
.wpcf7 form.cf7sm-enhanced .cf7sm-labeltext{
  display: block;
  min-height: 36px;           /* space for up to ~2 lines */
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: inherit;
}

/* Ensure the CF7 control wrap behaves like a block */
.wpcf7 form.cf7sm-enhanced label .wpcf7-form-control-wrap{
  display: block;
}

/* Undo any flex styling on label that could be affected by theme; rely on the wrapped span */
.wpcf7 form.cf7sm-enhanced .cf7sm-col > label{
  display: block !important;
  min-height: initial !important;
}
@media (max-width: 768px){
  .wpcf7 form.cf7sm-enhanced .cf7sm-labeltext{ min-height: 0; }
}


/* 6) Reset theme paragraph/br spacing inside our grid columns (often causes vertical offsets) */
.wpcf7 form.cf7sm-enhanced .cf7sm-col p{
  margin: 0 !important;
  padding: 0 !important;
}
.wpcf7 form.cf7sm-enhanced .cf7sm-col br{
  display: none !important;
}

/* Let JS set exact label heights per-row; keep a small baseline */
.wpcf7 form.cf7sm-enhanced .cf7sm-labeltext{
  min-height: 0; /* JS will set inline min-height to match the tallest label in the row */
}

/* --- Force Hide Security Widgets on Early Steps --- */
form.cf7sm-enhanced .cf-turnstile,
form.cf7sm-enhanced .wp-turnstile,
form.cf7sm-enhanced .g-recaptcha,
form.cf7sm-enhanced .wpcf7-recaptcha,
form.cf7sm-enhanced iframe[src*="turnstile"] {
    display: none !important;
}

/* --- Show ONLY on Final Step --- */
form.cf7sm-enhanced.cf7sm-last-step-active .cf-turnstile,
form.cf7sm-enhanced.cf7sm-last-step-active .wp-turnstile,
form.cf7sm-enhanced.cf7sm-last-step-active .g-recaptcha,
form.cf7sm-enhanced.cf7sm-last-step-active .wpcf7-recaptcha,
form.cf7sm-enhanced.cf7sm-last-step-active iframe[src*="turnstile"] {
    display: block !important;
    margin-top: 15px;
    margin-bottom: 15px;
    clear: both;
}