/* ============================================================
   VendorBooth Manager — Frontend Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --vbm-available:    #2E7D32;
  --vbm-on-hold:      #F9A825;
  --vbm-sold:         #111111;
  --vbm-sponsor:      #C62828;
  --vbm-food:         #00838F;
  --vbm-unavailable:  #9E9E9E;
  --vbm-stage:        #F9A825;
  --vbm-deco:         #8BAE7A;
  --vbm-q:            #C62828;
  --vbm-text:         #ffffff;
  --vbm-booth-w:      56px;
  --vbm-booth-h:      44px;
  --vbm-gap:          4px;
  --vbm-font:         'DM Sans', Arial, sans-serif;
}

/* ── Wrapper ── */
.vbm-wrapper {
  font-family: var(--vbm-font);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 8px 24px;
  box-sizing: border-box;
}

/* ── Legend ── */
.vbm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 12px 16px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 14px;
}
.vbm-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.vbm-legend-swatch {
  width: 22px;
  height: 18px;
  border-radius: 3px;
  display: inline-block;
}
.vbm-legend-swatch.vbm-status-available   { background: var(--vbm-available); }
.vbm-legend-swatch.vbm-status-on_hold     { background: var(--vbm-on-hold); }
.vbm-legend-swatch.vbm-status-sold        { background: var(--vbm-sold); }
.vbm-legend-swatch.vbm-status-sponsor     { background: var(--vbm-sponsor); }
.vbm-legend-swatch.vbm-type-food          { background: var(--vbm-food); }
.vbm-legend-swatch.vbm-status-unavailable { background: var(--vbm-unavailable); }

/* ── Scroll hint (mobile) ── */
.vbm-map-scroll-hint {
  display: none;
  text-align: center;
  font-size: 12px;
  color: #888;
  padding: 4px;
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  .vbm-map-scroll-hint { display: block; }
}

/* ── Scroll container ── */
.vbm-map-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

/* ── Venue (the full map) ── */
.vbm-venue {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 1100px;
  gap: 6px;
  padding: 12px;
  background: #eef2e8;
  border-radius: 10px;
  border: 2px solid #d0d8c8;
}

/* ── Row ── */
.vbm-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ============================================================
   FOOD BOOTH ROW
   ============================================================ */
.vbm-food-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.vbm-food-group {
  display: flex;
  gap: var(--vbm-gap);
}
.vbm-stage-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
}
.vbm-stage-block {
  background: var(--vbm-stage);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 8px 40px;
  border-radius: 6px;
  border: 2px solid #e09000;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   MAIN ROW
   ============================================================ */
.vbm-main-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}

/* ── Clusters ── */
.vbm-cluster {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.vbm-cluster-left  { flex-direction: row; }
.vbm-cluster-right { flex-direction: row; }

/* ── Section groups ── */
.vbm-section-group {
  display: flex;
  gap: var(--vbm-gap);
}
.vbm-single-col .vbm-col { /* single column — no side-by-side */ }

/* ── Column of booths ── */
.vbm-col {
  display: flex;
  flex-direction: column;
  gap: var(--vbm-gap);
}

/* ============================================================
   BOOTH CELL
   ============================================================ */
.vbm-booth {
  width: var(--vbm-booth-w);
  height: var(--vbm-booth-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--vbm-text);
  border-radius: 4px;
  cursor: default;
  user-select: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
  position: relative;
  border: 1px solid rgba(255,255,255,.25);
  letter-spacing: 0.5px;
}

/* Status colours */
.vbm-status-available   { background: var(--vbm-available);  cursor: pointer; }
.vbm-status-on_hold     { background: var(--vbm-on-hold);    cursor: pointer; color: #222; }
.vbm-status-sold        { background: var(--vbm-sold);       cursor: pointer; }
.vbm-status-sponsor     { background: var(--vbm-sponsor);    cursor: pointer; }
.vbm-status-unavailable { background: var(--vbm-unavailable); opacity: 0.55; cursor: not-allowed; }

/* Food booth colour override */
.vbm-type-food.vbm-status-available { background: var(--vbm-food); }

/* Hover / focus effects */
.vbm-booth[tabindex="0"]:hover,
.vbm-booth[tabindex="0"]:focus {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  outline: 2px solid rgba(255,255,255,.8);
  z-index: 10;
}
.vbm-booth[tabindex="0"]:active {
  transform: scale(0.97);
}

/* Pulse animation for on-hold */
@keyframes vbm-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.2); }
  50%       { box-shadow: 0 0 0 4px rgba(249,168,37,.4); }
}
.vbm-status-on_hold { animation: vbm-pulse 2s infinite; }

/* ============================================================
   CENTER DECORATIVE AREA
   ============================================================ */
.vbm-center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  min-width: 180px;
}
.vbm-deco-block {
  background: var(--vbm-deco);
  border-radius: 5px;
  opacity: 0.75;
  width: 100%;
  height: 50px;
}
.vbm-deco-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.vbm-deco-sm {
  flex: 1;
  height: 60px;
}
.vbm-stage-connector {
  width: 3px;
  height: 24px;
  background: var(--vbm-stage);
  border-radius: 2px;
  margin: 0 auto;
}
.vbm-deco-footer {
  width: 90%;
  height: 14px;
  background: var(--vbm-deco);
  border-radius: 4px;
  opacity: 0.5;
}

/* ============================================================
   BOTTOM ROW (Q1 / Q2)
   ============================================================ */
.vbm-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  margin-top: 4px;
}
.vbm-q-block {
  background: var(--vbm-q);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.vbm-bottom-bar {
  flex: 1;
  height: 20px;
  background: var(--vbm-deco);
  border-radius: 4px;
  opacity: 0.5;
}

/* ============================================================
   MODAL
   ============================================================ */
.vbm-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vbm-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.vbm-modal-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: vbm-modal-in 0.2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vbm-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.vbm-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #555;
  z-index: 1;
  transition: background 0.15s;
}
.vbm-modal-close:hover { background: #e0e0e0; color: #000; }

/* ── Modal Content ── */
.vbm-modal-content { padding: 28px 28px 24px; }

.vbm-modal-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}
.vbm-modal-booth-id {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.vbm-modal-type-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-regular  { background: #e3f2fd; color: #1565c0; }
.badge-prime    { background: #e8f5e9; color: #2e7d32; }
.badge-food     { background: #e0f7fa; color: #00695c; }
.vbm-modal-price {
  font-size: 22px;
  font-weight: 700;
  color: #2e7d32;
  margin: 10px 0 0;
}
.vbm-modal-price.food-varies { color: #00695c; }

/* Hold policy box */
.vbm-hold-policy {
  background: #fffbea;
  border-left: 4px solid var(--vbm-on-hold);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 13.5px;
  color: #5a4300;
  line-height: 1.5;
}
.vbm-hold-policy strong { display: block; margin-bottom: 4px; color: #3d2e00; }

/* Status blocks */
.vbm-modal-status-block {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}
.vbm-modal-status-block.sold    { background: #f0f0f0; }
.vbm-modal-status-block.on_hold { background: #fffbea; }
.vbm-modal-status-block.sponsor { background: #ffebee; }

/* Countdown timer */
.vbm-countdown {
  font-size: 28px;
  font-weight: 700;
  color: #c77700;
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}

/* CTA Buttons */
.vbm-cta-row {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  flex-wrap: wrap;
}
.vbm-btn {
  flex: 1;
  min-width: 140px;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.15s;
  font-family: var(--vbm-font);
}
.vbm-btn-reserve {
  background: #1a3c5e;
  color: #fff;
}
.vbm-btn-reserve:hover { background: #0f2540; transform: translateY(-1px); }
.vbm-btn-cancel {
  background: #f5f5f5;
  color: #444;
}
.vbm-btn-cancel:hover { background: #e8e8e8; }
.vbm-btn-print {
  background: #1a3c5e;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  font-family: var(--vbm-font);
}

/* Loading spinner */
.vbm-btn.loading { opacity: 0.65; cursor: wait; pointer-events: none; }
.vbm-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vbm-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes vbm-spin { to { transform: rotate(360deg); } }

/* Form toggle */
.vbm-form-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1a3c5e;
  margin: 18px 0 0;
  user-select: none;
}
.vbm-form-toggle-arrow { transition: transform 0.2s; }
.vbm-form-toggle.open .vbm-form-toggle-arrow { transform: rotate(90deg); }
.vbm-form-collapsible { display: none; margin-top: 12px; }
.vbm-form-collapsible.open { display: block; }

/* ============================================================
   VENDOR FORM (in modal + standalone)
   ============================================================ */
.vbm-vendor-form { }
.vbm-form-title    { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #1a1a1a; }
.vbm-form-subtitle { font-size: 13px; color: #666; margin: 0 0 16px; }

.vbm-form { display: flex; flex-direction: column; gap: 12px; }

.vbm-form-row {
  display: grid;
  gap: 12px;
}
.vbm-form-row--half  { grid-template-columns: 1fr 1fr; }
.vbm-form-row--checks { display: flex; flex-direction: column; gap: 8px; }

.vbm-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vbm-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vbm-form-group input:not([type=checkbox]):not([type=radio]),
.vbm-form-group select,
.vbm-form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--vbm-font);
  color: #222;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vbm-form-group input:focus:not([type=checkbox]):not([type=radio]),
.vbm-form-group select:focus,
.vbm-form-group textarea:focus {
  outline: none;
  border-color: #1a3c5e;
  box-shadow: 0 0 0 3px rgba(26,60,94,.12);
  background: #fff;
}
.req { color: #c00; }

.vbm-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: #333;
  line-height: 1.4;
}
.vbm-check-label input[type=checkbox],
.vbm-check-label input[type=radio] { margin-top: 2px; flex-shrink: 0; }

/* Application Type selector (Commercial Food Vendor / Non-Profit Premium Food Booth).
   The !important flags on display/align-items/width below are intentional: on sites
   where a theme or page-builder stylesheet applies a broad reset to label/span/div
   elements (overriding our flex layout back to block), .vbm-check-label can otherwise
   lose its row layout entirely -- which visually centers the radio and squeezes its
   label text into a single far-right column, one character per line. Forcing these
   specific properties keeps this control group's layout correct regardless of what
   else is loaded on the page, the same defensive approach already used for the
   .vbm-modal popup-recovery hardening above. */
.vbm-application-type-selector {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  padding: 12px 14px;
  gap: 8px;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
}
.vbm-application-type-selector > label:first-child {
  margin-bottom: 2px;
}
.vbm-application-type-selector .vbm-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 2px 0;
}
.vbm-application-type-selector .vbm-check-label input[type=radio] {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
}
.vbm-application-type-selector .vbm-check-label span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  overflow-wrap: break-word;
  text-align: left !important;
}

.vbm-form-message {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
}
.vbm-form-message.success { background: #e8f5e9; color: #2e7d32; border-left: 3px solid #4caf50; }
.vbm-form-message.error   { background: #ffebee; color: #b71c1c; border-left: 3px solid #f44336; }

.vbm-btn--submit {
  background: #2E7D32;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--vbm-font);
  text-align: center;
}
.vbm-btn--submit:hover { background: #1b5e20; }

.vbm-vendor-form--standalone {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

/* ============================================================
   TICKET PAGE
   ============================================================ */
.vbm-ticket-page { max-width: 640px; margin: 0 auto; padding: 24px 16px; font-family: var(--vbm-font); }
.vbm-ticket-card {
  background: #fff;
  border: 2px solid #1a3c5e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.vbm-ticket-header {
  background: #1a3c5e;
  color: #fff;
  padding: 20px 24px;
  text-align: center;
}
.vbm-ticket-header h2 { margin: 0 0 8px; font-size: 20px; }
.vbm-ticket-confirmed { background: #4caf50; display: inline-block; padding: 4px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.vbm-ticket-body { display: flex; gap: 24px; padding: 24px; flex-wrap: wrap; }
.vbm-ticket-qr { text-align: center; flex-shrink: 0; }
.vbm-ticket-qr img { border-radius: 8px; border: 2px dashed #1a3c5e; }
.vbm-ticket-qr p { font-size: 12px; color: #888; margin: 6px 0 0; }
.vbm-ticket-details { flex: 1; min-width: 200px; }
.vbm-ticket-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vbm-ticket-table td { padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
.vbm-ticket-table td:first-child { font-weight: 600; color: #555; width: 80px; }
.vbm-ticket-note { font-size: 12px; color: #777; background: #f8f8f8; padding: 10px; border-radius: 6px; margin-top: 12px; }
.vbm-ticket-footer { background: #f5f8ff; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.vbm-ticket-footer small { font-size: 11px; color: #999; word-break: break-all; }

/* ============================================================
   STATS BAR
   ============================================================ */
.vbm-stats-bar { font-size: 14px; color: #444; padding: 10px 0; }
.vbm-stat-sep { margin: 0 10px; color: #ccc; }
.vbm-stat-item strong { color: #1a3c5e; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .vbm-form-row--half { grid-template-columns: 1fr; }
  .vbm-cta-row { flex-direction: column; }
  .vbm-ticket-body { flex-direction: column; align-items: center; }
  .vbm-modal-box { border-radius: 10px; }
  .vbm-modal-content { padding: 20px 16px 18px; }
}

@media print {
  .vbm-ticket-header { background: #1a3c5e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vbm-btn-print, .vbm-map-container, .vbm-legend { display: none; }
}

/* Make Q1/Q2 larger clickable booths */
.vbm-bottom-row .vbm-booth{width:90px;height:70px;font-size:18px}

/* Tier colors (available state) — selectors match booth_cell() output: vbm-status-available + vbm-type-* */
.vbm-booth.vbm-status-available.vbm-type-prime    { background: #1e4fd1; color: #fff; }
.vbm-booth.vbm-status-available.vbm-type-regular  { background: #2e7d32; color: #fff; }
.vbm-booth.vbm-status-available.vbm-type-sponsor  { background: #c62828; color: #fff; }
.vbm-booth.vbm-status-available.vbm-type-nonprofit{ background: #8b5a2b; color: #fff; }
/* Legacy aliases (vbm-available / vbm-tier-*) kept for back-compat */
.vbm-booth.vbm-available.vbm-tier-prime    { background: #1e4fd1; color: #fff; }
.vbm-booth.vbm-available.vbm-tier-regular  { background: #2e7d32; color: #fff; }
.vbm-booth.vbm-available.vbm-tier-sponsor  { background: #c62828; color: #fff; }
.vbm-booth.vbm-available.vbm-tier-nonprofit{ background: #8b5a2b; color: #fff; }

/* Legend swatches */
.vbm-legend-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:middle;}
.vbm-legend-swatch.vbm-tier-regular{background:#2e7d32;}
.vbm-legend-swatch.vbm-tier-prime{background:#1e4fd1;}
.vbm-legend-swatch.vbm-tier-nonprofit{background:#8b5a2b;}
.vbm-legend-swatch.vbm-tier-sponsor{background:#c62828;}
.vbm-legend-swatch.vbm-status-on_hold{background:#f6c026;}
.vbm-legend-swatch.vbm-status-sold{background:#111111;}

/* Application-gated Reserve & Pay */
.vbm-btn-reserve:disabled,
.vbm-btn-reserve[disabled] {
  background: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
}
.vbm-app-required-note {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin: 4px 0 0;
}
.vbm-app-unlocked-note {
  font-size: 12px;
  color: #2e7d32;
  font-weight: 600;
  text-align: center;
  margin: 4px 0 0;
}
.vbm-booth-id-display {
  background: #f0f4ff;
  border: 1px solid #c5d0e8;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #1a3c5e;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Terms & Conditions inline popup inside reserve modal */
.vbm-terms-link {
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.vbm-terms-popup {
  position: absolute;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vbm-terms-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.vbm-terms-popup__box {
  position: relative;
  width: min(760px, 92vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 20px;
  z-index: 1;
}
.vbm-terms-popup__box h3 {
  margin: 0 42px 14px 0;
  font-size: 20px;
}
.vbm-terms-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.vbm-terms-popup__frame {
  width: 100%;
  height: min(58vh, 560px);
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.vbm-terms-popup__fallback,
.vbm-terms-popup__empty {
  margin: 12px 0 0;
  font-size: 13px;
  color: #555;
}
.vbm-terms-popup__empty {
  padding: 16px;
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  border-radius: 8px;
}

.vbm-terms-popup__content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 4px 4px;
    line-height: 1.55;
}
.vbm-terms-popup__content p { margin: 0 0 12px; }
.vbm-terms-popup__content ul,
.vbm-terms-popup__content ol { margin: 0 0 12px 22px; }

.vbm-field-note{margin:4px 0 0;font-size:12px;line-height:1.35;color:#666;}


/* Food booth temporary license acknowledgement */
.vbm-food-license-check {
  align-items: flex-start;
  background: #fff8e1;
  border: 1px solid #f6c453;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}
.vbm-food-license-check span { line-height: 1.45; }
.vbm-food-license-check a {
  color: #0b5ed7;
  font-weight: 700;
  text-decoration: underline;
}
.vbm-food-license-upload-box .vbm-field-note {
  color: #7a4a00;
}

/* Ohio Expo Center Electrical Services upload section */
.vbm-electric-services-box {
  width: 100%;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 10px;
  color: #0f2744;
}
.vbm-electric-services-box strong { display: block; margin-bottom: 4px; }
.vbm-electric-services-box p { margin: 5px 0; font-size: 13px; }
.vbm-electric-services-box a { font-weight: 700; color: #1a4480; text-decoration: underline; }
.vbm-electric-services-box label { display: block; margin: 8px 0 5px; font-weight: 700; font-size: 13px; }
.vbm-electric-services-box input[type="file"] { width: 100%; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; }

.vbm-food-license-upload-box{
  background:#fff8e1;
  border-left:4px solid #f59e0b;
  border-radius:10px;
  padding:12px 14px;
  margin:10px 0 14px;
}
.vbm-food-license-upload-box strong{display:block;margin-bottom:6px;color:#7a3b00}
.vbm-food-license-upload-box p{margin:6px 0;font-size:13px}
.vbm-my-applications{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;margin:20px 0}
.vbm-my-applications-lookup{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.vbm-my-applications-lookup label{display:block;font-weight:700;width:100%}
.vbm-my-applications-lookup input{padding:10px;border:1px solid #cbd5e1;border-radius:8px;min-width:260px}
.vbm-my-app-card{border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:14px 0;background:#f8fafc}
.vbm-food-license-upload-form{margin-top:12px;padding:12px;background:#fff;border-radius:10px;border:1px dashed #f59e0b}
.vbm-food-license-upload-form label{font-weight:700;display:block;margin-bottom:8px}
.vbm-form-message.success{background:#dcfce7;color:#166534;padding:10px;border-radius:8px;margin-top:10px}
.vbm-form-message.error{background:#fee2e2;color:#991b1b;padding:10px;border-radius:8px;margin-top:10px}

.vbm-nonprofit-assignment-notice{background:#eef6ff;border-left:4px solid #1d4ed8;color:#0f2744;}

/* v1.7.6 electricity checkout pricing */
.vbm-electric-total{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:13px;line-height:1.45}

/* v1.7.7 nonprofit assignment emphasis */
.vbm-np-red, .vbm-np-red *{color:#dc2626!important;font-weight:800!important;}
.vbm-modal-type-badge.vbm-np-red{background:#fee2e2!important;border:1px solid #fecaca!important;color:#dc2626!important;}
.vbm-nonprofit-assignment-notice.vbm-np-red{background:#fff1f2!important;border-left:4px solid #dc2626!important;}


/* v1.7.9 Vendor setup notice + document center */
.vbm-setup-notice{
  background:#fff7ed;
  border:1px solid #fdba74;
  border-left:6px solid #ea580c;
  color:#7c2d12;
  border-radius:12px;
  padding:14px 16px;
  margin:0 0 16px;
  font-size:14px;
  line-height:1.5;
  box-shadow:0 4px 14px rgba(124,45,18,.08);
}
.vbm-setup-notice strong:first-child{display:block;color:#b91c1c;font-weight:800;letter-spacing:.3px;margin-bottom:3px;}
.vbm-document-center{max-width:900px;margin:0 auto;padding:20px;font-family:var(--vbm-font,Arial,sans-serif)}
.vbm-document-center form{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:14px 0 18px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.vbm-document-center input[type=email]{min-width:260px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px}
.vbm-my-app-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:14px 0;box-shadow:0 6px 18px rgba(15,39,68,.06)}

/* v1.8.4 hold policy emphasis */

.vbm-hold-policy-alert {
  background: #fff1f2 !important;
  border-left-color: #dc2626 !important;
}
.vbm-hold-policy-alert strong,
.vbm-hold-policy-red {
  color: #dc2626 !important;
  font-weight: 800 !important;
}
.vbm-hold-policy-red {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

/* v1.9.3 Vendor Communications notice controlled from Settings */
.vbm-vendor-communications-notice {
  margin: 16px 0 22px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #f7d07a;
  background: linear-gradient(135deg, #fff8e7 0%, #fffdf7 100%);
  color: #3b2b11;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.08);
  font-size: 15px;
  line-height: 1.55;
}
.vbm-vendor-communications-notice p { margin: 0 0 8px; }
.vbm-vendor-communications-notice p:last-child { margin-bottom: 0; }
.vbm-vendor-communications-notice strong:first-child { color: #b42318; letter-spacing: .02em; }

/* v2.3.24 Pending booth status: public sees purple only, no vendor identity. */
:root { --vbm-allocated: #7c3aed; }
.vbm-legend-swatch.vbm-status-allocated { background: var(--vbm-allocated); }
.vbm-status-allocated { background: var(--vbm-allocated) !important; color: #fff !important; cursor: pointer; }
.vbm-booth.vbm-status-allocated::after { content: 'Pending'; position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); font-size:8px; color:#4c1d95; white-space:nowrap; opacity:.0; pointer-events:none; }
.vbm-booth.vbm-status-allocated:hover::after { opacity:1; }

/* v2.3.24 Public pending booth polish - vendor details stay private */
.vbm-booth.vbm-status-allocated{box-shadow:0 0 0 2px rgba(124,58,237,.18),0 6px 16px rgba(124,58,237,.22)!important;border-color:#6d28d9!important}
.vbm-booth.vbm-status-allocated::after{content:'Pending';position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:9px;font-weight:800;background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe;border-radius:999px;padding:2px 7px;white-space:nowrap;opacity:0;pointer-events:none;z-index:50;box-shadow:0 4px 14px rgba(31,41,55,.14)}
.vbm-booth.vbm-status-allocated:hover::after{opacity:1}
.vbm-modal-status-block.allocated{border-left:5px solid #7c3aed;background:#f5f3ff!important;color:#3b0764}


/* v2.4.8 Electricity confirmation modal */
.vbm-electric-confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:999999;display:flex;align-items:center;justify-content:center;padding:18px}
.vbm-electric-confirm-dialog{max-width:520px;width:100%;background:#fff;border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(15,23,42,.28);border-top:6px solid #1d4ed8;color:#111827}
.vbm-electric-confirm-dialog h3{margin:0 0 10px;font-size:22px;line-height:1.25;color:#111827;font-weight:800}
.vbm-electric-confirm-dialog p{margin:0 0 20px;color:#4b5563;font-size:15px;line-height:1.5}
.vbm-electric-confirm-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.vbm-electric-confirm-actions button{border:0;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}
.vbm-electric-confirm-no{background:#f3f4f6;color:#374151}
.vbm-electric-confirm-yes{background:#1d4ed8;color:#fff}


/* v2.4.9 Zeffy payment acknowledgement modal */
.vbm-zeffy-terms-dialog { max-width: 560px; text-align: left; }
.vbm-zeffy-terms-dialog h3 { text-align: center; margin-bottom: 12px; }
.vbm-zeffy-terms-dialog p { line-height: 1.55; color: #243047; }
.vbm-zeffy-terms-actions { justify-content: flex-end; }
.vbm-zeffy-terms-agree { min-width: 160px; }
.vbm-zeffy-terms-cancel { min-width: 110px; }

/* v3.2.10 Popup Recovery hardening.
   These !important overrides exist to win against third-party theme/page-builder
   or caching-plugin CSS that can otherwise override .vbm-modal's display/visibility
   with higher-specificity or !important rules of their own. The init()/retry timing
   bug that caused booth clicks to stop registering on some pageloads was fixed at
   the JS level (see vbm-booth-map.js init()/vbmInitDone) — these CSS overrides are
   a separate, unrelated defense against external stylesheet conflicts and should
   stay in place even though that JS bug is now fixed. */
.vbm-wrapper .vbm-booth{cursor:pointer!important;pointer-events:auto!important;position:relative;}
.vbm-modal[style*="display: flex"]{display:flex!important;visibility:visible!important;opacity:1!important;}
.vbm-modal-box,.vbm-modal-content{pointer-events:auto!important;}

/* v3.3.2 layout-driven coordinate renderer */
.vbm-layout-public-shell { width:100%; }
.vbm-layout-public-scroll { width:100%; overflow:auto; border:1px solid #d6dfd0; border-radius:10px; background:#eef4ea; }
.vbm-venue-layout-driven.vbm-layout-absolute { position:relative; min-width:max-content; background:#eef4ea; border-radius:10px; transform-origin:top left; }
.vbm-layout-booth-absolute { position:absolute !important; margin:0 !important; box-sizing:border-box; display:flex !important; align-items:center; justify-content:center; }
.vbm-layout-stage-absolute { position:absolute !important; margin:0 !important; }
.vbm-layout-stage-absolute .vbm-stage-block { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.vbm-layout-aisle { position:absolute; background:rgba(166,190,150,.75); border-radius:6px; color:#5f7354; font-size:10px; font-weight:700; text-align:center; display:flex; align-items:center; justify-content:center; pointer-events:none; text-transform:uppercase; letter-spacing:.5px; }
.vbm-layout-chair { position:absolute; width:16px; height:16px; border-radius:50% 50% 3px 3px; background:rgba(26,60,94,.25); border:1px solid rgba(26,60,94,.22); box-sizing:border-box; pointer-events:none; }
.vbm-layout-public-legend { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:0 0 12px 0; padding:10px 14px; background:#fff; border:1px solid #e0e0e0; border-radius:10px; }
.vbm-layout-legend-item { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#333; }
.vbm-layout-legend-item i { width:16px; height:16px; border-radius:4px; display:inline-block; }
@media (max-width: 900px) { .vbm-layout-public-scroll { -webkit-overflow-scrolling:touch; } }