@charset "UTF-8";
/* ==========================================================================
   ترتيب أيقونات الهيدر على الموبايل فقط — لا يمس الديسكتوب إطلاقاً
   --------------------------------------------------------------------------
   • زر الموسيقى يخرج من صف الأيقونات ويصعد إلى صف الشعار (أقصى اليسار)
     مع عبارة «استمع وتصفح» بجانبه.
   • صف الأيقونات يصبح سبعة فقط بالترتيب من اليسار إلى اليمين:
     القائمة — الوضع الليلي — إعلاناتي — المفضلة — الدردشة — المتاجر — الخروج
   • كل القواعد داخل @media (max-width: 860px) → الديسكتوب كما هو تماماً.
   ========================================================================== */

@media (max-width: 860px) {

  /* الحاوية المرجعية لتموضع زر الموسيقى (الترتيب: شعار ← أيقونات ← بحث) */
  html body .header-main-inner {
    position: relative !important;
  }

  /* ---------- نقل زر الموسيقى إلى صف الشعار ---------- */
  html body .header-main-inner .header-actions .sq-brand-music-btn {
    position: absolute !important;
    top: 8px !important;
    left: 18px !important;              /* نفس هامش .container حتى يتناسب مع صف الأيقونات */
    right: auto !important;
    bottom: auto !important;
    z-index: 30 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    direction: ltr !important;          /* الأيقونة يساراً والعبارة يمينها */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 2px solid #f08a1d !important;
    border-radius: 13px !important;
    background: #0d1629 !important;
    color: #f59e0b !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35) !important;
    overflow: visible !important;
  }

  html body .header-main-inner .header-actions .sq-brand-music-btn .sq-bm-icon {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* ---------- عبارة «استمع وتصفح» ---------- */
  html body .header-main-inner .header-actions .sq-brand-music-btn::after {
    content: "استمع وتصفح";
    color: #f08a1d;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  /* نفس المعنى ببقية لغات الموقع (نصوص أقصر لأن الحروف اللاتينية أعرض) */
  html[lang="fr"] body .header-main-inner .header-actions .sq-brand-music-btn::after {
    content: "Écouter";
  }
  html[lang="en"] body .header-main-inner .header-actions .sq-brand-music-btn::after {
    content: "Listen";
  }

  /* ---------- النسخ اللاتينية (FR/EN): الشعار يساراً ⇒ الزر ينعكس إلى اليمين ---------- */
  /* بدونه كان الزر يغطي الشعار تماماً في dir=ltr */
  html[dir="ltr"] body .header-main-inner .header-actions .sq-brand-music-btn {
    left: auto !important;
    right: 18px !important;
  }

  /* ---------- إتاحة مساحة للشعار حتى لا يتداخل مع الزر ---------- */
  html body .header-main-inner .brand {
    max-width: calc(100% - 178px) !important;
  }
}