* {
	margin: 0;
	padding: 0;
}

body {
	overflow-y: auto;
	overflow-x: hidden;
	background: #26292f;
}

a {
	text-decoration: none;
	/*确保在浏览器中显示链接时，没有任何文本装饰，如下划线。*/
}

.putunbat {
	max-width: 640px;
	min-width: 300px;
	margin: 0 auto;
}

.bat-usti {
	width: 100%;
	height: 180px;
	background: linear-gradient(90deg, #ffe74f, #ffcd0c);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	direction: rtl;
}

.bat-usti_xakil {
	position: absolute;
	/* 绝对定位 */
	top: 0;
	left: 0;
	width: 100%;
	/* 宽度铺满 */
	height: 100%;
	/* 高度铺满 */
	display: block;
	/* span是行内元素，需转为块级 */
}

/* 图片适配铺满第一个span */
.bat-usti span:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 保持图片比例，裁剪超出部分（可选） */
	object-position: center;
	/* 图片居中显示（可选） */
}

.bat-usti_rasim {
    width: 90%;
    height: 85px;
    padding: 0 0px; /* 内边距，避免内容贴边 */
    box-sizing: border-box; /* 内边距计入宽高，防止超出 */
    display: flex;
    flex-direction: column; /* 上下分行布局 */
    justify-content: space-between; /* 两行均匀分布，垂直居中 */
    font-family: "ALKATIP Tor Tom", sans-serif; /* 维吾尔语字体 */
    direction: rtl; /* 核心：设置整体右到左排版，适配维吾尔语 */
    margin-bottom: 20px;
}

/* 第一行样式 */
.top-row {
    display: flex; /* 横向排列 */
    align-items: center; /* 垂直居中 */
    width: 80%; /* 占满容器宽度 */
	gap: 10px;
	justify-content: space-between;
	margin-right: 20px;
}
.avatar {
    width: 50px; /* 头像宽度 */
    height: 50px;
    border-radius: 50%; /* 圆形头像 */
    border: 1px solid #fff;
    object-fit: cover; /* 防止图片变形 */
}
.name-text {
	width: 50%;
    color: #26292f;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	padding-left: 50px;
	background: red;
}
.id-text {
    color: #26292f;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 第二行样式 */
.bottom-row {
	white-space: nowrap;
    display: flex; /* 横向排列 */
	justify-content: space-between;
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 元素间间距 */
    width: 80%; /* 占满容器宽度 */
	height: 60px;
	direction: rtl;
	margin-right: 30px;
	margin-top: 10px;
}
.bottom-row span {
    width: 60px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.time-text {
    width: 30px;
    height: 60px;
    color: #26292f;
    font-size: 0.8rem; /* 时间字体稍小 */
	/*margin-left: -70%;*/
	/*margin-top: 97px;*/
    font-family: "ALKATIP Tor Tom";
}

.vip-icon {
    width: 50px; /* VIP图标宽度 */
}

.Order {
	width: 90%;
	height: 100px;
	position: absolute;
	background: #fff;
	margin-top: 200px;
	/* 白色背景，突出显示 */
	border-radius: 12px;
	/* 圆角美化 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	/* 阴影提升层次感 */
	box-sizing: border-box;
	/* 内边距不影响宽高 */
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	direction: rtl;
	font-family: "ALKATIP Tor Tom";
	font-size: 0.8rem;
}

.Order_my {
	width: 20%;
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	color: #6c7380;
}

.Order_my img {
	width: 45px;
	height: 45px;
}

.vip_uqur {
	width: 100%;
	height: 90px;
	background: #1f2125;

}

.vip_uqur1 {
	width: 90%;
	height: 80px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	direction: rtl;
	border-bottom: 1px solid;
}

.vip_uqur1 span {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	color: #cfd1d7;
	font-family: "ALKATIP Tor Tom";
}

.vip_uqur1 span:nth-child(1) img {
	width: 35px;
	height: 30px;
	filter: invert(100%);
}

.vip_uqur1 span:nth-child(2) img {
	width: 30px;
	height: 30px;
	transform: rotate(-90deg);
}

/* 弹窗蒙层 */
		  .vip-modal-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.75);
			display: flex;
			align-items: flex-start; /* 取消垂直居中，改为顶部对齐 */
			justify-content: center;
			padding-top: 10vh; /* 原12vh → 增大数值让弹窗更往下，手机端生效 */
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.4s ease, visibility 0.4s ease;
			backdrop-filter: blur(2px);
			font-family: "ALKATIP Tor Tom";
		  }
	  
		  .vip-modal-mask.active {
			opacity: 1;
			visibility: visible;
		  }
	  
		  /* 弹窗内容 */
		  .vip-modal-content {
			width: 80%;
			max-width: 380px;
			background-color: #fff;
			border-radius: 20px;
			padding: 28px 24px;
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
			transform: translateY(-20px) scale(0.98);
			transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;
		  }
	  
		  .vip-modal-mask.active .vip-modal-content {
			transform: translateY(0) scale(1);
		  }
	  
		  /* 弹窗标题（高级VIP图标） */
		  .vip-modal-title {
			font-size: 22px;
			font-weight: 700;
			color: #222;
			text-align: center;
			margin-bottom: 24px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
		  }
	  
		  .vip-modal-title .vip-icon {
			font-size: 24px;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			filter: drop-shadow(0 0 2px #FFA500);
			animation: pulse 2s infinite alternate;
		  }
	  
		  @keyframes pulse {
			from { transform: scale(1); }
			to { transform: scale(1.1); }
		  }
	  
		  .vip-modal-close {
			position: absolute;
			top: -8px;
			right: 0;
			width: 36px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			font-size: 24px;
			color: #ccc;
			cursor: pointer;
			border-radius: 50%;
			transition: all 0.4s ease;
			font-weight: 300;
		  }
	  
		  .vip-modal-close:hover {
			background-color: #f8f8f8;
			color: #FF8C00;
			transform: rotate(90deg);
		  }
	  
		  /* 套餐列表 */
		  .vip-package-list {
		    display: none;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			margin-bottom: 28px;
		  }
	    .vip-modal-mask.active .vip-package-list {
    display: grid; /* 弹窗显示时，用grid布局展示列表 */
}
		  /* 套餐项样式（彩色幻彩流星边框+原配色打勾） */
		  .vip-package-item {
			background-color: #f9f9f9;
			border: 2px solid #f1f1f1;
			border-radius: 16px;
			padding: 20px 14px;
			text-align: center;
			cursor: pointer;
			transition: all 0.4s ease;
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
		  }
	  
		  .vip-package-item.active {
			border-color: transparent;
			background: linear-gradient(135deg, #FFF8DC 0%, #FFF3E0 100%);
			box-shadow: 0 4px 12px rgba(255, 165, 0, 0.1);
			position: relative;
		  }
	  
		  .vip-package-item.active::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 14px;
			padding: 2px;
			background: linear-gradient(90deg, #FF3366, #FF9900, #FFCC00, #33CC33, #3399FF, #9933FF, #FF3366);
			background-size: 300% 100%;
			animation: shimmer 3s linear infinite;
			-webkit-mask: 
			  linear-gradient(#fff 0 0) content-box, 
			  linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			z-index: 0;
		  }
	  
		  @keyframes shimmer {
			0% { background-position: 0% 0; }
			100% { background-position: 300% 0; }
		  }
	  
		  .vip-package-item.active::after {
			content: '✓';
			position: absolute;
			top: 0;
			right: 0;
			width: 24px;
			height: 24px;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			border-radius: 0 14px 0 14px;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
		  }
	  
		  .vip-package-item .package-content {
			position: relative;
			z-index: 1;
		  }
	  
		  .vip-package-item:hover {
			border-color: #FFCC80;
			background-color: #FFF8DC;
			transform: translateY(-2px);
		  }
	  
		  .package-name {
			font-size: 15px;
			color: #333;
			font-weight: 600;
			margin-bottom: 6px;
		  }
	  
		  .package-price {
			font-size: 20px;
			color: #FF6B35;
			font-weight: 700;
			margin-bottom: 4px;
		  }
	  
		  .package-desc {
			font-size: 12px;
			color: #888;
			margin-top: 4px;
			line-height: 1.2;
		  }
	  
		  /* 确认按钮 */
		  .vip-confirm-btn {
			width: 100%;
			height: 52px;
			line-height: 52px;
			text-align: center;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
			color: #fff;
			border-radius: 26px;
			border: none;
			font-size: 17px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.4s ease;
			box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
			position: relative;
			overflow: hidden;
			font-family: "ALKATIP Tor Tom";
		  }
	  
		  .vip-confirm-btn::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
			transition: left 0.8s ease;
		  }
	  
		  .vip-confirm-btn:hover::after {
			left: 100%;
		  }
	  
		  .vip-confirm-btn:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, #E6C200 0%, #E69500 50%, #E67C00 100%);
			box-shadow: 0 2px 8px rgba(255, 140, 0, 0.2);
		  }
		
		.vip-package-item {
    cursor: pointer;
    transition: all 0.3s;
}