@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn.woff2') format('woff2');
  font-display: swap;
}

.elkamehr-mp-player {
  font-family: 'Vazirmatn', 'SF Pro Display', 'San Francisco', 'Segoe UI', Arial, sans-serif;
  border-radius: 2rem;
  box-shadow: 0 8px 32px 0 #c4d4ed33;
  padding: 1.7rem 1rem 1.3rem 1rem;
  margin: 1.8rem auto;
  max-width: 520px;
  direction: rtl;
  transition: background .29s, color .22s, box-shadow .32s cubic-bezier(.23,2,.2,1);
  background: rgba(255,255,255,0.19);
  backdrop-filter: blur(13px) saturate(1.18);
  border: 1.1px solid rgba(180,200,240,0.10);
}

.elkamehr-mp-player.dark {
  background: rgba(38,52,75,0.34);
  color: #eaf4ff;
  border: 1.3px solid #2d3d53b0;
}

.elkamehr-mp-main { display: flex; gap: 1.1rem; align-items: center; }
.elkamehr-mp-cover {
  width: 92px; min-width: 92px; height: 92px;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #eaeff7b4;
  box-shadow: 0 2px 12px 0 #c2e2fb33;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .28s cubic-bezier(.2,1.8,.4,1);
  animation: fadeIn .7s cubic-bezier(.1,.6,.5,1.1) both;
}
.elkamehr-mp-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .33s cubic-bezier(.6,2,0.3,1);
}
.elkamehr-mp-cover-placeholder { font-size: 2.3rem; color: #b6b6c8; text-align: center; width: 100%; }

.elkamehr-mp-content { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.6rem; }
.elkamehr-mp-info { text-align: right; margin-bottom: 0.1rem; }
.elkamehr-mp-title { font-size: 1.13rem; font-weight: 700; margin-bottom: 0.08rem; letter-spacing: -0.02em; }
.elkamehr-mp-artist { font-size: 1rem; color: #7a7a96; font-weight: 500; }

.elkamehr-mp-waveform {
  width: 100%;
  min-height: 58px;
  margin: .18rem 0 .67rem 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.13);
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s cubic-bezier(.2,2,.4,1);
  animation: glassAnim 1.3s cubic-bezier(.23,.6,.3,1) both;
  backdrop-filter: blur(9px) saturate(1.13);
}
.elkamehr-mp-player.dark .elkamehr-mp-waveform {
  background: rgba(34,54,89,0.21);
}

.elkamehr-mp-player .wavesurfer-canvas,
.elkamehr-mp-player .wavesurfer-svg {
  border-radius: 15px !important;
  transition: box-shadow .22s cubic-bezier(.2,1.5,.5,1.2);
}

.elkamehr-mp-controls {
  display: flex; align-items: center; gap: 1.2rem; margin-top: .1rem; flex-wrap: wrap;
}
.elkamehr-mp-btn {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.23);
  color: #288cfb;
  border: none; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px #0003;
  font-size: 2.3rem;
  transition: background .25s, transform .17s, box-shadow .19s;
  animation: popInBtn .62s cubic-bezier(.1,1.8,.3,1) both;
}
.elkamehr-mp-player.dark .elkamehr-mp-btn {
  background: rgba(36,54,89,0.25);
  color: #6eb7ff;
}
.elkamehr-mp-btn:active { transform: scale(.93); }
.elkamehr-mp-btn:hover { background: rgba(36,110,255,0.15); }

.elkamehr-mp-time {
  min-width: 80px;
  font-size: 1.14rem;
  color: #1868a0;
  font-variant-numeric: tabular-nums;
  background: none !important;
  font-weight: 700;
  margin: 0 2px;
}
.elkamehr-mp-player.dark .elkamehr-mp-time { color: #e8f4ff; }

.elkamehr-mp-speed-btn {
  background: rgba(255,255,255,0.19);
  border: none;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-weight: bold;
  font-size: 1rem;
  color: #288cfb;
  cursor: pointer;
  outline: none;
  transition: background .17s;
}
.elkamehr-mp-player.dark .elkamehr-mp-speed-btn {
  background: rgba(36,54,89,0.26);
  color: #6eb7ff;
}
.elkamehr-mp-speed-btn:hover {
  background: rgba(76,176,255,0.13);
}

.elkamehr-mp-download {
  padding: 0.4em 1.12em;
  border-radius: 22px;
  background: rgba(220,235,255,0.22);
  color: #288cfb;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08rem;
  margin-right: 4px;
  margin-left: 4px;
  transition: background .17s, color .15s;
  opacity: .93;
}
.elkamehr-mp-download:hover { background: #cbeaff; color: #0055b8;}
.elkamehr-mp-player.dark .elkamehr-mp-download {
  background: rgba(34,54,89,0.17);
  color: #6eb7ff;
}
.elkamehr-mp-player.dark .elkamehr-mp-download:hover {
  background: #1a263b;
}

@media (max-width: 650px) {
  .elkamehr-mp-main { flex-direction: column; gap: 0.8rem; align-items: stretch; }
  .elkamehr-mp-cover { margin: 0 auto; }
  .elkamehr-mp-content { align-items: stretch; }
  .elkamehr-mp-info { text-align: center; }
  .elkamehr-mp-waveform { min-height: 38px; }
}

body[dir="ltr"] .elkamehr-mp-player { direction: ltr; }
body[dir="ltr"] .elkamehr-mp-info, body[dir="ltr"] .elkamehr-mp-title, body[dir="ltr"] .elkamehr-mp-artist { text-align: left; }

/* Spinner for loading */
.elkamehr-mp-loading {
  display:flex; align-items:center; justify-content:center;
  min-height:60px; color:#0097f3; font-size:1.11rem; letter-spacing:0.04em;
  font-family: Vazirmatn, Arial,sans-serif;
}
.elkamehr-mp-spinner {
  width:32px; height:32px; border:4px solid #c5e1ff; border-top:4px solid #0097f3;
  border-radius:50%; animation:spin 1.1s linear infinite; margin:0 14px;
}

/* Animations */
@keyframes fadeIn { from {opacity:.05;transform:scale(.9);} to {opacity:1;transform:scale(1);} }
@keyframes glassAnim { 0% {opacity:0;filter:blur(7px);} 90% {opacity:.98;} 100% {opacity:1;filter:blur(0);} }
@keyframes popInBtn { from {transform:scale(0.7);} to {transform:scale(1);} }
@keyframes spin { 100%{transform:rotate(360deg);} }