/* ---------------------------------------------------------------------------
   Geschenkkistconfigurator (showcase THE REAL MAG.)
   Opbouw van de geschenkkistconfigurator, in het TRM-palet: antraciet #232021, koper #A07050 alleen als accent,
   Montserrat. Bron huisstijl: Y:/18_AI_Knowledge_Base/00_General/TRM_DesignSystem.
--------------------------------------------------------------------------- */

:root {
  --rood: #A07050;            /* accent (koper), naam gehouden zodat de regels eronder gelijk blijven */
  --rood-donker: #86593D;
  --zwart: #232021;
  --body: #4a4647;
  --notitie: #8B8B8A;
  --zacht-wit: #F3EEE8;
  --beige: #F4F3F0;
  --lijn: #E5E5E5;
  --wit: #ffffff;

  --radius: 2px;
  --schaduw: 0 1px 3px rgba(29,29,27,.08), 0 8px 24px rgba(29,29,27,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--beige);
  color: var(--body);
  font-family: Montserrat, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--zwart); margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 44px; line-height: 1.45; letter-spacing: -.01em; }
h2 { font-size: 32px; line-height: 1.50; }
h3 { font-size: 28px; line-height: 1.15; }

/* ------------------------------------------------------------------ header */
.kop {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 28px 40px;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kop__merk img { height: 34px; display: block; }
.kop__titel h1 { font-size: 28px; line-height: 1.2; }
.kop__sub {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--notitie);
}

/* ------------------------------------------------------------------ layout */
.paneel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, .85fr);
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 95px);
}

/* ---------------------------------------------------------------- viewport */
.viewer {
  position: sticky;
  top: 0;
  padding: 32px 32px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}
.viewer__beeld {
  /* vaste verhouding van de renders en de stills (1500 x 960); de worker houdt zijn eigen verhouding aan, dus een vak dat
     de hoogte van het venster volgt gaf witte balken boven en onder het beeld */
  aspect-ratio: 1500 / 960;
  position: relative;
  flex: none;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.viewer__laden {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--notitie);
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--lijn);
}
.viewer__laden.aan { display: flex; }
.viewer__laden span {
  width: 12px; height: 12px;
  border: 2px solid var(--lijn);
  border-top-color: var(--rood);
  border-radius: 50%;
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.viewer__melding {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--notitie);
  background: var(--beige);
}

/*
  Zonder deze regel wint `display: flex` hierboven van het hidden-attribuut, en dan
  ligt er altijd een dekkend vlak over de render terwijl je denkt dat het element weg
  is. Het beeld was geladen (naturalWidth 1600) maar onzichtbaar; elementFromPoint gaf
  #melding terug. Gemeten 20-08-2026.
*/
.viewer__melding[hidden] { display: none; }

.viewer__balk {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.knopgroep { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ knoppen */
.knop {
  font: 600 16px/1 Montserrat, sans-serif;    /* Basic UI: Montserrat semibold 16px */
  padding: 12px 20px;
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--zwart);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.knop:hover { border-color: var(--zwart); }
.knop.actief { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
.knop--icoon { font-size: 14px; padding: 10px 16px; }
.knop--primair { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.knop--primair:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
.knop--groot { width: 100%; padding: 16px; font-size: 16px; }
.knop[disabled] { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------------------ stappen */
.stappen {
  background: var(--wit);
  border-left: 1px solid var(--lijn);
  min-height: 100%;
}
.stap {
  padding: 32px 40px;
  border-bottom: 1px solid var(--lijn);
}
.stap__kop {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.stap__nr {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--zacht-wit);
  color: var(--zwart);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}
.stap__uitleg {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--notitie);
}
#slot-teller { color: var(--rood); font-weight: 600; }

/* ------------------------------------------------------------------- tegels */
.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tegel {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  background: var(--wit);
  text-align: left;
  font: 400 14px/1.5 Montserrat, sans-serif;
  color: var(--body);
  transition: border-color .15s, box-shadow .15s;
}
.tegel:hover { border-color: var(--zwart); }
.tegel.actief { border-color: var(--rood); box-shadow: inset 0 0 0 1px var(--rood); }
.tegel__naam { display: block; color: var(--zwart); font-weight: 600; margin-bottom: 2px; }
.tegel__meta { display: block; color: var(--notitie); font-size: 13px; }

/* Verpakkingen zonder eigen 3D-model tonen de gemodelleerde variant van hetzelfde
   materiaal. Dat moet je kunnen zien, anders lijkt het beeld stuk. */
.tegel__nog {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--beige);
  color: var(--notitie);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filter {
  font: 400 13px/1 Montserrat, sans-serif;
  padding: 8px 14px;
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--body);
  border-radius: 999px;
  cursor: pointer;
}
.filter.actief { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }

/* ----------------------------------------------------------------- wijnlijst */
.wijnlijst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.wijn {
  display: grid;
  grid-template-columns: 34px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--wit);
  text-align: left;
  font: 400 14px/1.4 Montserrat, sans-serif;
  color: var(--body);
}
.wijn:hover { border-color: var(--zwart); }
.wijn[disabled] { opacity: .45; cursor: not-allowed; }
.wijn__foto {
  width: 34px; height: 44px;
  object-fit: contain;
  background: var(--beige);
}
.wijn__naam { color: var(--zwart); font-weight: 600; }
.wijn__cat { display: block; font-size: 12px; color: var(--notitie); font-weight: 400; }
.wijn__prijs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wijn__aantal {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
  color: var(--rood);
}
.merk3d {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rood);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* ------------------------------------------------------------------- velden */
.veld { display: block; margin-bottom: 18px; }
.veld__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--zwart);
  margin-bottom: 6px;
  line-height: 1.4;
}
textarea {
  width: 100%;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 12px;
  font: 400 15px/1.6 Montserrat, sans-serif;
  color: var(--body);
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--rood); outline-offset: -1px; border-color: var(--rood); }

.branding { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------------------------------------------------------------- overzicht */
.stap--overzicht { background: var(--beige); border-bottom: 0; }
.regels { list-style: none; margin: 0 0 16px; padding: 0; }
.regels li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 14px;
  line-height: 1.5;
}
.regels li span:first-child { color: var(--zwart); }
.regels li em { font-style: normal; color: var(--notitie); font-size: 12px; display: block; }
.regels .leeg { color: var(--notitie); border: 0; justify-content: flex-start; }
.totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 18px;
  font-size: 16px;
  color: var(--zwart);
}
.totaal strong { font-size: 28px; color: var(--rood); font-variant-numeric: tabular-nums; }

.notitie {
  font-size: 13px;
  line-height: 1.6;
  color: var(--notitie);
  margin: 12px 0 0;
}

/* ------------------------------------------------------------------ dialoog */
.dialoog {
  border: 0;
  border-radius: var(--radius);
  padding: 32px;
  max-width: 620px;
  box-shadow: var(--schaduw);
}
.dialoog::backdrop { background: rgba(29,29,27,.45); }
.dialoog pre {
  background: var(--beige);
  border: 1px solid var(--lijn);
  padding: 16px;
  overflow: auto;
  max-height: 340px;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- responsief */
@media (max-width: 1080px) {
  .paneel { grid-template-columns: minmax(0, 1fr); }
  .viewer { position: static; height: auto; padding: 24px; }
  .stappen { border-left: 0; border-top: 1px solid var(--lijn); }
  .stap { padding: 28px 24px; }
  .kop { flex-wrap: wrap; gap: 16px; padding: 20px 24px; }
  h1, .kop__titel h1 { font-size: 24px; }
}

/* Kleine eerlijkheidsregel onder een stap: wat je nog niet kunt tonen, benoem je. */
.stap__noot { display: block; margin-top: 4px; color: var(--notitie); font-size: 12px; }


/* ---------------------------------------------- kleine knop, kleuren, plekken */
.knop--klein { padding: 6px 12px; font-size: 13px; cursor: pointer; }
/* ------------------------------------------------- kartonkleur (S8, 20-08-2026) */
/* Alleen zichtbaar bij de kartonnen doos. De kleur is in de scene een eigen set nodes, dus
   dit is gewoon een keuze zoals de andere; renderclient.js zet hem in de SKU. */
.kleur {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--lijn); border-radius: 4px;
  background: #fff; cursor: pointer; font: inherit; font-size: .82rem;
}
.kleur:hover { border-color: var(--rood); }
.kleur.actief { border-color: var(--rood); box-shadow: inset 0 0 0 1px var(--rood); }
.kleur__vlak {
  width: 18px; height: 18px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .18); flex: 0 0 auto;
}
.kleur__naam { color: var(--body); }
/* ------------------------------------------------------ plekken (S12, 20-08-2026) */
/* De plekken in de kist, met een kruisje op wat gevuld is. Verwijderen kon alleen met
   shift-klik of de rechtermuisknop, en dat kon niemand zien. */
.plekken { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.plek {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 6px;
  border: 1px solid var(--lijn); border-radius: 4px;
  font-size: .78rem; line-height: 1.2;
}
.plek--leeg { border-style: dashed; color: var(--notitie); background: transparent; }
.plek--vol { background: #fff; }
.plek__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: 50%; background: var(--rood); color: #fff;
  font-size: .66rem; font-weight: 600;
}
.plek--leeg .plek__nr { background: var(--lijn); color: var(--notitie); }
.plek__naam {
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plek__weg {
  border: 0; background: transparent; cursor: pointer;
  width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 3px; color: var(--notitie);
  font: inherit; font-size: 1rem; line-height: 1;
}
.plek__weg:hover { background: #f2ded9; color: #a33; }

/* ------------------------------------ kleurblokken (dooskleur) */
.kleurblok { margin-top: 12px; }
.kleurblok__kop {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 600; color: var(--body);
  text-transform: uppercase; letter-spacing: .04em;
}
.kleuren { display: flex; flex-wrap: wrap; gap: 8px; }

/* de stand van het plaatsen: nog niets, nog niet geplaatst, of geplaatst */

/* ------------------------------------------------- aantal en volgorde (21-08-2026) */
/* Aantal kisten of dozen. Staat vlak boven het totaal, want daar rekent de klant. */
.aantal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0 4px; border-top: 1px solid var(--lijn);
}
.aantal__label { font-size: 14px; color: var(--zwart); }
.aantal__regelaar { display: inline-flex; align-items: stretch; }
.aantal__knop {
  width: 34px; height: 34px; font-size: 17px; line-height: 1;
  border: 1px solid var(--lijn); background: #fff; color: var(--zwart);
  cursor: pointer;
}
.aantal__knop:first-child { border-radius: 3px 0 0 3px; }
.aantal__knop:last-child { border-radius: 0 3px 3px 0; }
.aantal__knop:hover { background: var(--beige); }
.aantal__invoer {
  width: 62px; height: 34px; text-align: center; font-size: 15px;
  border: 1px solid var(--lijn); border-left: 0; border-right: 0;
  font-variant-numeric: tabular-nums;
}
/* de rekenregel naast "Totaal", alleen zichtbaar vanaf twee stuks */
.totaal__per { font-style: normal; font-size: 13px; color: var(--notitie); margin-left: 6px; }
.totaal__per[hidden] { display: none; }

/* Pijltjes om een fles een plek naar voren of naar achteren te schuiven. */
.plek__schuif {
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; background: transparent; color: var(--notitie);
  font-size: 15px; cursor: pointer; border-radius: 3px;
}
.plek__schuif:hover:not(:disabled) { background: var(--beige); color: var(--zwart); }
.plek__schuif:disabled { opacity: .25; cursor: default; }

/* ------------------------------------------------- fles groot bekijken (21-08-2026) */
/* De miniatuur is een echte render van de fles; klikken opent hem groot. */
.wijn__foto { cursor: zoom-in; }
.flesdlg {
  border: 0; border-radius: 4px; padding: 0;
  background: var(--wit); box-shadow: var(--schaduw);
  max-width: min(90vw, 520px); max-height: 92vh;
}
.flesdlg::backdrop { background: rgba(29,29,27,.62); }
.flesdlg__body { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.flesdlg img {
  display: block; width: 100%; height: 100%; max-height: 76vh;
  object-fit: contain; background: var(--beige);
}
.flesdlg__tekst { padding: 22px 24px 24px; overflow-y: auto; max-height: 76vh; }
.flesdlg__naam { margin: 0 0 2px; font-size: 17px; line-height: 1.25; color: var(--zwart); }
.flesdlg__huis { margin: 0 0 10px; font-size: 13px; color: var(--notitie); }
.flesdlg__prijs { margin: 0 0 14px; font-size: 15px; color: var(--rood); font-weight: 600; }
.flesdlg__lijst {
  margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr;
  gap: 4px 14px; font-size: 13px;
}
.flesdlg__lijst dt { color: var(--notitie); }
.flesdlg__lijst dd { margin: 0; color: var(--zwart); }
.flesdlg__notitie {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--body);
  border-top: 1px solid var(--lijn); padding-top: 12px;
}
.flesdlg__link { margin: 0; font-size: 13px; }
.flesdlg__link a { color: var(--rood); }
.flesdlg__link[hidden] { display: none; }
@media (max-width: 560px) {
  .flesdlg__body { grid-template-columns: 1fr; }
  .flesdlg img { max-height: 40vh; }
}

/* de i-knop in de wijnregel */
.wijn__info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; margin-left: 8px;
  border: 1px solid var(--lijn); border-radius: 50%;
  background: #fff; color: var(--notitie);
  font-size: 12px; font-weight: 700; font-style: italic; line-height: 1;
  cursor: pointer;
}
.wijn__info:hover { border-color: var(--rood); color: var(--rood); }
.flesdlg__sluit { position: absolute; top: 6px; right: 6px; }
.flesdlg__sluit button {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--zwart);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.flesdlg__sluit button:hover { background: var(--beige); }

/* ------------------------------------------------- zoeken in de wijnlijst (21-08-2026) */
/* Met het volledige assortiment is bladeren geen doen; zoeken is de hoofdingang. */
.zoek { display: block; margin: 0 0 10px; }
.zoek input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: #fff; color: var(--zwart);
}
.zoek input:focus { outline: none; border-color: var(--rood); }
.wijnlijst__voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
.wijnlijst__teller { font-size: 12px; color: var(--notitie); }
.wijnlijst__voet .knop--klein[hidden] { display: none; }

/* --------------------------------------------------------------- TRM-kopbalk */
.topbar { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 40px; background: var(--zwart); }
.topbar__merk img { height: 24px; width: auto; display: block; }
.topbar__sep { width: 1px; height: 20px; background: rgba(255,255,255,.16); }
.topbar__context { font-size: .74rem; letter-spacing: .08em; color: rgba(255,255,255,.70); }
.topbar__terug { margin-left: auto; font-size: .8rem; color: rgba(255,255,255,.85); text-decoration: none; }
.topbar__terug:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .topbar { padding: 0 16px; height: 56px; gap: 12px; }
  .topbar__sep, .topbar__context { display: none; }
}

/* telefoon: de camerarij en de knoppen mogen niet uit beeld lopen (gemeten 07-10-2026: 433 px op een scherm van 390) */
@media (max-width: 640px) {
  .viewer { padding: 16px; }
  .stap { padding: 24px 16px; }
  .knopgroep { flex-wrap: wrap; }
  .knop--icoon { padding: 10px 12px; font-size: 14px; }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* logokeuze (08-10-2026): vier tegels met het logo als beeld */
.tegels--logo { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.tegel--logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tegel--logo img { width: 100%; max-width: 160px; height: 64px; object-fit: contain; }
.tegel--logo .tegel__leeg { height: 64px; display: flex; align-items: center; color: var(--notitie); font-size: 13px; }