/* assets/script-mp3.css */

/* والد کلِ پادها: موبایل تک‌ستونه، دسکتاپ دو ستونه */
.ky-mp3-wrap {
  display: grid;
  gap: 1.25rem;
  direction: rtl;
  grid-template-columns: 1fr;            /* موبایل */
}
@media (min-width: 992px) {
  .ky-mp3-wrap {
    grid-template-columns: 1fr 1fr;      /* دسکتاپ: دو باکس کنار هم */
    align-items: stretch;
  }
}
ul.ky-playlist-list {
    margin: 0!important;
}

.ky-mp3-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* هر پاد (یک باکس شامل عنوان/توضیح و لیست پلیرها) */
.ky-mp3-pod {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s 
ease;
}

.ky-mp3-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 16px;
  color: #111827;
  line-height: 1.6;
  position: relative;
  margin: 0;
}

.ky-mp3-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://haminehonar.com/wp-content/uploads/2025/11/write-svg.svg') no-repeat center center / contain;
  flex-shrink: 0;
}

.ky-mp3-speaker {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 16px;
  color: #111827;
  line-height: 1.6;
  position: relative;
  margin: 0;
}

.ky-mp3-speaker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://haminehonar.com/wp-content/uploads/2025/11/mic-svg.svg') no-repeat center center / contain;
  flex-shrink: 0;
}

.ky-mp3-desc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #4b5563;
  line-height: 1.8;
  font-size: 14px;
  margin: 0;
}

/* آیکن قبل از توضیح (تو می‌تونی مسیر SVG جدا برایش بزاری) */
.ky-mp3-desc::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background: url('https://haminehonar.com/wp-content/uploads/2025/11/listen-svg.svg') no-repeat center center / contain;
  flex-shrink: 0;
}

/* لیست پلیرها: بدون بولت و مارجین، و گرید داخلی برای چند فایل */
.ky-mp3-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* پیش‌فرض تک‌ستونه */
  gap: 12px;
}
@media (min-width: 992px) {
  .ky-mp3-list {
    /* grid-template-columns: 1fr 1fr; */
    gap: 14px;
  }
}

/* باکس هر پلیر */
.ky-mp3-item {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* خود پلیر را تمام‌عرض نگه دار */
.ky-mp3-item .plyr--audio,
.ky-mp3-item audio {
  width: 100%;
}

/* تم مینیمال Plyr */
.plyr--audio {
  --plyr-audio-controls-background: #f7f7f8;
  --plyr-color-main: #111827;
  border-radius: 10px;
}

/* حالت‌های خالی/خطا */
.ky-mp3-empty,
.ky-mp3-error {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7a2e0e;
  font-weight: 600;
}

/* های‌لایتِ باکس در حال پخش */
.ky-mp3-item.is-playing {
  border-color: #4da1d8;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
}

/* هدر داخلی آیتم (عنوان/دکمه): بنا به خواست شما مخفی است */
.ky-sticky-head { display: none !important; }

/* ===== Sticky Bar با UI خود Plyr ===== */
.ky-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.12);
  z-index: 9999;
  display: none; /* با JS نمایش داده می‌شود */
}
.ky-stickybar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  direction: rtl;
}

/* برای اینکه عنوان عریض نشود: اندازه برحسب محتوا */
.ky-stickybar-title {
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;    /* محدودیت عرض عنوان */
  flex: 0 0 auto;     /* به اندازه محتوا */
}

/* کانتینر UI پلیر (ظاهر Plyr) */
.ky-sticky-ui {
  flex: 1 1 auto;
  min-width: 0;
}
.ky-sticky-ui .plyr__controls {
  gap: 8px;
}

/* دکمه پلی‌لیست (آیکن سه خط) */
.ky-stickybar .ky-playlist-toggle {
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* پنل پلی‌لیست با انیمیشن اسلاید */
.ky-playlist-panel[hidden] { display: none !important; }
.ky-playlist-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999999;
  display: grid; align-items: end;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.ky-playlist-panel.is-open { opacity: 1; pointer-events: auto; }
.ky-playlist-sheet {
  background: #fff;
  border-radius: 14px 14px 0 0;
  transform: translateY(16px);
  transition: transform .22s ease;
}
.ky-playlist-sheet.is-in { transform: translateY(0); }

/* هدر و لیست بدون فاصله اضافی */
.ky-playlist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ky-playlist-close {
  background: #eee; border: 0; border-radius: 8px;
  width: 36px; height: 36px; cursor: pointer; font-size: 20px; line-height: 1;
}
.ky-playlist-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 45vh; overflow: auto;
}
.ky-playlist-row + .ky-playlist-row { border-top: 1px solid rgba(0,0,0,0.06); }
.ky-playlist-row-btn {
  display: block; width: 100%; text-align: right;
  padding: 12px 16px; background: #fff; border: 0; cursor: pointer;
}
.ky-playlist-row-btn:hover { background: #f8fafc; }

.ky-stickybar-title {
  width: 300px;
}

section.ky-mp3-pod:hover {
    border-color: #4da1d8;
    transition: all 0.3s 
ease;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
}

@media (max-width: 768px) {
.ky-stickybar-inner {
  flex-direction: column;
}
	.ky-stickybar-title {
    width: auto;
	max-width: 100%;
}}

i.backtotop {
    bottom: 100px!important;
}



/* رنگ و استایل نوار ولوم در استیکی */
.ky-stickybar .ky-volume {
  --fill: 100%; /* مقدار پیش‌فرض تا متغیر همیشه تعریف شده باشه */
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(#4da1d8 0 0) 0/var(--fill) 100% no-repeat,
    #e5e7eb;
  cursor: pointer;
  transition: background-size 0.2s ease;
}

/* Chrome / Safari thumb */
.ky-stickybar .ky-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4da1d8;
  border: 0;
  margin-top: -4px;
  cursor: pointer;
}

/* Firefox thumb */
.ky-stickybar .ky-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4da1d8;
  border: 0;
  cursor: pointer;
}

/* Firefox fill colors */
.ky-stickybar .ky-volume::-moz-range-progress {
  background: #4da1d8;
  height: 6px;
  border-radius: 999px;
}
.ky-stickybar .ky-volume::-moz-range-track {
  background: #e5e7eb;
  height: 6px;
  border-radius: 999px;
}

/* سوییچ آیکن‌ها بر اساس aria-pressed */
.ky-btn-mute .icon--pressed,
.ky-btn-play .icon--pressed { display: none; }
.ky-btn-mute[aria-pressed="true"] .icon--pressed,
.ky-btn-play[aria-pressed="true"] .icon--pressed { display: inline; }
.ky-btn-mute[aria-pressed="true"] .icon--not-pressed,
.ky-btn-play[aria-pressed="true"] .icon--not-pressed { display: none; }


button.plyr__control.ky-btn-mute, button.plyr__controls__item.plyr__control.ky-btn-play.plyr__control--pressed {
    line-height: 0!important;
}