/* ===================================================== */
/* PLAYER KRISTOUF HOUSE MIX                             */
/* ===================================================== */

.mix-player,
.mix-playlist {
    margin:10px;
}

/* ===================================================== */
/* PLAYER                                                */
/* ===================================================== */

.mix-player {
    padding: 0;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(255,204,0,.15),
            transparent 25%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(200,0,0,.15),
            transparent 35%
        ),
        linear-gradient(
            to left bottom,
            #051937,
            #133961,
            #1c5d8e,
            #1d85bd,
            #12afeb
        );
    box-shadow:0 10px 30px 5px rgba(0,0,0,.5);
    overflow:hidden;
}

.mix-player .player-header {
    display:flex;
    align-items:center;
    gap:0px;
    /*padding:35px;*/
}


/* LOGO */
.mix-player .player-cover {
	position:relative;
	cursor:pointer;
    flex-shrink:0;
	flex:0 0 240px;
}

.mix-player .player-cover img {
	/* taille drapeau */
    width:240px;
    height:240px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
}

/* PLAY */
.mix-player .player-cover::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:140px;
    height:160px;
    transform:translate(-38%,-50%);
    background:white;
    opacity:.55;
    clip-path:polygon(
        0 0,
        100% 50%,
        0 100%
    );
}

/* PAUSE */
.mix-player .player-cover.playing::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:120px;
    height:160px;
    transform:translate(-50%,-50%);
    clip-path:none;     /* important */
    background:
        linear-gradient(
            to right,
            white 0%,
            white 35%,
            transparent 35%,
            transparent 65%,
            white 65%,
            white 100%
        );
    opacity:.55;
}

.player-cover,
.player-cover * {
    /*outline:none !important;*/
    user-select:none;
    /*-webkit-user-select:none;*/
}

/* TURN AROUND */
.player-cover img {

    border-radius:10px;

    transition:
        border-radius .8s ease,
        transform .8s ease;
}
.player-cover.playing img {

    border-radius: 50%;
	transform: scale(.95);
	animation: spin 20s linear infinite;
}
@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/* Titre */
.player-title {
    font-size:16px;
    font-weight:600;
    opacity:.8;
	color:white !important;
    text-align:center;
}

/* toujours visible */
.mix-player {
    position:sticky;
    top:10px;
	margin-bottom:25px;
    z-index:999999;
}

.mix-player .player-audio {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:240px;
    padding:10px;
    box-sizing:border-box;
	position:relative;
}

.mix-player .player-badge {
	margin: 20px;
    display:inline-block;
    background:#1565c0;
    color:#fff;
    padding:7px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
}

/* Morceau courant */
.track-player {
    display:flex;
	color:white;
    flex-direction:column;
    justify-content:flex-end;
    height:105px;
    padding:8px 20px;
    border-radius:20px;
    background:rgba(0,0,0,.15);
}

.track-player-content {
    flex:1;
    min-width:0;
    overflow:hidden;
}

.track-current-title {
    width:100%;
    min-width:0;
    overflow:hidden;
    position:relative;
	text-align:left;
    margin-top:12px;
    margin-bottom:5px;
}

.track-current-title-text {
	font-size:22px;
    font-weight:600; 
	color:white !important;
	max-width:100%;
	position:relative;
	display:inline-block;
    white-space:nowrap;
	cursor:pointer;
	transform:translateX(0);
}


.track-controls {
    display:flex;
    align-items:center;
    gap:15px;
	margin-top:0;
}

/* Barre audio du player du titre en cours */
.track-progress {
    flex:1;
    display:flex;
    align-items:center;
    gap:15px;
}

.track-prev,
.track-next {
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#1565c0;
    color:white;
    cursor:pointer;
    font-size:20px;
    font-weight:700;
    flex-shrink:0;
    box-shadow:0 4px 15px rgba(0,0,0,.25);
    transition:.2s;
}

.track-prev:hover,
.track-next:hover {
    background:#2a82e8;
    transform:scale(1.05);
}

#track-seek {
    flex:1;
}

/* lecture en cours */
.mix-player .player-album {
    display:block;
    width:100%;
    min-width:0;
    color:#d0d0d0;
    font-size:18px;
    font-weight:500;
    margin-bottom:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mix-player .player-date {
    color:#9a9a9a;
    font-size:14px;
}

.mix-player #audio-player {
    width:100%;
	margin-top:auto;
}

.mix-player .player-meta {
    width:100%;
    min-width:0;
    margin-bottom:10px !important;
    overflow:hidden;
}


/* ===================================================== */
/* AUDIO                                                 */
/* ===================================================== */


.mix-audio {
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
    margin:10px;
    border-radius:20px;
    background:
        linear-gradient(
            to left bottom,
            #051937,
            #133961,
            #1c5d8e,
            #1d85bd,
            #12afeb
        );
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

@media (min-width: 1236px) {
	.mix-audio {
		margin-bottom:25px;
	}
}
/* mobile tjs visible */
@media (max-width: 1235px) {
	.mix-audio {
		position:fixed;
		left:10px;
		right:10px;
		bottom:0;
		z-index:9999;
		margin:0;
		border-radius:20px 20px 0 0;
		box-shadow: 0 -5px 20px rgba(0,0,0,.4);
	}
}

.mix-audio button {
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#1565c0;
    color:#fff;
    font-size:18px;
    flex-shrink:0;
}

.mix-audio button:hover {
    background:#1c7ad6;
}

#current-time,
#total-time {
    color:white !important;
    font-weight:bold;
    min-width:60px;
    text-align:center;
}

#seek-bar {
    flex:1;
    cursor:pointer;
}


/* ===================================================== */
/* PLAYLIST                                              */
/* ===================================================== */

.mix-playlist {
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at top left,
            rgba(255,204,0,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(200,0,0,.12),
            transparent 35%
        ),
        linear-gradient(
            to left bottom,
            #051937,
            #133961,
            #1c5d8e,
            #1d85bd,
            #12afeb
        );
    box-shadow:0 10px 30px 5px rgba(0,0,0,.5);
}

.mix-playlist #playlist {
    margin:0;
    padding:0;
    list-style:none;
}

.mix-playlist #playlist li {
    border-bottom:solid 1px rgba(255,255,255,.10);
}

.mix-playlist #playlist li:last-child {
    border-bottom:none;
}

.mix-playlist .track {
    display:flex;
    align-items:center;
    gap:20px;
    padding:14px 20px;
    color:white;
    text-decoration:none;
    transition:.25s;
    overflow:hidden;
    text-align:left;
}

.mix-playlist .track:hover {
    background:rgba(255,255,255,.08);
    color:white;
}

.mix-playlist .track.active {

    background:rgba(255,255,255,.30);

    box-shadow:
        inset 4px 0 0 #ffffff;
}

.mix-playlist .track span {
    width:130px;
    color:#bde4ff;
    font-weight:700;
    flex-shrink:0;
    display:inline-block;
}

.mix-playlist .track-title {
    flex:1;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:left;
    line-height:1.2;
	cursor:pointer;
}


/* MOBILE */
@media (max-width: 1235px) {

    .mix-player .player-meta {
        margin-top:auto;
        margin-bottom:25px !important;
    }

    .mix-player .player-title { font-size:40px; }
    .track-current-title-text { font-size:30px; }	
}