/* ============================================ */
/* RUQYA AUDIO PLAYER v1.0                      */
/* ============================================ */

:root {
    --rap-teal:    #00a8a8;
    --rap-teal-dk: #007a7a;
    --rap-rose:    #c2185b;
    --rap-rose-dk: #880e4f;
    --rap-navy:    #1a237e;
    --rap-gold:    #C9A84C;
    --rap-bg:      #f4f7f7;
    --rap-card:    #ffffff;
    --rap-text:    #1e2a2a;
    --rap-muted:   #6b7c7c;
    --rap-accent:  var(--rap-teal);
    --rap-accent-dk: var(--rap-teal-dk);
    --rap-player-h: 90px;
}

/* النساء: اللون الوردي */
.rap-wrap[data-gender="female"] {
    --rap-accent:    var(--rap-rose);
    --rap-accent-dk: var(--rap-rose-dk);
}

.rap-wrap {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    background: var(--rap-bg);
    padding-bottom: calc(var(--rap-player-h) + 16px);
    max-width: none !important;
    width: auto !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .rap-wrap {
        margin-left: -43px !important;
        margin-right: -50px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ===== اختيار الجنس ===== */
.rap-gender {
    display: flex;
    gap: 10px;
    padding: 16px 16px 0;
}
.rap-gender-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #dde8e8;
    background: white;
    color: var(--rap-muted);
    font-family: 'Tajawal', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
}
.rap-gender-btn[data-gender="male"].active  { background: var(--rap-teal); border-color: var(--rap-teal); color: white; }
.rap-gender-btn[data-gender="female"].active { background: var(--rap-rose); border-color: var(--rap-rose); color: white; }
.rap-gender-icon { font-size: 1.2rem; }

/* ===== التصنيفات ===== */
.rap-cats-wrap {
    padding: 14px 14px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.rap-cats-wrap::-webkit-scrollbar { display: none; }
.rap-cats { display: flex; gap: 8px; width: max-content; }
.rap-cat-btn {
    border: 1.5px solid #d0dede;
    background: white;
    color: var(--rap-muted);
    padding: 7px 16px;
    border-radius: 30px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.rap-cat-btn:hover { border-color: var(--rap-accent); color: var(--rap-accent); }
.rap-cat-btn.active { background: var(--rap-accent); border-color: var(--rap-accent); color: white; }

/* ===== عداد المقاطع ===== */
.rap-count {
    padding: 12px 18px 6px;
    font-size: 0.78rem;
    color: var(--rap-muted);
}

/* ===== قائمة المقاطع ===== */
.rap-list { padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }

.rap-card {
    background: var(--rap-card);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    border: 1.5px solid #e8f0f0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rap-card:hover { border-color: var(--rap-accent); box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.rap-card.active {
    border-color: var(--rap-accent);
    background: linear-gradient(135deg, #f5fafa, #fff);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.rap-card.hidden { display: none; }

/* زر التشغيل */
.rap-card-play {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(0,168,168,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.rap-wrap[data-gender="female"] .rap-card-play { background: rgba(194,24,91,0.1); }
.rap-card.active .rap-card-play { background: var(--rap-accent); }
.rap-card-play svg { width: 18px; height: 18px; fill: var(--rap-accent); }
.rap-card.active .rap-card-play svg { fill: white; }

/* معلومات المقطع */
.rap-card-info { flex: 1; min-width: 0; }
.rap-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rap-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rap-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.rap-card-dur { font-size: 0.78rem; color: var(--rap-muted); }

/* شارة التصنيف */
.rap-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}
.rap-badge-ayn  { background: #FFF3E0; color: #E65100; }
.rap-badge-sihr { background: #F3E5F5; color: #6A1B9A; }
.rap-badge-mass { background: #E8F5E9; color: #1B5E20; }
.rap-badge-gen  { background: #E3F2FD; color: #0D47A1; }

/* شريط تقدم مصغّر داخل البطاقة */
.rap-mini-bar { margin-top: 8px; display: none; }
.rap-card.active .rap-mini-bar { display: block; }
.rap-mini-track { height: 4px; background: #d8eaea; border-radius: 4px; overflow: hidden; }
.rap-mini-fill { height: 100%; background: var(--rap-accent); border-radius: 4px; width: 0%; transition: width 0.3s linear; }

/* زر التحميل */
.rap-card-dl {
    width: 36px; height: 36px;
    border: 1.5px solid #d0dede;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--rap-muted);
    transition: all 0.2s;
}
.rap-card-dl:hover { border-color: var(--rap-accent); color: var(--rap-accent); }
.rap-card-dl svg { width: 15px; height: 15px; }

/* شارة مشترك - مخفية */
.rap-shared-badge { display: none; }

/* ===== مشغّل ثابت ===== */
.rap-player {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--rap-player-h);
    background: linear-gradient(135deg, #007a7a, #00a8a8);
    z-index: 9999;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    transition: background 0.3s;
}
.rap-wrap[data-gender="female"] ~ * .rap-player,
.rap-player.female {  background: linear-gradient(135deg, #880e4f, #c2185b); }

.rap-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rap-player-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.rap-player-name {
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rap-player-cat { color: var(--rap-gold); font-size: 0.7rem; }

.rap-ctrl {
    width: 36px; height: 36px;
    border: none;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.2s;
    flex-shrink: 0;
}
.rap-ctrl:hover { background: rgba(255,255,255,0.2); }
.rap-ctrl svg { width: 16px; height: 16px; fill: white; }

.rap-play-main {
    width: 42px; height: 42px;
    background: var(--rap-accent) !important;
}
.rap-play-main:hover { background: var(--rap-accent-dk) !important; }

.rap-dl-btn {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
    flex-shrink: 0;
}
.rap-dl-btn:hover { border-color: var(--rap-gold); color: var(--rap-gold); }
.rap-dl-btn svg { width: 14px; height: 14px; }

/* شريط التقدم */
.rap-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rap-time {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
}
.rap-time-end { text-align: left; }
.rap-progress-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}
.rap-progress-fill {
    height: 100%;
    background: var(--rap-accent);
    border-radius: 4px;
    width: 0%;
    pointer-events: none;
    transition: width 0.3s linear;
}
.rap-progress-thumb {
    position: absolute;
    top: 50%; right: 0%;
    transform: translate(50%, -50%);
    width: 12px; height: 12px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    transition: right 0.3s linear;
}

/* لا توجد ملفات */
.rap-no-url {
    opacity: 0.45;
    cursor: not-allowed;
}
.rap-no-url .rap-card-play { background: #eee !important; }
.rap-no-url .rap-card-play svg { fill: #aaa !important; }

/* جوال */
@media (max-width: 480px) {
    .rap-card-name { font-size: 0.88rem; }
    .rap-card-play { width: 40px; height: 40px; }
    .rap-gender-btn { font-size: 0.9rem; padding: 10px; }
}