/* WEnovo R4.2 - visuele hierarchie en contrast.
   Alleen presentatielaag: geen data-*, name-, id- of interactiecontracten. */
:root{
  --ui-section-bg:#fbfcfc;
  --ui-section-border:#e0e5e8;
  --ui-control-border:#cbd3d7;
  --ui-control-hover:#9ba7ad;
  --ui-helper:#667178;
  --ui-selected-bg:#fff8f3;
  --ui-selected-border:#de7438;
  --ui-selected-ink:#623219;
  --ui-soft-accent:#fff8f3;
}

/* Formuliervelden krijgen meer contrast zonder hun gedrag te wijzigen. */
body[data-portal] .field>span{
  color:#2f373c;
  font-weight:800;
}
body[data-portal] .field input,
body[data-portal] .field textarea,
body[data-portal] .field select{
  border-color:var(--ui-control-border);
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(20,27,31,.025);
}
body[data-portal] .field input:hover,
body[data-portal] .field textarea:hover,
body[data-portal] .field select:hover{
  border-color:var(--ui-control-hover);
}
body[data-portal] .field input:focus,
body[data-portal] .field textarea:focus,
body[data-portal] .field select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,107,33,.16);
}

/* Grote artikel-/aanvraagformulieren worden visueel als een duidelijk werkblok behandeld. */
body[data-portal="customer"] .article-form{
  border-color:#dce2e5;
  box-shadow:0 4px 16px rgba(20,27,31,.035);
  background:#fff;
  overflow:hidden;
}
body[data-portal="customer"] .article-form>header{
  margin:0 0 14px;
  padding:14px 16px 13px;
  background:#f8f9fa;
  border-bottom:1px solid #e1e6e8;
  border-radius:14px 14px 0 0;
}
body[data-portal="customer"] .article-form>header h3{
  color:#20272b;
  font-size:19px;
}

/* Secties: meer ruimte tussen onderdelen, minder zoekwerk binnen een onderdeel. */
body[data-portal] .choice-section{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--ui-section-border);
  border-left:2px solid #d0d7da;
  border-radius:12px;
  background:var(--ui-section-bg);
}
body[data-portal] .choice-section+.choice-section{
  margin-top:14px;
}
body[data-portal] .choice-section:focus-within{
  border-left-color:var(--orange);
  box-shadow:0 0 0 2px rgba(243,107,33,.04);
}
body[data-portal] .choice-section .section-heading{
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid #d9e0e4;
}
body[data-portal] .choice-section .section-heading h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  color:#242b2f;
  font-size:16px;
  font-weight:900;
  letter-spacing:.005em;
}
body[data-portal] .choice-section .section-heading h4:before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(243,107,33,.07);
}
body[data-portal] .choice-section .section-heading p{
  color:var(--ui-helper);
  font-size:12.5px;
  line-height:1.45;
  max-width:900px;
}

/* Keuzekaarten zijn compacter en de rand blijft ook in rust duidelijk zichtbaar. */
body[data-portal] .choice-section .tile-grid{
  gap:9px;
}
body[data-portal] .choice-section .choice-tile{
  position:relative;
  min-height:62px;
  padding:12px 14px;
  border:1px solid var(--ui-control-border);
  border-radius:11px;
  background:#fff;
  box-shadow:0 1px 4px rgba(20,27,31,.025);
  color:#242b2f;
  transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;
}
body[data-portal] .choice-section .choice-tile:hover{
  transform:translateY(-1px);
  border-color:#e28a57;
  background:#fffaf6;
  box-shadow:0 3px 9px rgba(20,27,31,.045);
}
body[data-portal] .choice-section .choice-tile:focus-visible{
  outline:3px solid rgba(243,107,33,.23);
  outline-offset:2px;
}
body[data-portal] .choice-section .choice-tile b{
  font-size:15px;
  color:inherit;
}
body[data-portal] .choice-section .choice-tile span{
  color:#5c676e;
  font-size:12px;
}
body[data-portal] .choice-section .choice-tile.selected{
  padding-right:43px;
  border:1.5px solid var(--ui-selected-border);
  background:var(--ui-selected-bg);
  color:var(--ui-selected-ink);
  box-shadow:0 0 0 2px rgba(222,116,56,.07),0 2px 7px rgba(20,27,31,.03);
  font-weight:800;
}
body[data-portal] .choice-section .choice-tile.selected:after{
  content:"✓";
  position:absolute;
  right:14px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ui-selected-border);
  color:#fff;
  font-size:14px;
  font-weight:950;
}
body[data-portal] .choice-section .choice-tile.selected span{
  color:#7b4528;
}
body[data-portal] .choice-section .choice-tile:disabled{
  opacity:.6;
  border-style:dashed;
  background:#eef1f3;
  box-shadow:none;
}

/* Conditionele details horen zichtbaar bij de gekozen sectie. */
body[data-portal] .conditional-panel{
  margin-top:11px;
  padding:14px;
  border:1px solid #e3d6cd;
  border-left:2px solid #e38a59;
  background:#fffaf6;
  border-radius:10px;
}
body[data-portal] .conditional-panel .field:last-child{
  margin-bottom:0;
}

/* Uploads en camera zijn invoerelementen, niet alleen witte vlakken. */
body[data-portal] .upload{
  border-color:#c5cfd4;
  background:#fafbfb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
body[data-portal] .upload:hover,
body[data-portal] .upload:focus-within{
  border-color:var(--orange);
  background:#fff8f3;
}
body[data-portal] .upload>b{
  color:#293136;
}
body[data-portal] .upload>span{
  color:var(--ui-helper);
}
body[data-portal] .camera-box{
  border:1px solid #dbe1e4;
  background:#f8f9fa;
}

/* Niet alleen kleur: actieve keuzes krijgen ook een samenvatting in tekst. */
body[data-portal="customer"] .article-choice-summary{
  padding:14px;
  border:1px solid #dfe4e7;
  border-radius:12px;
  background:#fafbfb;
  box-shadow:0 2px 8px rgba(20,27,31,.025);
}
body[data-portal="customer"] .article-choice-summary h4{
  margin:0 0 10px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#4d5960;
}
body[data-portal="customer"] .article-choice-summary dl{
  display:grid;
  gap:9px;
  margin:0;
}
body[data-portal="customer"] .article-choice-summary div{
  display:grid;
  gap:2px;
  padding-bottom:8px;
  border-bottom:1px solid #dde3e6;
}
body[data-portal="customer"] .article-choice-summary div:last-child{
  padding-bottom:0;
  border-bottom:0;
}
body[data-portal="customer"] .article-choice-summary dt{
  color:#6a747a;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
body[data-portal="customer"] .article-choice-summary dd{
  margin:0;
  color:#252d31;
  font-size:12px;
  font-weight:800;
  overflow-wrap:anywhere;
}
body[data-portal="customer"] .article-choice-summary dd.is-empty{
  color:#8a949a;
  font-weight:650;
}

@media(min-width:1180px){
  body[data-portal="customer"] .article-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    column-gap:18px;
    align-items:start;
  }
  body[data-portal="customer"] .article-form>header{
    grid-column:1/-1;
  }
  body[data-portal="customer"] .article-form>:not(header):not(.article-choice-summary){
    grid-column:1;
  }
  body[data-portal="customer"] .article-form>.article-choice-summary{
    grid-column:2;
    grid-row:2 / span 30;
    position:sticky;
    top:calc(var(--topbar) + 16px);
  }
}

@media(max-width:1179px){
  body[data-portal="customer"] .article-choice-summary{
    margin:0 0 14px;
  }
  body[data-portal="customer"] .article-choice-summary dl{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  body[data-portal="customer"] .article-choice-summary div{
    padding:0 8px 0 0;
    border-bottom:0;
    border-right:1px solid #dde3e6;
  }
  body[data-portal="customer"] .article-choice-summary div:last-child{
    border-right:0;
  }
}

@media(max-width:760px){
  body[data-portal] .choice-section{
    padding:13px;
    margin-top:14px;
  }
  body[data-portal] .choice-section .choice-tile{
    min-height:58px;
    padding:11px 13px;
  }
  body[data-portal="customer"] .article-form>header{
    margin:0 0 12px;
  }
  body[data-portal="customer"] .article-choice-summary dl{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-portal="customer"] .article-choice-summary div:nth-child(2){
    border-right:0;
  }
}

/* Subarticle columns can be narrower than the full form. */
body[data-portal="customer"] .article-form > .assembly-control{
  grid-column:1/-1!important;
}
body[data-portal="customer"] .article-form[data-subarticle]{
  display:block;
  min-width:0;
}
body[data-portal="customer"] .article-form[data-subarticle] > .article-choice-summary{
  position:static;
  margin-bottom:14px;
}
body[data-portal="customer"] .article-form[data-subarticle] > .article-choice-summary dl{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:8px;
}
body[data-portal="customer"] .article-form[data-subarticle] > .article-choice-summary dl > div{
  border:0;
  padding:4px 0;
}
body[data-portal="customer"] .article-form > header{
  flex-wrap:wrap;
  gap:8px;
}
body[data-portal="customer"] .article-form > header > div{
  flex:1 1 220px;
  min-width:0;
}
body[data-portal="customer"] .article-form[data-subarticle] > .form-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
body[data-portal="customer"] .article-form .form-grid > *{
  min-width:0;
}
body[data-portal="customer"] .article-form input[type="file"]{
  width:100%;
  max-width:100%;
  min-width:0;
}
body[data-portal="customer"] .assembly-commercial-line > [data-assembly-physical-choice],
body[data-portal="customer"] .assembly-commercial-line > .example-product-option,
body[data-portal="customer"] .assembly-commercial-line > .plastic-options{
  display:none!important;
}
body[data-portal="customer"] [data-subarticle] [data-choice="afterTreatment"]{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
}
body[data-portal="customer"] [data-subarticle] [data-choice="afterTreatment"] .choice-tile{
  overflow-wrap:anywhere;
}

@media(max-width:480px){
  body[data-portal="customer"] .article-form > .choice-section.assembly-control{margin-inline:0!important}
  body[data-portal="customer"] .assembly-control .subarticle-list{margin-left:0;padding-left:6px}
  body[data-portal="customer"] .article-form[data-subarticle] > .choice-section{margin-inline:6px}
}