/* =========================================================
   Arena Slider - Front Styles
   5 استایل نمایشی + استایل‌های پایه + متغیرهای رنگی قابل تنظیم
   ========================================================= */

/* ---------- متغیرهای پایه (پیش‌فرض تم‌ها با همین متغیرها بازنویسی می‌شوند) ---------- */
.arena-slider-wrapper {
	--as-accent: #6366f1;
	--as-radius: 16px;
	--as-bg: transparent;
	--as-slide-bg: #0f172a;
	--as-border: transparent;
	--as-border-width: 0;
	--as-border-style: solid;
	--as-shadow: rgba(15, 23, 42, .35);
	--as-shadow-blur: 60px;
	--as-arrow-bg: rgba(255, 255, 255, .92);
	--as-arrow-color: #0f172a;
	--as-dot: rgba(255, 255, 255, .7);
	--as-dot-active: #6366f1;
	--as-caption-color: #fff;
	--as-caption-bg: linear-gradient(transparent, rgba(0, 0, 0, .65));
	--as-caption-size: 15px;
	--as-overlay: rgba(0, 0, 0, .55);
	--as-text: #0f172a;

	position: relative;
	margin: 0 auto;
	max-width: 100%;
	direction: ltr;
	background: var(--as-bg);
}

/* ---------- پایه اسلایدر ---------- */
.arena-slider-wrapper .swiper {
	overflow: hidden;
	width: 100%;
	/* پس‌زمینه کانتینر = رنگ فاصله بین اسلایدها؛
	   --as-gap اگر تنظیم شود، وگرنه همرنگ پس‌زمینه اسلاید.
	   این ناحیه همان چیزی است که بین کارت‌ها دیده می‌شود. */
	background: var(--as-gap, var(--as-slide-bg, transparent));
}
.arena-slider-wrapper .swiper-slide {
	position: relative;
	overflow: hidden;
	background: var(--as-slide-bg);
}
.arena-slider-wrapper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease, filter .5s ease;
}

/* ---------- حاشیه ---------- */
.arena-slider-wrapper .swiper { border: var(--as-border-width) var(--as-border-style) var(--as-border); }

/* ---------- افکت زوم روی هاور ---------- */
.arena-slider-wrapper:not(.theme-minimal) .swiper-slide:hover img { transform: scale(1.05); }

/* ---------- کپشن ---------- */
.arena-slide-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 40px 20px 16px;
	color: var(--as-caption-color);
	background: var(--as-caption-bg);
	font-size: var(--as-caption-size);
	font-weight: 600;
	z-index: 2;
	pointer-events: none;
}

/* ---------- اورلی ها ---------- */
.arena-slider-wrapper.overlay-bottom .swiper-slide::after {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, transparent 45%, var(--as-overlay));
	pointer-events: none;
}
.arena-slider-wrapper.overlay-center .swiper-slide::after {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(circle at center, transparent 30%, var(--as-overlay));
	pointer-events: none;
}
.arena-slider-wrapper.overlay-dark .swiper-slide::after {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: var(--as-overlay); pointer-events: none;
}

/* ---------- سایه ها ---------- */
.arena-slider-wrapper.shadow-soft .swiper { box-shadow: 0 10px var(--as-shadow-blur) -10px var(--as-shadow); }
.arena-slider-wrapper.shadow-deep .swiper { box-shadow: 0 25px var(--as-shadow-blur) -15px var(--as-shadow); }

/* ---------- فلش ها ---------- */
.arena-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: var(--as-arrow-bg);
	color: var(--as-arrow-color);
	font-size: 26px;
	cursor: pointer;
	user-select: none;
	transition: background .2s, color .2s, box-shadow .2s, opacity .2s;
	line-height: 1;
}
.arena-slider-wrapper .swiper-button-disabled { opacity: .35; pointer-events: none; }
.arena-slider-wrapper.rounded-arrows .arena-nav-btn { border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.arena-slider-wrapper.rounded-arrows .arena-nav-btn:hover { background: var(--as-accent); color: #fff; }
.arena-slider-wrapper .arena-slider-prev { left: 14px; }
.arena-slider-wrapper .arena-slider-next { right: 14px; }

.arena-slider-wrapper.arrows-top .arena-nav-btn, .arena-slider-wrapper.arrows-bottom .arena-nav-btn { top: auto; transform: none; }
.arena-slider-wrapper.arrows-top .arena-slider-prev { left: auto; right: 70px; }
.arena-slider-wrapper.arrows-top .arena-slider-next { right: 14px; }

.arena-slider-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 14px; color: var(--as-text); }
.arena-slider-caption-title { font-weight: 700; color: var(--as-text); }
.arena-slider-nav { display: flex; gap: 8px; position: relative; z-index: 10; }
.arena-slider-nav-bottom { justify-content: flex-end; margin-top: 14px; }
.arena-slider-nav-bottom .arena-nav-btn { position: static; transform: none; }

/* ---------- نقاط (Pagination) ---------- */
.arena-slider-pagination {
	position: absolute; bottom: 14px; left: 0; right: 0;
	display: flex; justify-content: center; gap: 8px; z-index: 10;
}
.arena-slider-pagination .swiper-pagination-bullet {
	width: 10px; height: 10px; border-radius: 999px;
	background: var(--as-dot);
	opacity: 1;
	transition: width .3s ease, background .3s;
	margin: 0 !important; cursor: pointer;
}
.arena-slider-pagination .swiper-pagination-bullet-active { width: 28px; background: var(--as-dot-active); }

/* ---------- نوار پیشرفت ---------- */
.arena-slider-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.25); z-index: 10; }
.arena-slider-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--as-accent), var(--as-dot-active)); transition: width .1s linear; }

/* ---------- بندانگشتی ---------- */
.arena-slider-thumbs { margin-top: 14px; }
.arena-slider-thumbs .swiper { overflow: hidden; }
.arena-slider-thumbs .swiper-slide {
	width: auto; border-radius: 8px; overflow: hidden;
	opacity: .5; cursor: pointer; border: 2px solid transparent;
	transition: opacity .2s, border-color .2s;
}
.arena-slider-thumbs .swiper-slide img { width: 90px; height: 60px; object-fit: cover; display: block; }
.arena-slider-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--as-accent); }

/* ---------- Lazy preloader ---------- */
.swiper-lazy-preloader { border-color: var(--as-accent) transparent; }

/* =========================================================
   تم ۱: مینیمال (Minimal)
   ========================================================= */
.arena-slider-wrapper.theme-minimal {
	--as-accent: #18181b;
	--as-dot: rgba(0,0,0,.3);
	--as-dot-active: #18181b;
}
.arena-slider-wrapper.theme-minimal .swiper-slide { border-radius: var(--as-radius); }
.arena-slider-wrapper.theme-minimal .arena-nav-btn { box-shadow: none; border: 1px solid #e4e4e7; }

/* =========================================================
   تم ۲: مدرن شیشه‌ای (Modern / Glassmorphism)
   ========================================================= */
.arena-slider-wrapper.theme-modern {
	--as-accent: #6366f1;
	--as-bg: linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.10));
	--as-arrow-bg: rgba(255,255,255,.7);
	padding: 14px;
	border-radius: calc(var(--as-radius) + 14px);
}
.arena-slider-wrapper.theme-modern .swiper-slide { border-radius: var(--as-radius); box-shadow: 0 20px 50px -20px rgba(15,23,42,.4); }
.arena-slider-wrapper.theme-modern .arena-nav-btn { backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6); }

/* =========================================================
   تم ۳: دارک سینمایی (Dark Cinematic)
   ========================================================= */
.arena-slider-wrapper.theme-dark {
	--as-accent: #f59e0b;
	--as-bg: #09090b;
	--as-arrow-bg: rgba(255,255,255,.12);
	--as-arrow-color: #fff;
	--as-dot: rgba(255,255,255,.5);
	--as-dot-active: #f59e0b;
	--as-text: #fff;
	padding: 18px;
	border-radius: calc(var(--as-radius) + 12px);
}
.arena-slider-wrapper.theme-dark .swiper { border: 1px solid rgba(255,255,255,.08); }
.arena-slider-wrapper.theme-dark .swiper-slide { filter: saturate(1.05) contrast(1.05); }
.arena-slider-wrapper.theme-dark .swiper-slide:hover img { filter: brightness(1.05); }
.arena-slider-wrapper.theme-dark .arena-nav-btn:hover { background: var(--as-accent); color: #09090b; }
.arena-slider-wrapper.theme-dark .arena-slider-progress { background: rgba(255,255,255,.15); }

/* =========================================================
   تم ۴: قاب عکس (Framed Photo)
   ========================================================= */
.arena-slider-wrapper.theme-framed {
	--as-accent: #0ea5e9;
	--as-bg: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 8px, #eef2f7 8px, #eef2f7 16px);
	--as-arrow-bg: #0ea5e9;
	--as-arrow-color: #fff;
	padding: 20px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}
.arena-slider-wrapper.theme-framed .swiper { border-radius: 2px; }
.arena-slider-wrapper.theme-framed .swiper-slide {
	border-radius: 2px;
	border: 8px solid #fff;
	box-shadow: 0 12px 30px -12px rgba(15,23,42,.4), inset 0 0 0 1px #e2e8f0;
	background: #fff;
}
.arena-slider-wrapper.theme-framed .swiper-slide img { object-fit: contain; background: #fff; }
.arena-slider-wrapper.theme-framed .arena-nav-btn { box-shadow: 0 8px 20px rgba(14,165,233,.35); }

/* =========================================================
   تم ۵: گرادیان زنده (Gradient Glow)
   ========================================================= */
.arena-slider-wrapper.theme-gradient {
	--as-accent: #ec4899;
	--as-bg: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #f59e0b);
	--as-arrow-bg: rgba(255,255,255,.9);
	--as-dot-active: #fff;
	padding: 10px;
	background-size: 300% 300%;
	border-radius: calc(var(--as-radius) + 12px);
	animation: arena-grad-move 8s ease infinite;
}
@keyframes arena-grad-move {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.arena-slider-wrapper.theme-gradient .swiper-slide { box-shadow: 0 25px 60px -20px rgba(0,0,0,.45); }
.arena-slider-wrapper.theme-gradient .arena-slider-progress { background: rgba(255,255,255,.3); }
.arena-slider-wrapper.theme-gradient .arena-slider-progress-bar { background: #fff; }

/* ---------- پاسخگویی ---------- */
@media (max-width: 640px) {
	.arena-nav-btn { width: 36px; height: 36px; font-size: 20px; }
}

/* ---------- خطا ---------- */
.arena-slider-error { padding: 20px; text-align: center; color: #b42318; background: #fef2f2; border-radius: 8px; }