watch-strap-configurator {
	display: block;
	padding: 60px 0;
	margin: 0 auto;
	overflow: hidden;
	background-color: #efefef;

	.watch-styles-tabs {
		display: flex;
		justify-content: center;
		gap: 1rem;
		flex-wrap: wrap;
	}

	.watch-faces-tabs {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-bottom: 0rem;
		flex-wrap: wrap;
	}

	.watch-style-tab,
	.watch-face-tab {
		padding: 0.75rem 1.5rem;
		border: 0px solid #e5e5e5;
		border-radius: 0px;
		font-family: "Nordbold";
		cursor: pointer;
		color: #00000040;
		background-color: transparent;
		transition: all 0.3s ease;

		&.watch-face-tab {
			font-size: 25px;
		}

		&.active {
			background-color: transparent;
			color: #000;
			border-color: #000;
		}
	}

	.watch-display {
		position: relative;
		width: 100%;
		margin: 40px auto 0;

		.swiper {
			position: relative;
			opacity: 0;
			overflow: visible;

			@media (min-width: 769px) {
				width: 90%;
			}

			@media (max-width: 768px) {
				width: 100%;
			}

			&.swiper-initialized {
				opacity: 1;
			}

			&:before,
			&:after {
				content: "";
				display: block;
				background-color: #efefef;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				z-index: 2;
			}

			&:before {
				right: 100%;
			}

			&:after {
				left: 100%;
			}

			.swiper-slide {
				position: relative;
				padding: 20px 10px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				border: 1px solid transparent;

				&.swiper-slide-active {
					border-color: #D9D9D9;

					.strap-slide {
						transform: scale(1.05);
						z-index: 5;
						transition: transform 0.3s ease;
					}
				}

				.swiper-slide-inner {
					position: relative;
					width: 100%;
					aspect-ratio: 224 / 319;

					.strap-layer {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						padding: 0px 15px;
						box-sizing: border-box;

						img {
							width: 100%;
							height: 100%;
							object-fit: contain;
							pointer-events: none;
						}

						@media (max-width: 768px) {
							padding: 0px 10px;
						}
					}

					.watch-face {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						transition: opacity 0.3s ease;
						z-index: 2;
						visibility: hidden;
						box-sizing: border-box;

						&.active {
							opacity: 1;
							visibility: visible;
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: contain;
							pointer-events: none;
						}

						@media (max-width: 768px) {
							padding: 0px 10px;
						}
					}
				}
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: flex;
				align-items: center;
				justify-content: center;
				color: black;
				width: 15px;
				height: 29px;
				z-index: 10;
				top: 50%;
				transform: translateY(-50%);

				&::after {
					font-size: 20px;
					font-weight: bold;
				}

				&.swiper-button-disabled {
					opacity: 0.5;
				}

				@media (max-width: 768px) {
					width: 40px;
					height: 40px;

					&::after {
						font-size: 16px;
					}
				}
			}

			.swiper-button-prev {
				content: url("data:image/svg+xml,%3Csvg width='17' height='31' viewBox='0 0 17 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 0.747559L0.833334 15.4142L15.5 30.0809' stroke='%23111111' stroke-linecap='square'/%3E%3C/svg%3E");
				left: -40px;
			}

			.swiper-button-next {
				content: url("data:image/svg+xml,%3Csvg width='17' height='31' viewBox='0 0 17 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.747559L16.1667 15.4142L1.5 30.0809' stroke='%23111111' stroke-linecap='square'/%3E%3C/svg%3E");
				right: -40px;
			}

			.swiper-pagination {
				position: relative;
				display: flex;
				justify-content: center;
				gap: 15px;
				bottom: 0;
				margin-top: 40px;
				text-align: center;
				visibility: hidden;

				&.pagination-initialized {
					visibility: visible;
				}

				.swiper-pagination-bullet {
					width: 6px;
					height: 6px;
					margin: 0;
					background: #000;
					opacity: 1;
					transition: all 0.3s ease;

					&.swiper-pagination-bullet-active {
						background: #8F8F8F;
						opacity: 1;
					}
				}

				@media (max-width: 768px) {
					margin-top: 10px;
				}
			}
		}
	}

	.strap-info {
		text-align: center;
		margin-top: 40px;

		.strap-name {
			font-size: 14px;
		}

		.strap-price {
			font-size: 18px;
			font-weight: 600;
		}

		.purchase-options {
			display: flex;
			justify-content: center;
			gap: 1rem;
			flex-wrap: wrap;
			margin-top: 40px;

			.add-to-cart:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}
}