/* Cristi Audio Player */
.cap-empty{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(20,30,80,.2);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}

/* Base */
.cap-player{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  color:#e9ecff;
  
  padding: 22px 22px 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cap-player *{ box-sizing:border-box; }

/* Buttons */
.cap-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 0px;
    background-image: url(img/BKG_player_desktop_home.svg);
    background-repeat: no-repeat;
    width: 372px;
    background-position: center;
    max-width: 100%;
    text-align: center;    margin: 0 auto; 
}

.cap-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:#cfd6ff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:10px 12px;
  border-radius:14px;
  transition: transform .08s ease, background .12s ease, color .12s ease;
}
.cap-btn:hover{ background: rgba(255,255,255,.06); }
.cap-btn:active{ transform: translateY(1px) scale(.98); }

.cap-play{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: rgba(70, 120, 255, .22);
  border:1px solid rgba(140,160,255,.25);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.cap-play .cap-pause-icon{ display:none; }
.cap-player.is-playing .cap-play .cap-play-icon{ display:none; }
.cap-player.is-playing .cap-play .cap-pause-icon{ display:inline; }

/* View 1 */
.cap-view-1 .cap-hero{
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0 18px;
  text-align:center;
}
.cap-headlines .cap-h1,
.cap-headlines .cap-h2,
.cap-headlines .cap-h3{
  font-size:16px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.35;
  margin:6px 0;
  background-color: transparent;
    color: #fff;
    border: 0px;    
	width: 100%;

}

button.cap-h1.cap-headline-trigger:hover,
button.cap-h2.cap-headline-trigger:hover,
button.cap-h3.cap-current-title.cap-headline-trigger:hover,
button.cap-h1.cap-headline-trigger:focus,
button.cap-h2.cap-headline-trigger:focus,
button.cap-h3.cap-current-title.cap-headline-trigger:focus {
    background-color: transparent;
}
.cap-headlines .cap-h1
{
	font-size:12px;
}
.cap-headlines .cap-h3{
  font-size:18px;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:14px;

  opacity:.9;
  background-color: transparent !important;
    color: #fff;
    border: 0px;
}
.cap-view-1 .cap-bar{ margin-top:6px; }

/* View 2 layout */
.cap-view-2{ padding: 26px 26px 18px; }
.cap-panel{
  margin-bottom: 38px;
  background-image: url(img/player_2_bg_playlist.png);
  background-repeat: no-repeat;
  width: 800px;
  min-height: 965px;
  background-position: bottom center;
  padding-left: 50px;
  padding-right: 50px;padding-top: 30px;
}
@media (max-width: 880px){
  .cap-panel{ grid-template-columns: 1fr; }
}

.cap-cover-wrap{ width: 220px; max-width:100%; float: left; }
.cap-cover{
  width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.cap-cover--placeholder{
  background: rgba(255,255,255,.06);
}

.cap-about{ margin-top:16px; float: right; width:450px; }
.cap-about-title{ font-weight:700; font-size:18px; margin:0 0 6px; }
.cap-about-sub{ font-style:italic; opacity:.85; margin-bottom:10px; }
.cap-about-text{ opacity:.7; line-height:1.5; font-size:13px; }
.cap-right {
    clear: both;
}
/* Track list */
.cap-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cap-track{
  width:100%;
  display:grid;
  grid-template-columns: 34px 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#e9ecff;
  cursor:pointer;
  text-align:left;
  transition: background .12s ease, transform .08s ease, border-color .12s ease;
}
.cap-track:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.cap-track:active{ transform: translateY(1px); }
.cap-track.is-active{
  background: rgba(80,120,255,.12);
  border-color: rgba(130,160,255,.22);
}
.cap-track-play{
  opacity:.85;
  font-size:16px;
}
.cap-track-title{
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:700;
  font-size:28px;
  opacity:.92;
}
.cap-track-preview{
  opacity:.55;
  font-size:30px;
  letter-spacing:2px;
}

/* Footer */
.cap-footer {
   
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center; /* centreaza continutul in fiecare coloana */
    gap: 14px;
    padding-top: 8px;
}

.cap-count{
  font-weight:800;
  font-size:28px;
  color:#ffcc33;
}
.cap-count small{
  font-size:12px;
  letter-spacing:2px;
  color:#cfd6ff;
  opacity:.7;
  margin-left:6px;
}
.cap-footer-right{ display:flex; justify-content:flex-end; }


button.cap-btn.cap-fav {
    background-color: transparent;
    border: 0px;
 
}

button.cap-btn.cap-prev { background-color: transparent;
    border: 0px;}

button.cap-btn.cap-play { background-color: transparent;
    border: 0px; background-image: url(img/bg_buton.png);
    background-repeat: no-repeat;}

button.cap-btn.cap-next { background-color: transparent;
    border: 0px;}

button.cap-btn.cap-loop { background-color: transparent;
    border: 0px;}

button.cap-btn.cap-share { background-color: transparent;
    border: 0px;}
	
	
.cap-player.cap-view-2 {
    width: 800px;
    margin: 0 auto;
}
/*.cap-player.cap-view-2 .cap-bar{
	background-image: url(img/player_2_bgplayer.png);
    background-repeat: no-repeat;
    width: 775px;
    height: 143px;justify-content: space-between; background-size: contain;

}
.cap-player.cap-view-2 button.cap-btn.cap-play
{
    background-image: url(img/player_2_playbg.png);
	width: 80px;
    height: 80px;
    text-align: center;
    background-size: contain;
}*/
.cap-footer-left {
    margin-right: auto;    padding-left: 25px;
}

.cap-footer-right {
    margin-left: auto;    padding-right: 25px;
}
.cap-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.cap-count {
    font-size: 40px;       /* pentru cifra */
    font-weight: bold;
}

.cap-count small {
    font-size: 11px;       /* pentru SONGS */
    opacity: 0.7;
    margin-top: 2px;
}

button.cap-track.is-active {
    background-color: transparent;
    border: 0px;
	color:#bbbbd4;
	font-weight:bold;
}

button.cap-track, button.cap-track:hover, button.cap-track:active {
    background-color: transparent;
    border: 0px;
	font-size:36px;
	color:#bbbbd4;
	 font-family: 'Bison';    line-height: 40px;
}
button.cap-track.is-active .cap-track-play {
    background-image: url(img/player_2_play.png);
    width: 40px;
    height: 42px;
	    display: inline-block;
}
.cap-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;      /* aliniere verticala perfecta */
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
}

.cap-track-play,
.cap-track-title,
.cap-track-right {
    display: flex !important;
    align-items: center !important;      /* centreaza vertical fiecare */
    flex-direction: row !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.cap-track-title {
    flex: 1 1 auto;                      /* ocupa spatiul din mijloc */
    min-width: 0;
}

.cap-track-right {
    margin-left: auto !important;        /* PREVIEW in dreapta */
    white-space: nowrap;
}

.cap-track-preview {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
@media (max-width: 768px) {
	.cap-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		   padding: 12px 0px;
		background-image: url(img/BKG_player_mobil_home.svg);
		background-repeat: no-repeat;
		width: 100%;
		background-position: center;
		max-width: 100%;
		text-align: center;    
		margin: 0 auto; 
		background-size: contain;
	}
	button.cap-btn.cap-play {
		background-size: contain;
		background-position: center;
	}
	.cap-player.cap-view-2 {
		max-width: 100%;
		        padding-left: 10px;
        padding-right: 10px;
    
	}
	.cap-panel {
		max-width: 100%;
	}
	.cap-about {
		max-width: 100%;
	}
	.cap-track-title {
		font-size: 16px;
	}
	button.cap-track.is-active .cap-track-play {
		width: 16px;
		height: 16px;
		background-size: cover;
		background-repeat: no-repeat;
	}
	span.cap-track-right {
		display: none;
	}
	/*.cap-player.cap-view-2 .cap-bar {
		background-image: url(img/BKG_player_mobil_home.svg);
		background-repeat: no-repeat;
		width: 100%;
		height: 57px;
		justify-content: space-between;
		background-size: contain;
	}
	.cap-player.cap-view-2 button.cap-btn.cap-play {
		width: 80px;
		height: 80px;
		text-align: center;
	}*/
	.cap-footer-left {
		margin-right: 50px;
		padding-left: 0px;
	}
	.cap-count {
		font-size: 26px;
		font-weight: bold;
	}
}