/*
 * Zo staat u erbij, v8.60.0.
 *
 * Eigen stylesheet, hetzelfde patroon als zichtbaarheidsmeting en
 * avm-vergelijking: alleen ingeladen wanneer het blok op de route staat en
 * aan staat. Geen eigen :root, dus de afhankelijkheid op leadpin-landing is
 * verplicht; alle tokens komen daarvandaan.
 *
 * Deze stijlen stonden eerst in landing.css. Dat was de verkeerde plek: dat
 * bestand wordt op elke route geladen, ook waar dit blok niet voorkomt, en de
 * conventie in dit pakket is een bestand per blok.
 */

/* v8.60.0: "Zo staat u erbij". Toont per rol hoe de professional na koppeling
   op de pagina van een adres verschijnt. De kaart leunt bewust dicht tegen de
   consumentenpagina aan, want dat is wat zij nabootst. */
.lpl-app .lpl-wcp-kader{
  max-width: 780px; margin: 0 auto 22px; padding: 12px 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft, var(--ink));
  background: var(--bg-alt); border-radius: var(--radius); text-align: center;
}
.lpl-app .lpl-wcp-tabs{
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 22px;
}
.lpl-app .lpl-wcp-tab{
  appearance: none; cursor: pointer; font: inherit;
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg);
  font-size: 14px; font-weight: 700; color: var(--ink-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.lpl-app .lpl-wcp-tab:hover,
.lpl-app .lpl-wcp-tab:focus-visible{ border-color: var(--blue-bright); color: var(--ink); }
.lpl-app .lpl-wcp-tab.is-active{
  border-color: var(--blue-deep); background: var(--blue-soft); color: var(--blue-deep);
}
.lpl-app .lpl-wcp-kaart{
  max-width: 560px; margin: 0 auto; padding: 26px 26px 22px;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}
.lpl-app .lpl-wcp-persoon{ display: flex; align-items: flex-start; gap: 14px; }
.lpl-app .lpl-wcp-persoon-tekst{ min-width: 0; }
/* Het paneel zelf heeft geen eigen opmaak nodig; hidden doet het werk. Deze
   regel bestaat zodat de klasse niet als ongedekt telt en zodat een verborgen
   paneel nooit ruimte inneemt, ook niet als een thema display forceert. */
.lpl-app .lpl-wcp-paneel[hidden]{ display: none; }
.lpl-app .lpl-wcp-avatar{
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-deep); color: #ffffff;
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
}
.lpl-app .lpl-wcp-naam{ margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.lpl-app .lpl-wcp-functie{ margin: 1px 0 0; font-size: 13.5px; font-weight: 700; color: var(--blue-deep); }


.lpl-app .lpl-wcp-kop{
  margin: 20px 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
}




/*
 * De drie knoppen stonden op flex met flex-basis auto, waardoor hun breedte
 * meeliep met hun tekstlengte: "WhatsApp de expert" werd bijna twee keer zo
 * breed als "Bellen". Ongelijke knoppen naast elkaar lezen als een fout.
 *
 * Een raster met gelijke kolommen lost dat op. WhatsApp krijgt de volle
 * breedte op de eerste regel, want dat is de knop die gemeten wordt en die
 * daarom voorop hoort; de andere twee delen de tweede regel. Alle drie even
 * hoog via align-items op stretch, dat is de standaard in een raster.
 */
.lpl-app .lpl-wcp-contact{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0;
  /*
   * Deze drie knoppen zijn een afbeelding van de echte pagina en geen
   * bedienbare knoppen. Zij horen dus niet te reageren op de muis: een
   * hover-effect belooft dat er iets gebeurt bij klikken, en dat is hier niet
   * zo. Met pointer-events op none kan geen enkele hover meer vuren, ook geen
   * regel uit een andere stylesheet of uit een thema.
   *
   * De cursor blijft de gewone aanwijzer en de tekst is nog gewoon te
   * selecteren, want het blok is bedoeld om te lezen.
   */
  pointer-events: none;
}
/* Voor de zekerheid ook expliciet: wat er ook elders staat, deze knoppen
   veranderen niet van kleur. */
.lpl-app .lpl-wcp-knop:hover,
.lpl-app .lpl-wcp-knop:focus{ background: inherit; color: inherit; }
.lpl-app .lpl-wcp-knop--wa:hover{ background: #25D366; color: #06301a; }
.lpl-app .lpl-wcp-knop--primair:hover{ background: var(--blue-deep); color: #ffffff; }
.lpl-app .lpl-wcp-knop--secundair:hover{ background: var(--bg); color: var(--blue-deep); }
.lpl-app .lpl-wcp-knop{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 700; line-height: 1.3; text-align: center;
}
.lpl-app .lpl-wcp-knop--wa{ grid-column: 1 / -1; }



.lpl-app .lpl-wcp-voet{
  margin: 10px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--ink-muted); text-align: center;
}
.lpl-app .lpl-wcp-cta{ margin: 24px 0 0; text-align: center; }

@media (max-width: 560px){
  .lpl-app .lpl-wcp-kaart{ padding: 20px 18px 18px; }
  .lpl-app .lpl-wcp-tab{ padding: 8px 14px; font-size: 13.5px; }
  .lpl-app .lpl-wcp-contact{ grid-template-columns: 1fr; }
}

/* v8.60.1: de opbouw volgt template-publiek.php van kmk-woningcheck. Zelfde
   volgorde, zelfde bewoordingen, zelfde twee knoppen. Wat hier afwijkt,
   belooft iets anders dan de woningzoeker krijgt. */
.lpl-app .lpl-wcp-status{
  margin: 0 0 16px; font-size: 12.5px; font-weight: 700; color: var(--blue-deep);
}
.lpl-app .lpl-wcp-status::before{
  content: ""; display: inline-block; width: 6px; height: 10px; margin-right: 8px;
  border: solid var(--blue-bright); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lpl-app .lpl-wcp-oordeel{ margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.lpl-app .lpl-wcp-toelichting{
  margin: 8px 0 10px; padding: 0; border: 0;
  font-size: 14.5px; line-height: 1.6; font-style: italic; color: var(--ink-soft, var(--ink));
}
.lpl-app .lpl-wcp-oog{ list-style: none; margin: 0; padding: 0; }
.lpl-app .lpl-wcp-oog li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line-soft, var(--line));
}
.lpl-app .lpl-wcp-oog li:first-child{ border-top: 0; }
.lpl-app .lpl-wcp-oog-label{ font-size: 14px; color: var(--ink-soft, var(--ink)); }
.lpl-app .lpl-wcp-oog-waarde{
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.lpl-app .lpl-wcp-oog-waarde.is-g{ background: #e4f4ea; color: #14532d; }
.lpl-app .lpl-wcp-oog-waarde.is-m{ background: #fdf1dc; color: #7c4a03; }
.lpl-app .lpl-wcp-oog-waarde.is-r{ background: #fbe6e6; color: #7f1d1d; }
.lpl-app .lpl-wcp-handtekening{
  margin: 10px 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5;
}
.lpl-app .lpl-wcp-advies{
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--blue-pale); border-radius: var(--radius);
}
.lpl-app .lpl-wcp-advies strong{ display: block; font-size: 12.5px; color: var(--blue-deep); margin-bottom: 4px; }
.lpl-app .lpl-wcp-advies p{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft, var(--ink)); }
.lpl-app .lpl-wcp-kwalificaties{ margin: 18px 0 0; }
.lpl-app .lpl-wcp-kwalificatie{
  margin: 0 0 5px; font-size: 13px; line-height: 1.5; color: var(--ink-soft, var(--ink));
}
.lpl-app .lpl-wcp-kwalificatie span{
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
}
/* Groen uitsluitend in WhatsApp-context, conform de huisstijlregel. */
.lpl-app .lpl-wcp-knop--wa{ background: #25D366; color: #06301a; }
.lpl-app .lpl-wcp-knop--primair{ background: var(--blue-deep); color: #ffffff; }
.lpl-app .lpl-wcp-knop--secundair{
  background: var(--bg); color: var(--blue-deep); border: 1.5px solid var(--blue-deep);
}