/**
 * Partner / operator application — `/apply-as-operator`
 * ---------------------------------------------------------------------------
 * Prefix `pf-*` = partner form only. Shared `.prog-*` layout from
 * `form-wizards.css`; this file **only** overrides wizard colors to orange
 * under `#pf-form-container` so quote + careers stay green.
 */

/* --- Custom select chevron on `.pf-select-wrap` ------------------------- */
.pf-select-wrap::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #a09e96;
	pointer-events: none;
}

/* --- Step panels (JS toggles `.active`) --------------------------------- */
.pf-step {
	display: none;
}

.pf-step.active {
	display: block;
	animation: pfFadeIn 0.22s ease;
}

@keyframes pfFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Strip native select chrome (partner form) -------------------------- */
.pf-select {
	appearance: none;
	-webkit-appearance: none;
}

/* --- Text-like fields: focus / hover / error ---------------------------- */
.pf-input:focus,
.pf-select:focus,
.pf-textarea:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(247, 147, 30, 0.12);
	outline: none;
}

.pf-input:hover,
.pf-select:hover,
.pf-textarea:hover {
	border-color: #a09e96;
}

.pf-input.error,
.pf-select.error,
.pf-textarea.error {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
	background: #fdf0ee;
}

/* --- “Card” style multi-choice blocks ----------------------------------- */
.pf-q-card:has(input:checked) {
	border-color: #fde6c4;
	background: #fff4e8;
}

.pf-q-opt:has(input:checked) {
	border-color: var(--primary-color);
	background: #fff4e8;
	color: #d4780f;
	font-weight: 500;
}

/* --- Scoped radios: accent only inside partner form --------------------- */
#pf-form-container input[type='radio'] {
	accent-color: var(--primary-color);
}

/* --- Inline error rows (JS toggles `.visible`) -------------------------- */
.pf-q-err {
	display: none;
	align-items: center;
	gap: 4px;
}

.pf-q-err.visible {
	display: flex;
}

.pf-error {
	display: none;
	align-items: center;
	gap: 4px;
}

.pf-error.visible {
	display: flex;
}

/**
 * Orange wizard chrome — must stay under `#pf-form-container`
 * (same `.prog-circle` classes as quote/careers; green defaults live globally).
 */
#pf-form-container .prog-circle {
	transition: all 0.3s ease;
}

#pf-form-container .prog-circle.active,
#pf-form-container .prog-circle.done {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: #fff;
}

#pf-form-container .prog-lbl.active {
	color: var(--primary-color);
	font-weight: 500;
}

/* --- Responsive shell / questionnaire ----------------------------------- */
@media (max-width: 780px) {
	.pf-shell {
		grid-template-columns: 1fr !important;
	}

	.pf-row-2 {
		grid-template-columns: 1fr !important;
	}

	.pf-q-card {
		flex-direction: column;
		align-items: flex-start;
	}
}