/* =========================
   Base wrapper
========================= */
.audio-player-wrapper {
  margin: 1rem auto;
  max-width: 25rem;
}

/* =========================
   Player shell  (✅ تعريف واحد فقط - بدون تضارب)
========================= */
.audio-player-wrapper .audio-player {
  --seek-before-width: 0%;
  --volume-before-width: 50%;

  position: relative;
  overflow: visible;

  display: flex;
  flex-direction: column;   /* صف علوي + صف سفلي */
  gap: .55rem;
  align-items: stretch;     /* مهم */

  max-width: 24.375rem;
  padding: 0.75rem 0.875rem;

  background: #ebebeb;
  /*background: #F8DD4E;*/
  color: #084583;

  border-radius: 20px;

  background-image: url(https://uploads-ssl.webflow.com/642a8227ec2dcc99dcfde26a/6435b6626d1fc35e4e541af4_noise.png);
  background-position: 0 0;
  background-size: auto;
}

@media (max-width: 479px) {
  .audio-player-wrapper .audio-player {
    --volume-before-width: 100%;
  }
}

/* =========================
   ✅ Top row (ثابت وما يلف)
========================= */
.audio-player__top{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;  /* ✅ ما ينزل أي شيء */
  min-width: 0;
}

/* play button */
.audio-player__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 2rem;
  min-height: 2rem;
  border-radius: 50%;
  cursor: pointer;

  transition: all 300ms;
}
.audio-player__play-btn:hover {
  background: rgba(0,0,0,.05);
}

/* time */
.audio-player__time {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 1rem;
  line-height: 1.2;

  flex: 0 0 auto;        /* ثابت */
  white-space: nowrap;
}
@media (max-width: 767px) {
  .audio-player__time { font-size: .75rem; }
}

/* =========================
   Volume (always expanded)
========================= */
.audio-player__volume-wrapper {
  display: flex;
  align-items: center;
  gap: .4rem;

  min-height: 2rem;
  border-radius: 999px;

  /* هذا هو السر: ياخذ الفراغ كله */
  flex: 1 1 0;   /* ✅ يسمح له ينكمش */
  min-width: 0;  /* ✅ مهم جداً */
}

/* السلايدر ياخذ مساحة */
.audio-player__volume-slider {
  width: 100%;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr; /* بدل 0fr */
  align-items: center;

  min-width: 0; /* ✅ */
}

.audio-player__volume-percentage-wrapper {
  display: flex;
  width: 100%;
  min-width: 0; /* ✅ */
  position: relative;
}
.audio-player__volume-percentage {
  width: 100%;
  cursor: pointer;
  min-width: 0; /* ✅ */
}

.audio-player__volume-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 2rem;
  min-height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 250ms;
}
.audio-player__volume-icon:hover {
  background: rgba(0,0,0,.05);
}

/* =========================
   Speed popup
========================= */
.audio-speed { position: relative; }

.audio-speed__field {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.audio-speed__button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  cursor: pointer;

  min-width: 2rem;
  min-height: 2rem;
  border-radius: 50%;

  transition: all 300ms;
  margin: 0;
}
.audio-speed__button:hover {
  background: rgba(0,0,0,.05);
}

.audio-speed__popup{
  display: none;                /* مهم */
  position: absolute;
  top: calc(100% + 6px);        /* ينزل تحت الزر */
  right: 0;
  z-index: 10050;               /* فوق كل شيء */
  width: max-content;           /* خيار ممتاز للقوائم القصيرة */
  overflow: visible;

  background: #F8DD4E;
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  border-radius: .625rem;

  background-image: url(https://uploads-ssl.webflow.com/642a8227ec2dcc99dcfde26a/6435b6626d1fc35e4e541af4_noise.png);
  background-position: 0 0;
  background-size: auto;
}

/* لما تتفعّل (checked) تظهر القائمة */
.audio-speed__field:checked + label .audio-speed__popup{
  display: block;
}

.audio-speed__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: transparent !important;
}

.audio-speed__item {
  cursor: pointer;
  min-width: 5rem;
  font-size: 1rem;
  transition: all .25s;
}
.audio-speed__item:hover { background: rgba(0,0,0,.05); }

.audio-speed__item input { display: none; }

.audio-speed__item label {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  min-height: 2rem;
  padding: .25rem 1rem .25rem 2rem;
  cursor: pointer;

  color: #084583;
  white-space: nowrap;
}

/* (اختياري) إخفاء نقطة الـchecked */
.audio-speed__item input:checked + label::before {
  display: none;
}

/* =========================
   Row 2: progress only
========================= */
.audio-player__timeline {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;

  display: flex;
  padding-bottom: 10px; /* مثل تعديلك */
}

/* progress range */
.audio-player__progress {
  width: 100%;
}

/* =========================
   RANGE styling (no clipping)
========================= */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: 0;

  width: 100%;
  height: 14px;              /* مهم عشان الدائرة ما تنقص */
  background: rgba(8,69,131,.25);
  border-radius: 999px;

  padding: 0;
  margin: 0;
}

/* Progress fill باستخدام gradient */
input[type="range"].audio-player__progress{
  background:
    linear-gradient(#084583, #084583) 0/var(--seek-before-width) 100% no-repeat,
    rgba(8,69,131,.25);
}

/* Volume fill باستخدام gradient */
input[type="range"].audio-player__volume-percentage{
  background:
    linear-gradient(#084583, #084583) 0/var(--volume-before-width) 100% no-repeat,
    rgba(8,69,131,.25);
}

/* WebKit track */
input[type="range"]::-webkit-slider-runnable-track{
  height: 14px;
  background: transparent;
  border-radius: 999px;
}

/* Thumb (الدائرة) */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #052646;

  box-shadow: 0 0 0 3px rgba(8,69,131,.18);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .15s ease;
}

input[type="range"]::-webkit-slider-thumb:active{
  transform: scale(1.1);
  box-shadow: 0 0 0 5px rgba(8,69,131,.22);
}

/* Firefox */
input[type="range"]::-moz-range-track{
  height: 14px;
  background: rgba(8,69,131,.25);
  border-radius: 999px;
}
input[type="range"]::-moz-range-progress{
  height: 14px;
  background: #084583;
  border-radius: 999px;
}
input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #084583;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(8,69,131,.18);
}


.audio-player-wrapper {
  direction: ltr;
}

.audio-player-wrapper .time,
.audio-player-wrapper .progress,
.audio-player-wrapper .controls {
  direction: ltr;
}


/* اخفاء سلايدر الصوت في الجوال والاكتفاء بزر الكتم */
@media (max-width: 576px){
  .audio-player__volume-slider{
    display: none !important;
  }
}


/* =========================
   Smart controls row
   رجوع / تقدم / تكرار
========================= */
.audio-player__smart-controls{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  direction: ltr;
  margin-top: -.15rem;
}

.audio-player__smart-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: #084583;

  height: 2rem;
  min-width: 2rem;
  padding: 0 .18rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .08s ease, color .2s ease;
}

.audio-player__smart-btn:hover{
  background: rgba(0,0,0,.05);
}

.audio-player__smart-btn:active{
  transform: scale(.94);
}

/* حجم الأيقونات بناءً على ارتفاع أزرار سلسبيل */
.audio-player__smart-btn svg{
  width: 2rem;
  height: 1.55rem;
  display: block;
  color: currentColor;
}

/* تأكيد أن SVG يأخذ لون الزر */
.audio-player__smart-btn svg path,
.audio-player__smart-btn svg text,
.audio-player__smart-btn svg tspan{
  fill: currentColor;
  stroke: currentColor;
}

/* في الحالة العادية نخلي المسارات ذات stroke فقط أقرب للرسم الخارجي */
.audio-player__smart-btn svg .cls-1{
  fill: none !important;
  stroke: currentColor !important;
}

/* زر التكرار النشط */
.audio-player__smart-btn.is-active{
  background: #084583;
  color: #fff;
}

/* عند الضغط اللحظي: إحساس تعبئة خفيف */
.audio-player__smart-btn.is-pressed{
  background: #084583;
  color: #fff;
}

@media (max-width: 576px){
  .audio-player__smart-controls{
    gap: .25rem;
  }

  .audio-player__smart-btn{
    height: 1.9rem;
    min-width: 1.9rem;
    padding: 0 .1rem;
  }

  .audio-player__smart-btn svg{
    width: 1.85rem;
    height: 1.45rem;
  }
}