/* ==========================================================================
   邮箱报价计算器样式（/product/mail/ 的 #D1 区块）
   真源：本文件。产品页是构建产物，靠 tools/patch-mail-price.py 注入
   <?= mail_price_head() ?> 引入，直接改 HTML 会被下次构建覆盖。

   命名一律带 mp- 前缀，避免与站点 2021/2024 版式里已有的 .list/.txt/.box
   等宽泛类名相互覆盖 —— 那些类名在本区块里还被卡片本体用着。
   ========================================================================== */

/* ---------- 用户数选择器（在卡片【下方】） ---------- */
.mp-picker {
    max-width: 860px;
    margin: 34px auto 0;
    padding: 20px 26px 16px;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(55, 69, 103, .07);
    box-sizing: border-box;
}

.mp-picker-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.mp-picker-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2b45;
    letter-spacing: .5px;
}

.mp-stepper {
    display: inline-flex;
    align-items: center;
    background: #f5f8fd;
    border: 1px solid #dde5f0;
    border-radius: 10px;
    padding: 4px;
    box-sizing: border-box;
}

.mp-step-btn {
    width: 38px;
    height: 38px;
    line-height: 1;
    font-size: 20px;
    font-family: inherit;
    color: #2f6be1;
    background: #fff;
    border: 1px solid #dde5f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .18s;
    padding: 0;
}

.mp-step-btn:hover:not(:disabled) {
    background: #2f6be1;
    border-color: #2f6be1;
    color: #fff;
}

.mp-step-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}

/* 去掉 type=number 的上下箭头：视觉上已经有 −/+ 按钮，两套控件并存会看着乱 */
.mp-input {
    width: 92px;
    height: 38px;
    margin: 0 8px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: #1f2b45;
    text-align: center;
    background: transparent;
    border: 0;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mp-input::-webkit-outer-spin-button,
.mp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mp-suffix {
    font-size: 14px;
    color: #7b849b;
    padding-right: 8px;
}

.mp-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mp-quick-title {
    font-size: 13px;
    color: #98a2b8;
}

.mp-chip {
    font-family: inherit;
    font-size: 13px;
    line-height: 28px;
    padding: 0 14px;
    color: #2f6be1;
    background: #eef4ff;
    border: 1px solid #d8e5ff;
    border-radius: 14px;
    cursor: pointer;
    transition: all .18s;
}

.mp-chip:hover {
    background: #dde9ff;
}

.mp-chip.is-on {
    background: #2f6be1;
    border-color: #2f6be1;
    color: #fff;
}

.mp-tip {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8a93a8;
    text-align: center;
}

.mp-tip b {
    color: #fe5d1b;
    font-weight: 700;
}

/* ---------- 卡片：两列平分，中间空开 15px ---------- */
.mp-cards {
    /* 原版是 col-sm-4 + col-sm-offset-2（两列各 1/3、合起来居中，左右各空 1/6），
       后来换成 col-md-6 平分铺满 .main-warp（1200px）。但克隆来的 2024 版式把
       栅格的列内边距与卡片外边距一并清了零，两张卡严丝合缝（实测间距 0px），
       蓝色描边直接贴住旁边那张卡，像一整块 —— 这里让它们分开 15px。

       为什么不用「列内边距 7.5 + 容器负外边距 7.5」这套 Bootstrap 常规手法：
       本页栅格列是 content-box 且列宽写死 50%，补回内边距后两列合计会超出容器，
       右列直接掉到下一行。实测踩过这个大坑 —— 加完 padding 两列从并排变成上下堆叠。
       所以改成 flex 接管这一行：两列自动平分，gap 天然就是间距，与盒模型无关。 */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

/* .row 的浮动清除伪元素在 flex 容器里会变成 flex 项白占一格，关掉；
   <br class="clear"> 同理（flex 下本就不需要清除浮动）。 */
.mp-cards::before,
.mp-cards::after { display: none; }
.mp-cards > br.clear { display: none; }

/* 两列等分：容器 1200 − gap 15 = 1185，每列 592.5。
   同时抹掉栅格列的 float 与定宽，避免与 flex 打架。 */
.mp-cards > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    padding: 0;
    float: none;
}

/* 992 以下退回单列（原来是 col-md-6 → col-xs-12 的换行点，保持一致）。 */
@media (max-width: 991px) {
    .mp-cards > [class*="col-"] {
        flex-basis: 100%;
    }
}

.product-cloudMailbox-desc.mp-cards .list620 {
    margin: 0;
    min-height: 0;              /* 原 620px：改横向排布后内容自己撑高即可 */
    height: 100%;
}

/* 卡片内边距收紧（原：header 30/40、txt 28/40、按钮上边距 40） */
.product-cloudMailbox-desc.mp-cards .list620 .header {
    padding: 22px 32px;
}

/* 原样式的 header p 写死 height:42px —— 那是给三列窄卡（描述会折两行）预留的。
   半屏宽下两版描述都只占一行，留着就是 20px 空白。 */
.product-cloudMailbox-desc.mp-cards .list620 .header p {
    height: auto;
    min-height: 26px;
}

.product-cloudMailbox-desc.mp-cards .list620 .txt {
    padding: 20px 32px 22px;
}

.product-cloudMailbox-desc.mp-cards .list620 .txt .txtBottom {
    min-height: 0;              /* 原 250px：功能列表改成两栏后不需要预留这么高 */
    margin: 16px 0 0;
}

.product-cloudMailbox-desc.mp-cards .list620 .txt .txtButton {
    margin-top: 22px;
}

/* 主推版本（角标「大众常选」）：加一圈描边 + 更强投影，视线先落在这里 */
.product-cloudMailbox-desc .list620.mp-primary {
    border: 2px solid #0c6cff;
    box-shadow: 0 22px 34px rgba(12, 108, 255, .18);
    position: relative;
}

.product-cloudMailbox-desc .list620.mp-primary:hover {
    box-shadow: 0 26px 40px rgba(12, 108, 255, .26);
}

.mp-ribbon {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 3;
    display: inline-block;
    padding: 6px 16px 6px 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ff7a29, #fe5d1b);
    border-radius: 0 8px 0 14px;
    box-shadow: 0 6px 14px rgba(254, 93, 27, .32);
}

/* 起售说明：原来挤在价格行里，现在单独一段、弱化处理 */
.mp-top-min {
    font-size: 14px;
    font-weight: 400;
    color: #8a93a8;
}

/* ---------- 报价明细（横向：左=明细，右=年付总价） ---------- */
.mp-box {
    display: flex;
    align-items: stretch;
    margin: 12px 0 0;
    padding: 11px 20px;
    background: #f7fafe;
    border: 1px solid #e8eefb;
    border-radius: 10px;
    box-sizing: border-box;
}

.mp-box-figures {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mp-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    line-height: 1.85;
}

.mp-k {
    color: #7b849b;
    flex: 0 1 auto;
    min-width: 0;
    /* 刻意不设 nowrap：「标价合计（100 用户 × 1 年）」在 992–1199 那档
       （卡片只有 ~500px）比左栏还宽，nowrap 会顶穿到右栏的虚线里。
       允许折行后只影响左栏高度，而 mp-box 的高度由右栏的大字决定，不会被撑高。 */
}

.mp-v {
    color: #47506b;
    font-weight: 600;
    text-align: right;
    font-family: arial, "Microsoft YaHei", sans-serif;
    white-space: nowrap;
}

.mp-list s {
    color: #98a2b8;
    font-weight: 400;
}

.mp-save {
    color: #fe5d1b;
}

/* 实付总价：右侧独立一栏，竖排堆叠（原来横着占满一整行，白吃一段高度） */
.mp-pay {
    flex: 0 0 auto;
    /* 只兜住自身的「折合 ¥112 / 用户 / 年」（117px）即可 —— 给多了会把左栏挤窄，
       「标价合计（100 用户 × 1 年）」就会被折成「…（100 用户 ×」+「1 年）」两行。 */
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0 0 0 18px;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px dashed #dbe5f5;
}

.mp-pay-k {
    font-size: 13px;
    color: #7b849b;
    flex: 0 0 auto;
    margin-right: 0;
}

.mp-pay-v {
    font-size: 16px;
    font-weight: 700;
    color: #0c6cff;
    font-family: arial, "Microsoft YaHei", sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.mp-pay-v b {
    font-size: 32px;
    font-weight: 700;
}

.mp-pay-per {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: #8a93a8;
    text-align: right;
    white-space: nowrap;
}

/* 优惠为 0 时不着色，避免「−¥0」红得莫名其妙 */
.mp-save.is-zero {
    color: #98a2b8;
}

/* ---------- 版本功能：横向两栏（原纵向 5–6 行） ---------- */
.product-cloudMailbox-desc.mp-cards .list620 .txt .txtBottom dl.mp-feats {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.mp-feats .mp-feat-col {
    flex: 1 1 0;
    min-width: 0;
    line-height: 28px;
}

.mp-note {
    margin: 26px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #98a2b8;
    text-align: center;
}

/* ---------- 窄屏 ---------- */

/* 1100 以下：报价明细退回纵向。
   横排要卡片有 ~550px 才舒展（左栏的「标价合计（100 用户 × 1 年）」本身就有 175px），
   992–1099 这档卡片只有 496–550px，硬横排会让左边那两行被压成三四行小字。 */
@media (max-width: 1099px) {
    .mp-box {
        display: block;
        padding: 12px 16px;
    }

    .mp-box-figures {
        padding-right: 0;
    }

    .mp-pay {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
        margin: 10px 0 0;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px dashed #dbe5f5;
    }

    .mp-pay-k {
        font-size: 14px;
        margin-right: auto;
    }

    .mp-pay-per {
        flex: 0 0 100%;
        font-size: 13px;
    }
}

/* 992 以下：卡片回到单列 */
@media (max-width: 991px) {
    .product-cloudMailbox-desc.mp-cards .list620 .header {
        padding: 24px 32px;
    }

    .product-cloudMailbox-desc.mp-cards .list620 .txt {
        padding: 22px 32px;
    }

    .product-cloudMailbox-desc.mp-cards .list620 .txt .txtBottom dl.mp-feats {
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .mp-picker {
        padding: 16px 14px 12px;
        margin-top: 22px;
    }

    .mp-picker-main {
        gap: 10px;
    }

    .mp-picker-title {
        flex: 0 0 100%;
        text-align: center;
    }

    .mp-input {
        width: 72px;
        font-size: 18px;
    }

    .mp-step-btn {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .mp-quick-title {
        flex: 0 0 100%;
        text-align: center;
    }

    .mp-ribbon {
        padding: 5px 12px 5px 14px;
        font-size: 12px;
    }

    .product-cloudMailbox-desc.mp-cards .list620 .header {
        padding: 18px 20px;
    }

    .product-cloudMailbox-desc.mp-cards .list620 .txt {
        padding: 18px 20px;
    }

    /* 390px 宽下两栏每栏只剩 ~150px，「263G容量(可无限扩容)」会折行 —— 退回单列 */
    .product-cloudMailbox-desc.mp-cards .list620 .txt .txtBottom dl.mp-feats {
        display: block;
    }
}