/* idc_cloud_server_sales/frontend/css/style.css */
:root {
  --primary: #3B82F6;
  --secondary: #10B981;
  --accent: #6366F1;
  --dark: #1E293B;
  --light: #F8FAFC;
}

/* 主页产品展示区样式 */
.home-products {
  animation: fadeInUp 1s ease;
}

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

.home-product-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.home-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 产品列表页专属样式 */
.products-page {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.region-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.region-tab {
  padding: 0.75rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.1);
  color: #E5E7EB;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.region-tab:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.region-tab.active {
  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  color: white;
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
  border-color: transparent;
}

.region-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.region-content.active {
  display: block;
}

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

/* 产品比较区域样式 */
.compare-section {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.5s ease;
}

.compare-table {
  border-collapse: separate;
  border-spacing: 0;
}

.compare-table th, .compare-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.compare-table tr:last-child td {
  border-bottom: none;
}

/* 分页导航样式 */
.pagination {
  display: flex;
  justify-content: center;
}

.pagination a {
  margin: 0 0.25rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: rgba(59, 130, 246, 0.1);
}

.pagination a.active {
  background: var(--primary);
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .region-tabs {
    flex-direction: column;
    align-items: center;
  }

  .region-tab {
    margin: 0.25rem 0;
    width: 80%;
    text-align: center;
  }

  .product-card:hover {
    transform: none;
  }
  
  .product-card:hover .product-card-inner {
    transform: none;
  }
  
  .product-card-front, .product-card-back {
    position: relative;
    backface-visibility: visible;
  }
  
  .product-card-back {
    transform: none;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  }
}

/* 保持原有动画效果 */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

 .billing-options {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .billing-select, .quantity-input {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            width: 100%;
            transition: all 0.3s ease;
        }
        .billing-select:focus, .quantity-input:focus {
            outline: none;
            border-color: #3B82F6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }
        
        /*cart css*/
        /* 自定义背景色 */
.bg-gray-750 {
    background-color: #1e2234;
}

/* 滑块样式美化 */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #2d3748;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3182ce;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #2b6cb0;
}

/* 表格样式增强 */
table {
    border-collapse: separate;
    border-spacing: 0;
}

.package-item {
    transition: background-color 0.2s ease;
}

.package-item.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: #3182ce;
    --tw-ring-offset-width: 0px;
}

/* 确保在移动视图下表格也能良好展示 */
@media (max-width: 640px) {
    .container1 {
        padding: 2rem;
    }
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}
@layer utilities {
  .scrollbar-no-arrows {
    /* 整个滚动条 */
    &::-webkit-scrollbar {
      width: 8px; /* 竖向宽度 */
      height: 8px; /* 横向高度 */
    }

    /* 去掉上下箭头按钮（关键） */
    &::-webkit-scrollbar-button {
      display: none;
    }

    /* 轨道 */
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    /* 滑块 */
    &::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      border-radius: 4px;
      &:hover {
        background-color: #a8a8a8;
      }
    }

    /* Firefox：直接无箭头，只控制粗细和颜色 */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }
}
/* 只给 range 用，不污染全局 */
input[type="range"].slider-color {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  background: linear-gradient(to right, #3b82f6 var(--p, 0%), #e5e7eb var(--p, 0%));
}

input[type="range"].slider-color::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
}

input[type="range"].slider-color::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
}
 .toast-container {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
    }
    .toast-item {
      display: flex;
      align-items: center;
      background: #fef0f0;
      color: #f56c6c;
      padding: 12px 20px;
      border-radius: 4px;
      border: 1px solid #fbc4c4;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      animation: slideDown 0.3s ease;
    }
    .toast-icon {
      width: 24px;
      height: 24px;
      background: #f56c6c;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 10px;
    }
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }