/* Playlist Manager Frontend Styles - Bootstrap Variables */
.playlist-manager {
    max-width: 1200px;
    margin: 0 auto;
}

.playlist-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    gap: 1.5rem;
}

/* Playlist Grid */

.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    margin-top: 15px;
}
.playlists-grid .playlist-card{border: none; box-shadow: none !important; background: var(--bs-gray-200);} 
.playlists-grid .playlist-card .card-body {   align-items: center;}
.playlist-detail { align-items: center;   flex-grow: 1;  gap: 10px;}
.playlist-detail .card-title { margin-bottom: 2px;}
.playlists-grid .playlist-cover img { width: 80px; border-radius: 10px 0 0 10px;}
.playlist-actions a, .playlist-actions button { border: none;  padding: 0;}
.playlist-actions button .fa-edit {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(/wp-content/plugins/playlist-manager/images/edit-icon.svg);
}
.playlist-actions button .fa-trash {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(/wp-content/plugins/playlist-manager/images/delete-icon.svg);
}

/* create model */
.playlist-modal-theme .modal-dialog { margin: 0; top: 0 !important;}
.playlist-modal-theme .modal-dialog .modal-content{height: 100vh; border-radius: 0; background: #131229;
    background: linear-gradient(90deg, #040404 0%, #1b191e 100%);
    background: -moz-linear-gradient(90deg, #040404 0%, #1b191e 100%);
    background: -webkit-linear-gradient(90deg, #040404 0%, #1b191e 100%);
    }
.playlist-modal-theme .modal-dialog .modal-header{ display: block; border: none; text-align: center;}
.playlist-modal-theme .modal-dialog .modal-body {    align-items: center;    display: flex;  flex-direction: column;  justify-content: center;}
.playlist-modal-theme .modal-dialog .modal-body .form-control{font-size: 1.5rem; border-top:0; border-right: 0; border-left: 0; 
    border-radius: 0; text-align: center;background: transparent;    margin-top: 25px;    margin-bottom: 25px; box-shadow: none; outline: none;}
.playlist-modal-theme .modal-dialog .modal-body .model-actions{ display: flex; gap: 15px;}
.playlist-modal-theme .modal-dialog .modal-body .model-actions .cancel-create{background-color: var(--bs-gray-300);}

/* Playlist Cards */
.playlist-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.playlist-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Playlist View */
.playlist-view {
    box-shadow: var(--bs-box-shadow);
}

.playlist-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.playlist-header .playlist-cover img{
    width: 130px;
    height: 130px;
    border-radius: 10px;
}

/* Playlist Tracks List */
.playlist-tracks-list {
    display: flex;
    flex-direction: column;
}

.playlist-track-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    transition: all 0.2s ease;
    gap: 0.6rem;
}

.playlist-track-item:hover {
    border-color: var(--bs-border-color-translucent);
    box-shadow: var(--bs-box-shadow);
}

.track-item-content {
    flex: 1;
}

.track-item-content .track-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.track-item-content .track-title a {
    color: var(--bs-body-color);
    text-decoration: none;
    transition: color 0.2s;
}

.track-item-content .track-title a:hover {
    color: var(--bs-primary);
}

.post-type-badge {
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.track-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Drag Handle for Sorting */
.track-drag-handle {
    display: none;
    cursor: grab;
    color: var(--bs-secondary-color);
    font-size: 1.125rem;
    padding: 0.25rem;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.track-drag-handle:hover {
    background: var(--bs-light);
}

.playlist-tracks-list.edit-mode .track-drag-handle {
    display: flex;
    align-items: center;
}

/* Edit Mode Styles */
.playlist-tracks-list.edit-mode {
    border: 2px dashed var(--bs-gray-300);
    padding: 10px;
    border-radius: var(--bs-border-radius);
}

.sortable-ghost {
    opacity: 0.4;
    background: var(--bs-secondary-bg);
}

.sortable-chosen {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}

/* Playlist Overlay Styles */
.playlist-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}

.playlist-overlay-open {
    overflow: hidden;
}

.overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bs-body-bg);
    border-radius: 0;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-lg);
}

.overlay-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 15px 0;
}

.overlay-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--bs-body-color);
}

.close-overlay {
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--bs-secondary-color);
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-overlay:hover {
    background: var(--bs-light);
    color: var(--bs-body-color);
}
button.close-overlay:before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(/wp-content/plugins/playlist-manager/images/back-icon.svg);
}

.overlay-body {
    max-height: calc(80vh - 80px);
    overflow-y: auto;
    padding-bottom: 150px;
}
.btn.create-playlist-btn {
    display: flex;
    align-items: center;
    padding: 0;
    outline: none;
    border: none;
}
i.icon-circle {
    background: var(--bs-white);
    color: var(--bs-gray-100);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Playlist Header Actions */
.playlist-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0rem 0rem;
}

.playlist-controls {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 15px;
        margin-bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
}
.playlist-controls button {
    padding: 4px 15px;
    font-size: 14px;
    background-color: var(--bs-gray-200);
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-bottom: 15px;
    scroll-snap-align: start;
}

.playlist-controls button i:before {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
}

.playlist-controls button i.sort-icon:before {
    background-image: url(/wp-content/plugins/playlist-manager/images/sort-icon.svg);
}
.playlist-controls button i.sort-icon:before {
    background-image: url(/wp-content/plugins/playlist-manager/images/sort-icon.svg);
}
.playlist-controls button i.edit-icon:before {
    background-image: url(/wp-content/plugins/playlist-manager/images/edit-icon.svg);
}
.playlist-controls button i.delete-icon:before {
    background-image: url(/wp-content/plugins/playlist-manager/images/delete-icon.svg);
}
.playlist-controls button.btn-save-order {background-color: var(--bs-success); color: var(--bs-white);}
.playlist-controls button.active {
    background: var(--bs-gray-800);
    color: var(--bs-tertiary-bg);
}
.playlist-controls button.active i.edit-icon:before {background-image: url(/wp-content/plugins/playlist-manager/images/close-icon-dark.svg);width: 10px; height: 10px;}

.playlist-footer-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}


/* Toast Notifications */
#playlist-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 0.75rem 1.25rem;
    border-radius: var(--bs-border-radius);
    z-index: 930001;
    box-shadow: var(--bs-box-shadow);
    font-size: 0.875rem;
}

/* Empty States */
.no-playlists,
.no-tracks {
    text-align: center;
    color: var(--bs-secondary-color);
    font-style: italic;
    padding: 3rem 1.5rem;
}

/* Playist accordion */
.all-playlists-accordion .accordion-item {
    border: none;
    box-shadow: none;
    margin-bottom: 15px;
    border-radius: 6px;
    background: #3d2d73;
}
.all-playlists-accordion .accordion-body {
    background: -webkit-linear-gradient(90deg, #25292f 60%, #394049 100%);
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 0 0 6px 5px;
}

.all-playlists-accordion .accordion-button, .all-playlists-accordion .accordion-button:focus, .all-playlists-accordion .accordion-button:hover {
    /* background: linear-gradient(180deg, #00a9a9 0%, #00a9a98f 100%); */
    background: #323941 !important;
    border-radius: 6px !important;
    min-height: 100px;
    box-shadow: none;
    outline: none;
}
.all-playlists-accordion .accordion-button:not(.collapsed){
    border-radius: 6px 6px 0 !important;
}

.all-playlists-accordion .accordion-button .playlist-title {
    font-size: 22px;
    color: var(--bs-white);
    margin-bottom: 4px;
}
.all-playlists-accordion .accordion-button span{color: var(--bs-white);     font-size: 14px;}

.all-playlists-accordion .gs-card {
    background: none;
    padding-right: 0;
    margin-bottom: 15px;
    gap: 15px;
}
.all-playlists-accordion .gs-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
.all-playlists-accordion .gs-time-wrap {
    display: none;
}
.all-playlists-accordion .list-group-item {
    background: none;
}
.all-playlists-accordion .gs-card .play-btn {
    margin-right: 0;
}
.all-playlists-accordion .accordion-button .playlist-cover img {
    width: 100px;
    border-radius: 5px 0 0 5px;
}
.all-playlists-accordion .accordion-button:not(.collapsed) .playlist-cover img{
    border-radius: 5px 0 0 0;
}

.all-playlists-accordion .accordion-item button.accordion-button {
    padding: 0 15px 0 0;
    box-shadow: none;
}

[data-bs-theme="dark"] .all-playlists-accordion .accordion-button::after {
    content: "";
    background-image: url(/wp-content/plugins/playlist-manager/images/down-arrow-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
}

/* Responsive Design */

@media (min-width: 1200px) {

    .page-title {font-size: 1.8rem;}
   .playlists-grid .playlist-detail {
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
}

   .playlists-grid .playlist-cover{    display: block;}

    .playlists-grid .playlist-cover img {
        width: 100%;
        border-radius: 6px 6px 0 0;
    }
.playlists-grid .playlist-title {
    padding-left: 15px;
    padding-bottom: 10px;
}
.playlists-grid .playlist-meta{
        font-size: 16px;
}
.playlists-grid .playlist-detail .card-title {
    margin-bottom: 2px;
    font-size: 24px;
}
.playlists-grid .playlist-actions {
    position: absolute;
    bottom: 24px;
    right: 5px;
}
.playlist-manager {
   padding-top: 50px;
}
.btn.create-playlist-btn, .btn.create-playlist-btn:hover {
    padding: 15px 20px;
    border: 2px dashed;
    border-radius: 50px;
    background: var(--bs-gray-100);
    font-size: 18px;
}
.btn.create-playlist-btn:hover {background: none;}
.playlists-grid .playlist-actions .btn:hover{background: none;}
.playlist-actions button.delete-playlist {    margin-right: 10px;}
.playlist-modal-theme .modal-dialog{max-width: 100%;}
#rename-playlist-modal .modal-title{    font-size: 1.8rem;}
.playlist-modal-theme .modal-dialog .modal-body .form-control{width: 500px;font-size: 3rem;}
.playlist-overlay .overlay-content {max-width: 100%;padding: 0 20%; width: 100%; max-height: 100vh; height: 100vh;  
        background: linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);
        background: -moz-linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);
        background: -webkit-linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);}
.playlist-overlay .overlay-content  .overlay-body {  padding-bottom: 20px;}
.playlist-view-content {    max-height: calc(100vh - 310px);    overflow: auto;}
.track-actions button.remove-from-playlist {padding-top: 0;}
.playlist-header{gap: 30px;} 

.playlist-header .playlist-cover img {    width: 170px;    height: 170px;}
.playlist-overlay .playlist-details h2 {    font-size: 2rem;}
.playlist-overlay .playlist-stats {    font-size: 1.2rem;}
}


@media (max-width: 1199px) {

    
    .playlist-manager-header {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }
    
    .playlists-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .playlist-track-item {
        flex-direction: row;
        align-items: center;
    }
    
    .track-actions {
        align-self: stretch;
        text-align: right;
    }
    
    .overlay-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        background: #131229;
        background: linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);
        background: -moz-linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);
        background: -webkit-linear-gradient(90deg, #0a0b0c 60%, #6048b1 100%);
    }
    
    .playlist-header-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    
}

/* Button Enhancements */
.playlist-toggle-btn.playlist-style-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none !important;
    border: none !important;
    padding: 8px;
}
.audio-grid .playlist-toggle-btn.playlist-style-button {
    display: none;
}
.audio-grid .gs-card .gs-right{position: initial;}
.audio-grid .gs-card .gs-time-wrap{   
     position: absolute;
    top: 0px;
    right: 0;
    background: #312e3b;
    border-radius: 5px;
    padding: 2px 5px;}

 .audio-grid .gs-card  .gs-time-wrap  .gs-duration {
    font-size: 11px;
    color: var(--bs-gray-700);
    font-weight: 400;
    line-height: 14px;
}
html[data-bs-theme="dark"] .playlist-toggle-btn.playlist-style-button:after {
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/plus-circle-icon.svg); 
}
.playlist-toggle-btn.playlist-style-button:after {
    content: "";
    font-family: 'FontAwesome';
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/plus-circle-icon.svg);
    width: 20px;
    height: 20px;
}
.track-actions button.remove-from-playlist {
    background: no-repeat;
    border: none;
    padding-top: 20px;
}

.track-actions button.remove-from-playlist:before {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/close-icon.svg);
}

.playlist-toggle-btn.playlist-style-icon {
    background: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.25rem;
}

.playlist-toggle-btn.playlist-style-text {
    background: none;
    border: none;
    color: var(--bs-primary);
    text-decoration: underline;
    padding: 0;
}