/* =====================================================================
   Seated tour table — styled to match the old tour-date table
   (!important added to every rule to override Seated's embedded CSS)
   ===================================================================== */

.seated-events-table {              /* was #eventList */
  margin-top: 0 !important;
}

/* --- Each event row --- (was .tourRow) */
.seated-event-row {
  display: flex !important;
  align-items: center !important;
  clear: both !important;
  border-bottom: 1px solid #3f322a !important;
}

/* Left group: date + venue + show name */
.seated-event-description-cells {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  min-width: 0 !important;
  color: #676767 !important;
}

/* --- Date column --- (was .eventDate 15% + .dateLine1) */
.seated-event-date-cell {
  flex: 0 0 15% !important;
  padding: 1% !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

/* --- Venue column --- (was .eventVenue 30%) */
.seated-event-venue-cell {
  flex: 0 0 38% !important;
  padding: 1% !important;
  min-width: 0 !important;
}

.seated-event-venue-location {      /* was the "City, ST" text */
  color: #676767 !important;
  display: flex;
  align-items: center;
}

/* --- Show name --- (was .lyleDetails: small italic blue-grey) */
.seated-event-details-cell {
  flex: 1 !important;
  padding: 1% !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: #28324e !important;
}
.seated-event-link, .seated-event-link:visited, .seated-event-link1, .seated-event-link1:visited, .seated-event-link2, .seated-event-link2:visited, .seated-event-link3, .seated-event-link3:visited {
	margin-left: 20px !important;
}

/* Right group: the Tickets button (was the .eventDetails button cell) */
.seated-event-link-cells {
  flex: 0 0 20% !important;
  padding: 1% !important;
  text-align: center !important;
  justify-content: center;
}

/* --- Tickets button --- (was .button) */
.seated-event-link {
  display: inline-block !important;
  background-color: #7797ac !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.seated-event-link:hover,
.seated-event-link:focus {
  background-color: #3e90d5 !important;   /* matches old .button:hover accent */
  color: #fff !important;
}

/* =====================================================================
   Mobile — single left-aligned column: date, venue, city/state,
   show name, then the Tickets button, all stacked and flush left.
   ===================================================================== */
@media only screen and (max-width: 767px) {
  .seated-event-row {
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 10px 0 !important;
  }

  .seated-event-description-cells {
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	flex: 0 0 auto !important;
  }

  .seated-event-date-cell,
  .seated-event-venue-cell,
  .seated-event-details-cell,
  .seated-event-link-cells {
	flex: 0 0 auto !important;
	width: 100% !important;
	padding: 2px 0 !important;
	text-align: left !important;
  }

  .seated-event-date-cell {
	font-size: 13px !important;
	/* font-weight: 700 !important; */
  }

  .seated-event-link-cells {
	margin-top: 6px !important;
  }

  .seated-event-venue-name,
  .seated-event-venue-location {
	width: 100% !important;
  }

  /* keep the button sized to its label, sitting flush left */
  .seated-event-link {
	width: auto !important;
	margin: 0 !important;
  }
}

/* =====================================================================
   Optional header bar (was #rowHeader). Requires the matching
   <div class="seated-header-row"> markup placed just above the
   Seated container. Uses the same flex widths as the rows so the
   columns line up. Hidden on mobile, like the old header.
   ===================================================================== */
.seated-header-row {
  display: flex !important;
  align-items: center !important;
  background: #7797ac !important;
  color: #fff !important;
  margin: 0 !important;
}

.seated-header-desc {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  min-width: 0 !important;
}

.seated-header-date    { flex: 0 0 15% !important; padding: 1% !important; }
.seated-header-venue   { flex: 0 0 38% !important; padding: 1% !important; }
.seated-header-details { flex: 1 !important;       padding: 1% !important; }
.seated-header-link    { flex: 0 0 20% !important; padding: 1% !important; text-align: center !important; }

@media only screen and (max-width: 767px) {
  .seated-header-row { display: none !important; }
}