/* Royal Audio Player — namespaced, compact, RTL-friendly */
:root{
  --rm-audio-bg: var(--panel, #0f1a2a);
  --rm-audio-border: var(--border, rgba(255,255,255,.10));
  --rm-audio-text: var(--text, #e9eef8);
  --rm-audio-muted: var(--muted, #aeb8ce);
  --rm-audio-gold1: var(--gold1, #ffdf7a);
  --rm-audio-gold2: var(--gold2, #ffcc4d);
  --rm-audio-accent: var(--accent, #60a5fa);
}
.rm-audio{
  width: min(560px, 100%);
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--rm-audio-bg);
  border: 1px solid var(--rm-audio-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px) saturate(1.05);
  color: var(--rm-audio-text);
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.rm-audio__cover{
  width: 220px;
  height: 220px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12,22,38,.9), rgba(10,19,33,.9));
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.rm-audio__cover img{
  display: block;
  width: 200px;
  height: 200px;
 
  object-fit: contain;
  object-position: center;
}
.rm-audio__title{
  margin: 20px 2px 4px;
  font-weight: 800;
  font-size: 1.02rem;
  color: #fff;
  letter-spacing: .2px;
}
.rm-audio__subtitle{
  margin: 0 2px 8px;
  font-size: .92rem;
  color: var(--rm-audio-muted);
}
.rm-audio__play{
  display: flex;
  gap: 5px;
  width: 100px;
  margin: 20px 0px;
  border: 0; outline: none; cursor: pointer;
  border-radius: 12px;
  padding: .8em 1em;
  background: linear-gradient(180deg, var(--rm-audio-gold1) 0%, var(--rm-audio-gold2) 100%);
  color: #061e60; font-weight: 900; font-size: 1rem; font-family: inherit;
 
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.rm-audio__play:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.rm-audio__play:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(255,204,77,.22); }

.rm-audio__seek{
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.rm-audio__seek:focus{ outline: none; box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.rm-audio__seek::-webkit-slider-thumb{
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, var(--rm-audio-gold1), var(--rm-audio-gold2));
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.rm-audio__seek::-moz-range-thumb{
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--rm-audio-gold1), var(--rm-audio-gold2));
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.rm-audio__seek::-moz-range-track{
  height: 4px; border-radius: 999px; background: rgba(255,255,255,.16);
}

.rm-audio__row{
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.rm-audio__time{
  flex: 1;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; color: var(--rm-audio-muted);
}
.rm-audio__vol{
  display: flex; align-items: center; gap: 8px; margin-inline-start: 10px;
}
.rm-audio__vol-ico{ font-size: 1.05rem; opacity: .9; }
.rm-audio__vol-range{
  width: 120px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.rm-audio__vol-range::-webkit-slider-thumb{
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, var(--rm-audio-accent), #356ac3);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.rm-audio__vol-range::-moz-range-thumb{
  width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--rm-audio-accent), #356ac3);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.rm-audio__vol-range::-moz-range-track{
  height: 4px; border-radius: 999px; background: rgba(255,255,255,.16);
}

/* State helpers */
.rm-audio.is-playing .rm-audio__play::before{ content: '⏸ '; }
.rm-audio:not(.is-playing) .rm-audio__play::before{ content: '▶ '; }

@media (max-width: 520px){
  .rm-audio__cover{ height: 220px; }
  .rm-audio__vol-range{ width: 90px; }
}
/* --- Play button: کوچکتر و چسبیده به سمت چپ (در RTL) --- */


/* --- نوارهای پخش و ولوم از چپ به راست --- */
.rm-audio__seek,
.rm-audio__vol-range{
  direction: rtl; /* صرفاً جهت رِنج‌ها؛ بقیه‌ی پلیر RTL می‌مونه */
}

/* --- کاور: دقیقاً داخل کادر بماند و بیرون نزند --- */
.rm-audio__cover{
  background: transparent;      /* پس‌زمینه‌ی تیره‌ی کاور حذف شود */
  overflow: hidden;
}
.rm-audio__cover img{
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* تصویر کامل دیده می‌شود، بریدگی از پایین رخ نمی‌دهد */
  object-position: center;
}
/* === جدا کردن تایم و ولوم به دو سطر مجزا === */
.rm-audio__row{
  display: flex;
  flex-direction: column; /* به جای row، بذار column */
  align-items: stretch;   /* هرکدوم تمام عرض بگیرن */
  gap: 10px;               /* فاصله عمودی بین تایم و ولوم */
  margin-top: 10px;
  width: 100%;
}

/* خط زمان: وسط چین و تمام عرض */
.rm-audio__time{
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--rm-audio-muted);
  width: 100%;
}

/* بخش ولوم: چپ‌چین و جدا */
.rm-audio__vol{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}