// pages/main/travel-location-editor/index.less

.travel-location-editor {
	width: 100vw;
	min-height: 100vh;

	.content {
		padding-bottom: 64rpx;

		.loading {
			display: flex;
			padding: 128rpx 0;
			align-items: center;
			flex-direction: column;

			.text {
				color: var(--theme-text-secondary);
				margin-top: 24rpx;
				font-size: 28rpx;
			}
		}

		.section {
			margin-top: 48rpx;

			> .title {
				color: var(--theme-text-secondary);
				padding: 0 32rpx;
				font-size: 28rpx;
				line-height: 64rpx;
			}

			.location {

				.title {
					width: 2em;
				}
			}

			.picker .slot {
				gap: 16rpx;
				display: flex;
				align-items: center;
			}

			&.media {

				.gallery {
					gap: 10rpx;
					padding: 0 6rpx;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.item {
						width: 240rpx;
						height: 240rpx;
						position: relative;
						overflow: hidden;
						background: var(--theme-bg-card);
						box-shadow: 1px 1px 6px var(--theme-shadow-light);
						border-radius: 2rpx;

						&.add {
							color: var(--theme-wx);
							margin: 0;
							font-size: 80rpx;
							background: transparent;

							&::after {
								border-radius: 0;
							}
						}

						.thumbnail {
							width: 240rpx;
							height: 240rpx;
							display: block;
						}

						.video-container {
							position: relative;


							.play-icon {
								top: 50%;
								left: 50%;
								color: rgba(255, 255, 255, .8);
								z-index: 2;
								position: absolute;
								font-size: 128rpx;
								transform: translate(-50%, -50%);
								text-shadow: 4rpx 4rpx 0 rgba(0, 0, 0, .5);
								pointer-events: none;
							}
						}

						.delete {
							top: 10rpx;
							right: 10rpx;
							color: rgba(255, 255, 255, .6);
							z-index: 3;
							position: absolute;
							font-size: 45rpx;

							&::after {
								content: "";
								top: 0;
								width: 100%;
								height: 100%;
								z-index: -1;
								position: absolute;
								background: rgba(0, 0, 0, .6);
								border-radius: 50%;
							}
						}

						.new-badge {
							top: 10rpx;
							left: 10rpx;
							color: var(--theme-wx);
							z-index: 3;
							display: flex;
							position: absolute;
							font-size: 45rpx;
							text-shadow: 4rpx 4rpx 0 rgba(0, 0, 0, .5);
						}
					}
				}
			}
		}

		.media-section {
			margin-top: 48rpx;
			padding: 32rpx;
			background: var(--theme-bg-card);

			.section-title {
				color: var(--theme-text-primary);
				margin-bottom: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.media-grid {
				gap: 24rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);

				.media-item {
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					position: relative;
					border-radius: 12rpx;

					.media-img {
						width: 100%;
						height: 100%;
					}

					.video-badge {
						top: 50%;
						left: 50%;
						display: flex;
						position: absolute;
						transform: translate(-50%, -50%);
						align-items: center;
						justify-content: center;
					}

					.media-delete {
						top: 8rpx;
						right: 8rpx;
						width: 48rpx;
						height: 48rpx;
						display: flex;
						position: absolute;
						background: rgba(0, 0, 0, .5);
						align-items: center;
						border-radius: 50%;
						justify-content: center;
					}
				}

				.media-add {
					width: 100%;
					height: 200rpx;
					display: flex;
					align-items: center;
					border-radius: 12rpx;
					justify-content: center;
					background: var(--theme-bg-page);
					border: 2rpx dashed var(--theme-border);
				}
			}
		}

		.upload-info {
			gap: 16rpx;
			display: flex;
			padding: 24rpx 32rpx;
			margin-top: 24rpx;
			align-items: center;
			border-radius: 12rpx;
			background: var(--theme-bg-card);

			.upload-text {
				color: var(--theme-text-secondary);
				font-size: 28rpx;
			}
		}

		.submit-section {
			gap: 24rpx;
			display: flex;
			padding: 24rpx 16rpx 48rpx 16rpx;
			margin-top: 64rpx;

			.delete-btn {
				flex: .6;
			}

			.submit-btn {
				flex: 1;
			}
		}
	}
}

.delete-dialog {
	padding: 16rpx 0;

	.tips {
		color: var(--theme-text-secondary);
		font-size: 28rpx;
		line-height: 1.5;
		margin-bottom: 24rpx;
	}
}