/* ==========================================================================
   产品卡片样式 (Product Card Styles)
   基于Card-BG.png尺寸比例设计(385x501, 宽高比≈1:1.3)
   ========================================================================== */

/**
 * 产品卡片容器 - 使用padding-bottom技术保持Card-BG.png比例
 * 宽高比: 385:501 ≈ 1:1.3013 (padding-bottom: 130.13%)
 */
.product-card {
    position: relative;
    width: 100%;
    padding-bottom: 130.13%; /* 501/385 = 1.3013 */
    background: url('../../ui/Card-BG.webp') no-repeat center center;
    background-size: contain;
    overflow: hidden;
    cursor: pointer;
}



/**
 * 产品卡片内容容器 - 绝对定位在比例容器内
 */
.product-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/**
 * 产品图片区域 - 宽度等于父级-4px，保持16:12比例
 */
.product-image {
    width: calc(100% - 4px); /* 宽度等于父级宽度-4px */
    padding-bottom: 75%; /* 16:12比例，即12/16*100% = 75% */
    margin: 10px 1px 1px 2px; /* margin-top:10px; margin-right:1px; margin-bottom:1px; margin-left:2px */
    background: linear-gradient(45deg, #1a1f2a, #0d1015);
    position: relative;
    overflow: hidden;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 改为contain确保图片完整显示，不裁切不拉伸 */
}

/* 为了保持分类图标和背景效果的位置，需要调整伪元素定位 */
.product-image::before,
.product-image::after {
    position: absolute;
    z-index: 1;
}

/* 分类图标样式 - 右上角图标 */
.product-image::before {
    content: '';
    position: absolute;
    top: var(--padding-sm);
    right: var(--padding-sm);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url('../../icons/new-category-sprite.webp');
    background-repeat: no-repeat;
    background-size: 100px var(--icon-size-sm); /* 雪碧图总尺寸：5个图标 * 20px */
    z-index: 2;
}



/* 护航图标 */
.product-card[data-category="escort"] .product-image::before {
    background-position: 0px center;
}

/* 陪玩图标 */
.product-card[data-category="companion"] .product-image::before {
    background-position: -20px center;
}

/* 跑刀图标 */
.product-card[data-category="grinding"] .product-image::before {
    background-position: -40px center;
}

/* 代肝图标 */
.product-card[data-category="proxy"] .product-image::before {
    background-position: -60px center;
}

/* 背景渐变样式 */
.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(15, 247, 150, 0.1) 100%);
    z-index: 1;
}



.product-type-icon {
    font-size: var(--icon-size-xl);
    color: #0ff796;
    z-index: 2;
}

/**
 * 产品内容区域 - 2/8开布局，product-header占8份，product-stats占2份
 */
.product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: 0; /* 移除子元素间距，由flex比例控制 */
}

.product-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    flex: 8; /* 占8份 */
    justify-content: space-between; /* 内容在垂直方向均匀分布 */
}

.product-info {
    width: 100%;
}

.product-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #0ff796;
    line-height: 1.2;
    text-align: left;
    margin: 0 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
}

.product-category {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(15, 247, 150, 0.1); /* 默认颜色 */
    padding: var(--spacing-xs) var(--spacing-lg);
    display: inline-block;
    white-space: nowrap; /* 防止文字换行 */
    border-radius: var(--border-radius-lg); /* 添加圆角 */
    min-width: 40px; /* 设置最小宽度确保能显示2个汉字 */
    text-align: center; /* 文字居中 */
}

/* 护航类型 - 对应雪碧图第一图标的颜色：红色 */
.product-card[data-category="escort"] .product-category {
    background: rgba(255, 102, 102, 0.2);
    color: #ff6666;
}

/* 陪玩类型 - 对应雪碧图第二图标的颜色：橙色 */
.product-card[data-category="companion"] .product-category {
    background: rgba(255, 153, 51, 0.2);
    color: #ff9933;
}

/* 跑刀类型 - 对应雪碧图第三图标的颜色：紫色 */
.product-card[data-category="grinding"] .product-category {
    background: rgba(170, 102, 204, 0.2);
    color: #aa66cc;
}

/* 代肝类型 - 对应雪碧图第四图标的颜色：蓝色 */
.product-card[data-category="proxy"] .product-category {
    background: rgba(66, 135, 245, 0.2);
    color: #4287f5;
}

.product-price {
    text-align: right;
}

.price-amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-end; /* 右对齐 */
    gap: var(--spacing-xss);
}

.price-symbol {
    font-size: var(--font-size-base);
    color: #0ff796;
    font-weight: 500;
}

.price-number {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #0ff796;
    line-height: 1.2;
    font-family: var(--font-latin), sans-serif;
}

.price-unit {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    margin-left: var(--spacing-xs);
    font-family: var(--font-latin), sans-serif;
}

.product-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: var(--spacing-sm);
    flex: 2; /* 占2份 */
    align-items: flex-end; /* 内容在底部对齐 */
}

.category-container {
    flex: 2; /* 占2份 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 确保左对齐 */
    white-space: nowrap; /* 防止文字换行 */
    min-width: 60px; /* 设置最小宽度确保能显示2个汉字 */
    overflow: visible; /* 允许内容正常显示 */
}

.category-container .product-category {
    padding: var(--spacing-xss); /* 使用最小间距 */
}

.consultation-container {
    flex: 8; /* 占8份 */
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    align-items: center;
}

.consultation-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-xs);
    font-family: var(--font-latin), sans-serif;
}

.consultation-icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url('../../icons/new-category-sprite.webp');
    background-repeat: no-repeat;
    background-size: 100px var(--icon-size-sm); /* 雪碧图总尺寸：5个图标 * 20px */
    background-position: -80px center; /* 咨询图标在雪碧图的第五个位置，从-80px开始 */
    display: inline-block;
}



/* 平板设备响应式适配已移至 responsive-tablet.css */

/* ==================== 产品详情模态框样式 ==================== */

.product-detail-header {
    text-align: center;
    margin-bottom: 0px;
}

.product-detail-image {
    width: 100%;
    padding-bottom: 75%; /* 16:12比例，即12/16*100% = 75% */
    background: linear-gradient(45deg, #1a1f2a, #0d1015);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--padding-sm);
    margin-top: 0px;
    position: relative;
    overflow: hidden;
}

/* 产品详情图片样式 */
.product-detail-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}

.product-detail-icon {
    font-size: var(--icon-size-xxl);
    color: #0ff796;
}

.product-detail-info {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--padding-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--padding-sm);
}

.product-detail-price {
    text-align: center;
}

.product-description {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--margin-sm);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--padding-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}

.product-description h4 {
    color: #0ff796;
    margin-bottom: var(--margin-sm);
    font-size: var(--font-size-lg);
}

.product-description p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* 富文本内容样式 */
.product-description .rich-text-content {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    overflow-y: auto;
    flex: 1;
    padding-right: var(--padding-sm); /* 为滚动条留出空间 */
}

/* 富文本常见元素样式 */
.product-description .rich-text-content h1,
.product-description .rich-text-content h2,
.product-description .rich-text-content h3,
.product-description .rich-text-content h4,
.product-description .rich-text-content h5,
.product-description .rich-text-content h6 {
    color: #0ff796;
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.product-description .rich-text-content h1 { font-size: var(--font-size-xxl); }
.product-description .rich-text-content h2 { font-size: var(--font-size-xl); }
.product-description .rich-text-content h3 { font-size: var(--font-size-lg); }
.product-description .rich-text-content h4 { font-size: var(--font-size-base); }
.product-description .rich-text-content h5 { font-size: var(--font-size-sm); }
.product-description .rich-text-content h6 { font-size: var(--font-size-xs); }

.product-description .rich-text-content p {
    margin: var(--spacing-sm) 0;
}

.product-description .rich-text-content ul,
.product-description .rich-text-content ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-md);
}

.product-description .rich-text-content li {
    margin: var(--spacing-xs) 0;
}

.product-description .rich-text-content a {
    color: #0ff796;
    text-decoration: underline;
}

.product-description .rich-text-content a:hover {
    opacity: 0.8;
}

.product-description .rich-text-content strong,
.product-description .rich-text-content b {
    color: #fff;
    font-weight: bold;
}

.product-description .rich-text-content blockquote {
    border-left: 3px solid #0ff796;
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.product-description .rich-text-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-xss) var(--padding-xs);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-mono), monospace;
    color: #0ff796;
}

.product-description .rich-text-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

.product-description .rich-text-content pre code {
    padding: 0;
    background: none;
}

.product-description .rich-text-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.product-description .rich-text-content th,
.product-description .rich-text-content td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
}

.product-description .rich-text-content th {
    background: rgba(15, 247, 150, 0.1);
    color: #0ff796;
}

.product-description .rich-text-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    margin: var(--margin-sm) 0;
}

.product-description .rich-text-content hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--margin-xl) 0;
}