:root{
  --rap-accent: #111827;
  --rap-accent2: #111827;

  --rap-radius: 18px;
  --rap-border: rgba(0,0,0,.12);
  --rap-text: rgba(0,0,0,.92);
  --rap-muted: rgba(0,0,0,.55);
  --rap-bg: #ffffff;

  --rap-shadow: 0 16px 36px rgba(0,0,0,.10);
  --rap-ease: cubic-bezier(.2,.8,.2,1);
}

.rap-wrap{
  direction: rtl;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rap-card{
  max-width: 520px;
  margin: 0 auto;
  background: var(--rap-bg);
  border: 1px solid #111;
  border-radius: 24px;
  padding: 18px;
  box-shadow: none;
  color: var(--rap-text);
}

.rap-card:not(.is-light){
  /* dark (minimal) */
  --rap-bg:#0e1116;
  --rap-text: rgba(255,255,255,.92);
  --rap-muted: rgba(255,255,255,.62);
  --rap-border: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.7);
}

.rap-title{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--rap-text);
  font-weight: 900;
  text-align: center;
  font-size: 18px;
  letter-spacing: .2px;
  padding: 6px 8px 12px;
}

.rap-coverbox{
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid #111;
  border-radius: 18px;
  overflow:hidden;
  background: #fff;
  display:flex;
  align-items:center;
}

.rap-card:not(.is-light) .rap-coverbox{
  border-color: rgba(255,255,255,.72);
  background: #0b0f19;
}

.rap-coverimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rap-coverplaceholder{
  width: 100%;
  height: 100%;
  background:
    radial-gradient(80px 80px at 50% 45%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.04));
}
.rap-card:not(.is-light) .rap-coverplaceholder{
  background:
    radial-gradient(80px 80px at 50% 45%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.04));
}

.rap-progress-row{
  direction: rtl;
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 2px 10px;
  margin-top: 80px;
  margin-bottom: 10px;
}






.rap-like{
  border:0;
  background: transparent;
  padding: 0;
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: var(--rap-text);
}
.rap-like.is-on{ color: #e11d48; }

.rap-progress{
  position: relative;
  height: 6px;
  flex: 1;
  border-radius: 999px;
  background: color-mix(in oklab, var(--rap-text) 10%, transparent);
  cursor: pointer;
}

.rap-progress-bar{
  position:absolute; inset:0;
  transform-origin: right center 
  transform: scaleX(0);
  background: var(--rap-text);
  border-radius: inherit;
}

.rap-progress-knob{
  position:absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--rap-text);
  left: 0%;
}

.rap-time{
  font-size: 13px;
  color: var(--rap-text);
  opacity: .8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rap-dot{ opacity:.5; padding: 0 6px; }

.rap-progress{
  flex: 1 1 auto;
}

.rap-controls{
  position: relative;
  padding-right: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  padding-bottom: 20px;
  padding-top: 10px;
}

.rap-btn{
  width: 46px;
  height: 46px;
  border:0;
  border-radius: 999px;
  background: transparent;
  color: var(--rap-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .15s var(--rap-ease), opacity .15s var(--rap-ease);
}
.rap-btn:hover{ opacity: .88; }
.rap-btn:active{ transform: scale(.96); }

.rap-btn-play{
  width: 78px;
  height: 78px;
  background: var(--rap-text);
  color: var(--rap-bg);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.rap-card:not(.is-light) .rap-btn-play{
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
}

.rap-btn svg{ display:block; }
.rap-btn-play svg{ width: 30px; height: 30px; }

.rap-modal{ position:fixed; inset:0; display:none; z-index: 9999; }
.rap-modal.is-open{ display:block; }
.rap-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.44); }
.rap-modal-panel{
  position:absolute;
  right: 12px; left: 12px; top: 8vh;
  margin:0 auto;
  max-width: 760px;
  background: var(--rap-bg);
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;
}
.rap-card:not(.is-light) ~ .rap-modal .rap-modal-panel { background: var(--rap-bg); }

.rap-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--rap-text) 12%, transparent);
}
.rap-modal-title{ font-weight: 900; color: var(--rap-text); }
.rap-iconbtn{
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  background: transparent;
  color: var(--rap-text);
  cursor:pointer;
}
.rap-search{ padding: 12px 16px; border-bottom: 1px solid color-mix(in oklab, var(--rap-text) 12%, transparent); }
.rap-search-row{ display:grid; grid-template-columns: 1fr 160px; gap: 10px; }
.rap-search input, .rap-search select{
  width:100%;
  outline:none;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  background: transparent;
  color: var(--rap-text);
  padding: 11px 12px;
}

.rap-list{ max-height: 58vh; overflow:auto; padding: 10px; }
.rap-row{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 12%, transparent);
  background: transparent;
  margin: 10px 6px;
}
.rap-row-left{ display:flex; align-items:center; gap: 10px; min-width:0; flex:1; }
.rap-cover{
  width: 46px; height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid color-mix(in oklab, var(--rap-text) 12%, transparent);
  background: rgba(0,0,0,.03);
}
.rap-row-title{ color: var(--rap-text); font-weight: 850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rap-row-sub{ color: var(--rap-muted); font-size: 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rap-row-actions{ display:flex; align-items:center; gap: 8px; }
.rap-mini{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  background: transparent;
  color: var(--rap-text);
  cursor:pointer;
  text-decoration:none;
}
.rap-empty{ padding: 20px; color: var(--rap-muted); text-align:center; }

.rap-toast{
  position: fixed;
  left: 16px;
  bottom: 18px;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s var(--rap-ease), transform .18s var(--rap-ease);
  z-index: 10000;
}
.rap-toast.is-on{ opacity: 1; transform: translateY(0px); }

/* Mini-player */
.rap-mini-player{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10001;
  display: none;

  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  background: var(--rap-bg);
  padding: 10px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rap-mini-left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.rap-mini-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--rap-text);
  flex: 0 0 auto;
}
.rap-mini-title{
  flex:1; min-width:0;
  background: transparent;
  border: 0;
  color: var(--rap-text);
  font-weight: 800;
  font-size: 14px;
  text-align: right;
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.rap-mini-actions{ display:flex; align-items:center; gap: 8px; }
.rap-mini-btn{
  width: 44px; height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--rap-text) 18%, transparent);
  background: transparent;
  color: var(--rap-text);
  cursor: pointer;
}
.rap-mini-btn-primary{
  background: var(--rap-text);
  color: var(--rap-bg);
  border-color: transparent;
}

@media (max-width: 720px){
  .rap-mini-player{ display:flex; }
  .rap-wrap{ padding-bottom: 0; }
}
/* mini-player disabled */
.rap-mini-player{ display:none !important; }

/* Fullscreen layout (use shortcode: [random_audio_player fullscreen="1"]) */
.rap-wrap.is-fullscreen{
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}
/* make the player fill the viewport on mobile */
.rap-wrap.is-fullscreen .rap-card{
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
/* keep inner layout comfy */
.rap-wrap.is-fullscreen .rap-cover-wrap{
  width: min(92vw, 520px);
  margin-inline: auto;
}
.rap-wrap.is-fullscreen .rap-controls{
  width: min(92vw, 520px);
  margin-inline: auto;
}
.rap-progress-bar {
    transform-origin: right;
}

/* Tracks list button (right side) */
.rap-btn-list{
  position:absolute;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
}
.rap-btn-list svg{ width: 24px; height: 24px; }

/* Heart icon toggle (off/on) */
.rap-like .rap-heart-on{
  display: none;
}
.rap-like .rap-heart-off{
  display: inline-flex;
}
.rap-like.is-on .rap-heart-on{
  display: inline-flex;
}
.rap-like.is-on .rap-heart-off{
  display: none;
}


/* Custom adjustments for suggestion modal */
.rap-modal-body{
  width: 90%;
  margin: 8px auto 10px;
}

.rap-modal-body .rap-edit-options,
.rap-modal-body .rap-edit-form{
  margin-top: 4px;
  margin-bottom: 4px;
}

button.rap-btn.rap-btn-suggest{
  place-self: center;
  width: fit-content;
}


/* Hide mini player completely as requested */
.rap-mini-actions,
.rap-mini-title{
  display: none !important;
}