.nbp-booking { max-width: 980px; margin: 0 auto; }
.nbp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nbp-field label { display:block; font-weight:600; margin-bottom:6px; }
.nbp-field select, .nbp-field input { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }

.nbp-section { margin-top: 18px; }
.nbp-section-title { font-weight:700; margin-bottom: 10px; }

.nbp-staff-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nbp-staff { border:1px solid #e6e6e6; border-radius:14px; padding:10px; cursor:pointer; background:#fff; }
.nbp-staff:hover { border-color:#bbb; }
.nbp-staff.is-selected { outline: 2px solid #222; }
.nbp-staff img { width:100%; height:160px; object-fit:cover; border-radius:12px; background:#f3f3f3; }
.nbp-staff .name { margin-top:8px; font-weight:700; }
.nbp-staff .code { opacity:0.7; font-size: 13px; }

.nbp-slots { display:flex; flex-wrap:wrap; gap:10px; }
.nbp-slot { padding:10px 12px; border-radius:12px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.nbp-slot.is-disabled { opacity:0.5; cursor:not-allowed; }
.nbp-slot.is-selected { outline:2px solid #222; }

.nbp-actions { margin-top: 12px; display:flex; align-items:center; gap: 12px; }
#nbp_submit { padding: 12px 16px; border-radius: 12px; border:0; cursor:pointer; }
#nbp_submit:disabled { opacity:0.5; cursor:not-allowed; }
.nbp-msg { font-weight:600; }
@media (max-width: 900px){
  .nbp-grid { grid-template-columns: 1fr; }
  .nbp-staff-grid { grid-template-columns: repeat(2, 1fr); }
}