/* ====== EFMP • Playlist Player (Full CSS) ====== */

/* ====== Base / Vars ====== */
.elementor-widget-efmp_playlist_player .efmp-wrap{
  --efmp-radius:8px;
  --efmp-gap:8px;
  --efmp-row-height:56px;

  --efmp-panel-height:auto; 

  --efmp-cover-lg:160px;
  --efmp-cover-sm:48px;

  --efmp-progress-height:4px;
  --efmp-progress-radius:999px;
  --efmp-progress-minw:180px;

  --efmp-bg:#121212;
  --efmp-surface:#181818;
  --efmp-surface-hover:#282828;
  --efmp-text:#fff;
  --efmp-text-muted:#b3b3b3;
  --efmp-border:#282828;
  --efmp-accent:#1db954;
  --efmp-icon:#fff;
  --efmp-icon-muted:#b3b3b3;

  /* Header buttons (Play / Download) – fully editable */
  --efmp-hbtn-bg:#2a2a2a;
  --efmp-hbtn-bg-hover:#2f2f2f;
  --efmp-hbtn-color:#fff;
  --efmp-hbtn-radius:999px;
  --efmp-hbtn-px:16px;
  --efmp-hbtn-py:10px;
  --efmp-hbtn-font:14px;
  --efmp-hbtn-icon:1.2em;
  --efmp-hbtn-gap:8px;
  --efmp-hbtn-icon-pos:row; /* row | row-reverse */

  /* Mini / Max / Close icons */
  --efmp-minimax-size:36px;
  --efmp-minimax-pad:6px;
  --efmp-minimax-radius:999px;
  --efmp-minimax-color:var(--efmp-icon);
  --efmp-minimax-hover-bg:transparent;
  --efmp-toggle-gap:10px;

  /* Sticky */
  --efmp-sticky-offset:12px;
  --efmp-sticky-z:999;

  /* Mobile now-playing (mini) */
  --efmp-now-mini-size:36px;
  --efmp-now-mini-radius:8px;
  --efmp-now-mini-justify:flex-start;

  color:var(--efmp-text);
  background:var(--efmp-bg);
  border-radius:var(--efmp-radius);
  overflow:hidden;
  font:inherit;
  box-sizing:border-box;
}

/* Ensure all inner boxes respect container width */
.elementor-widget-efmp_playlist_player *,
.elementor-widget-efmp_playlist_player *::before,
.elementor-widget-efmp_playlist_player *::after{ box-sizing:inherit }

/* Wrapper padding */
.elementor-widget-efmp_playlist_player .efmp-main{padding:16px}

/* ===== Cards ===== */
.elementor-widget-efmp_playlist_player .efmp-panel,
.elementor-widget-efmp_playlist_player .efmp-player{
  background:var(--efmp-surface);
  border-radius:var(--efmp-radius);
}

/* ===== Header ===== */
.elementor-widget-efmp_playlist_player .efmp-current{
  position:relative;
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--efmp-surface);
  border-radius:var(--efmp-radius);
  padding:16px;
  margin-bottom:16px;
}
.elementor-widget-efmp_playlist_player .efmp-current-cover{
  width:var(--efmp-cover-lg);
  height:var(--efmp-cover-lg);
  background:#222;
  border-radius:8px;
  overflow:hidden;
  flex:0 0 auto;
}
.elementor-widget-efmp_playlist_player .efmp-current-cover .efmp-img{
  width:100%;height:100%;object-fit:cover;object-position:center
}
.elementor-widget-efmp_playlist_player .efmp-current-meta{flex:1 1 auto;min-width:0}
.elementor-widget-efmp_playlist_player .efmp-title{font-weight:700;font-size:20px;margin:0 0 6px}
.elementor-widget-efmp_playlist_player .efmp-meta{color:var(--efmp-text-muted);font-size:13px}

/* header stats */
.elementor-widget-efmp_playlist_player .efmp-stats,
.elementor-widget-efmp_playlist_player .efmp-meta--split{
  display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap
}
.elementor-widget-efmp_playlist_player .efmp-stat{display:flex;gap:6px;align-items:center}

/* ===== Header actions ===== */
.elementor-widget-efmp_playlist_player .efmp-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.elementor-widget-efmp_playlist_player .efmp-btn{
  background:var(--efmp-hbtn-bg);
  color:var(--efmp-hbtn-color);
  border:0;border-radius:var(--efmp-hbtn-radius);
  padding:var(--efmp-hbtn-py) var(--efmp-hbtn-px);
  cursor:pointer;display:inline-flex;gap:var(--efmp-hbtn-gap);
  align-items:center;transition:background .2s ease;
  font-size:var(--efmp-hbtn-font); line-height:1.2;
  flex-direction:var(--efmp-hbtn-icon-pos);
}
.elementor-widget-efmp_playlist_player .efmp-btn:hover{background:var(--efmp-hbtn-bg-hover)}
.elementor-widget-efmp_playlist_player .efmp-actions .efmp-btn svg{
  display:inline-block;width:var(--efmp-hbtn-icon);height:var(--efmp-hbtn-icon);flex:0 0 auto
}
.elementor-widget-efmp_playlist_player .efmp-btn svg path[stroke]{stroke:currentColor}
.elementor-widget-efmp_playlist_player .efmp-btn svg path[fill]{fill:currentColor}

.elementor-widget-efmp_playlist_player a.efmp-download-main,
.elementor-widget-efmp_playlist_player a.efmp-row-download{
  color:var(--efmp-icon);text-decoration:none;display:inline-flex;align-items:center
}

/* ===== Queue / Panel height ===== */
.elementor-widget-efmp_playlist_player .efmp-panel{
  max-height:var(--efmp-panel-height);
  display:flex;flex-direction:column;
}
.elementor-widget-efmp_playlist_player .efmp-queue{
  background:var(--efmp-surface);
  border-radius:var(--efmp-radius);
  padding:8px;display:flex;flex-direction:column;
  gap:var(--efmp-gap);
  overflow:auto;
}
.elementor-widget-efmp_playlist_player .efmp-row{
  display:grid;grid-template-columns:var(--efmp-cover-sm) 1fr auto auto auto;
  align-items:center;gap:12px;height:var(--efmp-row-height);
  border-radius:6px;padding:6px 8px;cursor:pointer;
  transition:background .2s ease
}
.elementor-widget-efmp_playlist_player .efmp-row:hover{background:var(--efmp-surface-hover)}
.elementor-widget-efmp_playlist_player .efmp-row.is-current .efmp-row-title{color:var(--efmp-accent)}
.elementor-widget-efmp_playlist_player .efmp-row-cover{
  width:var(--efmp-cover-sm);height:var(--efmp-cover-sm);
  background:#222;border-radius:6px;overflow:hidden
}
.elementor-widget-efmp_playlist_player .efmp-row-cover .efmp-img{
  width:100%;height:100%;object-fit:cover;object-position:center
}
.elementor-widget-efmp_playlist_player .efmp-row-info{min-width:0}
.elementor-widget-efmp_playlist_player .efmp-row-title{
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.elementor-widget-efmp_playlist_player .efmp-row-artist{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--efmp-text-muted);font-size:13px
}
.elementor-widget-efmp_playlist_player .efmp-row-date,
.elementor-widget-efmp_playlist_player .efmp-row-time{padding:0 8px;color:var(--efmp-text-muted)}

/* Inline play/download */
.elementor-widget-efmp_playlist_player .efmp-row-play{
  display:flex;align-items:center;gap:10px;
  color:var(--efmp-icon);opacity:.8;justify-content:center
}
.elementor-widget-efmp_playlist_player .efmp-row:hover .efmp-row-play{opacity:1}
.elementor-widget-efmp_playlist_player .efmp-row-play a{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.elementor-widget-efmp_playlist_player .efmp-row-play svg path[stroke]{stroke:currentColor}
.elementor-widget-efmp_playlist_player .efmp-row-play svg path[fill]{fill:currentColor}

/* ===== Controls ===== */
.elementor-widget-efmp_playlist_player .efmp-controls{
  display:flex;flex-direction:column;gap:12px;
  background:var(--efmp-surface);
  border-radius:var(--efmp-radius);
  padding:12px;margin-top:16px
}
.elementor-widget-efmp_playlist_player .efmp-controls-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.elementor-widget-efmp_playlist_player .efmp-main-controls{
  display:flex;align-items:center;gap:18px;justify-content:center
}
.elementor-widget-efmp_playlist_player .efmp-aux-controls{
  display:flex;align-items:center;gap:14px
}
.elementor-widget-efmp_playlist_player .efmp-ctrl{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--efmp-icon);
  cursor:pointer;transition:color .2s ease,transform .15s ease;border:0
}
.elementor-widget-efmp_playlist_player .efmp-ctrl:hover{color:#fff;transform:scale(1.075)}
.elementor-widget-efmp_playlist_player .efmp-ctrl.is-active{color:var(--efmp-accent)}
.elementor-widget-efmp_playlist_player .efmp-ctrl svg path[stroke]{stroke:currentColor}
.elementor-widget-efmp_playlist_player .efmp-ctrl svg path[fill]{fill:currentColor}

/* Volume */
.elementor-widget-efmp_playlist_player .efmp-volume{
  display:flex;align-items:center;gap:10px;min-width:140px
}
.elementor-widget-efmp_playlist_player .efmp-volume-track{
  width:140px;height:6px;background:#2b2b2b;
  border-radius:999px;cursor:pointer;overflow:hidden;flex:0 0 auto
}
.elementor-widget-efmp_playlist_player .efmp-volume-fill{
  height:100%;width:60%;background:var(--efmp-accent)
}

/* Progress */
.elementor-widget-efmp_playlist_player .efmp-progress{
  display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:var(--efmp-progress-minw)
}
.elementor-widget-efmp_playlist_player .efmp-progress-track{
  flex:1 1 auto;height:var(--efmp-progress-height);
  background:#2b2b2b;border-radius:var(--efmp-progress-radius);
  overflow:hidden;cursor:pointer
}
.elementor-widget-efmp_playlist_player .efmp-progress-fill{height:100%;width:0;background:var(--efmp-accent)}
.elementor-widget-efmp_playlist_player .efmp-time{min-width:110px;text-align:center;color:var(--efmp-text-muted)}

/* Disabled controls */
.elementor-widget-efmp_playlist_player .efmp-ctrl.is-disabled{
  opacity:.4;pointer-events:none;transform:none!important
}

/* Helpers */
.elementor-widget-efmp_playlist_player .efmp-current .efmp-stats:empty{display:none}
.elementor-widget-efmp_playlist_player .efmp-row-date:empty,
.elementor-widget-efmp_playlist_player .efmp-row-time:empty{display:none}

/* ===== Minimize / Maximize / Close ===== */
.elementor-widget-efmp_playlist_player .efmp-actions #minimizeplayer,
.elementor-widget-efmp_playlist_player .efmp-actions #maximizeplayer{display:none!important}

.elementor-widget-efmp_playlist_player .efmp-min-toggle,
.elementor-widget-efmp_playlist_player .efmp-close-toggle{
  position:absolute;top:8px;inset-inline-end:8px;
  width:var(--efmp-minimax-size); height:var(--efmp-minimax-size);
  padding:var(--efmp-minimax-pad);
  border-radius:var(--efmp-minimax-radius);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--efmp-minimax-color);
  background:transparent;border:0;cursor:pointer;opacity:.9;
  transition:opacity .2s ease, background .2s ease, transform .15s ease;
}
.elementor-widget-efmp_playlist_player .efmp-close-toggle{
  inset-inline-end:calc(8px + var(--efmp-minimax-size) + var(--efmp-toggle-gap));
}
.elementor-widget-efmp_playlist_player .efmp-min-toggle:hover,
.elementor-widget-efmp_playlist_player .efmp-close-toggle:hover{
  opacity:1;background:var(--efmp-minimax-hover-bg);transform:scale(1.05)
}
.elementor-widget-efmp_playlist_player .efmp-min-toggle svg,
.elementor-widget-efmp_playlist_player .efmp-close-toggle svg{width:100%;height:100%}
.elementor-widget-efmp_playlist_player .efmp-min-toggle svg [stroke],
.elementor-widget-efmp_playlist_player .efmp-close-toggle svg [stroke]{stroke:currentColor}

.elementor-widget-efmp_playlist_player .efmp-aux-controls .efmp-max-toggle{
  display:none; 
  width:38px; height:38px; border-radius:50%;
  background:transparent; color:var(--efmp-icon);
  border:0; cursor:pointer; align-items:center; justify-content:center;
  transition:color .2s ease, transform .15s ease;
}
.elementor-widget-efmp_playlist_player .efmp-aux-controls .efmp-max-toggle:hover{color:#fff; transform:scale(1.075)}
.elementor-widget-efmp_playlist_player .efmp-aux-controls .efmp-max-toggle svg{width:22px;height:22px}
.elementor-widget-efmp_playlist_player .efmp-aux-controls .efmp-max-toggle svg [stroke]{stroke:currentColor}

.elementor-widget-efmp_playlist_player .efmp-panel.is-collapsed{display:none}
.elementor-widget-efmp_playlist_player .efmp-panel.is-collapsed ~ .efmp-player .efmp-aux-controls .efmp-max-toggle{display:inline-flex}

/* ===== Sticky when minimized ===== */
.elementor-widget-efmp_playlist_player .efmp-wrap.is-sticky-bottom{
  position:fixed;left:var(--efmp-sticky-offset);right:var(--efmp-sticky-offset);
  bottom:var(--efmp-sticky-offset);z-index:var(--efmp-sticky-z);
}
.elementor-widget-efmp_playlist_player .efmp-wrap.is-sticky-top{
  position:fixed;left:var(--efmp-sticky-offset);right:var(--efmp-sticky-offset);
  top:var(--efmp-sticky-offset);z-index:var(--efmp-sticky-z);
}

.elementor-widget-efmp_playlist_player img{max-width:100%;height:auto;display:block}

/* === EFMP • default icon bump (slightly larger) === */
.elementor-widget-efmp_playlist_player .efmp-ctrl{ width:44px; height:44px }
.elementor-widget-efmp_playlist_player .efmp-ctrl svg{ width:22px; height:22px }

.elementor-widget-efmp_playlist_player .efmp-wrap{
  --efmp-minimax-size:42px;
  --efmp-minimax-pad:8px;
  --efmp-toggle-gap:12px;
  --efmp-hbtn-icon:1.35em;
  --efmp-hbtn-font:15px;
  --efmp-hbtn-py:12px;
  --efmp-hbtn-px:18px;
}

.elementor-widget-efmp_playlist_player .efmp-row-play svg{ width:22px; height:22px }

.elementor-widget-efmp_playlist_player .efmp-main-controls{ gap:22px }
.elementor-widget-efmp_playlist_player .efmp-aux-controls{  gap:16px }

/* ====== Mobile (≤767px) – Overflow Safe ====== */
@media (max-width:767px){

  .elementor-widget-efmp_playlist_player .efmp-wrap,
  .elementor-widget-efmp_playlist_player .efmp-main,
  .elementor-widget-efmp_playlist_player .efmp-panel,
  .elementor-widget-efmp_playlist_player .efmp-player{
    max-width:100% !important;
    width:100% !important;
    overflow-x:hidden !important;
  }

  .efmp-now-head{display:none!important;}

  .elementor-widget-efmp_playlist_player .efmp-current{flex-direction:row;gap:12px}
  .elementor-widget-efmp_playlist_player .efmp-current-cover{
    width:var(--efmp-cover-sm);height:var(--efmp-cover-sm)
  }
  .elementor-widget-efmp_playlist_player .efmp-title{
    font-size:16px; overflow-wrap:anywhere
  }

  .elementor-widget-efmp_playlist_player .efmp-controls{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-controls-top,
  .elementor-widget-efmp_playlist_player .efmp-controls-bottom{
    display:block !important;
    width:100% !important;
  }

  .elementor-widget-efmp_playlist_player .efmp-main-controls{
    justify-content:flex-start !important; margin:0 !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-aux-controls{
    margin-inline-start:auto !important; justify-content:flex-end !important;
  }

  .elementor-widget-efmp_playlist_player .efmp-bottom-row{
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; gap:10px !important; width:100% !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-now-mini{
    display:flex !important; align-items:center !important; gap:10px !important;
    min-width:0 !important; flex:1 1 auto !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-now-mini .efmp-now-title,
  .elementor-widget-efmp_playlist_player .efmp-now-mini .efmp-now-artist{
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }

  .elementor-widget-efmp_playlist_player .efmp-progress{
    min-width:0 !important; width:100% !important; flex:1 1 100% !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-time{
    min-width:auto !important; font-size:12px !important; text-align:center
  }

  .elementor-widget-efmp_playlist_player .efmp-volume{
    flex:0 0 auto !important; margin-inline-start:auto !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-volume-track{
    display:block !important;
    width:clamp(96px, 32vw, 140px) !important;
    height:8px !important; margin:0 !important;
  }

  .elementor-widget-efmp_playlist_player .efmp-row{
    grid-template-columns: var(--efmp-cover-sm) 1fr auto !important;
    gap:10px !important; padding-inline:8px !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-row-date,
  .elementor-widget-efmp_playlist_player .efmp-row-time{display:none !important}

  .elementor-widget-efmp_playlist_player .efmp-ctrl{ width:40px !important; height:40px !important }
  .elementor-widget-efmp_playlist_player .efmp-ctrl svg{ width:20px !important; height:20px !important }

  .efmp-now-title{max-width:80%}
}
@media (max-width:767px){
  .elementor-widget-efmp_playlist_player .efmp-controls-top{
    display:flex !important;
    flex-wrap:nowrap !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-main-controls{
    justify-content:flex-start !important;
  }
  .elementor-widget-efmp_playlist_player .efmp-aux-controls{
    margin-inline-start:auto !important;
    justify-content:flex-end !important;
  }
  .efmp-panel-toggles {
    position: absolute;
    top: -20px!important;
    right: 0px!important;
}
}
/* ===== End of EFMP CSS ===== */