.table-both-steps-wrapper {
	margin-block: 30px 0px;
	margin-inline: auto;
	max-width: 1200px;

	background:
		linear-gradient(#161514, #161514) padding-box,
		linear-gradient(
				0deg,
				#f3981f 0%,
				rgba(116, 116, 116, 0.2) 49%,
				rgba(255, 255, 255, 0.2) 100%
			)
			border-box;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #fff;

	@media (width >= 1200px) {
		border-radius: 24px;
	}

	.steps-button-wrapper {
		padding: 0 12px 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);

		@media (width >= 768px) {
			padding-bottom: 24px;
		}

		@media (width >= 1200px) {
			border-bottom: 0;
		}

		&.oneStep {
			@media only screen and (min-width: 1241px) {
				padding: 24px 50px;
			}

			.table-button.big {
				padding: 10px 18px;
				gap: 10px;
				align-items: center;
				flex-direction: row;
			}
		}
	}

	.prices-button-wrapper-outer {
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		overflow: hidden;
		flex-grow: 1;

		@media (width >= 1200px) {
			padding-bottom: 24px;
		}
	}

	.icon-wrapper {
		position: absolute;
		top: 0;
		bottom: 2px;
		display: flex;
		align-items: center;
		z-index: 99;
		background: #161514;

		&.right {
			right: 0;
			padding-left: 5px;
		}

		&.left {
			left: 0;
			padding-right: 5px;
		}

		@media only screen and (min-width: 768px) {
			bottom: 3px;
		}

		@media only screen and (min-width: 1200px) {
			display: none;
		}

		.icon-inner {
			width: 20px;
			height: 100%;
			max-height: 55px;
			flex-shrink: 0;
			background: #f3981f;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

		.icon {
			flex-shrink: 0;
			display: block;
			width: 6px;
		}
	}

	.prices-button-wrapper {
		overflow-x: auto;
		padding-inline: 25px;
		display: flex;

		scrollbar-color: #242323 #161514;
		scrollbar-width: thin;

		&::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		&::-webkit-scrollbar-track {
			background: #161514;
			border-radius: 10px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #242323;
			border-radius: 10px;
			border: 0;
		}

		@media only screen and (min-width: 992px) {
			justify-content: center;
		}
	}

	.button-wrapper {
		&:has(> * ~ *) {
			@media only screen and (min-width: 1241px) {
				border: 1px solid rgba(166, 166, 166, 0.2);
			}
		}

		@media only screen and (min-width: 1241px) {
			padding: 8px 10px;
			border-radius: 12px;
		}

		&.steps {
			position: relative;
			display: flex;
			justify-content: center;
			width: fit-content;
			padding: 8px;
			margin-top: -54px;
			margin-inline: auto;
			border-radius: 12px;
			border: 1px solid transparent;
			background:
				linear-gradient(to bottom, rgba(25, 24, 23, 1), rgba(25, 24, 23, 1))
					padding-box,
				linear-gradient(
						175deg,
						rgba(255, 255, 255, 0.2) 11.66%,
						rgba(116, 116, 116, 0.2) 51.15%,
						#f3981f 88.34%
					)
					border-box;

			@media (width >= 576px) {
				margin-top: -45px;
			}
		}

		&.prices.active {
			overflow-x: visible;
			display: flex;
			flex-shrink: 0;
			padding: 12px 15px 15px 15px;

			@media only screen and (min-width: 768px) {
				overflow-x: visible;
			}

			@media (width >= 1200px) {
				padding: 8px;
				border-radius: 12px;
				border: 1px solid rgba(255, 255, 255, 0.2);
				width: fit-content;
				margin-inline: auto;
			}

			@media only screen and (min-width: 1241px) {
				padding: 8px 10px;
				flex-shrink: 0;
			}
		}
	}

	.table-button {
		padding: 8px 12px;
		border: 1px solid transparent;
		background: transparent;
		border-radius: 6px;
		color: #f3981f;
		font-weight: 300;
		font-size: 1rem;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		flex-shrink: 0;

		@media only screen and (min-width: 576px) {
			padding: 14px 18px;
		}

		b {
			font-weight: 700;
		}

		.white-text {
			margin-top: 4px;
			display: block;
			font-size: 0.75rem;
			color: #fff;

			@media only screen and (min-width: 576px) {
				font-size: 1rem;
			}
		}

		img {
			flex-shrink: 0;
			width: 24px;

			@media only screen and (min-width: 576px) {
				width: 32px;
			}
		}

		&.active {
			background: linear-gradient(90deg, #201b1a, #242424);
			border-color: #f3981f;
			box-shadow: 0px 2px 21px 0px rgba(243, 152, 31, 0.39);
		}

		&.big {
			padding: 8px 16px;
			display: flex;
			flex-direction: column;
			gap: 5px;
			align-items: start;
			flex-shrink: 1;

			@media only screen and (min-width: 576px) {
				flex-direction: row;
				align-items: center;
				gap: 10px;
				padding: 14px 18px;
			}

			.white-text {
				font-size: 1rem;
			}
		}
	}

	.table-content-inner {
		padding-top: 10px;
	}

	.table-responsive {
		padding-inline: 0 15px;

		@media only screen and (min-width: 768px) {
			padding-inline: 30px;
			margin-bottom: 30px;
		}

		table {
			width: 100%;
			table-layout: fixed;

			th {
				padding: 16px;
				color: #8b827c;
				font-weight: 400;
				font-size: 12px;
				line-height: 22px;
				text-align: center;
				border-bottom: 1px solid rgba(116, 116, 116, 0.2);
				width: 140px;

				@media only screen and (min-width: 768px) {
					font-size: 18px;
					width: auto;
				}

				&:first-child {
					position: sticky;
					left: 0;
					width: 115px;
					padding-left: 8px;
					/* background: #161514; */
					z-index: 2;

					@media only screen and (min-width: 768px) {
						width: 220px;
					}

					@media only screen and (min-width: 992px) {
						width: 300px;
					}
				}
			}

			td {
				padding: 16px;
				font-size: 12px;
				line-height: 22px;
				color: #e3e0e0;
				text-align: center;
				border-bottom: 1px solid rgba(116, 116, 116, 0.2);

				@media only screen and (min-width: 768px) {
					font-size: 18px;
				}

				&:first-child {
					position: sticky;
					left: 0;
					padding-inline: 7px;
					background: #242424;
					z-index: 2;
					border-right: 1px solid rgba(116, 116, 116, 0.2);
					font-weight: 600;
					text-align: left;
					padding-right: 35px;

					@media only screen and (min-width: 768px) {
						background: transparent;
						border-right: none;
						padding-right: 40px;
					}

					@media only screen and (min-width: 992px) {
						padding-right: 60px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 4px;
					}
				}

				span {
					color: #8b827c;
				}
			}

			.tip-holder {
				flex-shrink: 0;
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);

				@media only screen and (min-width: 992px) {
					position: relative;
					top: 0;
					right: 0;
					transform: none;
				}

				.tip-info {
					position: relative;
					display: block;
					border-radius: 50%;
					width: 16px;
					height: 16px;
					background: gray
						url("https://www.traderscale.com/wp-content/uploads/2025/02/info.svg")
						center center no-repeat;
					opacity: 0.4;
					cursor: pointer;
					transition: all 0.2s ease-in;

					&:hover {
						opacity: 1;

						.tooltip-text {
							visibility: visible;
						}
					}
				}

				.tooltip-text {
					position: absolute;
					top: -12px;
					right: -228px;
					visibility: hidden;
					width: 220px;
					color: rgba(227, 224, 224, 1);
					border: 1px solid rgba(116, 116, 116, 0.2);
					border-radius: 8px;
					padding: 7px 12px;
					background: #242424;
					text-align: center;
					font-size: 14px;
					line-height: 17px;
					z-index: 10;
				}
			}
		}
	}

	.table-bottom {
		padding: 32px 15px 35px;
		border-radius: 0 0 12px 12px;
		background: linear-gradient(
			180deg,
			rgba(229, 118, 37, 0),
			rgba(229, 118, 37, 0.15)
		);

		@media only screen and (min-width: 768px) {
			padding: 0 30px 50px;
		}

		@media (width >= 1200px) {
			border-radius: 0 0 24px 24px;
		}

		.code-wrapper {
			margin-block: 30px 27px;
			font-weight: 400;
			font-size: 1.25rem;
			line-height: 1.5;
			color: #e3e0e0;
			text-align: center;

			.use-code {
				display: block;
				font-weight: 600;
				font-size: 1.875rem;
				color: #ffa42f;
			}
		}
	}

	.price-holder {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;

		p {
			margin: 0;
			font-size: 20px;
			line-height: 24px;
			color: rgba(139, 130, 124, 1);
		}

		.price {
			display: flex;
			align-items: center;
			gap: 8px;
			line-height: 1;

			.prev-price {
				padding-inline: 7px;
				position: relative;
				color: rgba(179, 175, 169, 1);
				font-weight: 300;
				font-size: 24px;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 100%;
					height: 1px;
					background: rgba(179, 175, 169, 1);
					z-index: 5;
				}
			}

			.current-price {
				font-weight: 600;
				background: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 40px;
			}
		}
	}
}