/* 应用详情页转化按钮（免费试用 / 在线咨询）强化样式
 * 目的：客户进入详情页第一眼就能看到并点击这两个入口。
 * 背景：按钮由 CDN 打包的前端 React 渲染到 #app-hub-pc-buttons / #app-hub-mobile-buttons，
 *       「在线咨询」是 Popover 的触发元素（div，样式写在内联 style 上），
 *       因此这里用 !important 覆盖内联样式与 antd 运行时注入的样式。
 * 注意：若前端把「在线咨询」改成 button 元素，需同步调整下面的 `> div` 选择器。 */

.detail_app_hub_product_main_top_right_buttons {
    margin-top: 24px !important;
    /* 不加背景色块，只留按钮本身 */
    width: 100% !important;
}

/* 背景条内的按钮行不额外缩进，且撑满背景条，居中才有可用空间 */
.detail_app_hub_product_main_top_right_buttons > #app-hub-pc-buttons,
.detail_app_hub_product_main_top_right_buttons > #app-hub-mobile-buttons {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app_hub_pc_buttons,
.app_hub_mobile_buttons {
    gap: 16px !important;
    align-items: center !important;
    /* 按钮组靠左，与上方标题、描述文字左对齐 */
    justify-content: flex-start !important;
}

/* 同一行按钮统一加大加粗，保证高度一致 */
.app_hub_pc_buttons .ant-btn,
.app_hub_mobile_buttons .ant-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    padding: 0 30px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* 免费试用：主 CTA，蓝色渐变 + 阴影 */
.app_hub_pc_buttons .ant-btn-primary,
.app_hub_mobile_buttons .ant-btn-primary {
    color: #FFFFFF !important;
    border: none !important;
    background: linear-gradient(90deg, #1890FF 0%, #3B7BFF 100%) !important;
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app_hub_pc_buttons .ant-btn-primary:hover,
.app_hub_mobile_buttons .ant-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(24, 144, 255, 0.45) !important;
}

/* 其它次要按钮（如立即订购）：蓝色描边，视觉重量与主 CTA 相当 */
.app_hub_pc_buttons .ant-btn:not(.ant-btn-primary),
.app_hub_mobile_buttons .ant-btn:not(.ant-btn-primary) {
    color: #1890FF !important;
    border: 2px solid #1890FF !important;
    background: #F0F7FF !important;
}

/* 在线咨询：Popover 触发元素（div），改成醒目的橙色描边按钮 */
.app_hub_pc_buttons > div,
.app_hub_mobile_buttons > div,
.app_hub_pc_buttons > span > div,
.app_hub_mobile_buttons > span > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 46px !important;
    padding: 0 28px !important;
    border: 2px solid #FF6A00 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #FF6A00 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.app_hub_pc_buttons > div:hover,
.app_hub_mobile_buttons > div:hover,
.app_hub_pc_buttons > span > div:hover,
.app_hub_mobile_buttons > span > div:hover {
    background: #FF6A00 !important;
    color: #FFFFFF !important;
}

/* hover 变实心橙底后，图标反色成白色，保持清晰 */
.app_hub_pc_buttons > div:hover img,
.app_hub_mobile_buttons > div:hover img,
.app_hub_pc_buttons > span > div:hover img,
.app_hub_mobile_buttons > span > div:hover img {
    filter: brightness(0) invert(1);
}

.app_hub_pc_buttons > div > div,
.app_hub_mobile_buttons > div > div {
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.app_hub_pc_buttons > div img,
.app_hub_mobile_buttons > div img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
}

.app_hub_pc_buttons .ant-btn img,
.app_hub_mobile_buttons .ant-btn img {
    width: 18px !important;
    height: 18px !important;
}

/* 在线咨询弹出的二维码放大一倍（默认 100x100 -> 200x200） */
#custom_bottom_popover_global .ant-qrcode {
    width: 200px !important;
    height: 200px !important;
    padding: 8px !important;
}

#custom_bottom_popover_global .ant-qrcode canvas,
#custom_bottom_popover_global .ant-qrcode svg {
    width: 200px !important;
    height: 200px !important;
}

@media (max-width: 992px) {
    .detail_app_hub_product_main_top_right_buttons {
        margin-top: 14px !important;
    }

    .app_hub_pc_buttons,
    .app_hub_mobile_buttons {
        gap: 10px !important;
    }

    .app_hub_pc_buttons .ant-btn,
    .app_hub_mobile_buttons .ant-btn,
    .app_hub_pc_buttons > div,
    .app_hub_mobile_buttons > div,
    .app_hub_pc_buttons > span > div,
    .app_hub_mobile_buttons > span > div {
        height: 42px !important;
        padding: 0 20px !important;
        font-size: 15px !important;
    }
}