body {
	margin: 0;
	background: #f6f6f6;
	font-family: 'Open Sans';
}
#banner {
	background: url('grease_banner.png');
	width: 100%;
	max-width: 730px;
	aspect-ratio: 730 / 299;
	margin: 0 auto;
	background-size: contain;
}

#content {
	background: #fff;
	width: 730px;
	margin: 0 auto;
	border: 5px solid #e9212c;
	border-radius: 15px;
	padding: 10px;
	box-sizing: border-box;
}
@media (max-width: 750px) {
	#content {
		width: 100%;
	}
}

h1 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 22px;
	font-weight: bold;
	color: #e9212c;
	border-bottom: 1px solid #e76daa;
}
h2 {
	margin: -10px 0 10px;
	padding: 0;
	font-size: 18px;
	color: #333;
	font-weight: normal;
}
h3 {
	margin: 10px 0;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
a {
	color: #e9212c;
	text-decoration: none;
}
.clear {
	clear: both;
}
.error {
	color: #e9212c;
	border: 2px solid #e9212c;
	margin: 15px 0;
	padding: 5px;
}

.button-row {
	text-align: right;
	height: 60px;
}
.button-row .button {
    margin-top: 20px;
    padding: 10px 18px;
    font-size: 16px;
    cursor: pointer;
}
@media (max-width: 750px) {
	.button-row .button {
		padding: 8px 18px;
		font-size: 15px;
	}
}

.button-row .forward {
	background: #edd118;
}
.button-row .button_left {
	float: left;
}



/****************
*     PAGES     *
****************/

/* SHOWS LIST */
.shows_row {
	margin-bottom: 10px;
	font-size: 12px;
}
.shows_row a {
	display: block;
	color: #e49f44;
	font-size: 18px;
	font-weight: bold;
}

/* TICKET PICKER */
.ticket-picker {
    max-width: 700px;
}
.ticket-picker .ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ddd;
}
.ticket-picker .label .title {
    font-size: 18px;
    font-weight: 600;
}
.ticket-picker .label .price {
    font-size: 15px;
    color: #555;
    margin-top: 4px;
}
.ticket-picker .qty {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticket-picker .btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #888;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
}
.ticket-picker .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ticket-picker .count {
    min-width: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

/* SEATING CHART */
.chart .row {
	font-size: 10px;
	width: 700px;
	margin-bottom: 3px;
}
.chart .row.sec {
	margin-bottom: 15px;
}

.chart .row .left {
	float: left;
	width: 21.5%;
	text-align: right;
}
.chart .row .aisle {
	float: left;
	width: 4.5%;
	text-align: center;
	padding-top: 2px;
}
.chart .row .center {
	float: left;
	width: 48%;
	text-align: center;
	height: 16px;
}
.chart .row .right {
	float: left;
	width: 21.5%;
	text-align: left;
}

.chart .row a {
	display: inline-block;
	text-decoration: none;
	color: #000;
	padding-top: 2px;
	height: 16px;
	width: 16px;
	box-sizing: border-box;
	border: 1px solid #000;
	border-radius: 8px;
	background: #ffc;
	margin: 0 0px;
	text-align: center;
}
.chart .row a.gap {
	margin-right: 10px;
}
.chart .row a.sold {
	border-color: #ccc;
	background: #ccc;
	background-image: url('/seat-sold.png');
}
.chart .row a.selected {
	border-color: #FF0;
	background: #e9212c;
}
.chart .row .noseat {
	display: inline-block;
	height: 16px;
	width: 16px;
	margin: 0px;
}

.chart .row .stage {
	border: 1px solid #000;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	padding: 5px;
	margin: 0 5% 40px;
}
.chart .row .orch {
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	padding: 5px;
}
.chart .row .walk {
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
}
.chart .row .mezz {
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	padding: 5px;
}

/* tool tip */
#seatdetails {
	position: absolute;
	background: #333;
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 13px;
	display: none;
	pointer-events: none;
}

/* seat count */
.seat-help {
  margin: 8px 0 12px;
  font-size: 14px;
  color: #444;
  text-align: right;
}
.seat-help strong{
	font-weight: 700;
}

/* mobile zoom/pan */
.seat-controls {
	display: none;
}
@media (max-width: 750px){
	.seat-controls{
		display:flex;
		gap:10px;
		margin:10px 0;
		align-items:center;
	}
	.seat-controls button{
		padding:2px 14px;
		font-size:14px;
		border-radius:10px;
	}
	.seat-viewport{
		margin: auto 10px;
		height: min(70vh, 545px);
		overflow: hidden;                /* we pan manually */
		border: 1px solid #ddd;
		border-radius: 12px;
		background: #fff;
		position: relative;
		touch-action: none;              /* key: don’t let browser steal scroll */
	}
	/* This is the thing we scale */
	#seatChart{
		transform-origin: 0 0;
		will-change: transform;
	}
}




/* TICKET SUMMARY */
.ticket-summary {
    max-width: 700px;
}

.ticket-summary .ticket-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 0 36px;
    border-bottom: 1px solid #ddd;
}

.ticket-summary .ticket-row:last-child {
    border-bottom: none;
}

.ticket-summary .label .title {
    font-size: 22px;
    font-weight: 600;
}

.ticket-summary .label .price {
    font-size: 16px;
    color: #555;
    margin-top: 4px;
	position: absolute;
}

.ticket-summary .qty.static {
    font-size: 26px;
    font-weight: 600;
    min-width: 100px;
    text-align: right;
}
.ticket-summary .qty.static input {
	border: 2px solid #000;
    font-size: 26px;
    font-weight: 600;
    text-align: right;
	width: 50px;
	padding: 1px;
}

.promo,.promo input {
	font-size: 18px;
}
.promo input[type=text] {
	border: 1px solid #e9212c;
}

#seatclock {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #8c52ff;
	color: #fff;
	text-align: center;
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	z-index: 1000;
}
#seatclock span {
	font-weight: normal;
}

/* CHECKOUT */
#payment-request-button {
	margin: 20px auto;
	width: 300px;
	max-width: 100%;
}
#payment-form {
	margin: 20px auto;
	text-align: right;
	width: 500px;
	max-width: 100%;
	border: 2px solid #e9212c;
	padding: 8px;
	box-sizing: border-box;
}
#payment-form .label {
	text-align: left;
	font-size: 14px;
	padding-bottom: 3px;
}
#payment-form .field {
	padding-bottom: 10px;
}
#payment-form .field input {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	padding: 12px 10px;
	box-sizing: border-box;
}
#payment-form #submit {
    margin-top: 20px;
	background: #e9212c;
	color: #fff;
    padding: 10px 18px;
    font-size: 16px;
    cursor: pointer;	
}
#payment-form #submit:disabled {
	background: #ccc;
	color: #999;
    cursor: default;	
}

/* CONFIRM */
img {
	max-width: 100%;
}

/*********
* FOOTER *
*********/

#footer {
	width: 550px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 5px;
	box-sizing: border-box;
	text-align: center;
	color: #333;
	font-size: 12px;
	margin-bottom: 40px;
}