@charset "UTF-8";

main {
	padding-top: 180px;
	padding-bottom: 70px;
}

#ticket-block {
	width: 1084px;
	margin-inline: auto;
	text-align: left;
	color: #000;
	line-height: 1.67;
	font-feature-settings: "palt";

	&.my_page {
		width: 800px;
		margin-top: 30px;
	}

	&>h2 {
		font-size: 16px;
		letter-spacing: 0.075em;
		font-weight: 600;
		margin-bottom: 32px;

		span {
			font-size: 14px;
			font-weight: 400;
			margin-left: 10px;
		}
	}

	&>.cols {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 1000px;
		margin-inline: auto;
	}

	& .conditions {
		width: 204px;
		border: 1px solid #d41e1d;
		border-radius: 6px;
		background: #fef8f8;

		&>h3 {
			background: #d41e1d;
			color: #fff;
			font-size: 16px;
			padding: 5px 12px 8px;
			font-weight: 600;
			letter-spacing: 0.075em;
		}

		&>form {
			padding: 10px 10px 15px;
		}

		& fieldset {
			margin-bottom: 10px;

			&.person_number {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				font-weight: 400;

				& .legend {
					width: 110px;
					font-size: 14px;
					letter-spacing: 0.05em;
					font-weight: 600;

					& small {
						font-size: 12px;
						letter-spacing: 0.05em;
						font-weight: 400;
						margin-left: 6px;
					}
				}

				& select {
					width: 48px;
				}
			}
		}

		& legend {
			display: block;
			font-size: 14px;
			letter-spacing: 0.05em;
			font-weight: 600;
			padding: 0;
			appearance: none;

			&>span {
				color: #d41e1d;
				font-size: 12px;
				margin-left: 10px;
			}
		}

		& input[type="date"] {
			border: 1px solid #bdbdbd;
			width: 100%;
			box-sizing: border-box;
			border-radius: 4px;
			padding: 3px 3px 3px 9px;

			&::-webkit-calendar-picker-indicator {
				background: url(../images/icon/top_tab_calendar.png) no-repeat center;
				width: 20px;
				height: 20px;
			}
		}

		& select {
			border: 1px solid #bdbdbd;
			width: 100%;
			box-sizing: border-box;
			border-radius: 4px;
			padding: 8px 5px;

			&+select {
				margin-top: 1px;
			}
		}

		& label {
			display: block;
			border: 1px solid #bdbdbd;
			background: #fff;
			border-radius: 4px;
			padding: 5px 5px 5px 34px;
			position: relative;
			font-size: 14px;
			line-height: 20px;
			letter-spacing: 0.075em;
			font-weight: 400;

			input[type="checkbox"] {
				position: absolute;
				left: 10px;
				top: 0;
				bottom: 0;
				margin: auto;
			}

			&+label {
				margin-top: 1px;
			}

			&+select {
				margin-top: 9px;
			}

			&.sep {
				margin-top: 9px;
			}
		}

		input[type="submit"] {
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			letter-spacing: 0.1em;
			appearance: none;
			border: none;
			background: linear-gradient(90deg, rgb(205, 1, 5) 0%, rgb(228, 20, 137) 100%);
			box-sizing: border-box;
			width: 100%;
			border-radius: 20px;
			padding: 8px;
			margin-top: 8px;
		}
	}

	& .list-block {
		width: 776px;

		.date {
			background: #fef8f8;
			padding: 12px 10px;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 34px;

			a {
				color: #d41e1d;
				text-decoration: none;
				font-size: 13px;
				line-height: 1.8;
				font-weight: 400;
				letter-spacing: 0.075em;
				display: block;
				background-position: center;
				background-repeat: no-repeat;
				height: 35px;
				box-sizing: border-box;
				padding: 5px;
			}

			.prevweek {
				a {
					background-image: url(../images/ticket/prevweek.png);
					width: 67px;
					text-align: right;

					&:not([href]) {
						background-image: url(../images/ticket/prevweek_d.png);
						color: #000;
						cursor: pointer;
					}
				}
			}

			.prevday {
				margin-right: 5px;

				a {
					background-image: url(../images/ticket/prevday.png);
					width: 42px;
					text-align: right;

					&:not([href]) {
						background-image: url(../images/ticket/prevday_d.png);
						color: #000;
						cursor: pointer;
					}
				}
			}

			.departure_point,
			.arrival_point {
				letter-spacing: 0.075em;
				width: 230px;

				h3 {
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 2px;
				}

				p {
					font-size: 13px;
					font-weight: 400;
				}
			}

			.one_way_or {
				width: 36px;
				background: url(../images/icon/roundtrip.png) no-repeat center -2px;
				padding-top: 24px;
				color: #ce020d;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
				letter-spacing: 0.075em;
			}

			.nextday {
				margin-left: 5px;

				a {
					background-image: url(../images/ticket/nextday.png);
					width: 42px;

					&:not([href]) {
						background-image: url(../images/ticket/nextday_d.png);
						color: #000;
						cursor: pointer;
					}
				}
			}

			.nextweek {
				a {
					background-image: url(../images/ticket/nextweek.png);
					width: 67px;

					&:not([href]) {
						background-image: url(../images/ticket/nextweek_d.png);
						color: #000;
						cursor: pointer;
					}
				}
			}
		}

		.sort-pager {
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			letter-spacing: 0.075em;
			color: #000;
			margin-bottom: 10px;

			a {
				color: #ce020d;
				text-decoration: none;

				&:not([href]) {
					color: #000;
				}
			}

			.sort {
				span {
					&+a {
						margin-left: 0;
					}
				}

				a {
					margin-inline: 10px;
				}
			}

			/* 当前选中的排序为黑色且不可点击 */
			.sort a.sort-link.active {
				color: #000;
				pointer-events: none;
				cursor: default;
				text-decoration: none;
			}

			&:not(:has(.sort)) {
				justify-content: flex-end;
			}
		}

		.list {
			&>div {
				margin-bottom: 20px;
				border: 2px solid #d41e1d;
				background: #eee;

				&:last-child {
					margin-bottom: 15px;
				}

				.summary {
					background: #fff;

					.summary-head {
						background: #fef8f8;
						display: flex;
						flex-flow: row nowrap;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #bdbdbd;
						position: relative;

						figure {
							margin: 0 12px 0 10px;
							font-size: 0;
							border: 1px solid #bdbdbd;
							background: #fff;

							img {
								max-width: 100%;
								height: auto;
							}
						}

						h3 {
							font-size: 16px;
							font-weight: 600;
							letter-spacing: 0.075em;
							width: 322px;
						}

						.vacant {
							width: 155px;
							background: #fff;
							border-right: 1px solid #bdbdbd;
							padding-block: 16px;
							height: 58px;
							text-align: center;
							font-size: 16px;
							font-weight: 600;
							box-sizing: border-box;

							span {
								color: #d41e1d;
								margin-right: 8px;
							}
						}

						.price {
							/* width: 177px; */
							background: #fff;
							height: 58px;
							text-align: right;
							padding: 10px 16px;
							box-sizing: border-box;
							color: #d41e1d;
							font-size: 22px;
							font-weight: 600;
							letter-spacing: 0.075em;
						}

						.left {
							position: absolute;
							right: -31px;
							top: -1px;
							width: 26px;
							writing-mode: vertical-rl;
							text-orientation: upright;
							padding: 10px 2px;
							background: #1088c8;
							color: #fff;
							white-space: nowrap;
							font-size: 14px;
							font-weight: 600;
							letter-spacing: 0.075em;
							text-align: center;

							&::before {
								content: '';
								display: block;
								border-style: solid;
								border-width: 4px 8px 4px 0;
								border-color: transparent #1088c8 transparent transparent;
								position: absolute;
								left: -7px;
								top: 10px;
							}
						}
					}

					.summary-body {
						padding: 16px 15px 28px;
						display: flex;
						flex-flow: row nowrap;
						justify-content: space-between;
						align-items: flex-start;

						&>div:first-child {
							p {
								font-size: 12px;
								letter-spacing: 0.075em;
							}
						}

						&>div:last-child {
							width: 200px;

							a {
								display: block;
								text-align: center;
								padding: 5px;
								box-sizing: border-box;
								color: #fff;
								font-size: 16px;
								letter-spacing: 0.075em;
								font-weight: 600;
								background: url(../images/ticket/arrow_white.png) no-repeat right 12px center, linear-gradient(90deg, rgb(205, 1, 5) 0%, rgb(228, 20, 139) 100%);
								border-radius: 18px;
								cursor: pointer;
							}
						}
					}
				}

				.details {
					display: none;
					padding-inline: 13px;
					padding-bottom: 20px;

					.route {
						margin-bottom: 28px;

						h4 {
							margin-block: 4px 12px;
							background-repeat: no-repeat;
							background-position: left center;
							padding-left: 28px;
							font-size: 14px;
							font-weight: 600;
							letter-spacing: 0.075em;

							&.outward {
								background-image: url(../images/icon/top_tab_departure.png);
							}

							&.return {
								background-image: url(../images/icon/top_tab_arrival.png);
							}
						}

						.route-option {
							display: flex;
							flex-flow: row nowrap;
							justify-content: space-between;
							align-items: stretch;
							border: 1px solid #bdbdbd;
							background: #fff;

							&+.route-option {
								border-top: none;
							}

							&>:first-child {
								display: block;
								background: #eee;
								width: 51px;
								position: relative;
								cursor: pointer;

								&:has(input:checked) {
									background: #f6cbcb;

									&::before {
										background-color: #d41e1d;
									}
								}

								&::before {
									content: '';
									display: block;
									position: absolute;
									top: 0;
									bottom: 0;
									left: 0;
									right: 0;
									margin: auto;
									width: 25px;
									height: 25px;
									border-radius: 13px;
									background: #fff;
									border: 5px solid #fff;
								}

								input {
									display: none;
								}
							}

							&>:last-child {
								padding: 10px 5px;
								width: 687px;
								box-sizing: border-box;
								letter-spacing: 0.075em;

								.route-head {
									display: flex;
									flex-flow: row nowrap;
									justify-content: space-between;
									align-items: center;

									.schedule {
										width: 163px;
										font-size: 18px;
										font-weight: 600;
										line-height: 1.2;

										span {
											display: block;
											font-size: 12px;
											font-weight: 400;
										}
									}

									.duration {
										width: 140px;
										height: 25px;
										background: url(../images/ticket/duration.png) no-repeat left center;
										box-sizing: border-box;
										padding-left: 17px;
										color: #d41e1d;
										font-size: 12px;
										font-weight: 600;
										line-height: 24px;

										&::before {
											content: '';
											display: inline-block;
											background: url(../images/ticket/time.png) no-repeat center;
											width: 12px;
											height: 12px;
											margin-right: 4px;
											vertical-align: -2px;
										}
									}

									.vacant {
										width: 152px;
										color: #dc0a34;
										font-size: 16px;
										font-weight: 600;
									}

									.toggle {
										cursor: pointer;
										width: 28px;
										position: relative;

										&::before {
											content: '';
											display: block;
											background: url(../images/ticket/arrow_up.png) no-repeat center;
											width: 14px;
											height: 8px;
											transform: rotate(180deg);
											transition: 0.3s;
											position: absolute;
											top: 0;
											bottom: 0;
											left: 0;
											right: 0;
											margin: auto;
										}
									}

									&.js-open .toggle::before {
										transform: none;
									}
								}

								.route-body {
									display: none;
									margin-top: 12px;
									border-top: 1px dashed #bdbdbd;
									padding-top: 12px;

									.schedule {
										display: flex;
										flex-flow: row nowrap;
										justify-content: space-between;
										align-items: center;

										.schedule-date {
											font-size: 14px;
											font-weight: 600;

											span {
												font-size: 10px;
												font-weight: 400;
												margin-right: 6px;
											}
										}

										.airport {
											font-size: 14px;
											font-weight: 600;
											width: 558px;
											padding-left: 30px;
											box-sizing: border-box;
											position: relative;
											background-position: left center;
											background-repeat: no-repeat;

											&.outward {
												background-image: url(../images/ticket/outward.png);
											}

											&.return {
												background-image: url(../images/ticket/return.png);
											}
										}
									}

									.duration {
										display: flex;
										flex-flow: row nowrap;
										justify-content: space-between;
										align-items: center;
										margin-block: 5px;

										.time {
											color: #d41e1d;
											font-size: 12px;
											font-weight: 600;
											text-align: right;
											width: 108px;

											&::before {
												content: '';
												display: inline-block;
												background: url(../images/ticket/time.png) no-repeat center;
												width: 12px;
												height: 12px;
												margin-right: 4px;
												vertical-align: -2px;
											}
										}

										&>:last-child {
											width: 558px;
											position: relative;
											padding-left: 30px;
											display: flex;
											flex-flow: row wrap;
											justify-content: flex-start;
											align-items: center;
											padding-bottom: 7px;

											&::before {
												content: '';
												display: block;
												width: 1px;
												background: #f6cbcb;
												position: absolute;
												top: 0;
												bottom: 0;
												left: 6px;
												margin: auto;
											}

											&::after {
												content: '';
												display: block;
												width: 5px;
												height: 5px;
												border-radius: 3px;
												background: #f6cbcb;
												position: absolute;
												bottom: 0;
												left: 4px;
											}

											figure {
												width: 94px;
												margin: 0 6px 0 0;
												border: 1px solid #bdbdbd;
												box-sizing: border-box;
												font-size: 0;

												img {
													max-width: 100%;
													height: auto;
												}
											}

											.flight {
												font-size: 14px;
												font-weight: 400;
											}

											&>p {
												margin-top: 3px;
												width: 100%;
												font-size: 12px;
												font-weight: 400;
											}
										}
									}
								}
							}
						}
					}

					.tags {
						letter-spacing: 0.075em;
						margin-bottom: 23px;

						&>div:first-child {
							display: flex;
							flex-flow: row wrap;
							justify-content: flex-start;
							align-items: flex-end;

							&>div {
								border-top: 3px solid #c5c5c5;
								background: #c5c5c5;
								font-size: 14px;
								line-height: 26px;
								font-weight: 600;
								text-align: center;
								margin-right: 7px;
								width: 145px;
								cursor: pointer;

								&.js-open {
									border-top-color: #d41e1d;
									background-color: #fff;
									cursor: default;
								}
							}
						}

						&>div:last-child {
							&>div {
								padding: 15px 13px;
								background: #fff;

								&>:last-child {
									margin-bottom: 0;
								}

								.sum {
									background: #daf189;
									padding: 10px 15px 10px 25px;
									display: flex;
									flex-flow: row nowrap;
									justify-content: space-between;
									align-items: center;
									margin-bottom: 18px;

									&>:first-child {
										font-size: 14px;
										font-weight: 600;

										span {
											font-size: 12px;
											font-weight: 400;
										}
									}

									&>:last-child {
										color: #d41e1d;
										font-size: 22px;
										font-weight: 600;
									}
								}

								h4 {
									padding-left: 15px;
									position: relative;
									font-size: 14px;
									font-weight: 600;

									&::before {
										content: '';
										display: block;
										background: #f6cbcb;
										width: 9px;
										height: 9px;
										position: absolute;
										left: 0;
										top: 7px;
									}

									&+p {
										margin-top: -15px;
									}
								}

								p {
									font-size: 14px;
									line-height: 18px;
									font-weight: 400;
									margin-bottom: 22px;

									small {
										font-size: 12px;
									}
								}

								table {
									border: 1px solid #bdbdbd;
									table-layout: fixed;
									width: 100%;

									thead {
										th {
											border: 1px solid #bdbdbd;
											background: #eee;
											font-size: 12px;
											line-height: 1.2;
											font-weight: 400;
											text-align: center;
											padding-block: 8px;

											&:first-child {
												background: #dedede;
											}
										}
									}

									tbody {
										th {
											border: 1px solid #bdbdbd;
											background: #eee;
											font-size: 12px;
											line-height: 1.2;
											font-weight: 400;
											text-align: center;
											padding-block: 12px;
										}

										td {
											border: 1px solid #bdbdbd;
											background: #fff;
											font-size: 12px;
											line-height: 1.2;
											font-weight: 400;
											text-align: center;
											padding-block: 12px;
										}
									}

									&.charge thead tr {
										:first-child {
											width: 56px;
										}

										:nth-child(2) {
											width: 88px;
										}

										:nth-child(3) {
											width: 75px;
										}

										:nth-child(4) {
											width: 81px;
										}

										:nth-child(5) {
											width: 114px;
										}

										:nth-child(6) {
											width: 86px;
										}

										:nth-child(7) {
											width: 80px;
										}

										:nth-child(8) {
											width: 48px;
										}

										:nth-child(9) {
											width: 80px;
										}
									}
								}

								.discount {
									font-size: 14px;
									font-weight: 600;
									padding-block: 15px;
									margin-bottom: 12px;

									span {
										border: 1px solid #d41e1d;
										color: #d41e1d;
										padding: 4px 6px 5px;
										font-size: 12px;
										font-weight: 400;
										margin-right: 14px;
									}
								}
							}
						}
					}

					.reservation {
						margin-inline: auto;
						width: 565px;

						a {
							display: block;
							text-decoration: none;
							font-size: 20px;
							font-weight: 600;
							letter-spacing: 0.075em;
							color: #fff;
							text-align: center;
							background: linear-gradient(90deg, rgb(205, 1, 5) 0%, rgb(228, 20, 137) 100%);
							box-sizing: border-box;
							padding: 5px;
							border-radius: 25px;
						}
					}
				}
			}
		}

		& .circuit-route {
			letter-spacing: 0.075em;
			margin-bottom: 55px;

			&>div {
				background: #fef8f8;
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				align-items: center;
				padding: 14px;
				margin-bottom: 10px;

				&:last-child {
					margin-bottom: 0;
				}

				& .circuit-route-from,
				& .circuit-route-to {
					padding-left: 10px;
					width: 228px;
				}

				& .circuit-route-arrow {
					font-size: 14px;
					font-weight: 600;
					color: #ce020d;
					padding-top: 24px;
					background: url(../images/icon/circuit.png) no-repeat center 5px / 20px 12px;
				}

				& h3 {
					font-size: 14px;
					font-weight: 600;
				}

				& p {
					font-size: 14px;
					font-weight: 400;
				}
			}
		}
	}

	& .precautions {
		margin-top: 20px;

		p {
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0.075em;
		}
	}
}

/* ===== Loading Overlay ===== */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(2px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.loading-overlay.on {
	display: flex;
}

.loading-container {
	text-align: center;
	padding: 24px 28px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.loading-spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto 10px;
	border: 4px solid #fde4e9;
	border-top-color: #d41e1d;
	/* 主题红 */
	border-radius: 50%;
	animation: et-spin 0.9s linear infinite;
}

.loading-text {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #d41e1d;
	/* 主题红 */
}

@keyframes et-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ===== airport input & popup (copied style from top) ===== */
#ticket-block .conditions .input {
	position: relative;
	width: 100%;
}

#ticket-block .conditions .input .resetBtn {
	position: absolute;
	display: none;
	width: 20px;
	top: 50%;
	right: 10px;
	z-index: 1;
	transform: translateY(-50%);
}

#ticket-block .conditions .input .resetBtn img {
	width: 100%;
	height: auto;
}

/* popup positioning refinement */
#ticket-block .conditions fieldset {
	position: relative;
}

#ticket-block .conditions #popup1,
#ticket-block .conditions #popup2 {
	width: 100%;
	left: 0;
	right: auto;
	top: 44px;
	/* just below the input */
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

#ticket-block .conditions .popup dt {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

#ticket-block .conditions .popup dt:nth-of-type(n+2) {
	margin-top: 10px;
}

#ticket-block .conditions .popup dt strong {
	margin-right: 10px;
}

#ticket-block .conditions .popup dd {
	width: 100%;
	margin: 0;
	padding: 4px 5px 7px;
	background: #DDD;
}

#ticket-block .conditions .popup dd a {
	display: inline-block;
	margin: 5px 5px 0 0;
	padding: 0 5px;
	color: #333;
	font-size: 14px;
	line-height: 160%;
	text-decoration: none;
	border: 1px solid #999;
	border-radius: 3px;
	background: #fff;
}

#ticket-block .conditions .popup dd a:hover {
	background: #FDE4E4;
}

#ticket-block .conditions .popup .close_btn {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
}

#ticket-block .conditions .popup .close_btn p {
	width: 20px;
	margin: 0;
	padding: 0;
}

#ticket-block .conditions .popup .close_btn p img {
	width: 100%;
	height: auto;
	cursor: pointer;
}

#ticket-block .conditions .input input[type="text"] {
	border: 1px solid #bdbdbd;
	width: 100%;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 14px;
	padding: 8px;
	/* right for resetBtn, left for icon */
	outline: none;
}

#ticket-block .conditions .input input[type="text"]:focus {
	border-color: #d41e1d;
}

/* popup background unify */
#ticket-block .conditions #popup1,
#ticket-block .conditions #popup2 {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

#ticket-block .conditions .popup dd {
	background: #f7f7f7;
}