.card {
  opacity: 0;
  transform: translateY(40px) scale(0.96) rotateX(8deg) skewY(2deg);
  filter: blur(12px) brightness(0.7) grayscale(0.2);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.77, 0, 0.175, 1),
    transform 0.7s cubic-bezier(0.77, 0, 0.175, 1),
    filter 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  position: sticky;
  top: 10%;
  bottom: 10%;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100vh;
}

.card-text p,
.card .subtitle {
  text-align: left;
  font-weight: var(--rg) !important;
  position: relative;

  opacity: 0.7 !important;
  /* Используем динамический размер шрифта как в основном контенте */
  font-size: var(--dynamic-font-size) !important;
  line-height: var(--dynamic-line-height) !important;
}

/* Скрыть полосу прокрутки для WebKit браузеров (Chrome, Safari, Edge) */
.card::-webkit-scrollbar {
  display: none;
}




.card.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0) skewY(0);
  filter: blur(0) brightness(1) grayscale(0);
  pointer-events: auto;
  display: flex;
  flex-direction: column;

  border-image: linear-gradient(45deg, #92f7ff14, #92f7ff4a) 1;
  border-image-slice: 1;

  backdrop-filter: blur(9px);
  background-repeat: round;
  background-size: cover;
  width: 100%;
  top: 0;
  z-index: 996;
}


@media (min-width: 300px) and (max-width: 576px) {
  .card.visible {
    background: var(--back);
  }
}

@media (min-width: 577px) and (max-width: 768px) {

  .card.visible {
    background: var(--back);
  }
}

@media (min-width: 769px) and (max-width: 1025px) {
  .card.visible {
    background: var(--back);
  }
}


@media (min-width: 1025px) {
  .card.visible {
    background: transparent;
  }
}



.card .heading {

  top: 0;
  /* Прилипает к верху */
  z-index: 50;
  /* Очень высокий z-index */

  overflow: visible;
  /* Показываем содержимое */
  min-height: auto;
  /* Минимальная высота для видимости */
  height: auto;
  display: flex;
  /* Делаем flex для размещения содержимого */
  align-items: center;
  /* Центрируем по вертикали */
  justify-content: space-between;
  /* Распределяем содержимое */

  pointer-events: auto;
  opacity: 1;
  /* Всегда видимый */
  visibility: visible;
  /* Всегда видимый */
  margin: 0 -1px;
  /* Компенсируем границы карточки */
  /* Никаких анимаций, переходов или скролл-эффектов */
  padding-top: var(--xxl);
  padding-bottom: var(--xxl);
}

/* Блюр для заголовка карточки */


/* Содержимое заголовка должно быть поверх блюра */
.card .heading>* {
  position: relative;
  z-index: 1;
}

/* Футер карточки: фиксируем снизу с обратным градиентом и блюром */
.card .footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 13, 12, 0.100) 0%, rgba(0, 13, 12, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  min-height: 88px;
}

.card .footer::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  mask: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
}

.card .footer>* {
  position: relative;
  z-index: 1;
}

.card .card-footer-slot {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--lg);
  overflow: hidden;
  min-width: 0;
}

/* Отступ для контента карточки, чтобы он не перекрывался заголовком */
.card .fs__md.fw__rg.white {
  padding-top: 0;
}

/* Контейнер для кнопок в заголовке */
.header-buttons {
  display: flex !important;
  align-items: center !important;
  gap: var(--sm) !important;
  flex-shrink: 0 !important;
  /* Не сжимаем кнопки */
  overflow: visible !important;
  /* Показываем все кнопки */
  z-index: 20 !important;
  /* Поверх всего остального */
}

/* Кнопки в карточке используют общие стили btn--round без переопределений */

.close__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 0;
  background: #00000075;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--hg);
  border: 1px solid #ffffff30;
}


@media (min-width: 300px) and (max-width: 576px) {
  .card {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100dvh;
    min-height: 100dvh;
    position: fixed;
    inset: 0;
  }

  .card::-webkit-scrollbar {
    display: none;
  }




}

@media (min-width: 577px) and (max-width: 768px) {
  .card {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100dvh;
    min-height: 100dvh;
    position: fixed;
    inset: 0;
  }

  .card::-webkit-scrollbar {
    display: none;
  }



}

@media (min-width: 769px) and (max-width: 1024px) {
  .card {
    max-height: 100vh;
    /* Добавляем max-height вместо min-height */
    height: 100vh;
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Скрыть полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: none;
  }

  .card::-webkit-scrollbar {
    display: none;
  }

  .card-text p,
  .card .subtitle {
    font-size: calc(var(--dynamic-font-size) + 3px) !important;
    line-height: calc(var(--dynamic-line-height) + 3px) !important;
  }
}


@media (min-width: 1024px) {
  .card {
    max-height: 100vh;
    /* Добавляем max-height вместо min-height */
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Скрыть полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .card::-webkit-scrollbar {
    display: none;
  }

  /* Отступы для карточки только в веб-версии */
  .card.visible {}
}

/* Стили для изображения в карточке */
.card-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
  display: block;
}

/* Скрываем изображение плейлиста на мобильных - ОТКЛЮЧЕНО
@media (max-width: 768px) {
  .card-image {
    display: none;
  }
}
*/