/* ─────────────────────────────────────────────
   BNB Catering — Public Stylesheet
   Aesthetic: NYC Deli editorial — cream, charcoal, poppy red accent
   Font: Playfair Display (headings) + DM Sans (body)
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bnb-cream:     #faf7f2;
  --bnb-parchment: #f0ead8;
  --bnb-charcoal:  #1c1c1c;
  --bnb-ink:       #2e2e2e;
  --bnb-red:       #c8322b;
  --bnb-red-dk:    #a3201a;
  --bnb-gold:      #c9973a;
  --bnb-muted:     #7a7060;
  --bnb-border:    #ddd5c0;
  --bnb-white:     #ffffff;
  --bnb-radius:    6px;
  --bnb-shadow:    0 2px 12px rgba(0,0,0,.10);
  --bnb-shadow-lg: 0 8px 32px rgba(0,0,0,.14);
}

/* ── Reset scope ── */
.bnb-wrap *, .bnb-wrap *::before, .bnb-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.bnb-wrap { font-family: 'DM Sans', sans-serif; color: var(--bnb-ink); background: var(--bnb-cream); }

/* ── Typography ── */
.bnb-wrap h1,.bnb-wrap h2,.bnb-wrap h3 { font-family:'Playfair Display',serif; color:var(--bnb-charcoal); }
.bnb-wrap h1 { font-size:2.4rem; font-weight:900; letter-spacing:-.5px; }
.bnb-wrap h2 { font-size:1.6rem; font-weight:700; }
.bnb-wrap h3 { font-size:1.15rem; font-weight:700; }

/* ── Progress bar ── */
.bnb-progress { display:flex; gap:0; margin-bottom:2.5rem; border-radius:var(--bnb-radius); overflow:hidden; }
.bnb-progress__step {
  flex:1; padding:10px 6px; text-align:center; font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; background:var(--bnb-parchment);
  color:var(--bnb-muted); border-right:1px solid var(--bnb-border); transition:all .3s;
}
.bnb-progress__step:last-child { border-right:none; }
.bnb-progress__step.is-done  { background:var(--bnb-charcoal); color:#fff; }
.bnb-progress__step.is-active{ background:var(--bnb-red); color:#fff; }

/* ── Form steps ── */
.bnb-step { display:none; animation:bnbFadeIn .3s ease; }
.bnb-step.is-active { display:block; }
@keyframes bnbFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Section header ── */
.bnb-step__header {
  padding-bottom:1rem; margin-bottom:1.8rem;
  border-bottom:2px solid var(--bnb-charcoal);
}
.bnb-step__header p { color:var(--bnb-muted); margin-top:.4rem; }

/* ── Grid layout ── */
.bnb-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.bnb-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media(max-width:640px){ .bnb-grid-2,.bnb-grid-3 { grid-template-columns:1fr; } }

/* ── Form fields ── */
.bnb-field { display:flex; flex-direction:column; gap:.4rem; }
.bnb-field label { font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--bnb-ink); }
.bnb-field input, .bnb-field select, .bnb-field textarea {
  padding:11px 14px; border:1.5px solid var(--bnb-border); border-radius:var(--bnb-radius);
  font-family:'DM Sans',sans-serif; font-size:.95rem; background:var(--bnb-white);
  transition:border-color .2s, box-shadow .2s; width:100%;
}
.bnb-field input:focus, .bnb-field select:focus, .bnb-field textarea:focus {
  outline:none; border-color:var(--bnb-charcoal); box-shadow:0 0 0 3px rgba(28,28,28,.08);
}
.bnb-field--error input, .bnb-field--error select { border-color:var(--bnb-red); }
.bnb-field__error { font-size:.78rem; color:var(--bnb-red); margin-top:2px; display:none; }
.bnb-field--error .bnb-field__error { display:block; }

/* ── Toggle: pickup / delivery ── */
.bnb-toggle { display:flex; border:1.5px solid var(--bnb-border); border-radius:var(--bnb-radius); overflow:hidden; }
.bnb-toggle input[type=radio] { display:none; }
.bnb-toggle label {
  flex:1; padding:12px 10px; text-align:center; cursor:pointer;
  font-weight:600; font-size:.9rem; transition:all .2s; color:var(--bnb-muted);
  border-right:1.5px solid var(--bnb-border);
}
.bnb-toggle label:last-of-type { border-right:none; }
.bnb-toggle input:checked + label { background:var(--bnb-charcoal); color:#fff; }

/* ── Date / Time picker row ── */
.bnb-datetime { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:480px){ .bnb-datetime { grid-template-columns:1fr; } }

/* ── Menu category tabs ── */
.bnb-cat-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.bnb-cat-tab {
  padding:8px 18px; border:1.5px solid var(--bnb-border); border-radius:20px;
  font-size:.82rem; font-weight:600; cursor:pointer; background:var(--bnb-white);
  color:var(--bnb-ink); transition:all .2s; white-space:nowrap;
}
.bnb-cat-tab.is-active, .bnb-cat-tab:hover { background:var(--bnb-charcoal); color:#fff; border-color:var(--bnb-charcoal); }

/* ── Menu item cards ── */
.bnb-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; }
.bnb-item-card {
  background:var(--bnb-white); border:1.5px solid var(--bnb-border);
  border-radius:var(--bnb-radius); padding:1.2rem; transition:box-shadow .2s, border-color .2s;
  position:relative; cursor:pointer;
}
.bnb-item-card:hover { box-shadow:var(--bnb-shadow); border-color:var(--bnb-charcoal); }
.bnb-item-card.is-selected { border-color:var(--bnb-red); box-shadow:0 0 0 2px var(--bnb-red); }
.bnb-item-card__name { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.bnb-item-card__desc { font-size:.82rem; color:var(--bnb-muted); line-height:1.45; margin-bottom:.8rem; }
.bnb-item-card__meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.bnb-item-card__price { font-size:1.05rem; font-weight:600; color:var(--bnb-charcoal); }
.bnb-item-card__price em { font-style:normal; font-size:.72rem; color:var(--bnb-muted); display:block; }
.bnb-item-card__serves { font-size:.75rem; color:var(--bnb-muted); background:var(--bnb-parchment); padding:3px 8px; border-radius:12px; }

/* ── Qty controls ── */
.bnb-qty { display:flex; align-items:center; gap:.5rem; margin-top:.8rem; }
.bnb-qty__btn {
  width:30px; height:30px; border:1.5px solid var(--bnb-border); border-radius:50%;
  background:var(--bnb-white); font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.bnb-qty__btn:hover { background:var(--bnb-charcoal); color:#fff; border-color:var(--bnb-charcoal); }
.bnb-qty__val { font-weight:600; min-width:24px; text-align:center; }

/* ── Add to order button ── */
.bnb-add-btn {
  width:100%; margin-top:.9rem; padding:9px; border:none; border-radius:var(--bnb-radius);
  background:var(--bnb-red); color:#fff; font-family:'DM Sans',sans-serif;
  font-size:.85rem; font-weight:600; cursor:pointer; transition:background .2s;
}
.bnb-add-btn:hover { background:var(--bnb-red-dk); }

/* ── Modifiers ── */
.bnb-modifiers { margin-top:.8rem; border-top:1px solid var(--bnb-border); padding-top:.8rem; }
.bnb-modifiers h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bnb-muted); margin-bottom:.5rem; }
.bnb-mod-options { display:flex; flex-wrap:wrap; gap:.4rem; }
.bnb-mod-options label { cursor:pointer; }
.bnb-mod-options input { display:none; }
.bnb-mod-pill {
  padding:4px 12px; border:1.5px solid var(--bnb-border); border-radius:14px;
  font-size:.78rem; font-weight:500; transition:all .2s; display:block;
}
.bnb-mod-options input:checked + .bnb-mod-pill { background:var(--bnb-charcoal); color:#fff; border-color:var(--bnb-charcoal); }

/* ── Order summary sidebar ── */
.bnb-layout { display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; }
@media(max-width:860px){ .bnb-layout { grid-template-columns:1fr; } }

.bnb-summary {
  background:var(--bnb-white); border:1.5px solid var(--bnb-border);
  border-radius:var(--bnb-radius); padding:1.4rem; position:sticky; top:24px;
}
.bnb-summary h3 { font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--bnb-border); }
.bnb-summary__empty { color:var(--bnb-muted); font-size:.88rem; text-align:center; padding:1.5rem 0; }
.bnb-cart-item { display:flex; justify-content:space-between; gap:.5rem; padding:.55rem 0; border-bottom:1px solid var(--bnb-parchment); font-size:.88rem; }
.bnb-cart-item__name { flex:1; font-weight:500; }
.bnb-cart-item__qty  { color:var(--bnb-muted); white-space:nowrap; }
.bnb-cart-item__price{ font-weight:600; white-space:nowrap; }
.bnb-cart-item__remove { cursor:pointer; color:var(--bnb-red); font-size:.75rem; padding:0 4px; }
.bnb-summary__totals { margin-top:1rem; }
.bnb-summary__line { display:flex; justify-content:space-between; font-size:.88rem; padding:.3rem 0; color:var(--bnb-muted); }
.bnb-summary__line--total { font-size:1.1rem; font-weight:600; color:var(--bnb-charcoal); border-top:1.5px solid var(--bnb-charcoal); margin-top:.5rem; padding-top:.5rem; }
.bnb-summary__credits { background:var(--bnb-parchment); border-radius:var(--bnb-radius); padding:.7rem; margin-top:.8rem; font-size:.82rem; }
.bnb-summary__credits strong { color:var(--bnb-gold); }

/* ── Buttons ── */
.bnb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:13px 28px; border-radius:var(--bnb-radius); font-family:'DM Sans',sans-serif;
  font-size:.95rem; font-weight:600; cursor:pointer; border:none; transition:all .2s;
  text-decoration:none;
}
.bnb-btn--primary { background:var(--bnb-charcoal); color:#fff; }
.bnb-btn--primary:hover { background:#000; }
.bnb-btn--secondary { background:transparent; color:var(--bnb-charcoal); border:1.5px solid var(--bnb-charcoal); }
.bnb-btn--secondary:hover { background:var(--bnb-charcoal); color:#fff; }
.bnb-btn--red { background:var(--bnb-red); color:#fff; }
.bnb-btn--red:hover { background:var(--bnb-red-dk); }
.bnb-btn--full { width:100%; }
.bnb-btn:disabled { opacity:.45; cursor:not-allowed; }

.bnb-btn-row { display:flex; gap:1rem; margin-top:2rem; }
@media(max-width:480px){ .bnb-btn-row { flex-direction:column; } }

/* ── Credits apply row ── */
.bnb-credits-apply { display:flex; align-items:center; gap:.8rem; padding:.9rem; background:var(--bnb-parchment); border-radius:var(--bnb-radius); margin-top:1rem; }
.bnb-credits-apply input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--bnb-charcoal); }
.bnb-credits-apply label { font-size:.9rem; font-weight:500; cursor:pointer; }

/* ── Alerts ── */
.bnb-alert { padding:.9rem 1rem; border-radius:var(--bnb-radius); font-size:.88rem; margin-bottom:1rem; }
.bnb-alert--error   { background:#fde8e8; color:#8b0000; border:1px solid #f5c6c6; }
.bnb-alert--success { background:#e6f4ea; color:#1b5e20; border:1px solid #c3e6cb; }
.bnb-alert--info    { background:#e8f0fe; color:#1a3a6b; border:1px solid #c5d8fd; }

/* ── Confirmation page ── */
.bnb-confirmation {
  max-width:560px; margin:3rem auto; background:var(--bnb-white);
  border:1.5px solid var(--bnb-border); border-radius:var(--bnb-radius);
  padding:2.5rem; text-align:center; box-shadow:var(--bnb-shadow-lg);
}
.bnb-confirmation__icon { font-size:3rem; margin-bottom:.8rem; }
.bnb-confirmation__number {
  display:inline-block; background:var(--bnb-parchment); border:2px dashed var(--bnb-border);
  border-radius:var(--bnb-radius); padding:10px 24px; font-size:1.6rem;
  font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.08em;
  color:var(--bnb-red); margin:1rem 0;
}
.bnb-confirmation__detail { font-size:.9rem; color:var(--bnb-muted); margin-top:.4rem; }

/* ── Referral banner ── */
.bnb-referral-banner {
  background:var(--bnb-charcoal); color:#fff; border-radius:var(--bnb-radius);
  padding:1rem 1.2rem; margin-top:1.5rem; display:flex; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.bnb-referral-banner strong { color:var(--bnb-gold); }
.bnb-referral-code { font-family:monospace; font-size:1.1rem; background:rgba(255,255,255,.12); padding:4px 12px; border-radius:4px; letter-spacing:.1em; }

/* ── Loading spinner ── */
.bnb-spinner { display:inline-block; width:20px; height:20px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:bnbSpin .7s linear infinite; }
@keyframes bnbSpin { to{ transform:rotate(360deg); } }

/* ── Admin badges ── */
.bnb-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.bnb-badge--paid      { background:#d4edda; color:#155724; }
.bnb-badge--unpaid    { background:#fff3cd; color:#856404; }
.bnb-badge--refunded  { background:#f8d7da; color:#721c24; }
.bnb-badge--confirmed { background:#cce5ff; color:#004085; }
.bnb-badge--cancelled { background:#f8d7da; color:#721c24; }
.bnb-badge--active    { background:#d4edda; color:#155724; }

/* ── Referral code input ── */
.bnb-referral-field { display:flex; gap:.5rem; }
.bnb-referral-field input { flex:1; }
.bnb-referral-valid   { color:green; font-size:.82rem; margin-top:.3rem; }
.bnb-referral-invalid { color:var(--bnb-red); font-size:.82rem; margin-top:.3rem; }