/* Modula Lead Form — frontend styles. All values are driven by CSS variables set per-form. */

.mlf-wrap {
	--mlf-primary: #C9A227;
	--mlf-bg: #181818;
	--mlf-text: #F3EFE6;
	--mlf-label: #D8D0BC;
	--mlf-input-bg: #232323;
	--mlf-input-border: #3A3A3A;
	--mlf-btn-bg: #C9A227;
	--mlf-btn-text: #181818;
	--mlf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mlf-heading-size: 20px;
	--mlf-text-size: 14px;
	--mlf-label-size: 13px;
	--mlf-input-size: 14px;
	--mlf-button-size: 14px;
	--mlf-radius: 10px;
	--mlf-input-height: 44px;
	--mlf-spacing: 16px;
	--mlf-modal-width: 420px;
	--mlf-shadow: 0 20px 60px rgba(0,0,0,0.45);
	font-family: var(--mlf-font);
	box-sizing: border-box;
}
.mlf-wrap *, .mlf-wrap *::before, .mlf-wrap *::after { box-sizing: inherit; }

.mlf-open-btn {
	font-family: var(--mlf-font);
	background: var(--mlf-btn-bg);
	color: var(--mlf-btn-text);
	border: none;
	border-radius: var(--mlf-radius);
	padding: 12px 22px;
	font-size: var(--mlf-button-size);
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease, transform .05s ease;
}
.mlf-open-btn:hover { opacity: .9; }
.mlf-open-btn:active { transform: scale(0.98); }

.mlf-form {
	background: var(--mlf-bg);
	color: var(--mlf-text);
	padding: var(--mlf-spacing);
	border-radius: var(--mlf-radius);
	max-width: 480px;
}
.mlf-inline-mode .mlf-form { box-shadow: var(--mlf-shadow); }

.mlf-heading {
	font-size: var(--mlf-heading-size);
	margin: 0 0 6px;
	color: var(--mlf-text);
	font-weight: 700;
}
.mlf-description {
	font-size: var(--mlf-text-size);
	margin: 0 0 var(--mlf-spacing);
	opacity: .8;
	line-height: 1.5;
}

.mlf-fields { display: flex; flex-direction: column; gap: var(--mlf-spacing); }
.mlf-field { display: flex; flex-direction: column; gap: 6px; }
.mlf-label {
	font-size: var(--mlf-label-size);
	color: var(--mlf-label);
	font-weight: 600;
}
.mlf-req { color: var(--mlf-primary); margin-left: 2px; }

.mlf-input {
	font-family: var(--mlf-font);
	width: 100%;
	background: var(--mlf-input-bg);
	color: var(--mlf-text);
	border: 1px solid var(--mlf-input-border);
	border-radius: calc(var(--mlf-radius) * 0.6);
	padding: 0 14px;
	height: var(--mlf-input-height);
	font-size: var(--mlf-input-size);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.mlf-input { height: auto; padding: 12px 14px; resize: vertical; min-height: calc(var(--mlf-input-height) * 1.6); }
.mlf-input:focus { border-color: var(--mlf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlf-primary) 25%, transparent); }
.mlf-input::placeholder { color: var(--mlf-label); opacity: .55; }

.mlf-field.mlf-has-error .mlf-input { border-color: #E5484D; }
.mlf-field-error { font-size: 12px; color: #FF8A80; min-height: 14px; display: none; }
.mlf-field.mlf-has-error .mlf-field-error { display: block; }

.mlf-step-actions { margin-top: var(--mlf-spacing); }
.mlf-btn {
	font-family: var(--mlf-font);
	width: 100%;
	background: var(--mlf-btn-bg);
	color: var(--mlf-btn-text);
	border: none;
	border-radius: calc(var(--mlf-radius) * 0.6);
	height: var(--mlf-input-height);
	font-size: var(--mlf-button-size);
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s ease, transform .05s ease;
	position: relative;
}
.mlf-btn:hover { opacity: .92; }
.mlf-btn:active { transform: scale(0.99); }
.mlf-btn:disabled { cursor: default; opacity: .6; }

.mlf-btn.mlf-loading { color: transparent; }
.mlf-btn.mlf-loading::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 2px solid var(--mlf-btn-text);
	border-top-color: transparent;
	animation: mlf-spin .6s linear infinite;
}
@keyframes mlf-spin { to { transform: rotate(360deg); } }

.mlf-form-error {
	margin-top: 10px;
	font-size: 13px;
	color: #FF8A80;
	text-align: center;
}

.mlf-success { text-align: center; padding: 20px 0; }
.mlf-success-title { font-size: var(--mlf-heading-size); font-weight: 700; margin: 0 0 8px; }
.mlf-success-text { font-size: var(--mlf-text-size); opacity: .85; margin: 0; }

/* ---------- Modal mode ---------- */
.mlf-modal-mode { display: none; }
.mlf-modal-mode.mlf-open { display: block; }

.mlf-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 999998;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
}
.mlf-modal-panel {
	position: relative;
	width: var(--mlf-modal-width);
	max-width: 100vw;
	height: 100%;
	background: var(--mlf-bg);
	box-shadow: var(--mlf-shadow);
	overflow-y: auto;
	animation: mlf-slide-in .25s ease;
	z-index: 999999;
}
.mlf-modal-panel .mlf-form { box-shadow: none; max-width: none; padding: 28px var(--mlf-spacing); }
@keyframes mlf-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.mlf-modal-close {
	position: absolute;
	top: 14px; right: 14px;
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--mlf-input-border);
	background: transparent;
	color: var(--mlf-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.mlf-modal-close:hover { opacity: .8; }

body.mlf-modal-open { overflow: hidden; }

@media (max-width: 640px) {
	.mlf-modal-overlay { justify-content: stretch; }
	.mlf-modal-panel { width: 100%; animation: mlf-slide-up .25s ease; }
	@keyframes mlf-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}