/*
 * FILE: /public_html/assets/css/bmd-index-section-controllers-v1.css
 * BMD_INDEX_RELEASES_TABS_CONTROLLERS_V1_DO_NOT_REMOVE
 *
 * Real homepage section controller upgrade:
 * - Does not touch footer player/app-shell.
 * - Does not change DB queries.
 * - Adds real Releases tab and scroll buttons for every horizontal section.
 */

.bmds-main{
  --bmdc-green:#1ed760;
  --bmdc-green2:#20ef75;
  --bmdc-bg:#050608;
  --bmdc-panel:#181818;
  --bmdc-panel2:#242424;
  --bmdc-line:rgba(255,255,255,.12);
  --bmdc-line2:rgba(255,255,255,.20);
  --bmdc-muted:rgba(255,255,255,.68);
}

.bmds-main .bmds-chip--release{
  background:rgba(30,215,96,.14)!important;
  color:#baffd0!important;
  border:1px solid rgba(30,215,96,.28)!important;
}

.bmds-main .bmds-chip--release:hover{
  background:rgba(30,215,96,.20)!important;
  border-color:rgba(30,215,96,.42)!important;
}

.bmds-section-head{
  align-items:center!important;
  gap:12px!important;
  min-width:0;
}

.bmds-section-head .bmds-h2{
  min-width:0;
}

.bmds-section-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  min-width:0;
  flex:0 0 auto;
}

.bmds-release-tabs{
  padding:2px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}

.bmds-release-tabs::-webkit-scrollbar{display:none;}

.bmds-open-tab{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#fff!important;
  text-decoration:none!important;
  font-size:12px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}

.bmds-open-tab:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
  transform:translateY(-1px);
}

.bmds-open-tab--primary{
  background:var(--bmdc-green)!important;
  color:#04120a!important;
  border-color:rgba(30,215,96,.65)!important;
  box-shadow:0 14px 34px rgba(30,215,96,.16);
}

.bmds-open-tab--primary:hover{
  background:var(--bmdc-green2)!important;
}

.bmds-section-controls{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
  flex:0 0 auto;
}

.bmds-scroll-btn{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.07);
  color:#fff;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  font-weight:1000;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
}

.bmds-scroll-btn:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.bmds-scroll-btn:active{
  transform:translateY(0) scale(.97);
}

.bmds-scroll-btn:disabled{
  opacity:.34;
  cursor:not-allowed;
  transform:none!important;
}

.bmds-scroll-btn svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}

.bmds-scroll,
.bmds-stations,
.bmds-mix-grid{
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.bmds-scroll::-webkit-scrollbar,
.bmds-stations::-webkit-scrollbar,
.bmds-mix-grid::-webkit-scrollbar{
  display:none;
}

.bmds-scroll[data-bmd-index-track="1"],
.bmds-stations[data-bmd-index-track="1"],
.bmds-mix-grid[data-bmd-index-track="1"]{
  outline:0;
}

.bmds-scroll[data-bmd-index-track="1"]:focus-visible,
.bmds-stations[data-bmd-index-track="1"]:focus-visible,
.bmds-mix-grid[data-bmd-index-track="1"]:focus-visible{
  box-shadow:0 0 0 4px rgba(30,215,96,.10);
  border-radius:16px;
}

.bmds-row--releases{
  position:relative;
}

.bmds-row--releases:before{
  content:"";
  position:absolute;
  inset:-8px -12px auto -12px;
  height:92px;
  border-radius:24px;
  background:linear-gradient(90deg, rgba(30,215,96,.055), rgba(124,92,255,.055), transparent);
  pointer-events:none;
  opacity:.72;
}

.bmds-row--releases > *{
  position:relative;
  z-index:1;
}

@media (max-width:900px){
  .bmds-section-head{
    align-items:flex-start!important;
  }

  .bmds-section-actions{
    max-width:100%;
  }

  .bmds-release-tabs{
    max-width:min(100%, 520px);
  }
}

@media (max-width:720px){
  .bmds-section-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
    padding-right:12px!important;
  }

  .bmds-section-head--releases{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }

  .bmds-section-actions{
    width:auto;
    margin-left:auto;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .bmds-section-actions::-webkit-scrollbar{display:none;}

  .bmds-release-tabs{
    width:100%;
    order:3;
    margin-left:0;
    justify-content:flex-start;
  }

  .bmds-open-tab{
    min-height:33px;
    padding:0 12px;
    font-size:11.5px;
  }

  .bmds-section-controls{
    gap:5px;
  }

  .bmds-scroll-btn{
    width:34px;
    height:34px;
    min-width:34px;
  }
}

@media (max-width:420px){
  .bmds-section-controls{
    margin-left:0;
  }

  .bmds-scroll-btn{
    width:32px;
    height:32px;
    min-width:32px;
  }

  .bmds-open-tab{
    padding:0 10px;
  }
}
