@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局毛玻璃效果样式类 */
/* 基础毛玻璃效果 */
.glass-effect {
    @apply backdrop-blur-sm bg-dark-light/70;
}

/* 轻量级毛玻璃效果 */
.glass-effect-light {
    @apply backdrop-blur-sm bg-dark-light/50;
}

/* 强化毛玻璃效果 */
.glass-effect-strong {
    @apply backdrop-blur-md bg-dark-light/80;
}

/* 导航栏毛玻璃效果 */
.navbar-glass {
    @apply backdrop-blur-md bg-dark/80;
}

/* 卡片毛玻璃效果 */
.card-glass {
    @apply backdrop-blur-sm bg-dark-light/70 border border-white/10 shadow-sm;
}

/* 模态框毛玻璃效果 */
.modal-glass {
    @apply backdrop-blur-sm bg-black/50;
}

/* 侧边栏毛玻璃效果 */
.sidebar-glass {
    @apply backdrop-blur-sm bg-dark-light/90;
}

/* 按钮毛玻璃效果 */
.button-glass {
    @apply backdrop-blur-sm bg-primary/15 transition-all duration-300;
}

.button-glass:hover {
    @apply bg-primary/30;
}

/* 导航菜单美化 */
.nav-menu {
    @apply relative;
}

.nav-menu::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
}

.nav-menu:hover::after {
    @apply w-full;
}

.nav-menu.active {
    @apply text-primary !important;
}

.nav-menu.active::after {
    @apply w-full;
}

/* 移动端菜单美化 */
.mobile-menu-item {
    @apply transition-all duration-300 rounded-lg;
}

.mobile-menu-item:hover {
    @apply bg-primary/10 pl-4;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    @apply w-2 h-2;
}

::-webkit-scrollbar-track {
    @apply bg-dark-light/50;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-500/50 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500/70;
}

/* 文章内容排版样式 */
.prose {
    @apply text-gray-300;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    @apply text-white;
}

.prose a {
    @apply text-primary hover:underline;
}

.prose code {
    @apply bg-dark-lighter px-1.5 py-0.5 rounded text-sm;
}

.prose pre {
    @apply bg-dark-lighter p-4 rounded-lg my-4 overflow-x-auto;
}

.prose pre code {
    @apply bg-transparent p-0 rounded-none text-sm;
}

.prose blockquote {
    @apply border-l-4 border-primary bg-dark-light/50 py-2 px-4 my-4;
}

.prose table {
    @apply w-full my-4 border-collapse;
}

.prose table th, .prose table td {
    @apply border border-gray-700 px-4 py-2;
}

.prose table th {
    @apply bg-dark-lighter text-white;
}

.carousel-container {
  position: relative;
  width: 100%;
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dot.active,
.carousel-dot:hover {
  background-color: white;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel-prev {
  left: 15px;
}

.carousel-next {
  right: 15px;
}

@media (max-width: 768px) {
  .carousel-prev,
  .carousel-next {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
  
  .carousel-prev {
    left: 10px;
  }
  
  .carousel-next {
    right: 10px;
  }
}