/* Inventix Child - contact page */
/* Contactpagina — secties */
.ix-con-section-head,
.ix-con-intro .ix-service-section-head,
.ix-con-intro__body {
	max-width: none;
}

.ix-con-intro__note {
	margin-top: 1rem;
	color: var(--ix-text-muted);
}

.ix-con-details__grid {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.ix-con-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.ix-con-details__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ix-con-details__card {
	padding: 1.2rem 1.25rem;
	border-left-width: 2px;
	border-left-style: solid;
}

.ix-con-details__card--emerald {
	border-color: rgb(16 185 129 / 0.14);
	border-left-color: rgb(52 211 153 / 0.55);
	background: linear-gradient(155deg, rgb(16 185 129 / 0.06), rgb(52 211 153 / 0.02) 58%, var(--ix-bg));
	box-shadow: none;
}

.ix-con-details__card--emerald .ix-con-details__label {
	color: rgb(5 150 105 / 0.82);
}

.ix-con-details__card--emerald .ix-con-details__value a {
	color: var(--ix-text);
}

.ix-con-details__card--emerald .ix-con-details__value a:hover {
	color: var(--ix-accent);
}

.ix-con-details__card--sky {
	border-color: rgb(0 102 102 / 0.14);
	border-left-color: rgb(45 212 191 / 0.55);
	background: linear-gradient(155deg, rgb(0 102 102 / 0.06), rgb(45 212 191 / 0.02) 58%, var(--ix-bg));
	box-shadow: none;
}

.ix-con-details__card--sky .ix-con-details__label {
	color: rgb(0 102 102 / 0.82);
}

.ix-con-details__card--sky .ix-con-details__value a {
	color: var(--ix-text);
}

.ix-con-details__card--sky .ix-con-details__value a:hover {
	color: var(--ix-accent);
}

.ix-con-details__card--amber {
	border-color: rgb(245 158 11 / 0.14);
	border-left-color: rgb(251 191 36 / 0.55);
	background: linear-gradient(155deg, rgb(245 158 11 / 0.06), rgb(251 191 36 / 0.02) 58%, var(--ix-bg));
	box-shadow: none;
}

.ix-con-details__card--amber .ix-con-details__label {
	color: rgb(217 119 6 / 0.82);
}

.ix-con-details__card--amber .ix-con-details__value {
	color: var(--ix-text);
}

.ix-con-details__card--social {
	border-left-width: 1px;
	border-left-style: solid;
	border-color: rgb(0 102 102 / 0.18);
	background: linear-gradient(135deg, rgb(0 102 102 / 0.05), rgb(16 185 129 / 0.04));
	box-shadow: none;
}

.ix-con-social__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ix-con-social__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ix-text);
	text-decoration: none;
	transition: color var(--ix-transition);
}

.ix-con-social__link:hover {
	color: var(--ix-accent);
}

.ix-con-social__icon {
	display: block;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--ix-text-muted);
	transition: color var(--ix-transition);
}

.ix-con-social__link:hover .ix-con-social__icon {
	color: var(--ix-accent);
}

.ix-con-details__label {
	margin: 0 0 0.45rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ix-text-muted);
}

.ix-con-details__value {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ix-text);
}

.ix-con-details__value a {
	color: inherit;
	text-decoration: none;
}

.ix-con-details__value a:hover {
	color: var(--ix-accent);
}

.ix-con-details__action {
	margin: 0.5rem 0 0;
}

.ix-con-details__whatsapp {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.65rem;
	border-radius: 9999px;
	background: rgb(37 211 102 / 0.14);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #006666;
	text-decoration: none;
}

.ix-con-details__note {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--ix-text-muted);
}

.ix-con-details__business {
	padding: 1.25rem 1.35rem;
}

.ix-con-details__business--violet {
	border-color: rgb(0 102 102 / 0.14);
	border-left: 2px solid rgb(45 212 191 / 0.55);
	background: linear-gradient(145deg, rgb(0 102 102 / 0.06), rgb(45 212 191 / 0.02) 55%, var(--ix-bg));
	box-shadow: none;
}

.ix-con-details__business--violet .ix-con-details__business-title {
	color: rgb(0 77 77 / 0.82);
}

.ix-con-details__business--violet .ix-con-details__row dt {
	color: rgb(0 102 102 / 0.78);
}

html[data-ix-theme="dark"] .ix-con-details__card--emerald .ix-con-details__label {
	color: rgb(110 231 183 / 0.78);
}

html[data-ix-theme="dark"] .ix-con-details__card--emerald .ix-con-details__value a {
	color: var(--ix-text);
}

html[data-ix-theme="dark"] .ix-con-details__card--sky .ix-con-details__label {
	color: rgb(94 234 212 / 0.78);
}

html[data-ix-theme="dark"] .ix-con-details__card--sky .ix-con-details__value a {
	color: var(--ix-text);
}

html[data-ix-theme="dark"] .ix-con-details__card--amber .ix-con-details__label {
	color: rgb(252 211 77 / 0.78);
}

html[data-ix-theme="dark"] .ix-con-details__card--amber .ix-con-details__value {
	color: var(--ix-text);
}

html[data-ix-theme="dark"] .ix-con-details__business--violet .ix-con-details__business-title,
html[data-ix-theme="dark"] .ix-con-details__business--violet .ix-con-details__row dt {
	color: rgb(153 246 228 / 0.82);
}

.ix-con-details__business-title {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ix-text);
}

.ix-con-details__list {
	margin: 0;
}

.ix-con-details__row {
	display: grid;
	gap: 0.35rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--ix-border);
}

.ix-con-details__row:first-child {
	padding-top: 0;
	border-top: 0;
}

.ix-con-details__row dt {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ix-text);
}

.ix-con-details__row dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ix-text-muted);
}

/* Contact hero form panel */
.ix-con-hero-layout .ix-service-hero__grid {
	align-items: stretch;
}

.ix-con-hero-copy {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.ix-con-hero-direct {
	margin-top: 1.5rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--ix-accent) 16%, var(--ix-border));
	border-radius: var(--ix-radius-xl, 1rem);
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--ix-accent-soft) 55%, #fff) 0%, #fff 100%);
}

@media (min-width: 1024px) {
	.ix-con-hero-direct {
		margin-top: auto;
	}
}

.ix-con-hero-direct__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0d9488;
}

.ix-con-hero-direct__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.ix-con-hero-direct__item {
	display: grid;
	gap: 0.15rem;
}

.ix-con-hero-direct__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ix-text-muted);
}

.ix-con-hero-direct__value {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ix-text);
	text-decoration: none;
	line-height: 1.35;
}

.ix-con-hero-direct__value:hover {
	color: var(--ix-accent);
}

.ix-con-hero-direct__value--plain {
	font-weight: 600;
	color: var(--ix-text-muted);
}

.ix-con-hero-direct__ctas {
	margin-top: 1rem;
}

html[data-ix-theme="dark"] .ix-con-hero-direct {
	border-color: color-mix(in srgb, var(--ix-accent) 28%, var(--ix-border));
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--ix-accent-soft) 40%, var(--ix-bg-elevated)) 0%, var(--ix-bg-elevated) 100%);
}

.ix-con-hero-form {
	scroll-margin-top: 6rem;
	width: 100%;
	margin: 0;
	padding: 1.25rem 1.35rem;
	border: 1px solid color-mix(in srgb, var(--ix-accent) 18%, var(--ix-border));
	border-radius: var(--ix-radius-xl, 1rem);
	background:
		linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--ix-accent-soft) 40%, #fff) 100%);
	box-shadow:
		0 12px 32px rgb(0 102 102 / 0.08),
		0 0 0 1px rgb(0 102 102 / 0.03);
	transition: border-color var(--ix-transition), box-shadow var(--ix-transition);
}

.ix-con-hero-form:focus-within {
	border-color: color-mix(in srgb, var(--ix-accent) 45%, var(--ix-border));
	box-shadow:
		0 14px 36px rgb(0 102 102 / 0.12),
		0 0 0 3px rgb(45 212 191 / 0.16);
}

.ix-con-hero-form__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0d9488;
}

.ix-con-hero-form__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ix-text);
}

.ix-con-hero-form__text {
	margin: 0 0 0.65rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ix-text-muted);
}

.ix-con-hero-form__security {
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ix-text-muted);
}

.ix-cf7--contacteer-inventix .wpcf7-form {
	gap: 0;
}

.ix-cf7--contacteer-inventix .ix-cf7-grid {
	gap: 0;
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.ix-cf7--contacteer-inventix .ix-cf7-grid {
		column-gap: 0.5rem;
	}
}

.ix-cf7--contacteer-inventix .ix-cf7-label {
	font-size: 0.75rem;
	gap: 0.15rem;
}

.ix-cf7--contacteer-inventix .ix-input,
.ix-cf7--contacteer-inventix input[type="text"],
.ix-cf7--contacteer-inventix input[type="email"],
.ix-cf7--contacteer-inventix input[type="tel"],
.ix-cf7--contacteer-inventix input[type="url"],
.ix-cf7--contacteer-inventix select,
.ix-cf7--contacteer-inventix textarea {
	padding: 0.5rem 0.65rem;
	font-size: 0.875rem;
}

.ix-cf7--contacteer-inventix .ix-cf7-textarea--compact {
	min-height: 0;
	max-height: 8rem;
}

.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance {
	margin-bottom: 0.35rem;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--ix-text-muted);
}

.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance .wpcf7-acceptance,
.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance .wpcf7-list-item,
.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance .wpcf7-list-item label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance input[type="checkbox"] {
	display: inline-block;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	max-width: 1rem;
	margin: 0.15em 0 0;
	float: none;
}

.ix-cf7--contacteer-inventix .ix-cf7-field--acceptance .wpcf7-list-item-label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.ix-cf7--contacteer-inventix .wpcf7-submit {
	margin-top: 0.35rem;
	padding: 0.65rem 1rem;
	font-size: 0.875rem;
}

html[data-ix-theme="dark"] .ix-con-hero-form {
	border-color: color-mix(in srgb, var(--ix-accent) 28%, var(--ix-border));
	background:
		linear-gradient(165deg, var(--ix-bg-elevated) 0%, color-mix(in srgb, var(--ix-accent-soft) 35%, var(--ix-bg-elevated)) 100%);
	box-shadow:
		0 12px 32px rgb(0 0 0 / 0.28),
		0 0 0 1px rgb(45 212 191 / 0.06);
}

/* Wat gebeurt er na uw bericht */
.ix-contact-after__list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.ix-contact-after__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.ix-contact-after__item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1.1rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--ix-accent, #006666) 20%, #e5e7eb);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--ix-accent-soft, #e6f3f3) 70%, #fff);
}

.ix-contact-after__num {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #0d9488;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
}

.ix-contact-after__title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ix-text, #0a0a0a);
}

.ix-contact-after__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ix-text-muted, #4b5563);
}

html[data-ix-theme="dark"] .ix-contact-after__item {
	border-color: color-mix(in srgb, var(--ix-accent) 28%, var(--ix-border));
	background: color-mix(in srgb, var(--ix-accent-soft) 55%, var(--ix-bg-elevated));
}
