/* Filters + grid (base) */
.oyml-filters{margin:1rem 0;display:flex;gap:.5rem;flex-wrap:wrap}
.oyml-filters input[type=text], .oyml-filters select{padding:.4rem}
.oyml-grid{display:grid;grid-template-columns:1fr;gap:1rem;justify-items:center}
.oyml-card{background:#000;color:#fff;border:1px solid #222;border-radius:8px;overflow:hidden;width:90%}
.oyml-card a{color:#fff}
.oyml-card .thumb{display:block;position:relative}
.oyml-card .thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.oyml-card .thumb .play-overlay{position:absolute;right:.5rem;bottom:.5rem;background:rgba(0,0,0,.65);color:#fff;border-radius:50%;padding:.45rem .55rem;font-size:18px;cursor:pointer}
.oyml-card .meta{padding:.6rem .7rem}
.oyml-card .title{font-size:1rem;margin:.1rem 0}
.oyml-card .sub{font-size:.875rem;color:#ddd}
#oyml-sticky-player.oyml-sticky{position:fixed;left:0;right:0;bottom:0;background:#111;color:#fff;padding:.5rem .75rem;display:flex;align-items:center;gap:.75rem;z-index:9999;box-shadow:0 -2px 10px rgba(0,0,0,.3)}
#oyml-sticky-player.hidden{display:none}
#oyml-sticky-player button{background:#fff;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer}
#oyml-sticky-player .oyml-trackinfo{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Single track meta (enforced dark) */
body.single-oyml_track .oyml-meta{width:100%;background:#000 !important;color:#fff !important;border:1px solid #222 !important;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:8px;overflow:hidden}
body.single-oyml_track .oyml-meta th,body.single-oyml_track .oyml-meta td{padding:.7rem .9rem;background:#000 !important;color:#fff !important;vertical-align:top;border:none !important}
body.single-oyml_track .oyml-meta tr{border-top:1px solid #222 !important;border-bottom:1px solid #222 !important}
body.single-oyml_track .oyml-meta a{color:#fff !important; text-decoration: underline; text-underline-offset: 2px;}

/* Audio nav + back link */
.oyml-audio-nav{display:flex;align-items:center;gap:1rem;margin-top:10px}
.oyml-audio-nav .prev a, .oyml-audio-nav .next a{color:#fff !important;text-decoration:none}
.oyml-audio-nav .prev{flex:0 0 auto}
.oyml-audio-nav .next{flex:0 0 auto}
.oyml-audio-nav .catalog{flex:0 0 auto;margin-left:auto;text-align:right}
.oyml-audio-nav audio{flex:1 1 auto; width:100%}

/* Radio logo header */
.oyml-radio-header{display:flex;align-items:center;gap:12px;margin:8px 0 14px;justify-content:center;text-align:center}
.oyml-radio-logo{display:block;margin:0 auto;width:90%;height:auto;max-width:none}

/* Hide theme entry header on radio pages */
.oyml-radio-page header.entry-header{display:none !important}

/* Desktop (≥768px): 3-col grid and single-line filters */
@media (min-width: 768px){
  .oyml-grid{ grid-template-columns: repeat(3, 1fr) !important; justify-items:stretch }
  .oyml-card{ width:auto }
  .oyml-filters{ flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
  .oyml-filters input[type=text]{ width:auto; min-width:220px }
  .oyml-filters button[type=submit]{ margin-top:0 }
  
  .single-oyml_track .oyml-radio-logo {
    width: auto !important;
    height: auto !important;
    max-width: 580px !important;
}
}


@media (max-width: 768px){ 
    .single-oyml_track .oyml-radio-logo { 
        width: auto !important; 
        height: auto !important; 
        max-width: 398px !important; 
        
    }
    
}

/* Mobile: put Filter button on its own row and center all controls */
@media (max-width: 768px){
  .oyml-filters{
    display: grid;                 /* override the base flex */
    grid-template-columns: 1fr;    /* one column */
    gap: .6rem;
    justify-items: center;         /* center children */
    width: 100%;
  }
  .oyml-filters input[type="text"]{
    width: 90%;
    max-width: 580px;              /* optional cap */
  }
  .oyml-filters button[type="submit"]{
    width: 90%;
    max-width: 580px;              /* match inputs */
    margin-top: .25rem;
  }
}

/* Desktop (already in plugin) stays one line; included here for clarity */
@media (min-width: 768px){
  .oyml-filters{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}