/* ══════════════════════════════════════════════════════
   PLAYER v19 — Sticky Footer
   Fundatie v15.3 + fix-uri v19:
   - Grid 5 coloane fixe, un singur rand
   - Pill user ecosystem NU acopera PLAY (z-index + order)
   - Stats rotatie vizibile pe ambele breakpoints
   - COL4 show/upnext doar desktop
   ══════════════════════════════════════════════════════ */

/* ── Base player wrapper ── */
.r90-player {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--r90-z-player, 9000);
  background: var(--r90-surface-glass, rgba(18,20,30,0.96));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--r90-border-subtle, rgba(255,255,255,0.08));
  font-family: var(--r90-font, system-ui, sans-serif);
  color: var(--r90-text-primary, #f2f3f7);
  /* FIX pill: izoleaza contextul de stacking pentru tot player-ul */
  isolation: isolate;
}

/* ── Grid: 5 coloane, un singur rand ── */
.r90-player__grid {
  display: grid;
  /* mobile: cover | votes | meta(flex) | play */
  grid-template-columns: 52px 44px 1fr 52px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 6px;
  height: var(--r90-player-h-mobile, 64px);
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
  /* FIX gear EQ: overflow visible permite gear-ului sa iasa din celula */
  overflow: visible;
}

/* ── COL 1: Cover + Gear EQ ── */
.r90-player__cover-cell {
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  /* order explicit - niciodata schimbat de pill */
  order: 1;
}
.r90-player__cover-wrap {
  position: relative;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.r90-player__cover {
  position: relative; z-index: 2;
  width: 38px; height: 38px; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,.65);
  transition: box-shadow .3s ease;
}
.r90-player.is-playing .r90-player__cover-wrap {
  box-shadow: 0 0 0 1px rgba(0,255,255,.22), 0 0 16px rgba(0,200,255,.35);
}

/* Gear EQ radial */
.r90-gear-layer {
  position: absolute; inset: -5px;
  border-radius: 50%; pointer-events: none;
  z-index: 1; transform-origin: center;
}
.r90-player.is-playing .r90-gear-layer {
  animation: r90-gear-rotate 90s linear infinite;
}
.r90-gear-bar {
  position: absolute; left: 50%; bottom: 50%;
  width: 2.5px; height: 8px;
  transform-origin: bottom center;
  border-radius: 2px;
  background: hsla(var(--gear-hue,180),100%,var(--gear-light,65%),var(--gear-alpha,.9));
  opacity: .8;
}
@keyframes r90-gear-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .r90-gear-layer { animation: none !important; }
  .r90-gear-bar   { opacity: .35; }
}

/* ── COL 2: Vote buttons ── */
.r90-player__vote-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; order: 2;
}
.r90-player__vote {
  display: flex; align-items: center; gap: 3px;
  background: none; border: none;
  color: var(--r90-text-muted, #9095aa);
  cursor: pointer; padding: 3px 4px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.r90-player__vote svg { width: 15px; height: 15px; flex-shrink: 0; }
.r90-player__vote:hover { color: var(--r90-text-primary, #f2f3f7); }
.r90-player__vote--up.is-voted   { color: #22c55e; }
.r90-player__vote--down.is-voted { color: var(--r90-brand-warm, #f97316); }
.r90-player__vote-count { min-width: 14px; text-align: center; line-height: 1; }

/* ── COL 3: Metadata Zone ── */
.r90-player__meta-cell {
  position: relative; overflow: hidden;
  min-width: 0; order: 3;
  /* FIX CRITIC: anuleaza orice grid-column span din tema parinte */
  grid-column: auto !important;
}

/* Layers: doar is-active e vizibil */
.r90-player__layer {
  display: none;
  animation: r90-layer-in .2s ease forwards;
}
.r90-player__layer.is-active { display: block; }
@keyframes r90-layer-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Artist + Title */
.r90-player__artist {
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--r90-text-primary, #f2f3f7);
}
.r90-player__title {
  font-size: .72rem; line-height: 1.2; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--r90-text-muted, #9095aa);
}

/* Stats rotatie */
.r90-player__stats {
  display: flex; align-items: center; margin-top: 2px; height: 14px;
}
.r90-stat {
  display: none; align-items: center; gap: 3px;
  font-size: .68rem; color: var(--r90-text-hint, #6b7080);
  white-space: nowrap;
}
.r90-stat.is-active { display: flex; }
.r90-stat__icon  { font-size: .72rem; line-height: 1; }
.r90-stat__val   { font-variant-numeric: tabular-nums; font-weight: 500;
                   color: var(--r90-text-muted, #9095aa); }
.r90-stat__lbl   { font-size: .62rem; }

/* Mini cards (mobile layers) */
.r90-player__mini-card {
  display: flex; align-items: center; gap: 8px;
}
.r90-player__mini-cover {
  width: 40px; height: 40px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
}
.r90-player__mini-info { min-width: 0; flex: 1; }
.r90-player__mini-label {
  display: block; font-size: .6rem;
  color: var(--r90-text-hint, #6b7080); line-height: 1.2;
}
.r90-player__mini-name {
  display: block; font-size: .75rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r90-player__mini-sub {
  display: block; font-size: .65rem; line-height: 1.2;
  color: var(--r90-text-muted, #9095aa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* User mini card */
.r90-player__mini-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(99,102,241,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em;
}

/* ── COL 4: Show/UpNext — ASCUNS PE MOBIL ── */
.r90-player__show-cell {
  display: none; /* ascuns mobil, apare la 768px */
  order: 4;
}
.r90-player__panel { display: none; }
.r90-player__panel.is-active {
  display: flex; align-items: center;
}
.r90-player__show-card {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.r90-player__show-cover {
  width: 44px; height: 44px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
}
.r90-player__show-info { min-width: 0; }
.r90-player__show-name {
  display: block; font-size: .75rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r90-player__show-hours {
  display: block; font-size: .62rem;
  color: var(--r90-text-muted, #9095aa);
}
.r90-player__show-info--3row {
  display: flex; flex-direction: column; gap: 0; min-width: 0;
}
.r90-player__upnext-label {
  font-size: .6rem; color: var(--r90-text-hint, #6b7080); display: block;
}
.r90-player__upnext-artist {
  font-size: .72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; display: block;
}
.r90-player__upnext-title {
  font-size: .62rem; color: var(--r90-text-muted, #9095aa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; display: block;
}
/* CTA card */
.r90-player__cta-card {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--r90-text-muted, #9095aa);
  font-size: .72rem; transition: color .15s ease;
}
.r90-player__cta-card:hover { color: var(--r90-brand-accent, #06b6d4); }
.r90-player__cta-icon { font-size: 1.1em; }

/* ── COL 5: Play Button ── */
.r90-player__play-cell {
  display: flex; align-items: center; justify-content: center;
  order: 5;
  /* FIX CRITIC: z-index explicit mai mare decat pill-urile user ecosystem */
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.r90-player__play-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--r90-brand-primary, #6366f1);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
  /* Previne orice element pozitionat absolut sa-l acopere */
  isolation: isolate;
}
.r90-player__play-btn:hover  { background: var(--r90-brand-accent, #06b6d4); }
.r90-player__play-btn:active { transform: scale(.93); }

.r90-player__icon { font-size: 16px; line-height: 1; }
.r90-player__icon--pause { display: none; font-size: 13px; }
.r90-player.is-playing .r90-player__icon--play  { display: none; }
.r90-player.is-playing .r90-player__icon--pause { display: block; }

.r90-player__loader {
  display: none; position: absolute; inset: 0;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff; border-radius: 50%;
  animation: r90-spin .8s linear infinite;
}
.r90-player.is-loading .r90-player__loader { display: block; }
.r90-player.is-loading .r90-player__icon   { visibility: hidden; }
@keyframes r90-spin { to { transform: rotate(360deg); } }

/* ── Ticker ── */
.r90-player__ticker {
  height: var(--r90-ticker-h, 22px);
  background: rgba(0,0,0,.28);
  overflow: hidden;
  display: flex; align-items: center;
}
.r90-player__ticker-track {
  width: 100%; overflow: hidden;
  padding: 0 16px;
}
.r90-player__ticker-text {
  font-size: .68rem; color: var(--r90-text-muted, #9095aa);
  white-space: nowrap;
  animation: r90-scroll 32s linear infinite;
}
@keyframes r90-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .r90-player__ticker-text {
    animation: none; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ════════════════════════════════════════════
   DESKTOP — 768px+
   Adauga COL4 show/upnext, mareste dimensiuni
   ════════════════════════════════════════════ */
@media (min-width: 768px) {
  .r90-player__grid {
    /* cover | votes | meta | show-desktop | play */
    grid-template-columns: 60px 50px 1fr 240px 56px;
    height: var(--r90-player-h, 72px);
    gap: 10px;
    padding: 0 20px;
  }
  .r90-player__cover-wrap { width: 52px; height: 52px; }
  .r90-player__cover { width: 44px; height: 44px; }
  .r90-player__play-btn { width: 50px; height: 50px; }
  .r90-player__play-btn .r90-player__icon { font-size: 18px; }
  .r90-player__show-cell { display: block; } /* apare pe desktop */
  .r90-player__vote svg { width: 17px; height: 17px; }
  .r90-player__artist { font-size: .88rem; }
  .r90-player__title  { font-size: .76rem; }
  .r90-player__upnext-artist,
  .r90-player__upnext-title { max-width: 260px; }
}

@media (min-width: 1024px) {
  .r90-player__grid {
    grid-template-columns: 64px 54px 1fr 280px 60px;
    gap: 14px;
    padding: 0 28px;
  }
}

/* ════════════════════════════════════════════
   FIX: Pill user ecosystem (data-r90-player-*)
   Elementele injected de user ecosystem NU
   trebuie sa depaseasca gridul sau sa acopere PLAY.
   Forteaza orice element pozitionat absolut/fixed
   din interiorul player-ului sa ramana in grid.
   ════════════════════════════════════════════ */
.r90-player__grid > * {
  /* fiecare celula e in fluxul normal al gridului */
  min-width: 0;
}

/* Pill-ul user ecosystem e randat in COL3 (.r90-player__meta-cell)
   pe layer-ul "user". Pe mobil nu trebuie sa overflow spre PLAY.
   Layerul "user" e deja inglobat in meta-cell cu overflow:hidden */
.r90-player__layer[data-r90-layer="user"] {
  overflow: hidden;
}

/* Safety: orice .r90-ue-pill sau similar injectat de ecosistem */
.r90-player [class*="ue-pill"],
.r90-player [class*="user-pill"],
.r90-player [data-r90-ue-pill] {
  position: static !important;
  max-width: 100%;
}

/* ════════════════════════════════════════════
   r90-fab (pill DJ Mike) — mutat sus, langa header
   Nu se suprapune cu hamburgerul (care e stanga)
   Pozitionat dreapta, sub admin bar + header
   ════════════════════════════════════════════ */
#r90-fab, .r90-fab {
  /* Sus dreapta — sub admin bar (46px) + un mic offset */
  top: calc(46px + 8px) !important;
  bottom: auto !important;
  right: 12px !important;
  left: auto !important;
  /* Dimensiuni compacte pe mobil */
  height: 32px !important;
  font-size: .75rem !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  z-index: 9001 !important; /* sub player (9000) dar peste pagina */
}

/* Pe desktop ramane unde era (nu e problema acolo) */
@media (min-width: 768px) {
  #r90-fab, .r90-fab {
    top: auto !important;
    bottom: calc(var(--r90-player-h, 72px) + var(--r90-ticker-h, 22px) + 12px) !important;
    right: 16px !important;
    height: auto !important;
    font-size: inherit !important;
    padding: inherit !important;
    border-radius: inherit !important;
  }
}

/* Text lung in player — trim cu elipsis */
.r90-player__artist,
.r90-player__title,
.r90-player__mini-name,
.r90-player__mini-sub,
.r90-player__show-name,
.r90-player__upnext-artist,
.r90-player__upnext-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}