// 积分限时购整体区域
.credits_sale_section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	// 标题区域样式 - 参考会员活动
	.credits_sale_area {
		width: 686rpx;
		height: auto;
		margin-top: 62rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.credits_sale_title {
			font-size: 30rpx;
			font-weight: 600;
			margin-left: 16rpx;
			color: #1d1e25;

			// 不同等级的文字颜色
			&.item-0 {
				color: #503404; // LV1 深金色
			}
			&.item-1 {
				color: #284A6C; // LV2 深蓝色
			}
			&.item-2 {
				color: #322D6F; // LV3 深紫色
			}
			&.item-3 {
				color: #503404; // LV4 深金色
			}
			&.item-4 {
				color: #FFF0DF; // LV5 浅金色
			}
		}
	}

	// 积分限时购容器样式
	.credits_sale_container {
		box-sizing: border-box;
		width: 686rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		// 背景色通过内联样式动态设置

		// Tab切换区域样式 - 匹配截图中的不规则形状效果
		.credits_sale_tabs {
			width: 100%; // 使用100%宽度，自动适应容器宽度
			border-radius: 30rpx; // 与容器圆角保持一致
			display: flex;
			position: relative;
			overflow: visible; // 改为visible，让三角形能显示出来
			// 背景色通过内联样式动态设置
			padding-bottom: 20px;

			// 2场秒杀：平分区域
			&.session_count_2 {
				.tab_item {
					flex: 1;
					width: 50%;
				}
			}

			// 3场及以上：固定三分之一宽度，支持滑动
			&.session_count_3_plus {
				overflow-x: auto;
				overflow-y: hidden;
				scrollbar-width: none; // Firefox
				-ms-overflow-style: none; // IE/Edge
				
				&::-webkit-scrollbar {
					display: none; // Chrome/Safari
				}

				.tab_item {
					flex: 0 0 33.333%;
					width: 33.333%;
					min-width: 33.333%;
				}
			}

			.tab_item {
				text-align: center;
				padding: 15rpx 8rpx;
				position: relative;
				cursor: pointer;
				color: #503404;
				box-sizing: border-box;
				// 防止tab切换时出现阴影闪现的关键样式
				-webkit-tap-highlight-color: transparent;  // 移除移动端点击高亮
				-webkit-touch-callout: none;               // 禁用长按菜单
				outline: none;                             // 移除焦点轮廓
				-webkit-appearance: none;                  // 移除默认外观
				appearance: none;                          // 标准属性

				&.active {
					color: #1C1C1C;
					font-weight: bold;
					background-color: transparent;
					position: relative;
				}

				// 弧形三角形样式 - 使用base64 SVG背景图
				.triangle-left {
					position: absolute;
					left: -99rpx;
					top: 0;
					pointer-events: none;
					width: 200rpx;
					height: 102%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: center;
				}

				.triangle-right {
					position: absolute;
					right: -99rpx;
					top: 0;
					pointer-events: none;
					width: 200rpx;
					height: 102%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: center;
				}

				// 背景色元素样式
				.tab_bg_element {
					position: absolute;
					left: 50rpx;
					right: 50rpx;
					top: 0;
					bottom: -18rpx;
					// 背景色通过内联样式动态设置
				}

				// 多场秒杀内容区域样式
				.tab_content_ongoing {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					position: relative;

					.tab_time_info {
						margin-bottom: 18rpx;

						.tab_time_text {
							&.countdown_display {
								.countdown_numbers {
									display: flex;
									align-items: center;
									justify-content: center;
									gap: 4rpx;
								}

								.countdown_unit {
									display: flex;
									align-items: center;
								}

								.countdown_number {
									display: inline-block;
									width: 36rpx;
									height: 36rpx;
									// 背景色通过内联样式动态设置
									color: #fff;
									border-radius: 4rpx;
									text-align: center;
									line-height: 36rpx;
									font-size: 16rpx;
									font-weight: bold;
								}

								.countdown_colon {
									// 颜色通过内联样式动态设置
									font-size: 16rpx;
									font-weight: bold;
									margin: 0 2rpx;
								}
							}
						}
					}

					.session_status_tag {
						&.ongoing {
							.status_text {
								// 颜色通过内联样式动态设置
								font-weight: bold;
								font-size: 20rpx;
							}
						}
					}
				}

				.tab_content_other {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					position: relative;

					.tab_time_info {
						margin-bottom: 6rpx;

						.tab_time_text {
							&.start_time_text {
								font-size: 30rpx;
								font-weight: 600;
								// 颜色通过内联样式动态设置
							}
						}
					}

					.session_status_tag {
						&.upcoming {
							.upcoming_text {
								// 颜色通过内联样式动态设置
								font-weight: bold;
								font-size: 20rpx;
							}
						}

						&.ended {
							.ended_text {
								// 颜色通过内联样式动态设置
								font-weight: bold;
								font-size: 20rpx;
							}
						}
					}
				}

				// 保留原有样式作为备用
				.session_status_tag {
					margin-bottom: 6rpx;

					&.ongoing {
						.status_text {
							color: #1C1C1C;
							font-weight: bold;
							font-size: 20rpx;
						}
					}

					&.upcoming {
						.countdown_text {
							color: #666;
							font-size: 18rpx;
						}
					}
				}

				.tab_time_info {
					.tab_time_text {
						font-size: 16rpx;
						color: #666;
					}
				}
			}
		}

		// 当前场次内容区域
		.current_session_content {
			padding-top: 20rpx;
			margin-top: -40rpx;
			border-radius: 0rpx 30rpx 30rpx 30rpx;
			position: relative;
			// 背景色通过内联样式动态设置
		}

		// 场次商品列表容器
		.session_goods_list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			justify-content: flex-start;

			// 3个及以上商品：不换行，支持滚动
			&.goods_count_3_plus {
				flex-wrap: nowrap;
				overflow-x: auto;
				overflow-y: hidden;
				scrollbar-width: none; // Firefox
				-ms-overflow-style: none; // IE/Edge
				gap: 24rpx;
				
				&::-webkit-scrollbar {
					display: none; // Chrome/Safari
				}

				.credits_sale_good_item {
					flex-shrink: 0;
					width: 220rpx; // 固定宽度，不压缩
				}
			}

			.credits_sale_good_item {
				flex-shrink: 0;
				width: 220rpx; // 固定宽度220rpx
				height: 380rpx; // 固定高度380rpx
				border-radius: 16rpx;
				padding: 15rpx;
				display: flex;
				flex-direction: column;

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

				.good_image_placeholder {
					width: 100%;
					height: 220rpx; // 正方形，宽度撑满父级
					background: #f5f5f5;
					border-radius: 18rpx;
					margin-bottom: 18rpx;
					position: relative;
					overflow: hidden;

					.good_image {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 18rpx;
					}
				}

				.good_name {
					font-size: 24rpx;
					// 颜色通过内联样式动态设置
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					margin-bottom: 8rpx;
				}

				.good_price_container {
					display: flex;
					align-items: center;
					gap: 8rpx;
					margin-bottom: 8rpx;

					.good_price {
						font-size: 24rpx;
						// 颜色通过内联样式动态设置
					}

					.good_original_price {
						font-size: 20rpx;
						color: #999999;
						text-decoration: line-through;
					}
				}

				.credits_sale_button {
					width: 100%;
					height: 50rpx;
					border-radius: 25rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					// 背景色通过内联样式动态设置

					&.disabled {
						background: #B9B9B9;
						cursor: not-allowed;
					}

					.credits_sale_button_text {
						font-size: 24rpx;
						color: #fff;
						font-weight: 500;
					}

					&.disabled .credits_sale_button_text {
						color: #fff;
					}
				}
			}

			// 1个商品时的特殊布局
			&.goods_count_1 {
				display: flex;
				justify-content: center;
				overflow: visible;

				.credits_sale_good_item {
					width: 100%;
					max-width: 600rpx;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					padding: 25rpx;
					border-radius: 20rpx;

					.good_image_placeholder {
						width: 260rpx;
						height: 260rpx;
						border-radius: 18rpx;
						flex-shrink: 0;
						position: relative;
						overflow: hidden;
						background: #f5f5f5;

						.good_image {
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 18rpx;
						}
					}

					.good_info_container {
						width: 310rpx;
						height: 260rpx;
						margin-left: 40rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}

					.good_name {
						font-size: 28rpx;
						margin-bottom: 16rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.4;
						white-space: break-spaces;
					}

					.good_price_container {
						margin-bottom: 24rpx;
					}

					.credits_sale_button {
						height: 70rpx;
					}
				}
			}

			// 2个商品时的特殊布局
			&.goods_count_2 {
				justify-content: center;
				gap: 58rpx; // 2个商品间距58rpx
			}
		}
	}

	// 单场次状态显示样式
	.single_session_status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 34rpx;

		.session_status_tag {
			&.ongoing {
				.status_text {
					// 颜色通过内联样式动态设置
					// font-weight: bold;
					font-size: 40rpx;
				}
			}

			&.upcoming {
				.upcoming_text {
					// 颜色通过内联样式动态设置
					font-weight: bold;
					font-size: 40rpx;
				}
			}

			&.ended {
				.ended_text {
					// 颜色通过内联样式动态设置
					font-weight: bold;
					font-size: 40rpx;
				}
			}
		}

		.tab_time_info {
			.tab_time_text {
				font-size: 20rpx;
				// 颜色通过内联样式动态设置
				font-weight: bold;
				display: flex;
				align-items: center;
				gap: 8rpx;

				// 开始时间样式（即将开始状态）
				&.start_time_text {
					font-size: 30rpx;
					font-weight: 100;
					// 颜色通过内联样式动态设置
				}

				// 倒计时数字样式
				&.countdown_display {
					.countdown_label {
						color: #B27C1E;
						font-size: 36rpx;
                        font-weight: 100;
					}

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

					.countdown_unit {
						display: flex;
						align-items: center;
					}

					.countdown_number {
						display: inline-block;
						width: 34rpx;
						height: 34rpx;
						// 背景色通过内联样式动态设置
						color: #fff;
						border-radius: 6rpx;
						text-align: center;
						line-height: 34rpx;
						font-size: 18rpx;
						font-weight: bold;
					}

					.countdown_colon {
						// 颜色通过内联样式动态设置
						font-size: 20rpx;
						font-weight: bold;
						margin: 0 4rpx;
					}
				}
			}
		}
	}
}
