/*
 * Seating
 */

/* Open seating chart button */
a.fooevents_seating_chart,
#fooevents_seating_select_seats {
  display: block;
  text-align: center;
}

a.fooevents_seating_chart u,
#fooevents_seating_select_seats u {
  text-decoration: none !important;
}

/* Single product page with seating chart */
.single-product.seating-event {
  /* Styles for seating event products */
}

/* Checkout styles */
.woocommerce-checkout .entry-content>.woocommerce {
  max-width: 100%;
}

/* Cols for desktop only */
@media screen and (min-width: 800px) {
  .woocommerce-checkout #customer_details {
    display: grid;
    gap: 2em;
    grid-template-columns: 3fr 2fr;
  }

  .woocommerce-checkout #customer_details:before,
  .woocommerce-checkout #customer_details:after {
    display: none !important;
  }
}

.woocommerce-checkout .fooevents-eventname {
  font-size: 1.25em;
}

.woocommerce-checkout .fooevents-attendee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 90%;
}

.woocommerce-checkout .fooevents-attendee+.fooevents-attendee {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--fg-muted);
}

.woocommerce-checkout .fooevents-attendee-number,
.woocommerce-checkout .fooevents-checkout-attendee-info,
.woocommerce-checkout .fooevents-variation-desc {
  grid-column: 1/-1;
}

.woocommerce-checkout .fooevents-attendee-number {
  font-size: 1.1em;
}

.woocommerce-checkout .seating-class {
  margin: 0 !important;
}

.woocommerce-checkout .seating-class label {
  display: none !important;
}

.woocommerce-checkout .seating-class select {
  min-width: 13em;
  padding: 0.5em 1em !important;
}

/* Paikkakartta */
#fooevents_seating_unavailable,
.fooevents_seating_chart_view_row span.unavailable {
  background-color: red !important;
}

#fooevents_seating_selected,
.fooevents_seating_chart_view_row span.selected.available {
  background-color: #f3f303 !important;
  color: black !important;
}

.ui-dialog-titlebar {
  text-align: center;
  padding: 0.5rem 0 0 !important;
  border: none !important;
}

.ui-dialog-titlebar .ui-dialog-title {
  padding-right: 2em !important;
  padding-left: 2em !important;
}

#fooevents_seating_dialog {
  font: var(--fontbase-small);
  font-size: var(--fontsize-small);
  color: var(--fg-small);
  padding: 1rem;
  padding-top: 0;
  display: none;
}

#fooevents_seating_dialog .seat_container {
  text-align: center;
}

#fooevents_seating_dialog .fooevents_seating_chart_legend {
  width: 100%;
  text-align: center;
  margin: 0;
  border: none;
  padding: 0;
  font-size: 1em;
}

#fooevents_seating_dialog .fooevents_seating_chart_front {
  margin: 0.25rem 0;
  font-size: 0.75em;
}

#fooevents_seating_dialog .fooevents_seating_chart_view_row_name {
  margin-top: 0.5rem;
  font-size: 1em;
}

#fooevents_seating_dialog #fooevents_seating_select_seats {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

#fooevents_seating_dialog .fooevents_seating_chart_view_row_checkout span {
  margin-top: 0;
  margin-right: 5px;
}