/* === Force grid with left cover, keep RTL text === */
.moad-wave-player {
    /* layout */
    display: grid;
    grid-template-columns: 96px 1fr;
    /* cover | waveform+footer */
    grid-auto-rows: auto;
    gap: 12px;
    align-items: center;

    /* frame (کادر) */
    border: 1px solid #e5e7eb;
    /* کادر دورش */
    border-radius: 12px;
    padding: 12px;
    background: #fff;

    /* keep columns left→right even on RTL pages */
    direction: ltr;
}

/* cover: left column, spans both rows */
.moad-wave-player .moad-cover {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
}

.moad-wave-player .moad-cover img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* waveform canvas: top-right */
.moad-wave-player .moad-wave-canvas {
    grid-column: 2;
    grid-row: 1;
}

/* footer: bottom-right (title + controls) */
.moad-wave-player .moad-wave-footer {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    /* return text direction to RTL inside footer */
    direction: rtl;
}

/* optional: title chips row */
.moad-wave-player .moad-wave-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* responsive: stack vertically on small screens */
@media (max-width: 640px) {
    .moad-wave-player {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        /* cover | canvas | footer */
    }

    .moad-wave-player .moad-cover {
        grid-column: 1;
        grid-row: 1;
    }

    .moad-wave-player .moad-wave-canvas {
        grid-column: 1;
        grid-row: 2;
    }

    .moad-wave-player .moad-wave-footer {
        grid-column: 1;
        grid-row: 3;
    }

    .moad-wave-player .moad-cover img {
        width: 60px;
        height: 60px;
    }
}
/* === Fix: show play button & controls on grid layout === */
.moad-wave-player .moad-wave-footer {
    position: relative;
    z-index: 2;
    /* بالاتر از موج */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.moad-wave-player .moad-wave-canvas {
    position: relative;
    z-index: 1;
    /* زیر کنترل‌ها */
}

/* سبد کنترل‌ها */
.moad-wave-player .moad-wave-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* خود دکمه پخش/توقف */
.moad-wave-player .moad-wave-btn {
    display: inline-flex !important;
    /* اطمینان از دیده‌شدن */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* اگر پلاگین اسپینر داخلی دارد، پنهانش کن که رو دکمه ننشیند */
.moad-wave-player .moad-wave-btn .moad-spinner {
    display: none;
}

/* حالت غیرفعال (قبل از لود موج) */
.moad-wave-player .moad-wave-btn[disabled] {
    opacity: .5;
    cursor: default;
}

/* آیکن پیش‌فرض (اگر SVG/آیکن دیگری نداشته باشی) */
.moad-wave-player .moad-wave-btn::before {
    content: '►';
    font-size: 16px;
    line-height: 1;
    transform: translateX(1px);
}

/* هنگام پخش، به حالت توقف تغییر کن (کلاس is-playing را JS می‌گذارد) */
.moad-wave-player .moad-wave-btn.is-playing::before {
    content: '❚❚';
    transform: none;
}

/* زمان پخش کنار دکمه */
.moad-wave-player .moad-time {
    font-family: monospace;
    font-size: 13px;
    color: #555;
}
/* === Play Button: single white triangle === */
.moad-wave-player .moad-wave-btn {
    width: 40px;
    height: 40px;
    background-color: #0f172a;
    /* رنگ تیره */
    color: #fff;
    border: none;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
}

/* پاک‌کردن هر متن یا آیکن قبلی */
.moad-wave-player .moad-wave-btn::before,
.moad-wave-player .moad-wave-btn::after {
    content: none !important;
}

/* مثلث پلی (با CSS) */
.moad-wave-player .moad-wave-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 14px solid white;
    /* رنگ مثلث */
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

/* حالت پخش (pause) */
.moad-wave-player .moad-wave-btn.is-playing::before {
    content: "";
    border: none;
    width: 10px;
    height: 18px;
    background:
        linear-gradient(to right, white 40%, transparent 40%) left no-repeat,
        linear-gradient(to right, white 40%, transparent 40%) right no-repeat;
    background-size: 4px 100%;
}
.moad-cover {
    width: auto !important;
}