/* Category styles */
.tw-category-item {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  padding: 18px 20px;
  margin-bottom: 0;
  cursor: pointer;
  transition: box-shadow 0.18s, background 0.18s;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  min-height: 60px;
}

.tw-category-item:hover {
  border: 2px solid #0071e3;
  box-shadow: 0 4px 24px 0 rgba(0,113,227,0.08);
  background: #f0f6ff;
}

.tw-category-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #222;
}



.tw-category-header {
  padding: 0 4px;
  margin-top: -8px; /* Поднимаем заголовок ближе к кнопке back */
}

.tw-category-header h3 {
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 8px !important; /* Уменьшаем отступ снизу заголовка */
}

.tw-back-btn {
  padding: 0 4px;
  margin-bottom: 8px; /* Уменьшаем отступ снизу кнопки back */
}

@media (max-width: 768px), (max-device-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  .tw-category-item {
    border-radius: 12px;
    padding: 10px 8px; /* Увеличили padding для лучшего внешнего вида */
    font-size: 1.05rem;
    min-height: 40px; /* Немного увеличили высоту */
    margin: 0 50px 8px 50px; /* Еще больше увеличили боковые отступы для более узких кнопок */
    border: 2px solid #e5e7eb; /* Добавили видимый контур */
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06); /* Усилили тень для лучшей видимости */
    transition: all 0.2s ease; /* Плавные переходы */
  }
  
  .tw-category-item:hover {
    border: 2px solid #0071e3;
    box-shadow: 0 4px 16px 0 rgba(0,113,227,0.12);
    background: #f0f6ff;
    transform: translateY(-1px); /* Легкий эффект поднятия */
  }
  
  .tw-category-item:active {
    transform: translateY(0); /* Убираем поднятие при нажатии */
    box-shadow: 0 2px 8px 0 rgba(0,113,227,0.08);
  }
  
  /* Предотвращаем случайное выделение кнопок при скролле */
  .tw-category-item {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    /* Отключаем momentum scrolling для предотвращения случайного выделения */
    -webkit-overflow-scrolling: auto !important;
    touch-action: manipulation;
  }
  
  /* Отключаем эффекты hover на мобильных устройствах */
  @media (hover: none) and (pointer: coarse) {
    .tw-category-item:hover {
      border: 2px solid #e5e7eb !important;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06) !important;
      background: #fff !important;
      transform: none !important;
    }
  }
  
  .tw-category-title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important; /* Делаем текст более жирным для лучшей читаемости */
  }
  
  /* Еще больше уменьшаем отступы на мобильных устройствах */
  .tw-category-header {
    margin-top: -4px !important; /* Еще ближе поднимаем заголовок к кнопке back */
  }
  
  .tw-category-header h3 {
    margin-bottom: 4px !important; /* Еще меньше отступ снизу заголовка */
  }
  
  .tw-back-btn {
    margin-bottom: 4px !important; /* Еще меньше отступ снизу кнопки back */
  }
}