/* 侧边栏推荐组件样式 */
.sidebar-recommendations {
    position: sticky;
    top: 2rem;
    max-width: 300px;
}

/* 推荐卡片基础样式 */
.recommendation-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.recommendation-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* 渐变背景样式 */
.gradient-green {
    background: linear-gradient(to right, rgb(240 253 244), rgb(220 252 231));
    border: 1px solid rgb(187 247 208);
}

.gradient-purple {
    background: linear-gradient(to right, rgb(250 245 255), rgb(243 232 255));
    border: 1px solid rgb(196 181 253);
}

/* 标题样式 */
.recommendation-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.recommendation-title.green {
    color: rgb(22 101 52);
}

.recommendation-title.purple {
    color: rgb(107 33 168);
}

/* 描述文字样式 */
.recommendation-description {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.recommendation-description.green {
    color: rgb(21 128 61);
}

.recommendation-description.purple {
    color: rgb(126 34 206);
}

/* 产品卡片样式 */
.product-card {
    background: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.product-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-name {
    font-weight: 700;
    color: rgb(31 41 55);
}

.product-subtitle {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.product-tag {
    font-weight: 700;
    font-size: 0.875rem;
}

.product-tag.recommend {
    color: rgb(251 146 60);
}

.product-tag.hot {
    color: rgb(239 68 68);
}

/* 二维码区域样式 */
.qr-code-area {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(249 250 251);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.75rem;
}

.qr-code-container {
    text-align: center;
}

.qr-code-placeholder {
    width: 5rem;
    height: 5rem;
    background: white;
    border: 2px solid rgb(209 213 219);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.qr-code-placeholder .icon {
    color: rgb(156 163 175);
    font-size: 1.5rem;
}

.qr-code-text {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

/* 按钮样式 */
.recommendation-button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.recommendation-button.green {
    background: rgb(22 163 74);
    color: white;
}

.recommendation-button.green:hover {
    background: rgb(21 128 61);
}

.recommendation-button.purple {
    background: rgb(147 51 234);
    color: white;
}

.recommendation-button.purple:hover {
    background: rgb(126 34 206);
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .sidebar-recommendations {
        position: static;
        max-width: 100%;
    }
    
    .recommendation-card {
        margin-bottom: 1rem;
    }
}

/* 左侧布局样式 */
.left-sidebar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem;
}

/* 当需要为左侧侧边栏留出空间时 */
.main-content-with-left-sidebar {
    margin-left: 300px;
}

@media (max-width: 1280px) {
    .left-sidebar {
        position: static;
        transform: none;
        width: 100%;
        max-height: none;
        padding: 0.5rem;
    }
    
    .main-content-with-left-sidebar {
        margin-left: 0;
    }
}