@import '~@/uni.scss';

/* ========================================
   全局样式 - yshop-drink-uniapp
   统一规范：使用SCSS变量，简短BEM-like命名
   ======================================== */

/* ====== Reset & Base ====== */
page,
view,
scroll-view,
text,
image,
textarea,
button,
input {
	box-sizing: border-box;
}

page {
	background-color: $bg-color-grey;
	min-height: 100%;
}

image {
	max-width: 100%;
	height: auto;
}

.container {
	width: 100%;
	height: 100%;
}

/* ====== Button Reset ====== */
button {
	margin: 0;

	&[type='primary'] {
		background-color: $color-primary;
		color: #ffffff;
		font-size: $font-size-base;

		&[disabled] {
			opacity: $opacity-disabled;
		}

		&[plain] {
			color: $color-primary;
			border: 1rpx solid $color-primary;
		}

		&.button-hover {
			opacity: 0.8;
		}

		&::after {
			border: 0;
		}
	}

	&[type='default'] {
		&[plain] {
			color: $text-color-assist;
			border: 1rpx solid $text-color-assist;
		}
	}
}

/* ====== Vant Override ====== */
:root {
	--van-primary-color: $color-primary;
}

.van-grid-item__content {
	padding: 0 var(--van-padding-base);
}

.van-button {
	border-radius: 0;
}

.van-button--mini {
	font-size: 24rpx;
}

/* ====== uv-ui Override ====== */
.uv-button--info {
	border-color: $text-color-base !important;
	color: $text-color-base !important;
}

/* ====== Iconfont ====== */
.iconfont {
	font-family: iconfont;
}

/* ====== Display ====== */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex; }
.invisible { visibility: hidden !important; }

/* ====== Flex Layout ====== */
.flex { display: flex; flex-direction: row; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* ====== Flex Alignment ====== */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly !important; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.align-baseline { align-items: baseline !important; }

/* ====== Grid System ====== */
.row {
	margin-right: -20rpx;
	margin-left: -20rpx;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
	position: relative;
	padding-right: 20rpx;
	padding-left: 20rpx;
}

.col-12 { width: 750rpx; }
.col-11 { width: 687.5rpx; }
.col-10 { width: 625rpx; }
.col-9 { width: 562.5rpx; }
.col-8 { width: 500rpx; }
.col-7 { width: 437.5rpx; }
.col-6 { width: 375rpx; }
.col-5 { width: 312.5rpx; }
.col-4 { width: 250rpx; }
.col-3 { width: 187.5rpx; }
.col-2 { width: 125rpx; }
.col-1 { width: 62.5rpx; }

.col-offset-12 { margin-left: 750rpx; }
.col-offset-11 { margin-left: 687.5rpx; }
.col-offset-10 { margin-left: 625rpx; }
.col-offset-9 { margin-left: 562.5rpx; }
.col-offset-8 { margin-left: 500rpx; }
.col-offset-7 { margin-left: 437.5rpx; }
.col-offset-6 { margin-left: 375rpx; }
.col-offset-5 { margin-left: 312.5rpx; }
.col-offset-4 { margin-left: 250rpx; }
.col-offset-3 { margin-left: 187.5rpx; }
.col-offset-2 { margin-left: 125rpx; }
.col-offset-1 { margin-left: 62.5rpx; }
.col-offset-0 { margin-left: 0; }

/* ====== Width & Height ====== */
.w-25 { width: 25% !important; }
.w-40 { width: 40%; }
.w-50 { width: 50% !important; }
.w-60 { width: 60%; }
.w-75 { width: 75% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ====== Margin ====== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.m-1 { margin: 10rpx; }
.m-2 { margin: 20rpx; }
.m-3 { margin: 30rpx; }
.m-4 { margin: 40rpx; }
.m-5 { margin: 50rpx; }

.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; }
.mt-4 { margin-top: 40rpx; }
.mt-5 { margin-top: 50rpx; }

.mb-0 { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }
.mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; }
.mb-4 { margin-bottom: 40rpx; }
.mb-5 { margin-bottom: 50rpx; }

.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; }
.ml-3 { margin-left: 30rpx; }
.ml-4 { margin-left: 40rpx; }
.ml-5 { margin-left: 50rpx; }

.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; }
.mr-3 { margin-right: 30rpx; }
.mr-4 { margin-right: 40rpx; }
.mr-5 { margin-right: 50rpx; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }

/* ====== Padding ====== */
.p-0 { padding: 0; }
.p-1 { padding: 10rpx; }
.p-2 { padding: 20rpx; }
.p-3 { padding: 30rpx; }
.p-4 { padding: 40rpx; }
.p-5 { padding: 50rpx; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 10rpx; }
.pt-2 { padding-top: 20rpx; }
.pt-3 { padding-top: 30rpx; }
.pt-4 { padding-top: 40rpx; }
.pt-5 { padding-top: 50rpx; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 10rpx; }
.pb-2 { padding-bottom: 20rpx; }
.pb-3 { padding-bottom: 30rpx; }
.pb-4 { padding-bottom: 40rpx; }
.pb-5 { padding-bottom: 50rpx; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 10rpx; }
.pl-2 { padding-left: 20rpx; }
.pl-3 { padding-left: 30rpx; }
.pl-4 { padding-left: 40rpx; }
.pl-5 { padding-left: 50rpx; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 10rpx; }
.pr-2 { padding-right: 20rpx; }
.pr-3 { padding-right: 30rpx; }
.pr-4 { padding-right: 40rpx; }
.pr-5 { padding-right: 50rpx; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
.px-5 { padding-left: 50rpx; padding-right: 50rpx; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }

/* ====== Typography - Font Size ====== */
.font-smaller { font-size: 15rpx; }
.font-small { font-size: 20rpx; }
.font-sm { font-size: 25rpx; }
.font { font-size: 30rpx; }
.font-md { font-size: 35rpx; }
.font-lg { font-size: 40rpx; }
.font-size-sm { font-size: $font-size-sm; }
.font-size-base { font-size: $font-size-base; }
.font-size-medium { font-size: 26rpx; }
.font-size-lg { font-size: $font-size-lg; }
.font-size-extra-lg { font-size: 40rpx; }

.h1 { font-size: 80rpx; line-height: 1.8; }
.h2 { font-size: 60rpx; line-height: 1.8; }
.h3 { font-size: 45rpx; line-height: 1.8; }
.h4 { font-size: 32rpx; line-height: 1.8; }
.h5 { font-size: 30rpx; line-height: 1.8; }
.h6 { font-size: 28rpx; line-height: 1.8; }

/* ====== Typography - Font Weight ====== */
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: 100 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: 900 !important; }
.font-italic { font-style: italic; }

/* ====== Typography - Color ====== */
.text-base { color: $text-color-base; }
.text-assist { color: $text-color-assist; }
.text-primary { color: $color-primary; }
.text-success { color: $color-success; }
.text-warning { color: $color-warning; }
.text-danger { color: $color-error; }
.text-white { color: #ffffff; }
.text-dark { color: $text-color-base; }
.text-muted { color: $text-color-assist; }
.text-light-muted { color: $text-color-light-muted; }
.text-light-black { color: rgba(0, 0, 0, 0.5); }
.text-light-white { color: rgba(255, 255, 255, 0.5); }

/* ====== Typography - Alignment ====== */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* ====== Typography - Decoration ====== */
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-through { text-decoration: line-through; }

.line-height-100 { line-height: 100%; }
.line-height-2 { line-height: 2rem !important; }

/* ====== Background ====== */
.bg-base { background-color: $bg-color; }
.bg-white { background-color: #ffffff; }
.bg-transparent { background-color: transparent !important; }
.bg-primary { background-color: $color-primary; }
.bg-warning { background-color: $color-warning; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: $text-color-base; }

/* ====== Border ====== */
.border { border-width: 1rpx; border-style: solid; border-color: $border-color; }
.border-top {
	border-top-width: 1rpx;
	border-top-style: solid;
	border-top-color: $border-color;
}
.border-right {
	border-right-width: 1rpx;
	border-right-style: solid;
	border-right-color: $border-color;
}
.border-bottom {
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: $border-color;
}
.border-left {
	border-left-width: 1rpx;
	border-left-style: solid;
	border-left-color: $border-color;
}

.border-0 { border-width: 0 !important; }
.border-top-0 { border-top-width: 0 !important; }
.border-right-0 { border-right-width: 0 !important; }
.border-bottom-0 { border-bottom-width: 0 !important; }
.border-left-0 { border-left-width: 0 !important; }

.border-primary { border-color: $color-primary; }
.border-light-secondary { border-color: $border-color-light; }
.border-white { border-color: #ffffff; }

/* ====== Border Radius ====== */
.rounded { border-radius: 8rpx; }
.rounded-top {
	border-top-left-radius: 8rpx;
	border-top-right-radius: 8rpx;
}
.rounded-bottom {
	border-bottom-right-radius: 8rpx;
	border-bottom-left-radius: 8rpx;
}
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-0 { border-radius: 0; }
.border-radius-base { border-radius: $border-radius-base; }

/* ====== Overflow ====== */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* ====== Position ====== */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
}

.fixed-bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
}

.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }

/* ====== Shadow ====== */
.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15); }
.shadow-lg { box-shadow: 0 40rpx 100rpx 0 rgba(0, 0, 0, 0.175); }
.shadow-none { box-shadow: none !important; }

/* ====== Vertical Align ====== */
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

/* ====== Misc ====== */
.box-border { box-sizing: border-box; }
.pre-line { white-space: pre-line; }
.scroll-row { width: 100%; white-space: nowrap; }
.scroll-row-item { display: inline-block !important; }
.page-space { padding: 0 34rpx; }

/* ====== Business Components ====== */

/* Page Card */
.page-card {
	background: #fff;
	border-radius: 15rpx;
}

/* Card Component */
.card {
	background: #ffffff;
	border-radius: 15rpx;

	&.noBorder {
		.card-head { border-bottom: 0; }
		.card-title { font-size: 28rpx; color: $text-color-assist; }
		.card-content { padding: 0; }
	}

	&.min {
		.card-title { font-size: 28rpx; color: $text-color-assist; }
		.card-content { padding: 0; }
	}

	&.full {
		border-radius: 0;
		.card-content { padding: 0 34rpx 20rpx; }
	}

	&-head {
		height: 85rpx;
		border-bottom: 1rpx solid $border-color;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&-title {
		font-size: 32rpx;
		font-weight: 500;
		color: $text-color-base;

		.card-title-sub {
			font-weight: normal;
			font-size: 22rpx;
			color: $text-color-assist;
		}
	}

	&-more {
		font-size: 24rpx;
		font-weight: 400;
		color: $text-color-assist;
		display: flex;
		align-items: center;

		.uv-icon {
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}

	&-content {
		padding: 20rpx 0 0;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		overflow: hidden;
	}

	.card-grid-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
		position: relative;

		&-badge {
			align-items: center;
			display: flex;
			position: absolute;
			right: 0;
			top: 0;

			span {
				margin: 0 !important;
				color: #fff !important;
			}
		}

		.image {
			width: 60rpx;
			height: 60rpx;
		}

		&-label {
			margin-top: 14rpx;
			line-height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: $text-color-base;
		}
	}
}

/* Info Cell */
.infos {
	padding: 20rpx 37rpx;

	&.infos-right .info-cell-value {
		text-align: right;
	}

	.info-cell {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-label {
			margin-right: 30rpx;
			line-height: 32rpx;
			font-size: 24rpx;
			color: $text-color-assist;
		}

		&-value {
			flex: 1;
			line-height: 32rpx;
			font-size: 24rpx;
			color: $text-color-base;
		}

		&-operation {
			line-height: 32rpx;
			font-size: 24rpx;
			color: $color-primary;
		}
	}
}

/* Simple Cell */
.simple-cell {
	display: flex;
	align-items: center;

	&-icon {
		width: 64rpx;
		height: 64rpx;
	}

	&-content {
		margin-left: 15rpx;
	}

	&-title {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: $text-color-base;
	}

	&-label {
		line-height: 30rpx;
		font-size: 22rpx;
		color: $text-color-base;
	}
}

/* Store Info */
.storeInfo {
	padding: 24rpx 35rpx;
	display: flex;
	align-items: center;
	background: #fff;

	&-pic {
		width: 80rpx;
		height: 80rpx;
	}

	&-info {
		flex: 1;
		margin-left: 20rpx;
	}

	&-info-name {
		line-height: 40rpx;
		font-size: 28rpx;
		color: $text-color-base;
	}

	&-info-address {
		line-height: 28rpx;
		font-size: 20rpx;
		color: $text-color-assist;
		margin-top: 10rpx;
	}

	&-action {
		width: 120rpx;
		height: 50rpx;
		background: $text-color-base;
		text-align: center;
		font-size: 24rpx;
		line-height: 50rpx;
		color: #ffffff;
	}
}

/* Center Title */
.center-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx 0;

	&-line {
		width: 36rpx;
		height: 1rpx;
		background: $text-color-base;
	}

	.title {
		margin: 0 22rpx;
	}
}

/* List */
// .list {
// 	padding: 25rpx 35rpx;
// 	position: relative;
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// 	background: #fff;

// 	&-main {
// 		display: flex;
// 		align-items: center;
// 		flex: 1;
// 	}

// 	&-actions-edit {
// 		width: 33rpx;
// 		height: 33rpx;

// 		.image {
// 			width: 100%;
// 			height: 100%;
// 			display: block;
// 		}
// 	}

// 	&.noBorder::after {
// 		display: none;
// 	}

// 	&::after {
// 		content: '';
// 		position: absolute;
// 		left: 35rpx;
// 		top: 0;
// 		right: 0;
// 		height: 1rpx;
// 		background: $border-color;
// 	}

// 	&-label {
// 		line-height: 40rpx;
// 		font-size: 28rpx;
// 		color: $text-color-base;
// 	}

// 	&-content {
// 		flex: 1;

// 		input,
// 		.uni-input {
// 			line-height: 40rpx;
// 			font-size: 28rpx;
// 			color: $text-color-base;
// 		}
// 	}
// }

/* Y-List */
.y-list {
	margin-bottom: 20rpx;

	&.min {
		margin-bottom: 15rpx;

		.y-list-label { margin-right: 10rpx; }
		.y-list-content { height: 88rpx; }
	}

	.uv-list-item__wrapper {
		flex-direction: row !important;
	}

	&-content {
		flex: 1;
		display: flex;
		width: 100%;
		align-items: center;
		height: 100rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;

		&.avatar { height: 130rpx; }
	}

	&-label {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: $text-color-assist;
		margin-right: 30rpx;
		word-break: normal;
		word-wrap: normal;
		text-wrap: nowrap;
		flex: 1;
	}

	&-select {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: $text-color-base;
		flex: 1;
		text-align: right;

		&-placeholder {
			color: $text-color-assist;
			line-height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			flex: 1;
			text-align: right;
		}
	}

	&-default {
		font-size: 28rpx;
		font-weight: 400;
		color: $text-color-base;
	}

	&-value {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: $color-primary;

		.uv-input { border: 0; }
	}

	.uvicon-arrow-right {
		font-size: 10rpx !important;
	}

	&-avatar {
		padding: 20rpx 0;
		display: flex;
		justify-content: flex-end;

		.img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}
}

/* Order */
.order {
	background-color: #fff;
	border-radius: 15rpx;
	box-sizing: border-box;
	margin: 10rpx 34rpx;

	&-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		border-bottom: 1rpx solid $border-color;
		padding: 0 34rpx;
	}

	&-logo .image {
		height: 45rpx;
		width: auto;
	}

	&-title {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: $text-color-base;
	}

	&-status {
		&.status-1 {
			line-height: 40rpx;
			font-size: 28rpx;
			color: $text-color-assist;
		}

		&.status-2 {
			line-height: 40rpx;
			font-size: 28rpx;
			color: $color-primary;
		}
	}

	&-info {
		border-top: 1rpx solid $border-color;
		border-bottom: 1rpx solid $border-color;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: $text-color-assist;
		display: flex;
		justify-content: flex-end;
		padding-right: 34rpx;

		text { margin-left: 10rpx; }
	}

	&-actions {
		display: flex;
		justify-content: space-between;
		padding: 34rpx;

		&-btns {
			display: flex;
			align-items: center;
		}
	}

	&-actions-delete {
		width: 169rpx;
		height: 60rpx;
		border: 1px solid $text-color-base;
		border-radius: 0;
		line-height: 58rpx;
		text-align: center;
		color: $text-color-base;
		font-size: 24rpx;
	}

	&-actions-primary {
		margin-left: 20rpx;
		width: 169rpx;
		height: 60rpx;
		background: $color-primary;
		border: 1px solid $color-primary;
		border-radius: 0;
		line-height: 58rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
	}
}

/* Address */
.address {
	background: #ffffff;
	border-radius: 15rpx;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 40rpx 34rpx;

	&-main { flex: 1; }

	&-actions-edit {
		width: 33rpx;
		height: 33rpx;

		.image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	&.noBorder::after { display: none; }

	&::after {
		content: '';
		position: absolute;
		left: 35rpx;
		top: 0;
		right: 0;
		height: 1rpx;
		background: $border-color;
	}

	&-icon {
		margin-right: 20rpx;
		width: 35rpx;
		height: 46rpx;

		.image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	&-header {
		display: flex;
		align-items: center;
	}

	&-name {
		line-height: 40rpx;
		font-size: 28rpx;
		color: $text-color-base;
		margin-right: 30rpx;
	}

	&-phone {
		line-height: 40rpx;
		font-size: 28rpx;
		color: $text-color-base;
	}

	&-content {
		display: flex;
		align-items: center;
	}

	&-default {
		margin-right: 82rpx;
	}

	&-desc {
		line-height: 33rpx;
		font-size: 24rpx;
		color: $text-color-assist;
	}
}

/* Action Bar */
.action-bar {
	position: fixed;
	display: flex;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	left: 0;
	right: 0;
	background: #fff;

	&.screen {
		bottom: 50px;
		padding-bottom: 0;
	}

	&.column {
		flex-direction: column;

		.action-info { flex: 0 0 100rpx; }
		.action-btns { height: 100rpx; align-items: center; }
	}

	.action-total { margin-left: 20rpx; }

	.action-info {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0 34rpx;
		height: 100rpx;
	}

	.action-icons {
		flex: 1;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 20rpx;

		&-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.action-icon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			&-badge {
				position: absolute;
				right: -10rpx;
				top: 0;
			}

			.action-icon-img {
				width: 50rpx;
				height: 50rpx;
			}

			.action-icon-label {
				line-height: 28rpx;
				font-size: 20rpx;
				color: $text-color-base;
			}
		}
	}

	.action-btns {
		display: flex;
		align-items: center;
		padding: 0 24rpx;

		.uv-button-wrapper {
			flex: 1;
			margin: 0 10rpx;
		}

		.uv-button {
			border-radius: 0 !important;
		}
	}
}

/* Bottom Bar */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	display: flex;
}

.bottom-bar-bg {
	height: 150rpx;
}

/* Blank / Shopping Bar */
.blank {
	height: var(--van-action-bar-height);
}

.shopping-bar {
	bottom: var(--van-tabbar-height);
}

.full-btn {
	height: var(--van-action-bar-height);
}

.shopping-checkbox .van-checkbox {
	padding: 2px;
	margin-right: 10rpx;
}

.shopping-checkbox-cell {
	display: flex;
	align-items: center;
	padding: 26rpx 0 26rpx 30rpx;
}

/* Form */
.form-checkbox {
	padding: 43rpx 0;
	display: flex;
	justify-content: center;
}

.form-buttons {
	margin-top: 34rpx;
	padding: 0 34rpx;
}

/* Background Warp */
.background-warp {
	position: relative;

	.background {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: 1;

		.image { width: 100%; }
	}

	.background-content {
		position: relative;
		z-index: 10;
	}
}

/* Search */
.search .y-search {
	background: none;
}

.search-bar {
	background: #fff;
	padding: 20rpx 34rpx;
}

/* Subsection */
.y-subsection {
	padding: 20rpx 33rpx 0;
}

/* Swiper */
.swiper {
	width: 100%;

	&.detail { height: 750rpx; }

	.image {
		width: 100%;
		display: block;
	}
}

/* Cell Attr */
.cell-attr {
	.cell-title {
		line-height: 40rpx;
		font-size: 28rpx;
		color: $text-color-base;
	}

	.cell-sub-title {
		line-height: 40rpx;
		font-size: 28rpx;
		color: $text-color-assist;
	}
}

/* uv-list border override */
.uv-list--border-top { background: $border-color !important; }
.uv-list--border-left { background: $border-color !important; }
.uv-list--border-bottom { background: $border-color !important; }
.uv-list--border-right { background: $border-color !important; }

.uvicon-arrow-right {
	color: $text-color-assist;
}

/* Icon component */
.icon .image {
	display: block;
	width: 100%;
	height: 100%;
}

/* ====== Backward Compatibility Aliases ====== */
/* 旧类名 -> 新类名映射，保留兼容性 */
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly !important; }
.just-content-center { justify-content: center; }
.just-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline !important; }
.text-color-base { color: $text-color-base; }
.text-color-assist { color: $text-color-assist; }
.text-color-primary { color: $color-primary; }
.text-color-danger { color: $color-error; }
.text-color-white { color: #ffffff; }
.text-color-warning { color: $color-warning; }
.font-size-medium { font-size: 26rpx; }
.font-size-extra-lg { font-size: 40rpx; }
.bg-base { background-color: $bg-color; }