.dp-body{
  margin:0;
  min-height:100vh;
  background:#020b16;
  color:#e8f3ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid #102235;
  background:linear-gradient(90deg,#041120,#071b32);
}
.topbar .brand .logo{
  height:32px;
}
.topbar .title{
  font-size:18px;
  font-weight:600;
}
.topbar .title .sub{
  font-size:14px;
  color:#9ec3d9;
}

.page{
  max-width:1200px;
  margin:16px auto 40px;
  padding:0 16px;
}

.layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.step{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.step--left{
  width:320px;
  flex:0 0 auto;
}
.step--right{
  flex:1 1 auto;
}

.step-title{
  margin:0 0 8px 0;
  font-size:18px;
}
.step-meta{
  font-size:12px;
  color:#9ec3d9;
}

.step-card{
  background:#0f2430;
  border-radius:12px;
  border:1px solid #173746;
  padding:12px;
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}

.form label{
  display:block;
  font-size:12px;
  color:#9ec3d9;
  margin:8px 0 4px;
}
.form input,
.form select{
  width:100%;
  box-sizing:border-box;
  border-radius:8px;
  border:1px solid #1d3b49;
  background:#0b1e29;
  padding:9px 10px;
  color:#e8f3ff;
}
.form input::placeholder{
  color:#6c8ba1;
}
.hint{
  font-size:11px;
  color:#9ec3d9;
  margin:8px 0 0 0;
}

.info{
  margin-top:12px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(13,110,253,0.08);
  font-size:12px;
}
.info--small{
  font-size:11px;
}

.slots-panel{
  background:#040d16;
  border-radius:12px;
  border:1px solid #173746;
  padding:12px;
  min-height:260px;
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}
.slots{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.slot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #0f3a3a;
  background:#051b1b;
  font-size:13px;
  cursor:default;
  opacity:0.7;
}
.slot.open{
  cursor:pointer;
  background:#05251d;
  border-color:#0b7b55;
  opacity:1;
}
.slot.open:hover{
  box-shadow:0 0 0 1px rgba(13,110,253,0.18);
  transform:translateY(-1px);
}
.slot.full{
  background:#2a1010;
  border-color:#a83232;
}
.slot-time{
  font-weight:600;
}
.slot-meta{
  font-size:11px;
  color:#9ec3d9;
}

/* Booking dialog */
.booking-dialog::backdrop{
  background:rgba(0,0,0,0.6);
}
.booking-dialog{
  border:none;
  border-radius:16px;
  padding:0;
  max-width:520px;
  width:90%;
  background:#071623;
  color:#e8f3ff;
}
.book-form{
  padding:16px 18px 14px;
}
.book-form__title{
  margin:0 0 10px 0;
  font-size:15px;
  font-weight:600;
  padding-bottom:6px;
  border-bottom:1px solid #173746;
}
.book-form label{
  display:block;
  font-size:12px;
  color:#9ec3d9;
  margin:8px 0 4px;
}
.book-form input{
  width:100%;
  box-sizing:border-box;
  border-radius:8px;
  border:1px solid #1d3b49;
  background:#0b1e29;
  padding:8px 10px;
  color:#e8f3ff;
}
.detach-row{
  margin-top:10px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(13,110,253,0.08);
}
.checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.checkbox-label input[type="checkbox"]{
  width:auto;
}
.detach-time-row{
  margin-top:8px;
}
.detach-time-row input[type="time"]{
  width:auto;
  min-width:120px;
}
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}
.btn{
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  border:none;
  cursor:pointer;
}
.btn-primary{
  background:#0d6efd;
  color:white;
}
.btn-primary:hover{
  background:#0b5ed7;
}
.btn-secondary{
  background:transparent;
  color:#e8f3ff;
  border:1px solid #39536a;
}
.btn-secondary:hover{
  background:#0b1e29;
}

/* Responsive */
@media (max-width: 900px){
  .layout{
    flex-direction:column;
  }
  .step--left{
    width:100%;
  }
}


/* Bevestigingskaart onder aan de boekingspagina */
.confirm-card {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: #0b1f3b;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-size: 0.9rem;
}
.confirm-card p {
  margin: 0.25rem 0;
}
.confirm-card .hint {
  opacity: 0.8;
}
.step--full {
  grid-column: 1 / -1;
}

.confirm-dialog-content p{
  margin:4px 0;
}
.form-actions--center{
  justify-content:center;
}