/*
 * Opmaak voor HTML die plugins zelf maken, waar we geen Tailwind-klassen op kunnen zetten.
 * Komt uit de oude app.css (to-be-deleted-later.css, weg sinds 25 sep 2026). Ingeladen als eigen
 * stylesheet in functions/core/assets.php, vóór Tailwind en de bundle.
 */

/* Contact Form 7: de lay-out van de formulieren, zonder eigen klassen. De HTML in het formulier
   (database) is één div met daarin per veld een div (label en veld), twee velden naast elkaar in een
   div, en onderaan een div met de verzendknop en een korte belofte. De velden zelf krijgen hun stijl
   uit base/form.css, de verzendknop is een ui-button (class:ui-button in het formulier). De oudere
   formulieren hieronder hebben wel klassen en vallen buiten :not([class]). */
.wpcf7-form > div:not([class]) div:has(> label) { margin-bottom: 14px; }
.wpcf7-form > div:not([class]) > div:has(> div > label) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wpcf7-form > div:not([class]) label { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-slate-500, #62748e); margin-bottom: 6px; }
.wpcf7-form > div:not([class]) > div:has(> .wpcf7-submit) { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.wpcf7-form > div:not([class]) > div:has(> .wpcf7-submit) > span:not([class]) { font-size: 12.5px; color: var(--color-slate-400, #90a1b9); line-height: 1.5; margin: 12px 0 0; }
.wpcf7-form > div:not([class]) .wpcf7-spinner { display: block; margin: 8px 0 0; }
@media (max-width: 900px) {
  .wpcf7-form > div:not([class]) > div:has(> div > label) { grid-template-columns: 1fr; }
}

/* Contact Form 7: de oudere formulieren met form-fields, form-field en form-bottom (contact op de
   klantcases, solliciteren op een vacature). Twee velden naast elkaar, onder 640px onder elkaar. */
.wpcf7 form > :is(.form-field, .form-fields) { margin-bottom: 16px; }
.wpcf7 .form-fields:has(> .form-field) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7 .form-fields:has(> .form-field:only-child) { grid-template-columns: 1fr; }
.wpcf7 :is(.form-field, .form-fields) > label { display: block; margin-bottom: 8px; }
.wpcf7 .form-field input[type=file] { width: 100%; padding: 12px; border: 1px dashed var(--color-slate-200, #e2e8f0); border-radius: 9px; background-color: var(--color-slate-50, #f8fafc); }
.wpcf7 .form-bottom { margin-top: 8px; }
.wpcf7 .form-bottom p { margin: 0 0 16px; }
.wpcf7 .form-bottom .button-wrapper a { display: block; padding: 16px; border-radius: 24px; background-color: var(--color-primary); color: #fff; text-align: center; text-decoration: none; }
@media (max-width: 639px) {
  .wpcf7 .form-fields:has(> .form-field) { grid-template-columns: 1fr; }
}

/* Contact Form 7: foutmelding onder een veld, rode rand rond een ongeldig veld, en de
   statusboodschap onder het formulier na verzenden (fout en gelukt). */
span.wpcf7-not-valid-tip {
  color: #FF695B;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding-top: 5px;
}

.wpcf7-form-control.wpcf7-validates-as-required.wpcf7-not-valid {
  border: 2px solid #FF695B !important;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  clear: both;
  border: 0;
  padding: 5px 10px;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: #FFFFFF;
  background-color: #FF695B;
  margin-bottom: 0;
  margin-top: 20px;
}

.wpcf7 form.sent .wpcf7-response-output {
  clear: both;
  border: 0;
  padding: 5px 10px;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: #FFFFFF;
  background-color: #233342;
  margin-bottom: 0;
  margin-top: 20px;
}

/* Cookiebanner van Cookie Law Info (actief op live, niet op staging) */
.cli-bar-btn_container {
  margin-right: 75px;
}