/* ============================================================
   Nasheed Card — Audio Player & Like Button Styles
   ============================================================ */

/* ---------- Player Wrapper ---------- */
.nasheed-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* ---------- Play Button ---------- */
/* ---------- Play Button — Minimal Circle Style ---------- */
.nasheed-play-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background-color: #0D631B1A !important;        /* Light green background */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    box-shadow: none;
	padding : 10px !important;
}

.nasheed-play-btn:hover {
    background-color: #0D631B !important;
    transform: scale(1.06);
}
.nasheed-play-btn:hover svg {
    fill : white !important;
}

.nasheed-play-btn svg {
    width: 16px;
    height: 16px;
    fill: #1a6e3c;                    /* Green icon */
}

/* When playing — filled green */
.nasheed-player.is-playing .nasheed-play-btn {
    background-color: #0D631B !important;
}

.nasheed-player.is-playing .nasheed-play-btn svg {
    fill: #ffffff;
}

/* ---------- Progress Area ---------- */
.nasheed-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nasheed-progress-bar {
    width: 100%;
    height: 4px;
    background: #dde8e1 !important;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.nasheed-progress-fill {
    height: 100%;
    width: 0%;
    background: #1a6e3c !important;
    border-radius: 10px;
    transition: width 0.1s linear;
}

/* ---------- Time Display ---------- */
.nasheed-time {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    font-family: sans-serif;
}

/* ---------- Like Button ---------- */
.nasheed-like-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nasheed-like-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.nasheed-like-btn svg {
    width: 22px;
    height: 22px;
    fill: #d0d0d0; /* Default: grey/unfilled look */
    transition: fill 0.2s ease;
}

.nasheed-like-btn:hover svg,
.nasheed-like-btn.liked svg {
    fill: #923357; /* Red when liked */
}

.nasheed-like-btn.liked {
    transform: scale(1.15);
}

.nasheed-like-count {
    font-size: 13px;
    color: #888;
    font-family: sans-serif;
    min-width: 18px;
}

/* ---------- No Audio Message ---------- */
.nasheed-no-audio {
    font-size: 13px;
    color: #aaa;
    margin: 4px 0;
}