/* 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);
}

/* 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);

	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; }
.wpcf7 form.cf7sm-enhanced .cf7sm-step.is-active { display: block; }

.wpcf7 form.cf7sm-enhanced .cf7sm-step-body {
	padding-top: 2px;
}

/* 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; }
	.wpcf7 form.cf7sm-enhanced { padding: 20px 18px 22px; }
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress { flex-wrap: wrap; }
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress li { flex: 1 1 120px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
	.wpcf7 form.cf7sm-enhanced .cf7sm-progress li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* 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;
}

/* 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;
}

.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 */
}