/**
 * Default styling for .prabisha-crm-form. Deliberately theme-neutral and
 * override-friendly: every color/spacing value is a CSS custom property on
 * .prabisha-crm-form-wrap, so a child theme can restyle the whole form with
 * a handful of lines instead of fighting !important overrides.
 */

.prabisha-crm-form .pcf-conditional-hidden {
	display: none;
}

.prabisha-crm-form-wrap {
	--pcf-primary: #2271b1; /* WP admin blue — a safe, neutral default on any theme */
	--pcf-primary-contrast: #ffffff;
	--pcf-text: #1e1e1e;
	--pcf-muted: #6b7280;
	--pcf-border: #d1d5db;
	--pcf-error: #b32d2e;
	--pcf-success: #1a7f37;
	--pcf-radius: 6px;
	--pcf-gap: 0.75rem;
	--pcf-field-padding: 0.55rem 0.7rem;

	max-width: 640px;
	color: var(--pcf-text);
	font-size: 1rem;
	line-height: 1.4;
}

.prabisha-crm-form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--pcf-gap);
}

/* Every direct child (title, each field, consent, privacy notice, actions,
   message) is full-width by default — only firstName/lastName are singled
   out below to sit side by side, since they're the one pairing common to
   every tenant (builtin fields, not industry-specific custom ones). */
.prabisha-crm-form > * {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 480px) {
	.prabisha-crm-form__field--firstName,
	.prabisha-crm-form__field--lastName {
		flex: 1 1 calc(50% - (var(--pcf-gap) / 2));
	}
}

.prabisha-crm-form__title {
	margin: 0;
	font-size: 1.15rem;
}

.prabisha-crm-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.prabisha-crm-form__field label {
	font-weight: 600;
	font-size: 0.85rem;
}

.prabisha-crm-form__required {
	color: var(--pcf-error);
}

.prabisha-crm-form input[type="text"],
.prabisha-crm-form input[type="email"],
.prabisha-crm-form input[type="tel"],
.prabisha-crm-form input[type="number"],
.prabisha-crm-form input[type="date"],
.prabisha-crm-form select,
.prabisha-crm-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: var(--pcf-field-padding);
	border: 1px solid var(--pcf-border);
	border-radius: var(--pcf-radius);
	font-size: 1rem;
	font-family: inherit;
	color: var(--pcf-text);
	background: #fff;
}

.prabisha-crm-form textarea {
	resize: vertical;
	min-height: 4rem;
}

.prabisha-crm-form input:focus,
.prabisha-crm-form select:focus,
.prabisha-crm-form textarea:focus {
	outline: 2px solid var(--pcf-primary);
	outline-offset: 1px;
	border-color: var(--pcf-primary);
}

/* Radio/checkbox choices lay out as an inline row of chips that wraps, not
   a stacked list — the field's own question label (the first child, plain
   <label> with no -option class) is forced onto its own line above them. */
.prabisha-crm-form__field:has(.prabisha-crm-form__radio-option),
.prabisha-crm-form__field:has(.prabisha-crm-form__checkbox-option) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.prabisha-crm-form__field:has(.prabisha-crm-form__radio-option) > label:first-child,
.prabisha-crm-form__field:has(.prabisha-crm-form__checkbox-option) > label:first-child {
	flex-basis: 100%;
}

.prabisha-crm-form__radio-option,
.prabisha-crm-form__checkbox-option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 400;
	font-size: 0.9rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--pcf-border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.prabisha-crm-form__radio-option:hover,
.prabisha-crm-form__checkbox-option:hover {
	border-color: var(--pcf-primary);
}

.prabisha-crm-form__radio-option:has(input:checked),
.prabisha-crm-form__checkbox-option:has(input:checked) {
	border-color: var(--pcf-primary);
	background: color-mix(in srgb, var(--pcf-primary) 12%, transparent);
}

.prabisha-crm-form__privacy-notice {
	margin: 0;
	font-size: 0.8rem;
	color: var(--pcf-muted);
}

.prabisha-crm-form__privacy-notice a {
	color: inherit;
	text-decoration: underline;
}

.prabisha-crm-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.prabisha-crm-form__actions {
	margin: 0.25rem 0 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.prabisha-crm-form__submit {
	background: var(--pcf-primary);
	color: var(--pcf-primary-contrast);
	border: none;
	border-radius: var(--pcf-radius);
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.prabisha-crm-form__submit:hover {
	filter: brightness(0.92);
}

.prabisha-crm-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.prabisha-crm-form__spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--pcf-border);
	border-top-color: var(--pcf-primary);
	border-radius: 50%;
	animation: pcf-spin 0.7s linear infinite;
}

.prabisha-crm-form--busy .prabisha-crm-form__spinner {
	display: inline-block;
}

@keyframes pcf-spin {
	to {
		transform: rotate(360deg);
	}
}

.prabisha-crm-form__message {
	margin: 0;
	font-size: 0.9rem;
}

.prabisha-crm-form__message--success {
	padding: 0.75rem 1rem;
	border-radius: var(--pcf-radius);
	background: color-mix(in srgb, var(--pcf-success) 12%, transparent);
	color: var(--pcf-success);
}

.prabisha-crm-form__message--error {
	padding: 0.75rem 1rem;
	border-radius: var(--pcf-radius);
	background: color-mix(in srgb, var(--pcf-error) 12%, transparent);
	color: var(--pcf-error);
}

.prabisha-crm-form--notice {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--pcf-error);
	border-radius: var(--pcf-radius);
	color: var(--pcf-error);
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.prabisha-crm-form-wrap {
		max-width: 100%;
		--pcf-gap: 0.5rem;
		--pcf-field-padding: 0.45rem 0.6rem;
		font-size: 0.9rem;
	}

	.prabisha-crm-form__title {
		font-size: 1.05rem;
	}

	.prabisha-crm-form textarea {
		min-height: 3rem;
	}

	.prabisha-crm-form__submit {
		padding: 0.55rem 1.25rem;
	}
}