/* Vortex Print prijscalculator. Alle regels zijn afgeschermd met #vp-calc zodat het thema niet wordt beinvloed. */
#vp-calc{
  --vp-accent:#0083AE;      /* huisstijlkleur: pas hier aan */
  --vp-accent-ink:#FFFFFF;
  --vp-ink:#13232B; --vp-muted:#56676F; --vp-line:#D3DCE0;
  --vp-field:#F3F6F7; --vp-panel:#F3F6F7; --vp-active:#DDF1F8;
  --vp-warn-bg:#FFF1D2; --vp-warn-ink:#6A4800;
  --vp-sticky-top:110px;    /* ruimte voor de vaste menubalk van de site */
  color:var(--vp-ink); font-family:inherit; font-size:16px; line-height:1.5;
  max-width:1120px; margin:0 auto; text-align:left;
}
#vp-calc *,#vp-calc *::before,#vp-calc *::after{box-sizing:border-box}
#vp-calc p{margin:0; padding:0}
#vp-calc .vp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:28px; align-items:start}
@media (max-width:880px){#vp-calc .vp-grid{grid-template-columns:minmax(0,1fr)}}

#vp-calc fieldset{border:0; padding:18px 0 6px; margin:0; border-bottom:1px solid var(--vp-line); min-width:0}
#vp-calc fieldset:first-child{padding-top:0}
#vp-calc fieldset:last-child{border-bottom:0}
#vp-calc legend{font-weight:700; font-size:19px; padding:0; margin:0 0 12px; color:var(--vp-ink); float:left; width:100%}
#vp-calc legend + *{clear:both}
#vp-calc .vp-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:520px){#vp-calc .vp-row{grid-template-columns:minmax(0,1fr)}}
#vp-calc .vp-field{display:block; font-weight:600; font-size:15px; color:var(--vp-ink); margin:0; padding:0}
#vp-calc .vp-gap{margin-top:18px}
#vp-calc .vp-hint{display:block; font-weight:400; color:var(--vp-muted); font-size:13.5px; margin-top:2px}
#vp-calc .vp-input{display:flex; align-items:center; margin-top:6px; border:1.5px solid var(--vp-line); border-radius:9px; background:var(--vp-field); overflow:hidden}
#vp-calc .vp-narrow{max-width:240px}
#vp-calc .vp-input:focus-within{border-color:var(--vp-accent); box-shadow:0 0 0 3px rgba(0,131,174,.22)}
#vp-calc .vp-input input{flex:1; min-width:0; width:auto; height:auto; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--vp-ink); font-family:inherit; font-size:18px; font-weight:600; padding:10px 12px; margin:0; font-variant-numeric:tabular-nums}
#vp-calc .vp-input input:focus{outline:none}
#vp-calc .vp-select{position:relative}
#vp-calc .vp-select select{flex:1; min-width:0; width:100%; height:auto; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--vp-ink); font-family:inherit; font-size:17px; font-weight:600; padding:11px 40px 11px 12px; margin:0; -webkit-appearance:none; appearance:none; cursor:pointer}
#vp-calc .vp-select select:focus{outline:none}
#vp-calc .vp-select::after{content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--vp-muted); border-bottom:2px solid var(--vp-muted); transform:translateY(-70%) rotate(45deg); pointer-events:none}
#vp-calc .vp-unit{padding:0 12px; color:var(--vp-muted); font-size:14px; font-weight:400}
#vp-calc .vp-badge{display:block; margin-top:8px; font-size:13.5px; font-weight:400; color:var(--vp-muted)}
#vp-calc .vp-badge b{color:var(--vp-ink)}

#vp-calc .vp-layers{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
#vp-calc .vp-chip{position:relative; margin:0}
#vp-calc .vp-chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
#vp-calc .vp-chip span{display:flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border:1.5px solid var(--vp-line); border-radius:999px; font-weight:600; background:var(--vp-field); user-select:none}
#vp-calc .vp-chip input:checked + span{border-color:var(--vp-accent); background:var(--vp-active)}
#vp-calc .vp-chip input:focus-visible + span{outline:3px solid var(--vp-accent); outline-offset:2px}
#vp-calc .vp-sw{display:inline-block; width:20px; height:20px; border-radius:50%; flex:none; border:1px solid var(--vp-line)}
#vp-calc .vp-full{background:conic-gradient(#00A3D9,#E5007E,#FFD500,#00A3D9)}
#vp-calc .vp-white{background:#fff}
#vp-calc .vp-varnish{background:linear-gradient(135deg,#e9f3f6 0%,#fff 45%,#b9ccd3 100%)}
#vp-calc .vp-note{font-size:13.5px; color:var(--vp-muted); margin-top:10px; min-height:1px}

#vp-calc .vp-check{display:flex; gap:12px; align-items:flex-start; padding:8px 0; margin:0; cursor:pointer; font-weight:400}
#vp-calc .vp-check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--vp-accent); flex:none}
#vp-calc .vp-t{font-weight:600}
#vp-calc .vp-radios{margin-top:4px}
#vp-calc .vp-radios .vp-check{padding:6px 0}

#vp-calc .vp-aside{position:sticky; top:var(--vp-sticky-top)}
@media (max-width:880px){#vp-calc .vp-aside{position:static}}
#vp-calc .vp-panel{background:var(--vp-panel); border-radius:14px; padding:20px 22px 22px}
#vp-calc .vp-vis{display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; align-items:center}
#vp-calc .vp-vis svg{width:100%; height:auto; display:block; font-family:inherit}
#vp-calc .vp-stacktitle{font-weight:650; font-size:14px; margin-bottom:8px}
#vp-calc .vp-stack{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
#vp-calc .vp-stack li{display:flex; align-items:center; gap:8px; font-size:14px; margin:0; padding:0; list-style:none}
#vp-calc .vp-lbl{color:var(--vp-muted); font-size:13px}
#vp-calc .vp-zone{transform-box:fill-box; transform-origin:50% 100%; transition:transform .45s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){#vp-calc .vp-zone{transition:none}}

#vp-calc .vp-price{border-top:1px solid var(--vp-line); margin-top:18px; padding-top:16px}
#vp-calc .vp-big{font-size:clamp(38px,6vw,50px); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--vp-ink)}
#vp-calc .vp-big small{font-size:16px; font-weight:500; color:var(--vp-muted); letter-spacing:0; margin-left:6px}
#vp-calc .vp-big.vp-ask{font-size:30px}
#vp-calc .vp-sub{color:var(--vp-muted); font-size:14px; margin-top:6px}
#vp-calc table.vp-lines{width:100%; border-collapse:collapse; border:0; margin:16px 0 0; font-size:14.5px; font-variant-numeric:tabular-nums; background:none}
#vp-calc table.vp-lines td{padding:5px 0; vertical-align:top; border:0; background:none; color:var(--vp-ink)}
#vp-calc table.vp-lines td:last-child{text-align:right; white-space:nowrap; padding-left:12px}
#vp-calc table.vp-lines .vp-m{color:var(--vp-muted); font-size:13px}
#vp-calc table.vp-lines tr.vp-total td{border-top:1px solid var(--vp-line); padding-top:10px; font-weight:700; font-size:16px}
#vp-calc table.vp-lines tr.vp-vat td{color:var(--vp-muted)}
#vp-calc .vp-nudge{margin-top:14px; padding:10px 12px; border-radius:9px; background:var(--vp-active); font-size:14px}
#vp-calc .vp-warn{margin-top:14px; padding:12px 14px; border-radius:9px; background:var(--vp-warn-bg); color:var(--vp-warn-ink); font-size:14.5px}
#vp-calc .vp-warn p + p{margin-top:6px}
#vp-calc a.vp-cta{display:block; text-align:center; margin-top:18px; background:var(--vp-accent); color:var(--vp-accent-ink); text-decoration:none; font-weight:700; padding:14px 16px; border-radius:10px; font-size:16px; border:0}
#vp-calc a.vp-cta:hover{filter:brightness(1.07); color:var(--vp-accent-ink)}
#vp-calc a.vp-cta:focus-visible{outline:3px solid var(--vp-ink); outline-offset:3px}

#vp-calc .vp-tiers{margin-top:32px}
#vp-calc .vp-tiers h3{font-size:19px; font-weight:700; margin:0 0 4px; padding:0; color:var(--vp-ink)}
#vp-calc .vp-tiers p{margin-bottom:14px; color:var(--vp-muted); font-size:14px}
#vp-calc .vp-scroll{overflow-x:auto}
#vp-calc table.vp-tt{border-collapse:collapse; border:0; width:100%; min-width:640px; margin:0; font-variant-numeric:tabular-nums; font-size:14.5px; background:none}
#vp-calc table.vp-tt th,#vp-calc table.vp-tt td{padding:9px 10px; text-align:right; border:0; border-bottom:1px solid var(--vp-line); white-space:nowrap; background:none; color:var(--vp-ink)}
#vp-calc table.vp-tt th:first-child,#vp-calc table.vp-tt td:first-child{text-align:left}
#vp-calc table.vp-tt thead th{color:var(--vp-muted); font-weight:600; font-size:13px}
#vp-calc table.vp-tt tr.vp-cur td{font-weight:600}
#vp-calc table.vp-tt td.vp-na{color:var(--vp-muted); font-size:13px}
#vp-calc table.vp-tt td.vp-hit{background:var(--vp-accent); color:var(--vp-accent-ink); border-radius:6px; font-weight:800}
#vp-calc .vp-foot{margin-top:20px; color:var(--vp-muted); font-size:13.5px; max-width:80ch}

/* v2: aanvraagformulier */
#vp-calc .vp-req{color:#B4234A; font-weight:700}
#vp-calc .vp-intro{color:var(--vp-muted); font-size:14.5px; margin-bottom:12px}
#vp-calc .vp-input input[type=text],#vp-calc .vp-input input[type=email],#vp-calc .vp-input input[type=tel]{font-size:16px; font-weight:500}
#vp-calc .vp-input textarea{flex:1; min-width:0; width:100%; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--vp-ink); font-family:inherit; font-size:16px; padding:10px 12px; margin:0; resize:vertical}
#vp-calc .vp-input textarea:focus{outline:none}
#vp-calc .vp-invalid .vp-input,#vp-calc .vp-input.vp-invalid{border-color:#B4234A}
#vp-calc .vp-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#vp-calc .vp-check a{color:var(--vp-accent)}
#vp-calc .vp-errors{margin-top:18px; padding:12px 14px; border-radius:9px; background:var(--vp-warn-bg); color:var(--vp-warn-ink); font-size:14.5px}
#vp-calc .vp-errors ul{margin:6px 0 0 18px; padding:0}
#vp-calc .vp-errors li{margin:2px 0; padding:0}
#vp-calc button.vp-cta{display:block; width:100%; text-align:center; margin-top:18px; background:var(--vp-accent); color:var(--vp-accent-ink); font-family:inherit; font-weight:700; padding:15px 16px; border-radius:10px; font-size:17px; border:0; cursor:pointer; line-height:1.3}
#vp-calc button.vp-cta:hover{filter:brightness(1.07)}
#vp-calc button.vp-cta:focus-visible{outline:3px solid var(--vp-ink); outline-offset:3px}
#vp-calc button.vp-cta[disabled]{opacity:.6; cursor:wait}
#vp-calc .vp-sum{border-top:1px solid var(--vp-line); margin-top:18px; padding-top:16px}
#vp-calc .vp-sum dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0; font-size:14.5px}
#vp-calc .vp-sum dt{color:var(--vp-muted); margin:0}
#vp-calc .vp-sum dd{margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere}
#vp-calc .vp-sum dd.vp-open{color:var(--vp-muted); font-weight:400; font-style:italic}
#vp-calc .vp-sumnote{margin-top:14px; padding:10px 12px; border-radius:9px; background:var(--vp-active); font-size:14px}
@media (max-width:880px){#vp-calc .vp-aside{display:none}}
#vp-calc .vp-done{background:var(--vp-panel); border-radius:14px; padding:28px 26px; outline:none}
#vp-calc .vp-done h3{font-size:24px; font-weight:750; margin:0 0 8px; padding:0; color:var(--vp-ink)}
#vp-calc .vp-done p{color:var(--vp-ink); max-width:62ch}
#vp-calc .vp-done p + p{margin-top:8px}
#vp-calc .vp-done .vp-again{margin-top:18px; background:none; border:1.5px solid var(--vp-accent); color:var(--vp-accent); border-radius:9px; padding:10px 16px; font-family:inherit; font-weight:600; font-size:15px; cursor:pointer}
