/**
 * File Name: studio-shortcodes.css
 * Description: This file contains CSS for the studio shortcodes.
 * Author: Jack Ditto 
 * Created on: April 22, 2024
 * 
 * You can edit any part of this CSS. For global changes, see the VARIABLES 
 * section of style.css.
 */

/* STUDIO LOCATION SHORTCODE */

/* Address */
.headerLocationContainer .studio_loc_info {
  list-style: none;
  padding: 0px;
}

/* Address icon */
.headerLocationContainer .studio_loc_info i {
  font-size: 40px;
  color: var(--studio-shortcodes-icon-color);
}

/* Address text */
.headerLocationContainer .studio_loc_info span {
  font-size: 18px;
}

/* Address + icon wrapper */
.headerLocationContainer .studio_loc_info > li {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* View Studio button */
.headerLocationContainer .studioLocationLink {
  font-size: 18px;
  background: var(--studio-shortcodes-btn-color);
  color: var(--studio-shortcodes-btn-text-color) !important;
  border-radius: 100px;
  padding: 10px 10px;
  text-align: center;
  transition: 0.3s ease-in-out;
  max-width: 300px;
  width: 100%;
  display: block;
  text-decoration: none;
}

.headerLocationContainer .studioLocationLink:hover {
  background: var(--studio-shortcodes-btn-hover-color);
}

/* END STUDIO LOCATION SHORTCODE */

/* BEGIN STUDIO LOCATION HOURS SHORTCODE */

/* Location hours list */
.studioLocationContactInformation .studio_loc_info {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Location hours list items */
.studioLocationContactInformation .studio_loc_info > li {
  display: flex;
  gap: 15px;
}

/* Location hours icon */
.studioLocationContactInformation .studio_loc_info i {
  font-size: 35px;
  color: var(--studio-shortcodes-icon-color);
}

/* Location hours text */
.studioLocationContactInformation .studio_loc_info span,
.studioLocationContactInformation .studio_loc_info p {
  font-size: 22px;
}

/* END STUDIO LOCATION HOURS SHORTCODE */

/* BEGIN STUDIO LOCATION SCHEDULE SHORTCODE */

/* "Book at This Studio" button */
.studioLocationInformationScheduleWorkout .studioLocationLink {
  font-size: 18px;
  background: var(--studio-shortcodes-btn-color);
  color: var(--studio-shortcodes-btn-text-color) !important;
  border-radius: 100px;
  padding: 10px 10px;
  text-align: center;
  transition: 0.3s ease-in-out;
  max-width: 300px;
  width: 100%;
  display: block;
  text-decoration: none;
}

.studioLocationInformationScheduleWorkout .studioLocationLink:hover {
  background: var(--studio-shortcodes-btn-hover-color);
}

/* END STUDIO LOCATION SCHEDULE SHORTCODE */

/* BEGIN STUDIO FOOTER CONTENT SHORTCODE */

/* Studio footer content container */
.studio-location-more-information-container {
  display: flex;
  gap: 60px;
}

/* Studio footer content container items */
.studio-location-more-information-container > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Smaller screen view for footer content */
@media only screen and (max-width: 1024px) {
  .studio-location-more-information-container {
    flex-direction: column;
    gap: 20px;
  }
}

/* END STUDIO FOOTER CONTENT SHORTCODE */

/* TRAINERS SHORTCODE */

.trainers-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.trainer {
  flex-basis: 300px;
}

.trainer-name {
  font-weight: bold;
  margin-bottom: 5px !important;
  margin-top: 20px;
  text-align: center;
}

.trainer-title {
  text-align: center;
}

.trainer-image {
  border-radius: 50%;
  height: 200px;
  width: 200px;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
	.trainers-wrapper {
		gap: 70px;
	}
	
	.trainer {
	  flex-basis: unset;
	}
}


/* Smaller screen view make trainers 2x2 */
@media only screen and (max-width: 620px) {
	
	.trainer-image {
	  height: 150px;
	  width: 150px;
	}
	
	.trainers-wrapper {
		gap: 40px;
	}
	
	.trainer {
		flex-basis: 40%;
	}
	
	
}

/* END TRAINERS SHORTCODE */

/* BEGIN STUDIO LOCATIONS LIST */

.locations-list-wrapper {
  display: flex;
  flex-flow: row wrap;
  row-gap: 60px;
  column-gap: 30px;
}

.location-item {
  flex-basis: 300px;
  /*   flex-grow: 1; */
}

.location-item .title {
  font-weight: bold;
  margin-bottom: 0px;
}

.location-item .info {
  margin-top: 15px;
  margin-bottom: 0px;
}

.location-item .link {
  margin-top: 15px;
}

.locations-wrapper .location {
  padding-top: 100px;
}

/* END STUDIO LOCATIONS LIST */

/********** V2 ADDITIONS  /**********/

.services-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.service {
  flex-basis: 300px;
}

.service-description {
  font-size: 16px;
  margin-bottom: 5px;
  text-align: center;
}

.service-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px !important;
  color: var(--brand-dark);
}

.service-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
  border-radius: 15px;
  border: 1px solid #e6e6e6;
}

/* .service-image {
  width: 100%;
  padding-top: 56.25%; 
  background-position: center;
  background-size: cover;
  margin: 0 auto;
  border-radius: 15px;
  border: 1px solid #e6e6e6;
  position: relative;
}

.service-image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
} */

.tpw-studio-hours {
  color: var(--brand-dark);
  font-size: 16px;
}

.tpw-studio-hours .wpsl-opening-hours td {
  padding-right: 30px;
  padding-bottom: 5px;
}

.tpw-studio-hours .wpsl-opening-hours tbody > tr:nth-child(odd) > td,
.tpw-studio-hours .wpsl-opening-hours tbody > tr:nth-child(odd) > th,
.tpw-studio-hours .wpsl-opening-hours tbody > tr:nth-child(odd) > td:hover,
.tpw-studio-hours .wpsl-opening-hours tbody > tr:nth-child(odd) > th:hover {
  background-color: var(--brand-light);
}

.tpw-studio-hours .wpsl-opening-hours tbody tr:hover > td,
table tbody tr:hover > th {
  background-color: var(--brand-light);
}

.tpw-studio-address {
  color: var(--brand-dark);
  font-size: 20px;
}

.tpw-studio-region {
  color: var(--brand-muted);
  margin: 0px;
}

.tpw-studio-title {
  color: var(--brand-dark);
  margin: 0px;
}

.tpw-studio-map .wpsl-gmap-canvas {
  margin-bottom: 0px;
  height: 100% !important;
  min-height: 350px;
}

.tpw-studio-map {
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
}

.tpw-studio-book-button a {
  text-decoration: none !important;
}

.tpw-studio-location-text {
  text-align: center;
  font-weight: 600;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.tpw-studio-location-text::before {
  content: "";
  display: inline-block;
  width: 24px;
  min-width: 24px;
  height: 24px;
  vertical-align: middle;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDMgNzkuOTY5MGE4N2ZjLCAyMDI1LzAzLzA2LTIwOjUwOjE2ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjYuOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjUtMDctMjhUMTI6MDQ6MzgtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI1LTA3LTI4VDEyOjA2OjA1LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI1LTA3LTI4VDEyOjA2OjA1LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyYjFmMjRmMC1lMjdmLTRkZmQtYjNjZi03NmU3ODg2NTU0YTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MmIxZjI0ZjAtZTI3Zi00ZGZkLWIzY2YtNzZlNzg4NjU1NGE1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MmIxZjI0ZjAtZTI3Zi00ZGZkLWIzY2YtNzZlNzg4NjU1NGE1Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyYjFmMjRmMC1lMjdmLTRkZmQtYjNjZi03NmU3ODg2NTU0YTUiIHN0RXZ0OndoZW49IjIwMjUtMDctMjhUMTI6MDQ6MzgtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNi44IChNYWNpbnRvc2gpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpXQytsAAAGHSURBVEjHtZXdUcMwDMeTCcoGZAOSd+4IDzzTDZqyQLsBsAFdgI8N0mceaO94J90g3QAmCH9zck5RZUf0IHc6n2VZP0m2nLTruiT2XT2+VximkBxySuo9pIHUrzfnz7H9aQgAx86h23yWxL8dpAKoMQMo6ieafkEeKNqGwV1WS8iE7OZaNgcA2vxB0zVF9xnI8oSyvCZVITPRAA2VZQ3jqQD7ec0dYa0myA76PAhgpXFlyXzk0LsoZyKBF6xXLJOWyjUolQT4SO5hdEc6N956pzR6mGY3yFwCWrqKBTtQr+sjY5nuocvE2fU6DfAzgUEa0/3G1gIwZWAFaCWynoGpRP62rGC0VPTqLSIb14wLqZeAEsOb1jQjfcCb8xJrm1ijucULemPKUBeLbt5Qc25hX451ckYv5UTboAB877jmzGHfWh47nvKgpsKOn02hvaix55q/qAcQ4Xwe+i+ksR9OCGJ1PgpQICsaFxbnJoACSazOzQClo/sO/jMA65Fk7OoeDTjm+3fAN0f8RuBbN/qoAAAAAElFTkSuQmCC");
  background-size: contain;
  background-repeat: no-repeat;
}