/* Contact + trial form pages */
.contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 880px) { .contact-split { grid-template-columns: 1fr; } }

.contact-boxes { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.contact-box {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.contact-box__icon {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--c-tint-1); color: var(--c-accent);
  display: grid; place-items: center;
}
.contact-box__icon svg { width: 22px; height: 22px; }
.contact-box h5 { margin-bottom: 2px; }
.contact-box p { font-size: var(--fz-sm); }

/* ---- Mail form ----
   Styles apply directly to any [data-mail-form] so all three forms
   (contact, FAQ-aside, gratis-proefperiode) render consistently
   regardless of wrapper markup. */
form[data-mail-form] { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
form[data-mail-form] p { display: grid; gap: 6px; margin: 0; }

.mail-form, .contact-form {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-1);
}
form[data-mail-form] .form-row-2,
form[data-mail-form] .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) {
  form[data-mail-form] .form-row-2,
  form[data-mail-form] .contact-grid { grid-template-columns: 1fr; }
}

form[data-mail-form] label {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fz-sm);
}
form[data-mail-form] input,
form[data-mail-form] select,
form[data-mail-form] textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-btn);
  background: #fff; color: var(--c-text);
  font-size: var(--fz-body);
}
form[data-mail-form] input:focus,
form[data-mail-form] select:focus,
form[data-mail-form] textarea:focus {
  outline: 2px solid var(--c-primary); outline-offset: 0; border-color: transparent;
}
form[data-mail-form] textarea { min-height: 150px; resize: vertical; }
form[data-mail-form] ::placeholder { color: var(--c-text-3); opacity: 1; }
form[data-mail-form] .btn { justify-self: start; }
form[data-mail-form] .btn[style*="width:100%"], form[data-mail-form] .btn--full {
  width: 100%; justify-self: stretch;
}

/* Wrapper-style fields (legacy pattern) keep working */
.form-field { display: grid; gap: 6px; }

.mail-form__note { font-size: var(--fz-xs); color: var(--c-text-3); }

/* Visually hidden labels (placeholder-only forms, faithful to original CF7) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}