/* Offerte-aanvraag in de huisstijl (teal, ronde hoeken), i.p.v. het
 * standaard Webform-blauw. Geselecteerde CSS-klassen komen rechtstreeks uit
 * de gerenderde HTML (nagekeken, niet gegokt). Alles geschaald op de
 * theme-basis: html staat op 10px, dus 1.6rem = 16px (voorkomt ook
 * auto-zoom op iOS bij focus). */
:root {
  --oa-darkest: var(--teal-darkest, #035968);
  --oa-darker: var(--teal-darker, #0B7984);
  --oa-medium: var(--teal-medium, #19A3A5);
  --oa-light: var(--teal-light, #33C5BB);
  --oa-tint: #eef6f6;
  --oa-border: #dbe7e7;
  --oa-muted: #3f5555;
}

/* ---------- Volle pagina (niet de modal) ----------
 * Deze route (het formulier los op /offerte-aanvragen) heeft geen eigen
 * header-component zoals gewone pagina's (die een gekleurde header-banner
 * hebben die toevallig hoog genoeg is om onder de vaste .masthead uit te
 * komen) - hier begint de content dus meteen bovenaan en kruipt de
 * (position: fixed) .masthead er overheen. .region-content is enkel
 * aanwezig op de volle pagina, niet in de modal (daar zit het formulier
 * in .ui-dialog) - scopet deze regel dus vanzelf tot enkel de volle
 * pagina. Breedte/centrering matcht het thema's eigen .inner-klasse
 * (scss/base/_grid.scss: max-width 120rem + 2×1.2rem gutter). */
.region-content .webform-submission-offerte-aanvraag-form {
  max-width: 122.4rem;
  margin: 13rem auto 0;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  box-sizing: border-box;
}

/* ---------- Dialoogvenster ---------- */
.ui-dialog {
  border: none !important;
  border-radius: 1.6rem !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(3, 20, 23, .35) !important;
  padding: 0 !important;
  font-family: "Exo 2", sans-serif;
}
.ui-widget-overlay {
  background: rgba(3, 20, 23, .55) !important;
  opacity: 1 !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, var(--oa-darkest) 0%, var(--oa-darker) 100%);
  border: none;
  border-radius: 0;
  padding: 1.8rem 2.4rem;
  position: relative;
}
.ui-dialog .ui-dialog-title {
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
}
.ui-dialog .ui-dialog-titlebar-close {
  background: rgba(255, 255, 255, .15) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 3.2rem;
  height: 3.2rem;
  right: 1.6rem;
  top: 50%;
  margin-top: -1.6rem;
  transition: background-color .15s ease;
  /* Verbergt de losse "Close"-tekstknoop in de knop (geen eigen span,
   * kan dus niet apart verborgen worden). Het kruisje zelf is twee
   * gedraaide balkjes (::before/::after), geen lettertekens - dat kan
   * nooit onzichtbaar blijven door een ontbrekend glyph of font-probleem. */
  font-size: 0;
  color: transparent;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, .3) !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}
.ui-dialog .ui-dialog-titlebar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ui-dialog .ui-dialog-titlebar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ui-dialog .ui-dialog-content {
  padding: 2.4rem !important;
  box-sizing: border-box;
}

/* ---------- Voortgangsindicator (stap 1/2/voltooid) ----------
 * De progress-tracker-bibliotheek tekent de cirkel zelf via
 * .progress-marker::before (content: attr(data-text), 24x24px) en de
 * verbindingslijn via .progress-marker::after - niet op .progress-marker
 * of .progress-step zelf, die hebben standaard geen eigen vorm. */
.webform-progress {
  margin-bottom: 2.4rem;
}
.webform-progress-tracker .progress-marker::before {
  width: 3rem !important;
  height: 3rem !important;
  background-color: #fff !important;
  border: 2px solid var(--oa-border);
  color: var(--oa-muted);
  font-weight: 700;
  box-sizing: border-box;
}
.webform-progress-tracker .progress-marker::after {
  background-color: var(--oa-border) !important;
  top: 1.4rem;
}
.webform-progress-tracker .progress-step.is-active .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete .progress-marker::before {
  background-color: var(--oa-darkest) !important;
  border-color: var(--oa-darkest);
  color: #fff;
}
.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background-color: var(--oa-darkest) !important;
}
.webform-progress-tracker .progress-text {
  color: var(--oa-muted) !important;
}
.webform-progress-tracker .progress-step.is-active .progress-title,
.webform-progress-tracker .progress-step.is-complete .progress-title {
  color: var(--oa-darkest) !important;
  font-weight: 700;
}

/* ---------- Titel/omschrijving boven de diensten-tegels ---------- */
.webform-submission-offerte-aanvraag-form legend .fieldset-legend {
  color: var(--oa-darkest);
  font-weight: 700;
  font-size: 1.9rem;
}
.webform-submission-offerte-aanvraag-form .webform-element-description,
.webform-submission-offerte-aanvraag-form .description {
  color: var(--oa-muted);
  font-weight: 500;
  font-size: 1.4rem;
  margin-top: .4rem;
}

/* ---------- Foutmeldingen (enkel inline, niet bovenaan) ----------
 * Drupal's kern-module "Inline Form Errors" staat al aan en zet naast de
 * samenvatting hieronder ook al een bericht netjes bij het veld zelf
 * (form-item--error-message hieronder) - de samenvatting bovenaan is dus
 * overbodig en verdwijnt. */
.webform-submission-offerte-aanvraag-form .messages--error {
  display: none !important;
}
.webform-submission-offerte-aanvraag-form .form-item--error-message {
  margin-top: .8rem;
  padding: .9rem 1.2rem;
  background: #fdf1ef;
  border: 1px solid #f3c7bf;
  border-radius: .8rem;
  color: #a52f1e;
  font-size: 1.35rem;
  font-weight: 500;
}
.webform-submission-offerte-aanvraag-form .form-item--error-message strong {
  font-weight: 500;
}

/* ---------- Diensten-tegels ----------
 * Eigen template (form-element--oa-service-tile.html.twig, zie
 * portfolio_quote.module) i.p.v. Webform's generieke "buttons"-opmaak -
 * eigen klassenamen (.oa-tile*), dus geen gevecht meer met core's
 * .form-type-checkbox/.description. grid-auto-rows: 1fr zorgt dat elke
 * tegel - ongeacht rij of tekstlengte - exact even hoog is. min-width
 * 38rem geeft 3 tegels naast elkaar binnen de 122.4rem brede .inner-achtige
 * container hierboven, en valt op smallere schermen vanzelf terug naar
 * 2/1, allemaal nog steeds even breed dankzij 1fr. */
.webform-submission-offerte-aanvraag-form .webform-options-display-buttons {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(38rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.6rem;
  margin-top: 1.6rem;
}
/* De modal is nog smaller dan die 122.4rem-brede container - eigen,
 * kleinere min-width zodat het daar ook 3 naast elkaar geeft i.p.v. één
 * kolom. */
.ui-dialog .webform-options-display-buttons {
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}
.webform-options-display-buttons-wrapper {
  margin: 0 !important;
  height: 100%;
}
/* min-width: 0 is nodig omdat grid-items anders standaard nooit smaller
 * worden dan hun eigen inhoud (min-content) - een lang woord of een
 * icoon dat via een fallback-font ineens breder uitpakt dan verwacht
 * (bv. ♿ op een systeem zonder kleuren-emoji voor dat teken) kon zo een
 * hele tegel, en daarmee de hele rij, breder maken dan de kolom en uit
 * het formulier laten steken. */
.oa-tile {
  height: 100%;
  min-width: 0;
}
.oa-tile input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* display/flex-direction met !important: .webform-submission-offerte-
 * aanvraag-form label (verderop, voor de stap-2 velden) matcht anders ook
 * dit <label> en wint op specificiteit (element+klasse > kale klasse),
 * waardoor dit stilletjes terugviel op display:block. */
.oa-tile__label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.8rem 3.2rem 1.8rem 1.7rem;
  background: #fff;
  border: 1px solid var(--oa-border);
  border-left: 4px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* Vaste doos + overflow:hidden - ongeacht hoe breed of hoog een emoji
 * uitpakt via een fallback-font, dit icoon kan nooit groter ogen dan
 * 2.6rem vierkant. */
.oa-tile__icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 2.3rem;
  line-height: 1;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.oa-tile__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
  max-width: 100%;
}
.oa-tile__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--oa-darkest);
  overflow-wrap: break-word;
}
.oa-tile__desc {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--oa-muted);
  overflow-wrap: break-word;
}
/* Absoluut gepositioneerd t.o.v. .oa-tile__label (position: relative
 * hierboven) - zo staat het vinkje bij elke tegel exact op dezelfde
 * plek, ongeacht titel-/omschrijvingslengte. */
.oa-tile__check {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--oa-darkest);
  display: none;
}
.oa-tile__check::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: .5rem;
  height: .85rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -55%) rotate(45deg);
}
.oa-tile__label:hover {
  border-color: var(--oa-light);
  box-shadow: 0 8px 20px rgba(3, 89, 104, .1);
}
.oa-tile input:checked + .oa-tile__label {
  border-left-color: var(--oa-darkest);
  background: var(--oa-tint);
}
.oa-tile input:checked + .oa-tile__label .oa-tile__check {
  display: block;
}
.oa-tile input:focus-visible + .oa-tile__label {
  outline: 2px solid var(--oa-light);
  outline-offset: 2px;
}

/* ---------- Formuliervelden (stap 2) ---------- */
.webform-submission-offerte-aanvraag-form .form-item {
  margin-bottom: 1.8rem;
}
.webform-submission-offerte-aanvraag-form label {
  display: block;
  color: var(--oa-darkest);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: .5rem;
}
.webform-submission-offerte-aanvraag-form input.form-text,
.webform-submission-offerte-aanvraag-form input.form-email,
.webform-submission-offerte-aanvraag-form input.form-tel,
.webform-submission-offerte-aanvraag-form textarea.form-textarea {
  width: 100%;
  min-height: 4.6rem;
  padding: 1.1rem 1.4rem;
  font-size: 1.6rem;
  font-family: inherit;
  color: var(--oa-darkest);
  background: #fff;
  border: 2px solid var(--oa-border);
  border-radius: .8rem;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.webform-submission-offerte-aanvraag-form textarea.form-textarea {
  min-height: 11rem;
  resize: vertical;
}
.webform-submission-offerte-aanvraag-form input.form-text:focus,
.webform-submission-offerte-aanvraag-form input.form-email:focus,
.webform-submission-offerte-aanvraag-form input.form-tel:focus,
.webform-submission-offerte-aanvraag-form textarea.form-textarea:focus {
  outline: none;
  border-color: var(--oa-light);
  box-shadow: 0 0 0 3px rgba(51, 197, 187, .25);
}
.webform-submission-offerte-aanvraag-form input.form-text::placeholder,
.webform-submission-offerte-aanvraag-form input.form-email::placeholder,
.webform-submission-offerte-aanvraag-form input.form-tel::placeholder,
.webform-submission-offerte-aanvraag-form textarea.form-textarea::placeholder {
  color: #9db0b0;
}

/* Privacy-akkoord: eigen vakje ipv de kale browserstijl. */
.webform-submission-offerte-aanvraag-form .form-type-webform-terms-of-service,
.webform-submission-offerte-aanvraag-form .js-webform-type-checkbox {
  background: var(--oa-tint);
  border-radius: .8rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}
.webform-submission-offerte-aanvraag-form .form-type-webform-terms-of-service label,
.webform-submission-offerte-aanvraag-form .js-webform-type-checkbox label {
  margin: 0;
  color: var(--oa-muted);
  font-weight: 400;
  font-size: 1.4rem;
}
.webform-submission-offerte-aanvraag-form input[type="checkbox"] {
  accent-color: var(--oa-darkest);
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.9rem;
  margin-top: .1rem;
}
/* De link zelf heeft geen klasse (gerenderde markup: <a role="button"
 * href="#terms">privacybeleid</a>), dus .webform-terms-of-service-link
 * matchte nooit iets - vandaar de 18px in plaats van de 14px van de rest
 * van de tekst. Root cause: het thema zet a, li, p { font-size:
 * var(--font-size-text-mobile) } rechtstreeks op elk <a>-element, dat wint
 * van de 1.4rem die hier op de omliggende <label> staat omdat het geen
 * overerving is maar een eigen regel op het element zelf. */
.webform-submission-offerte-aanvraag-form .form-type-webform-terms-of-service a[role="button"],
.webform-submission-offerte-aanvraag-form .js-webform-type-checkbox a[role="button"] {
  font-size: 1.4rem !important;
  color: var(--oa-darker) !important;
  font-weight: 700 !important;
  text-decoration: underline;
}

/* ---------- Knoppen (Volgende/Terug/Offerte aanvragen) ---------- */
.webform-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  margin-top: 2.4rem;
}
/* !important overal hieronder, bewuste keuze, geen noodgreep: deze
 * knoppen krijgen van Drupal core ook de generieke .button-klasse (eigen
 * padding/min-height/font-weight, en .button:hover { color: var(--white) }
 * - onzichtbare witte tekst op de witte "Terug"-knop bij hover). In de
 * modal komt daar nog bovenop dat jQuery UI's dialog-widget deze
 * <input type=submit> knoppen fysiek VERPLAATST naar zijn eigen
 * .ui-dialog-buttonpane, BUITEN dit formulier - een selector die scopet
 * op de form-wrapper-klasse matcht daar dus nooit, en de knop valt terug
 * op jQuery UI's eigen .ui-button/.ui-widget-thema (het grijze pilletje).
 * Vandaar twee scopes (form-wrapper EN .ui-dialog) plus !important, zodat
 * dit wint ongeacht waar de knop in de DOM terechtkomt. */
.webform-submission-offerte-aanvraag-form .webform-button--submit,
.webform-submission-offerte-aanvraag-form .webform-button--next,
.webform-submission-offerte-aanvraag-form .webform-button--previous,
.ui-dialog .webform-button--submit,
.ui-dialog .webform-button--next,
.ui-dialog .webform-button--previous {
  border-radius: 999px !important;
  padding: .85rem 2rem !important;
  min-height: 0 !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.webform-submission-offerte-aanvraag-form .webform-button--submit:active,
.webform-submission-offerte-aanvraag-form .webform-button--next:active,
.webform-submission-offerte-aanvraag-form .webform-button--previous:active,
.ui-dialog .webform-button--submit:active,
.ui-dialog .webform-button--next:active,
.ui-dialog .webform-button--previous:active {
  transform: scale(.97);
}
.webform-submission-offerte-aanvraag-form .webform-button--submit,
.webform-submission-offerte-aanvraag-form .webform-button--next,
.ui-dialog .webform-button--submit,
.ui-dialog .webform-button--next {
  background: linear-gradient(135deg, var(--oa-darkest) 0%, var(--oa-darker) 100%) !important;
  color: #fff !important;
}
.webform-submission-offerte-aanvraag-form .webform-button--submit:hover,
.webform-submission-offerte-aanvraag-form .webform-button--next:hover,
.ui-dialog .webform-button--submit:hover,
.ui-dialog .webform-button--next:hover {
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(3, 89, 104, .35);
}
.webform-submission-offerte-aanvraag-form .webform-button--previous,
.ui-dialog .webform-button--previous {
  background: #fff !important;
  border-color: var(--oa-border) !important;
  color: var(--oa-darkest) !important;
  margin-right: auto;
}
.webform-submission-offerte-aanvraag-form .webform-button--previous:hover,
.ui-dialog .webform-button--previous:hover {
  color: var(--oa-darkest) !important;
  border-color: var(--oa-light) !important;
}

/* ---------- Bevestigingsscherm ---------- */
.webform-confirmation__message {
  text-align: center;
  padding: 2rem 0;
  font-size: 1.7rem;
  color: var(--oa-darkest);
}

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
  .ui-dialog {
    width: calc(100vw - 2rem) !important;
    max-width: none !important;
    left: 1rem !important;
    max-height: calc(100vh - 4rem) !important;
  }
  .ui-dialog .ui-dialog-content {
    padding: 1.8rem !important;
    max-height: calc(100vh - 14rem) !important;
  }
  .ui-dialog .ui-dialog-titlebar {
    padding: 1.6rem 5rem 1.6rem 1.8rem;
  }
  .ui-dialog .ui-dialog-title {
    font-size: 1.7rem;
  }
  .webform-submission-offerte-aanvraag-form .webform-options-display-buttons {
    grid-template-columns: 1fr;
  }
  .webform-actions {
    flex-direction: column-reverse;
    gap: .8rem;
  }
  .webform-button--submit,
  .webform-button--next,
  .webform-button--previous {
    width: 100%;
    text-align: center;
    margin-right: 0;
  }
}