:root{
  --ha-dark:#183055; --ha-blue:#3884FF; --ha-blue-2:#A2C5FF; --ha-blue-3:#C2D9FF;
  --ha-white:#FFFFFF; --ha-grey:#9DAAB6; --ha-red:#FD1152;
  --ha-text:#183055; --ha-sub:#3d4a60; --ha-border:#E6ECF4; --ha-card:#F7FAFF;
  --price-col: 60px; /* prijskolom € + bedrag */
}

.notaris-offerte-page{font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#f5f7fb;min-height:100vh;margin:0;padding:0;}
.no-header .site-header,.no-header header,.no-header .us-header{display:none!important;}
.notaris-offerte-wrapper{max-width:1400px;width:95%;margin:20px auto;background:var(--ha-white);padding:30px;border-radius:10px;box-shadow:0 2px 12px rgba(24,48,85,.06);display:flex;gap:24px;align-items:flex-start;}
.main-content{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;}
.sidebar{flex:0 0 340px;max-width:340px;background:#f9fbff;border:1px solid var(--ha-border);border-radius:10px;padding:20px;position:sticky;top:20px;max-height:calc(100vh - 100px);overflow-y:auto;}

.klant-gegevens,.afspraak-kaart,.diensten-container,.sidebar,.overzicht-container{border:1px solid var(--ha-border);border-radius:10px;box-shadow:0 1px 2px rgba(24,48,85,.04);}
.klant-gegevens{width:100%;max-width:920px;background:#fbfdff;padding:20px;margin-bottom:16px;}
.afspraak-kaart{width:100%;max-width:920px;background:var(--ha-card);padding:16px 20px;margin-bottom:24px;}
.klant-gegevens h2,.afspraak-kaart h3,.diensten-container h3,.sidebar h3,.overzicht-container h3{position:relative;color:var(--ha-dark);margin:0 0 14px;font-weight:700;}
.klant-gegevens h2::after,.afspraak-kaart h3::after,.diensten-container h3::after,.sidebar h3::after,.overzicht-container h3::after{content:"";position:absolute;left:0;bottom:-8px;width:56px;height:3px;background:var(--ha-blue);border-radius:2px;}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.info-item{font-size:16px;color:var(--ha-sub);}
.info-item strong{color:var(--ha-dark);}
.afspraak-grid{margin-top:4px;}

.diensten-container{width:100%;max-width:920px;background:#fbfdff;padding:20px;}
.diensten-lijst .akte-row{
  display:grid;grid-template-columns:auto 1.6fr 2.1fr var(--price-col);
  align-items:start;gap:12px;padding:14px 0;border-bottom:1px solid var(--ha-border);color:var(--ha-sub);
}
.diensten-lijst .akte-row:last-child{border-bottom:none;}
.akte-check{margin-top:4px;}
.akte-name{font-weight:700;color:var(--ha-dark);}
.akte-desc{color:#6b7a96;font-size:14px;}
.price{
  width: var(--price-col);max-width: var(--price-col);
  display:grid;grid-template-columns:max-content 1fr;justify-items:end;align-items:baseline;gap:2px;white-space:nowrap;
  text-align:right;font-weight:700;color:var(--ha-blue);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-feature-settings:"tnum" 1,"lnum" 1;font-feature-settings:"tnum" 1,"lnum" 1;
}
.price .currency{display:inline-block;text-align:right;}
.price .amount{letter-spacing:0;}

.dropdown-container{position:relative;width:100%;margin-top:18px;}
.dropdown-toggle{width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--ha-border);border-radius:8px;background:#fff;text-align:left;cursor:pointer;transition:border-color .2s, box-shadow .2s, background .2s;}
.dropdown-toggle:hover{border-color:var(--ha-blue);box-shadow:0 0 0 3px rgba(56,132,255,.15);background:#f7fbff;}
.dropdown-list{display:none;position:absolute;left:0;right:0;top:calc(100% - 1px);background:#fff;border:1px solid var(--ha-border);border-top:0;border-radius:0 0 10px 10px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 6px 20px rgba(24,48,85,.12);}
.dropdown-list.show{display:block;}
.dropdown-list .aanvullend-row{
  display:grid;grid-template-columns:auto 1fr var(--price-col);
  align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f4fa;color:var(--ha-sub);cursor:pointer;text-align:left;
}
.dropdown-list .aanvullend-row:last-child{border-bottom:none;}
.dropdown-list .aanvullend-row input{margin-top:0;}
.dropdown-list .aanvullend-naam{overflow:hidden;text-overflow:ellipsis;}
.dropdown-list .price{justify-self:end;color:var(--ha-blue);} 

.sidebar h3{margin-bottom:10px;}
#selected-services .sel-row{display:grid;grid-template-columns:1fr var(--price-col);align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed #e8eef6;}
#selected-services .sel-row:last-child{border-bottom:none;}
#selected-services .sel-price{
  width: var(--price-col);max-width: var(--price-col);
  display:grid;grid-template-columns:max-content 1fr;justify-items:end;align-items:baseline;gap:2px;white-space:nowrap;
  font-weight:700;color:var(--ha-blue);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-feature-settings:"tnum" 1,"lnum" 1;font-feature-settings:"tnum" 1,"lnum" 1;
}
#selected-services .currency{display:inline-block;text-align:right;}

.total-row{display:grid;grid-template-columns:1fr var(--price-col);align-items:baseline;gap:12px;margin-top:10px;padding-top:10px;border-top:2px solid var(--ha-blue-3);}
.total-row .total-label{font-weight:800;color:var(--ha-dark);}
.total-row .total-price{
  width: var(--price-col);max-width: var(--price-col);
  display:grid;grid-template-columns:max-content 1fr;justify-items:end;align-items:baseline;gap:4px;white-space:nowrap;
  font-weight:900;color:var(--ha-blue);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-feature-settings:"tnum" 1,"lnum" 1;font-feature-settings:"tnum" 1,"lnum" 1;
}

.accept-button{margin-top:14px;background:#22c55e;color:#fff;border:0;padding:12px 30px;font-size:16px;border-radius:8px;width:100%;transition:transform .05s,background-color .2s, box-shadow .2s;}
.accept-button:hover{background:#16a34a;box-shadow:0 6px 16px rgba(34,197,94,.25);}
.accept-button:active{transform:translateY(1px);}

.locked .sidebar .accept-button{display:none;}
.overzicht-container{width:100%;max-width:920px;background:#fbfdff;padding:20px;margin-top:0;}
.overzicht-container .chosen-list{margin:0 0 10px 18px;padding:0;}
.overzicht-container .chosen-list li{margin:4px 0;color:var(--ha-sub);}
.overzicht-container .locked-total{margin-top:6px;}
.locked-note{margin-top:10px;color:var(--ha-grey);font-size:14px;}

.sidebar .diensten-container,.sidebar .diensten-lijst,.sidebar .dropdown-container,.sidebar input[type="checkbox"],.sidebar .akte-name,.sidebar .akte-desc{display:none!important;}

@media (max-width:1100px){
  .notaris-offerte-wrapper{flex-direction:column;padding:16px;}
  .sidebar{position:static;width:100%;max-width:100%;max-height:none;}
  .klant-gegevens,.afspraak-kaart,.diensten-container,.overzicht-container{max-width:100%;margin-bottom:16px;}
  .info-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .notaris-offerte-wrapper{padding:12px;}
  .klant-gegevens,.afspraak-kaart,.diensten-container,.sidebar,.overzicht-container{padding:16px;}
}