/*
 * Lal Contact Form — front-end styles.
 * Colours/radius are driven by CSS custom properties, injected inline
 * from the plugin's admin settings (see LCF_Form::inline_css_vars()).
 * The values below are fallbacks matching the default dark design.
 */
.lcf-form {
	/*
	 * IMPORTANT: do not redeclare --lcf-* custom properties directly on
	 * .lcf-form here. A property set directly on an element always wins
	 * over a value inherited from :root, regardless of source order or
	 * specificity — so hardcoding values on this selector would silently
	 * shadow whatever the admin picks in Settings. Fallbacks instead live
	 * inside each var() call below (2nd argument), which only kicks in if
	 * the :root custom property is missing entirely.
	 */
	max-width: 760px;
	margin: 0 auto;
	font-family: inherit;
}

.lcf-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.lcf-row .lcf-field {
	flex: 1 1 260px;
}

.lcf-field {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.lcf-field label {
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 15px;
	color: var(--lcf-label-color, #ffffff);
}

.lcf-required {
	color: var(--lcf-asterisk-color, #22c55e);
	margin-left: 2px;
}

.lcf-field input[type="text"],
.lcf-field input[type="email"],
.lcf-field input[type="tel"],
.lcf-field textarea {
	padding: 14px 16px;
	border: 1px solid var(--lcf-input-border, #2e2e2e);
	border-radius: var(--lcf-field-radius, 10px);
	background-color: var(--lcf-input-bg, #181818);
	color: var(--lcf-input-text, #e5e5e5);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lcf-field input::placeholder,
.lcf-field textarea::placeholder {
	color: var(--lcf-placeholder-color, #8a8a8a);
	opacity: 1;
}

.lcf-field input:focus,
.lcf-field textarea:focus {
	outline: none;
	border-color: var(--lcf-button-bg, #22c55e);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcf-button-bg, #22c55e) 25%, transparent);
}

.lcf-field textarea {
	resize: vertical;
	min-height: 150px;
}

.lcf-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lcf-submit-row {
	margin-bottom: 8px;
}

.lcf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--lcf-button-bg, #22c55e);
	color: var(--lcf-button-text, #06210f);
	border: none;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-start;
	transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.lcf-submit:hover:not(:disabled) {
	background: var(--lcf-button-hover, #16a34a);
	transform: translateY(-1px);
}

.lcf-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.lcf-submit-arrow {
	flex-shrink: 0;
}

.lcf-message {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: var(--lcf-field-radius, 10px);
	font-size: 14px;
	display: none;
}

.lcf-message.lcf-success {
	display: block;
	background: rgba(34, 197, 94, 0.12);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, 0.35);
}

.lcf-message.lcf-error {
	display: block;
	background: rgba(239, 68, 68, 0.12);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, 0.35);
}

@media (max-width: 640px) {
	.lcf-row {
		flex-direction: column;
		gap: 0;
	}

	/*
	 * The flex-basis of 260px on .lcf-row .lcf-field (set above for the
	 * desktop side-by-side layout) is still active here because
	 * flex-direction:column makes flex-basis control HEIGHT, not width.
	 * That was stretching every field to a ~260px tall box on mobile,
	 * creating the big gaps between fields. Resetting flex-basis to
	 * auto and using margin-bottom for spacing fixes it.
	 */
	.lcf-row .lcf-field {
		flex-basis: auto;
		margin-bottom: 20px;
	}

	.lcf-row .lcf-field:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 480px) {
	.lcf-field input,
	.lcf-field textarea {
		font-size: 16px; /* avoids iOS zoom-on-focus */
	}
}