@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

    body {
        font-family: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* 2. أسماء الأقسام: معالجة حجم الخط والمساحة العمودية */
    .topaz-line-title {
        margin-bottom: 0.8rem;
        padding-top: 0.6rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid #e0e0e0;
    }
    .topaz-line-title span {
        font-family: 'Cairo', sans-serif;
        font-weight: 800;
        font-size: 1.2rem;
        color: #2c3e50;
        letter-spacing: 0.5px;
        line-height: 1.6;
        display: block;
    }

    .contwidget.musiclist {
        margin-bottom: 0.7rem;
        border-radius: 6px;
        background-color: #fff;
        transition: box-shadow 0.3s ease-in-out;
        overflow: hidden;
    }
    .contwidget.musiclist:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .nameshare {
        display: flex;
        justify-content: space-between;
        /* align-items: center; تم تعديلها إلى flex-start للسماح بتحكم أفضل في تموضع song-actions-cluster */
        align-items: flex-start; /* لتوفير مرونة في دفع مجموعة الطلبات للأسفل */
        padding: 0.25rem 0.4rem; /* زيادة الحشوة العلوية والسفلية قليلاً */
    }

    .song-primary-info {
        flex-grow: 1;
        min-width: 0;
        margin-right: 0.5rem; /* زيادة المسافة بين معلومات الأغنية ومنطقة الأزرار */
    }

    .songname {
        display: flex;
        align-items: flex-start;
        width: 100%;
        font-family: 'Cairo', 'Tajawal', sans-serif;
        font-weight: 600;
        color:  rgb(0, 0, 0);
        text-decoration: none;
        transition: color 0.2s ease-out;
        margin-bottom: 1rem; /* مسافة كبيرة بين اسم الاغنية والفنان/الالبوم */
        line-height: 1.5;
        font-size: clamp(1rem, 1.2vw, 1.2rem);
        overflow-wrap: break-word;
    }
    .songname:hover, .songname > i.fa-music {
        color:rgb(221, 0, 74);
    }
    .songname > i.fa-music {
        font-size: 0.9em;
        color:  rgb(0, 0, 0);
        flex-shrink: 0;
        margin-right: 0em;
        margin-left: 0.1em;
    }

    .audio-card-artist-album-info {
        font-family: 'Tajawal', sans-serif;
        font-size: 1rem; /* تعديل طفيف للحجم */
        color: #b4b6b9;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color 0.3s ease;
        line-height: 1rem;
        padding: 0.1rem 0;
        margin-top: -0.6rem; /* لتقريبها قليلاً بعد زيادة مسافة اسم الأغنية */
        display: block; /* لضمان أن text-align يعمل بشكل صحيح */
        text-align: right; /* **** محاذاة اسم الفنان والألبوم إلى اليمين **** */
    }
    .audio-card-artist-album-info:hover {
        color:rgb(0, 0, 0);
    }

    .song-actions-cluster {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        gap: 0.2rem; /* تعديل المسافة بين زر الطلب وعدد الطلبات */
        margin-top: 0.8rem; /* **** إزاحة واضحة لمجموعة الطلب وعدد الطلبات للأسفل **** */
                               /* تم زيادة هذه القيمة بشكل ملحوظ */
    }

    .nameshare form button {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease, border-color 0.2s ease;
        font-family: 'Cairo', 'Tajawal', sans-serif;
        font-size: 1rem;
        padding: 0.22rem 0.5rem;
        border-radius: 0.85rem;
        border-width: 2px;
        line-height: 1.2rem;
    }
    .nameshare form button:hover {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .nameshare form button i.fa-whatsapp {
        font-size: 1em;
    }

    .audio-request-count-wrapper {
        display: inline-flex;
        align-items: center;
        font-size: 1em;
        font-weight: 500;
        color: rgb(0, 0, 0);
        padding: 0.05rem 0;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease-out;
    }
    .contwidget:hover .audio-request-count-wrapper {
        transform: scale(1.08) translateY(-1px);
        color:  rgb(0, 0, 0);
    }
    .audio-request-count-wrapper i {
        color:  rgb(0, 0, 0);
        margin-right: 0.4em;
        font-size: 0.9em;
        margin-left: 0.2em;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .contwidget:hover .audio-request-count-wrapper i {
        transform: rotate(-8deg) scale(1.05);
    }

    .plysong {
        margin-top: 0.025rem;
        min-height: 20px;
    }
    .plysong audio {
        display: block;
        width: 100%;
    }


    /* ستايلات خاصة بالمعلومات الإضافية أسفل الكارد الصوتي */
    .audio-card-footer-info {
        text-align: right; /* محاذاة النص إلى اليمين للغة العربية */
        padding: 1px 10px 1px 1px; /* مساحة داخلية (أعلى يمين أسفل يسار) - الأسفل أكبر قليلاً */
        font-size: 0.9rem;  /* حجم خط صغير جداً لعدم التأثير على التصميم */
        color: #a0a0a0;     /* لون رمادي خفيف جداً وغير مزعج */
        line-height: 1.1;   /* ارتفاع سطر مدمج ومناسب للحجم الصغير */
        margin-top: -5px;    /* هامش علوي صغير للفصل عن مشغل الصوت */
        clear: both;        /* لضمان عدم التداخل مع العناصر العائمة إن وجدت */
        direction: rtl;     /* ضمان اتجاه النص من اليمين لليسار */
        /* border-top: 1px solid #f5f5f5; */ /* خط فاصل علوي خفيف جداً (اختياري) */
        overflow: hidden;    /* لإخفاء أي تجاوزات محتملة */
        white-space: nowrap; /* لمنع التفاف النص إذا كان طويلاً جداً في بعض الحالات النادرة */
        text-overflow: ellipsis; /* إضافة ثلاث نقاط إذا تجاوز النص المساحة */
    }

    .audio-card-footer-info span:not(.info-separator) {
        display: inline-block; /* للسماح بالهوامش إذا لزم الأمر */
    }

    .audio-card-footer-info .info-separator {
        margin: 0 0.35em;  /* هامش حول الفاصل */
        color: #c0c0c0;    /* لون فاصل أفتح قليلاً من النص الرئيسي */
        font-size: 0.75em; /* حجم الفاصل أصغر قليلاً ليبدو أكثر نعومة */
        vertical-align: middle; /* محاذاة الفاصل رأسياً مع النص */
    }

    /* --- الاستجابة للشاشات المختلفة --- */
    @media (max-width: 768px) {
        .topaz-line-title span {
            font-size: 1.2rem;
            line-height: 1.6;
        }
        .nameshare {
            padding: 0.25rem 0.4rem;
        }
        .songname {
            font-size: clamp(0.9rem, 1.3vw, 1rem);
            margin-bottom: 0.8rem;
        }
        .audio-card-artist-album-info {
            font-size: 0.9rem;
        }
        .song-actions-cluster {
            margin-top: 0.001rem;
        }
        .nameshare form button {
            font-size: 0.8rem;
            padding: 0.2rem 0.35rem;
        }
        .audio-request-count-wrapper {
            font-size: 0.9em;
        }
        .audio-card-footer-info
        {
            font-size: 0.55rem;
            line-height: 1;
        }
    }

    @media (max-width: 480px) {
        .topaz-line-title span {
            font-size: 1.2rem;
            line-height: 1.5rem;

        }
        .nameshare {
            padding: 0.1rem 0.3rem;
        }
        .song-primary-info {
            margin-bottom: 0; /* إزالة الهامش السفلي إذا كانت الأزرار بجانبها */
            margin-right: 0.2rem; /* تقليل المسافة لليمين قليلاً */
        }
        .songname {
            font-size: clamp(0.9rem, 1.2vw, 0.8rem);
            margin-bottom: 0.8rem; /* تعديل المسافة للشاشات الصغيرة */

        }
        .songname > i.fa-music {
            font-size: 0.85em;
        }
        .audio-card-artist-album-info {
            font-size: 0.8rem; /* تعديل حجم الخط للشاشات الصغيرة */
            line-height: 0.7rem;
        }
        .song-actions-cluster {
            margin-top: 0.001rem;
            gap: 0.15rem;
            align-self: center;
        }
        .nameshare form button {
            padding: 0.18rem 0.4rem;
            font-size: 0.9rem;
        }
        .audio-request-count-wrapper {
            font-size: 0.8em;
        }
        .audio-request-count-wrapper i {
            margin-right: 0.25em;
        }
        .plysong {
            min-height: 15px;
            margin-top: -0.5rem;
        }
        .audio-card-footer-info
        {
            font-size: 0.55rem;
            line-height: 1;
        }
    }

    /* Pagination styling */
    .pagination { flex-wrap: wrap; }
    .pagination .page-link { border-radius: 40px; padding:.5rem 1rem; transition: all .25s ease; }
    .pagination .page-item.active .page-link { background:#0d6efd;color:#fff;box-shadow:0 0 10px rgba(13,110,253,.5); }
    /* Smaller controls on phones */
    @media (max-width:576px){
        .pagination .page-link{padding:.35rem .65rem;font-size:.85rem;border-radius:30px;}
    }

    /* Loading overlay */
    .loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);align-items:center;justify-content:center;display:none;z-index:1050}
    .loading-overlay.show{display:flex}

    /* --- CSS for Share Button and Native Share Fallback Message --- */

  .contwidget.musiclist {
    position: relative;
}



    /* Styling for the Share Button (as per previous refinement) */
    .audio-card-share-button-wrapper {
        position: absolute;
        bottom: 8px;
        left: 10px;
        z-index: 5;
    }

    .audio-card-share-btn {
        background-color: transparent !important;
        color: #6c757d; /* Adjust if card background clashes */
        border: none !important;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: none !important;
        padding: 0;
        opacity: 0.75;
    }

    .audio-card-share-btn:hover,
    .audio-card-share-btn:focus {
        color: var(--bs-success, #28a745);
        transform: scale(1.25);
        opacity: 1;
        background-color: rgba(var(--bs-success-rgb, 40, 167, 69), 0.1) !important;
        outline: none;
    }

    .audio-card-share-btn i {
        font-size: 15px;
        transition: transform 0.2s ease-in-out;
    }

    /* --- Styling for the "Native Share Not Supported" Message --- */
    .native-share-feedback-message {
        position: fixed;
        bottom: 25px; /* Position from bottom */
        left: 50%;
        transform: translateX(-50%);
        background-color: #2c3e50; /* Elegant dark blue/grey */
        color: #ecf0f1; /* Light, clean text color */
        padding: 12px 25px; /* Comfortable padding */
        border-radius: 30px; /* Modern pill shape */
        font-size: 0.9em;
        font-weight: 500;
        z-index: 2000; /* Ensures visibility */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s linear 0.4s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.25);
        transform: translateX(-50%) translateY(20px); /* Initial position for animation */
    }

    .native-share-feedback-message.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0); /* Animate into view */
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }