.wc-orders-scope{
	background: #f7fafc;
	padding: 12px 8px;
	direction: rtl;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
}

.wc-orders-scope *{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.wc-orders-scope .wrap{
	max-width: 1100px;
	margin: 0 auto;
}

.wc-orders-scope .head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 10px;
	padding: 0 4px;
}

.wc-orders-scope .head h2{
	font-size: 20px;
	font-weight: 700;
	color: #2d3748;
}

.wc-orders-scope .filter-toggle{
	height: 36px;
	border-radius: 8px;
	padding: 0 14px;
	font-weight: 600;
	font-size: 13px;
	border: 1px solid #8B0E0E;
	background: #8B0E0E;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all .2s ease;
}

.wc-orders-scope .filter-toggle:hover{
	background: #a83232;
	border-color: #a83232;
}

.wc-orders-scope .filter-toggle svg{
	width: 16px;
	height: 16px;
}

.wc-orders-scope .filter-badge{
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: #fff;
	color: #8B0E0E;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

.wc-orders-scope .filter-modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	opacity: 0;
	pointer-events: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	transition: opacity .25s ease;
	padding: 16px;
}

.wc-orders-scope .filter-modal.show{
	opacity: 1;
	pointer-events: auto;
}

.wc-orders-scope .filter-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4);
	backdrop-filter: blur(4px);
	z-index: -1;
}

.wc-orders-scope .filter-content{
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
	max-width: 550px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	transform: scale(0.95);
	transition: transform .25s ease;
}

.wc-orders-scope .filter-modal.show .filter-content{
	transform: scale(1);
}

.wc-orders-scope .filter-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #e2e8f0;
	position: sticky;
	top: 0;
	background: #ffffff;
	z-index: 10;
	border-radius: 12px 12px 0 0;
}

.wc-orders-scope .filter-header h3{
	font-size: 16px;
	font-weight: 700;
	color: #2d3748;
}

.wc-orders-scope .close-filter{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: #f5f5f5;
	color: #718096;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
	line-height: 1;
}

.wc-orders-scope .close-filter:hover{
	background: #fee;
	color: #8B0E0E;
}

.wc-orders-scope .filter-body{
	padding: 16px;
}

.wc-orders-scope .filter-body form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.wc-orders-scope .f{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.wc-orders-scope .f.full{
	grid-column: 1 / -1;
}

.wc-orders-scope .f label{
	font-size: 12px;
	font-weight: 600;
	color: #2d3748;
}

.wc-orders-scope .f input,
.wc-orders-scope .f select{
	height: 40px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #fafafa;
	padding: 0 12px;
	font-size: 13px;
	color: #2d3748;
	outline: none;
	width: 100%;
	transition: all .2s ease;
}

.wc-orders-scope .f input:focus,
.wc-orders-scope .f select:focus{
	border-color: #8B0E0E;
	background: #fff;
}

.wc-orders-scope .actions{
	display: flex;
	gap: 8px;
	grid-column: 1 / -1;
	margin-top: 4px;
}

.wc-orders-scope .btn{
	height: 40px;
	border-radius: 8px;
	padding: 0 18px;
	font-weight: 600;
	font-size: 13px;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s ease;
	flex: 1;
	gap: 6px;
}

.wc-orders-scope .btn-primary{
	background: #8B0E0E;
	color: #fff;
}

.wc-orders-scope .btn-primary:hover{
	background: #a83232;
}

.wc-orders-scope .btn-ghost{
	background: #f5f5f5;
	color: #2d3748;
	border: 1px solid #e2e8f0;
}

.wc-orders-scope .btn-ghost:hover{
	background: #eee;
}

.wc-orders-scope .list{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wc-orders-scope .card{
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	transition: all .2s ease;
}

.wc-orders-scope .card:hover{
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	border-color: #cbd5e0;
}

.wc-orders-scope .top{
	padding: 12px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid #f7fafc;
}

.wc-orders-scope .id{
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	flex: 1;
}

.wc-orders-scope .order-number{
	display: flex;
	align-items: center;
	gap: 8px;
}

.wc-orders-scope .bag-icon{
	width: 20px;
	height: 20px;
	color: #718096;
	flex-shrink: 0;
}

.wc-orders-scope .id a{
	color: #2d3748;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	transition: color .2s ease;
}

.wc-orders-scope .id a:hover{
	color: #8B0E0E;
}

.wc-orders-scope .sub{
	color: #718096;
	font-size: 12px;
	padding-right: 28px;
}

.wc-orders-scope .pill{
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 11px;
	white-space: nowrap;
	flex-shrink: 0;
}

.wc-orders-scope .pill.wc-completed{ 
	background: #d1fae5;
	color: #065f46;
}

.wc-orders-scope .pill.wc-processing{ 
	background: #dbeafe;
	color: #1e40af;
}

.wc-orders-scope .pill.wc-on-hold{ 
	background: #fed7aa;
	color: #92400e;
}

.wc-orders-scope .pill.wc-cancelled,
.wc-orders-scope .pill.wc-failed{ 
	background: #fecaca;
	color: #991b1b;
}

.wc-orders-scope .pill.wc-pending{ 
	background: #f1f5f9;
	color: #475569;
}

.wc-orders-scope .pill.wc-refunded{ 
	background: #f3e8ff;
	color: #6b21a8;
}

.wc-orders-scope .mid{
	padding: 12px 14px;
	background: #fafafa;
	display: flex;
	align-items: center;
	gap: 20px;
}

.wc-orders-scope .mid-item{
	display: flex;
	align-items: center;
	gap: 6px;
}

.wc-orders-scope .mid-label{
	font-size: 12px;
	font-weight: 600;
	color: #718096;
}

.wc-orders-scope .mid-value{
	font-size: 14px;
	font-weight: 700;
	color: #2d3748;
}

.wc-orders-scope .card-actions{
	padding: 10px 14px;
	border-top: 1px solid #f7fafc;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
}

.wc-orders-scope .card-actions .btn{
	flex: initial;
	height: 34px;
	font-size: 12px;
	padding: 0 14px;
}

.wc-orders-scope .order-price{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: #2d3748;
}

.wc-orders-scope .eye-icon,
.wc-orders-scope .money-icon{
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.wc-orders-scope .money-icon{
	color: #8B0E0E;
}

.wc-orders-scope .pagination{
	margin: 16px 0 8px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.wc-orders-scope .page{
	min-width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #2d3748;
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all .2s ease;
	padding: 0 10px;
}

.wc-orders-scope .page:hover{
	background: #f7fafc;
	border-color: #a0aec0;
}

.wc-orders-scope .page.active{
	background: #8B0E0E;
	color: #fff;
	border-color: #8B0E0E;
}

.wc-orders-scope .dots{
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
	color: #718096;
	font-weight: 700;
}

.wc-orders-scope .empty{
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 40px 20px;
	text-align: center;
}

.wc-orders-scope .empty h3{
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 18px;
	color: #2d3748;
}

.wc-orders-scope .empty p{
	margin-bottom: 20px;
	color: #718096;
	font-size: 14px;
}

@media (max-width: 768px){
	.wc-orders-scope{
		padding: 8px 6px;
	}

	.wc-orders-scope .head{
		margin-bottom: 10px;
		padding: 0 2px;
	}

	.wc-orders-scope .head h2{
		font-size: 18px;
	}

	.wc-orders-scope .filter-toggle{
		height: 34px;
		padding: 0 12px;
		font-size: 12px;
		gap: 5px;
	}

	.wc-orders-scope .filter-modal{
		padding: 12px;
	}

	.wc-orders-scope .filter-content{
		max-width: 95%;
		max-height: 80vh;
	}

	.wc-orders-scope .filter-body{
		padding: 14px;
	}

	.wc-orders-scope .filter-body form{
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.wc-orders-scope .actions{
		flex-direction: row;
		gap: 8px;
	}

	.wc-orders-scope .card{
		border-radius: 8px;
	}

	.wc-orders-scope .top{
		padding: 10px 12px;
		flex-direction: row;
		align-items: center;
	}

	.wc-orders-scope .id{
		width: auto;
		flex: 1;
	}

	.wc-orders-scope .bag-icon{
		width: 18px;
		height: 18px;
	}

	.wc-orders-scope .id a{
		font-size: 14px;
	}

	.wc-orders-scope .sub{
		font-size: 11px;
		padding-right: 26px;
	}

	.wc-orders-scope .pill{
		padding: 5px 10px;
		font-size: 10px;
	}

	.wc-orders-scope .mid{
		padding: 10px 12px;
		gap: 15px;
	}

	.wc-orders-scope .mid-label{
		font-size: 11px;
	}

	.wc-orders-scope .mid-value{
		font-size: 13px;
	}

	.wc-orders-scope .card-actions{
		padding: 8px 12px;
	}

	.wc-orders-scope .card-actions .btn{
		height: 38px;
		font-size: 13px;
	}

	.wc-orders-scope .order-price{
		font-size: 16px;
	}

	.wc-orders-scope .eye-icon,
	.wc-orders-scope .money-icon{
		width: 16px;
		height: 16px;
	}

	.wc-orders-scope .list{
		gap: 8px;
	}

	.wc-orders-scope .pagination{
		margin: 12px 0 6px;
		gap: 5px;
	}

	.wc-orders-scope .page{
		min-width: 32px;
		height: 32px;
		font-size: 12px;
	}
}

@media (max-width: 380px){
	.wc-orders-scope .head h2{
		font-size: 16px;
	}

	.wc-orders-scope .filter-toggle{
		height: 32px;
		padding: 0 10px;
		font-size: 11px;
	}

	.wc-orders-scope .bag-icon{
		width: 16px;
		height: 16px;
	}

	.wc-orders-scope .id a{
		font-size: 13px;
	}

	.wc-orders-scope .pill{
		padding: 4px 8px;
		font-size: 9px;
	}

	.wc-orders-scope .sub{
		font-size: 10px;
	}

	.wc-orders-scope .mid{
		gap: 12px;
		flex-wrap: wrap;
	}
}