@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;800;900&display=swap');

.piwp-wrap {
    max-width: 480px;
    margin: 16px auto;
    font-family: 'Vazirmatn','Tahoma',sans-serif;
    direction: rtl;
}

.piwp-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(26,39,68,.15);
    border: 1.5px solid #d0d8ee;
}

.piwp-header {
    background: linear-gradient(145deg, var(--pn,#1a2744), var(--pb,#2d4a8a));
    padding: 13px 14px 10px;
    position: relative;
    overflow: hidden;
}

.piwp-header::before {
    content:''; position:absolute; top:-40px; left:-40px;
    width:150px; height:150px; border-radius:50%;
    background:rgba(255,255,255,.04); pointer-events:none;
}

.piwp-logo {
    position:absolute; left:8px; top:50%;
    transform:translateY(-50%);
    width:30px; height:30px;
    opacity:.35; object-fit:contain;
    filter:brightness(10) saturate(0);
    z-index:2; pointer-events:none;
}

.piwp-meta {
    display:flex; align-items:center; gap:10px;
    position:relative; z-index:1;
}

.piwp-disc {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
}

.piwp-playing .piwp-disc { animation:piwp-spin 9s linear infinite; }
@keyframes piwp-spin { to { transform:rotate(360deg); } }

.piwp-info { flex:1; min-width:0; color:#fff; margin-right:38px; }
.piwp-brand    { font-size:8px; font-weight:700; opacity:.48; letter-spacing:.07em; margin-bottom:1px; }
.piwp-title    { font-size:14px; font-weight:800; line-height:1.2; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.piwp-subtitle { font-size:9px; opacity:.4; min-height:12px; }

.piwp-wave {
    display:flex; align-items:center; gap:2px;
    height:20px; margin-top:9px; position:relative; z-index:1;
}

.piwp-bar {
    width:2.5px; flex-shrink:0; border-radius:2px;
    background:rgba(255,255,255,.14); transform-origin:bottom; transition:background .2s;
}

.piwp-bar.on { background:#6a9fe8; }

.piwp-playing .piwp-bar.on {
    animation:piwp-wave var(--d,.5s) ease-in-out infinite alternate;
}

@keyframes piwp-wave {
    from { transform:scaleY(.2); }
    to   { transform:scaleY(1.3); }
}

.piwp-controls { background:#fff; padding:8px 13px 11px; }

.piwp-prog {
    height:4px; background:#e4eaf5; border-radius:2px;
    position:relative; cursor:pointer;
    margin-bottom:5px; direction:ltr; touch-action:none;
}

.piwp-fill {
    position:absolute; left:0; top:0; height:100%; width:0%;
    background:linear-gradient(to right, var(--pn,#1a2744), var(--pa,#3a6fd8));
    border-radius:2px; pointer-events:none;
}

.piwp-thumb {
    position:absolute; top:50%; left:0%;
    transform:translate(-50%,-50%);
    width:13px; height:13px; background:#fff;
    border:2.5px solid var(--pn,#1a2744); border-radius:50%;
    box-shadow:0 1px 5px rgba(26,39,68,.25); pointer-events:none;
}

.piwp-times {
    display:flex; justify-content:space-between;
    font-size:9px; margin-bottom:8px;
    direction:ltr; font-variant-numeric:tabular-nums;
}

.piwp-cur { color:var(--pa,#3a6fd8); font-weight:700; }
.piwp-rem { color:#7a8aaa; }

/* ── Buttons ── */
.piwp-btns {
    display:flex; align-items:center;
    justify-content:center; gap:8px;
}

/* دکمه‌های جانبی — دایره کوچک */
.piwp-btn {
    border:none;
    border-radius:50%;
    background:#eef1f7;
    cursor:pointer;
    color:var(--pn,#1a2744);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    gap:2px;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    transition:all .14s;
    flex-shrink:0;
    padding:0;
    box-sizing:border-box;
    line-height:1;
}

.piwp-btn:hover  { background:#dde4f4; transform:scale(1.07); }
.piwp-btn:active { transform:scale(.90); }
.piwp-btn span   { font-size:6px; font-weight:800; line-height:1; display:block; }
.piwp-btn svg    { flex-shrink:0; }

/* Play — بزرگتر از بقیه */
.piwp-play {
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    border-radius:50% !important;
    background:linear-gradient(135deg, var(--pn,#1a2744), var(--pb,#2d4a8a)) !important;
    color:#fff !important;
    box-shadow:0 5px 14px rgba(26,39,68,.3);
    flex-direction:row !important;
}

.piwp-play:hover {
    background:linear-gradient(135deg, var(--pb,#2d4a8a), var(--pa,#3a6fd8)) !important;
    transform:scale(1.08) !important;
    box-shadow:0 7px 18px rgba(26,39,68,.38) !important;
}

.piwp-playing .piwp-play {
    background:linear-gradient(135deg, var(--pa,#3a6fd8), var(--pb,#2d4a8a)) !important;
}

.piwp-speed:hover { background:var(--pn,#1a2744) !important; color:#fff !important; }

@media(max-width:400px) {
    .piwp-card     { border-radius:16px; }
    .piwp-header   { padding:11px 12px 8px; }
    .piwp-disc     { width:38px; height:38px; border-radius:10px; }
    .piwp-title    { font-size:13px; }
    .piwp-controls { padding:7px 11px 10px; }
    .piwp-btn      { width:34px; height:34px; min-width:34px; min-height:34px; }
    .piwp-play     { width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; }
    .piwp-btns     { gap:5px; }
}