/*
 * EPC Carousel CSS — v30.2.0
 * تم روی Swiper.js (swiper-bundle.min.css باید قبل از این فایل لود شود)
 */

/* ── Outer wrapper ── */
.epcc-outer {
    position: relative;
    padding: 0 0 24px;
}

/* ── Header ── */
.epcc-header { margin-bottom: 20px; text-align: right; }
.epcc-section-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}
.epcc-title-icon { color: var(--e-global-color-accent, #6366f1); font-size: 0.8em; }
.epcc-section-sub { color: #666; margin-top: 6px; font-size: .9rem; }

/* ── Swiper overrides ── */
.epc-swiper {
    overflow: hidden;
    position: relative;
    padding-bottom: 40px; /* فضا برای pagination */
}
.epc-swiper .swiper-wrapper { align-items: stretch; }
.epc-swiper .swiper-slide   { height: auto; box-sizing: border-box; }

/* ── کارت محصول داخل slide ── */
.epcc-item {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: box-shadow .25s, transform .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.epcc-item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    transform: translateY(-3px);
}

/* ── Badge ── */
.epcc-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--e-global-color-accent, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: .3px;
}

/* ── Image ── */
.epcc-image-wrap {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f8f8fc;
    /* v30.2.3: تصویر واقعی از طریق background-image (inline style در PHP)
       رندر می‌شود، نه با تگ img+object-fit. مزیت: background-size:contain
       کاملاً مستقل از باکس‌مدل (padding/box-sizing) و از هر override
       احتمالی روی تگ‌های <img> در تم/افزونه‌های دیگر مصون است — تصویر
       با هر ابعادی، همیشه کامل و بدون برش داخل کادر مربعی جا می‌شود. */
    background-repeat:   no-repeat;
    background-position: center center;
}
/* BUG FIX (v30.2.9): specificity بالا برده شد (هم‌ارز با ID) + محافظ
   JS در carousel.js که مقدار inline را در برابر اسکریپت‌های شخص‌ثالث
   دیگر مکرراً بازتحمیل می‌کند (چون این خودش inline است، حتی !important
   بیرونی هم به‌تنهایی کافی نیست). */
.epcc-carousel-wrap .epc-swiper .epcc-item .epcc-has-bg { background-size: contain !important; }

.epcc-item:hover .epcc-has-bg { transform: scale(1.05); }

/* تگ img فقط برای alt/screen-reader/SEO نگه داشته شده — از دید کاربر مخفی است */
.epcc-sr-img {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.epcc-item:hover .epcc-image-wrap img { transform: scale(1.05); }

.epcc-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.epcc-overlay {
    position: absolute; inset: 0;
    background: rgba(99,102,241,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.epcc-item:hover .epcc-overlay { opacity: 1; }
.epcc-view-btn {
    color: #fff; font-size: 13px; font-weight: 600;
    border: 2px solid #fff; padding: 6px 16px; border-radius: 20px;
}

/* ── Body ── */
.epcc-body {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
    text-align: right;
    direction: rtl;
}
.epcc-name-link { text-decoration: none; color: inherit; }
.epcc-name {
    font-size: .9rem; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin: 0;
}

/* ── Stars ── */
.epcc-stars { display: flex; gap: 2px; flex-direction: row-reverse; }
.epcc-star {
    font-size: 14px; position: relative; color: #e0e0e0;
    display: inline-block;
}
.epcc-star::after {
    content: '★'; position: absolute; left: 0; top: 0;
    width: var(--f, 0%); overflow: hidden; color: #f5a623;
}

/* ── Price ── */
.epcc-price {
    font-size: .95rem; font-weight: 700;
    color: var(--e-global-color-accent, #6366f1);
    margin-top: auto;
}
.epcc-price span { font-size: .75rem; font-weight: 400; color: #888; }

/* ── CTA ── */
.epcc-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--e-global-color-accent, #6366f1);
    color: #fff; text-decoration: none;
    font-size: .8rem; font-weight: 600;
    padding: 7px 16px; border-radius: 8px;
    transition: opacity .2s;
    align-self: flex-start;
}
.epcc-cta:hover { opacity: .85; }

/* ── Carousel wrap ── */
.epcc-carousel-wrap {
    position: relative;
}

/* ── Nav buttons (v30.2.4: بازگردانده شد — به Swiper وصل می‌شود در carousel.js) ── */
.epc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--e-global-color-accent, #6366f1);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s, opacity .2s;
    padding: 0;
}
.epc-nav:hover     { background: var(--e-global-color-accent, #6366f1); color: #fff; }
.epc-nav:active    { transform: translateY(-50%) scale(.92); }
.epc-nav-prev      { right: -8px; }
.epc-nav-next      { left: -8px; }

/* Swiper این کلاس را وقتی loop خاموش است و به ابتدا/انتها رسیده‌ایم اضافه می‌کند */
.epc-nav-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .epc-nav        { width: 32px; height: 32px; }
    .epc-nav-prev   { right: 4px; }
    .epc-nav-next   { left: 4px; }
}

/* ── Pagination dots ── */
.epc-pagination {
    position: absolute;
    bottom: 4px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 10px;
    z-index: 5;
}
.epc-pagination .swiper-pagination-bullet {
    width: 18px; height: 18px;
    background: #ccc; opacity: 1;
    border-radius: 50%;
    transition: background .2s, transform .2s;
    cursor: pointer;
}
.epc-pagination .swiper-pagination-bullet-active {
    background: var(--e-global-color-accent, #6366f1);
    transform: scale(1.2);
}