/* Bottom Player Bar - Country 103 (v2) */
.c103-playerbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  background:linear-gradient(90deg,#221a12,#2b2118 45%,#221a12);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
  padding:10px 12px;
}
.c103-playerbar-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.c103-pb-brand{line-height:1.05}
.c103-pb-station{font-weight:1000;letter-spacing:.10em;text-transform:uppercase;font-size:12px;opacity:.95}
.c103-pb-sub{font-size:12px;opacity:.85}

.c103-pb-center{display:flex;align-items:center;gap:12px;flex:1;min-width:260px}
.c103-pb-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
}
.c103-pb-btn:hover{filter:brightness(1.05)}

.c103-pb-meta{min-width:200px}
.c103-pb-now{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;
  display:flex;align-items:center;gap:8px
}
.c103-pb-live{display:inline-flex;align-items:center;gap:6px;font-weight:1000}
.c103-pb-dot{
  width:8px;height:8px;border-radius:999px;background:#cc1b1b;
  box-shadow:0 0 0 0 rgba(204,27,27,.45);
}
.c103-playerbar[data-playing="1"] .c103-pb-dot{animation:c103pbpulse 1.6s infinite}
@keyframes c103pbpulse{
  0%{box-shadow:0 0 0 0 rgba(204,27,27,.45)}
  70%{box-shadow:0 0 0 10px rgba(204,27,27,0)}
  100%{box-shadow:0 0 0 0 rgba(204,27,27,0)}
}
.c103-pb-track{font-size:14px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}

.c103-pb-right{display:flex;align-items:center;gap:10px}
.c103-pb-vol{width:120px}
.c103-pb-open{color:#fff;text-decoration:none;font-weight:1000;opacity:.9}
.c103-pb-open:hover{opacity:1;text-decoration:underline}

/* Make room so content isn't hidden */
body{padding-bottom:92px}

@media (max-width:700px){
  .c103-pb-right{display:none}
  .c103-pb-track{max-width:280px}
  body{padding-bottom:84px}
}
/* Force playerbar into one row like before */
#c103-playerbar.c103-playerbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
}

#c103-playerbar .c103-pb-left{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

#c103-playerbar .c103-pb-meta{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

#c103-playerbar .c103-pb-right{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* =========================================================
   Nashville Modern Country — Player Bar Skin
   Paste at END of playerbar.css
   ========================================================= */

:root{
  --c103-ink:#0b0b0c;
  --c103-ink-2:#121214;
  --c103-leather:#1a1410;
  --c103-amber:#c8892b;          /* whiskey */
  --c103-amber-2:#ffb24a;        /* highlight */
  --c103-red:#d11f1f;            /* live */
  --c103-white:#ffffff;
}

/* Fixed bar */
#c103-playerbar{
  position:fixed;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:nowrap;

  padding:14px 18px;

  /* leather + subtle wood grain */
  background:
    radial-gradient(1200px 240px at 20% -40%, rgba(255,178,74,.22), transparent 60%),
    radial-gradient(900px 200px at 85% -60%, rgba(200,137,43,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 2px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 22px
    ),
    linear-gradient(180deg, #151516, #0b0b0c);

  color:var(--c103-white);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(10px);
}

/* Make sure page content doesn’t hide under bar */
body{ padding-bottom:110px; }

/* Layout */
#c103-playerbar .c103-pb-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
}
#c103-playerbar .c103-pb-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Station block */
#c103-playerbar .c103-pb-station strong{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:1000;
  font-size:12px;
  opacity:.9;
}
#c103-playerbar .c103-pb-station span{
  font-weight:1000;
  font-size:15px;
  line-height:1.1;
  color:rgba(255,255,255,.95);
}

/* Meta */
#c103-playerbar .c103-pb-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
}
#c103-playerbar .c103-pb-track{
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
  color:rgba(255,255,255,.88);
}

/* LIVE badge */
#c103-playerbar [data-pb-live-label]{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}

/* add a pulsing dot before LIVE/OFF AIR */
#c103-playerbar [data-pb-live-label]::before{
  content:"";
  width:9px;height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 0 rgba(255,255,255,.0);
}
#c103-playerbar[data-playing="1"] [data-pb-live-label]{
  color:rgba(255,255,255,.95);
}
#c103-playerbar[data-playing="1"] [data-pb-live-label]::before{
  background:var(--c103-red);
  box-shadow:0 0 0 0 rgba(209,31,31,.45);
  animation:c103Pulse 1.6s infinite;
}
@keyframes c103Pulse{
  0%{ box-shadow:0 0 0 0 rgba(209,31,31,.45); }
  70%{ box-shadow:0 0 0 10px rgba(209,31,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(209,31,31,0); }
}

/* Buttons */
#c103-playerbar button{
  appearance:none;
  border:none;
  cursor:pointer;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, #232326, #141416);

  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:9px 12px;
  font-size:14px;
  font-weight:900;

  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.06) inset;

  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#c103-playerbar button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#c103-playerbar button:active{ transform:translateY(0); }

/* “Nashville” play glow when playing */
#c103-playerbar[data-playing="1"] .c103-pb-play,
#c103-playerbar[data-playing="1"] .c103-pb-pause{
  background:
    radial-gradient(120px 50px at 30% 20%, rgba(255,178,74,.35), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, #2b1f14, #141416);
  border-color: rgba(200,137,43,.45);
  box-shadow:
    0 14px 26px rgba(0,0,0,.40),
    0 0 22px rgba(200,137,43,.22),
    0 2px 0 rgba(255,255,255,.06) inset;
}

/* Volume */
#c103-playerbar input[type="range"]{
  width:120px;
  accent-color: var(--c103-amber);
}

/* Optional “Open Stream” link styling if you keep it */
#c103-playerbar .c103-pb-open{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  transition:filter .12s ease, transform .12s ease;
}
#c103-playerbar .c103-pb-open:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* Mobile: stack cleanly */
@media (max-width: 820px){
  #c103-playerbar{
    left:12px; right:12px; bottom:12px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  #c103-playerbar .c103-pb-left{
    width:100%;
    justify-content:space-between;
  }
  #c103-playerbar .c103-pb-track{ max-width:100%; }
  #c103-playerbar .c103-pb-right{
    width:100%;
    justify-content:space-between;
  }
}