/* RESTAURACION 87.9 FM - v2.0.1 (Spotify-ish layout, Elementor-proof) */
.r879fm{
  --r-bg: rgba(12,12,12,.86);
  --r-text: #ffffff;
  --r-muted: rgba(255,255,255,.72);
  --r-accent: #ff0000;
  --r-accentSoft: rgba(255,0,0,.18);
  --r-radius: 22px;

  max-width: 460px;
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, "Poppins", "Segoe UI", Arial, sans-serif;
}

.r879fm, .r879fm *{ box-sizing:border-box; }

.r879fm-card{
  position: relative;
  overflow:hidden;
  border-radius: var(--r-radius);
  padding: 18px 18px 16px;

  background: var(--r-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 48px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 26px var(--r-accentSoft);

  color: var(--r-text);
  text-align:left;
}

.r879fm-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(700px 220px at 82% 0%, rgba(255,0,0,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.r879fm-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 50% 120%, rgba(0,0,0,.65), transparent 58%);
  pointer-events:none;
  z-index:0;
}
.r879fm-card > *{ position:relative; z-index:1; }

/* Top header */
.r879fm-top{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom: 12px;
}

.r879fm-art{
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  background: rgba(255,255,255,.04);
}
.r879fm-art-empty{ display:block; }
.r879fm-logo{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.r879fm-meta{ flex:1 1 auto; min-width: 0; }

.r879fm-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:.78rem;
  letter-spacing:.7px;
  text-transform:uppercase;
  user-select:none;
  animation:r879fmLivePulse 1.25s ease-in-out infinite;
}
.r879fm-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--r-accent);
  box-shadow:0 0 0 rgba(255,0,0,0);
  animation:r879fmDotPulse 1.25s ease-in-out infinite;
}
@keyframes r879fmLivePulse{0%,100%{opacity:.60}50%{opacity:1}}
@keyframes r879fmDotPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,0,0,0)}
  50%{transform:scale(1.35);box-shadow:0 0 14px rgba(255,0,0,.75)}
}

/* Now Playing + marquee */
.r879fm-now{
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--r-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
}
.r879fm-now.r879fm-marquee{
  overflow:hidden;
  text-overflow: unset;
}
.r879fm-now.r879fm-marquee .r879fm-marquee-track{
  display:inline-flex;
  gap:42px;
  white-space:nowrap;
  will-change: transform;
  animation: r879fmMarquee 12s linear infinite;
}
.r879fm-now .r879fm-marquee-track span{ display:inline-block; }
@keyframes r879fmMarquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.r879fm-title{
  margin-top: 2px;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r879fm-eq{
  position:relative;
  width:100%;
  height:88px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
  margin:0 0 14px;
}
.r879fm-eq::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 160px at 50% 110%, rgba(255,0,0,.16), transparent 55%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.r879fm-bars{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3px;
  padding:14px 12px;
  z-index:1;
  pointer-events:none;
}
.r879fm-bars span{
  flex:1 1 auto;
  max-width:6px;
  min-width:2px;
  height:10px;
  border-radius:999px;
  background:rgba(255,0,0,.88);
  box-shadow:0 0 14px rgba(255,0,0,.18);
  transform-origin:bottom;
  transform:scaleY(var(--s,.22));
  opacity:.92;
  transition:transform 80ms linear;
}

.r879fm-bars .r879fm-desktop{ display:none; }
.r879fm-bars .r879fm-mobile{ display:block; }

.r879fm-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin: 8px 0 8px;
  text-align:center;
}

/* Elementor / theme-proof buttons */
.r879fm .r879fm-btn,
.r879fm .r879fm-btn:visited,
.r879fm .r879fm-btn:hover,
.r879fm .r879fm-btn:active,
.r879fm .r879fm-btn:focus{
  all: unset;
  box-sizing: border-box;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  user-select:none;
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
}
.r879fm .r879fm-btn:hover{ transform:translateY(-1px); }
.r879fm .r879fm-btn:active{ transform:translateY(0) scale(.98); filter:brightness(.96); }
.r879fm .r879fm-btn:focus{ outline: none; }
.r879fm .r879fm-btn svg{ display:block; line-height:0; }

/* Normal mode (NOT floating): side buttons white, red icon */
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-side{
  width:60px;
  height:64px;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 24px rgba(255,0,0,.18);
}
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-side:hover{
  box-shadow:
    0 18px 34px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 34px rgba(255,0,0,.28);
}
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-side svg{
  width:24px;
  height:24px;
  fill: var(--r-accent) !important;
}

/* Normal mode play: bigger, red, more padding space */
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-play{
  width:92px;
  height:96px;
  background: var(--r-accent) !important;
  border: none !important;
  box-shadow:
    0 0 28px rgba(255,0,0,.48),
    0 18px 34px rgba(0,0,0,.30);
}
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-play:hover{
  box-shadow:
    0 0 40px rgba(255,0,0,.68),
    0 22px 40px rgba(0,0,0,.34);
}
.r879fm:not(.r879fm-mini-mode) .r879fm-btn-play svg{
  width:36px;
  height:36px;
  fill:#fff !important;
}

/* Status */
.r879fm-status{
  margin-top: 4px;
  font-size:.9rem;
  color:#fff;
  min-height:22px;
  text-align:center;
}

/* Desktop */
@media (min-width: 992px){
  .r879fm-now{ font-size: 1.08rem; }
  .r879fm-title{ font-size: 1.28rem; }
  .r879fm-eq{ height:98px; }
  .r879fm-bars{ padding:16px 14px; }
  .r879fm-bars span{ max-width:5px; }
  .r879fm-bars .r879fm-desktop{ display:block; }
  .r879fm-bars .r879fm-mobile{ display:none; }
}

/* Floating mode (buttons already perfect; keep sizes) */
.r879fm.r879fm-mini-mode{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:999999;
  max-width:360px;
  width:calc(100vw - 28px);
  margin:0;
}
.r879fm.r879fm-mini-mode .r879fm-card{
  padding:14px;
  border-radius:18px;
}
.r879fm.r879fm-mini-mode .r879fm-top{ gap:10px; margin-bottom:10px; }
.r879fm.r879fm-mini-mode .r879fm-art{ width:56px;height:56px;flex:0 0 56px;border-radius:14px; }
.r879fm.r879fm-mini-mode .r879fm-now{ font-size:.92rem; margin-top:6px; }
.r879fm.r879fm-mini-mode .r879fm-title{ font-size: .98rem; }
.r879fm.r879fm-mini-mode .r879fm-eq{ height:58px; margin-bottom:10px; }
.r879fm.r879fm-mini-mode .r879fm-controls{ justify-content:space-between; gap:10px; }
.r879fm.r879fm-mini-mode .r879fm-btn-play{ width:66px;height:66px; background: var(--r-accent) !important; box-shadow:0 0 22px rgba(255,0,0,.38); }
.r879fm.r879fm-mini-mode .r879fm-btn-side{ width:48px;height:48px; background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important; }
.r879fm.r879fm-mini-mode .r879fm-btn-side svg{ width:22px;height:22px; fill:#fff !important; }
.r879fm.r879fm-mini-mode .r879fm-status{ font-size:.82rem; }

@media (max-width: 480px){
  .r879fm-card{ padding:16px; }
  .r879fm-top{ gap:12px; }
  .r879fm-art{ width:64px;height:64px;flex:0 0 64px;border-radius:16px; }
  .r879fm-eq{ height:80px; }
  .r879fm-title{ font-size: .98rem; white-space: normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}


/* v2.0.2: Force play/pause icons white in floating mode */
.r879fm.r879fm-mini-mode .r879fm-btn-play svg{ fill:#fff !important; }
.r879fm.r879fm-mini-mode .r879fm-btn-play svg *{ fill:#fff !important; }

/* v2.0.4: hard-force mini play icons white (some themes override SVG fills) */
.r879fm.r879fm-mini-mode .r879fm-btn-play .r879fm-play-icon,
.r879fm.r879fm-mini-mode .r879fm-btn-play .r879fm-pause-icon{ fill:#fff !important; }
.r879fm.r879fm-mini-mode .r879fm-btn-play .r879fm-play-icon polygon,
.r879fm.r879fm-mini-mode .r879fm-btn-play .r879fm-pause-icon rect{ fill:#fff !important; }

/* v2.0.5: mini play icon ALWAYS white (hard override) */
.r879fm.r879fm-mini-mode .r879fm-btn-play{ color:#fff !important; }
.r879fm.r879fm-mini-mode .r879fm-btn-play svg{ fill: currentColor !important; }
.r879fm.r879fm-mini-mode .r879fm-btn-play svg polygon,
.r879fm.r879fm-mini-mode .r879fm-btn-play svg rect{ fill: currentColor !important; }