/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Общие стили для светлой темы */
body {
        background-color: #f8f9fa;
        color: #333333;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      /* Глассморфизм для карточек */
      .card-glass {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
      }

      /* Кнопки с градиентом */
      .btn-gradient {
        background: linear-gradient(135deg, #8a5ccb, #5a8dfc);
        border: none;
        color: white;
        transition: all 0.3s ease;
      }
      .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      /* Заголовки карточек */
      .card-header-gradient {
        background: linear-gradient(135deg, #6a11cb, #2575fc);
        color: white;
        border-radius: 15px 15px 0 0;
      }

      /* Анимации */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .animate-fadeIn {
        animation: fadeIn 0.5s ease-in-out;
      }

      /* Футер */
      footer {
        margin-top: auto;
        background-color: #f8f9fa;
        padding: 20px 0;
        border-top: 1px solid #e9ecef;
      }

/* Анимация для сердечка */
@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.fa-heart.text-danger {
    animation: heartBeat 0.5s ease-in-out; /* Анимация при лайке */
}

.btn-link {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.btn-link:hover {
    opacity: 0.8;
}

/* Стили для цифры лайков */
#like-count {
    font-size: 1rem;
    color: #6c757d; /* Серый цвет */
    user-select: none; /* Запрет выделения текста */
}

/* Стили для кнопки лайка */
#like-ink {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

#like-ink:hover {
    opacity: 0.8;
}

/* Стили для футера */
footer {
  padding: 20px 0;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

footer h5 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

footer ul {
  margin-bottom: 1rem;
}

footer ul li {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

footer .col-md-3 {
  margin-bottom: 1.5rem;
}

footer .text-muted {
  font-size: 0.9rem;
}

/* Стили для мобильной версии */
@media (max-width: 767.98px) {
  footer {
    padding: 10px 0;
  }

  footer h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  footer ul {
    margin-bottom: 0.5rem;
  }

  footer ul li {
    font-size: 0.85rem;
  }

  footer .col-md-3 {
    margin-bottom: 1rem;
  }

  footer .text-muted {
    font-size: 0.8rem;
  }

  /* Анимация для аккордеона */
  .collapse {
    transition: all 0.3s ease;
  }

  /* Иконка стрелки */
  .fa-chevron-down {
    transition: transform 0.3s ease;
  }

  /* Поворот стрелки при раскрытии */
  [aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
  }
}

/* Стиль для основного изображения Ink */
.ink-detail-image {
    max-height: 300px;
    width: auto;
}

/* Стиль для миниатюр Scrawl */
.scrawl-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

/* Общие стили для миниатюр */
.thumbnail-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Стили для аватара профиля */
.profile-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Стили для миниатюр в ленте активности */
.activity-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Дополнительные классы */
.rounded-10 {
    border-radius: 10px;
}

.btn-social {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .btn-social:hover {
    transform: scale(1.1);
  }

@media (max-width: 576px) {
  .btn-social {
    width: 38px;
    height: 38px;
  }
  .btn-social i {
    font-size: 0.9em;
  }
  .btn-social-mobile {
    width: 44px;
    height: 44px;
    margin: 0 4px 8px 4px;
  }
  #followCollapse.show {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}