:root {
    --lp-radius: 20px;
    --lp-cover-size: 80px;
}

/* =====================================================================
   تم ۱: لوکس شیشه‌ای (Glassmorphism) — پیش‌فرض
   ===================================================================== */
.luxury-player.theme-luxury {
    --lp-primary: #1a252f;
    --lp-secondary: #627d98;
    --lp-accent: #d4af37;
    --lp-accent-hover: #b89528;
    --lp-bg: rgba(255, 255, 255, 0.92);
    --lp-surface: #ffffff;
    --lp-border: rgba(255, 255, 255, 0.8);
    --lp-track-bg: rgba(0, 0, 0, 0.08);
    --lp-item-bg: rgba(255, 255, 255, 0.6);
    --lp-item-border: rgba(0, 0, 0, 0.06);
    --lp-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    --lp-blur: 16px;
    --lp-radius: 20px;
}

/* =====================================================================
   تم ۲: مینیمال ساده (Minimal Clean) — خطی، بدون افکت، بسیار ساده
   ===================================================================== */
.luxury-player.theme-minimal {
    --lp-primary: #1f1f1f;
    --lp-secondary: #8a8a8a;
    --lp-accent: #2f6feb;
    --lp-accent-hover: #1c56c9;
    --lp-bg: #ffffff;
    --lp-surface: #ffffff;
    --lp-border: #e6e6e6;
    --lp-track-bg: #ededed;
    --lp-item-bg: #fafafa;
    --lp-item-border: #eeeeee;
    --lp-shadow: none;
    --lp-blur: 0px;
    --lp-radius: 10px;
}

/* =====================================================================
   تم ۳: دارک استودیو (Dark Studio) — کنتراست بالا
   ===================================================================== */
.luxury-player.theme-dark-studio {
    --lp-primary: #f5f5f7;
    --lp-secondary: #9a9aa8;
    --lp-accent: #ff5c35;
    --lp-accent-hover: #e0451f;
    --lp-bg: #121216;
    --lp-surface: #1e1e24;
    --lp-border: rgba(255, 255, 255, 0.08);
    --lp-track-bg: rgba(255, 255, 255, 0.12);
    --lp-item-bg: rgba(255, 255, 255, 0.05);
    --lp-item-border: rgba(255, 255, 255, 0.06);
    --lp-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
    --lp-blur: 0px;
    --lp-radius: 16px;
}

/* =====================================================================
   ساختار پایه (مشترک بین همه تم‌ها)
   ===================================================================== */
.luxury-player {
    width: 100%;
    box-sizing: border-box;
    background: var(--lp-bg);
    backdrop-filter: blur(var(--lp-blur));
    -webkit-backdrop-filter: blur(var(--lp-blur));
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 16px 20px;
    color: var(--lp-primary);
    box-shadow: var(--lp-shadow);
    direction: rtl; /* فقط عناوین/توضیحات فارسی RTL هستند */
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.luxury-player * {
    box-sizing: border-box;
}

/* Header */
.luxury-player .player-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.luxury-player .cover-art {
    position: relative;
    width: var(--lp-cover-size);
    height: var(--lp-cover-size);
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* حلقه پالس دور کاور هنگام پخش */
.luxury-player .cover-art::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid var(--lp-accent);
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}

.luxury-player.is-playing .cover-art::before {
    animation: lp-cover-pulse 1.8s ease-out infinite;
}

/* بزرگ‌نمایی ملایم + درخشش نرم دور کاور هنگام پخش (بدون چرخش) */
.luxury-player.is-playing .cover-art {
    animation: lp-cover-glow 2.4s ease-in-out infinite;
}

@keyframes lp-cover-pulse {
    0% { transform: scale(0.92); opacity: 0.9; }
    70%, 100% { transform: scale(1.18); opacity: 0; }
}

@keyframes lp-cover-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    50% {
        transform: scale(1.03);
        /* فال‌بک ساده برای مرورگرهای قدیمی؛ خط color-mix پایین در صورت پشتیبانی جایگزین می‌شود */
        box-shadow: 0 10px 25px rgba(212, 175, 55, 0.35);
        box-shadow: 0 10px 25px color-mix(in srgb, var(--lp-accent) 35%, transparent);
    }
}

.luxury-player .track-info {
    flex-grow: 1;
    overflow: hidden;
}

.luxury-player .track-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.luxury-player .track-desc {
    margin: 0;
    font-size: 13px;
    color: var(--lp-secondary);
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2; /* 👈 اضافه کردن ویژگی استاندارد */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =====================================================================
   بلوک کنترل‌ها: صراحتاً LTR (Seekbar، زمان‌ها، دکمه‌ها، سرعت، صدا)
   ===================================================================== */
.luxury-player .lp-ltr-controls {
    direction: ltr;
    text-align: left;
}

/* =====================================================================
   Seekbar موج‌صوتی تعاملی (Waveform) — دقیقاً مانند SoundCloud
   ===================================================================== */
.luxury-player .progress-wrapper {
    margin-bottom: 12px;
}

.luxury-player .lp-waveform-seekbar {
    position: relative;
    width: 100%;
    height: 72px;
    margin-bottom: 8px;
    cursor: pointer;
    touch-action: none;
    border-radius: 4px;
}

.luxury-player .lp-waveform-seekbar:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
}

/* دو لایه دقیقاً منطبق بر هم: لایهٔ زیرین خنثی (کل موج) و لایهٔ رویی رنگ اکسنت
   که با تغییر width به‌صورت زنده روی همان میله‌ها کلیپ می‌شود؛ چون هر دو لایه
   میله‌هایی با عرض/فاصلهٔ ثابت و کاملاً یکسان دارند، مرز رنگی همیشه بی‌نقص و نرم است. */
.luxury-player .lp-waveform-bars,
.luxury-player .lp-waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    pointer-events: none;
}

.luxury-player .lp-waveform-bars {
    width: 100%;
}

.luxury-player .lp-waveform-bars span,
.luxury-player .lp-waveform-progress span {
    flex: 0 0 2px;
    width: 2px;
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
}

.luxury-player .lp-waveform-bars span {
    background: var(--lp-track-bg);
    transition: background-color 0.2s ease;
}

.luxury-player .lp-waveform-progress {
    width: 0%;
    overflow: hidden;
    will-change: width;
}

.luxury-player .lp-waveform-progress span {
    background: var(--lp-accent);
}

/* پالس صوتی نرم روی میله‌های «نقطهٔ فعال» (درست کنار مکان‌نمای پخش) هنگام is-playing؛
   تأخیر انیمیشن هر میله مستقیماً از جاوااسکریپت (متغیر --delay) تزریق می‌شود. */
.luxury-player.is-playing .lp-waveform-bars span.lp-bar-active {
    background: var(--lp-accent);
    animation: lp-waveform-pulse 0.7s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes lp-waveform-pulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(1.3); opacity: 0.7; }
}

.luxury-player .time-indicators {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lp-secondary);
    font-weight: 500;
    user-select: none;
}

.luxury-player .time-total {
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 600;
}

.luxury-player .time-total.active-remaining {
    color: var(--lp-accent);
}

/* =====================================================================
   ردیف واحد کنترل‌ها: سرعت+صدا (چپ) — پخش/رد شدن (وسط، کاملاً وسط‌چین) — اشتراک/لیست (راست)
   ===================================================================== */
.luxury-player .lp-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.luxury-player .lp-controls-left,
.luxury-player .lp-controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}

.luxury-player .lp-controls-right {
    justify-content: flex-end;
}

.luxury-player .lp-controls-center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.luxury-player .btn-control {
    background: none;
    border: none;
    color: var(--lp-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px;
    border-radius: 50%;
    text-decoration: none;
    flex-shrink: 0;
}

.luxury-player .btn-control:hover {
    color: var(--lp-accent);
    transform: scale(1.08);
}

.luxury-player .btn-play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--lp-surface);
    color: var(--lp-primary);
    border: 1px solid var(--lp-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    margin: 0 4px;
}

.luxury-player .btn-play:hover {
    background: var(--lp-accent);
    color: #ffffff;
    border-color: var(--lp-accent);
}

.luxury-player .icon-fill svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.luxury-player .btn-10s svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.luxury-player .btn-10s text {
    fill: currentColor;
}

/* دکمه سرعت پخش */
.luxury-player .btn-speed {
    width: auto;
    height: auto;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--lp-border);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-secondary);
}

.luxury-player .btn-speed:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    transform: none;
}

/* Mute / Volume */
.luxury-player .icon-vol-off {
    display: none;
}

.luxury-player.is-muted .icon-vol-on {
    display: none;
}

.luxury-player.is-muted .icon-vol-off {
    display: block;
}

.luxury-player .volume-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.luxury-player .volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 4px;
    background: var(--lp-track-bg);
    outline: none;
    cursor: pointer;
}

.luxury-player .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--lp-accent);
    border: 2px solid var(--lp-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.luxury-player .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.luxury-player .volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background: var(--lp-track-bg);
}

.luxury-player .volume-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 2px solid var(--lp-surface);
    border-radius: 50%;
    background: var(--lp-accent);
    cursor: pointer;
}

/* اشتراک‌گذاری + تولتیپ کپی لینک */
.luxury-player .share-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.luxury-player .lp-copy-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--lp-primary);
    color: var(--lp-bg);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.luxury-player .lp-copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--lp-primary);
}

.luxury-player .lp-copy-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Playlist — دکمهٔ toggle اکنون داخل lp-controls-row است؛ این بخش فقط پنل قابل‌گسترش را می‌سازد */
.luxury-player .ui-playlist-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.luxury-player .playlist-list {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid var(--lp-item-border);
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, margin-top 0.35s ease-in-out, padding-top 0.35s ease-in-out, border-top-width 0.35s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.luxury-player .playlist-list.open {
    max-height: 220px;
    margin-top: 14px;
    padding-top: 14px;
    border-top-width: 1px;
    overflow-y: auto;
}

.luxury-player .playlist-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--lp-item-bg);
    color: var(--lp-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxury-player .playlist-item:hover {
    background: var(--lp-surface);
    color: var(--lp-primary);
}

.luxury-player .playlist-item.active {
    /* فال‌بک ساده برای مرورگرهای قدیمی‌تر که color-mix() را نمی‌شناسند؛
       چون مقدار color-mix در این مرورگرها نامعتبر است، نادیده گرفته می‌شود
       و همین مقدار rgba جایگزین به‌عنوان مقدار نهایی باقی می‌ماند. */
    background: rgba(212, 175, 55, 0.12);
    background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
    color: var(--lp-primary);
    border-color: rgba(212, 175, 55, 0.35);
    border-color: color-mix(in srgb, var(--lp-accent) 35%, transparent);
    border-right: 3px solid var(--lp-accent);
    font-weight: 700;
}

/* =====================================================================
   ریسپانسیو موبایل: حداکثر فشرده‌سازی ارتفاع + چیدمان تک‌ردیفهٔ LTR بدون هم‌پوشانی
   ===================================================================== */
@media (max-width: 576px) {
    .luxury-player {
        padding: 12px 16px;
    }

    /* حذف کاور در موبایل (پیش‌فرض): عنوان و توضیحات اپیزود کل پهنای هدر را می‌گیرند
       تا خوانا و شیک نمایش داده شوند و ارتفاع هدر به حداقل برسد. اگر سوییچ
       «نمایش کاور در موبایل» در المنتور روشن باشد (کلاس show-mobile-cover)،
       قوانین بعدی با specificity بالاتر این حالت را override می‌کنند. */
    .luxury-player .cover-art {
        display: none;
    }

    .luxury-player .player-header {
        gap: 0;
        margin-bottom: 8px;
    }

    .luxury-player .track-info {
        width: 100%;
    }

    /* حالت اختیاری: کاور فشرده و آیکونیک در موبایل نمایش داده شود بدون بهم‌ریختن تیتر */
    .luxury-player.show-mobile-cover .cover-art {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .luxury-player.show-mobile-cover .player-header {
        gap: 10px;
    }

    .luxury-player.show-mobile-cover .track-info {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Waveform کوتاه‌تر: فضای کمتر می‌گیرد اما با انگشت کاملاً قابل Seek/کلیک است */
    .luxury-player .progress-wrapper {
        margin-bottom: 8px;
    }

    .luxury-player .lp-waveform-seekbar {
        height: 45px;
    }

    .luxury-player .lp-controls-row {
        gap: 6px;
        margin-top: 8px;
    }

    .luxury-player .lp-controls-left,
    .luxury-player .lp-controls-right {
        gap: 6px;
    }

    /* دکمه‌های وسط (۱۰- | Play | ۱۰+) با فاصلهٔ ۸px و حداقل سایز ۳۶px قابل‌لمس */
    .luxury-player .lp-controls-center {
        gap: 8px;
    }

    .luxury-player .lp-controls-center .btn-control {
        min-width: 36px;
        min-height: 36px;
    }

    /* دکمهٔ سرعت و دکمهٔ اشتراک‌گذاری در طرفین، با سایز ثابت و مناسب لمس */
    .luxury-player .btn-speed {
        flex-shrink: 0;
        padding: 4px 8px;
        font-size: 11px;
    }

    .luxury-player .lp-controls-left .btn-control,
    .luxury-player .lp-controls-right .btn-control {
        min-width: 34px;
        min-height: 34px;
    }

    /* اسلایدر ولوم در حالت لمسی/موبایل مخفی و فقط آیکون Mute/Unmute باقی می‌ماند؛
       با کلیک روی آیکون (کلاس lp-volume-open از جاوااسکریپت) یا هاور/فوکوس،
       اسلایدر به‌صورت Popover عمودی روی آیکون باز می‌شود. */
    .luxury-player .volume-wrapper {
        position: relative;
    }

    .luxury-player .volume-wrapper .volume-slider {
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        width: 70px;
        transform: translateX(-50%) rotate(-90deg);
        transform-origin: center;
        background: var(--lp-surface);
        padding: 10px 6px;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--lp-border);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 3;
    }

    .luxury-player .volume-wrapper:hover .volume-slider,
    .luxury-player .volume-wrapper:focus-within .volume-slider,
    .luxury-player .volume-wrapper.lp-volume-open .volume-slider {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}