/* NEW AUDIO PLAYER STYLES - SCOPED TO PREVENT THEME CONFLICTS */

/* All styles are SCOPED to .audio so they won't clash with theme CSS */
.audio {
  /* Local design tokens */
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --blue: #000;
  --blue-700: #2d8dfc;
  --shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
  --radius: 16px;

  max-width: 500px; /* desktop cap */
  margin: 0 auto;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.audio, .audio * { box-sizing: border-box; }

/* MOBILE-FIRST card */
.audio .player {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--blue);
  padding: 10px 10px; /* compact height */
  display: grid;
  grid-template-columns: 56px 1fr auto; /* cover | title/artist | genre/year */
  grid-template-rows: auto auto;
  column-gap: 16px;  /* horizontal breathing space */
  row-gap: 10px;
  align-items: center;
}

.audio .cover { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #ddd; grid-row: 1 / span 2; }
.audio .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.audio .meta-left { min-width: 0; }
.audio .title { font-weight: 700; font-size: .95rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio .artist { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.audio .meta-right { text-align: right; justify-self: end; }
.audio .genre, .audio .year { font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.audio .genre { font-weight: 600; }
.audio .year { color: var(--muted); margin-top: 4px; }

.audio .controls { grid-column: 2 / span 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }

.audio .btn { inline-size: 38px; block-size: 38px; border-radius: 999px; background: var(--blue); border: none; display: inline-grid; place-items: center; cursor: pointer; transition: transform .05s ease, background .2s ease; }
.audio .btn:active { transform: scale(0.98); }
.audio .btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }

.audio .icon { width: 18px; height: 18px; fill: #fff !important; display: block; background: none !important; }

.audio .progress { appearance: none; width: 100%; height: 6px; background: var(--line); border-radius: 999px; outline: none; cursor: pointer; }
.audio .progress::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--blue) var(--val, 0%), var(--line) var(--val, 0%)); border-radius: 999px; }
.audio .progress::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--blue); border-radius: 50%; margin-top: -4px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.audio .progress::-moz-range-track { height: 6px; border: none; background: var(--line); border-radius: 999px; }
.audio .progress::-moz-range-progress { height: 6px; background: var(--blue); border-radius: 999px; }
.audio .progress::-moz-range-thumb { width: 14px; height: 14px; background: var(--blue); border: none; border-radius: 50%; }

.audio .time { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); min-width: 50px; text-align: right; user-select: none; }

.audio .actions { margin-top: 12px; display: flex; justify-content: center; }
.audio .download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); transition: transform .05s ease, opacity .2s ease; }
.audio .download-btn:active { transform: translateY(1px); }
.audio .download-btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.audio .dl-icon { width: 18px; height: 18px; fill: #fff; display: block; }

/* Desktop tweak only increases density slightly, width remains capped by .audio */
@media (min-width: 561px) {
  .audio .player { padding: 12px 16px; grid-template-columns: 60px 1fr auto; column-gap: 18px; }
  .audio .cover { width: 60px; height: 60px; border-radius: 15px; }
  .audio .title { font-size: 1rem; }
  .audio .artist { font-size: .86rem; }
  .audio .genre, .audio .year { font-size: .8rem; }
  .audio .btn { inline-size: 40px; block-size: 40px; }
  .audio .icon { width: 20px; height: 20px; }
  .audio .time { font-size: .8rem; min-width: 52px; }
}

/* Multiple player support with suffixes */
.audio2 { 
  /* Local design tokens */
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --blue: #1481ff;
  --blue-700: #2d8dfc;
  --shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
  --radius: 16px;

  max-width: 500px; 
  margin: 0 auto; 
  color: var(--text); 
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; 
}
.audio2, .audio2 * { box-sizing: border-box; }
.audio2 .player { background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--blue); padding: 10px 10px; display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 10px; align-items: center; }
.audio2 .cover { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #ddd; grid-row: 1 / span 2; }
.audio2 .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio2 .meta-left { min-width: 0; }
.audio2 .title { font-weight: 700; font-size: .95rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio2 .artist { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio2 .meta-right { text-align: right; justify-self: end; }
.audio2 .genre, .audio2 .year { font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.audio2 .genre { font-weight: 600; }
.audio2 .year { color: var(--muted); margin-top: 4px; }
.audio2 .controls { grid-column: 2 / span 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.audio2 .btn { inline-size: 38px; block-size: 38px; border-radius: 999px; background: var(--blue); border: none; display: inline-grid; place-items: center; cursor: pointer; transition: transform .05s ease, background .2s ease; }
.audio2 .btn:active { transform: scale(0.98); }
.audio2 .btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.audio2 .icon { width: 18px; height: 18px; fill: #fff !important; display: block; background: none !important; }
.audio2 .progress { appearance: none; width: 100%; height: 6px; background: var(--line); border-radius: 999px; outline: none; cursor: pointer; }
.audio2 .progress::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--blue) var(--val, 0%), var(--line) var(--val, 0%)); border-radius: 999px; }
.audio2 .progress::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--blue); border-radius: 50%; margin-top: -4px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.audio2 .progress::-moz-range-track { height: 6px; border: none; background: var(--line); border-radius: 999px; }
.audio2 .progress::-moz-range-progress { height: 6px; background: var(--blue); border-radius: 999px; }
.audio2 .progress::-moz-range-thumb { width: 14px; height: 14px; background: var(--blue); border: none; border-radius: 50%; }
.audio2 .time { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); min-width: 50px; text-align: right; user-select: none; }
.audio2 .actions { margin-top: 12px; display: flex; justify-content: center; }
.audio2 .download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); transition: transform .05s ease, opacity .2s ease; }
.audio2 .download-btn:active { transform: translateY(1px); }
.audio2 .download-btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.audio2 .dl-icon { width: 18px; height: 18px; fill: #fff; display: block; }

.audio3 { 
  /* Local design tokens */
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --blue: #1481ff;
  --blue-700: #2d8dfc;
  --shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
  --radius: 16px;

  max-width: 500px; 
  margin: 0 auto; 
  color: var(--text); 
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; 
}
.audio3, .audio3 * { box-sizing: border-box; }
.audio3 .player { background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--blue); padding: 10px 10px; display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 10px; align-items: center; }
.audio3 .cover { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #ddd; grid-row: 1 / span 2; }
.audio3 .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio3 .meta-left { min-width: 0; }
.audio3 .title { font-weight: 700; font-size: .95rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio3 .artist { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio3 .meta-right { text-align: right; justify-self: end; }
.audio3 .genre, .audio3 .year { font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.audio3 .genre { font-weight: 600; }
.audio3 .year { color: var(--muted); margin-top: 4px; }
.audio3 .controls { grid-column: 2 / span 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.audio3 .btn { inline-size: 38px; block-size: 38px; border-radius: 999px; background: var(--blue); border: none; display: inline-grid; place-items: center; cursor: pointer; transition: transform .05s ease, background .2s ease; }
.audio3 .btn:active { transform: scale(0.98); }
.audio3 .btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.audio3 .icon { width: 18px; height: 18px; fill: #fff !important; display: block; background: none !important; }
.audio3 .progress { appearance: none; width: 100%; height: 6px; background: var(--line); border-radius: 999px; outline: none; cursor: pointer; }
.audio3 .progress::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--blue) var(--val, 0%), var(--line) var(--val, 0%)); border-radius: 999px; }
.audio3 .progress::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--blue); border-radius: 50%; margin-top: -4px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.audio3 .progress::-moz-range-track { height: 6px; border: none; background: var(--line); border-radius: 999px; }
.audio3 .progress::-moz-range-progress { height: 6px; background: var(--blue); border-radius: 999px; }
.audio3 .progress::-moz-range-thumb { width: 14px; height: 14px; background: var(--blue); border: none; border-radius: 50%; }
.audio3 .time { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); min-width: 50px; text-align: right; user-select: none; }
.audio3 .actions { margin-top: 12px; display: flex; justify-content: center; }
.audio3 .download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); transition: transform .05s ease, opacity .2s ease; }
.audio3 .download-btn:active { transform: translateY(1px); }
.audio3 .download-btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.audio3 .dl-icon { width: 18px; height: 18px; fill: #fff; display: block; }

/* Desktop responsive for all variants */
@media (min-width: 561px) {
  .audio2 .player { padding: 12px 16px; grid-template-columns: 60px 1fr auto; column-gap: 18px; }
  .audio2 .cover { width: 60px; height: 60px; border-radius: 15px; }
  .audio2 .title { font-size: 1rem; }
  .audio2 .artist { font-size: .86rem; }
  .audio2 .genre, .audio2 .year { font-size: .8rem; }
  .audio2 .btn { inline-size: 40px; block-size: 40px; }
  .audio2 .icon { width: 20px; height: 20px; }
  .audio2 .time { font-size: .8rem; min-width: 52px; }
  
  .audio3 .player { padding: 12px 16px; grid-template-columns: 60px 1fr auto; column-gap: 18px; }
  .audio3 .cover { width: 60px; height: 60px; border-radius: 15px; }
  .audio3 .title { font-size: 1rem; }
  .audio3 .artist { font-size: .86rem; }
  .audio3 .genre, .audio3 .year { font-size: .8rem; }
  .audio3 .btn { inline-size: 40px; block-size: 40px; }
  .audio3 .icon { width: 20px; height: 20px; }
  .audio3 .time { font-size: .8rem; min-width: 52px; }
}

/* Hide the WordPress-compatible audio element */
.gb-audio-source {
    display: none !important;
}