/* ===== Pluimers Woningcheck — Design v2 =====
 * Matched to reference: pluimers-woningcheck-v1.html
 * All selectors scoped under .pwc-woningcheck */

/* --- Custom Properties --- */
.pwc-woningcheck {
  --pwc-yellow: #fcea10;
  --pwc-yellow-hover: #e6d400;
  --pwc-blue: #459cec;
  --pwc-green: #18ca7f;
  --pwc-red: #c10000;
  --pwc-dark: #111920;
  --pwc-background: #fff;
  --pwc-border: #d2d4d9;
  --pwc-muted: rgba(0, 0, 0, 0.6);
  --pwc-muted-light: rgba(0, 0, 0, 0.5);
  --pwc-step-done: #e8ecf0;
  --pwc-step-bg: #f2f6f8;
  --pwc-radius: 3rem;
  --pwc-shadow: 0 14px 30px -24px rgba(17, 25, 32, 0.5);
  /* Paginatint; wit gehouden, de diepte komt van de kaartschaduw. */
  --pwc-page-bg: #ffffff;

  /* Lettertypeschaal: negen stappen, van micro tot display. */
  --pwc-fs-1: 0.75rem;    /* 12px - bron, attributie, foutmelding, schaal-uiteinden */
  --pwc-fs-2: 0.875rem;   /* 14px - subtekst, disclaimers, invoervelden */
  --pwc-fs-3: 1rem;       /* 16px - basis: intro's, waarden, knoppen */
  --pwc-fs-4: 1.125rem;   /* 18px - onderkop: adres, maatregelnaam */
  --pwc-fs-5: 1.25rem;    /* 20px - uitgelichte waarde */
  --pwc-fs-6: 1.5rem;     /* 24px - koppen op mobiel, iconen */
  --pwc-fs-7: 1.75rem;    /* 28px - bedragen in de kaarten */
  --pwc-fs-8: 2rem;       /* 32px - paginatitel */
  --pwc-fs-9: 2.5rem;     /* 40px - display: bedrag in de gele kop */

  /* Drie regelhoogtes: koppen, subtekst en lopende tekst. */
  --pwc-lh-kop: 1.2;
  --pwc-lh-sub: 1.35;
  --pwc-lh-tekst: 1.5;

  /* Beweging: kort, veerkrachtig en nooit langer dan nodig. */
  --pwc-dur-1: 120ms;
  --pwc-dur-2: 200ms;
  --pwc-dur-3: 320ms;
  --pwc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pwc-ease-pop: cubic-bezier(0.34, 1.32, 0.64, 1);

  /* Trakking is maatgebonden: krap op grote tekst, iets ruimer op microtekst. */
  --pwc-track-tight: -0.02em;
  --pwc-track-wide: 0.01em;
  /* Breedte van de kaarten (gelijk aan de woningkaart met de luchtfoto). */
  --pwc-content-width: 56rem;
  /* Inclusief de zijdelingse padding van de container (2 x 2,4rem). */
  --pwc-container-width: calc(56rem + 4.8rem);
}

/* --- Scoped Reset --- */
.pwc-woningcheck,
.pwc-woningcheck *,
.pwc-woningcheck *::before,
.pwc-woningcheck *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pwc-woningcheck {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: var(--pwc-fs-3);
  line-height: var(--pwc-lh-tekst);
  color: #000;
  background: var(--pwc-page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Form Section --- */
.pwc-form-section {
  background: var(--pwc-page-bg);
  padding: 4rem 0 6.5rem;
  width: 100%;
}

.pwc-container {
  max-width: var(--pwc-container-width);
  margin: 0 auto;
  padding: 0 2.4rem;
}

.pwc-form-section .pwc-title {
  font-size: var(--pwc-fs-8);
  font-weight: 600;
  line-height: var(--pwc-lh-kop);
  letter-spacing: var(--pwc-track-tight);
  margin-bottom: 1.5rem;
  color: #000;
}

.pwc-form-section .pwc-subtitle {
  font-size: var(--pwc-fs-6);
  font-weight: 600;
  line-height: var(--pwc-lh-kop);
  letter-spacing: var(--pwc-track-tight);
  margin-bottom: 1rem;
  color: #000;
}

.pwc-form-section .pwc-intro {
  color: var(--pwc-muted);
  font-size: var(--pwc-fs-3);
  font-weight: 400;
  line-height: var(--pwc-lh-tekst);
}

/* --- 3-Step Indicator --- */
.pwc-steps {
  display: flex;
  gap: 0;
  margin-bottom: 3rem;
}

/* --- Status Messages --- */
.pwc-status-message {
  padding: 1rem 1.5rem;
  font-size: var(--pwc-fs-2);
  margin-bottom: 1.5rem;
  display: none;
  line-height: var(--pwc-lh-tekst);
}

.pwc-status-message--visible {
  display: block;
}

.pwc-status-message--loading {
  background: #e3f2fd;
  color: #1565c0;
  border-left: 4px solid var(--pwc-blue);
}

.pwc-status-message--error {
  background: #fce4ec;
  color: var(--pwc-red);
  border-left: 4px solid var(--pwc-red);
}

.pwc-status-message--success {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid var(--pwc-green);
}

/* --- Step Sections --- */
.pwc-step-section {
  display: none;
}

.pwc-step-section--active {
  display: block;
}

/* --- Form Layout --- */
.pwc-form-row {
  display: flex;
  gap: 2rem;
}

.pwc-form-left {
  flex: 1;
  min-width: 0;
}

.pwc-form-right {
  flex: 1;
  min-width: 0;
}

.pwc-input-wrapper {
  margin-bottom: 2rem;
}

.pwc-input-wrapper:last-child {
  margin-bottom: 0;
}

.pwc-input-wrapper__legend {
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  color: var(--pwc-muted);
  margin-bottom: 1rem;
  display: block;
}

/* --- Form Groups & Fields --- */
.pwc-form-group {
  margin-bottom: 1.25rem;
}

.pwc-form-group:last-child {
  margin-bottom: 0;
}

.pwc-form-group--grow {
  flex: 1;
}

.pwc-form-group--small {
  max-width: 7.5rem;
}

.pwc-form-label {
  display: block;
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  line-height: var(--pwc-lh-sub);
  margin-bottom: 0.625rem;
  color: #000;
}

.pwc-form-label .pwc-required {
  color: var(--pwc-red);
}

.pwc-woningcheck input[type="text"],
.pwc-woningcheck input[type="number"],
.pwc-woningcheck input[type="email"],
.pwc-woningcheck input[type="tel"],
.pwc-woningcheck textarea,
.pwc-woningcheck select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--pwc-border);
  border-radius: 0.625rem;
  color: #000;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: var(--pwc-fs-2);
  line-height: 1;
  padding: 1.0625rem 1.5rem;
  width: 100%;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pwc-woningcheck input:focus,
.pwc-woningcheck textarea:focus,
.pwc-woningcheck select:focus {
  outline: none;
  border-color: var(--pwc-blue);
  box-shadow: 0 0 0 3px rgba(69, 156, 236, 0.18);
}

.pwc-woningcheck input.pwc-input--error,
.pwc-woningcheck textarea.pwc-input--error {
  border-color: var(--pwc-red);
}

.pwc-field-error {
  font-size: var(--pwc-fs-1);
  letter-spacing: var(--pwc-track-wide);
  color: var(--pwc-red);
  margin-top: 0.375rem;
  min-height: 0;
  line-height: var(--pwc-lh-sub);
}

.pwc-woningcheck textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* --- Specialty Inputs --- */
.pwc-postcode-input {
  max-width: 11.25rem;
  text-transform: uppercase;
}

.pwc-huisnummer-input {
  max-width: 7.5rem;
}

.pwc-toevoeging-input {
  max-width: 7.5rem;
}

/* --- Buttons --- */
.pwc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.0625rem 2rem;
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  font-family: Inter, Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
  transition: transform var(--pwc-dur-1) var(--pwc-ease),
    background-color var(--pwc-dur-1) linear,
    border-color var(--pwc-dur-1) linear,
    color var(--pwc-dur-1) linear;
  min-height: 3.375rem;
  text-decoration: none;
  border-radius: var(--pwc-radius);
  line-height: var(--pwc-lh-sub);
}

.pwc-btn:active {
  transform: scale(0.98);
}

.pwc-btn--primary {
  background: var(--pwc-yellow);
  color: #000;
}

.pwc-btn--primary:hover {
  background: var(--pwc-yellow-hover);
}

.pwc-btn--primary:focus-visible {
  outline: 3px solid var(--pwc-blue);
  outline-offset: 2px;
}

.pwc-btn--secondary {
  background: transparent;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.pwc-btn--secondary:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.35);
}

.pwc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.pwc-btn--loading {
  position: relative;
  color: transparent !important;
}

.pwc-btn--loading::after {
  content: '';
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pwc-spin 0.6s linear infinite;
}

@keyframes pwc-spin {
  to { transform: rotate(360deg); }
}

/* --- Form Footer --- */
.pwc-form-footer {
  margin-top: 2rem;
}

.pwc-form-footer--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* --- Address Selection List --- */
.pwc-address-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.pwc-address-list .pwc-btn {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-size: var(--pwc-fs-3);
  border: 1px solid var(--pwc-border);
  background: #fff;
  border-radius: 0;
  font-weight: 400;
  justify-content: flex-start;
}

.pwc-address-list .pwc-btn:hover {
  border-color: var(--pwc-yellow);
  background: #fffde7;
}

.pwc-address-list .pwc-btn:focus-visible {
  outline: 3px solid var(--pwc-blue);
  outline-offset: 2px;
}

/* --- Result Block --- */
.pwc-result-block {
  display: none;
}

.pwc-result-block--visible {
  display: block;
}

.pwc-result-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.pwc-result-layout--single {
  grid-template-columns: 1fr;
}

/* --- Map --- */
.pwc-map-wrapper {
  border: 1px solid var(--pwc-border);
  background: var(--pwc-step-done);
}

.pwc-map-container {
  width: 100%;
  height: 28.125rem;
  background: var(--pwc-step-done);
}

.pwc-map-attribution {
  font-size: var(--pwc-fs-1);
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 0.5rem 0.75rem;
  line-height: var(--pwc-lh-sub);
}

/* --- Property Details --- */
.pwc-property-details .pwc-property-title {
  font-size: var(--pwc-fs-6);
  font-weight: 600;
  line-height: var(--pwc-lh-kop);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--pwc-yellow);
}

.pwc-property-details .pwc-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem 1.25rem;
  font-size: var(--pwc-fs-3);
  line-height: var(--pwc-lh-tekst);
}

.pwc-property-details .pwc-dl dt {
  font-weight: 600;
  color: var(--pwc-muted-light);
  white-space: nowrap;
}

.pwc-property-details .pwc-dl dd {
  color: #000;
}

.pwc-property-details .pwc-notice {
  margin-top: 1.25rem;
  padding: 0.875rem 1.25rem;
  background: #fff8e1;
  border: 1px solid #ffe082;
  font-size: var(--pwc-fs-2);
  color: #e67e00;
  line-height: var(--pwc-lh-tekst);
}

.pwc-property-details .pwc-confirm-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pwc-property-details .pwc-datasource-note {
  font-size: var(--pwc-fs-1);
  color: rgba(0, 0, 0, 0.4);
  margin-top: 1rem;
  line-height: var(--pwc-lh-tekst);
}

/* --- Keuzekaarten (diensten) --- */
.pwc-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.pwc-service-card {
  position: relative;
  border: 1px solid var(--pwc-border);
  border-radius: 1rem;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pwc-service-card--on {
  border-color: var(--pwc-dark);
  background: #fffbe0;
}

.pwc-service-card--escape {
  border-style: dashed;
  background: #f7f9fb;
}

.pwc-service-card--escape.pwc-service-card--on {
  background: #fffbe0;
  border-color: var(--pwc-dark);
}

.pwc-service-card .pwc-service-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pwc-service-card .pwc-service-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.875rem;
  width: auto;
  height: auto;
  padding: 1rem 1.125rem;
  border: 0;
  background: transparent;
  text-align: left;
  filter: none;
  cursor: pointer;
}

.pwc-service-card .pwc-service-label:hover {
  filter: none;
}

.pwc-service-card .pwc-service-label::after {
  content: none;
}

.pwc-service-card .pwc-service-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: rgba(252, 234, 16, 0.3);
  overflow: hidden;
  font-size: var(--pwc-fs-6);
}

.pwc-service-card .pwc-service-icon img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.pwc-service-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pwc-service-card .pwc-service-name {
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-dark);
  text-align: left;
  margin: 0;
  padding: 0;
  word-break: normal;
  hyphens: none;
}

.pwc-service-desc {
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted);
}

.pwc-service-check {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  color: #fff;
}

.pwc-service-card--on .pwc-service-check {
  background: var(--pwc-dark);
  border-color: var(--pwc-dark);
}

.pwc-service-check svg {
  opacity: 0;
}

.pwc-service-card--on .pwc-service-check svg {
  opacity: 1;
}

.pwc-service-arrow {
  flex: 0 0 auto;
  font-size: var(--pwc-fs-4);
  color: var(--pwc-muted);
}

.pwc-service-card .pwc-service-checkbox:focus-visible + .pwc-service-label {
  outline: 3px solid var(--pwc-blue);
  outline-offset: 2px;
  border-radius: 1rem;
}

@media (max-width: 768px) {
  .pwc-services-grid {
    grid-template-columns: 1fr;
  }

  .pwc-service-card .pwc-service-label {
    padding: 0.875rem 1rem;
  }
}
/* --- Checkbox Group --- */
.pwc-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.pwc-checkbox-group .pwc-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1875rem;
  flex-shrink: 0;
  accent-color: var(--pwc-yellow);
}

.pwc-checkbox-group .pwc-checkbox-label {
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.pwc-checkbox-group .pwc-link {
  color: var(--pwc-blue);
  text-decoration: none;
}

.pwc-checkbox-group .pwc-link:hover {
  text-decoration: underline;
}

/* --- Thank You --- */
.pwc-thank-you {
  text-align: center;
  padding: 4rem 1.5rem;
}

.pwc-thank-you__icon {
  font-size: var(--pwc-fs-9);
  margin-bottom: 1.25rem;
  display: block;
  color: var(--pwc-green);
}

.pwc-thank-you .pwc-title {
  font-size: var(--pwc-fs-8) !important;
  margin-bottom: 0.75rem !important;
}

.pwc-thank-you .pwc-intro {
  color: var(--pwc-muted);
  font-size: var(--pwc-fs-3);
}

/* --- Utility --- */
.pwc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.pwc-is-hidden {
  display: none !important;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pwc-form-section .pwc-title {
    font-size: var(--pwc-fs-8);
    line-height: var(--pwc-lh-kop);
  }

  .pwc-form-row {
    flex-direction: column;
    gap: 2rem;
  }

  .pwc-result-layout {
    grid-template-columns: 1fr;
  }

  .pwc-map-container {
    height: 20rem;
  }
}

@media (max-width: 768px) {
  .pwc-form-section {
    padding: 2.5rem 0 4rem;
  }

  .pwc-form-section .pwc-title {
    font-size: var(--pwc-fs-6);
    line-height: var(--pwc-lh-kop);
  }

  .pwc-form-section .pwc-subtitle {
    font-size: var(--pwc-fs-4);
    line-height: var(--pwc-lh-kop);
  }

  .pwc-container {
    padding: 0 1rem;
  }

  .pwc-property-details .pwc-confirm-buttons {
    flex-direction: column;
  }

  .pwc-btn {
    width: 100%;
  }

  .pwc-form-footer--between {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {

  .pwc-woningcheck .pwc-postcode-input,
  .pwc-woningcheck .pwc-huisnummer-input,
  .pwc-woningcheck .pwc-toevoeging-input {
    max-width: 100%;
  }
}



/* Prevent iOS Safari auto-zoom on form fields */
@media (max-width:768px){
    input,
    select,
    textarea{
        font-size: var(--pwc-fs-3) !important;
    }
}

/* ---------- Subsidiecheck (stap 3) ---------- */
.pwc-subsidie-output {
  margin-top: 1.5rem;
}

.pwc-subsidie-note {
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
  margin: 0.25rem 0 0;
}

.pwc-subsidie-error {
  color: var(--pwc-red);
}

.pwc-subsidie-blokhead {
  font-size: var(--pwc-fs-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pwc-muted-light);
  margin: 1.75rem 0 0.75rem;
}

/* Hoofdgetal: opvallende kaart in de huisstijl */
/* De hero is het enige echte materiaal op deze stap: een diep donkergrijs
   verloop, met een lichte rand bovenin alsof er licht op valt. */
.pwc-subsidie-kop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 2rem 1.75rem 1.75rem;
  background: linear-gradient(180deg, #4e4e56 0%, #38383f 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  box-shadow: 0 26px 46px -36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  margin-bottom: 1.25rem;
}

.pwc-subsidie-kop__label {
  font-size: var(--pwc-fs-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.pwc-subsidie-kop__bedrag {
  font-size: var(--pwc-fs-9);
  font-weight: 700;
  line-height: var(--pwc-lh-kop);
  letter-spacing: -0.035em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pwc-subsidie-kop__bedrag--leeg {
  font-size: var(--pwc-fs-5);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}

.pwc-subsidie-kop__adres {
  font-size: var(--pwc-fs-3);
  color: rgba(255, 255, 255, 0.88);
}

/* Chip die de verdubbeling verkoopt: toegepast of nog te halen. */
.pwc-kop-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: var(--pwc-fs-2);
  font-weight: 600;
  animation: pwc-pop var(--pwc-dur-2) var(--pwc-ease-pop) both;
}

.pwc-kop-chip--aan {
  background: rgba(24, 202, 127, 0.22);
  color: #9ff3c4;
}

.pwc-kop-chip--tip {
  background: var(--pwc-yellow);
  color: var(--pwc-dark);
}

.pwc-kop-chip__teken {
  font-weight: 700;
}

/* Kerncijfers: één kaart met scheidingslijnen */
.pwc-subsidie-tegels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--pwc-border);
  border-radius: 1rem;
  overflow: hidden;
}

.pwc-tegel {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
}

.pwc-tegel + .pwc-tegel {
  border-left: 1px solid var(--pwc-border);
}

.pwc-tegel__label {
  font-size: var(--pwc-fs-1);
  color: var(--pwc-muted-light);
}

.pwc-tegel__waarde {
  font-size: var(--pwc-fs-3);
  font-weight: 700;
  color: var(--pwc-dark);
}

.pwc-tegel__sub {
  font-size: var(--pwc-fs-1);
  color: var(--pwc-muted);
}

/* Maatregelen als kaarten */
.pwc-subsidie-kaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pwc-subsidie-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--pwc-border);
  border-radius: 1rem;
  background: #fff;
}

.pwc-subsidie-kaart__kop {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.pwc-subsidie-kaart__icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: rgba(252, 234, 16, 0.3);
  overflow: hidden;
  font-size: var(--pwc-fs-6);
}

.pwc-subsidie-kaart__icon img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.pwc-subsidie-kaart__naam {
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-dark);
}

.pwc-subsidie-kaart__bedrag {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.pwc-subsidie-kaart .pwc-m2-rij {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pwc-subsidie-kaart .pwc-m2 {
  flex: 1 1 auto;
  justify-content: space-between;
}

.pwc-subsidie-kaart .pwc-bedrag {
  font-size: var(--pwc-fs-6);
}

/* Smal oppervlakteveld (de basisregel zet inputs op 100% breed) */
.pwc-woningcheck .pwc-subsidie-kaart .pwc-m2 input {
  width: 4.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: var(--pwc-fs-3);
  text-align: right;
}

.pwc-subsidie-kaart .pwc-m2__label,
.pwc-subsidie-kaart .pwc-m2__unit {
  color: var(--pwc-muted);
}

.pwc-bedrag {
  font-size: var(--pwc-fs-5);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pwc-dark);
  font-variant-numeric: tabular-nums;
}

.pwc-bedrag__sub {
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
}

.pwc-bedrag__sub--nvt {
  color: #8a6d00;
}

.pwc-m2 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
  white-space: nowrap;
}

.pwc-m2 input {
  width: 4.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--pwc-border);
  border-radius: 0.5rem;
  font-size: var(--pwc-fs-3);
  text-align: right;
  background: #fff;
}

/* Overige regelingen */
.pwc-subsidie-overig {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pwc-subsidie-overig li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: var(--pwc-fs-3);
}

.pwc-subsidie-overig li:first-child {
  border-top: 0;
}

.pwc-subsidie-overig__bedrag {
  font-weight: 700;
}

/* Voet */
.pwc-subsidie-disclaimer {
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted-light);
  margin-top: 1.5rem;
}

.pwc-subsidie-meer {
  margin-top: 1rem;
}

.pwc-subsidie-meer summary {
  cursor: pointer;
  font-size: var(--pwc-fs-2);
  font-weight: 600;
  color: var(--pwc-muted);
}

.pwc-subsidie-meer summary:hover {
  color: var(--pwc-dark);
}

.pwc-subsidie-meer ul {
  margin: 0.625rem 0 0;
  padding-left: 1.125rem;
}

.pwc-subsidie-meer li {
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
  margin-bottom: 0.375rem;
}

.pwc-subsidie-meer .pwc-bedrag__sub {
  display: block;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .pwc-subsidie-kop__bedrag {
    font-size: var(--pwc-fs-8);
  }

  .pwc-subsidie-tegels {
    grid-template-columns: 1fr;
  }

  .pwc-tegel + .pwc-tegel {
    border-left: 0;
    border-top: 1px solid var(--pwc-border);
  }

  .pwc-subsidie-kop {
    padding: 1.25rem;
  }

  .pwc-subsidie-kaarten {
    grid-template-columns: 1fr;
  }
}

.pwc-service-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pwc-service-desc {
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted);
}

.pwc-service-check {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  color: #fff;
}

.pwc-service-check svg {
  opacity: 0;
}

.pwc-service-arrow {
  flex: 0 0 auto;
  font-size: var(--pwc-fs-4);
  color: var(--pwc-muted);
}

/* Infostrip onder de keuzekaarten */
.pwc-info-strip {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background: rgba(252, 234, 16, 0.22);
  border-radius: 1rem;
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-dark);
}

.pwc-info-strip svg {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

/* Woningkaart */
.pwc-result-layout {
  display: block;
  margin-top: 2.5rem;
}

.pwc-woningkaart {
  max-width: var(--pwc-content-width);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--pwc-border);
  border-radius: 1.5rem;
  overflow: hidden;
}

.pwc-woningkaart__map {
  position: relative;
}

.pwc-woningkaart .pwc-map-wrapper {
  border-radius: 0;
  height: 22rem;
}

.pwc-woningkaart .pwc-map-container {
  height: 22rem;
  border-radius: 0;
}

.pwc-woningkaart__badge {
  position: absolute;
  top: 1rem;
  /* Rechtsboven: linksboven zit de zoomregeling van de kaart. */
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border-radius: 999px;
  font-size: var(--pwc-fs-2);
  font-weight: 600;
  color: var(--pwc-dark);
}

.pwc-woningkaart__badge-icoon {
  color: var(--pwc-green);
  font-weight: 700;
}

.pwc-woningkaart .pwc-map-attribution {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0.5rem;
  font-size: var(--pwc-fs-1);
  color: var(--pwc-muted);
}

.pwc-woningkaart__body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.pwc-woningkaart__adres {
  font-size: var(--pwc-fs-6);
  font-weight: 700;
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-dark);
}

.pwc-woningkaart__plaats {
  margin-top: 0.125rem;
  font-size: var(--pwc-fs-3);
  color: var(--pwc-muted);
}

.pwc-woningkaart__gegevens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pwc-woningkaart__gegevens dt {
  font-size: var(--pwc-fs-1);
  letter-spacing: 0;
  color: var(--pwc-muted-light);
}

.pwc-woningkaart__gegevens dd {
  margin-top: 0.25rem;
  font-size: var(--pwc-fs-4);
  font-weight: 700;
  color: var(--pwc-dark);
}

.pwc-labeltegel {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  background: var(--pwc-green);
  border-radius: 0.5rem;
  font-size: var(--pwc-fs-4);
  font-weight: 700;
  color: #fff;
}

.pwc-woningkaart__bron {
  margin-top: 1.125rem;
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted-light);
}

.pwc-woningkaart__acties {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.pwc-woningkaart__acties .pwc-btn {
  width: 100%;
}

.pwc-woningkaart__niet {
  align-self: center;
  background: none;
  border: 0;
  padding: 0.5rem;
  font-family: inherit;
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  color: var(--pwc-dark);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 768px) {

  .pwc-woningkaart .pwc-map-wrapper,
  .pwc-woningkaart .pwc-map-container {
    height: 15rem;
  }

  .pwc-woningkaart__body {
    padding: 1.25rem;
  }

  .pwc-woningkaart__gegevens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.25rem;
  }
}
/* ===== Woningdata: WOZ-waarde en energielabel ===== */
.pwc-woningkaart__data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.pwc-datablok {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pwc-border);
  border-radius: 1rem;
}

.pwc-datablok__label {
  font-size: var(--pwc-fs-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pwc-muted-light);
}

.pwc-datablok__waarde {
  font-size: var(--pwc-fs-7);
  font-weight: 700;
  line-height: var(--pwc-lh-kop);
  letter-spacing: -0.02em;
  color: var(--pwc-dark);
}

.pwc-datablok__waarde--leeg {
  font-size: var(--pwc-fs-3);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pwc-muted);
}

.pwc-datablok__sub {
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
}

.pwc-datablok__noot {
  margin-top: 0.5rem;
  font-size: var(--pwc-fs-1);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted-light);
}

.pwc-datablok__bron {
  grid-column: 1 / -1;
  margin-top: 0.125rem;
  font-size: var(--pwc-fs-1);
  color: var(--pwc-muted-light);
}

/* WOZ-histororie */
.pwc-historie {
  margin-top: 0.625rem;
}

.pwc-historie summary {
  cursor: pointer;
  font-size: var(--pwc-fs-2);
  font-weight: 600;
  color: var(--pwc-muted);
}

.pwc-historie summary:hover {
  color: var(--pwc-dark);
}

.pwc-historie ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.pwc-historie li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: var(--pwc-fs-2);
  color: var(--pwc-muted);
}

.pwc-historie li:first-child {
  border-top: 0;
}

/* Energielabel: badge en officiele kleurenbalk A++++ t/m G */
.pwc-labelrij {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.625rem;
  padding-bottom: 0.25rem;
}

.pwc-labelbadge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 4.25rem;
  height: 4.25rem;
  padding: 0 0.75rem;
  border: 1.5px solid var(--pwc-dark);
  border-radius: 1.125rem;
  background: #fff;
  font-size: var(--pwc-fs-7);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pwc-dark);
}

/* Het labelvak blijft zwart-wit; het kleurbereik staat in de dunne schaal eronder. */
.pwc-labelbadge--onbekend {
  border-color: var(--pwc-border);
  color: var(--pwc-muted);
}

.pwc-labeldatums {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted);
}

.pwc-labeldatums span:first-child {
  color: var(--pwc-dark);
  font-weight: 600;
}

@media (max-width: 768px) {
  .pwc-woningkaart__data {
    grid-template-columns: 1fr;
  }

  .pwc-labelbadge {
    min-width: 3.5rem;
    height: 3.5rem;
    font-size: var(--pwc-fs-6);
    border-radius: 0.875rem;
  }
}
/* ===== Aanpasbare oppervlaktes ===== */
.pwc-woningcheck .pwc-m2 input {
  width: 4.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: var(--pwc-fs-3);
  text-align: right;
}

.pwc-woningkaart__gegevens dd .pwc-m2 {
  margin-top: 0.125rem;
  color: var(--pwc-dark);
}

.pwc-woningkaart__gegevens dd .pwc-m2 input {
  font-size: var(--pwc-fs-3);
  font-weight: 700;
}

.pwc-service-m2 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  color: var(--pwc-muted);
}

.pwc-service-m2 .pwc-m2__unit {
  font-size: var(--pwc-fs-2);
}
/* ===== Informatiebolletje bij de oppervlaktes ===== */
.pwc-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--pwc-yellow);
  color: var(--pwc-dark);
  font-size: var(--pwc-fs-1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pwc-info:hover,
.pwc-info:focus {
  background: var(--pwc-dark);
  color: var(--pwc-yellow);
  outline: none;
  transform: scale(1.06);
}

.pwc-info:focus-visible {
  outline: 3px solid var(--pwc-blue);
  outline-offset: 2px;
}

.pwc-info__teken {
  display: block;
  transform: translateY(-0.03125rem);
}

.pwc-info__tip {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem) scale(0.96);
  transform-origin: bottom center;
  width: max-content;
  max-width: 18rem;
  padding: 0.75rem 1rem 0.75rem 1.125rem;
  border-radius: 0.875rem;
  /* Gele accentrand: hetzelfde accent als de knoppen en het stapje */
  border: 1px solid var(--pwc-border);
  border-left: 4px solid var(--pwc-yellow);
  background: #fff;
  color: #000;
  font-size: var(--pwc-fs-2);
  font-weight: 400;
  font-style: normal;
  line-height: var(--pwc-lh-sub);
  text-align: left;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--pwc-dur-2) var(--pwc-ease), transform var(--pwc-dur-2) var(--pwc-ease);
  z-index: 20;
}

.pwc-info__kop {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: #000;
}

.pwc-info__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -2px;
  border-right: 1px solid var(--pwc-border);
  border-bottom: 1px solid var(--pwc-border);
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.pwc-info:hover .pwc-info__tip,
.pwc-info:focus .pwc-info__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

@media (max-width: 768px) {
  .pwc-info__tip {
    max-width: 12rem;
  }
}
/* ===== Uitlijning van het informatiebolletje ===== */

/* Stap 1: gebruiksoppervlakte in de woningkaart */
.pwc-woningkaart__gegevens dd {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pwc-woningkaart__gegevens dd .pwc-m2 {
  margin-top: 0;
}

/* Stap 2 en 3: naast het oppervlakteveld */
.pwc-service-m2,
.pwc-m2-rij {
  align-items: center;
}

.pwc-m2-rij .pwc-info,
.pwc-service-m2 .pwc-info,
.pwc-woningkaart__gegevens dd .pwc-info {
  align-self: center;
  margin: 0;
  vertical-align: middle;
}

/* Iets compacter zodat het gelijk opgaat met het veld */
.pwc-info {
  width: 1.1875rem;
  height: 1.1875rem;
}
/* Op smalle schermen alleen de letter van de eigen klasse tonen */

/* ===== Minimale kleurenschaal bij het energielabel ===== */
.pwc-schaal {
  position: relative;
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}

.pwc-schaal__wijzer {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.4375rem solid var(--pwc-dark);
  transform: translateX(-50%);
}

/* Kleuren zoals gebruikt op de Zonneplan-pagina over het energielabel.
   De reeks loopt van A++++ (diepgroen) naar G (rood); de klasse bepaalt het vak. */
.pwc-schaal__balk {
  display: block;
  height: 1rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #007a30 0 18.18%,
    #009038 18.18% 45.45%,
    #55ab26 45.45% 54.55%,
    #c9d100 54.55% 63.64%,
    #ffec01 63.64% 72.73%,
    #faba00 72.73% 81.82%,
    #eb6909 81.82% 90.91%,
    #e3001b 90.91% 100%
  );
}

.pwc-schaal__uiteinden {
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-size: var(--pwc-fs-1);
  letter-spacing: var(--pwc-track-wide);
  color: var(--pwc-muted-light);
}

@media (max-width: 768px) {
  .pwc-schaal {
    margin-top: 1rem;
  }

  .pwc-schaal__uiteinden {
    font-size: var(--pwc-fs-1);
  }
}
/* ===== Elke stap in dezelfde kaart als de woningkaart ===== */
#pwc-section-2,
#pwc-section-3,
#pwc-section-4 {
  padding: 2rem 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--pwc-border);
  border-radius: 1.5rem;
}

@media (max-width: 768px) {
  #pwc-section-2,
  #pwc-section-3,
  #pwc-section-4 {
    padding: 1.25rem 1.25rem 1.125rem;
    border-radius: 1.25rem;
  }
}
/* ===== Rustige stapindicator: voortgangslijn met tekst ===== */
.pwc-steps {
  display: block;
  gap: 0;
  margin: 0 0 1.75rem;
}

.pwc-steps__tekst {
  display: block;
  margin-bottom: 0.625rem;
  font-size: var(--pwc-fs-2);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pwc-muted);
}

.pwc-steps__baan {
  display: flex;
  gap: 3px;
  height: 0.375rem;
}

.pwc-steps__deel {
  flex: 1 1 0;
  border-radius: 999px;
  background: rgba(17, 25, 32, 0.1);
  transition: background 0.25s ease;
}

/* Zuiver geel, zonder rand: het merkvlak van Pluimers en visueel rustiger.
   De voortgang staat ook in tekst boven de balk ("Stap 3 van 4 · Subsidiecheck")
   en in de stappenlijst eronder, dus de informatie is niet alleen de kleur. */
.pwc-steps__deel--gevuld {
  background: var(--pwc-yellow);
}

.pwc-steps__lijst {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.pwc-steps__stap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--pwc-fs-2);
  line-height: var(--pwc-lh-sub);
  color: var(--pwc-muted-light);
}

.pwc-steps__stap--klaar {
  color: var(--pwc-muted);
}

.pwc-steps__stap--actief {
  color: var(--pwc-dark);
  font-weight: 700;
}

.pwc-steps__nummer {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(17, 25, 32, 0.08);
  font-size: var(--pwc-fs-1);
  font-weight: 700;
  color: var(--pwc-muted);
}

.pwc-steps__stap--klaar .pwc-steps__nummer {
  background: rgba(26, 154, 85, 0.16);
  color: #14603c;
}

.pwc-steps__stap--actief .pwc-steps__nummer {
  background: var(--pwc-dark);
  color: var(--pwc-yellow);
}

/* Kaarten krijgen diepte op de lichte achtergrond */
.pwc-woningkaart,
#pwc-section-2,
#pwc-section-3,
#pwc-section-4 {
  box-shadow: var(--pwc-shadow);
}

@media (max-width: 768px) {
  .pwc-steps {
    margin-bottom: 1.25rem;
  }

  .pwc-steps__lijst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ===== Beweging en toegankelijkheid (Apple-principes) ===== */

/* Het vinkje in de kring komt binnen met een lichte veer, niet met een sprong. */
.pwc-service-card--on .pwc-service-check {
  animation: pwc-pop var(--pwc-dur-2) var(--pwc-ease-pop) both;
}

@keyframes pwc-pop {
  from {
    transform: scale(0.7);
  }
  to {
    transform: scale(1);
  }
}

/* Nieuwe stap komt rustig binnen vanaf dezelfde plek. */
.pwc-stap-in {
  animation: pwc-stap-in var(--pwc-dur-3) var(--pwc-ease) both;
}

@keyframes pwc-stap-in {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pwc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Minder beweging: geen verschuiving of veer, wel een korte overvloeiing. */
@media (prefers-reduced-motion: reduce) {
  .pwc-info__tip,
  .pwc-info:hover .pwc-info__tip,
  .pwc-info:focus .pwc-info__tip {
    transform: translateX(-50%);
  }

  .pwc-service-card--on .pwc-service-check {
    animation: none;
  }

  .pwc-stap-in {
    animation-name: pwc-fade-in;
    animation-duration: var(--pwc-dur-2);
  }

  .pwc-btn:active {
    transform: none;
  }

  .pwc-steps__deel {
    transition: none;
  }
}

/* Meer contrast: stevige randen in plaats van lichtgrijs. */
@media (prefers-contrast: more) {
  .pwc-woningkaart,
  #pwc-section-2,
  #pwc-section-3,
  #pwc-section-4,
  .pwc-service-card,
  .pwc-subsidie-kaart,
  .pwc-datablok {
    border-color: var(--pwc-dark);
  }
}
/* ===== Levendige waarden in de subsidiecheck ===== */

/* Past de bezoeker een oppervlakte aan, dan komen de nieuwe bedragen zacht binnen. */
.pwc-waarde--nieuw .pwc-subsidie-kop__bedrag,
.pwc-waarde--nieuw .pwc-bedrag {
  animation: pwc-waarde-in var(--pwc-dur-2) var(--pwc-ease) both;
}

@keyframes pwc-waarde-in {
  from {
    opacity: 0.45;
    transform: translateY(0.125rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwc-kop-chip {
    animation: none;
  }

  .pwc-waarde--nieuw .pwc-subsidie-kop__bedrag,
  .pwc-waarde--nieuw .pwc-bedrag {
    animation-name: pwc-fade-in;
  }
}
/* ===== Lichtval op de hero ===== */

/* Geen doorschijnend materiaal (blur over wit doet niets), maar licht dat op het
   oppervlak valt: een zachte radiale glans linksboven, zoals bij glas. */
.pwc-subsidie-kop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 105% at 12% 0%,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(255, 255, 255, 0) 62%
  );
  pointer-events: none;
}

.pwc-subsidie-kop > * {
  position: relative;
  z-index: 1;
}
/* ===== WOZ-waarde in de kaart aanpasbaar ===== */

/* Ziet eruit als het bedrag dat er stond, maar je kunt erin klikken en typen. */
.pwc-woningcheck .pwc-woz {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  max-width: 100%;
}

.pwc-woz__teken {
  font-size: var(--pwc-fs-7);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pwc-dark);
}

.pwc-woningcheck input.pwc-woz__veld {
  width: 8.5ch;
  padding: 0 0 0.125rem;
  border: 0;
  border-bottom: 1px dashed rgba(17, 25, 32, 0.25);
  border-radius: 0;
  background: transparent;
  font-size: var(--pwc-fs-7);
  font-weight: 700;
  line-height: var(--pwc-lh-kop);
  letter-spacing: -0.02em;
  color: var(--pwc-dark);
  font-variant-numeric: tabular-nums;
}

.pwc-woningcheck input.pwc-woz__veld:hover {
  border-bottom-color: rgba(17, 25, 32, 0.45);
}

.pwc-woningcheck input.pwc-woz__veld:focus {
  outline: none;
  border-bottom: 1px solid var(--pwc-dark);
  box-shadow: none;
}
/* ===== Besparingsregel en tegelindeling ===== */

.pwc-bedrag__sub--besparing {
  color: #14603c;
  font-weight: 600;
}

/* Op smallere schermen twee tegels naast elkaar in plaats van vier. */
@media (max-width: 992px) {
  .pwc-subsidie-tegels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pwc-tegel:nth-child(odd) {
    border-left: 0;
  }

  .pwc-tegel:nth-child(n + 3) {
    border-top: 1px solid var(--pwc-border);
  }
}

/* ===== Optionele Google 3D-weergave ===== */
.pwc-woningcheck .pwc-woningkaart__3d {
  position: absolute;
  right: 1rem;
  bottom: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(17, 25, 32, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--pwc-dark);
  font: 600 var(--pwc-fs-2) / 1 Inter, Arial, Helvetica, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(17, 25, 32, 0.6);
  transition: background var(--pwc-dur-2) var(--pwc-ease), border-color var(--pwc-dur-2) var(--pwc-ease);
}

.pwc-woningcheck .pwc-woningkaart__3d:hover,
.pwc-woningcheck .pwc-woningkaart__3d:focus-visible {
  background: #fff;
  border-color: var(--pwc-dark);
}

.pwc-woningcheck .pwc-woningkaart__map.pwc-is-3d .pwc-map-wrapper,
.pwc-woningcheck .pwc-woningkaart__map.pwc-is-3d .pwc-woningkaart__badge,
.pwc-woningcheck .pwc-woningkaart__map.pwc-is-3d .pwc-map-attribution,
.pwc-woningcheck .pwc-woningkaart__map.pwc-is-3d .pwc-woningkaart__3d {
  visibility: hidden;
}

.pwc-woningcheck .pwc-3d-inline {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  background: #d9e0e8;
  color: var(--pwc-dark);
}

.pwc-woningcheck .pwc-3d-inline[hidden] {
  display: none;
}

.pwc-woningcheck .pwc-3d-inline__canvas {
  position: absolute;
  inset: 0;
}

.pwc-woningcheck .pwc-3d-map {
  display: block;
  border: 0;
}

.pwc-woningcheck .pwc-3d-inline__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--pwc-dark);
  font-size: var(--pwc-fs-3);
}

.pwc-woningcheck .pwc-3d-inline__status--error {
  color: var(--pwc-red);
}

.pwc-woningcheck .pwc-3d-inline__controls {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.pwc-woningcheck .pwc-3d-inline__button {
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(17, 25, 32, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--pwc-dark);
  font: 600 var(--pwc-fs-2) / 1 Inter, Arial, Helvetica, sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 14px -9px rgba(17, 25, 32, 0.7);
}

.pwc-woningcheck .pwc-3d-inline__button:hover,
.pwc-woningcheck .pwc-3d-inline__button:focus-visible {
  border-color: var(--pwc-dark);
  background: #fff;
}

.pwc-woningcheck .pwc-3d-inline__button--primary {
  background: var(--pwc-yellow);
}

.pwc-woningcheck .pwc-3d-inline__hint {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  max-width: calc(100% - 15rem);
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.88);
  color: var(--pwc-muted);
  font-size: var(--pwc-fs-1);
  line-height: var(--pwc-lh-sub);
}

@media (max-width: 700px) {
  .pwc-woningcheck .pwc-3d-inline__hint {
    display: none;
  }

  .pwc-woningcheck .pwc-3d-inline__controls {
    left: 0.6rem;
    right: 0.6rem;
    justify-content: flex-end;
  }
}