/* ============================================================
   venue-cards.css  —  Compact clickable venue chips
   Uses !important on layout rules to prevent co-chat.css
   from overriding flex/grid on descendants of .chat-msg
   ============================================================ */

/* ── Wrapper row overrides ── */
.venue-cards-row {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.venue-cards-row .msg-avatar {
  display: none !important;
}

/* ── 2-column chip grid ── */
.venue-chips-grid {
  display: flex !important;
  /* grid-template-columns: 1fr 1fr !important; */
  gap: 8px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 4px 0 2px !important;
  box-sizing: border-box !important;
}

/* ── Single chip ── */
.venue-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1e1e2e !important;
  border: 1.5px solid rgba(255,255,255,0.09) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
  -webkit-user-select: none;
  min-height: 58px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.venue-chip:hover {
  border-color: rgba(99,102,241,0.5) !important;
  background: #252538 !important;
}
.venue-chip.selected {
  border-color: #6366f1 !important;
  background: rgba(99,102,241,0.13) !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3) !important;
}
.venue-chip.locked {
  cursor: default !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}
.venue-chip.selected.locked {
  opacity: 1 !important;
}

/* ── Thumbnail ── */
.venue-chip-thumb {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 7px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #16213e !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.venue-chip-thumb-placeholder {
  font-size: 20px !important;
  opacity: 0.35 !important;
  line-height: 1 !important;
}

/* ── Info section ── */
.venue-chip-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.venue-chip-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #f1f1f1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  display: block !important;
}
.venue-chip-city {
  font-size: 10px !important;
  color: rgba(255,255,255,0.38) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.venue-chip-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}
.venue-chip-stars {
  font-size: 9px !important;
  color: #f59e0b !important;
  letter-spacing: 0.5px !important;
  display: inline !important;
}
.venue-chip-score {
  font-size: 9px !important;
  font-weight: 700 !important;
  background: #3b82f6 !important;
  color: #fff !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  display: inline !important;
}
.venue-chip-badge {
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  display: inline !important;
}
.venue-chip-badge.eco  { background: rgba(34,197,94,0.2) !important; color: #4ade80 !important; }
.venue-chip-badge.fast { background: rgba(59,130,246,0.2) !important; color: #60a5fa !important; }

/* ── Checkmark circle ── */
.venue-chip-check {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, border-color 0.15s;
  font-size: 9px !important;
  color: transparent !important;
  background: transparent !important;
}
.venue-chip.selected .venue-chip-check {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

/* ── Confirm button area ── */
.venue-confirm-row {
  display: none !important;
  margin-top: 8px !important;
  width: 100% !important;
  max-width: 440px !important;
}
.venue-confirm-row.visible {
  display: block !important;
}
.venue-confirm-btn {
  width: 100% !important;
  padding: 10px !important;
  background: #6366f1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 0.2px !important;
  box-sizing: border-box !important;
}
.venue-confirm-btn:hover {
  background: #5254cc !important;
}


/* ============================================================
   Booking Summary Card  (.booking-summary-card)
   Dark-theme variant of .summary-box for use inside the chat.
   ============================================================ */

.booking-summary-card {
  width: 100% !important;
  max-width: 400px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}

/* Title row */
.bsc-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e8edf5 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.bsc-title::before {
  content: '✓' !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background: #0070c9 !important;
  color: #fff !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Data rows */
.bsc-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  flex-wrap: nowrap !important;
}
.bsc-row:last-of-type { border-bottom: none !important; }

.bsc-label {
  flex: 0 0 68px !important;
  font-size: 11px !important;
  color: rgba(232,237,245,0.45) !important;
  padding-top: 1px !important;
}
.bsc-value {
  flex: 1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #dde3f0 !important;
  line-height: 1.4 !important;
}

/* Divider */
.bsc-divider {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin: 10px 0 !important;
}

/* Action buttons row */
.bsc-actions {
  display: flex !important;
  gap: 8px !important;
}
.bsc-confirm {
  flex: 1 !important;
  padding: 9px !important;
  background: #0070c9 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.bsc-confirm:hover:not(:disabled) { background: #005bb5 !important; }
.bsc-confirm:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

.bsc-cancel {
  padding: 9px 14px !important;
  background: transparent !important;
  color: rgba(232,237,245,0.5) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.bsc-cancel:hover:not(:disabled) {
  color: #ff6b6b !important;
  border-color: rgba(255,107,107,0.4) !important;
}
.bsc-cancel:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }


/* ── Package chip layout fix ── */
/* co-chat.css sets white-space:nowrap on .chat-option-chip — override it */
.chat-options .chat-option-chip {
  white-space: normal !important;
  line-height: 1.4 !important;
}


/* ── Setup groups inside booking summary ── */
.bsc-setup-group {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 9px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

.bsc-setup-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e8edf5 !important;
}

.bsc-setup-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #0070c9 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.bsc-setup-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 3px 0 !important;
}

.bsc-setup-row .bsc-label {
  padding-top: 2px !important;
}