/* ========================================================
	VERSICOLOR TUINEN 2026
	FORMS CSS
======================================================== */


/* ============================
	FORM SECTIONS
============================ */

.contactform,
.groupform {
	background:
		linear-gradient(180deg,
			var(--vc-cream) 0%,
			var(--vc-soft) 100%);
	padding: 7rem 0;
}


/* ============================
	FORM DETAILS
============================ */

.contactform--details,
.groupform--details {
	background-color: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: 1.5rem;
	box-shadow: var(--vc-shadow-card);
	height: fit-content;
	padding: 2.25rem;
}

.contactform--details h2,
.groupform--details h2 {
	color: var(--vc-black);
	font-family: var(--vc-font-heading);
	font-size: clamp(1.8rem, 2vw, 2.15rem);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.contactform--details hr,
.contactform--forminner hr,
.groupform--details hr,
.groupform--forminner hr {
	border: 0;
	border-top: 1px solid var(--vc-line);
	margin: 1.5rem 0;
	opacity: 1;
}

.contactform--intro,
.groupform--intro {
	color: var(--vc-grey-dark);
	font-size: 1.075rem;
	line-height: 1.7;
	margin-bottom: 0;
}

.contactform--kicker,
.groupform--kicker {
	color: var(--vc-purple);
	display: block;
	font-family: var(--vc-font-ui);
	font-size: .9rem;
	font-weight: 800;
	letter-spacing: .11rem;
	line-height: 1;
	margin-bottom: .85rem;
	text-transform: uppercase;
}


/* ============================
	DETAIL BLOCKS
============================ */

.contactform--block,
.groupform--block {
	position: relative;
}

.contactform--block h3,
.groupform--block h3 {
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: .85rem;
}

.contactform--block p,
.groupform--block p {
	color: var(--vc-grey-dark);
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 0;
}

.contactform--block p+p,
.groupform--block p+p {
	margin-top: .75rem;
}


/* ============================
	DETAIL LINKS
============================ */

.contactform--links,
.groupform--links {
	display: flex;
	flex-direction: column;
	gap: .24rem;
	margin-bottom: 1rem;
}

.contactform--links a,
.groupform--links a {
	align-items: flex-start;
	color: var(--vc-grey-dark);
	display: inline-flex;
	font-size: 1rem;
	gap: .75rem;
	line-height: 1.5;
	width: fit-content;
}

.contactform--links a:hover,
.groupform--links a:hover {
	color: var(--vc-purple);
}

.contactform--links i,
.groupform--links i {
	align-items: center;
	color: var(--vc-purple);
	display: inline-flex;
	font-size: 1.05rem;
	justify-content: center;
	line-height: 1.6;
	min-width: 1.15rem;
}


/* ============================
	DETAIL LISTS
============================ */

.contactform--list,
.groupform--list {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contactform--list li,
.groupform--list li {
	align-items: flex-start;
	color: var(--vc-grey-dark);
	display: flex;
	font-size: 1rem;
	gap: .7rem;
	line-height: 1.55;
}

.contactform--list i,
.groupform--list i {
	color: var(--vc-green);
	font-size: 1.05rem;
	line-height: 1.6;
	min-width: 1.15rem;
}


/* ============================
	FORM OUTER
============================ */

.contactform--formouter,
.groupform--formouter {
	background:
		linear-gradient(135deg,
			rgba(255, 255, 255, .98) 0%,
			rgba(251, 248, 255, .98) 55%,
			rgba(22, 200, 216, .1) 100%);
	border: 1px solid var(--vc-border);
	border-radius: 1.5rem;
	box-shadow: var(--vc-shadow-card);
	height: 100%;
	padding: .9rem;
}

.contactform--forminner,
.groupform--forminner {
	background-color: var(--vc-white);
	border-radius: 1.15rem;
	height: 100%;
	padding: 2rem;
}


/* ============================
	FORM HEADER
============================ */

.contactform--formheader,
.groupform--formheader {
	margin-bottom: 1.75rem;
}

.contactform--formheader h2,
.groupform--formheader h2 {
	color: var(--vc-black);
	font-family: var(--vc-font-heading);
	font-size: clamp(2rem, 2.5vw, 2.65rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.08;
	margin-bottom: .85rem;
}

.contactform--formheader p,
.groupform--formheader p {
	color: var(--vc-grey-dark);
	font-size: 1.075rem;
	line-height: 1.7;
	margin-bottom: 0;
}


/* ============================
	FIELDSETS
============================ */

.contactform--fieldset,
.groupform--fieldset {
	background-color: var(--vc-white);
	border: 1.5px solid var(--vc-line);
	border-radius: 1rem;
	margin: 0 0 1.25rem;
	padding: 1.75rem;
}

.contactform--fieldset:last-of-type,
.groupform--fieldset:last-of-type {
	margin-bottom: 0;
}

.contactform--fieldset h3,
.groupform--fieldset h3 {
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 1.25rem;
}

.contactform--fieldsetintro,
.groupform--fieldsetintro {
	color: var(--vc-grey-dark);
	font-size: .975rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}


/* ============================
	FORM LABELS
============================ */

.contactform--form label,
.groupform--form label {
	color: var(--vc-black);
	display: block;
	font-family: var(--vc-font-ui);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: .55rem;
}

.contactform--required,
.groupform--required {
	color: var(--vc-pink);
	margin-left: .15rem;
}

.contactform--optional,
.groupform--optional {
	color: var(--vc-grey);
	font-size: .825rem;
	font-weight: 600;
	margin-left: .25rem;
}


/* ============================
	FORM CONTROLS
============================ */

.contactform--form .form-control,
.contactform--form .form-select,
.groupform--form .form-control,
.groupform--form .form-select {
	background-color: var(--vc-white);
	border: 1.5px solid var(--vc-border);
	border-radius: .75rem;
	color: var(--vc-black);
	font-family: var(--vc-font-body);
	font-size: 1rem;
	line-height: 1.4;
	padding: .8rem .95rem;
	transition:
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .3s ease;
	width: 100%;
}

.contactform--form .form-control::placeholder,
.groupform--form .form-control::placeholder {
	color: var(--vc-grey);
	opacity: .7;
}

.contactform--form .form-control:hover,
.contactform--form .form-select:hover,
.groupform--form .form-control:hover,
.groupform--form .form-select:hover {
	border-color: rgba(126, 107, 232, .55);
}

.contactform--form .form-control:focus,
.contactform--form .form-select:focus,
.groupform--form .form-control:focus,
.groupform--form .form-select:focus {
	background-color: var(--vc-white);
	border-color: var(--vc-purple);
	box-shadow: 0 0 0 .2rem rgba(126, 107, 232, .13);
	color: var(--vc-black);
	outline: none;
}

.contactform--form .form-control.is-invalid,
.contactform--form .form-select.is-invalid,
.groupform--form .form-control.is-invalid,
.groupform--form .form-select.is-invalid {
	border-color: var(--vc-red);
	box-shadow: 0 0 0 .18rem rgba(255, 74, 84, .12);
}

.contactform--form .form-control.is-valid,
.contactform--form .form-select.is-valid,
.groupform--form .form-control.is-valid,
.groupform--form .form-select.is-valid {
	border-color: var(--vc-green);
	box-shadow: 0 0 0 .18rem rgba(168, 201, 17, .12);
}

.contactform--form input.form-control,
.contactform--form select.form-select,
.groupform--form input.form-control,
.groupform--form select.form-select {
	min-height: 54px;
}

.contactform--form textarea.form-control,
.groupform--form textarea.form-control {
	height: auto;
	min-height: 170px;
	padding-top: .9rem;
	resize: vertical;
}

.contactform--form input[type="date"],
.contactform--form input[type="time"],
.groupform--form input[type="date"],
.groupform--form input[type="time"] {
	color: var(--vc-black);
}


/* ============================
	FORM HELP TEXT
============================ */

.contactform--help,
.groupform--help {
	color: var(--vc-grey);
	display: block;
	font-size: .875rem;
	line-height: 1.5;
	margin-top: .45rem;
}

.contactform--form .invalid-feedback,
.groupform--form .invalid-feedback {
	color: var(--vc-red);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.45;
	margin-top: .4rem;
}


/* ============================
	CHOICE CONTROLS
============================ */

.contactform--choices,
.groupform--choices {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contactform--form .form-check,
.groupform--form .form-check {
	align-items: flex-start;
	background-color: var(--vc-white);
	border: 1.5px solid var(--vc-border);
	border-radius: .75rem;
	display: flex;
	gap: .7rem;
	margin: 0;
	min-height: 54px;
	padding: .9rem 1rem;
	transition:
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .3s ease;
}

.contactform--form .form-check:hover,
.groupform--form .form-check:hover {
	background-color: rgba(126, 107, 232, .035);
	border-color: rgba(126, 107, 232, .45);
}

.contactform--form .form-check-input,
.groupform--form .form-check-input {
	border: 1.5px solid var(--vc-grey);
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
	height: 1.15rem;
	margin: .08rem 0 0;
	width: 1.15rem;
}

.contactform--form .form-check-input:checked,
.groupform--form .form-check-input:checked {
	background-color: var(--vc-purple);
	border-color: var(--vc-purple);
}

.contactform--form .form-check-input:focus,
.groupform--form .form-check-input:focus {
	border-color: var(--vc-purple);
	box-shadow: 0 0 0 .2rem rgba(126, 107, 232, .13);
}

.contactform--form .form-check-label,
.groupform--form .form-check-label {
	color: var(--vc-grey-dark);
	cursor: pointer;
	font-family: var(--vc-font-body);
	font-size: .975rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}


/* ============================
	INFORMATION NOTICE
============================ */

.contactform--notice,
.groupform--notice {
	align-items: flex-start;
	background-color: rgba(22, 200, 216, .08);
	border: 1.5px solid rgba(22, 200, 216, .3);
	border-radius: .9rem;
	display: flex;
	gap: .85rem;
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem;
}

.contactform--notice i,
.groupform--notice i {
	color: var(--vc-cyan);
	font-size: 1.1rem;
	line-height: 1.5;
	min-width: 1.1rem;
}

.contactform--notice p,
.groupform--notice p {
	color: var(--vc-grey-dark);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
}

.groupform--requestnotice {
	background-color: rgba(255, 138, 0, .075);
	border-color: rgba(255, 138, 0, .3);
}

.groupform--requestnotice i {
	color: var(--vc-orange);
}


/* ============================
	PRIVACY BOX
============================ */

.contactform--privacybox,
.groupform--privacybox {
	background-color: rgba(255, 138, 0, .07);
	border: 1.5px solid rgba(255, 138, 0, .28);
	border-radius: .85rem;
	padding: 1rem 1.1rem;
}

.contactform--privacybox p,
.groupform--privacybox p {
	color: var(--vc-grey-dark);
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
}

.contactform--privacybox strong,
.groupform--privacybox strong {
	color: var(--vc-orange);
	font-weight: 800;
}

.contactform--privacybox a,
.groupform--privacybox a {
	color: var(--vc-orange);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .3s ease;
}

.contactform--privacybox a:hover,
.groupform--privacybox a:hover {
	color: var(--vc-black);
}


/* ============================
	FORM FOOTER
============================ */

.contactform--footer,
.groupform--footer {
	margin-top: 1.5rem;
}

.contactform--footer hr,
.groupform--footer hr {
	border: 0;
	border-top: 1px solid var(--vc-line);
	margin: 1.25rem 0;
	opacity: 1;
}

.contactform--footerrow,
.groupform--footerrow {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.contactform--footernote,
.groupform--footernote {
	color: var(--vc-grey);
	font-size: .875rem;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
}


/* ============================
	SUBMIT BUTTON
============================ */

.contactform--submit,
.groupform--submit {
	align-items: center;
	background-color: var(--vc-deep-purple);
	border: 1.5px solid var(--vc-deep-purple);
	border-radius: 10rem;
	color: var(--vc-white);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--vc-font-ui);
	font-size: 1.075rem;
	font-weight: 800;
	gap: .7rem;
	justify-content: center;
	line-height: 1;
	min-height: 56px;
	padding: .95rem 1.5rem 1rem;
	transition:
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .3s ease,
		color .3s ease;
}

.contactform--submit:hover,
.groupform--submit:hover {
	background-color: var(--vc-purple);
	border-color: var(--vc-purple);
	box-shadow: var(--vc-shadow-button-hover);
	color: var(--vc-white);
}

.contactform--submit i,
.groupform--submit i {
	font-size: 1rem;
	line-height: 1;
	transform: translateX(0);
	transition: transform .3s ease;
}

.contactform--submit:hover i,
.groupform--submit:hover i {
	transform: translateX(5px);
}



/* ============================
	DETAIL ACTION BOX
============================ */

.contactform--actionbox,
.groupform--actionbox {
	background:
		linear-gradient(135deg,
			rgba(25, 22, 45, .025) 0%,
			rgba(22, 200, 216, .09) 100%);
	border: 1px solid var(--vc-border);
	border-radius: 1rem;
	padding: 1.35rem;
}

.contactform--actionlabel,
.groupform--actionlabel {
	color: var(--vc-purple);
	display: block;
	font-family: var(--vc-font-ui);
	font-size: .825rem;
	font-weight: 800;
	letter-spacing: .08rem;
	line-height: 1;
	margin-bottom: .65rem;
	text-transform: uppercase;
}

.contactform--actionbox h3,
.groupform--actionbox h3 {
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: .65rem;
}

.contactform--actionbox p,
.groupform--actionbox p {
	color: var(--vc-grey-dark);
	font-size: .95rem;
	line-height: 1.6;
	margin-bottom: 1.1rem;
}

.contactform--actionbox .vc--button,
.groupform--actionbox .vc--button {
	font-size: .95rem;
	min-height: 48px;
	padding: .8rem 1.1rem .85rem;
}


/* ============================
	FORM STATUS
============================ */

.contactform--status,
.groupform--status {
	border-radius: .85rem;
	display: none;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem;
}

.contactform--status.is-visible,
.groupform--status.is-visible {
	display: block;
}

.contactform--status.is-success,
.groupform--status.is-success {
	background-color: rgba(168, 201, 17, .1);
	border: 1.5px solid rgba(168, 201, 17, .4);
	color: var(--vc-grey-dark);
}

.contactform--status.is-error,
.groupform--status.is-error {
	background-color: rgba(255, 74, 84, .08);
	border: 1.5px solid rgba(255, 74, 84, .35);
	color: var(--vc-red);
}


/* ============================
	HONEYPOT
============================ */

.contactform--honeypot,
.groupform--honeypot {
	height: 0;
	left: -9999px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 0;
}