/* ==========================================================================
   Pickup window picker (booking module). Uses the site's colour tokens,
   so it follows whatever palette styles.css sets.
   ========================================================================== */
.nb-picker {
  margin: 4px 0 16px;
  padding: 16px;
  background: var(--cream, #F4EEE8);
  border: 1px solid rgba(20, 17, 17, .1);
  border-radius: var(--radius, 14px);
}
.nb-picker[hidden] { display: none !important; }
.nb-hide { display: none !important; }
.row.nb-solo { grid-template-columns: 1fr; }

.nb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.nb-title { font-weight: 700; color: var(--ink, #141111); }
.nb-sub { font-size: .82rem; color: var(--ink-soft, #564B46); }

.nb-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.nb-quick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  text-align: left;
  font: inherit; font-size: .88rem; line-height: 1.3;
  color: var(--ink, #141111);
  background: #fff;
  border: 1px solid rgba(20, 17, 17, .15);
  border-radius: 10px;
  cursor: pointer;
}
.nb-quick button small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #564B46); }
.nb-quick button em { font-style: normal; font-weight: 700; color: var(--rose-deep, #8F3A5B); }
.nb-quick button:hover { border-color: var(--rose-deep, #8F3A5B); }
.nb-quick button.is-selected { border-color: var(--rose-deep, #8F3A5B); box-shadow: 0 0 0 2px rgba(143, 58, 91, .18); }

.nb-days {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
}
.nb-day {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  min-width: 58px;
  padding: 7px 6px 6px;
  font: inherit; line-height: 1.15;
  color: var(--ink, #141111);
  background: #fff;
  border: 1px solid rgba(20, 17, 17, .12);
  border-radius: 10px;
  cursor: pointer;
  scroll-snap-align: start;
}
.nb-day .nb-dow { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #564B46); }
.nb-day .nb-dnum { font-size: 1.15rem; font-weight: 700; }
.nb-day .nb-tag { margin-top: 3px; font-size: .68rem; font-weight: 600; color: var(--ink-soft, #564B46); }
.nb-day .nb-tag.is-rush { color: var(--rose-deep, #8F3A5B); }
.nb-day:hover:not(:disabled) { border-color: var(--rose-deep, #8F3A5B); }
.nb-day.is-selected { background: var(--ink, #141111); border-color: var(--ink, #141111); color: #fff; }
.nb-day.is-selected .nb-dow,
.nb-day.is-selected .nb-tag { color: var(--rose, #F0B5CE); }
.nb-day:disabled { opacity: .45; cursor: default; }

.nb-windows { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 4px; }
.nb-win {
  padding: 8px 4px;
  font: inherit; font-size: .88rem;
  color: var(--ink, #141111);
  background: #fff;
  border: 1px solid rgba(20, 17, 17, .12);
  border-radius: 8px;
  cursor: pointer;
}
.nb-win:hover { border-color: var(--rose-deep, #8F3A5B); }
.nb-win.is-selected { background: var(--rose, #F0B5CE); border-color: var(--rose-deep, #8F3A5B); font-weight: 700; }
.nb-empty { grid-column: 1 / -1; margin: 4px 0; font-size: .88rem; color: var(--ink-soft, #564B46); }

.nb-status { margin: 12px 0 0; font-size: .88rem; color: var(--ink-soft, #564B46); }
.nb-status.is-held { color: var(--ink, #141111); }
.nb-status.is-held::before { content: "✓ "; color: var(--rose-deep, #8F3A5B); font-weight: 700; }
.nb-status.is-error { color: #a12a2a; }

.nb-picker.is-busy .nb-days,
.nb-picker.is-busy .nb-windows,
.nb-picker.is-busy .nb-quick { opacity: .6; pointer-events: none; }

@media (max-width: 520px) {
  .nb-quick { grid-template-columns: 1fr; }
}