/*
 * Let's Entertain U — Application styles
 * Imports the modular design tokens and adds all component-specific styles.
 * Previously these were inline styles — all moved here for clean separation.
 */

/* ===== CSS Variables already defined by imported modules =====
 * fonts.css    → --font-display, --font-body, --fs-*, --fw-*
 * colors.css   → --red-*, --blue-*, --green-*, --purple-*, --gold-*, --ink-*, etc.
 * typography.css → --lh-*, --ls-*
 * spacing.css  → --space-*, --container-*
 * effects.css  → --radius-*, --border-width, --shadow-*, --ease-*, --dur-*
 * ============================================================ */

@import url('fonts.css');
@import url('colors.css');
@import url('typography.css');
@import url('spacing.css');
@import url('effects.css');

/* ============================================================
   RESET & BASE
   ============================================================ */
   
*, *::before, *::after { box-sizing: border-box; }

#booking-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,15,15,0.85);
  display:flex; align-items:center; justify-content:center;
}
.booking-box{
  background:#fff; padding:32px 28px; border-radius:16px;
  text-align:center; max-width:360px; width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.booking-box h3{margin:16px 0 8px; font-size:18px;}
.booking-box p{font-size:13px; color:#666; line-height:1.4;}
.bf-error-msg{
  font-weight: normal;
}
button.close{
  flex: 1;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
   border-radius: 999px;
  background: transparent;
  color: #ffffff;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
  white-space: nowrap;
width:60px;
height:35px;
max-width:60px;
max-height:35px;
background: var(--purple-500);
}







#processing-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,15,15,0.85);
  display:flex; align-items:center; justify-content:center;
}
.processing-box{
  background:#fff; padding:32px 28px; border-radius:16px;
  text-align:center; max-width:360px; width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.processing-box h3{margin:16px 0 8px; font-size:18px;}
.processing-box p{font-size:13px; color:#666; line-height:1.4;}
.spinner{
  width:40px; height:40px; margin:0 auto;
  border:4px solid #eee; border-top-color:#ff2e8b;
  border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LAYOUT — Booking wrapper & card
   ============================================================ */
.bf-wrapper {
  min-height: 100vh;
  width: 100%;
  background: var(--ink-900);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
}

.bf-card {
  width: 100%;
  max-width: 760px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.bf-marquee-bar {
  height: 4px;
  width: 100%;
  background: var(--grad-marquee);
}

.bf-section {
  padding: 36px 48px 40px;
}

/* ============================================================
   HEADER — Step indicator + title
   ============================================================ */
.bf-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.bf-step-eyebrow {
  font-size: var(--fs-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--purple-500);
}

.bf-step-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
  color: var(--ink-900);
  margin: 2px 0 0;
  line-height: 1;
}

/* ============================================================
   PROGRESS NAV — Step circles with connectors
   ============================================================ */
.bf-progress {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 32px;
}

.bf-step-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  flex-shrink: 0;
}

.bf-step-circle {
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  transition: all var(--dur-base) ease;
  flex-shrink: 0;
}

.bf-step-circle.done {
  background: var(--green-600);
  color: #fff;
  border: none;
}

.bf-step-circle.active {
  background: var(--purple-500);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(168, 69, 138, 0.35);
  cursor: pointer;
}

.bf-step-circle.inactive {
  background: var(--white);
  color: var(--slate-500);
  border: 1.5px solid var(--slate-300);
  cursor: not-allowed;
}
.bf-step-label {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.bf-step-label.active {
  font-weight: 800;
  color: var(--ink-900);
}

.bf-step-label.inactive {
  font-weight: 600;
  color: var(--slate-500);
}

.bf-connector {
  flex: 1;
  height: 2px;
  margin-top: 16px;
  border-radius: 2px;
}

.bf-connector.done {
  background: var(--green-600);
}

.bf-connector.pending {
  background: var(--slate-200);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.bf-step-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom:6px;
}
#input-first-name{
  margin-bottom: 6px;
}
#input-bev-amount{
  margin-top: 6px;
}
.bf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: start;
 
}

.bf-field {

  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
padding-bottom: 10px;
margin-top:10px;
max-height: 93px;
}
.bf-field3 {
flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
margin-top:12px;
min-height: 110px;
}
#input-food-timing{
  margin-top: 12px;
    margin-bottom: 12px;
}
.bf-field label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-strong);
  margin-top: 6px;
}

.required {
  color: var(--red-500);
}

.field-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight:normal
}

/* ============================================================
   STEPPER — Quantity control (+ / − buttons + input)
   ============================================================ */
.bf-stepper {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--white);
  border: var(--border-width) solid var(--ink-900);
  border-radius: var(--radius-md);
  overflow: hidden;
      margin-top: 6px;
}

.qty-btn {
  width: 48px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-body);
}

.qty-btn:hover {
  background: var(--slate-100);
}

.stepper-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink-900);
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  -moz-appearance: textfield;
}

.stepper-input::-webkit-inner-spin-button,
.stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   DATE INPUT
   ============================================================ */

  
.bf-date-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  margin-top:6px;
  cursor: pointer;
}

.bf-date-input input[type="text"] {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
  width: 100%;
  min-width: 0;
  height:41px;
  margin-top:0px;
}

.bf-date-picker-trigger {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bf-date-picker-trigger input[type="date"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
 
}


.icon-calendar {
  width: 20px;
  height: 20px;
  color: var(--slate-500);
  position: absolute;
  top: 1px;
  left: 1px;
  pointer-events: none;
   cursor: pointer;
}
#input-date {
  cursor: pointer;
  pointer-events: auto; /* keep it clickable */
  width: 100%;
}
/* ============================================================
   TABS / SEGMENTED CONTROL
   ============================================================ */
.bf-tabs {
  display: inline-flex;
  gap: 4px;
  padding-left: 6px;
padding-top: 8px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--ink-900);
  font-family: var(--font-body);
  height: 48px;
  align-items: stretch;
  width: 100%;
      margin-top: 6px;
}

.tab-btn {
  flex: 1;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
   border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
  white-space: nowrap;
max-width:52px;
max-height:30px;
}

.tab-btn.active {
  background: var(--purple-500);
  color: #fff;
}

/* Color variants for tabs — set via data-color */
.bf-tabs[data-color="green"] .tab-btn.active { background: var(--green-600); }
.bf-tabs[data-color="gold"]  .tab-btn.active { background: var(--gold-500); color: var(--ink-900); }
.bf-tabs[data-color="blue"]  .tab-btn.active { background: var(--blue-500); }
.bf-tabs[data-color="purple"] .tab-btn.active { background: var(--purple-500); }

/* ============================================================
   INPUTS, SELECTS, TEXTAREAS
   ============================================================ */
.bf-input {
  height: 48px;
  padding: 0 14px;
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    margin-top:6px;
}

.bf-input:focus {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-glow-gold);
}

.bf-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    margin-top:6px;
}

.bf-select:focus {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-glow-gold);
}

/* Custom dropdown arrow */
.bf-select-wrapper {
  position: relative;
}

.bf-select-wrapper::after {
  content: '\25BE';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-strong);
  font-weight: 900;
  font-size: 12px;
}

.bf-textarea {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
  background: var(--white);
  border: var(--border-width) solid var(--ink-900);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  resize: vertical;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  margin-top:6px;
}

.bf-textarea:focus {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-glow-gold);
}

/* ============================================================
   FOOD MENU
   ============================================================ */
   #field-bev-amount{
    margin-top: 12px;
   
   }
      #input-bev-amount{
    
   
   }
.bf-food-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-top: 6px;
}

.bf-food-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bf-menu-category {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.bf-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  background: var(--ink-900);
  border-radius: var(--radius-md);
  user-select: none;
  margin-top: 12px;
}

.bf-category-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.bf-category-count {
  color: var(--gold-500);
  font-size: 0.8125rem;
}

.bf-category-icon {
  width: 20px;
  height: 20px;
  color: #fff;
  transition: transform var(--dur-base) ease;
}

.bf-category-icon.open {
  transform: rotate(180deg);
}

.bf-menu-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 12px;
}

.bf-menu-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-900);
  background: var(--white);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.bf-menu-item.selected {
  border-color: var(--purple-500);
  background: var(--purple-100);
}

.bf-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bf-item-name {
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--ink-900);
  line-height: 1.2;
}

.bf-item-price {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--purple-600);
  white-space: nowrap;
}

.bf-item-desc {
  margin: 0;
  flex: 1;
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight:normal;
}

.bf-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bf-item-stepper {
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--white);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bf-item-stepper .qty-btn {
  width: 34px;
  font-size: 18px;
}

.bf-item-stepper .stepper-input {
  width: 38px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.bf-item-total {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--green-600);
}

/* Food total chip */
.bf-food-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-100);
  border: 1.5px solid var(--gold-500);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

.bf-food-chip span:first-child {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--ink-900);
}

.bf-food-chip span:last-child {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--purple-600);
}

.bf-food-chip-mobile {
  align-self: flex-start;
}
#food-chip-top.hidden,
.bf-food-chip-mobile.hidden {
  display: none !important;
}
/* ============================================================
   SUMMARY CARD
   ============================================================ */
.bf-summary-card {
  background: var(--white);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.bf-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink-900);
}

.bf-summary-header span:first-child {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.0625rem;
  color: #fff;
}

.bf-summary-meta {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gold-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.bf-summary-body {
  padding: 6px 22px;
}

.bf-summary-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--slate-200);
}

.bf-summary-line-info {
  flex: 1;
  min-width: 0;
}

.bf-summary-line-label {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-900);
}

.bf-summary-line-detail {
  font-size: 0.78125rem;
  line-height: 1.3;
  margin-top: 3px;
  color: var(--text-muted);
}

.bf-summary-line-amount {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink-900);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.bf-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
}

.bf-summary-total span:first-child {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  color: var(--ink-900);
}

.bf-total-amount {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--purple-600);
}

/* ============================================================
   AGREEMENT CHECKBOX
   ============================================================ */
.bf-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
padding-top:14px;
}

.bf-checkbox {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid var(--ink-900);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all var(--dur-fast) ease;
}

.bf-checkbox.checked {
  background: var(--green-600);
  border-color: var(--green-600);
}

.check-icon {
  width: 15px;
  height: 15px;
}

.bf-agree span {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.4;
  margin-top:2px;
}

/* ============================================================
   TERMS & CONDITIONS
   ============================================================ */
.bf-terms {
  background: var(--white);
  border: var(--border-width) solid var(--slate-300);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  max-height: 170px;
  overflow-y: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
margin-top:14px;
}

.bf-terms p {
  margin: 0;
}

/* ============================================================
   NAVIGATION FOOTER
   ============================================================ */
.bf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}

.bf-nav > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-bounce),
              box-shadow var(--dur-base) var(--ease-bounce),
              background var(--dur-fast) ease;
  white-space: nowrap;
  user-select: none;
  border: var(--border-width) solid transparent;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.0625rem;
  border-radius: var(--radius-pill);
}

.btn-md {
  padding: 12px 22px;
  font-size: 1rem;
  border-radius: var(--radius-pill);
}

/* Solid variant */
.btn-solid {
  background: var(--purple-500);
  color: #fff;
  box-shadow: var(--shadow-sticker);
}

.btn-solid:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-solid:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sticker-press);
}

.btn-purple {
  background: var(--purple-500);
  color: #fff;
}

.btn-purple:hover:not(:disabled) {
  background: var(--purple-600);
}

.btn-green {
  background: var(--green-500);
  color: #fff;
}

.btn-green:hover:not(:disabled) {
  background: var(--green-600);
}

/* Outline variant */
.button-container {
  display: flex;       /* Activates flexbox layout */
  gap: 12px;           /* Creates clean spacing between the buttons */
}
p.total-due-text {
  font-family:'contheyextrabold_con_2', 'Arial Narrow', sans-serif;;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.0625rem;
  color: var(--ink-900);
  margin-top: 12px;
  margin-bottom: 2px;
}
p.payment-text {
  font-family:'contheyextrabold_con_2', 'Arial Narrow', sans-serif;;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.0625rem;
  color: var(--ink-900);
  margin-top: 0px;
  margin-bottom: 12px;
}
p.invoice-no-text {
  font-family:'contheyextrabold_con_2', 'Arial Narrow', sans-serif;;
  text-transform: uppercase;
  font-size: var(--fs-display-md);;
  color: var(--purple-500);
  margin-top: 0px;
  margin-bottom: 0px;
}
p.lanes-text {
  font-family:'contheyextrabold_con_2', 'Arial Narrow', sans-serif;;
  text-transform: uppercase;
  font-size: var(--fs-display-md);;
  color: var(--green-600);
  margin-top: 6px;
  margin-bottom: 6px;
}
.btn-outline {
  background: var(--white);
  color: var(--ink-900);

  box-shadow: var(--shadow-sm);
}

.btn-outline:hover:not(:disabled) {
  background: var(--slate-100);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sticker-press);
}

.icon-nav {
  width: 18px;
  height: 18px;
}

/* ============================================================
   CONFIRMATION / SUBMITTED SCREEN
   ============================================================ */
.bf-confirmation {
  padding: 64px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bf-confirmation-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(116, 162, 43, 0.35);
  margin-bottom: 12px;
}

.icon-check {
  width: 44px;
  height: 44px;
  color: #fff;
}

.bf-confirmation-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-display-md);
  letter-spacing: var(--ls-display);
  color: var(--ink-900);
  margin: 0;
  line-height: 1.05;
}

.bf-confirmation-text {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 440px;
  margin: 8px 0 20px;
}

.bf-confirmation-total {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--white);
  border: var(--border-width) solid var(--ink-900);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--purple-500);
  margin-bottom: 24px;
}

/* ============================================================
   RESPONSIVE — Tablet / Mobile
   ============================================================ */
@media (max-width: 768px) {
  .bf-wrapper {
    padding: 24px 12px;
  }
.bf-field {
max-height: 163px;
}
  .bf-section {
    padding: 24px 18px 28px;
  }

  .bf-confirmation {
    padding: 48px 24px;
  }

  .bf-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .bf-grid-2 > div:empty {
    display: none;
  }

  .bf-menu-items {
    grid-template-columns: 1fr;
  }

  .bf-step-wrapper {
    width: 56px;
  }

  .bf-step-label {
    font-size: 11px;
  }
  /* Modern way - hides only that label */
label:has(+ #input-last-name){
  display: none !important;
}
}

@media (max-width: 640px) {
  .bf-wrapper {
    padding: 16px 12px;
  }

  #food-chip-top {
    display: none !important;
  }
  /* only show mobile if NOT hidden */
  
 .bf-food-chip-mobile:not(.hidden) {
   display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-100);
  border: 1.5px solid var(--gold-500);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
  }



@media (max-width: 400px) {
  .bf-step-wrapper {
    width: 46px;
  }

  .bf-step-circle {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .bf-step-label {
    font-size: 10px;
  }
  /* Modern way - hides only that label */
label:has(+ #input-last-name){
  display: none !important;
}
}

/* Desktop food chip handling */
@media (min-width: 641px) {
  .bf-food-chip-mobile {
    display: none !important;
  }
  #food-chip-top {
    display: inline-flex;
  }
  #food-chip-top.hidden {
    display: none !important;
  }
}

/* Tablist full-width helper (adds class via JS) */
.tabs-full {
  width: 100%;
}

.tabs-full button {
  flex: 1 1 0;
}

[role="tablist"] button[role="tab"] {
  padding: 0 14px !important;
}

.bf-step-circle.next {
  background: #fff;
  border: 2px solid #111027;
  color: #111027;
  cursor: pointer;
}
.bf-step-label.next {
  color: #111027;
  cursor: pointer;
  opacity: 0.9;
}
.bf-step-circle.inactive {
  cursor: not-allowed;
  opacity: 0.35;
}
.bf-step-circle.next-ready {
   background: var(--white);
  color: var(--slate-500);
  border: 1.5px solid var(--slate-300);
   cursor: pointer;
  opacity: 1;
}
.bf-step-circle.inactive {
  opacity: 0.3;
  pointer-events: none; /* can't click until valid */
  cursor: not-allowed;
}
.bf-step-label.next-ready { color: #111027; opacity: 1; }

.bf-item-price .pp-label {
  font-size: 11px;
  font-weight: 600;
  color: #9b4a8a;
  text-transform: lowercase;
  margin-left: 3px;
}
.bf-item-total small {
  font-size: 11px;
  font-weight: 400;
  color: #6b6b7a;
  margin-left: 4px;
}

.bf-before-book {
  padding: 0;
  margin-bottom: 40px;
}
.bf-before-book p {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 700;
  color: #353154;
}
.bf-before-book ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.bf-before-book li {
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a5a;
  margin-bottom: 2px;
  font-weight:normal;
}
.bf-before-book li:last-child {
  margin-bottom: 0;
}