/* =====================================================
  比赛对冲页面样式
  基于 home.css 视觉体系扩展：白色圆角卡片、黑灰白基调
  ===================================================== */

/* 卡片容器 */
.hedging-container {
    padding: 10px 30px 40px;
    background-color: var(--main-bg);
    min-height: calc(100vh - 62px);
}

/* 标题区 + 操作按钮：同一行底部对齐 */
.hedging-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* 卡片上方操作按钮 */
.h-toolbar {
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    /* 底部留出 worldcup-intro 的 padding 30px 并下移 20px；右侧留 30px 与卡片右缘对齐 */
    margin: 0 30px 10px 0;
}

.h-toolbar-btn {
    width: 100px;
    height: 35px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

/* 黑色按钮 */
.h-toolbar-btn.h-toolbar-dark {
    background: #222222;
    color: #fff;
}

.h-toolbar-btn.h-toolbar-dark:hover {
    background: #000;
}

/* 灰色带边框按钮 */
.h-toolbar-btn.h-toolbar-outline {
    background: #f8f9fb;
    color: #444;
    border: 0.8px solid #bbb;
}

.h-toolbar-btn.h-toolbar-outline:hover {
    border-color: #888;
    background: #f0f1f4;
}

/* 单个对冲卡片：通栏，一行一个（视觉效果对齐比赛推荐卡片） */
.hedging-card {
    background: #fff;
    border: 0.8px solid #eae5e0;
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.hedging-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.3);
}

/* ============ 卡片头部：赛事标题 + 右侧主盘口/独赢标签 ============ */
.h-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-top: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.h-match-title {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    line-height: 1.4;
}

.h-match-title .h-match-index {
    color: #666;
    font-weight: 600;
    margin-right: 6px;
}

.h-match-title .h-match-time {
    font-size: 13px;
    color: #999;
    font-weight: 400;
    margin-left: 8px;
}

.h-header-tags {
    display: none;
    gap: 10px;
    font-size: 13px;
    color: #666;
}

.h-header-tags .h-tag-active {
    color: #222;
    font-weight: 700;
    border-bottom: 2px solid #222;
    padding-bottom: 2px;
}

/* ============ 卡片主体：三列（竞彩30%/皇冠40%/利润20%） ============ */
.h-card-body {
    display: grid;
    grid-template-columns: 30% 40% 20%;
    column-gap: 5%;
    row-gap: 16px;
    align-items: stretch;
}

/* 通用模块标题 */
.h-section-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 0;
    font-weight: 500;
}

/* 赔率按钮（首页风格）：上文字 + 下数字 */
.h-odds-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border: 0.8px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 54px;
}

.h-odds-btn:hover {
    background: var(--gray-100);
    border-color: #999;
}

.h-odds-btn span {
    font-size: 11px;
    color: #666;
}

.h-odds-btn b {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

/* 高亮推荐项：黑色背景，无边框 */
.h-odds-btn.active,
.h-odds-btn.active:hover {
    background: #222222;
    border: none;
    color: #fff;
}

.h-odds-btn.active span,
.h-odds-btn.active b {
    color: #fff;
}

/* 左侧：竞彩赔率（内容贴底，与皇冠区底部对齐） */
.h-jc-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
}

.h-jc-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.h-jc-handicap {
    width: 26px;
    font-size: 12px;
    color: #999;
}

.h-jc-handicap .h-jc-water {
    color: #c03a2c;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-jc-odds {
    display: flex;
    gap: 8px;
    flex: 1;
}

/* 竞彩赔率电脑端与手机端一样撑满容器 */
.h-jc-odds .h-odds-btn {
    flex: 1;
    min-width: 0;
}

/* 中间：皇冠赔率（让球盘口 + 独赢左右并排） */
.h-hg-box {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    transform: translateX(50px);
}

.h-hg-section {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h-hg-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.h-hg-label {
    width: 22px;
    font-size: 12px;
    color: #999;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-hg-odds {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

/* 主盘口与独赢标题：与各自按钮组居中对齐，间距与按钮间距一致 */
.h-hg-section .h-section-label,
.h-1x2-box .h-section-label {
    text-align: center;
    margin-bottom: 0;
}

/* 主盘口标题：水平居中于最右列（+0.25）按钮上方 */
.h-hg-section .h-section-label {
    transform: translateX(123px);
}

/* 让球显示3组：严格固定宽度100px */
.h-asian-btn {
    flex: 0 0 100px;
    padding: 7px 4px;
}

.h-asian-btn .h-asian-line {
    font-size: 12px;
    color: #666;
}

.h-asian-btn .h-asian-water {
    font-size: 14px;
    font-weight: 700;
    color: #c0392b;
}

.h-asian-btn.active .h-asian-line,
.h-asian-btn.active .h-asian-water {
    color: #fff;
}

/* 独赢区：在让球右侧上下排列 */
.h-1x2-box {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h-1x2-row {
    display: flex;
}

.h-1x2-btn {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
}

.h-1x2-btn .h-1x2-label {
    font-size: 13px;
    color: #666;
}

.h-1x2-btn .h-1x2-value {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.h-1x2-btn.active .h-1x2-label,
.h-1x2-btn.active .h-1x2-value {
    color: #fff;
}

/* ============ 利润 / 利润百分比模块 ============ */
.h-profit-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.h-profit-box,
.h-rate-box {
    flex: 1;
    min-width: 0;
    background: #fafafa;
    border: 0.8px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.h-box-title {
    font-size: 12px;
    color: #999;
}

.h-profit-value {
    font-size: 13px;
    font-weight: 700;
    color: #27ae60;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
    overflow-wrap: break-word;
}

.h-rate-value {
    font-size: 16px;
    font-weight: 700;
    color: #27ae60;
}

/* ============ 卡片底部：盘口说明 + 计算按钮 ============ */
.h-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.h-footer-left {
    font-size: 13px;
    color: #666;
}

.h-footer-left .h-mark {
    color: #222;
    font-weight: 600;
    margin-right: 6px;
}

.h-footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.h-profit {
    font-size: 16px;
    font-weight: 700;
    color: #27ae60;
}

.h-calc-btn {
    padding: 7px 18px;
    width: 100px;
    font-size: 13px;
    color: #fff;
    background: #222222;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
}

.h-calc-btn:hover {
    background: #000;
}

/* ============ 空状态与加载更多 ============ */
.h-empty {
    text-align: center;
    padding: 60px 20px;
    color: #95a5a6;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #ddd;
}

.h-loadmore {
    text-align: center;
    margin-top: 20px;
}

.h-loadmore button {
    padding: 10px 32px;
    font-size: 14px;
    color: #fff;
    background: #222;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* ============ 手机端适配：三栏 → 单列堆叠 ============ */
@media (max-width: 768px) {
    .hedging-container {
        padding: 10px 16px 30px;
        margin-top: -5px;
    }

    .hedging-card {
        padding: 16px;
        margin-bottom: 12px;
    }

    /* 手机端触屏无 hover，用按压反馈替代（强度与桌面 hover 一致） */
    .hedging-card:active {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        border-color: rgba(0, 0, 0, 0.3);
    }

    /* 手机端：标题与操作按钮上下排列，按钮右对齐 */
    .hedging-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .h-toolbar {
        justify-content: flex-end;
        gap: 10px;
        margin: -15px 16px 14px;
    }

    .h-toolbar-btn {
        width: 100px;
        height: 35px;
        font-size: 14px;
    }

    .h-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .h-match-title {
        font-size: 15px;
    }

    .h-header-tags {
        gap: 12px;
    }

    .h-card-body {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    /* 手机端换行：竞彩、皇冠各占一整行，利润与利润百分比合并一行并左右排列 */
    .h-jc-box {
        grid-column: 1 / -1;
    }

    .h-hg-box {
        grid-column: 1 / -1;
    }

    .h-profit-wrap {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
    }

    .h-profit-box,
    .h-rate-box {
        flex: 1;
    }

    .h-hg-box {
        flex-wrap: nowrap;
        transform: none;
    }

    .h-asian-btn,
    .h-odds-btn {
        flex: 1;
    }

    .h-card-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .h-footer-right {
        flex: none;
        justify-content: flex-end;
    }

    /* 手机端：独赢按钮整体右移 7px */
    .h-1x2-box {
        transform: translateX(7px);
    }

    /* 手机端：让球三组按钮整体右移 5px */
    .h-hg-section {
        transform: translateX(5px);
    }

    /* 手机端：主盘口标题同样水平对齐最右列按钮（让球区宽=屏宽-64卡片/容器内边距-100独赢区-8间距，偏移随屏宽自适应） */
    .h-hg-section .h-section-label {
        transform: translateX(calc(33.333vw - 51.3px));
    }
}

/* 小屏平板：三列保持，皇冠按钮允许收缩避免溢出 */
@media (min-width: 769px) and (max-width: 1199px) {
    .h-card-body {
        grid-template-columns: 30% 40% 20%;
        column-gap: 5%;
        row-gap: 10px;
    }

    /* 平板宽度较窄：皇冠区取消右移，避免与右侧重叠 */
    .h-hg-box {
        transform: none;
    }

    .h-hg-section {
        flex: 1 1 auto;
    }

    .h-asian-btn {
        flex: 0 1 100px;
        min-width: 40px;
    }

    /* 独赢列允许收缩，避免与让球区重叠 */
    .h-1x2-box {
        flex: 0 1 100px;
        min-width: 0;
    }
}

/* ============ 计算详情弹出层：屏幕居中 ============ */
.calc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.calc-modal-overlay.show {
    display: flex;
}

.calc-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    animation: calc-modal-in 0.25s ease;
}

@keyframes calc-modal-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.calc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.calc-modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.calc-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
}

.calc-modal-close:hover {
    color: #222;
}

.calc-modal-body {
    padding: 20px;
    overflow-x: auto;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 560px;
}

.calc-table td {
    border: 1px solid #e8e8e8;
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
    color: #222;
}

.calc-table .calc-label {
    background: #fafafa;
    font-weight: 600;
    color: #555;
    width: 90px;
}

.calc-table .calc-profit {
    font-weight: 700;
    color: #27ae60;
}

.calc-table b {
    color: #c0392b;
    font-weight: 700;
}

.calc-input {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #c0392b;
    font-weight: 700;
}

.calc-input:focus {
    outline: none;
    border-color: #222;
}

@media (max-width: 768px) {
    .calc-modal-overlay {
        padding: 10px;
    }

    .calc-modal-box {
        max-width: 100%;
    }

    .calc-modal-body {
        padding: 12px;
    }

    .calc-table {
        font-size: 13px;
        min-width: 480px;
    }

    .calc-table td {
        padding: 10px 6px;
    }
}

/* ============ 响应式：手机端顶部介绍描述居中 ============ */
@media (max-width: 768px) {
    .worldcup-intro {
        text-align: center;
    }

    .worldcup-intro p {
        text-align: center;
        margin: 0 auto;
    }
}