/* Fancy Mini Audio Player - CSS */
.fmp-player {
  --fmp-bg: #fffefa;
  --fmp-surface: #131313;
  --fmp-border: #e1930a;
  --fmp-text: #ffffff;
  --fmp-muted: #b07e42;
  --fmp-accent: #F2B012;
  --fmp-accent-2: #4a3616;
  box-sizing: border-box;
  max-width: 720px;
  width: 100%;
  background: #000;
  border: 1px solid #8c8c8c;
  border-radius: 18px;
  padding: 20px;
  margin: 14px auto;
  position: relative;
  color: var(--fmp-text);
  font-family: "IRANSans",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  isolation: isolate;
  min-height: 148px;
}


:is(.btn, .button, button, [type="submit"], [type="button"]):hover {
  color: var(--btn-color-hover, var(--btn-color, #fff));
  border-color: var(--btn-brd-color-hover, var(--btn-brd-color, #000));
  background-color: var(--btn-bgcolor-hover, var(--btn-bgcolor, #000));
  box-shadow: var(--btn-box-shadow-hover, var(--btn-box-shadow, unset));
}

.fmp-player::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  box-shadow:
    0 2px 2px rgba(242,176,18,0.25),
    0 4px 4px rgba(242,176,18,0.20),
    0 8px 8px rgba(242,176,18,0.15),
    0 16px 16px rgba(242,176,18,0.10),
    0 24px 24px rgba(242,176,18,0.05);
  z-index:-1;
}

.fmp-title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fmp-controls{
  display:flex;
  align-items:center;
  gap:16px;
}

.fmp-cover {
  width: 64px;
  height: 64px;
  flex: 0 0 71px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  left: -18px;
  position: relative;
}

.fmp-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.fmp-buttons{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
}

.fmp-btn{
  appearance:none; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:999px; padding:2px 6px; min-width:54px;
  color: var(--fmp-muted);
  transition: transform .06s ease, opacity .2s ease;
}
.fmp-btn i{
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(to bottom left, #fff, var(--fmp-bg));
  border: 1px solid var(--fmp-border);
  color:#2b2620;
  width: 36px; height:36px; border-radius:999px;
  box-shadow:
    -1px 1px 1px rgba(242,176,18,.25),
     1px -1px 1px rgba(255,255,255,.25),
    -2px 2px 2px rgba(242,176,18,.20),
     2px -2px 2px rgba(255,255,255,.20),
    -4px 4px 4px rgba(242,176,18,.15),
     4px -4px 4px rgba(255,255,255,.15);
}
.fmp-btn span{
  font-size:11px; opacity:.9; margin-top:6px;
}
.fmp-btn:hover{ transform: translateY(-1px); opacity:.95; }
.fmp-btn:active{ transform: translateY(0); opacity:1; }
.fmp-btn.fmp-play i{
  background: linear-gradient(to bottom left, #fff, var(--fmp-bg));
  border:1px solid var(--fmp-border);
  color: var(--fmp-accent);
  width: 46px; height:46px;
}
.fmp-btn.fmp-back i, .fmp-btn.fmp-skip i{
  background: transparent; color:var(--fmp-accent); border:none; box-shadow:none;
}

.fmp-progress{
  margin-top: 14px;
}
.fmp-progress-bar-wrap{
  width:100%; height:8px; border-radius:8px; position:relative;
  background: #fff4cc;
  box-shadow: inset -1px 1px 1px rgba(242,176,18,.25),
              inset  1px -1px 1px rgba(255,255,255,.25),
              inset -2px 2px 2px rgba(242,176,18,.20),
              inset  2px -2px 2px rgba(255,255,255,.20);
  cursor:pointer;
}
.fmp-progress-bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(to right, #ffd95e, var(--fmp-accent));
  border-radius:8px;
}
.fmp-times{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--fmp-muted); margin-top:6px;
}

.fmp-download{
  display:inline-block; margin-top:10px; font-size:12px; color:#1a1a1a; text-decoration:underline;
}

/* Keep size stable on play */
.fmp-player, .fmp-controls, .fmp-progress{ min-width:0; }

/* Small screens */
@media (max-width:480px){
  .fmp-btn{ min-width:40px; }
  .fmp-btn i{ width:30px; height:30px; }
  .fmp-btn.fmp-play i{ width:40px; height:40px; }
  .fmp-cover{ display:none; }
}


/* === Update: center buttons & force LTR order even in RTL pages === */
.fmp-player .fmp-controls{ justify-content:center !important; }
.fmp-player .fmp-buttons{ direction:ltr !important; justify-content:center; margin-inline:auto; }
.fmp-player .fmp-btn{ text-align:center; }