/* ═══════════════════════════════════════════════════════════════════
   EPC Spec Card — v30.3.0
   استایل‌های اختصاصی ویجت «کارت مشخصات»: کشوی مشخصات، جست‌وجوی زنده،
   انیمیشن پلکانی ردیف‌ها، افکت پالس دکمه، و شمارش انیمیشنی اعداد.
   ═══════════════════════════════════════════════════════════════════ */

/* ── کشوی مشخصات (Accordion) ─────────────────────────────────────────── */
.epc-specs {
    margin:        16px 0;
    border:        1px solid #e5e7eb;
    border-radius: 12px;
    overflow:      hidden;
    background:    #fff;
}

.epc-specs-toggle {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding:         14px 16px;
    background:      #f9fafb;
    border:          none;
    cursor:          pointer;
    font-family:     inherit;
    font-weight:     600;
    font-size:       14px;
    color:           #1f2937;
    transition:      background .2s ease;
}
.epc-specs-toggle:hover { background: #f1f2f6; }
.epc-specs-toggle:focus-visible { outline: 2px solid var(--epc-accent, #6366f1); outline-offset: -2px; }

.epc-specs-toggle-label { display: flex; align-items: center; gap: 8px; }
.epc-specs-toggle-label svg { color: var(--epc-accent, #6366f1); flex-shrink: 0; }
.epc-specs-count { color: #9ca3af; font-weight: 400; font-size: 12px; }

.epc-specs-chevron { color: #6b7280; transition: transform .35s cubic-bezier(.4,0,.2,1); flex-shrink: 0; }
.epc-specs.is-open .epc-specs-chevron { transform: rotate(180deg); color: var(--epc-accent, #6366f1); }

/* تکنیک استاندارد و مدرن accordion بدون نیاز به محاسبه‌ی ارتفاع با JS —
   grid-template-rows از 0fr به 1fr، برای هر مقدار طول محتوا کار می‌کند
   و کاملاً smooth است. */
.epc-specs-panel {
    display:    grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.epc-specs.is-open .epc-specs-panel { grid-template-rows: 1fr; }

.epc-specs-panel-inner {
    overflow:  hidden;
    min-height: 0;
    padding:   0 16px;
}
.epc-specs.is-open .epc-specs-panel-inner { padding: 12px 16px 16px; }

/* ── جست‌وجوی زنده ────────────────────────────────────────────────────── */
.epc-specs-search-wrap { position: relative; margin-bottom: 10px; }
.epc-specs-search-wrap svg {
    position:  absolute;
    top:       50%;
    right:     10px;
    transform: translateY(-50%);
    color:     #9ca3af;
    pointer-events: none;
}
.epc-specs-search {
    width:         100%;
    padding:       8px 34px 8px 10px;
    border:        1px solid #e5e7eb;
    border-radius: 8px;
    font-size:     13px;
    font-family:   inherit;
    background:    #fafafa;
}
.epc-specs-search:focus { outline: 2px solid var(--epc-accent, #6366f1); outline-offset: 1px; background: #fff; }

/* ── جدول مشخصات ──────────────────────────────────────────────────────── */
.epc-specs-table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; }

/* NEW (v30.17): رنگ ملایم و متفاوت برای هر ردیف — بر پایهٔ همون شمارهٔ ردیف
   (--i) که از قبل برای انیمیشن پلکانی داشتیم؛ با hsl() یه چرخهٔ رنگ نرم و
   هماهنگ می‌سازه، برای هر تعداد ردیفی (چه ۵ تا چه ۵۰ تا) خودکار کار می‌کنه. */
.epc-specs-row th,
.epc-specs-row td {
    background:     hsl(calc(var(--i, 0) * 27deg + 220deg), 55%, 97%);
    text-align:     right;
    padding:        9px 10px;
    font-size:      13px;
    line-height:    1.6;
    border-bottom:  3px solid #fff;
    vertical-align: top;
    transition:     filter .2s ease;
}
.epc-specs-row:nth-child(even) th,
.epc-specs-row:nth-child(even) td {
    background: hsl(calc(var(--i, 0) * 27deg + 220deg), 45%, 94%);
}
.epc-specs-row:hover th,
.epc-specs-row:hover td { filter: brightness(0.96); }
.epc-specs-row th { color: #3f3f52; font-weight: 700; white-space: nowrap; width: 38%; }
.epc-specs-row td { color: #1f2430; }
.epc-specs-icon  { margin-left: 6px; }
.epc-specs-row:last-child th,
.epc-specs-row:last-child td { border-bottom: none; }

/* انیمیشن ورود پلکانی هر ردیف هنگام باز شدن کشو */
.epc-specs-row {
    opacity:    0;
    transform:  translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
    transition-delay: calc(var(--i, 0) * 40ms);
}
.epc-specs.is-open .epc-specs-row { opacity: 1; transform: translateY(0); }

.epc-specs-row.epc-specs-row-hidden { display: none; }
.epc-specs-empty {
    display:    none;
    text-align: center;
    color:      #9ca3af;
    font-size:  13px;
    padding:    10px 0;
}
.epc-specs-empty.is-visible { display: block; }

/* ── دکمه فراخوان — افکت پالس/درخشش ──────────────────────────────────── */
.epc-cta-pulse { position: relative; isolation: isolate; }
.epc-cta-pulse::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    var(--epc-accent, #6366f1);
    z-index:       -1;
    animation:     epc-cta-pulse-anim 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes epc-cta-pulse-anim {
    0%   { opacity: .55; transform: scale(1);    }
    70%  { opacity: 0;   transform: scale(1.28); }
    100% { opacity: 0;   transform: scale(1.28); }
}

/* ── شمارش انیمیشنی (count-up) — فقط حالت "در حال شمارش" ─────────────── */
.epc-count-up.epc-counting .epc-rating-val,
.epc-count-up.epc-counting .epc-new-price span:first-child {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .epc-specs-panel,
    .epc-specs-row,
    .epc-specs-chevron,
    .epc-specs-toggle,
    .epc-cta-pulse::after {
        transition: none !important;
        animation:  none !important;
    }
}

@media (max-width: 480px) {
    .epc-specs-row th { width: 44%; font-size: 12.5px; }
    .epc-specs-row td { font-size: 12.5px; }
}