/* Shared form-page styles (Schedule a Demo, Contact Support, Contact Us), on top of
   site.css - everything here rides the same theme variables so light/dark both work.
   Behavior lives in js/forms.js. */

/* ============================== Form shell ============================== */
.form-wrap {
	background-color: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 2rem;
	margin-bottom: 3rem;
	text-align: left;
}
.form-wrap h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--accent-plum);
	margin-bottom: 0.35rem;
}
.form-wrap .form-note {
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.5rem;
}
.form-grid .field-full {
	grid-column: 1 / -1;
}
@media (max-width: 700px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
}

.form-field label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.3rem;
	color: var(--text);
}
.form-field label .req {
	color: #F86000;
	font-weight: 700;
}
.form-field label .req.dynamic {
	display: none;
}
.form-field.required-now label .req.dynamic {
	display: inline;
}
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: #B98847;
	box-shadow: 0 0 0 3px rgba(185, 136, 71, 0.18);
}
.form-field input.invalid,
.form-field select.invalid {
	border-color: #C4302B;
	box-shadow: 0 0 0 3px rgba(196, 48, 43, 0.14);
}
.form-field textarea {
	min-height: 7rem;
	resize: vertical;
}
.form-field .field-error {
	display: none;
	color: #C4302B;
	font-size: 0.85rem;
	margin-top: 0.3rem;
	line-height: 1.35;
}
.form-field.show-error .field-error {
	display: block;
}
.form-field .field-hint {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin-top: 0.3rem;
}

/* The honeypot lives off-screen, not display:none - simple bots skip hidden inputs but
   still fill off-screen ones. Humans never see it either way. */
.form-hp {
	position: absolute;
	left: -6000px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================== Slider gate + submit ============================== */
.form-actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.slider-gate {
	flex: 1 1 260px;
	max-width: 420px;
}
.slider-gate .slider-label {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.35rem;
	display: block;
}
.slider-gate input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: 
        linear-gradient(90deg, transparent calc(var(--target-pct, 100%) - 1%), var(--accent-plum) var(--target-pct, 100%), transparent var(--target-pct, 100%)),
        linear-gradient(90deg, #B98847 var(--slide-pct, 0%), var(--border) var(--slide-pct, 0%));
	outline: none;
	cursor: pointer;
}
.slider-gate input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #862A63;
	border: 3px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: grab;
}
.slider-gate input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #862A63;
	border: 3px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: grab;
}
.slider-gate.armed input[type="range"]::-webkit-slider-thumb {
	background-color: #2E7D32;
}
.slider-gate.armed input[type="range"]::-moz-range-thumb {
	background-color: #2E7D32;
}
.slider-gate.armed .slider-label {
	color: #2E7D32;
	font-weight: 600;
}

.form-actions button[type="submit"] {
	background-color: #B98847;
	color: #FFFFFF;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 1.05rem;
	border: none;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background-color 150ms ease, opacity 150ms ease;
}
.form-actions button[type="submit"]:hover:enabled {
	background-color: #862A63;
}
.form-actions button[type="submit"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ============================== Result / blocked panels ============================== */
.form-result {
	border-radius: 10px;
	padding: 2rem;
	margin-bottom: 3rem;
	text-align: center;
	border: 1px solid var(--border);
	background-color: var(--panel-bg);
}
.form-result h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--accent-plum);
	margin-bottom: 0.5rem;
}
.form-result p {
	color: var(--text-muted);
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 auto;
}
.form-result.blocked h2 {
	color: #C4302B;
}

/* Server-side field errors echoed above the button row. */
.form-errors {
	grid-column: 1 / -1;
	display: none;
	color: #C4302B;
	background-color: rgba(196, 48, 43, 0.08);
	border: 1px solid rgba(196, 48, 43, 0.35);
	border-radius: 8px;
	padding: 0.8rem 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.form-errors.show {
	display: block;
}