/* سبک‌های پلیر متن */

/* استایل برای موبایل */
/* Hide the desktop image on mobile */
@media (max-width: 768px) {
  .lyric-image-container { /* کلاس عکس دسکتاپ */
    display: none;
  }
}
/* CSS */
@media (max-width: 768px) {
    .lyric-image-container { display: none !important; } /* مخفی کردن دسکتاپ */
    .lyric-image-container-mobile { display: block !important; } /* نمایش موبایل */
}

@media (min-width: 769px) {
    .lyric-image-container-mobile { display: none !important; } /* مخفی کردن موبایل */
}
@media only screen and (max-width: 768px) {
  #lyrics {
    position: absolute !important; /* استفاده از موقعیت مطلق برای مرکز کردن */
    left: 50% !important; /* مرکز افقی */
    top: 50% !important; /* مرکز عمودی */
    transform: translate(-50%, -50%) !important; /* تنظیمات دقیق مرکز */
    width: 90% !important; /* عرض مناسب برای موبایل */
    text-align: center !important; /* متن در مرکز قرار بگیرد */
  }


}

.lyric-player {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
  background-color: #333;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.5) inset;
  border: 3px solid #FFD700;
}

/* تنظیمات برای موبایل */
@media (max-width: 768px) {
  .lyric-player {
    max-width: 95%; /* به جای مقدار ثابت، درصدی استفاده کن */
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}


.lyric-player:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

/* تصویر مربوط به متن */
.lyric-image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

/* لیست اشعار */
#lyrics {
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
}

#lyrics p {
  color: <?php echo $text_color; ?>;
  font-size: <?php echo esc_attr($lyric_data->text_size); ?>;
  line-height: <?php echo esc_attr($lyric_data->line_height); ?>;
  direction: var(--lyric-direction, ltr);
  margin: 0;
  background-color: rgba(255, 255, 255, 1);
  padding: 1px 10px;
  border-radius: 15px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  width: fit-content;
  margin-inline: auto;
  text-align: start;
  unicode-bidi: plaintext;
  transition: opacity 0.3s, transform 0.3s;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
}

/* اندازه فونت در حالت فول‌اسکرین */
.lyric-player:fullscreen #lyrics p {
  font-size: 2vw; /* در حالت فول‌اسکرین، اندازه فونت به 6% از عرض صفحه می‌رسد */
  line-height: <?php echo esc_attr($lyric_data->line_height); ?>;
  background-color: rgba(252, 252, 252, 1);
  padding: 1px 10px;
  border-radius: 15px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  width: fit-content;
  margin-inline: auto;
  text-align: start;
  unicode-bidi: plaintext;
  transition: opacity 0.3s, transform 0.3s;
}


/* حالت فعال برای اشعار و ترجمه‌ها */
#lyrics p.active,
.translation.active {
  color: var(--active-color, <?php echo $highlight_color; ?>) !important;
  font-weight: bold !important;
  transform: scale(1.3) translateZ(50px);
  perspective: 1000px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5),
              inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: approach 0.5s ease-in-out;
}

/* استایل ترجمه */
.translation {
  display: block;
  color: <?php echo $translation_color; ?>;
  font-style: italic;
  margin-inline-start: 10px;
}

/* تنظیمات بخش گزینه‌ها */
.options-container {
  display: flex;
  width: 700px;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: #333;
  border-radius: 8px;
}

.options-container label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #fff;
}

/* کنترل‌های پلیر */
.lyric-player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 800px;
  margin: 10px 0;
}

audio {
  flex-grow: 1;
  max-width: calc(100% - 50px);
}

/* استایل دکمه فول‌اسکرین */
#fullscreen-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #fff; /* رنگ آیکون */
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* عرض دکمه */
    height: 20px; /* ارتفاع دکمه */
    border-radius: 50%; /* گرد کردن دکمه */
    background-color: rgba(255, 255, 255, 0.1); /* پس‌زمینه نیمه‌شفاف */
}

#fullscreen-button:hover {
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.2); /* تغییر پس‌زمینه در حالت hover */
}

#fullscreen-button svg {
    width: 24px; /* اندازه آیکون */
    height: 24px;
}

/* استایل‌های مربوط به تصویر و لوگو */
.image-wrapper {
  position: relative;
  display: inline-block;
}

.logo-overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.2;
  pointer-events: none;
}

.logo-overlay.top-left    { top: 10px; left: 10px; }
.logo-overlay.top-right   { top: 10px; right: 10px; }
.logo-overlay.bottom-left { bottom: 10px; left: 10px; }
.logo-overlay.bottom-right{ bottom: 10px; right: 10px; }

/* تنظیمات انتخاب رنگ */
.color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.color-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.color-icon input[type="color"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.color-icon img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* انیمیشن ایجاد اثر نزدیک شدن */
@keyframes approach {
  0% {
    opacity: 0;
    transform: scale(0.8) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: scale(1.3) translateZ(50px);
    font-weight: bold;
  }
}

/* تنظیمات برای موبایل */
@media (max-width: 768px) {
  .lyric-image-container img {
    max-width: 90%; /* محدود کردن عرض تصویر */
    border-radius: 5px; /* کاهش شعاع گوشه‌ها برای ظاهر متناسب‌تر */
    margin: 0 auto; /* وسط چین کردن تصویر */
  }
}

@media (max-width: 768px) {
  #lyrics {
    height: 60vh;
    padding: 8px;
    margin-top: 5px;
  }

@media (max-width: 768px) {
  #lyrics p {
    font-size: 10px;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  #lyrics p.active,
  .translation.active {
    transform: scale(1.15); /* کاهش میزان بزرگ‌نمایی */
    font-weight: bold;
    color: var(--active-color, <?php echo $highlight_color; ?>);
    perspective: none; /* حذف تغییر پرسپکتیو برای جلوگیری از به‌هم‌ریختگی */
    animation: approach 0.4s ease-in-out;
  }
}

@media (max-width: 480px) {
  #lyrics p.active,
  .translation.active {
    transform: scale(1.1); /* کاهش بیشتر برای گوشی‌های کوچک */
    box-shadow: none; /* حذف سایه برای خوانایی بهتر */
  }
}

@media (max-width: 768px) {
  .options-container {
    width: 100%; /* پر کردن عرض صفحه */
    flex-direction: row; /* چینش عمودی در موبایل */
    gap: 10px; /* کاهش فاصله بین گزینه‌ها */
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .options-container {
    width: 95%; /* کاهش عرض برای گوشی‌های خیلی کوچک */
    gap: 8px;
    padding: 6px;
  }
}
@media (max-width: 768px) {
  .options-container label {
    flex-direction: column; /* نمایش آیکون و متن در ستون */
    gap: 2px; /* کاهش فاصله بین آیکون و متن */
    font-size: 10px; /* کاهش اندازه متن برای موبایل */
  }
}

@media (max-width: 480px) {
  .options-container label {
    font-size: 8px; /* کوچک‌تر شدن متن در گوشی‌های کوچک */
    gap: 2px;
  }
}

/* رسپانسیو برای موبایل (عرض کمتر از 768px) */
@media (max-width: 767px) {
    audio {
        max-width: 100%; /* عرض کامل در موبایل */
        margin-bottom: 10px; /* فاصله از دکمه‌ها در حالت عمودی */
    }
}

/* رسپانسیو برای تبلت (عرض بین 768px تا 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    audio {
        max-width: calc(100% - 40px); /* کاهش فاصله از دکمه‌ها */
    }
}
/* رسپانسیو برای موبایل (عرض کمتر از 768px) */
@media (max-width: 767px) {
    .logo-overlay {
        width: 60px; /* کاهش اندازه لوگو */
        height: 60px;
    }

    .logo-overlay.top-left    { top: 5px; left: 5px; }
    .logo-overlay.top-right   { top: 5px; right: 5px; }
    .logo-overlay.bottom-left { bottom: 5px; left: 5px; }
    .logo-overlay.bottom-right{ bottom: 5px; right: 5px; }
}

/* رسپانسیو برای تبلت (عرض بین 768px تا 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .logo-overlay {
        width: 80px; /* اندازه متوسط برای لوگو */
        height: 80px;
    }

    .logo-overlay.top-left    { top: 8px; left: 8px; }
    .logo-overlay.top-right   { top: 8px; right: 8px; }
    .logo-overlay.bottom-left { bottom: 8px; left: 8px; }
    .logo-overlay.bottom-right{ bottom: 8px; right: 8px; }
}

/* رسپانسیو برای موبایل (عرض کمتر از 768px) */
@media (max-width: 767px) {
    .color-picker {
        gap: 6px; /* کاهش فاصله بین آیتم‌ها */
    }

    .color-icon {
        width: 20px; /* کاهش اندازه آیکون */
        height: 20px;
    }

    .color-icon img {
        width: 14px; /* کاهش اندازه تصویر داخل آیکون */
        height: 14px;
    }
}

/* رسپانسیو برای تبلت (عرض بین 768px تا 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .color-picker {
        gap: 8px; /* فاصله پیش‌فرض */
    }

    .color-icon {
        width: 24px; /* اندازه پیش‌فرض */
        height: 24px;
    }

    .color-icon img {
        width: 16px; /* اندازه پیش‌فرض */
        height: 16px;
    }
}
/* استایل مخصوص موبایل */
@media (max-width: 768px) {
    .lyric-player-controls {
        flex-direction: row;
        padding: 10px;
    }

    .lyric-player-controls audio {
        width: 100%; /* عرض کامل برای موبایل */
    }
}