/* ============================================================
   New booking slide-over. Opens over any page; the page behind
   keeps its scroll and its state.
   Colours come from tokens.css — the job-type semantics
   (delivery rust / exchange amber / collection green) drive the
   whole panel so the dispatcher can see what they are booking
   without reading a word.
   ============================================================ */

/* Above the app's own overlays (drawer 820-851, modals and the omnibox
   dropdown 900) -- a booking panel that opens underneath the setup drawer
   is worse than no panel. Nothing in the app should sit over this. */
.nb-root{position:fixed;inset:0;z-index:950;pointer-events:none}
/* Belt and braces: if this stylesheet ever fails to load, an unstyled
   panel would otherwise unfurl as a wall of form fields at the top of the
   page. The attribute selector needs no CSS file to be meaningful... but it
   lives here too, so keep the inline guard in the component in step. */
.nb-root[hidden]{display:none}
.nb-root .nb-backdrop{position:absolute;inset:0;background:#12181D66;opacity:0;transition:opacity .2s}
.nb-root .nb-panel{
  position:absolute;top:0;right:0;bottom:0;width:520px;max-width:94vw;
  background:var(--paper);box-shadow:-16px 0 40px #12181D33;
  transform:translateX(105%);transition:transform .22s ease;
  overflow-y:auto;padding:22px 24px 40px;
  font-family:var(--font-body);color:var(--ink);
}
.nb-root.open{pointer-events:auto}
.nb-root.open .nb-backdrop{opacity:1}
.nb-root.open .nb-panel{transform:none}

.nb-panel h2{font:600 17px var(--font-display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.nb-close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:19px;color:var(--muted);cursor:pointer;line-height:1}
.nb-close:hover{color:var(--ink)}

/* type selector — the panel's accent follows it */
.nb-typeseg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.nb-typeseg button{flex:1;border:0;background:var(--paper);padding:11px 0;font:600 13.5px var(--font-body);color:var(--muted);cursor:pointer}
.nb-typeseg button+button{border-left:1px solid var(--line)}
.nb-typeseg button:hover{background:#F7F8F7}
.nb-typeseg .nb-t-delivery.on{background:var(--job-delivery);color:#fff}
.nb-typeseg .nb-t-exchange.on{background:var(--job-exchange);color:#fff}
.nb-typeseg .nb-t-collection.on{background:var(--job-collection);color:#fff}

.nb-f{margin-bottom:14px;position:relative}
.nb-f>label{display:block;font:600 10.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.nb-panel input[type=text],.nb-panel input[type=date],.nb-panel input[type=time],.nb-panel select{
  border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:9px 11px;font:14px var(--font-body);color:var(--ink);
}
.nb-panel input[type=text]{width:100%}
.nb-panel input:focus,.nb-panel select:focus{outline:2px solid var(--yellow);outline-offset:1px}

/* customer autocomplete */
.nb-drop{position:absolute;left:0;right:0;z-index:3;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;background:var(--paper);box-shadow:0 8px 20px #12181D1F;max-height:230px;overflow-y:auto}
.nb-drop div{padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.nb-drop div:hover{background:#F7F8F7}
.nb-hist{color:var(--muted);font-size:12px}

/* which skip is out there */
.nb-skips{display:flex;flex-direction:column;gap:6px}
.nb-skips button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:8px 10px;cursor:pointer;font:13px var(--font-body);color:var(--ink)}
.nb-skips button:hover{background:#F7F8F7}
.nb-skips button.on{border-color:var(--job-collection);background:var(--job-collection-bg)}
.nb-skips em{margin-left:auto;font-style:normal;color:var(--muted);font-size:12px;white-space:nowrap}
.nb-size{font:500 11.5px var(--font-mono);background:var(--graphite);color:var(--yellow);border-radius:5px;padding:2px 6px}

/* address verification */
.nb-geo{display:block;font-size:12.5px;margin-top:6px;color:var(--job-collection);line-height:1.4}
.nb-geo.warn{color:var(--job-exchange)}
.nb-geo.checking{color:var(--muted)}
.nb-geo .mono{font-family:var(--font-mono)}

.nb-link{border:0;background:none;color:var(--muted);font:600 12.5px var(--font-body);cursor:pointer;text-decoration:underline dotted;padding:0}
.nb-link:hover{color:var(--ink)}
.nb-billing{margin-top:9px}
.nb-hint{color:var(--muted);font-size:12px;margin:6px 0 0;line-height:1.4}

.nb-sizes{display:flex;gap:7px;flex-wrap:wrap}
.nb-sizes button{border:1px solid var(--line);border-radius:8px;background:var(--paper);font:500 13px var(--font-mono);padding:8px 13px;cursor:pointer;color:var(--ink)}
.nb-sizes button.on{background:var(--graphite);border-color:var(--graphite);color:var(--yellow)}

.nb-dates{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.nb-dates>button:not(.nb-link){border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:7px 15px;font:600 12.5px var(--font-body);color:var(--muted);cursor:pointer}
.nb-dates>button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nb-window{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.nb-window span{color:var(--muted);font-size:12.5px}

.nb-payrow{display:flex;gap:8px;flex-wrap:wrap}
.nb-payrow .nb-phone{flex:1;min-width:130px}
.nb-payrow .nb-money{width:110px;font-family:var(--font-mono)}
.nb-permit{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:9px;color:var(--ink)}

/* Permit window, shown only once the permit tick is on. */
.nb-permitdates{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.nb-permitdates>label{font:600 10.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nb-permitdates .nb-hint{flex-basis:100%;margin-top:2px}
.nb-permitdates .nb-hint.warn{color:var(--job-exchange)}

/* Everything the quick booking doesn't need: two columns of label-over-field,
   with the notes box spanning both. Only opened when a call warrants it, so it
   is allowed to be denser than the fields above. */
.nb-more{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.nb-more .nb-pair{display:flex;flex-direction:column;gap:4px;min-width:0}
.nb-more .nb-wide{grid-column:1 / -1}
.nb-more label{font:600 10.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nb-more select,.nb-more input[type=text]{width:100%}
.nb-more textarea{
  border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:9px 11px;font:14px var(--font-body);color:var(--ink);width:100%;resize:vertical;
}
.nb-more textarea:focus{outline:2px solid var(--yellow);outline-offset:1px}
.nb-flags{grid-column:1 / -1;display:flex;flex-direction:column;gap:7px}
.nb-flags label{display:flex;gap:8px;align-items:center;font:13px var(--font-body);
  letter-spacing:normal;text-transform:none;color:var(--ink)}
@media (max-width:560px){.nb-more{grid-template-columns:1fr}}

.nb-error{background:var(--job-delivery-bg);color:var(--job-delivery);border-radius:8px;padding:9px 12px;font-size:13px;margin:0 0 12px}

.nb-cta{width:100%;margin-top:4px;background:var(--yellow);color:var(--yellow-ink);border:0;border-radius:10px;padding:13px 0;font:700 14.5px var(--font-body);cursor:pointer}
.nb-cta:disabled{opacity:.6;cursor:progress}
.nb-cta:hover:not(:disabled){filter:brightness(1.04)}
.nb-after{color:var(--muted);font-size:12.5px;text-align:center;margin:8px 0 0}

@media (max-width:560px){
  .nb-root .nb-panel{width:100%;padding:18px 16px 32px}
}

/* The booking-time seating question, shown only when the chosen waste type
   can actually contain a sofa. */
.nb-seating{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);}