/* ============================================
   热门IP类型组件样式（hot.html / index.html 共用）
   ============================================ */

.hot-section {
    padding: 48px 0 60px;
}

.hot-title {
    margin: 0 0 24px;
    font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #2A3142;
}

/* Tab：设计稿 Layout — Horizontal / Hug≈286×48 / Radius 12 / Padding 4 */
.hot-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.hot-tab-group {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: stretch;
    box-sizing: border-box;
    width: max-content;   /* Hug */
    min-width: 286px;
    height: 48px;         /* Hug 48px */
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
}

.hot-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 20px;
    font-size: 14px;
    color: var(--text-gray);
    border-radius: 8px; /* 外 12 - 内边距 4 */
    transition: all 0.25s;
    white-space: nowrap;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

.hot-tab.active {
    background: var(--primary);
    color: var(--white);
    font-weight: 500;
}

.hot-tab:not(.active):hover {
    color: var(--primary);
}

/* 面板切换 */
.hot-panel {
    display: none;
}

.hot-panel.active {
    display: block;
}

/* 卡片网格 */
.hot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ========== 卡片 ==========
 * 标题：仅上左右圆角
 * 内容：上圆角后透出标题同色（body-wrap）
 */
.hot-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    filter: drop-shadow(0 2px 12px rgba(52, 113, 235, 0.12));
    transition: transform 0.2s, filter 0.2s;
}

.hot-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 20px rgba(245, 166, 35, 0.22));
}

.hot-card-head,
.hot-card-body,
.hot-card-body-wrap,
.hot-price-item .price,
.hot-more,
.hot-features .check,
.hot-btn {
    transition: background 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s;
}

/* Inter 仅覆盖拉丁字；中文走后续回退字体，但字号/字重/行高仍按设计稿 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

.hot-card-head {
    padding: 14px 20px;
    font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    border: 1.5px solid transparent;
    border-bottom: none;
}

.hot-card.theme-orange .hot-card-head {
    border-color: var(--border-orange);
}

.hot-card.theme-blue .hot-card-head {
    border-color: var(--border-blue);
}

.hot-card-head.orange {
    background: var(--orange-header);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.06) 8px,
        rgba(255, 255, 255, 0.06) 16px
    );
}

.hot-card-head.blue {
    background: var(--blue-header);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.06) 8px,
        rgba(255, 255, 255, 0.06) 16px
    );
}

.hot-card-head .icon {
    font-size: 16px;
}

/* 包裹层：延续标题背景色，垫在内容区上圆角后面 */
.hot-card-body-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    border: 1.5px solid transparent;
    border-top: none;
}

.hot-card.theme-orange .hot-card-body-wrap {
    background: var(--orange-header);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.06) 8px,
        rgba(255, 255, 255, 0.06) 16px
    );
    border-color: var(--border-orange);
}

.hot-card.theme-blue .hot-card-body-wrap {
    background: var(--blue-header);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.06) 8px,
        rgba(255, 255, 255, 0.06) 16px
    );
    border-color: var(--border-blue);
}

/* 内容区：上左右圆角（后透标题色）；下圆角由 wrap 裁剪呈现 */
.hot-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    border: none;
}

.hot-card-body.orange-bg {
    background: var(--orange-bg);
    border-radius: 14px 14px 0 0;
}

.hot-card-body.blue-bg {
    background: var(--card-blue-bg);
    border-radius: 14px 14px 0 0;
}

/* 价格行 */
.hot-price-list {
    margin-bottom: 4px;
}

.hot-price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-dark);
}

.hot-price-item .country {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
}

.hot-price-item .flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-block;
}

.hot-price-item .price {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hot-price-item .price .num {
    font-weight: 800;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.hot-price-item .price .unit {
    font-weight: 500;
    font-size: 14px;
    margin-left: 1px;
    opacity: 0.92;
}

.hot-price-item .price.orange {
    color: var(--orange);
}

.hot-price-item .price.blue {
    color: var(--primary);
}

/*
 * 更多链接 + 卖点：纵向 Gap 16；文案单行不折行（不再限制 167px 宽）
 */
.hot-extras {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    margin: 12px 0 20px;
    gap: 16px;
    flex: 1 1 auto;
}

.hot-more {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}

.hot-more.orange {
    color: var(--orange);
}

.hot-more.blue {
    color: var(--primary);
}

.hot-more:hover {
    text-decoration: underline;
}

/* display:contents 使 li 参与 .hot-extras 的 gap:16px */
.hot-features {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hot-features li {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-gray);
    white-space: nowrap;
}

.hot-feature-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hot-features .check {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    margin-top: 0;
}

.hot-features .check.orange {
    background: var(--orange);
}

.hot-features .check.blue {
    background: var(--primary);
}

/*
 * 立即购买（默认态）：Fixed 315×45 / Radius 12 / Border 1px
 * Padding 8 56 / Gap 8 / 背景 #FFF / 阴影 #066AED 10%
 */
.hot-btn {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 315px;
    max-width: 100%;
    height: 45px;
    margin: 0 auto;
    padding: 8px 56px;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    border-radius: 12px;
    border: 1px solid #066AED;
    background: #FFFFFF;
    color: #066AED;
    box-shadow: 0 4px 20px rgba(6, 106, 237, 0.1);
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
}

/* 选中区（橙色卡）立即购买：边框/字色/阴影 #EA7832 */
.hot-btn.orange {
    border: 1px solid #EA7832;
    color: #EA7832;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(234, 120, 50, 0.1);
}

.hot-btn.orange:hover {
    background: #EA7832;
    color: #FFFFFF;
    border-color: #EA7832;
    box-shadow: 0 6px 20px rgba(234, 120, 50, 0.22);
}

.hot-btn.blue {
    border-color: #066AED;
    color: #066AED;
    box-shadow: 0 4px 20px rgba(6, 106, 237, 0.1);
}

.hot-btn.blue:hover {
    background: #066AED;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(6, 106, 237, 0.22);
}

.hot-custom-text {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 20px;
    flex: 1;
}

/* 定制化服务：图标卖点列表 */
.hot-custom-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    list-style: none;
    margin: 8px 0 24px;
    padding: 0;
    flex: 1;
}

.hot-custom-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #066AED;
}

.hot-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #066AED;
}

.hot-custom-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== 动态住宅 · 套餐卡 ========== */
.hot-card-package .hot-card-head {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 12px;
    min-height: 72px;
    padding: 16px 18px;
}

.hot-card-package .hot-card-title-text {
    flex: 0 1 auto;
}

.hot-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.hot-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.hot-pkg-headline {
    margin: 8px 0 16px;
    color: var(--text-dark);
    line-height: 1.2;
}

/* 套餐主文案（如「免费领取」）：Inter 600 / 28px / 100% / #2A3142 */
.hot-pkg-main {
    font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 28px;
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0;
    color: #2A3142;
}

.hot-pkg-suffix {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-gray);
}

/* 套餐卡卖点列表：Vertical / Fixed 167 / Hug≈89 / Gap 16 */
.hot-features.hot-pkg-features,
.hot-pkg-features {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    box-sizing: border-box;
    width: 167px;
    max-width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    gap: 16px;
    flex: 0 0 auto;
}

.hot-pkg-features li {
    margin: 0;
    white-space: normal;
    line-height: 1.4;
}

.hot-pkg-features .hot-feature-text {
    white-space: normal;
}

.hot-card-package .hot-btn {
    margin-top: auto;
}

/* 套餐主题色：头/底/勾/按钮 —— wrap 延续标题色，垫住内容区上圆角空隙 */
.hot-card-head.cyan,
.hot-card.theme-cyan .hot-card-body-wrap {
    background-color: #00A2A8;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.06) 8px, rgba(255,255,255,.06) 16px);
    border-color: rgba(51, 182, 188, 0.5);
}

.hot-card-package.theme-cyan .hot-card-head {
    border-radius: 16px 16px 0 0;
}

.hot-card-package.theme-cyan .hot-card-body-wrap {
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

/* 内容区：仅上圆角，后透标题色；379×374 / 白底+#00A2A8 渐变 */
.hot-card-body.cyan-bg,
.hot-card-package .hot-card-body.cyan-bg {
    box-sizing: border-box;
    width: 379px;
    max-width: 100%;
    height: 374px;
    border: none;
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(180deg, rgba(0, 162, 168, 0.1) 0%, rgba(0, 162, 168, 0) 100%),
        #FFFFFF;
}

.hot-features .check.cyan { background: #00A2A8; }
.hot-btn.cyan { border-color: #00A2A8; color: #00A2A8; box-shadow: 0 4px 20px rgba(0,162,168,.12); }
.hot-btn.cyan:hover { background: #00A2A8; color: #fff; }

.hot-card-head.green,
.hot-card.theme-green .hot-card-body-wrap {
    background-color: #2ECC71;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.06) 8px, rgba(255,255,255,.06) 16px);
    border-color: #27AE60;
}
.hot-card-body.green-bg { background: #EAFBF1; }
.hot-features .check.green { background: #2ECC71; }
.hot-btn.green { border-color: #2ECC71; color: #2ECC71; box-shadow: 0 4px 20px rgba(46,204,113,.12); }
.hot-btn.green:hover { background: #2ECC71; color: #fff; }

.hot-card-head.purple,
.hot-card.theme-purple .hot-card-body-wrap {
    background-color: #9B6BFF;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.06) 8px, rgba(255,255,255,.06) 16px);
    border-color: #8A56F5;
}
.hot-card-body.purple-bg { background: #F4EEFF; }
.hot-features .check.purple { background: #9B6BFF; }
.hot-btn.purple { border-color: #9B6BFF; color: #9B6BFF; box-shadow: 0 4px 20px rgba(155,107,255,.12); }
.hot-btn.purple:hover { background: #9B6BFF; color: #fff; }

.hot-card-head.brown,
.hot-card.theme-brown .hot-card-body-wrap {
    background-color: #C4784A;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.06) 8px, rgba(255,255,255,.06) 16px);
    border-color: #A8633A;
}
.hot-card-body.brown-bg { background: #FFF4EC; }
.hot-features .check.brown { background: #C4784A; }
.hot-btn.brown { border-color: #C4784A; color: #C4784A; box-shadow: 0 4px 20px rgba(196,120,74,.12); }
.hot-btn.brown:hover { background: #C4784A; color: #fff; }

.hot-card.theme-cyan .hot-card-head { border-color: rgba(51, 182, 188, 0.5); }
.hot-card.theme-green .hot-card-head { border-color: #27AE60; }
.hot-card.theme-purple .hot-card-head { border-color: #8A56F5; }
.hot-card.theme-brown .hot-card-head { border-color: #A8633A; }

/* 响应式 */
@media (max-width: 992px) {
    .hot-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .hot-title {
        font-size: 22px;
    }

    .hot-tab-group {
        min-width: 0;
        width: 100%;
        max-width: 286px;
    }

    .hot-tab {
        padding: 0 12px;
        font-size: 13px;
    }

    .hot-section {
        padding: 32px 0 40px;
    }
}