@import "../sass/milligram"


// Upcoming Shows

.wpspx-upcoming-shows

	.wpspx-container

		.wpspx-row

			.wpspx-show
				margin-bottom: 30px


// Single Show

.wpspx-single-show

	.wpspx-container

		.wpspx-show-info

			.wpspx-show-image

			.wpspx-show-content

				.wpspx-show-title

				.wpspx-runtime

				.wpspx-show-copy

			.wpspx-show-times

				.wpspx-show-times-title

		.wpspx-performaces
			margin-top: 60px

			.wpspx-performaces-title
				margin-bottom: 60px

			.wpspx-performaces-list

				.wpspx-performance
					align-items: center
					margin-bottom: 20px

					.wpspx-column
						display: flex
						align-items: center
						margin-bottom: 0

					.wpspx-performance-date

						i
							font-size: 19px
							margin-right: 10px

					.wpspx-performance-time

						i
							font-size: 19px
							margin-right: 10px

					.wpspx-performance-prices
						justify-content: flex-end

					.wpspx-performance-action

						.button
						    width: 100%



		.wpspx-no-performaces


// Gift Cards

spektrix-gift-vouchers

	.wpspx-row

		.wpspx-membership-field
			margin-bottom: 20px

			input, select, textarea
				width: 100%

				&:disabled
					background: #cccccc
					cursor: not-allowed


// Memberships

.wpspx-membership-box
	margin-bottom: 30px

	img
		width: 100%
		margin-bottom: 20px

	.wpspx-membership-heading-row
		justify-content: space-between
		margin-bottom: 10px

		.wpspx-membership-header
			align-self: center

			h2
				margin-bottom: 0

		.wpspx-membership-price
			align-self: center

			h4
				margin-bottom: 0

	.wpspx-membership-field
		width: 100%

		label
			margin-bottom: 0





spektrix-memberships

	.wpspx-membership-field

		.wpspx-membership-control

			.autorenew
				display: flex
				flex-flow: wrap
				align-content: center
				align-items: center
				margin-top: 10px

				input[type="checkbox"]
					appearance: none
					-webkit-appearance: none
					width: 24px
					height: 24px
					display: inline-flex
					margin: 0
					outline: 0
					margin-right: 10px
					border: 2px solid #00b4cc

					&:checked
						border-color: #00b4cc
						background-color: #00b4cc
						background-image: url(../white-tick.svg)
						background-position: center
						background-size: 16px
						background-repeat: no-repeat




// Donate

.wpspx-donation, spektrix-donate

	.wpspx-row
		flex-flow: inherit

		&.header
			h1, h2, h3, .column
				margin-bottom: 0

		.wpspx-column
			display: flex

			button
				width: 100%

			label
				flex: 0 0 100%
				margin-bottom: 0
				padding: 20px
				box-sizing: border-box
				border: 1px solid #ddd
				cursor: pointer
				border-radius: 4px
				transition: all .15s ease-in-out

				h2
					font-size: 20px
					margin-bottom: 20px

				p
					font-size: 13px

			input[type="radio"]
				display: none

			input[type="radio"]:checked+label, input[type="radio"]:hover+label
				background: #00b4cc
				border: 1px solid #00b4cc
				color: white