.raen-configurator {
  --raen-inkt: #1d1d1b;
  --raen-zacht: #6b6b66;
  --raen-lijn: #dcd8d1;
  --raen-vlak: #f4f2ee;
  --raen-wit: #fff;
  --raen-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
  gap: 24px;
  color: var(--raen-inkt);
  font-size: 15px;
  line-height: 1.45;
}

.raen-scene {
  position: relative;
  min-height: 560px;
  background: linear-gradient(180deg, #f7f5f1 0%, #e9e5de 100%);
  border-radius: var(--raen-radius);
  overflow: hidden;
}
.raen-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#raen-viewport { position: absolute; inset: 0; }

.raen-laden {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--raen-vlak); color: var(--raen-zacht); font-size: 14px;
}

.raen-paneel {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--raen-wit); border: 1px solid var(--raen-lijn);
  border-radius: var(--raen-radius); padding: 22px;
}
.raen-paneel h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.raen-paneel p.raen-intro { margin: -8px 0 0; color: var(--raen-zacht); font-size: 14px; }

.raen-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--raen-zacht);
}

#raen-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.raen-zone {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--raen-wit); border: 1.5px solid var(--raen-lijn);
  border-radius: 8px; font: inherit; text-align: left; color: inherit;
}
.raen-zone:hover { border-color: #b9b4ab; }
.raen-zone.is-actief { border-color: var(--raen-inkt); box-shadow: inset 0 0 0 1px var(--raen-inkt); }

.raen-chip {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18); background: #ccc;
}

#raen-afwerking { display: flex; gap: 8px; }
.raen-finish {
  flex: 1; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit;
  background: var(--raen-vlak); border: 1.5px solid transparent; border-radius: 8px;
}
.raen-finish.is-actief { background: var(--raen-wit); border-color: var(--raen-inkt); }

#raen-zoek {
  width: 100%; padding: 11px 13px; font: inherit; color: inherit;
  border: 1.5px solid var(--raen-lijn); border-radius: 8px; background: var(--raen-wit);
}
#raen-zoek:focus { outline: none; border-color: var(--raen-inkt); }

.raen-kleuren { max-height: 320px; overflow-y: auto; padding-right: 6px; }
.raen-groep {
  margin: 14px 0 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--raen-zacht); font-weight: 600;
}
.raen-groep:first-child { margin-top: 0; }
.raen-raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.raen-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 2px; cursor: pointer; background: none; border: 1.5px solid transparent;
  border-radius: 7px; font: inherit; color: var(--raen-zacht);
}
.raen-swatch .raen-chip { width: 100%; height: 34px; border-radius: 5px; }
.raen-swatch .raen-code { font-size: 10px; letter-spacing: .02em; }
.raen-swatch:hover { border-color: #c7c2b9; }
.raen-swatch.is-actief { border-color: var(--raen-inkt); color: var(--raen-inkt); }

.raen-keuze {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--raen-vlak); border-radius: 8px;
}
.raen-keuze .raen-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--raen-zacht); }
.raen-keuze strong { display: block; font-size: 17px; font-weight: 600; }
.raen-keuze small { color: var(--raen-zacht); }

.raen-melding { margin: 0; font-size: 12px; color: var(--raen-zacht); }
.is-verborgen { display: none !important; }

/* De twee tekstvelden van Advanced Product Fields worden door de
   configurator gevuld en hoeven de klant niet meer te storen. */
.raen-veld-verborgen { display: none !important; }

.raen-ar {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--raen-wit); background: var(--raen-inkt);
  border: 0; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.raen-ar::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: var(--raen-ar-icoon) center/contain no-repeat;
          mask: var(--raen-ar-icoon) center/contain no-repeat;
}
.raen-configurator {
  --raen-ar-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 21 7.4v9.2L12 21.4 3 16.6V7.4z'/%3E%3Cpath d='M3 7.4 12 12l9-4.6M12 12v9.4'/%3E%3C/svg%3E");
}
.raen-ar:hover { background: #000; }
.raen-ar:disabled { opacity: .6; cursor: default; }

/* QR-kaartje: op een computer kan AR niet, dus scan je de pagina met je telefoon. */
.raen-qr {
  /* Gecentreerd in de 3D-weergave en meeschalend: het vlak is op een smal
     scherm maar iets meer dan 300px hoog. */
  position: absolute; inset: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: min(320px, calc(100% - 24px)); height: max-content;
  max-height: calc(100% - 24px); margin: auto; padding: 18px; overflow: auto;
  text-align: center; background: var(--raen-wit);
  border-radius: var(--raen-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.raen-qr h3 { margin: 0; font-size: 17px; font-weight: 600; }
.raen-qr p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--raen-zacht); }
.raen-qr-code { flex: 0 0 auto; width: 132px; height: 132px; }
.raen-qr-code svg { display: block; width: 100%; height: 100%; }
.raen-qr-adres { font-size: 11px; color: var(--raen-zacht); word-break: break-all; }

/* ---------------------------------------------------------------------------
   Pantser tegen het thema.
   Hello Elementor plus het RAEN-thema zetten opmaak op élke <button>: zwarte
   pil, wit, 18px, en justify-content met !important. Die regels winnen van de
   klassen hierboven, dus herhalen we het belangrijkste met de id als voorvoegsel
   (hogere voorrang). Verhuist de configurator naar een ander thema, dan mag dit
   blok kleiner of weg.
   --------------------------------------------------------------------------- */

#raen-configurator .raen-zone,
#raen-configurator .raen-finish,
#raen-configurator .raen-swatch,
#raen-configurator .raen-ar {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  min-height: 0;
  line-height: 1.4;
  text-align: left;
}

#raen-configurator .raen-zone {
  display: flex;
  justify-content: flex-start !important; /* thema forceert space-between */
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--raen-inkt);
  background: var(--raen-wit);
  border: 1.5px solid var(--raen-lijn);
  border-radius: 8px;
}
#raen-configurator .raen-zone.is-actief {
  border-color: var(--raen-inkt);
  box-shadow: inset 0 0 0 1px var(--raen-inkt);
}

#raen-configurator .raen-finish {
  flex: 1;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--raen-inkt);
  background: var(--raen-vlak);
  border: 1.5px solid transparent;
  border-radius: 8px;
}
#raen-configurator .raen-finish.is-actief {
  background: var(--raen-wit);
  border-color: var(--raen-inkt);
}

#raen-configurator .raen-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  font-size: 10px;
  color: var(--raen-zacht);
  background: none;
  border: 1.5px solid transparent;
  border-radius: 7px;
}
#raen-configurator .raen-swatch .raen-chip { width: 100%; height: 34px; border-radius: 5px; }
#raen-configurator .raen-swatch.is-actief { border-color: var(--raen-inkt); color: var(--raen-inkt); }

#raen-configurator .raen-ar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--raen-wit);
  background: var(--raen-inkt);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

#raen-configurator .raen-qr h3 {
  margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3;
  text-transform: none; letter-spacing: normal;
}
#raen-configurator .raen-qr p { margin: 0; font-size: 13px; line-height: 1.45; }
#raen-configurator .raen-qr-sluiten {
  padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--raen-inkt); background: var(--raen-vlak);
  border: 1.5px solid var(--raen-lijn); border-radius: 8px;
  text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
}

#raen-configurator h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: -.01em;
}
#raen-configurator .raen-groep {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--raen-zacht);
}
#raen-configurator .raen-groep:first-child { margin-top: 0; }
#raen-configurator .raen-intro,
#raen-configurator .raen-melding { margin: 0; font-size: 13px; line-height: 1.5; }
#raen-configurator .raen-keuze strong { display: block; font-size: 17px; font-weight: 600; }

@media (max-width: 980px) {
  .raen-configurator { grid-template-columns: 1fr; }
  /* Niet puur in vh: in een laag venster wordt de douche anders piepklein. */
  .raen-scene { min-height: clamp(360px, 60vh, 520px); }
  .raen-raster { grid-template-columns: repeat(5, 1fr); }
}