/* Vermogensverdeling Elementi di Cucina 9034/9036 - alleen geladen door template dsw/vermogen.phtml.
   Alles hangt onder .vv; de resets vangen de themaregels voor button, h3, p, figure en input af. */
.vv { --vv-inkt: #1d1d33; --vv-tekst: #636363; --vv-lijn: #e4e4ea; --vv-vlak: #fafafb; --vv-rood: #b42318; --vv-groen: #157f3b;
      display: block; background: #fff; border-radius: 22px; padding: 22px 24px; margin: 24px 0; color: var(--vv-tekst);
      box-shadow: 0 1px 2px rgba(29,29,51,.06); font: 16px/1.5 Inter, "Helvetica Neue", Verdana, Arial, sans-serif; text-align: left; }
.vv[hidden] { display: none; }
.vv * { box-sizing: border-box; }
.vv p, .vv h3, .vv figure { margin: 0; padding: 0; }
.vv button { margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; float: none; width: auto; height: auto;
             font-family: Inter, "Helvetica Neue", Arial, sans-serif; line-height: 1.1; -webkit-appearance: none; appearance: none; }
.vv button:focus-visible, .vv input:focus-visible, .vv .vv-zone:focus-visible, .vv .vv-ovendeur:focus-visible { outline: 3px solid #3b3770; outline-offset: 2px; }

.vv-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.vv .vv-titel { font: 600 20px/1.3 Silka, Inter, sans-serif; color: var(--vv-inkt); text-transform: none; }
.vv .vv-sub { margin-top: 2px; font-size: 14px; }
.vv .vv-intro { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f6f6fa; color: var(--vv-inkt); font-size: 14px; line-height: 1.5; }
.vv .vv-intro ul { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; }
.vv .vv-intro li { margin: 3px 0; padding: 0; }
.vv .vv-intro strong { font-weight: 700; }
.vv .vv-intro .vv-intro__doe { margin-top: 6px; color: var(--vv-tekst); }
.vv .vv-groep__melding { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; background: #fff4e5; border: 1px solid #f3c48b; color: #6b3800; font-size: 13px; line-height: 1.45; }
.vv .vv-groep__melding[hidden] { display: none; }
.vv .vv-rij button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.vv-rij[data-max="ja"] output { color: #8a4b00; }
.vv-fase { display: inline-flex; background: #efeff3; border-radius: 999px; padding: 4px; }
.vv .vv-fase button { font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--vv-inkt); padding: 10px 16px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.vv .vv-fase button[aria-checked="true"] { background: #fff; box-shadow: 0 1px 3px rgba(29,29,51,.18); }

.vv-romp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "beeld bed" "onder onder"; gap: 16px 24px; margin-top: 16px; align-items: start; }
.vv-romp--zonderbeeld { grid-template-columns: 1fr; grid-template-areas: "bed" "onder"; }
.vv-beeld { grid-area: beeld; position: relative; }
.vv-beeld[hidden] { display: none; }
.vv-bediening { grid-area: bed; display: grid; gap: 12px; }
.vv-romp--zonderbeeld .vv-bediening { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); align-items: start; }
.vv-onder { grid-area: onder; }
.vv-beeld svg { display: block; width: 100%; height: auto; aspect-ratio: 96 / 79; border-radius: 14px; background: #fff; touch-action: manipulation; }
.vv .vv-beeld figcaption { font-size: 12px; margin-top: 6px; }

.vv-zone { cursor: pointer; }
.vv-zone__vlak { stroke-width: .35; transition: fill-opacity .15s; }
.vv-zone[data-status="uit"] .vv-zone__vlak { stroke-dasharray: 1 .8; }
.vv-zone__strepen { pointer-events: none; display: none; }
.vv-zone[aria-pressed="true"] .vv-zone__rand { stroke: #fff; stroke-width: .9; }
.vv-zone__label { font: 700 2.3px/1 Inter, sans-serif; fill: #fff; pointer-events: none; }
.vv-zone__naam { font: 600 1.45px/1 Inter, sans-serif; fill: #fff; pointer-events: none; opacity: .92; }
.vv-ovendeur { cursor: pointer; }
.vv-ovendeur__vlak { fill: transparent; stroke: rgba(255,255,255,.35); stroke-width: .4; stroke-dasharray: 1.2 .9; }
.vv-ovendeur:hover .vv-ovendeur__vlak, .vv-ovendeur:focus-visible .vv-ovendeur__vlak { stroke: #c2620a; stroke-dasharray: none; }
.vv-ovenlabel rect { fill: rgba(29,29,51,.82); }
.vv-ovenlabel text { font: 600 1.9px/1 Inter, sans-serif; fill: #fff; }
.vv-afzuiging { fill: none; stroke: #9ca3af; stroke-width: .3; stroke-dasharray: 1 .7; }

.vv-groep { border: 1px solid var(--vv-lijn); border-left: 5px solid #c2620a; border-radius: 14px; padding: 10px 12px; background: var(--vv-vlak); }
.vv-groep--B { border-left-color: #1f5fd1; }
.vv-groep--C { border-left-color: #6d3fd0; }
.vv-groep__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.vv-groep__naam { font-size: 14px; font-weight: 600; color: var(--vv-inkt); }
.vv-groep__wat { font-weight: 400; color: var(--vv-tekst); white-space: nowrap; }
.vv-rij { display: grid; grid-template-columns: 110px 40px minmax(0,1fr) 40px 44px; align-items: center; gap: 6px; padding: 3px 0; border-radius: 8px; }
.vv-rij[data-gekozen="true"] { background: #fff; box-shadow: 0 0 0 2px #c2620a; }
.vv-groep--B .vv-rij[data-gekozen="true"] { box-shadow: 0 0 0 2px #1f5fd1; }
.vv-groep--C .vv-rij[data-gekozen="true"] { box-shadow: 0 0 0 2px #6d3fd0; }
.vv-rij__naam { font-size: 14px; color: var(--vv-inkt); padding-left: 4px; }
.vv .vv-rij button { width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--vv-lijn); background: #fff; font-size: 18px; font-weight: 600; color: var(--vv-inkt); cursor: pointer; }
.vv .vv-rij input[type=range] { width: 100%; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #c2620a; }
.vv .vv-groep--B input[type=range] { accent-color: #1f5fd1; }
.vv .vv-groep--C input[type=range] { accent-color: #6d3fd0; }
.vv-rij output { font-size: 15px; font-weight: 700; color: var(--vv-inkt); text-align: right; padding-right: 4px; }
.vv-oven { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 6px; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--vv-lijn); }
.vv-oven__keuze { display: flex; gap: 6px; flex-wrap: wrap; }
.vv .vv-oven__keuze button { font-size: 13px; font-weight: 600; padding: 9px 11px; min-height: 40px; border-radius: 10px; border: 1px solid var(--vv-lijn); background: #fff; color: var(--vv-inkt); cursor: pointer; }
.vv .vv-oven__keuze button[aria-checked="true"] { background: #c2620a; border-color: #c2620a; color: #fff; }

.vv-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vv-meter { border: 1px solid var(--vv-lijn); border-radius: 14px; padding: 10px 12px; }
.vv-meter__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--vv-inkt); font-weight: 600; }
.vv-meter__naam { white-space: nowrap; }
.vv-oordeel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.vv-oordeel[data-o="past"] { background: #e7f6ec; color: var(--vv-groen); }
.vv-oordeel[data-o="past_niet"] { background: #fdecea; color: var(--vv-rood); }
.vv-oordeel[data-o="vol"] { background: #fff4e5; color: #8a4b00; }
.vv-oordeel[data-o="leeg"] { background: transparent; color: #6b7280; font-weight: 600; }
.vv-balk { position: relative; height: 14px; border-radius: 7px; background: #eef0f3; margin: 9px 0 5px; overflow: hidden; }
.vv-balk__deel { position: absolute; top: 0; bottom: 0; }
.vv-balk__oven { background: repeating-linear-gradient(135deg, #8a4206 0 4px, #a8560f 4px 8px); }
.vv-balk__over { background: repeating-linear-gradient(135deg, var(--vv-rood) 0 4px, #e5554b 4px 8px); }
.vv-balk__grens { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--vv-inkt); }
.vv .vv-meter__tekst { font-size: 12.5px; line-height: 1.45; }
.vv .vv-legenda { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.vv .vv-legenda[hidden] { display: none; }
.vv-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.vv-legenda__staal { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.vv .vv-uitleg { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #f6f6fa; color: var(--vv-inkt); font-size: 14px; }
.vv .vv-voet { margin-top: 10px; font-size: 12px; line-height: 1.5; }

@media (max-width: 860px) {
  .vv { padding: 16px; border-radius: 18px; }
  .vv-kop { flex-direction: column; }
  .vv-fase { width: 100%; }
  .vv .vv-fase button { flex: 1; }
  /* mobiel: foto, dan meters + uitleg, dan de bediening */
  .vv-romp { grid-template-columns: 1fr; grid-template-areas: "beeld" "onder" "bed"; gap: 14px; }
  .vv-romp--zonderbeeld { grid-template-areas: "onder" "bed"; }
  .vv-meter__kop { flex-direction: column; align-items: flex-start; }
  .vv-rij { grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-areas: "naam naam stand" "min schuif plus"; row-gap: 2px; padding: 4px 0; }
  .vv-rij .vv-rij__naam { grid-area: naam; }
  .vv-rij output { grid-area: stand; }
  .vv .vv-rij .vv-min { grid-area: min; width: 44px; height: 44px; }
  .vv .vv-rij input[type=range] { grid-area: schuif; height: 44px; }
  .vv .vv-rij .vv-plus { grid-area: plus; width: 44px; height: 44px; }
  .vv-oven { grid-template-columns: 1fr; }
  .vv .vv-oven__keuze button { flex: 1; min-height: 44px; }
}