.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
}

.screen {
  width: 100%;
  height: 200px;
  background-color: #333;
  margin-bottom: 20px;
}

.seats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(12, 30px);
  grid-gap: 5px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.row {
  display: contents;
}

.seat {
  width: 30px;
  height: 30px;
  background-color: #0fbf2c;
  cursor: pointer;
  margin: 2px;
}

.seat.occupied {
  background-color: #f00;
  cursor: default;
}

.seat.selected {
  background-color: rgb(60, 0, 255) !important;
}

.seat.aisle {
  background-color: transparent;
  cursor: default;
  border: none;
}

.seat.premium {
  background-color: #a10e7a;
}

.seat.unavailable {
  background-color: grey;
  cursor: default;
}

/* Making the center two columns an aisle */
.seat-grid .row:nth-child(even) .seat:nth-child(6),
.seat-grid .row:nth-child(even) .seat:nth-child(7),
.seat-grid .row:nth-child(odd) .seat:nth-child(6),
.seat-grid .row:nth-child(odd) .seat:nth-child(7) {
  background-color: transparent;
  cursor: default;
  border: none;
}

.legend {
  display: flex;
  gap: 10px;
  margin-bottom: 20px; /* space below */
}
/* Footer Styling */
footer {
  text-align: center;
  background-color: #fff;
  padding: 20px 30px;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* Shadow at the top of the footer */
  border-radius: 10px 10px 0 0; /* Rounded top corners */
  max-width: 100%; /* Full-width footer */
  width: 100%;
  margin-top: auto; /* Push footer to the bottom */
}

/* Footer Text */
.rights {
  padding: 10px 0;
  font-size: 14px;
}

/* Links Styling */
footer a {
  color: #0077cc;
  text-decoration: none;
  font-weight: bold;
  padding: 0 5px;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #00509e;
  text-decoration: underline;
}

/* Social Icons List */
.social-icons {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 0;
  margin: 10px 0;
}

/* Social Icons */
.social-icon {
  font-size: 24px;
  color: #333;
  transition: transform 0.3s, color 0.3s;
}

.social-icon:hover {
  color: #0077cc;
  transform: scale(1.2);
}

.booking-info {
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .seat-grid {
    grid-template-columns: repeat(10, 20px);
    grid-gap: 3px;
  }
  .seat {
    width: 20px;
    height: 20px;
  }

  .legend {
    flex-direction: column;
    align-items: center;
  }
}