:root{
  --bg:#08121a;
  --card:#0f1b26;
  --accent:#ff6b5f;
  --muted:#9aa4a6;
  --glass: rgba(255,255,255,0.03);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.fefla-player{max-width:620px;width:100%;background:linear-gradient(180deg,var(--card), rgba(10,16,22,0.7));border-radius:14px;padding:16px;color:#eaf2f3;font-family:Inter,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;box-shadow:0 10px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.03)}
.fefla-player .row{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}
/* make logo centering robust for all theme/container contexts */
.fefla-player .logo{
  /* fixed base size but responsive and guaranteed square */
  width:225px;
  max-width:100%;
  aspect-ratio:1/1;
  height:auto;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,107,95,0.12), rgba(255,209,102,0.04));
  /* force block layout + centered margins so the logo remains centered in WP themes */
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-top:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  padding:0;
  color:var(--accent);
  font-weight:800;
}

/* station/status */
.fefla-player .station{font-weight:700;font-size:16px;color:#fff;letter-spacing:2.4px}
.fefla-player .status{font-size:13px;padding:8px 12px;border-radius:999px;background:var(--glass);color:var(--muted);border:1px solid rgba(255,255,255,0.02)}
.fefla-player .controls{display:flex;align-items:center;gap:12px;margin-top:12px}
/* add label above stop button */
.fefla-player .control-with-label{display:flex;flex-direction:column;align-items:center;gap:8px}
.fefla-player .btn-label{font-size:12px;color:var(--muted);background:transparent;padding:4px 8px;border-radius:8px;pointer-events:none;user-select:none}
@media(max-width:480px){ .fefla-player .control-with-label{gap:6px} .fefla-player .btn-label{font-size:11px;padding:3px 6px}}

/* main control buttons */
.fefla-player .btn{
  height:64px;
  width:64px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  color:#fff;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center; /* center inline icons/text */
  position:relative; /* ensure icons stay inside the button */
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
}

/* center images/SVGs or .icon elements inside buttons used by shortcode/admin */
.fefla-player .btn img,
.fefla-player .btn svg,
.fefla-player .btn .icon,
.fefla-player .small img,
.fefla-player .small svg,
.fefla-player .small .icon {
  display: block;
  margin: auto;
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  pointer-events: none;
  position: relative;
  left: 0;
  top: 0;
}
.fefla-player .btn:hover{transform:translateY(-4px)}

/* ensure the smaller controls used in the shortcode/admin match the primary control size */
.fefla-player .small,
.fefla-player .small-btn {
  height:64px;
  min-width:64px;
  padding:0 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:#fff;
  border:1px solid rgba(255,255,255,0.03);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
}

/* volume group */
.fefla-player .vol{flex:1;display:flex;align-items:center;gap:8px}
.fefla-player input[type=range]{-webkit-appearance:none;appearance:none;height:28px;width:100%;background:transparent}
.fefla-player input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));border-radius:999px}
.fefla-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);margin-top:-6px;box-shadow:0 4px 12px rgba(0,0,0,0.4);border:2px solid rgba(255,255,255,0.03)}

/* metadata: make slightly more translucent so canvas fireworks behind can be visible under its lower area,
   but keep the metadata content (text) clearly legible and above the visualiser. */
.fefla-player .meta{
  font-size:13px;
  color:var(--muted);
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.015); /* a touch more transparent */
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.02);
  position:relative;
  z-index:2; /* ensure text/content stays above the canvas */
  backdrop-filter: blur(4px); /* subtle glass so text remains readable over visuals */
}

/* keep error styling */
.fefla-player .error{color:#ffd0cf;font-size:13px;min-height:20px;margin-top:6px}
.track-info{display:flex;flex-direction:column;min-width:0}
.track-title{font-weight:700;color:#ffffff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-artist{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* marquee helper */
.marquee{overflow:hidden;display:block}
.marquee-inner{display:inline-block;white-space:nowrap}
.marquee.scrolling .marquee-inner{animation-name:marqueeScroll;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes marqueeScroll{from{transform:translateX(0)} to{transform:translateX(-100%)}}

/* smaller viewport tweaks */
@media(max-width:480px){
  .fefla-player .logo{width:135px;height:135px;min-width:135px;background-size:contain}
  .fefla-player .btn{height:56px;width:56px}
  .fefla-player .small,
  .fefla-player .small-btn { height:56px; min-width:56px; font-size:18px; border-radius:12px; }
}