body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f4f4f4;
}

#login-container,
#booking-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 800px;
  margin-bottom: 20px;
}

#bus-selection button {
  margin: 5px;
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #e7e7e7;
  border-radius: 4px;
}

#bus-selection button.active {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}

#seat-map-container {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

#seat-map {
  display: grid; /* Use grid for layout */
  gap: 10px; /* Spacing between seats */
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 10px;
  justify-content: center; /* Center seats horizontally */
  /* grid-template-columns will be set by JS */
}

.seat-row {
  display: contents; /* Allows direct children (seats) to participate in the grid */
}



.seat {
  width: 40px; /* Fixed width */
  height: 30px; /* Fixed height */
  border: 1px solid #aaa;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  cursor: pointer;
  background-color: #ccc; /* Default */
  color: #333;
  box-sizing: border-box;
  position: relative; /* For potential tooltips or overlays */
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.seat:hover {
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.seat.available {
  background-color: #a5d6a7; /* Light green */
  cursor: pointer;
}
.seat.available:hover {
  background-color: #81c784; /* Darker green on hover */
}

.seat.selected {
  background-color: #ffb74d; /* Orange */
  cursor: not-allowed;
  border-color: #f57c00;
  color: white;
}

.seat.selected-by-you {
  background-color: #64b5f6; /* Blue */
  cursor: pointer; /* Allow deselecting */
  border: 2px solid #1976d2;
  color: white;
}

.seat.booked {
  background-color: #e57373; /* Red */
  cursor: not-allowed;
  border-color: #d32f2f;
  color: white;
}

/* For the legend */
.legend {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 12px;
  flex-wrap: wrap;
}
.legend div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend span {
  display: inline-block;
  width: 20px; /* Smaller size for legend */
  height: 15px;
  border-radius: 3px;
  border: 1px solid #555;
}

#selection-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

#selected-seats-list {
  list-style: none;
  padding: 0;
}

#selected-seats-list li {
  background-color: #e3f2fd;
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

#book-button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

#book-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

#screen {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 2px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.error {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

#booking-status {
  margin-top: 15px;
  font-weight: bold;
}
#booking-status.success {
  color: green;
}
#booking-status.error {
  color: red;
}