/* ============================================================
   LME Commercial Cleaning Calculator — v2.1.0
   Brand colours: Navy #142252 / #2a3e79  |  Gold #f7b500
   Font: Helvetica, Arial, sans-serif
   ============================================================ */

/* ── CSS variables ───────────────────────────────────────── */
.lme-cc-wrap {
	--lme-navy:     #142252;
	--lme-navy-mid: #2a3e79;
	--lme-gold:     #f7b500;
	--lme-gold-dk:  #d9a200;
	--lme-text:     #24324a;
	--lme-muted:    #6b7a8d;
	--lme-border:   #d9e1ee;
	--lme-bg-light: #f8fafd;
	--lme-radius:   5px;
	--lme-font:     Helvetica, Arial, sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.lme-cc-wrap {
	font-family: var(--lme-font);
	max-width: 700px;
	margin: 2rem auto;
	padding: 0 1rem;
	color: var(--lme-text);
	box-sizing: border-box;
}

.lme-cc-wrap *,
.lme-cc-wrap *::before,
.lme-cc-wrap *::after {
	box-sizing: border-box;
}

/* ── Step card ───────────────────────────────────────────── */
.lme-cc-step {
	background: #ffffff;
	border: 1px solid var(--lme-border);
	border-radius: 8px;
	padding: 2.5rem 2.5rem 2rem;
	box-shadow: 0 2px 16px rgba(20, 34, 82, 0.07);
}

@media (max-width: 520px) {
	.lme-cc-step {
		padding: 1.75rem 1.25rem 1.5rem;
	}
}

/* ── Heading ─────────────────────────────────────────────── */
.lme-cc-heading {
	font-family: var(--lme-font);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--lme-navy);
	text-align: center;
	margin: 0 0 0.35rem;
	line-height: 1.25;
}

.lme-cc-subheading {
	font-size: 0.93rem;
	color: var(--lme-muted);
	text-align: center;
	margin: 0 0 2rem;
}

/* ── Divider accent ──────────────────────────────────────── */
.lme-cc-heading + .lme-cc-subheading::before {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--lme-gold);
	border-radius: 2px;
	margin: 0.6rem auto 0.8rem;
}

/* ── Form fields ─────────────────────────────────────────── */
.lme-cc-field {
	margin-bottom: 1.4rem;
}

.lme-cc-label {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--lme-navy);
	margin-bottom: 0.45rem;
	letter-spacing: 0.1px;
}

.lme-cc-unit {
	font-weight: 400;
	color: var(--lme-muted);
}

/* Shared input style */
.lme-cc-input,
.lme-cc-select {
	width: 100%;
	padding: 0.72rem 0.9rem;
	border: 1.5px solid var(--lme-border);
	border-radius: var(--lme-radius);
	font-family: var(--lme-font);
	font-size: 0.97rem;
	color: var(--lme-text);
	background-color: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.lme-cc-input:focus,
.lme-cc-select:focus {
	outline: none;
	border-color: var(--lme-navy-mid);
	box-shadow: 0 0 0 3px rgba(42, 62, 121, 0.12);
}

/* Number input — no spinners */
.lme-cc-input {
	padding-right: 2.8rem;
	-moz-appearance: textfield;
}
.lme-cc-input::-webkit-inner-spin-button,
.lme-cc-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* m² suffix badge */
.lme-cc-input-wrap { position: relative; }
.lme-cc-suffix {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--lme-muted);
	pointer-events: none;
}

/* Select custom arrow */
.lme-cc-select {
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3e79' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 17px;
	padding-right: 2.5rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* Use high specificity + !important to beat Hello Elementor theme overrides */
.lme-cc-wrap button.lme-cc-btn,
.lme-cc-wrap .lme-cc-btn {
	display: block !important;
	width: 100% !important;
	padding: 0.9rem 1.5rem !important;
	border: none !important;
	border-radius: var(--lme-radius) !important;
	font-family: var(--lme-font) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	letter-spacing: 0.25px !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background 0.18s, box-shadow 0.18s, transform 0.1s !important;
}

/* Primary — gold (matches "Book Now" / "Cost Calculator" button on the site) */
.lme-cc-wrap button.lme-cc-calc-btn,
.lme-cc-wrap .lme-cc-calc-btn {
	background: var(--lme-gold) !important;
	background-color: var(--lme-gold) !important;
	color: var(--lme-navy) !important;
	margin-top: 0.75rem !important;
	box-shadow: 0 2px 8px rgba(247, 181, 0, 0.35) !important;
	border: none !important;
}

.lme-cc-wrap button.lme-cc-calc-btn:hover,
.lme-cc-wrap .lme-cc-calc-btn:hover {
	background: var(--lme-gold-dk) !important;
	background-color: var(--lme-gold-dk) !important;
	color: var(--lme-navy) !important;
	box-shadow: 0 4px 14px rgba(247, 181, 0, 0.45) !important;
}

.lme-cc-wrap button.lme-cc-calc-btn:active,
.lme-cc-wrap .lme-cc-calc-btn:active {
	transform: scale(0.98) !important;
}

/* Back button — ghost navy */
.lme-cc-wrap button.lme-cc-back-btn,
.lme-cc-wrap .lme-cc-back-btn {
	width: auto !important;
	display: inline-block !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--lme-navy-mid) !important;
	border: 1.5px solid var(--lme-navy-mid) !important;
	padding: 0.5rem 1.1rem !important;
	font-size: 0.86rem !important;
	margin-top: 1.25rem !important;
	border-radius: var(--lme-radius) !important;
}

.lme-cc-wrap button.lme-cc-back-btn:hover,
.lme-cc-wrap .lme-cc-back-btn:hover {
	background: var(--lme-bg-light) !important;
	background-color: var(--lme-bg-light) !important;
	color: var(--lme-navy-mid) !important;
}

/* ── Error ───────────────────────────────────────────────── */
.lme-cc-error {
	background: #fff5f5;
	border: 1.5px solid #f5c6cb;
	border-radius: var(--lme-radius);
	padding: 0.7rem 1rem;
	font-size: 0.88rem;
	color: #b71c1c;
	font-weight: 600;
	margin-bottom: 0.85rem;
}

/* ── Step 2 — "Where to send results" ───────────────────── */
.lme-cc-note {
	font-size: 0.88rem;
	color: var(--lme-muted);
	text-align: center;
	margin: 0 0 1.75rem;
	line-height: 1.55;
}

.lme-cc-note strong {
	color: var(--lme-navy);
}

/* No-form placeholder */
.lme-cc-no-form {
	background: var(--lme-bg-light);
	border: 1.5px solid #b8c3e0;
	border-radius: var(--lme-radius);
	padding: 1rem 1.25rem;
	font-size: 0.9rem;
	color: var(--lme-navy-mid);
}

/* ── Gravity Forms — full theme override ─────────────────── */

/* Labels */
.lme-cc-wrap .gform_wrapper .gfield_label,
.lme-cc-wrap .gform_wrapper label.gfield_label {
	font-family: var(--lme-font) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: var(--lme-navy) !important;
	letter-spacing: 0.1px !important;
	margin-bottom: 0.4rem !important;
}

/* All text inputs, email, tel, selects, textareas */
.lme-cc-wrap .gform_wrapper input[type="text"],
.lme-cc-wrap .gform_wrapper input[type="email"],
.lme-cc-wrap .gform_wrapper input[type="tel"],
.lme-cc-wrap .gform_wrapper input[type="number"],
.lme-cc-wrap .gform_wrapper input[type="url"],
.lme-cc-wrap .gform_wrapper textarea,
.lme-cc-wrap .gform_wrapper select {
	width: 100% !important;
	padding: 0.7rem 0.9rem !important;
	border: 1.5px solid var(--lme-border) !important;
	border-radius: var(--lme-radius) !important;
	font-family: var(--lme-font) !important;
	font-size: 0.96rem !important;
	color: var(--lme-text) !important;
	background-color: #ffffff !important;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
	box-sizing: border-box !important;
}

.lme-cc-wrap .gform_wrapper input[type="text"]:focus,
.lme-cc-wrap .gform_wrapper input[type="email"]:focus,
.lme-cc-wrap .gform_wrapper input[type="tel"]:focus,
.lme-cc-wrap .gform_wrapper textarea:focus,
.lme-cc-wrap .gform_wrapper select:focus {
	border-color: var(--lme-navy-mid) !important;
	box-shadow: 0 0 0 3px rgba(42, 62, 121, 0.12) !important;
	outline: none !important;
}

/* Required indicator */
.lme-cc-wrap .gform_wrapper .gfield_required {
	color: var(--lme-gold-dk) !important;
}

/* Sub-labels (First / Last under name field) */
.lme-cc-wrap .gform_wrapper .gfield_label_before_complex,
.lme-cc-wrap .gform_wrapper .ginput_complex label {
	font-size: 0.78rem !important;
	color: var(--lme-muted) !important;
	font-weight: 600 !important;
}

/* ── Submit button — gold to match site ──────────────────── */
.lme-cc-wrap .gform_wrapper .gform_button,
.lme-cc-wrap .gform_wrapper .gform_submit_button,
.lme-cc-wrap .gform_wrapper input[type="submit"],
.lme-cc-wrap .gform_wrapper button[type="submit"] {
	background: var(--lme-gold) !important;
	color: var(--lme-navy) !important;
	border: none !important;
	border-radius: var(--lme-radius) !important;
	font-family: var(--lme-font) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0.9rem 2.25rem !important;
	cursor: pointer !important;
	letter-spacing: 0.2px !important;
	box-shadow: 0 2px 8px rgba(247, 181, 0, 0.35) !important;
	transition: background 0.18s, box-shadow 0.18s !important;
	width: auto !important;
}

.lme-cc-wrap .gform_wrapper .gform_button:hover,
.lme-cc-wrap .gform_wrapper .gform_submit_button:hover,
.lme-cc-wrap .gform_wrapper input[type="submit"]:hover,
.lme-cc-wrap .gform_wrapper button[type="submit"]:hover {
	background: var(--lme-gold-dk) !important;
	box-shadow: 0 4px 14px rgba(247, 181, 0, 0.45) !important;
}

/* Confirmation / success message */
.lme-cc-wrap .gform_wrapper .gform_confirmation_message {
	background: #f0f9f4;
	border: 1.5px solid #a3d9b5;
	border-radius: var(--lme-radius);
	padding: 1.25rem 1.5rem;
	font-family: var(--lme-font) !important;
	font-size: 0.97rem;
	color: var(--lme-navy);
}

/* Validation / error messages */
.lme-cc-wrap .gform_wrapper .validation_error {
	background: #fff5f5;
	border: 1.5px solid #f5c6cb;
	border-radius: var(--lme-radius);
	padding: 0.7rem 1rem;
	color: #b71c1c !important;
	font-family: var(--lme-font) !important;
	font-size: 0.88rem !important;
}

.lme-cc-wrap .gform_wrapper .gfield_error input,
.lme-cc-wrap .gform_wrapper .gfield_error textarea,
.lme-cc-wrap .gform_wrapper .gfield_error select {
	border-color: #f5c6cb !important;
}

/* Field spacing */
.lme-cc-wrap .gform_wrapper .gfield {
	margin-bottom: 1.1rem !important;
}

/* Validation message below field */
.lme-cc-wrap .gform_wrapper .validation_message {
	font-size: 0.8rem !important;
	color: #b71c1c !important;
	font-family: var(--lme-font) !important;
	margin-top: 0.3rem !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
	.lme-cc-heading { font-size: 1.4rem; }
}