/**
 * Crystal Theme Components
 * 现代化组件样式系统
 */

/* ==========================================================================
   按钮组件
   ========================================================================== */

.btn {
  @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-3 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-primary {
  @apply bg-crystal-500 text-white hover:bg-crystal-600 focus:ring-crystal-200 shadow-sm hover:shadow-md;
}

.btn-secondary {
  @apply bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-200 border border-slate-200;
}

.btn-outline {
  @apply bg-transparent text-crystal-600 border border-crystal-300 hover:bg-crystal-50 focus:ring-crystal-200;
}

.btn-ghost {
  @apply bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-200;
}

.btn-sm {
  @apply px-4 py-2 text-xs;
}

.btn-lg {
  @apply px-8 py-4 text-base;
}

/* ==========================================================================
   卡片组件
   ========================================================================== */

.card {
  @apply bg-white rounded-2xl shadow-sm border border-slate-200/60 overflow-hidden transition-all duration-200;
}

.card-hover {
  @apply hover:shadow-lg hover:-translate-y-1;
}

.card-premium {
  @apply bg-gradient-to-br from-white to-slate-50/50 border-slate-300/60 shadow-md;
}

.card-header {
  @apply px-6 py-4 border-b border-slate-200/60 bg-slate-50/50;
}

.card-body {
  @apply px-6 py-5;
}

.card-footer {
  @apply px-6 py-4 border-t border-slate-200/60 bg-slate-50/30;
}

/* ==========================================================================
   表单组件
   ========================================================================== */

.form-input {
  @apply w-full px-4 py-3 border border-slate-300/60 rounded-xl bg-slate-50/50 text-slate-700 placeholder-slate-400 focus:border-crystal-300 focus:ring-2 focus:ring-crystal-200 focus:bg-white transition-all duration-200;
}

.form-select {
  @apply form-input pr-10 cursor-pointer;
}

.form-textarea {
  @apply form-input resize-none;
}

.form-label {
  @apply block text-sm font-medium text-slate-700 mb-2;
}

.form-help {
  @apply text-xs text-slate-500 mt-1;
}

.form-error {
  @apply text-xs text-red-600 mt-1;
}

.form-group {
  @apply space-y-2;
}

/* ==========================================================================
   导航组件
   ========================================================================== */

.nav-link {
  @apply px-4 py-2 text-slate-600 hover:text-crystal-600 font-medium rounded-lg transition-all duration-200 hover:bg-crystal-50;
}

.nav-link-active {
  @apply text-crystal-600 bg-crystal-50;
}

.dropdown-menu {
  @apply absolute mt-2 bg-white rounded-2xl shadow-xl border border-slate-200/60 backdrop-blur-sm opacity-0 invisible transition-all duration-200 overflow-hidden;
}

.dropdown-item {
  @apply flex items-center px-4 py-3 text-slate-600 hover:bg-slate-50 hover:text-crystal-600 transition-colors text-sm;
}

/* ==========================================================================
   徽章和标签
   ========================================================================== */

.badge {
  @apply inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-full;
}

.badge-primary {
  @apply bg-crystal-100 text-crystal-800;
}

.badge-success {
  @apply bg-emerald-100 text-emerald-800;
}

.badge-warning {
  @apply bg-amber-100 text-amber-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-outline {
  @apply border border-current bg-transparent;
}

/* ==========================================================================
   状态指示器
   ========================================================================== */

.loading {
  @apply relative overflow-hidden;
}

.loading::after {
  content: '';
  @apply absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse;
}

.skeleton {
  @apply bg-slate-200 rounded animate-pulse;
}

/* ==========================================================================
   商品卡片专用组件
   ========================================================================== */

.product-card {
  @apply card card-hover group cursor-pointer;
}

.product-image {
  @apply relative aspect-square overflow-hidden bg-slate-100;
}

.product-image img {
  @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-105;
}

.product-badge {
  @apply absolute top-3 left-3 badge badge-danger z-10;
}

.product-actions {
  @apply absolute top-3 right-3 flex flex-col space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200;
}

.product-action {
  @apply w-10 h-10 bg-white/90 hover:bg-white rounded-full flex items-center justify-center text-slate-600 hover:text-crystal-600 shadow-sm hover:shadow-md transition-all duration-200;
}

.product-info {
  @apply card-body;
}

.product-title {
  @apply text-lg font-medium text-slate-900 mb-2 line-clamp-2 group-hover:text-crystal-600 transition-colors;
}

.product-price {
  @apply flex items-center space-x-2;
}

.product-price-current {
  @apply text-xl font-bold text-crystal-600;
}

.product-price-original {
  @apply text-sm text-slate-400 line-through;
}

.product-rating {
  @apply flex items-center space-x-1 text-amber-400;
}

/* ==========================================================================
   通知和提示组件
   ========================================================================== */

.alert {
  @apply p-4 rounded-xl border-l-4 flex items-start space-x-3;
}

.alert-info {
  @apply bg-blue-50 border-blue-400 text-blue-800;
}

.alert-success {
  @apply bg-emerald-50 border-emerald-400 text-emerald-800;
}

.alert-warning {
  @apply bg-amber-50 border-amber-400 text-amber-800;
}

.alert-error {
  @apply bg-red-50 border-red-400 text-red-800;
}

.toast {
  @apply fixed bottom-4 right-4 max-w-sm bg-white rounded-xl shadow-lg border border-slate-200 p-4 z-50 transform translate-x-full transition-transform duration-300;
}

.toast.show {
  @apply translate-x-0;
}

/* ==========================================================================
   模态框组件
   ========================================================================== */

.modal-overlay {
  @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 opacity-0 invisible transition-all duration-200;
}

.modal-overlay.active {
  @apply opacity-100 visible;
}

.modal {
  @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-hidden scale-95 transition-transform duration-200;
}

.modal.active {
  @apply scale-100;
}

.modal-header {
  @apply px-6 py-4 border-b border-slate-200 flex items-center justify-between;
}

.modal-title {
  @apply text-lg font-semibold text-slate-900;
}

.modal-close {
  @apply p-2 text-slate-400 hover:text-slate-600 rounded-lg transition-colors;
}

.modal-body {
  @apply px-6 py-5 overflow-y-auto;
}

.modal-footer {
  @apply px-6 py-4 border-t border-slate-200 flex items-center justify-end space-x-3;
}

/* ==========================================================================
   实用工具类
   ========================================================================== */

.glass-effect {
  @apply bg-white/70 backdrop-blur-md border border-white/20;
}

.gradient-text {
  @apply bg-gradient-to-r from-crystal-600 to-purple-600 bg-clip-text text-transparent;
}

.divider {
  @apply relative my-8;
}

.divider::before {
  content: '';
  @apply absolute top-1/2 left-0 w-full h-px bg-slate-200;
}

.divider-text {
  @apply relative bg-white px-4 text-sm text-slate-500 font-medium;
}

/* ==========================================================================
   响应式工具
   ========================================================================== */

.container-responsive {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.grid-responsive-wide {
  @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8;
}

/* ==========================================================================
   动画增强
   ========================================================================== */

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   打印样式
   ========================================================================== */

@media print {
  .no-print {
    display: none !important;
  }
  
  .card {
    @apply shadow-none border-slate-300;
  }
  
  .btn {
    @apply bg-transparent border border-slate-300 text-slate-900;
  }
}

/* ==========================================================================
   英雄区域图片滑动组件
   ========================================================================== */

.crystal-hero-slider {
  @apply relative select-none;
}

/* 滑动图片容器 */
.crystal-hero-slider .slider-container {
  @apply relative aspect-square rounded-2xl overflow-hidden;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* 滑动图片项 */
.crystal-hero-slider .slider-item {
  @apply absolute inset-0 transition-all duration-700 ease-out;
}

.crystal-hero-slider .slider-item img {
  @apply w-full h-full object-cover;
  transition: transform 0.7s ease-out;
}

.crystal-hero-slider .slider-item:hover img {
  @apply transform scale-105;
}

/* 控制按钮 */
.crystal-hero-slider .slider-control {
  @apply w-10 h-10 bg-white/90 backdrop-blur-sm rounded-full shadow-lg;
  @apply hover:bg-white hover:shadow-xl transition-all duration-200;
  @apply flex items-center justify-center;
}

.crystal-hero-slider .slider-control:hover {
  @apply scale-110;
}

.crystal-hero-slider .slider-control i {
  @apply text-gray-600 transition-colors duration-200;
}

.crystal-hero-slider .slider-control:hover i {
  @apply text-crystal-600;
}

/* 指示点 */
.crystal-hero-slider .slider-indicator {
  @apply w-2.5 h-2.5 rounded-full transition-all duration-200 cursor-pointer;
}

.crystal-hero-slider .slider-indicator.active {
  @apply bg-white shadow-lg;
}

.crystal-hero-slider .slider-indicator.inactive {
  @apply bg-white/50 hover:bg-white/75;
}

/* 渐变遮罩效果 */
.crystal-hero-slider .gradient-overlay {
  @apply absolute inset-0 pointer-events-none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 50%,
    transparent 100%
  );
}

/* 品质认证标签 */
.crystal-hero-slider .quality-badge {
  @apply absolute top-6 right-6 bg-white/95 backdrop-blur-sm rounded-xl p-3 shadow-lg;
  @apply transition-all duration-300 hover:scale-105;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .crystal-hero-slider .slider-control {
    @apply w-8 h-8;
  }
  
  .crystal-hero-slider .quality-badge {
    @apply top-4 right-4 p-2;
  }
}