/* =========================================================
   Top Notch Audio Library
   فقط برای صفحه audio-top-notch.html
   ========================================================= */

.top-notch-audio-page{
  background:
    radial-gradient(circle at 12% 8%, rgba(142,216,232,.12), transparent 31%),
    linear-gradient(180deg, #ffffff 0%, #f6fbfd 50%, #ffffff 100%);
}

.top-notch-intro{
  width: min(100%, 850px);
  margin: 0 auto 22px;
  text-align: center;
}

.top-notch-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  margin-bottom: 12px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(200,229,239,.96);
  font-size: 13px;
  font-weight: 950;
  direction: ltr;
}

.top-notch-intro h2{
  margin: 0 0 10px;
  color: #0f2740;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.035em;
}

.top-notch-intro p{
  margin: 0 auto;
  color: #5f758b;
  font-size: 15.5px;
  line-height: 2.05;
  font-weight: 650;
}

.top-notch-command-panel{
  position: sticky;
  top: 82px;
  z-index: 18;
  width: min(100%, 1120px);
  margin: 0 auto 18px;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(245,251,254,.89));
  border: 1px solid rgba(190,226,238,.86);
  box-shadow:
    0 18px 48px rgba(8,34,58,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}

.top-notch-search-box{
  display: grid;
  gap: 8px;
}

.top-notch-search-box label{
  color: #123f61;
  font-size: 13px;
  font-weight: 950;
}

.top-notch-search-field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(190,226,238,.95);
}

.top-notch-search-field::before{
  content: "⌕";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  font-size: 20px;
  font-weight: 900;
}

.top-notch-search-field input{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #0f2740;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
}

.top-notch-search-field input::placeholder{
  color: rgba(95,117,139,.78);
  font-weight: 650;
}

.top-notch-search-field button{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  color: #5f758b;
  background: rgba(15,39,64,.07);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.top-notch-search-field button:hover,
.top-notch-search-field button:focus-visible{
  color: #ffffff;
  background: #123f61;
}

.top-notch-filter-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.top-notch-book-tab{
  min-width: 158px;
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(190,226,238,.95);
  border-radius: 20px;
  color: #123f61;
  background: #ffffff;
  font-family: inherit;
  text-align: right;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 28px rgba(8,34,58,.06);
}

.top-notch-book-tab strong{
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 950;
  direction: ltr;
}

.top-notch-book-tab span{
  color: #5f758b;
  font-size: 12px;
  font-weight: 800;
}

.top-notch-book-tab[aria-pressed="true"]{
  color: #ffffff;
  background:
    radial-gradient(circle at 0 0, rgba(142,216,232,.32), transparent 36%),
    linear-gradient(135deg, #123f61, #061626);
  border-color: rgba(18,63,97,.42);
  box-shadow: 0 16px 38px rgba(18,63,97,.22);
}

.top-notch-book-tab[aria-pressed="true"] span{
  color: rgba(255,255,255,.76);
}

.top-notch-book-tab.is-coming-soon{
  cursor: default;
  opacity: .62;
  box-shadow: none;
  background: rgba(248,251,253,.9);
}

.top-notch-book-tab.is-coming-soon span{
  color: #7f8f9e;
}

.top-notch-status,
.top-notch-empty-state{
  width: min(100%, 1120px);
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: 20px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(200,229,239,.96);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.top-notch-status.is-error{
  color: #7a1e1e;
  background: rgba(255,238,238,.95);
  border-color: rgba(255,190,190,.9);
}

.top-notch-sticky-nav{
  position: sticky;
  top: 244px;
  z-index: 15;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: min(100%, 1120px);
  margin: 0 auto 22px;
  padding: 10px;
  overflow-x: auto;
  border-radius: 22px;
  background: rgba(255,255,255,.89);
  border: 1px solid rgba(190,226,238,.76);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(8,34,58,.08);
  scrollbar-width: thin;
}

.top-notch-sticky-nav a{
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.92);
  font-size: 12.5px;
  font-weight: 950;
  text-decoration: none;
  direction: ltr;
}

.top-notch-sticky-nav a[aria-current="true"],
.top-notch-sticky-nav a:hover,
.top-notch-sticky-nav a:focus-visible{
  color: #ffffff;
  background: #123f61;
  border-color: #123f61;
}

.top-notch-mount{
  width: min(100%, 1120px);
  margin: 0 auto;
}

.top-notch-book-panel{
  scroll-margin-top: 310px;
  margin: 0 0 18px;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(142,216,232,.14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(246,252,255,.95));
  border: 1px solid rgba(190,226,238,.92);
  box-shadow:
    0 18px 48px rgba(8,34,58,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.top-notch-book-toggle,
.top-notch-unit-toggle{
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
}

.top-notch-book-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  color: #0f2740;
  background: transparent;
}

.top-notch-book-toggle::after,
.top-notch-unit-toggle::after{
  content: "⌄";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.86);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.top-notch-book-toggle[aria-expanded="true"]::after,
.top-notch-unit-toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
  color: #ffffff;
  background: #123f61;
}

.top-notch-book-title{
  display: grid;
  gap: 5px;
}

.top-notch-book-title span{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #315000;
  background: rgba(183,214,11,.13);
  border: 1px solid rgba(183,214,11,.30);
  font-size: 12px;
  font-weight: 950;
  direction: ltr;
}

.top-notch-book-title strong{
  color: #0f2740;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  font-weight: 950;
  direction: ltr;
}

.top-notch-book-content{
  padding: 0 18px 18px;
}

.top-notch-unit{
  margin-top: 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(190,226,238,.70);
}

.top-notch-unit-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: #0f2740;
  background: linear-gradient(180deg, rgba(255,255,255,.89), rgba(246,252,255,.83));
}

.top-notch-unit-toggle span{
  display: grid;
  gap: 3px;
}

.top-notch-unit-toggle strong{
  color: #0f2740;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 950;
  direction: ltr;
}

.top-notch-unit-toggle small{
  color: #5f758b;
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
}

.top-notch-unit-content{
  padding: 12px;
}

.top-notch-track-grid{
  display: grid;
  gap: 12px;
}

.top-notch-track-card{
  grid-template-columns: minmax(170px,.78fr) minmax(280px,1.25fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 20px;
}

.top-notch-track-info{
  display: grid;
  gap: 4px;
}

.top-notch-track-info strong{
  direction: ltr;
}

.top-notch-track-info small{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-notch-track-player{
  min-width: 0;
}

.top-notch-download{
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

@media (max-width: 980px){
  .top-notch-command-panel{
    top: 72px;
    border-radius: 24px;
  }

  .top-notch-sticky-nav{
    top: 232px;
  }

  .top-notch-track-card{
    grid-template-columns: 1fr;
  }

  .top-notch-track-info{
    text-align: center;
  }

  .top-notch-download{
    width: 100%;
  }
}

@media (max-width: 680px){
  .top-notch-command-panel{
    position: relative;
    top: auto;
    padding: 12px;
    border-radius: 22px;
  }

  .top-notch-sticky-nav{
    position: relative;
    top: auto;
    margin-bottom: 16px;
    border-radius: 20px;
  }

  .top-notch-intro{
    margin-bottom: 18px;
  }

  .top-notch-intro p{
    font-size: 14.5px;
    line-height: 2;
  }

  .top-notch-book-tab{
    min-width: 145px;
  }

  .top-notch-book-panel{
    border-radius: 23px;
  }

  .top-notch-book-toggle{
    padding: 15px;
  }

  .top-notch-book-content{
    padding: 0 12px 12px;
  }

  .top-notch-unit{
    border-radius: 18px;
  }

  .top-notch-unit-toggle{
    padding: 12px;
  }

  .top-notch-unit-content{
    padding: 9px;
  }

  .top-notch-track-card{
    padding: 11px;
    border-radius: 17px;
  }

  .top-notch-track-player audio{
    width: 100%;
  }
}

@media (max-width: 430px){
  .top-notch-search-field{
    min-height: 48px;
  }

  .top-notch-search-field input{
    font-size: 14px;
  }

  .top-notch-book-tab{
    min-width: 135px;
    padding: 11px 12px;
  }

  .top-notch-book-title strong{
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .top-notch-book-toggle::after,
  .top-notch-unit-toggle::after{
    transition: none;
  }
}