/* components/travel-location-popup/index.less */
.detail-panel {
	width: 100%;
	height: 70vh;
	display: flex;
	border-radius: 16rpx 16rpx 0 0;
	flex-direction: column;

	.detail-content {
		flex: 1;
		display: flex;
		overflow: hidden;
		flex-direction: column;

		> .header {
			display: flex;
			padding: 32rpx 32rpx 0 32rpx;
			flex-shrink: 0;
			align-items: flex-start;
			margin-bottom: 24rpx;
			justify-content: space-between;

			.info {
				flex: 1;
				display: flex;
				overflow: hidden;
				flex-direction: column;

				.title-row {
					gap: 8rpx;
					display: flex;
					overflow: hidden;
					align-items: center;
					margin-bottom: 8rpx;

					.type-icon {
						color: var(--theme-wx);
						font-size: 36rpx;
						flex-shrink: 0;
					}

					.title {
						flex: 1;
						overflow: hidden;
						font-size: 32rpx;
						font-weight: 600;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.location {
					gap: 4rpx;
					display: flex;
					align-items: center;

					.icon {
						color: var(--theme-wx);
						font-size: 28rpx;
						flex-shrink: 0;
					}

					.text {
						flex: 1;
						overflow: hidden;
						font-size: 24rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.actions {
				gap: 16rpx;
				display: flex;
				flex-shrink: 0;
				align-items: center;

				.indicator {
					color: var(--theme-wx);
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					font-weight: bold;
					background: var(--theme-bg-card);
					border-radius: 12rpx;
				}
			}
		}

		.locations-swiper {
			flex: 1;
			height: 100%;

			.swiper-item-wrapper {
				height: 100%;

				.location-scroll {
					height: 100%;

					.location-item {
						display: flex;
						padding: 0 32rpx 128rpx 32rpx;
						flex-direction: column;

						.tags {
							gap: 12rpx;
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 24rpx;
						}

						.description {
							color: var(--td-text-color-primary);
							font-size: 28rpx;
							line-height: 1.6;
							white-space: pre-wrap;
							word-break: break-word;
							margin-bottom: 16rpx;
						}

						.items {
							gap: 8rpx;
							display: flex;
							align-items: flex-start;

							.column {
								flex: 1;
								display: flex;
								flex-direction: column;

								.item {
									overflow: hidden;
									background: var(--theme-bg-card);
									margin-bottom: 8rpx;

									&.thumbnail {
										width: 100%;
										display: block;
									}

									&.video {
										position: relative;

										&::after {
											content: "";
											top: 50%;
											left: 53%;
											width: 0;
											height: 0;
											position: absolute;
											transform: translate(-50%, -50%);
											border-top: 16px solid transparent;
											border-left: 24px solid var(--theme-video-play);
											border-bottom: 16px solid transparent;
											pointer-events: none;
										}
									}
								}
							}
						}

						.empty {
							color: var(--td-text-color-placeholder);
							padding: 64rpx 0;
							font-size: 28rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
}