/**
 * Modern Top Seller Box Styles
 * استایل‌های مدرن برای باکس فروشنده برتر
 * هماهنگ با طراحی صفحه وبلاگ تکی
 * 
 * @package MLM
 * @version 1.0.0
 */

/* فونت آیکون‌های zhkicon */
@font-face {
	font-family: "zhkicon";
	font-style: normal;
	font-weight: 400;
	src:
		url('../fonts/iconly/iconly.woff2') format('woff2'),
		url('../fonts/iconly/iconly.woff') format('woff'),
		url('../fonts/iconly/iconly.ttf') format('truetype');
}

[class*="zhkicon"],
[class^="zhkicon"] {
	font-family: "zhkicon" !important;
	font-style: normal !important;
	font-weight: normal !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Container
   ============================================ */
.mlm-top-seller-modern-container {
	margin-bottom: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 768px) {
	.mlm-top-seller-modern-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* فاصله‌گذاری برای صفحه اصلی - هماهنگ با سایر ابزارک‌ها */
/* margin‌ها از full-width-layout.css مدیریت می‌شوند */

.mlm-top-seller-modern {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 768px) {
	.mlm-top-seller-modern {
		flex-direction: row;
		gap: 1.5rem;
	}
}

/* ============================================
   Top Seller Box
   ============================================ */
.mlm-top-seller-box {
	background: #ffffff;
	border-radius: 5px;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.mlm-top-seller-box {
		padding: 1.5rem;
	}
}

/* نوار عمودی نارنجی سمت راست */
.mlm-top-seller-vertical-bar {
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background: #FF9606;
	z-index: 1;
}

/* ============================================
   Header Section
   ============================================ */
.mlm-top-seller-header {
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.mlm-top-seller-header > div {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.25rem;
}

.mlm-top-seller-header h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: #1f2937;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

@media (min-width: 768px) {
	.mlm-top-seller-header h3 {
		font-size: 1.25rem;
	}
}

.mlm-top-seller-header .mlm-top-seller-fire-icon {
	padding: 0.375rem;
	margin-left: 0.25rem;
	background: transparent !important;
	border: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	vertical-align: middle;
}

.mlm-top-seller-header .mlm-top-seller-fire-icon .mlm-fire-icon-img {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
	flex-shrink: 0;
	object-fit: contain;
}

@media (min-width: 768px) {
	.mlm-top-seller-header .mlm-top-seller-fire-icon {
		padding: 0.5rem;
		margin-left: 0.375rem;
	}
	
	.mlm-top-seller-header .mlm-top-seller-fire-icon .mlm-fire-icon-img {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* ============================================
   Top Section (Avatar + Name)
   ============================================ */
.mlm-top-seller-top-section {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	position: relative;
}

@media (min-width: 768px) {
	.mlm-top-seller-top-section {
		gap: 1rem;
		flex-wrap: nowrap;
	}
}

/* تصویر پس‌زمینه best-seller */
.mlm-top-seller-bg-image {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

.mlm-best-seller-bg-img {
	width: 100px;
	height: auto;
	display: block;
	object-fit: contain;
}

@media (min-width: 768px) {
	.mlm-best-seller-bg-img {
		width: 150px;
	}
}

@media (min-width: 1024px) {
	.mlm-best-seller-bg-img {
		width: 200px;
	}
}

.mlm-top-seller-avatar {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.mlm-top-seller-avatar img {
	border-radius: 50%;
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

@media (min-width: 768px) {
	.mlm-top-seller-avatar img {
		width: 80px;
		height: 80px;
	}
}

.mlm-top-seller-name-section {
	flex-shrink: 0;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.mlm-top-seller-name-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.125rem;
	font-weight: 500;
	color: #1f2937;
	text-decoration: none;
	transition: color 0.3s ease;
}

@media (min-width: 768px) {
	.mlm-top-seller-name-link {
		font-size: 1.25rem;
	}
}

.mlm-top-seller-name-link:hover {
	color: #FF9606;
}

.mlm-top-seller-name-link .zhkicon-arrow-left {
	color: #FF9606;
	font-size: 0.875rem;
}

.mlm-top-seller-name-link.verified::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('../img/verified.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 4px;
	vertical-align: middle;
}

/* ============================================
   Products Slider (Widget 11 Style)
   ============================================ */
.mlm-top-seller-products {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 100%;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

@media (max-width: 767px) {
	.mlm-top-seller-products {
		width: 100%;
		margin-top: 1rem;
	}
}

.mlm-top-seller-slider-wrapper {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.mlm-top-seller-slider-wrapper .swp {
	position: relative;
}

.mlm-top-seller-slider-wrapper .swiper {
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	touch-action: pan-y !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* محدود کردن عرض برای نمایش فقط 4 محصول */
	max-width: calc(4 * 190px + 3 * 20px); /* 4 محصول + 3 فاصله */
	width: 100%;
}

@media (max-width: 767px) {
	.mlm-top-seller-slider-wrapper .swiper {
		max-width: calc(4 * 170px + 3 * 20px); /* در موبایل */
	}
}

.mlm-top-seller-slider-wrapper .swiper:active {
	cursor: grabbing;
}

.mlm-top-seller-slider-wrapper .swiper::-webkit-scrollbar {
	display: none;
}

.mlm-top-seller-slider-wrapper .swiper-wrapper {
	gap: 20px;
	display: flex;
}

.mlm-top-seller-slider-wrapper .slide {
	height: auto;
	width: 190px !important;
	flex-shrink: 0;
}

.mlm-top-seller-slider-wrapper .card {
	position: relative;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 16px;
	box-shadow: none;
	padding: 12px;
	text-align: center;
	transition: none;
	max-width: 190px;
	margin: 0 auto;
	display: block;
	text-decoration: none;
}

.mlm-top-seller-slider-wrapper .card:hover {
	box-shadow: none;
	transform: none;
}

.mlm-top-seller-slider-wrapper .img {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	overflow: hidden;
	margin: 0 auto 10px;
	display: block;
}

.mlm-top-seller-slider-wrapper .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mlm-top-seller-slider-wrapper .name {
	font-weight: 600;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 2.7em;
	color: #1f2937;
}

.mlm-top-seller-slider-wrapper .badge-off {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fbbf24;
	color: #1f2937;
	font-weight: 700;
	font-size: 0.75rem;
	padding: 4px 8px;
	border-radius: 10px;
	z-index: 1;
}

.mlm-top-seller-slider-wrapper .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
}

.mlm-top-seller-slider-wrapper .nav.prev {
	right: -16px;
}

.mlm-top-seller-slider-wrapper .nav.next {
	left: -16px;
}

.mlm-top-seller-slider-wrapper .nav .btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}

.mlm-top-seller-slider-wrapper .nav .btn:hover {
	background: #f3f4f6;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
}

.mlm-top-seller-slider-wrapper .nav .btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #1f2937;
}

/* Responsive adjustments */
@media (max-width: 992px) {
	.mlm-top-seller-slider-wrapper .slide {
		width: 170px !important;
	}
	
	.mlm-top-seller-slider-wrapper .nav.prev {
		right: 12px;
	}
	
	.mlm-top-seller-slider-wrapper .nav.next {
		left: 12px;
	}
}

@media (max-width: 576px) {
	.mlm-top-seller-slider-wrapper .nav.prev {
		right: 8px;
	}
	
	.mlm-top-seller-slider-wrapper .nav.next {
		left: 8px;
	}
	
	.mlm-top-seller-slider-wrapper .nav .btn {
		width: 36px;
		height: 36px;
	}
	
	.mlm-top-seller-slider-wrapper .nav .btn .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}

/* ============================================
   Become Seller Promo Box
   ============================================ */
.mlm-become-seller-promo {
	background-color: rgba(255, 150, 6, 0.1);
	border-radius: 5px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 200px;
}

@media (min-width: 768px) {
	.mlm-become-seller-promo {
		padding: 1.5rem;
		min-width: 250px;
	}
}

.mlm-become-seller-content {
	text-align: center;
}

@media (min-width: 768px) {
	.mlm-become-seller-content {
		text-align: right;
	}
}

.mlm-become-seller-content h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
	.mlm-become-seller-content h3 {
		font-size: 1.25rem;
	}
}

.mlm-become-seller-content p {
	font-size: 0.875rem;
	color: #4b5563;
	margin-bottom: 1rem;
}

.mlm-become-seller-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mlm-become-seller-btn-info,
.mlm-become-seller-btn-register {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.mlm-become-seller-btn-info {
	background-color: #ffffff;
	color: #FF9606;
}

.mlm-become-seller-btn-info:hover {
	background-color: #FF9606;
	color: #ffffff;
}

.mlm-become-seller-btn-register {
	background-color: #FF9606;
	color: #ffffff;
}

.mlm-become-seller-btn-register:hover {
	background-color: #e68505;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 767px) {
	.mlm-top-seller-box {
		padding: 1rem;
	}
	
	.mlm-top-seller-avatar img {
		width: 56px;
		height: 56px;
	}
	
	.mlm-top-seller-name-link {
		font-size: 1rem;
	}
	
	.mlm-become-seller-promo {
		min-width: 100%;
	}
	
	.mlm-become-seller-content {
		text-align: center;
	}
	
	.mlm-top-seller-header {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	
	.mlm-top-seller-medals-wrapper {
		width: 100%;
		justify-content: flex-start;
		margin-top: 0.25rem;
	}
}

/* ============================================
   Avatar Ring (Stories Support)
   ============================================ */
.mlm-vendor-avatar-ring {
	position: relative;
	display: inline-block;
}

.mlm-vendor-avatar-ring .ring-border {
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 2px solid #FF9606;
	border-radius: 50%;
	pointer-events: none;
	animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ============================================
   Vendor Medals Wrapper
   ============================================ */
.mlm-top-seller-medals-wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-shrink: 0;
}

/* استفاده از استایل‌های modern-medal-stack از modern-single-product.css */
.mlm-top-seller-medals-wrapper .modern-medal-stack {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
}

.mlm-top-seller-medals-wrapper .modern-medal-stack > li {
	margin: 0;
	padding: 0;
	margin-inline-start: -14px;
	position: relative;
	z-index: 1;
}

.mlm-top-seller-medals-wrapper .modern-medal-stack > li:first-child {
	margin-inline-start: 0;
}

.mlm-top-seller-medals-wrapper .modern-medal-stack .medal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	padding: 0;
}

.mlm-top-seller-medals-wrapper .modern-medal-stack > li:hover {
	z-index: 10;
	transform: translateY(-2px);
}

.mlm-top-seller-medals-wrapper .modern-medal-stack > li:hover .medal {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* تعریف تصاویر مدال‌ها - کلاس‌های واقعی از get_medals() */
.mlm-top-seller-medals-wrapper .medal.medal-vendor { background-image: url('../img/medals/medal-vendor.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-subset-income { background-image: url('../img/medals/medal-networker.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-sale-income { background-image: url('../img/medals/medal-vendor-500.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-ref-income { background-image: url('../img/medals/medal-referrer-50.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-ref { background-image: url('../img/medals/medal-referrer.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-post { background-image: url('../img/medals/medal-author.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-product { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-subset { background-image: url('../img/medals/medal-network-20.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-purchase { background-image: url('../img/medals/medal-purchaser.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-withdraw { background-image: url('../img/medals/medal-withdraws.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-valid-comment { background-image: url('../img/medals/medal-comments.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-vip-product { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-profile-ok { background-image: url('../img/medals/medal-profile.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-account-ok { background-image: url('../img/medals/medal-verified.svg') !important; }

/* مدال‌های قدیمی برای سازگاری */
.mlm-top-seller-medals-wrapper .medal.medal-approved { background-image: url('../img/medals/medal-approved.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-author { background-image: url('../img/medals/medal-author.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-comments { background-image: url('../img/medals/medal-comments.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-is-vendor { background-image: url('../img/medals/medal-is-vendor.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-network-20 { background-image: url('../img/medals/medal-network-20.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-networker { background-image: url('../img/medals/medal-networker.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-profile { background-image: url('../img/medals/medal-profile.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-purchaser { background-image: url('../img/medals/medal-purchaser.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-referrer { background-image: url('../img/medals/medal-referrer.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-referrer-50 { background-image: url('../img/medals/medal-referrer-50.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-vendor-500 { background-image: url('../img/medals/medal-vendor-500.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-verified { background-image: url('../img/medals/medal-verified.svg') !important; }
.mlm-top-seller-medals-wrapper .medal.medal-withdraws { background-image: url('../img/medals/medal-withdraws.svg') !important; }