.tabs {
	.tab-list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		list-style: none;
		padding: 0;
		margin: 0;

		.tab-list-item {
			flex: 1 1 20%;
			text-align: center;
			padding: 10px;
			cursor: pointer;
			background: #f0f0f0;
			border: 1px solid #ddd;
			transition: background 0.3s;

			&:hover {
				background: #e0e0e0;
			}

			&.active {
				background: #ddd;
				font-weight: bold;
			}
		}
	}

	.tab-content {
		margin-top: 20px;

		.text-setting {
			button {
				margin-top: 20px;
			}
			.ql-formats {
				vertical-align: bottom;
			}
		}

		.general-item,
		.popup-settings,
		.wheel-settings,
		.wheel-content-item,
		.text-setting-item {
			margin-bottom: 20px;
			display: flex;
			.selectedPages {
				width: 80%;
			}
			.save {
				padding: 10px 20px;
				font-size: 14px;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				transition: background-color 0.3s ease;
		
				&.save {
					background-color: var(--hex-main-color-one);
		
					&:hover {
						background-color: #a760fede;
					}
				}
			}
			label:not(.switchWrap__label) {
				margin-right: 10px;
				display: inline-block;
				width: 200px;
			}
			input:not(.colorPicker):not(.your-name):not(.password):not(.email) {
				width: 80%;
				height: fit-content;
				padding: 6px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			.name, .password, .email {
				flex-grow: 1;
				.switchWrap {
					display: block;
				}
				input {
					margin-top: 10px;
					width: 94%;
					height: fit-content;
					padding: 6px;
					border: 1px solid #ccc;
					border-radius: 4px;
				}
			}
			textarea {
				width: 80%;
				margin-top: 10px;
				padding: 10px;
				
			}
		}
		.wheel-content {
			margin: 20px;
		
			table {
				width: 100%;
				border-collapse: collapse;
				margin-bottom: 20px;
		
				th,
				td {
					padding: 10px;
					border: 1px solid #ddd;
					text-align: center;
		
					&:nth-child(1) {
						width: 5%;
					}
		
					&:nth-child(2),
					&:nth-child(3) {
						width: 20%;
					}
		
					&:nth-child(4) {
						width: 10%;
					}
		
					&:nth-child(5) {
						width: 15%;
					}
		
					&:nth-child(6) {
						width: 10%;
					}
				}
		
				input[type='text'],
				input[type='number'] {
					width: 80%;
					padding: 5px;
					border: 1px solid #ccc;
					border-radius: 4px;
				}
		
				select {
					width: 90%;
					padding: 5px;
					border: 1px solid #ccc;
					border-radius: 4px;
				}
		
				input[type='color'] {
					width: 50px;
					height: 30px;
					border: none;
					padding: 0;
					cursor: pointer;
				}
			}
		
			.save {
				
				padding: 10px 20px;
				font-size: 14px;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				transition: background-color 0.3s ease;
		
				&.save {
					background-color: var(--hex-main-color-one);
		
					&:hover {
						background-color: #a760fede;
					}
				}
			}
		}
		.coupon-setting {
			h1 {
				text-align: center;
				margin-bottom: 20px;
			}
		
			.form-group {
				margin-bottom: 20px;
		
				label {
					display: block;
					font-weight: bold;
					margin-bottom: 5px;
				}
		
				input[type='text'],
				input[type='number'] {
					width: 100%;
					padding: 6px;
					margin-top: 5px;
					border: 1px solid #ccc;
					border-radius: 4px;
				}
		
				input[type='checkbox'] {
					margin-right: 10px;
				}
		
				p {
					margin-top: 5px;
					font-size: 12px;
					color: #666;
				}
			}
		
			.save-button {
				background-color: var(--hex-main-color-one);
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				transition: background-color 0.3s ease;
		
				&:hover {
					background-color: #a760fede;
				}
			}
		}
		.quill {
			min-height: 250px;
			width: 80%;
			margin-bottom: 50px;
			background: #ffffff;
			.ql-editor {
				background: #ffffff;
			}
			.ql-snow, .ql-formats {
				vertical-align: none;
			}
		}		

		.tab-content-item {
			display: none;

			&.active {
				display: block;
			}

			button {
				padding: 8px;
				background-color: #007bff;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				max-width: 100px;
				transition: background-color 0.3s ease;

				&:hover {
					background-color: #0056b3;
				}
			}

			

			form {
				display: flex;
				flex-direction: column;
				gap: 10px;

				label {
					margin-bottom: 5px;
				}

				input,
				select {
					padding: 8px;
					border: 1px solid #ccc;
					border-radius: 4px;
					flex: 1;
				}

				
			}
		}
	}
}

// Responsive styles
@media (max-width: 768px) {
	.tabs {
		.tab-list {
			.tab-list-item {
				flex: 1 1 45%;
			}
		}
	}
}

@media (max-width: 480px) {
	.tabs {
		.tab-list {
			.tab-list-item {
				flex: 1 1 100%;
			}
		}
	}
}