/* Flexbox setup for loop-item */
.loop-item-link {
    display: flex;
    align-items: center;  /* Vertically aligns the play icon, title, duration, and arrow */
    padding: 10px;  /* Add some padding for spacing */
}

/* Left side: Play or Lock icon */
.loop-item-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* Ensures the icon stays on the left */
    margin-right: 20px;  /* 20px gap between the icon and the title/duration */
}

/* Title and Duration (ensures horizontal alignment with play icon) */
.loop-item-details {
    display: flex;
    flex-direction: column;  /* Stack title and duration vertically */
    text-align: left;
    margin-left: 10px;  /* Gap between icon and title/duration */
    flex-grow: 1;  /* Ensure this takes up the available space between play icon and arrow */
}

/* Title style */
.loop-item-title {
    font-weight: bold;
    margin-bottom: 5px;  /* Gap between title and duration */
}

/* Duration style */
.loop-item-duration {
    font-size: 14px;
    color: #555;  /* Optional: Set color for the duration */
}

/* Right side: Arrow icon (clickable) */
.loop-item-arrow {
    display: flex;
    justify-content: flex-end;  /* Ensures the arrow stays on the right */
}

.loop-item-arrow a img {
    width: 20px;  /* Control the size of the arrow */
    height: 20px;
}

/* Locked state styling */
.loop-item-left.locked {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.loop-item-arrow.locked {
    display: flex;
    justify-content: flex-end;
}

.loop-item-arrow img {
    width: 20px;  /* Control the size of the lock icon */
    height: 20px;
}

/* Ensure locked items are visually distinct */
.loop-item-link.locked {
    opacity: 0.6;  /* Dim the locked items slightly */
}