/* Samenwerken page — dedicated stylesheet, scoped to template-samenwerken.php
   only (see functions.php conditional enqueue). Deliberately kept separate
   from style.css per the concurrency note for this build: another agent may
   be editing the shared stylesheet at the same time. Uses the same brand
   variables (--navy/--blue/--teal/--muted/--gray/--radius/--shadow) already
   defined in style.css's :root — this file only adds new component classes,
   it never re-declares :root itself. */

/* ---- Interactive price-indication builder ---- */
.price-picker{
  max-width:920px;
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(var(--navy-rgb),.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px;
}
@media (max-width:600px){.price-picker{padding:26px 20px;}}

.picker-group{margin-bottom:30px;}
.picker-group:last-of-type{margin-bottom:0;}
.picker-step-label{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--navy);
  font-size:.95rem;
  margin-bottom:14px;
}

.picker-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.picker-tiles--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:700px){
  .picker-tiles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:460px){
  .picker-tiles,.picker-tiles--3{grid-template-columns:1fr;}
}

.picker-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  background:var(--gray);
  border:2px solid transparent;
  border-radius:14px;
  padding:18px 12px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.picker-tile:hover{border-color:rgba(var(--blue-rgb),.35);transform:translateY(-2px);}
.picker-tile svg{color:var(--blue);}
.picker-tile.is-selected{
  background:var(--navy);
  border-color:var(--teal);
  color:#fff;
}
.picker-tile.is-selected svg{color:var(--teal);}

.picker-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
  font-size:.98rem;
}
.picker-toggle input{position:absolute;opacity:0;width:1px;height:1px;}
.picker-toggle-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--gray);
  color:var(--muted);
  flex-shrink:0;
  transition:background .15s ease,color .15s ease;
}
.picker-toggle input:checked + .picker-toggle-box{
  background:var(--teal);
  color:#fff;
}
.picker-toggle em{color:var(--muted);font-style:normal;}

.builder-result{
  margin-top:34px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--tint,#EEF3F8);
  border-radius:16px;
  padding:26px 28px;
}
.builder-result-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--navy);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
}
.builder-result-body p{margin:6px 0 16px;color:var(--ink);font-size:1.02rem;}
@media (max-width:560px){.builder-result{flex-direction:column;}}

/* ---- Alternatives comparison (groot bureau / freelancer / zelf doen / us) ---- */
.altcompare-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid rgba(var(--navy-rgb),.08);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
@media (max-width:980px){.altcompare-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.altcompare-grid{grid-template-columns:1fr;}}

.altcompare-col{
  padding:32px 26px;
  border-right:1px solid rgba(var(--navy-rgb),.08);
}
.altcompare-grid .altcompare-col:last-child{border-right:0;}
@media (max-width:980px){
  .altcompare-col:nth-child(2n){border-right:0;}
  .altcompare-col:nth-child(n+3){border-top:1px solid rgba(var(--navy-rgb),.08);}
}
@media (max-width:560px){
  .altcompare-col{border-right:0 !important;}
  .altcompare-col:not(:first-child){border-top:1px solid rgba(var(--navy-rgb),.08);}
}
.altcompare-label{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  margin-bottom:10px;
  font-size:1rem;
}
.altcompare-col p{color:var(--muted);font-size:.94rem;margin:0;}
.altcompare-col--us{background:var(--navy);}
.altcompare-col--us .altcompare-label{color:var(--teal);}
.altcompare-col--us .list-check{margin-top:2px;}
.altcompare-col--us .list-check li{color:var(--muted-dark);font-size:.94rem;padding-left:26px;margin-bottom:10px;}
.altcompare-col--us .list-check li::before{color:var(--teal);}

/* ---- Three pricing engagement models (Bouw / Beheer / Advies) ---- */
.pricing-models{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:900px){.pricing-models{grid-template-columns:1fr;}}

.price-model-card{
  background:#fff;
  border:1px solid rgba(var(--navy-rgb),.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 30px;
  position:relative;
}
.price-model-card--highlight{
  border-color:var(--teal);
  box-shadow:0 20px 48px rgba(var(--teal-rgb),.18);
}
.price-model-card .icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--gray);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);
  margin-bottom:14px;
}
.price-model-card--highlight .icon{background:var(--navy);color:var(--teal);}
.price-model-tag{
  display:inline-block;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--teal);
  margin-bottom:6px;
}
.price-model-card h3{margin-bottom:.4em;}
.price-model-card .list-check{margin-top:18px;}
.price-model-card .list-check li{font-size:.92rem;margin-bottom:8px;}

/* ---- Five price-determining factors ---- */
.factor-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  max-width:920px;
  margin:0 auto;
}
@media (max-width:700px){.factor-list{grid-template-columns:1fr;}}
.factor-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:22px 20px;
}
.factor-num{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--teal);
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.factor-item h3{font-size:1.05rem;margin-bottom:.3em;}
.factor-item p{color:var(--muted-dark);font-size:.92rem;margin:0;}