.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;
  /* Скрыть полосу прокрутки для WebKit браузеров */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  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_header {

}




.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: 100vh;
    top: 0px;
    bottom: 0px;
  }
  
  .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: 100vh;
    top: 0px;
    bottom: 0px;
  }
  
  .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;
  }
}


@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 {

  }
}