/* Van Roy Services — het offerteformulier
   ---------------------------------------------------------------------------
   De vorm van dit formulier staat niet hier maar in vanroy.css, bij
   `.offerte-kaart` en wat daaronder hangt. Dat is het ontwerp zoals het uit het
   Next-project komt, en WPForms krijgt in inc/offerteformulier.php dezelfde
   klassen mee: `.offerte-vraag`, `.offerte-opties`, `.offerte-optie`,
   `.offerte-tegels`, `.offerte-tegel`, `.offerte-navigatie`.

   Dit bestand doet daarom maar drie dingen:

   1. **Het haalt de eigen vormgeving van WPForms weg** waar die eroverheen
      komt. De plugin zet zijn kleuren en maten op een regel met het id van het
      formulier (`#wpforms-230 …`), en zo'n regel wint van elke klasse. Daar
      staat `!important` bij, en alleen daar.
   2. **Het vult aan wat in de HTML van WPForms anders ligt** dan in het
      ontwerp: de keuzes staan in een `ul`, de gekozen staat zit op een
      aangevinkte `input` in plaats van op een `aria-checked`, en het vinkje in
      de tegel kan geen svg zijn omdat WPForms het label door `wp_kses_post`
      haalt.
   3. **Het tekent de twee onderdelen die WPForms zelf meebrengt**: de
      stappenbalk en het uploadvak.

   Het laadt alleen op de offertepagina; zie inc/offerteformulier.php.

   De variabelen (--teal, --mist, --ink) komen uit tokens.css.
   ------------------------------------------------------------------------- */

/* ------------------------------------------- de schil van WPForms weghalen */

.offerte-kaart .wpforms-container {
  margin: 0;
}

.offerte-kaart .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* De plugin zet een eigen letter en eigen maten op alles wat invoer is. */
.offerte-kaart .wpforms-container,
.offerte-kaart input,
.offerte-kaart select,
.offerte-kaart textarea,
.offerte-kaart button {
  font-family: inherit;
}

/* Een veld van WPForms heeft een eigen bovenmarge; in het ontwerp doet de
   afstand tussen de vragen het raster van .offerte-vragen. */
.offerte-kaart .wpforms-field {
  padding: 0;
}

.offerte-kaart .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Het sterretje achter een verplichte vraag: in het ontwerp staat daar
   "(verplicht)" in dunne letters, en dat is de toon van de rest van de site. */
.offerte-kaart .wpforms-required-label {
  color: var(--slate);
  font-weight: 400;
  text-decoration: none;
  /* Het sterretje zelf verdwijnt; de haakjes hieronder nemen zijn plek in.
     Met font-size: 0 blijft het element staan, dus WPForms kan het blijven
     gebruiken om een verplicht veld te markeren. */
  font-size: 0;
}

.offerte-kaart .wpforms-required-label::before,
.offerte-kaart .wpforms-required-label::after {
  font-size: 14px;
}

.offerte-kaart .wpforms-required-label::before {
  content: '(';
}

.offerte-kaart .wpforms-required-label::after {
  content: 'verplicht)';
}

.offerte-kaart .wpforms-field-sublabel,
.offerte-kaart .wpforms-field-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}

/* ------------------------------------------------------- de keuzes als ul */

/* In het ontwerp zijn de keuzes knoppen in een div; hier staan ze in een lijst.
   De opmaak van .offerte-opties en .offerte-tegels komt uit vanroy.css, dit
   haalt alleen de opsommingstekens en de inspringing weg. */
.offerte-kaart .offerte-opties,
.offerte-kaart .offerte-tegels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.offerte-kaart .offerte-opties li,
.offerte-kaart .offerte-tegels li {
  margin: 0;
  min-width: 0;
}

/* Het rondje van de browser weg, maar het veld blijft bestaan: een
   schermlezer en het toetsenbord werken erop door. WPForms tekent in zijn
   moderne weergave een eigen rondje met regels op .wpforms-render-modern, en
   die stylesheet laadt ná deze. Vandaar !important: zonder staat het rondje
   naast de tegel en zie je twee keer hetzelfde. */
.offerte-kaart .offerte-opties input,
.offerte-kaart .offerte-tegels input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* De vorm van een tegel en van een keuzepil staat in vanroy.css, geschreven op
   de HTML van het ontwerp. WPForms zet daar zijn eigen regels overheen, en bij
   gelijke zwaarte wint wie het laatst in de pagina staat.

   Wie dat is, valt hier niet te sturen. De stylesheets van WPForms komen pas in
   de pagina op het moment dat het formulier wordt klaargezet, en Yoast bouwt de
   kop op met een eigen buffer — dus een latere prioriteit, een afhankelijkheid
   en zelfs met de hand afdrukken op PHP_INT_MAX kwamen alle drie nog vóór de
   plugin uit. Nagemeten, niet aangenomen.

   Daarom staan juist deze eigenschappen hier met !important. Het zijn er
   precies zoveel als de plugin overschrijft en geen een meer; de rest van de
   vorm komt gewoon uit vanroy.css. WPForms doet hetzelfde met zijn eigen
   opmaak, dus dit is niet het paard achter de wagen spannen maar even hard
   terugduwen.

   Blijft een tegel plat of staat de lijst in één kolom, dan is er een regel in
   wpforms-full.min.css bij gekomen die hier nog niet staat. */
.offerte-kaart .offerte-tegels {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 767px) {
  .offerte-kaart .offerte-tegels {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.offerte-kaart .offerte-tegel {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(3, 41, 58, 0.14) !important;
  border-radius: 16px !important;
  background: #fff;
  text-align: left;
  cursor: pointer;
  /* De labels van WPForms staan inline met een eigen regelafstand. */
  line-height: normal;
}

.offerte-kaart .offerte-tegel:hover {
  border-color: var(--teal) !important;
}

.offerte-kaart .offerte-opties {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.offerte-kaart .offerte-optie {
  display: inline-flex !important;
  align-items: center;
  /* 44 pixels is de kleinste maat die op een telefoon goed te raken is. */
  min-height: 44px;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--veldrand) !important;
  border-radius: 999px !important;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

.offerte-kaart .offerte-optie:hover {
  border-color: var(--teal) !important;
}

/* De gekozen staat. Het ontwerp zet die op aria-checked; WPForms heeft een
   aangevinkte input vóór het label staan, dus dezelfde regels nog een keer. */
.offerte-kaart .offerte-tegels input:checked + .offerte-tegel {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 1px var(--teal);
  background: var(--mist) !important;
}

.offerte-kaart .offerte-opties input:checked + .offerte-optie {
  border-color: var(--teal) !important;
  background: var(--teal) !important;
  color: #fff !important;
  font-weight: 600;
}

/* Het label van de dienstvraag staat niet in beeld: de kop boven het formulier
   stelt dezelfde vraag al. Uit beeld en niet weg, zodat een schermlezer de rij
   keuzes nog steeds bij een vraag kan plaatsen. */
.offerte-kaart .offerte-vraag-zonder-label > .wpforms-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De badge en het bolletje in de tegel staan in dezelfde strijd als de tegel
   zelf; zie de uitleg hierboven. */
.offerte-kaart .offerte-tegel-badge {
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--aqua) !important;
  color: var(--ink) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
}

.offerte-kaart .offerte-tegel-naam {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.offerte-kaart .offerte-tegel-tekst {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.offerte-kaart .offerte-tegel-vink {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(3, 41, 58, 0.24) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: transparent;
}

/* Het bolletje rechts in de tegel wordt een gevuld vinkje zodra de keuze aan
   staat. In het ontwerp hangt dat aan aria-checked op de knop; hier aan de
   aangevinkte input ervoor. */
.offerte-kaart .offerte-tegels input:checked + .offerte-tegel .offerte-tegel-vink {
  border-color: transparent !important;
  background: var(--teal) !important;
  color: #fff;
}

/* Zonder een zichtbare focus is het formulier met een toetsenbord niet te
   volgen; het vakje zelf is immers weggehaald. */
.offerte-kaart .offerte-opties input:focus-visible + .offerte-optie,
.offerte-kaart .offerte-tegels input:focus-visible + .offerte-tegel {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Het vinkje in de tegel. In het ontwerp is dat een svg in het label, maar
   WPForms haalt een keuzelabel door wp_kses_post en dat verwijdert een svg
   zonder melding. Dus staat het hier, als achtergrond op een leeg bolletje. */
.offerte-kaart .offerte-tegel-vink::after {
  content: '';
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------ de invoer */

/* 16 pixels is geen voorkeur maar een eis: bij een kleinere maat zoomt Safari
   op iOS automatisch in zodra een veld de focus krijgt. Het ontwerp staat op
   15, dus dat geldt alleen op een telefoon. */
@media (max-width: 767px) {
  .offerte-kaart .offerte-vraag input,
  .offerte-kaart .offerte-vraag textarea,
  .offerte-kaart .offerte-vraag select {
    font-size: 16px;
  }

  /* Een datumveld is op iOS breder dan op de desktop, omdat Safari er zijn
     eigen bediening in tekent. Zonder dit loopt het formulier buiten het
     scherm. Op de desktop blijft die bediening staan, want daar is de
     kalenderknop juist handig. */
  .offerte-kaart .offerte-vraag input[type='date'] {
    appearance: none;
    -webkit-appearance: none;
  }
}

/* Een keuzelijst krijgt dezelfde vorm als een invoerveld; vanroy.css kent er
   geen, want in het ontwerp staat er geen select op deze pagina. */
.offerte-kaart .offerte-vraag select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--veldrand);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
}

/* ------------------------------------------------------- de stappenbalk */

/* De stappenbalk komt uit WPForms zelf. Het ontwerp zet de vier stappen in een
   raster met een bol en een label, met daaronder een dunne voortgangsbalk; die
   breedte zet assets/js/offerte.js. */
.offerte-kaart .wpforms-page-indicator {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  background: none !important;
  border: 0;
}

.offerte-kaart .wpforms-page-indicator::after {
  content: '';
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(var(--teal), var(--teal)) left / var(--offerte-voortgang, 25%) 100% no-repeat,
    var(--mist);
  transition: background-size 0.4s var(--uit);
}

.offerte-kaart .wpforms-page-indicator-page {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}

.offerte-kaart .wpforms-page-indicator-page-number {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  /* !important omdat WPForms de kleur van de bol zet met een regel op het id
     van het formulier, uit de instelling "Kleur van de stappenbalk". */
  background: var(--mist) !important;
  color: var(--slate) !important;
}

.offerte-kaart .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
  background: var(--teal) !important;
  color: #fff !important;
}

.offerte-kaart .wpforms-page-indicator-page.active {
  font-weight: 700;
  color: var(--ink);
}

.offerte-kaart .wpforms-page-indicator-page-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offerte-kaart .wpforms-page-indicator-page-title::before {
  /* WPForms zet een scheidingsteken voor de titel. */
  content: none;
}

@media (max-width: 767px) {
  .offerte-kaart .wpforms-page-indicator-page-title {
    display: none;
  }
}

/* --------------------------------------------------------------- de knoppen */

/* De knoprij onder elke stap. Bij een stapovergang krijgt de container de
   klasse .offerte-navigatie mee; de laatste stap heeft de eigen container van
   WPForms, en die krijgt hier dezelfde vorm. */
.offerte-kaart .wpforms-submit-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
}

/* De volgende- en verstuurknop is de oranje pil met de witte pijlcirkel, net
   als elke andere oproepknop op de site. De cirkel staat in het ontwerp als
   los element in de knop; WPForms geeft ons alleen een knop met tekst, dus hij
   wordt hier getekend.

   !important op de kleuren omdat WPForms ze zet met een regel op het id van het
   formulier; de vorm heeft het niet nodig. */
.offerte-kaart .wpforms-page-button[class*='next'],
.offerte-kaart button[type='submit'] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 8px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--oranje) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.offerte-kaart .wpforms-page-button[class*='next']:hover,
.offerte-kaart button[type='submit']:hover {
  background: var(--oranje-donker) !important;
}

.offerte-kaart .wpforms-page-button[class*='next']::after,
.offerte-kaart button[type='submit']::after {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F55A0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    #fff;
}

/* De terugknop is de witte pil met een rand, zoals .offerte-vorige. */
.offerte-kaart .wpforms-page-button[class*='prev'] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--veldrand);
  background: #fff !important;
  color: var(--navy) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}

.offerte-kaart .wpforms-page-button[class*='prev']:hover {
  border-color: var(--teal);
  color: var(--teal) !important;
}

/* De regel "De offerte is vrijblijvend." zet offerte.js ervoor. Staat hij er
   niet, dan duwt dit de knop nog steeds naar rechts. */
.offerte-kaart .offerte-navigatie,
.offerte-kaart .wpforms-submit-container {
  justify-content: space-between;
}

.offerte-kaart .offerte-navigatie .offerte-vrijblijvend,
.offerte-kaart .wpforms-submit-container .offerte-vrijblijvend {
  margin-right: auto;
}

/* ------------------------------------------------------- foto's en video */

/* Het uploadvak is dat van WPForms; het ontwerp tekent er een gestreept vlak
   van, met dezelfde maten als .offerte-dropzone. */
.offerte-kaart .wpforms-uploader {
  padding: 36px 24px;
  border: 2px dashed rgba(0, 122, 150, 0.35);
  border-radius: 16px;
  background: var(--mist-2);
  text-align: center;
}

.offerte-kaart .wpforms-uploader:hover,
.offerte-kaart .wpforms-uploader.dz-drag-hover {
  border-color: var(--teal);
  background: rgba(143, 220, 234, 0.25);
}

.offerte-kaart .wpforms-uploader .modern-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.offerte-kaart .wpforms-uploader .modern-hint {
  font-size: 14px;
  color: var(--slate);
}

/* ------------------------------------------------ meldingen en bevestiging */

.offerte-kaart .wpforms-error,
.offerte-kaart label.wpforms-error {
  font-size: 13px;
  font-weight: 500;
  color: var(--fout);
}

.offerte-kaart input.wpforms-error,
.offerte-kaart textarea.wpforms-error,
.offerte-kaart select.wpforms-error {
  border-color: var(--fout);
  box-shadow: 0 0 0 3px rgba(178, 59, 0, 0.12);
}

/* De melding bovenaan als er iets mist, in dezelfde vorm als .offerte-alert. */
.offerte-kaart .wpforms-error-container {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fout-bg);
  color: var(--fout-tekst);
  font-size: 14px;
  font-weight: 500;
}

/* Na het versturen komt de bevestiging op de plek van het formulier. */
.offerte-kaart .wpforms-confirmation-container-full {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.offerte-kaart .wpforms-confirmation-container-full p:first-child {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}