.bj-icon {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 2.75;
  fill: currentColor;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
  flex: none;
}

.bj-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bj-space-2);
  border: 0;
  border-radius: var(--bj-radius-pill);
  font-family: var(--bj-font-display);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--bj-transition), background-color var(--bj-transition), box-shadow var(--bj-transition);
}
.bj-btn:disabled { opacity: .55; cursor: not-allowed; }

.bj-btn-primary {
  background: var(--bj-orange);
  color: var(--bj-cream);
  font-size: 18px;
  padding: 16px 38px;
  box-shadow: var(--bj-shadow-cta);
}
.bj-btn-primary:hover:not(:disabled) { background: var(--bj-orange-hover); color: var(--bj-cream); }
.bj-btn-primary:active:not(:disabled) { background: var(--bj-orange-active); }

.bj-btn-gold { background: var(--bj-gold); color: var(--bj-charcoal); padding: 9px 20px; }
.bj-btn-green { background: var(--bj-green); color: var(--bj-cream); padding: 9px 20px; }
.bj-btn-quiet { background: var(--bj-chip); color: var(--bj-charcoal); padding: 9px 20px; }

.bj-card {
  background: var(--bj-card);
  border-radius: var(--bj-radius-signature);
  box-shadow: var(--bj-shadow-rest);
  transition: transform var(--bj-transition), box-shadow var(--bj-transition);
}
.bj-card:hover { transform: translateY(-4px); box-shadow: var(--bj-shadow-raised); }

.bj-panel {
  background: #fff;
  border-radius: var(--bj-radius-card);
  box-shadow: var(--bj-shadow-rest);
}

.bj-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bj-space-1);
  background: var(--bj-chip);
  border-radius: var(--bj-radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bj-charcoal);
}

.bj-status { border-radius: var(--bj-radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bj-status-new { background: var(--bj-status-new); color: var(--bj-cream); }
.bj-status-confirmed { background: var(--bj-status-confirmed); color: var(--bj-charcoal); }
.bj-status-preparing { background: var(--bj-status-preparing); color: var(--bj-cream); }
.bj-status-done { background: var(--bj-status-done); color: var(--bj-cream); }

/* Brand panel shown where an item has no photograph, cycling by index. */
.bj-ground { display: grid; place-items: center; width: 100%; height: 100%; }
.bj-ground-0 { background: var(--bj-charcoal); }
.bj-ground-1 { background: var(--bj-coffee); }
.bj-ground-2 { background: var(--bj-green); }
.bj-ground-3 { background: var(--bj-orange); }
.bj-ground .bj-icon { width: 78px; height: 78px; color: rgba(246, 241, 230, .32); }

/* Validation, driven by the data-val-* attributes ASP.NET emits. */
.input-validation-error { border-color: var(--bj-orange) !important; }
.field-validation-error { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bj-orange); }
.field-validation-valid { display: none; }

/* All modal headers reserve a top-right close control. */
.modal .modal-content .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-right: 64px;
  background-color: var(--bj-modal-header-bg, var(--bj-cream));
}
.modal .modal-content .modal-header [data-modal-close] {
  position: absolute;
  top: var(--bj-modal-close-top, 16px);
  right: var(--bj-modal-close-right, 16px);
  margin: 0;
  flex: none;
}
.bj-item-dialog {
  --bj-modal-close-top: 4px;
  --bj-modal-close-right: 0px;
}
.bj-order-dialog {
  --bj-modal-header-bg: var(--bj-charcoal);
  --bj-modal-close-top: 26px;
  --bj-modal-close-right: 28px;
}