/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
*/

/* Tes styles éventuels au-dessus... */

/* === Sticky player container === */
#mb-sticky-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 10px 16px;
  box-sizing: border-box;
  pointer-events: none; /* pour que seul l'intérieur soit cliquable */
}

#mb-sticky-player .mb-player-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: #131313;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  padding: 10px 16px;
  box-sizing: border-box;
  color: #fdf3e6;
  pointer-events: auto;
}

/* === Layout left/center/right === */
.mb-player-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.mb-cover {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #222;
}

/* placeholder de base, tu le changeras en JS */
.mb-cover {
  background-image: url('https://via.placeholder.com/80x80/222222/ffffff?text=Beat');
}

.mb-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Boutons === */
.mb-btn {
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 10px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.mb-btn-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2a201c;
  color: #fdf3e6;
}

.mb-btn-main {
  background: #f2c09f;
  color: #201814;
  font-size: 16px;
}

.mb-btn-icon:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* === Centre (titre + barre) === */
.mb-player-center {
  flex: 1 1 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-track-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mb-progress-row input[type="range"] {
  flex: 1 1 auto;
}

.mb-time {
  display: flex;
  gap: 4px;
  font-size: 12px;
  color: #d4b19c;
}

/* === Droite (prix / mute / close) === */
.mb-player-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mb-price-box {
  background: #f2c09f;
  color: #201814;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mb-price-label {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.8;
}

.mb-price-value {
  font-size: 14px;
  font-weight: 600;
}

/* === Slider de progression === */
#mb-seek-bar {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #2a201c;
  cursor: pointer;
}

#mb-seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f2c09f;
}

#mb-seek-bar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f2c09f;
  border: none;
}

/* === Mobile tweaks === */
@media (max-width: 640px) {
  #mb-sticky-player .mb-player-inner {
    padding: 8px 10px;
  }

  .mb-price-label {
    display: none;
  }

  .mb-track-title {
    font-size: 13px;
  }
}