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

/* 自定义工具类（放在 @layer utilities 内部） */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  /* 侧边栏样式 */
  .floating-btn {
      @apply fixed right-4 top-[calc(50%+100px)] -translate-y-1/2 bg-gradient-to-br from-orange-500 to-orange-700 text-white font-bold py-3 px-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl z-50;
  }
  .floating-tg {
      @apply fixed right-4 top-[calc(50%+100px)] -translate-y-1/2 bg-blue-500 text-white font-bold py-3 px-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl z-50 mt-16;
  }
  .floating-whatsapp {
      @apply fixed right-4 top-[calc(50%+100px)] -translate-y-1/2 bg-green-500 text-white font-bold py-3 px-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl z-50 mt-32;
  }
  .btn-mobile {
      @apply px-3 py-3 text-lg;
  }
  .btn-desktop {
      @apply px-6 py-3 text-base;
  }
  .btn-width-control {
      @apply min-w-[180px] md:min-w-[170px] flex items-center justify-center whitespace-nowrap;
  }

  /* 模态框样式 */
  .glass-effect {
      @apply bg-white/40 backdrop-blur-lg;
  }
  .form-input-focus {
      @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
  }
  .error-message {
      @apply text-error text-sm mt-1 hidden transition-opacity duration-300;
  }
  .error-message.active {
      @apply block;
  }

  /* 移动端适配（放在 @layer utilities 内部） */
  @screen md {
    .btn-width-control {
      min-width: 20%;
    }
  }

  /* 提交成功页面样式 */
  .btn-hover {
    @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
  }
  .card-effect {
    @apply bg-white rounded-lg shadow-sm transition-all duration-300 hover:shadow-md;
  }
  .pulse-effect {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

/* 动画关键帧定义（放在 @layer 外部） */
@keyframes pulse {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0.8;
  }
}