@charset "utf-8";
/* ==========================================================================
   浩美设备租赁专区 —— PC 端样式表
   --------------------------------------------------------------------------
   命名空间：所有选择器一律以 hm-rental- 前缀，绝不覆盖官网商城既有样式；
             会员中心容器宽度由各页面内联 <style> 补齐（#container .w）。
   色板对齐浩美官网 2025 版：
             品牌蓝 #108bee / 深蓝 #008fd7  主按钮、链接、标题条
             强调红 #e4393c                 金额、必填星号
             促销橙 #ff5500                 角标、热度标签
             成功绿 #52a352                 免押金、可租、已退
             警示黄 #f0a020                 档期紧张、待处理
             文字   #31373c 主 / #666 次 / #999 辅
             边框   #e8e8e8 / #eee          背景 #f5f7fa / #fff
   布局基准：官网主内容宽 1200px；会员中心页 #main 内自动收缩（max-width:100%）。
   兼容性  ：不使用 CSS 变量 / flex gap / grid，兼容站点现有旧浏览器基线。
   ========================================================================== */

/* ==========================================================================
   一、页面骨架与通用组件
   ========================================================================== */

.hm-rental-page {
    width: var(--hm-pc-width, 1240px);
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    padding: 18px 0 42px;
    box-sizing: border-box;
    color: #31373c;
    font-size: 13px;
    line-height: 1.6;
}

    .hm-rental-page a {
        color: #108bee;
        text-decoration: none;
    }

        .hm-rental-page a:hover {
            color: #008fd7;
            text-decoration: underline;
        }

    .hm-rental-page img {
        border: 0;
        vertical-align: middle;
    }

    .hm-rental-page ul, .hm-rental-page ol, .hm-rental-page li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .hm-rental-page table {
        border-collapse: collapse;
        border-spacing: 0;
    }

.hm-rental-strong {
    font-weight: bold;
    color: #31373c;
}

.hm-rental-link {
    color: #108bee;
    margin-left: 8px;
}

.hm-rental-money {
    color: #e4393c;
    font-weight: bold;
}

.hm-rental-money-lg {
    color: #e4393c;
    font-weight: bold;
    font-size: 22px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

.hm-rental-fee {
    color: #e4393c;
    font-weight: bold;
    font-size: 15px;
}

.hm-rental-osub {
    color: #999;
    margin-left: 6px;
    font-size: 12px;
}

/* ---------- 面包屑 ---------- */
.hm-rental-crumb {
    padding: 4px 2px 14px;
    color: #93a0aa;
    font-size: 12px;
    line-height: 20px;
}

    .hm-rental-crumb a {
        color: #666;
    }

        .hm-rental-crumb a:hover {
            color: #108bee;
        }

    .hm-rental-crumb span {
        margin: 0 6px;
        color: #ccc;
    }

.hm-rental-crumb-cur {
    color: #31373c !important;
    margin: 0 !important;
}

/* ---------- 按钮 ---------- */
.hm-rental-btn {
    display: inline-block;
    padding: 0 18px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #d7e0e7;
    border-radius: 5px;
    background: #fff;
    color: #31373c;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

    .hm-rental-btn:hover {
        background: #f5f7fa;
        border-color: #108bee;
        color: #108bee;
        text-decoration: none;
    }

.hm-rental-page .hm-rental-btn-primary {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
    font-weight: bold;
}

    .hm-rental-page .hm-rental-btn-primary:hover {
        background: #008fd7;
        border-color: #008fd7;
        color: #fff;
        text-decoration: none;
    }

.hm-rental-page .hm-rental-btn-ghost {
    background: #fff;
    border-color: #108bee;
    color: #108bee;
}

    .hm-rental-page .hm-rental-btn-ghost:hover {
        background: #eef6fd;
        color: #008fd7;
        text-decoration: none;
    }

.hm-rental-btn-big {
    height: 40px;
    line-height: 38px;
    padding: 0 32px;
    font-size: 15px;
}

.hm-rental-btn-lg {
    height: 36px;
    line-height: 34px;
    padding: 0 24px;
    font-size: 14px;
}

.hm-rental-btn-sm {
    height: 24px;
    line-height: 22px;
    padding: 0 10px;
    font-size: 12px;
}

.hm-rental-btn-block {
    display: block;
    width: 100%;
}

.hm-rental-btn-disabled, .hm-rental-btn-disabled:hover {
    background: #f1f1f1;
    border-color: #e8e8e8;
    color: #b0b0b0;
    cursor: not-allowed;
    font-weight: normal;
}

.hm-rental-btn-loading {
    opacity: .65;
    cursor: wait;
}

/* ---------- 标签与角标 ---------- */
.hm-rental-tag {
    display: inline-block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    font-size: 12px;
    font-style: normal;
    background: #fff4ee;
    color: #ff5500;
    border: 1px solid #ffd9c4;
}

.hm-rental-tag-hot {
    background: #fff4ee;
    color: #ff5500;
    border-color: #ffd9c4;
}

.hm-rental-tag-ok {
    background: #f0f8f0;
    color: #52a352;
    border-color: #cfe6cf;
}

.hm-rental-badge {
    display: inline-block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    font-style: normal;
    border-radius: 2px;
    background: #eef6fd;
    color: #108bee;
    margin-right: 4px;
}

.hm-rental-badge-inquiry {
    background: #fff8e8;
    color: #f0a020;
}

.hm-rental-badge-wait {
    background: #fdeeee;
    color: #e4393c;
}

/* 订单状态标签 */
.hm-rental-ost {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 2px;
    font-size: 12px;
    font-style: normal;
    background: #f1f1f1;
    color: #666;
}

.hm-rental-ost-wait {
    background: #fff8e8;
    color: #f0a020;
}

.hm-rental-ost-run {
    background: #eef6fd;
    color: #108bee;
}

.hm-rental-ost-back {
    background: #f3eefb;
    color: #7d5bb5;
}

.hm-rental-ost-done {
    background: #f0f8f0;
    color: #52a352;
}

.hm-rental-ost-cancel {
    background: #f5f5f5;
    color: #999;
}

/* ---------- 提示条 ---------- */
.hm-rental-notice {
    padding: 10px 14px;
    margin: 10px 0;
    border: 1px solid #d6e6f7;
    border-radius: 3px;
    background: #f2f8fe;
    color: #31373c;
    line-height: 22px;
}

    .hm-rental-notice strong {
        color: #108bee;
        margin-right: 4px;
    }

.hm-rental-notice-info {
    background: #f2f8fe;
    border-color: #d6e6f7;
}

.hm-rental-notice-warn {
    background: #fffbf0;
    border-color: #f5e0b0;
}

    .hm-rental-notice-warn strong {
        color: #f0a020;
    }

.hm-rental-notice-error {
    background: #fef4f4;
    border-color: #f3cccc;
}

    .hm-rental-notice-error strong {
        color: #e4393c;
    }

.hm-rental-notice-ok {
    background: #f4faf4;
    border-color: #cfe6cf;
}

    .hm-rental-notice-ok strong {
        color: #52a352;
    }

.hm-rental-notice-box {
    border: 1px solid #e8e8e8;
    background: #fafafa;
    padding: 10px 12px;
    border-radius: 3px;
}

.hm-rental-notice-icon {
    display: inline-block;
    width: 16px;
    text-align: center;
    font-weight: bold;
    margin-right: 4px;
}

/* ---------- 空状态 ---------- */
.hm-rental-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
}

.hm-rental-empty-icon {
    width: 44px;
    height: 44px;
    line-height: 42px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff4ee;
    color: #ff5500;
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
}

.hm-rental-empty b, .hm-rental-empty-title {
    display: block;
    font-size: 16px;
    color: #31373c;
    margin-bottom: 8px;
}

.hm-rental-empty span, .hm-rental-empty-tip {
    display: block;
    color: #999;
    font-size: 13px;
    margin-bottom: 18px;
    line-height: 22px;
}

.hm-rental-empty-btns {
    margin: 0 0 14px;
}

    .hm-rental-empty-btns .hm-rental-btn {
        margin: 0 6px;
    }

.hm-rental-empty-phone {
    color: #999;
    font-size: 12px;
}

/* ---------- 区块面板 ---------- */
.hm-rental-block {
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .04);
}

.hm-rental-block-hd, .hm-rental-block-head {
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #edf2f6;
    background: #fff;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

    .hm-rental-block-hd h4, .hm-rental-block-title {
        float: left;
        margin: 0;
        font-size: 16px;
        color: #1d2f3f;
        font-weight: bold;
        line-height: 48px;
        position: relative;
        padding-left: 11px;
    }

/* 卡片标题装饰线：左侧 4px 渐变短竖条。
   用 ::before 绝对定位实现，不动 aspx 标记，详情页 / 首页 / 列表页 /
   下单页的卡片标题一次全覆盖，不会出现只装一半的不一致。
   靠 top:50% + margin-top 居中，不受父级 line-height:48px 拉扯；
   竖条与文字间距 = padding-left(11) - 竖条宽(4) = 7px。 */
.hm-rental-block-hd h4::before, .hm-rental-block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #108bee, #0d6fb8);
}

.hm-rental-block-more {
    float: right;
    font-size: 12px;
    color: #999;
}

.hm-rental-block-bd {
    padding: 14px;
}

.hm-rental-panel {
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
}

.hm-rental-panel-title {
    font-size: 15px;
    font-weight: bold;
    color: #253746;
    padding: 0 0 11px 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #edf2f6;
    border-left: 3px solid #108bee;
}

.hm-rental-panel-sub {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
}

.hm-rental-panel-tip {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    margin-top: 6px;
}

.hm-rental-panel-hl {
    color: #e4393c;
    font-weight: bold;
}

.hm-rental-panel-warn {
    color: #f0a020;
}

.hm-rental-panel-btns {
    margin-top: 10px;
}

    .hm-rental-panel-btns .hm-rental-btn {
        margin-right: 8px;
    }

/* ---------- 表单控件 ---------- */
.hm-rental-form {
    margin: 0;
}

.hm-rental-form-row {
    margin-bottom: 10px;
    overflow: hidden;
}

.hm-rental-form-table {
    width: 100%;
}

    .hm-rental-form-table th {
        width: 96px;
        padding: 7px 10px 7px 0;
        text-align: right;
        font-weight: normal;
        color: #666;
        vertical-align: top;
        line-height: 30px;
        white-space: nowrap;
    }

    .hm-rental-form-table td {
        padding: 7px 0;
        vertical-align: top;
        line-height: 30px;
    }

.hm-rental-form-tip {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
    line-height: 20px;
}

.hm-rental-req {
    color: #e4393c;
    font-family: SimSun, sans-serif;
    margin-right: 3px;
}

.hm-rental-input, .hm-rental-select, .hm-rental-textarea {
    padding: 0 10px;
    height: 34px;
    border: 1px solid #d7e0e7;
    border-radius: 5px;
    background: #fff;
    color: #31373c;
    font-size: 13px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    box-sizing: border-box;
    vertical-align: middle;
}

.hm-rental-input {
    width: 190px;
}

.hm-rental-input-wide {
    width: 420px;
    max-width: 100%;
}

/* 日历图标占右侧 30px，130px 会把日期文字顶到图标底下，放宽到 148px */
.hm-rental-input-date {
    width: 148px;
}

.hm-rental-input-qty {
    width: 52px;
    text-align: center;
    padding: 0 2px;
}

.hm-rental-input-sm {
    width: 90px;
}

.hm-rental-select {
    width: 300px;
    max-width: 100%;
    height: 34px;
    padding: 0 6px;
}

.hm-rental-textarea {
    width: 420px;
    max-width: 100%;
    height: auto;
    padding: 6px 8px;
    line-height: 20px;
    resize: vertical;
}

    .hm-rental-input:focus, .hm-rental-select:focus, .hm-rental-textarea:focus {
        border-color: #108bee;
        outline: 0;
    }

.hm-rental-radio, .hm-rental-checkbox {
    display: inline-block;
    margin-right: 18px;
    color: #31373c;
    cursor: pointer;
    line-height: 30px;
}

    .hm-rental-radio input, .hm-rental-checkbox input {
        vertical-align: middle;
        margin: 0 4px 2px 0;
        cursor: pointer;
    }

/* 台数步进器 */
.hm-rental-stepper {
    display: inline-block;
    vertical-align: middle;
}

.hm-rental-stepper-btn {
    display: inline-block;
    width: 26px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #d3d5d6;
    background: #f7f7f7;
    color: #666;
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
    box-sizing: border-box;
}

    .hm-rental-stepper-btn:hover {
        background: #eef6fd;
        color: #108bee;
        text-decoration: none;
    }

.hm-rental-stepper .hm-rental-input-qty {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* ---------- 键值表与明细表 ---------- */
.hm-rental-kv {
    width: 100%;
}

    .hm-rental-kv th {
        width: 100px;
        padding: 6px 10px 6px 0;
        text-align: right;
        font-weight: normal;
        color: #666;
        vertical-align: top;
        line-height: 22px;
        white-space: nowrap;
    }

    .hm-rental-kv td {
        padding: 6px 0;
        color: #31373c;
        vertical-align: top;
        line-height: 22px;
        word-break: break-all;
    }

.hm-rental-kv-amount {
    color: #e4393c;
    font-weight: bold;
}

.hm-rental-kv-total {
    font-size: 16px;
    color: #e4393c;
    font-weight: bold;
}

.hm-rental-dtl-table, .hm-rental-fee-table, .hm-rental-dep-table,
.hm-rental-otable, .hm-rental-price-table {
    width: 100%;
    border: 1px solid #f0f0f0;
}

    .hm-rental-dtl-table th, .hm-rental-fee-table th, .hm-rental-dep-table th,
    .hm-rental-otable th, .hm-rental-price-table th {
        padding: 8px 10px;
        background: #fafbfc;
        border-bottom: 1px solid #f0f0f0;
        color: #666;
        font-weight: normal;
        text-align: left;
        font-size: 12px;
        line-height: 20px;
    }

    .hm-rental-dtl-table td, .hm-rental-fee-table td, .hm-rental-dep-table td,
    .hm-rental-otable td, .hm-rental-price-table td {
        padding: 8px 10px;
        border-bottom: 1px solid #f5f5f5;
        color: #31373c;
        font-size: 13px;
        line-height: 20px;
        vertical-align: middle;
    }

    .hm-rental-fee-table th {
        width: 110px;
        text-align: right;
        font-size: 13px;
        color: #666;
    }

.hm-rental-fee-total td, .hm-rental-fee-total th {
    background: #fffbf5;
    border-top: 1px solid #f5e0b0;
}

.hm-rental-fee-total-num {
    color: #e4393c;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.hm-rental-dtl-row-off td {
    color: #999;
    background: #fafafa;
}

.hm-rental-dep-in {
    color: #52a352;
    font-weight: bold;
}

.hm-rental-dep-out {
    color: #e4393c;
    font-weight: bold;
}

/* 富文本正文（设备详情、租赁规则说明、协议正文）
   后台用 wangEditor 产出的是 p / ol / ul / li / strong 结构，而全站 reset.css 里
   有 "ul,ol,li { margin:0; padding:0; list-style:none }" 和 "ul { font-size:0 }"，
   会把有序列表的序号、缩进连同字号一起吃掉，正文挤成一团。
   这里按块级元素逐条还原，并补上卡片正文应有的内边距。 */
.hm-rental-rich {
    padding: 16px 20px 18px;
    line-height: 28px;
    color: #31373c;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: break-word;
}

    .hm-rental-rich img {
        max-width: 100%;
        height: auto;
        vertical-align: top;
    }

    .hm-rental-rich p {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 28px;
    }

    .hm-rental-rich ol,
    .hm-rental-rich ul {
        margin: 0 0 12px;
        padding-left: 26px;
        font-size: 14px;
    }

    .hm-rental-rich ol {
        list-style-type: decimal;
    }

    .hm-rental-rich ul {
        list-style-type: disc;
    }

    .hm-rental-rich li {
        display: list-item;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 28px;
        list-style: inherit;
    }

    .hm-rental-rich strong {
        font-weight: bold;
    }

    .hm-rental-rich h1,
    .hm-rental-rich h2,
    .hm-rental-rich h3,
    .hm-rental-rich h4 {
        margin: 6px 0 10px;
        font-weight: bold;
        line-height: 26px;
    }

    .hm-rental-rich table {
        max-width: 100%;
        margin: 0 0 12px;
        border-collapse: collapse;
    }

        .hm-rental-rich table td,
        .hm-rental-rich table th {
            border: 1px solid #e2eaf1;
            padding: 6px 8px;
        }

    .hm-rental-rich blockquote {
        margin: 0 0 12px;
        padding: 8px 12px;
        background: #f7fafc;
        border-left: 3px solid #108bee;
    }

/* 卡片正文占位提示：与富文本正文同一档内边距，不再借用日历格的样式 */
.hm-rental-block-empty {
    padding: 26px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ---------- 页签 ---------- */
.hm-rental-tabs {
    border: 1px solid #e2eaf1;
    border-bottom: 2px solid #108bee;
    background: #fff;
    padding: 6px 10px 0;
    margin-bottom: 16px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.hm-rental-tab {
    display: inline-block;
    padding: 0 17px;
    height: 38px;
    line-height: 38px;
    color: #667784;
    font-size: 13px;
}

    .hm-rental-tab:hover {
        color: #108bee;
        text-decoration: none;
    }

    .hm-rental-tab em {
        font-style: normal;
        margin-left: 3px;
        color: #999;
        font-size: 12px;
    }

.hm-rental-page .hm-rental-tab-on {
    background: #108bee;
    color: #fff;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

    .hm-rental-page .hm-rental-tab-on:hover {
        color: #fff;
    }

.hm-rental-tab-on em {
    color: #d6ecff;
}

.hm-rental-tab-search {
    float: right;
    padding: 6px 0;
}

/* ---------- 分页 ---------- */
.hm-rental-pager {
    padding: 18px 0 6px;
    text-align: center;
    font-size: 13px;
}

.hm-rental-pager-item {
    display: inline-block;
    min-width: 30px;
    padding: 0 8px;
    height: 30px;
    line-height: 28px;
    border: 1px solid #d3d5d6;
    border-radius: 3px;
    background: #fff;
    color: #666;
    margin: 0 3px;
    box-sizing: border-box;
}

    .hm-rental-pager-item:hover {
        border-color: #108bee;
        color: #108bee;
        text-decoration: none;
    }

.hm-rental-page .hm-rental-pager-on, .hm-rental-page .hm-rental-pager-on:hover {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

.hm-rental-pager-total {
    color: #999;
    margin-left: 10px;
    font-size: 12px;
}

/* ---------- 说明清单 ---------- */
.hm-rental-tips {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
    padding: 12px 16px;
    margin-top: 14px;
}

.hm-rental-tips-list li {
    padding: 4px 0 4px 14px;
    color: #666;
    line-height: 22px;
    position: relative;
}

    .hm-rental-tips-list li:before {
        content: "\25B8";
        position: absolute;
        left: 0;
        color: #108bee;
    }

/* ==========================================================================
   二、租赁专区首页（rental_index.aspx）
   ========================================================================== */

/* ---------- 顶部主视觉 ---------- */
.hm-rental-hero {
    background: #108bee;
    background: linear-gradient(125deg, #075f9f 0%, #108bee 58%, #38b4f2 100%);
    border-radius: 10px;
    padding: 42px 48px;
    margin-bottom: 16px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(16, 139, 238, .18);
}

.hm-rental-hero-inner {
    overflow: hidden;
}

.hm-rental-hero-text {
    float: left;
    width: 55%;
}

.hm-rental-hero-kicker {
    display: block;
    margin-bottom: 8px;
    color: #bfe4ff;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-family: Arial, sans-serif;
}

.hm-rental-hero-title {
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 10px;
    color: #fff;
    line-height: 42px;
}

.hm-rental-hero-sub {
    font-size: 14px;
    color: #e2f2ff;
    line-height: 25px;
    margin-bottom: 22px;
}

.hm-rental-hero-btns .hm-rental-btn {
    margin-right: 10px;
}

.hm-rental-hero-btns .hm-rental-btn-primary {
    background: #fff;
    border-color: #fff;
    color: #0d6fb8;
}

    .hm-rental-hero-btns .hm-rental-btn-primary:hover {
        background: #f2f8fe;
        color: #0d6fb8;
    }

.hm-rental-hero-btns .hm-rental-btn-ghost {
    background: transparent;
    border-color: #9fd4f7;
    color: #fff;
}

    .hm-rental-hero-btns .hm-rental-btn-ghost:hover {
        background: #2f9ae8;
        color: #fff;
    }

.hm-rental-hero-stats {
    float: right;
    width: 41%;
    text-align: center;
    padding: 22px 0;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    font-size: 0;
    box-sizing: border-box;
}

.hm-rental-hero-stat {
    display: inline-block;
    width: 25%;
    min-height: 62px;
    padding: 0 10px;
    color: #fff;
    vertical-align: top;
    border-right: 1px solid rgba(255, 255, 255, .2);
    box-sizing: border-box;
}

    .hm-rental-hero-stat:last-child {
        border-right: 0;
    }

    .hm-rental-hero-stat b {
        display: block;
        font-size: 28px;
        font-family: Arial, sans-serif;
        color: #fff;
        line-height: 34px;
    }

    .hm-rental-hero-stat span {
        display: block;
        font-size: 12px;
        color: #dff2ff;
        line-height: 18px;
    }

/* ---------- 搜索条 ---------- */
.hm-rental-searchbar {
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
    overflow: hidden;
}

.hm-rental-searchform {
    overflow: hidden;
}

.hm-rental-search-input {
    width: 420px;
    max-width: 60%;
    height: 36px;
    padding: 0 10px;
    border: 2px solid #108bee;
    border-radius: 3px 0 0 3px;
    font-size: 13px;
    color: #31373c;
    box-sizing: border-box;
    vertical-align: middle;
}

    .hm-rental-search-input:focus {
        outline: 0;
        border-color: #008fd7;
    }

.hm-rental-searchbar .hm-rental-btn-primary {
    height: 36px;
    line-height: 34px;
    padding: 0 26px;
    border-radius: 0 3px 3px 0;
    margin-left: -4px;
    vertical-align: middle;
    font-size: 14px;
}

.hm-rental-search-tel {
    float: right;
    color: #999;
    font-size: 12px;
    line-height: 36px;
}

    .hm-rental-search-tel b {
        color: #e4393c;
        font-size: 16px;
        font-family: Arial, sans-serif;
        margin-left: 4px;
    }

/* ---------- 分类导航 ---------- */
.hm-rental-cate-grid {
    overflow: hidden;
    padding: 16px 13px 2px;
}

.hm-rental-cate-item {
    float: left;
    width: calc(25% - 14px);
    padding: 15px 16px;
    box-sizing: border-box;
    margin: 0 7px 14px;
    border: 1px solid #e6edf3;
    border-radius: 6px;
    background: #fff;
    color: #31373c;
}

    .hm-rental-cate-item:hover {
        border-color: #108bee;
        background: #f2f8fe;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(16, 139, 238, .08);
    }

.hm-rental-cate-name {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #31373c;
    margin-bottom: 4px;
}

.hm-rental-cate-meta {
    display: block;
    font-size: 12px;
    color: #999;
}

    .hm-rental-cate-meta b {
        color: #e4393c;
        font-family: Arial, sans-serif;
    }

/* ---------- 广告位 ---------- */
.hm-rental-adv {
    margin-bottom: 14px;
}

.hm-rental-adv-grid {
    overflow: hidden;
    margin: 0 -7px;
}

    .hm-rental-adv-grid li {
        float: left;
        width: 50%;
        padding: 0 7px;
        box-sizing: border-box;
    }

    .hm-rental-adv-grid img {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

/* ---------- 设备卡片栅格（首页热门 / 列表页 / 详情页推荐共用） ---------- */
.hm-rental-goods-grid {
    overflow: hidden;
    padding: 16px 13px 2px;
}

.hm-rental-goods-card {
    float: left;
    width: 25%;
    padding: 0 7px;
    box-sizing: border-box;
    margin-bottom: 14px;
    /* 悬停反馈做在卡片整体上用 filter: drop-shadow：
       它取的是内部两个子块的合并轮廓，不会像分别给图片区、信息区加 box-shadow
       那样在交界处留一道暗缝。transition 让投影淡入，不是瞬间弹出来。 */
    transition: filter .2s ease;
}

.hm-rental-goods-grid-list .hm-rental-goods-card {
    width: 25%;
}

/* 卡片边框由图片区与信息区拼接而成。
   页面结构为 card > a.hm-rental-goods-pic + div.hm-rental-goods-body 两个兄弟节点，
   card 自身的 padding 只作栅格间距，不能直接加边框，
   否则相邻卡片的边框会相互贴合、间距消失。 */
.hm-rental-goods-pic {
    display: block;
    height: 190px;
    overflow: hidden;
    text-align: center;
    background: #fafafa;
    position: relative;
    border: 1px solid #edf0f4;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
}

    .hm-rental-goods-pic img {
        width: 100%;
        height: 188px;
        /* contain：商品图多为白底方图，直接拉伸会把设备压扁；
           老浏览器不认 object-fit 时会退化成原来的拉伸，不影响布局 */
        object-fit: contain;
        transition: transform .25s ease;
    }

/* 角标： markup 里只有这一个类（<em>），不补底色就会变成压在商品图上的斜体文字，
   白底商品图上几乎看不见。左侧贴边、右侧圆角，读作从卡片边缘伸出的缎带。 */
.hm-rental-goods-tag {
    position: absolute;
    left: 0;
    top: 8px;
    z-index: 2;
    padding: 1px 8px 1px 7px;
    border-radius: 0 10px 10px 0;
    background: #ff5500;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}

.hm-rental-goods-body {
    padding: 10px 12px 12px;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
}

/* 悬停：只给一层柔和投影，不再把两个子块描成品牌蓝。
   描蓝边的问题在于它把“一张卡片”拆成“图框 + 文框”两个蓝框，
   交界处那条线反而被强调出来，看起来像表格没对齐。
   也不用 translateY 浮起：.hm-rental-goods-grid 是 overflow:hidden，
   列表页的 grid 还把 padding 清成了 0，上移 3px 会把首行卡片顶部裁掉。 */
.hm-rental-goods-card:hover {
    filter: drop-shadow(0 4px 12px rgba(31, 56, 88, .13));
}

    .hm-rental-goods-card:hover .hm-rental-goods-pic img {
        transform: scale(1.04);
    }

/* CTA 跟着轻提示：卡片被注意到时按钮也该有回应，但只换底色不描蓝边。
   两级选择器加 :hover 是必要的：否则鼠标真的移到按钮上时，
   会被上面那条 (0,4,0) 的卡片规则压住，按钮自身的悬停档就没效果了。 */
.hm-rental-goods-card:hover .hm-rental-goods-body .hm-rental-btn {
    background: #f5f9fd;
    border-color: #dbe9f7;
    color: #108bee;
}

.hm-rental-goods-card:hover .hm-rental-goods-body .hm-rental-btn:hover {
    background: #e7f2fc;
    border-color: #a9d5f5;
    color: #0d7cc9;
}

/* 标题本身就是链接节点（a.hm-rental-goods-name），不是容器包链接 */
.hm-rental-goods-name {
    display: block;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    margin-bottom: 6px;
    font-size: 13px;
    color: #31373c;
}

    .hm-rental-goods-name:hover {
        color: #108bee;
        text-decoration: none;
    }

.hm-rental-goods-meta {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    margin-top: 6px;
}

.hm-rental-goods-brand {
    color: #999;
    font-size: 12px;
    margin-bottom: 4px;
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
}

.hm-rental-day-start { font-size: .72em; font-weight: 400; }

.hm-rental-goods-price {
    color: #e4393c;
    font-size: 12px;
    margin: 4px 0 2px;
    line-height: 22px;
}

    .hm-rental-goods-price b {
        font-size: 19px;
        font-family: Arial, sans-serif;
    }
/* 卡片底栏：左押金、右可租状态，两端对齐后各自省略，避免长文案挠行 */
.hm-rental-goods-foot {
    border-top: 1px solid #f5f5f5;
    margin-top: 8px;
    padding-top: 8px;
    font-size: 12px;
    overflow: hidden;
    line-height: 20px;
}

.hm-rental-goods-deposit {
    float: left;
    color: #666;
    max-width: 58%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hm-rental-goods-avail {
    float: right;
    color: #999;
    max-width: 40%;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hm-rental-goods-body .hm-rental-btn-block {
    margin-top: 10px;
}

/* 可租状态色（hm-rental-avail-{AvailFlag}：0 无档期 / 1 可租 / 2 需询价） */
.hm-rental-avail-0 {
    color: #999;
}

.hm-rental-avail-1 {
    color: #52a352;
}

.hm-rental-avail-2 {
    color: #f0a020;
}

/* 下架 / 无可租档期的卡片整体降饱和，避免客户误点 */
.hm-rental-goods-card-off .hm-rental-goods-pic img { /* opacity: .45; */
}

.hm-rental-goods-card-off .hm-rental-goods-body {
    background: #fafafa;
}

.hm-rental-goods-card-off .hm-rental-goods-name {
    color: #999;
}

/* 下架 / 无档期的卡片不给悬停反馈：它点进去也下不了单，
   做出“可交互”的暗示只会误导客户去点 */
.hm-rental-goods-card-off:hover {
    filter: none;
}

    .hm-rental-goods-card-off:hover .hm-rental-goods-pic img {
        transform: none;
    }

/* ---------- 租赁流程步骤条 ---------- */
.hm-rental-steps {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 28px 18px 24px;
}

    .hm-rental-steps:before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 44px;
        height: 1px;
        background: #d7e8f7;
    }

    .hm-rental-steps ul {
        overflow: hidden;
        margin: 0 -6px;
    }

.hm-rental-step {
    position: relative;
    z-index: 1;
    float: left;
    width: 20%;
    padding: 0 14px;
    box-sizing: border-box;
    text-align: center;
}

.hm-rental-steps-3 .hm-rental-step {
    width: 33.33%;
}

.hm-rental-step-no, .hm-rental-step em {
    display: block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 2px solid #108bee;
    background: #fff;
    color: #108bee;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    box-sizing: border-box;
}

.hm-rental-step b {
    display: block;
    font-size: 14px;
    color: #253746;
    margin-bottom: 5px;
}

.hm-rental-step span {
    display: block;
    font-size: 12px;
    color: #8493a0;
    line-height: 19px;
    padding: 0 6px;
}

.hm-rental-step-done em, .hm-rental-step-done .hm-rental-step-no {
    background: #52a352;
    border-color: #52a352;
    color: #fff;
}

.hm-rental-step-on em, .hm-rental-step-on .hm-rental-step-no {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
}

/* 下单页步骤条配色：只让「当前步骤」保留主题蓝作为唯一强调色，
   已完成转深灰实心、未开始转浅灰描边。
   原来三段是「绿 + 蓝实心 + 蓝描边」，未开始的蓝描边和当前的蓝实心只差
   一个填充，扫一眼分不清谁是可以点的；已完成用绿又属于另一套语义。
   必须限定在 .hm-rental-order 内：首页「租赁流程」复用同一组 .hm-rental-step
   且不带状态类，改默认色会把首页五个步骤一起洗成灰色。 */
.hm-rental-order .hm-rental-steps:before {
    background: #e6ecf2;
}

.hm-rental-order .hm-rental-step em,
.hm-rental-order .hm-rental-step .hm-rental-step-no {
    border-color: #d3dae1;
    background: #fff;
    color: #9aa6b2;
}

.hm-rental-order .hm-rental-step b,
.hm-rental-order .hm-rental-step span {
    color: #98a4b0;
}

/* 已完成：深灰实心，表示已过但不再抢焦点 */
.hm-rental-order .hm-rental-step-done em,
.hm-rental-order .hm-rental-step-done .hm-rental-step-no {
    border-color: #6b7885;
    background: #6b7885;
    color: #fff;
}

    .hm-rental-order .hm-rental-step-done b,
    .hm-rental-order .hm-rental-step-done span {
        color: #5b6773;
    }

/* 当前步骤：主题蓝实心 + 深色文字，整条流程唯一的强调色 */
.hm-rental-order .hm-rental-step-on em,
.hm-rental-order .hm-rental-step-on .hm-rental-step-no {
    border-color: #108bee;
    background: #108bee;
    color: #fff;
}

    .hm-rental-order .hm-rental-step-on b,
    .hm-rental-order .hm-rental-step-on span {
        color: #1d2f3f;
        font-weight: 700;
    }

/* 下单页步骤文字：三步骤条的标题其实落在 <span> 里，而 .hm-rental-step span
   原本是给首页流程条的说明文字用的（12px），放在只有三步的流程条上偏小。
   .hm-rental-steps-3 目前仅下单页在用，可以直接限定。 */
.hm-rental-steps-3 .hm-rental-step span {
    font-size: 14px;
    line-height: 22px;
    padding: 0;
}

/* ---------- 租赁规则 ---------- */
.hm-rental-rule {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
    padding: 14px 18px;
    margin-top: 14px;
}

.hm-rental-rule-grid {
    overflow: hidden;
    margin: 0 -10px;
}

    .hm-rental-rule-grid li {
        float: left;
        width: 25%;
        padding: 0 10px;
        box-sizing: border-box;
        color: #666;
        font-size: 12px;
        line-height: 22px;
    }

        .hm-rental-rule-grid li b {
            display: block;
            color: #31373c;
            font-size: 13px;
            margin-bottom: 2px;
        }

/* ---------- 底部行动召唤 ---------- */
.hm-rental-cta {
    background: #f2f8fe;
    border: 1px solid #d6e6f7;
    border-radius: 6px;
    padding: 24px 30px;
    margin-top: 16px;
    text-align: center;
}

.hm-rental-cta-text {
    font-size: 18px;
    color: #31373c;
    font-weight: bold;
    margin-bottom: 6px;
}

    .hm-rental-cta-text span {
        color: #999;
        font-size: 13px;
        font-weight: normal;
        display: block;
        margin-top: 4px;
    }

.hm-rental-cta-btns {
    margin-top: 14px;
}

    .hm-rental-cta-btns .hm-rental-btn {
        margin: 0 6px;
    }

/* ---------- 首页空状态与租赁优势 ---------- */
.hm-rental-stock-empty {
    overflow: hidden;
    margin-bottom: 18px;
    padding: 20px 24px;
    border: 1px solid #dcebf8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .04);
}

.hm-rental-stock-empty-icon {
    float: left;
    width: 46px;
    height: 46px;
    margin-right: 14px;
    border-radius: 50%;
    background: #eaf5fe;
    color: #108bee;
    font-size: 18px;
    font-weight: bold;
    line-height: 46px;
    text-align: center;
}

.hm-rental-stock-empty-text {
    float: left;
    padding-top: 2px;
}

    .hm-rental-stock-empty-text b {
        display: block;
        margin-bottom: 3px;
        color: #253746;
        font-size: 15px;
    }

    .hm-rental-stock-empty-text span {
        color: #8493a0;
    }

.hm-rental-stock-empty .hm-rental-btn {
    float: right;
    margin-top: 7px;
}

.hm-rental-adv-grid {
    overflow: hidden;
    padding: 18px 13px 4px;
    margin: 0;
}

    .hm-rental-adv-grid .hm-rental-adv {
        position: relative;
        float: left;
        width: calc(25% - 14px);
        min-height: 112px;
        margin: 0 7px 14px;
        padding: 17px 16px 16px 58px;
        border: 1px solid #e7edf2;
        border-radius: 7px;
        background: #fbfdff;
        box-sizing: border-box;
    }

        .hm-rental-adv-grid .hm-rental-adv:before {
            position: absolute;
            left: 16px;
            top: 18px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e8f4fd;
            color: #108bee;
            font-size: 14px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
        }

.hm-rental-adv-price:before {
    content: "省";
}

.hm-rental-adv-deposit:before {
    content: "透";
}

.hm-rental-adv-calendar:before {
    content: "稳";
}

.hm-rental-adv-company:before {
    content: "企";
}

.hm-rental-adv-grid .hm-rental-adv b {
    display: block;
    margin-bottom: 6px;
    color: #253746;
    font-size: 14px;
}

.hm-rental-adv-grid .hm-rental-adv span {
    display: block;
    color: #8493a0;
    font-size: 12px;
    line-height: 20px;
}

.hm-rental-index .hm-rental-pickup {
    padding: 14px 20px;
    color: #566775;
    border-top: 0;
    background: #fbfdff;
}

.hm-rental-index .hm-rental-cta {
    margin-top: 2px;
    padding: 28px 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, #edf7ff 0%, #f8fbfe 100%);
}

/* ==========================================================================
   三、设备列表页（rental_list.aspx）
   ========================================================================== */

.hm-rental-list .hm-rental-goods-card, .hm-rental-list .hm-rental-goods-grid-list .hm-rental-goods-card {
    width: 33.33%;
}

.hm-rental-list .hm-rental-goods-grid {
    margin: 0 -7px;
    padding: 0;
}

.hm-rental-list .hm-rental-crumb {
    margin-bottom: 14px;
    padding: 11px 16px;
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
    box-sizing: border-box;
}

/* ---------- 筛选区 ---------- */
.hm-rental-filter {
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
}

.hm-rental-filter-row {
    border-bottom: 1px dashed #edf1f4;
    padding: 10px 0 6px;
    overflow: hidden;
    line-height: 26px;
}

    .hm-rental-filter-row:last-child {
        border-bottom: 0;
    }

.hm-rental-filter-label {
    float: left;
    width: 86px;
    padding: 0 12px 0 18px;
    color: #8896a1;
    font-size: 12px;
    line-height: 26px;
    box-sizing: border-box;
}

.hm-rental-filter-items {
    margin-left: 86px;
    padding-right: 16px;
}

.hm-rental-filter-item {
    display: inline-block;
    padding: 0 11px;
    margin: 0 5px 4px 0;
    height: 26px;
    border-radius: 4px;
    color: #566775;
    font-size: 12px;
    line-height: 24px;
    border: 1px solid transparent;
    box-sizing: border-box;
}

    .hm-rental-filter-item:hover {
        color: #108bee;
        background: #f2f8fe;
        text-decoration: none;
    }

    .hm-rental-filter-item em {
        font-style: normal;
        color: #bbb;
        margin-left: 3px;
    }

.hm-rental-page .hm-rental-filter-on, .hm-rental-page .hm-rental-filter-on:hover {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.hm-rental-filter-on em {
    color: #d6ecff;
}

.hm-rental-filter-selected {
    padding: 8px 12px;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
}

.hm-rental-filter-summary {
    color: #666;
    font-size: 12px;
    line-height: 22px;
}

    .hm-rental-filter-summary b {
        color: #108bee;
        font-weight: normal;
        margin: 0 2px;
    }

.hm-rental-filter-clear {
    margin-left: 12px;
    font-size: 12px;
    color: #999;
}

    .hm-rental-filter-clear:hover {
        color: #e4393c;
    }

/* ---------- 排序条 ---------- */
.hm-rental-sortbar {
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    padding: 9px 14px;
    margin-bottom: 14px;
    overflow: hidden;
    line-height: 28px;
}

.hm-rental-sorts {
    float: left;
}

.hm-rental-sort {
    display: inline-block;
    padding: 0 13px;
    height: 28px;
    line-height: 26px;
    border: 1px solid #d7e0e7;
    border-radius: 4px;
    background: #fff;
    color: #666;
    font-size: 12px;
    margin-right: 6px;
    box-sizing: border-box;
}

    .hm-rental-sort:hover {
        border-color: #108bee;
        color: #108bee;
        text-decoration: none;
    }

.hm-rental-page .hm-rental-sort-on, .hm-rental-page .hm-rental-sort-on:hover {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.hm-rental-sort-count {
    float: right;
    color: #999;
    font-size: 12px;
}

    .hm-rental-sort-count b {
        color: #e4393c;
        font-family: Arial, sans-serif;
        margin: 0 2px;
    }

/* ---------- 价格速览 ---------- */
.hm-rental-price-box {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}

.hm-rental-price-head {
    padding: 0 12px;
    height: 36px;
    line-height: 36px;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    font-weight: bold;
    color: #31373c;
}

    .hm-rental-price-head span {
        float: right;
        font-weight: normal;
        font-size: 12px;
        color: #999;
    }

.hm-rental-price-hl {
    color: #e4393c;
    font-family: Arial, sans-serif;
}

.hm-rental-price-table th {
    width: 90px;
}

.hm-rental-price-table td b {
    color: #e4393c;
    font-size: 15px;
    font-family: Arial, sans-serif;
}

.hm-rental-price-table tr.hm-rental-price-hl td, .hm-rental-price-table tr.hm-rental-price-hl th {
    background: #fffbf5;
    color: #e4393c;
}

/* ==========================================================================
   四、设备详情页（rental_detail.aspx）
   ========================================================================== */

/* ---------- 主区：左图右信息 ---------- */
.hm-rental-dtl-main {
    overflow: hidden;
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 5px 20px rgba(35, 74, 108, .04);
}

.hm-rental-dtl-gallery {
    float: left;
    width: 380px;
}

.hm-rental-dtl-info {
    margin-left: 412px;
}

.hm-rental-dtl-goods {
    overflow: hidden;
}

.hm-rental-dtl-pic {
    width: 380px;
    height: 336px;
    overflow: hidden;
    position: relative;
    border: 1px solid #edf1f4;
    border-radius: 7px;
    background: #fafafa;
    text-align: center;
}

    .hm-rental-dtl-pic img {
        width: 100%;
        height: 336px;
        object-fit: contain;
    }

.hm-rental-dtl-video {
    margin-top: 10px;
}

    .hm-rental-dtl-video video {
        width: 380px;
        max-width: 100%;
        border-radius: 7px;
        background: #000;
        display: block;
    }

.hm-rental-dtl-avail {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    background: #fafbfc;
    border: 1px solid #f0f0f0;
    line-height: 22px;
}

    .hm-rental-dtl-avail b {
        display: block;
        font-size: 14px;
    }

    .hm-rental-dtl-avail span {
        display: block;
        color: #999;
        font-size: 12px;
    }

    .hm-rental-dtl-avail.hm-rental-avail-1 {
        background: #f4faf4;
        border-color: #cfe6cf;
    }

        .hm-rental-dtl-avail.hm-rental-avail-1 b {
            color: #52a352;
        }

    .hm-rental-dtl-avail.hm-rental-avail-2 {
        background: #fffbf0;
        border-color: #f5e0b0;
    }

        .hm-rental-dtl-avail.hm-rental-avail-2 b {
            color: #f0a020;
        }

    .hm-rental-dtl-avail.hm-rental-avail-0 {
        background: #fafafa;
        border-color: #eee;
    }

        .hm-rental-dtl-avail.hm-rental-avail-0 b {
            color: #999;
        }

.hm-rental-dtl-title {
    font-size: 24px;
    font-weight: bold;
    color: #253746;
    line-height: 34px;
    margin: 0 0 10px;
}

.hm-rental-dtl-meta {
    color: #999;
    font-size: 12px;
    line-height: 24px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f0f0f0;
    margin-bottom: 10px;
}

    .hm-rental-dtl-meta span {
        margin-right: 16px;
        display: inline-block;
    }

    .hm-rental-dtl-meta b {
        color: #666;
        font-weight: normal;
    }

.hm-rental-dtl-brief {
    color: #666;
    font-size: 13px;
    line-height: 22px;
    margin: 0 0 10px;
}

.hm-rental-dtl-off {
    background: #fafafa;
    border-color: #eee;
}

    .hm-rental-dtl-off .hm-rental-dtl-pic img {
        opacity: .45;
    }

    .hm-rental-dtl-off .hm-rental-dtl-title {
        color: #999;
    }

.hm-rental-dtl-table {
    width: 100%;
    margin-bottom: 12px;
}

    .hm-rental-dtl-table th {
        width: 96px;
        padding: 6px 10px 6px 0;
        text-align: right;
        font-weight: normal;
        color: #666;
        line-height: 22px;
        vertical-align: top;
    }

    .hm-rental-dtl-table td {
        padding: 6px 0;
        color: #31373c;
        line-height: 22px;
        vertical-align: top;
    }
/* 订单明细行：行状态=2（已取消/未交付）时整行置灰 */
.hm-rental-dtl-row td {
    vertical-align: middle;
}

.hm-rental-dtl-row-off td, .hm-rental-dtl-row-off th {
    color: #999;
    background: #fafafa;
}

.hm-rental-dtl-btns {
    padding: 12px 0 4px;
}

    .hm-rental-dtl-btns .hm-rental-btn {
        margin: 0 8px 8px 0;
    }

.hm-rental-dtl-agreement {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    padding-top: 6px;
    border-top: 1px dashed #f0f0f0;
}

/* ---------- 租期折扣方案 ---------- */
/* 配色走橙色系而非试算框的蓝色系：折扣是“可点选的方案”而不是“已确定的金额”，
   两套颜色分开，客户不会把方案价与结算价看混 */
.hm-rental-discount {
    border: 1px solid #f3ded0;
    border-radius: 7px;
    background: #fffaf6;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
}

.hm-rental-discount-head {
    font-size: 14px;
    font-weight: bold;
    color: #d4550a;
    line-height: 22px;
    margin-bottom: 8px;
}

    .hm-rental-discount-head span {
        font-size: 12px;
        font-weight: normal;
        color: #bb8f74;
        margin-left: 8px;
    }

/* 方案卡片两列平铺：五档全纵向排会把右栏拉得比商品图还长，
   点选目标也会随档位变多越排越远 */
.hm-rental-discount-list {
    margin: 0 -8px;
    overflow: hidden;
}

/* 列间距用 calc 在 50% 基础上让出 8px，配合容器 -8px 负边距对齐：
   两列直接紧挨会出现两条 1px 边框叠成一道粗线 */
.hm-rental-discount-item {
    float: left;
    display: block;
    width: calc(50% - 8px);
    box-sizing: border-box;
    margin: 8px 0 0 8px;
    padding: 9px 10px;
    border: 1px solid #f0e2d8;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .hm-rental-discount-item:hover {
        border-color: #f5b98a;
    }

    /* 选中态除描边外再加一道左侧色条：只换边框颜色在色弱情况下分辨不出来 */
    .hm-rental-discount-item-on {
        border-color: #ff5500;
        background: #fff7f2;
        box-shadow: inset 3px 0 0 #ff5500;
    }

    .hm-rental-discount-item-plain .hm-rental-discount-name {
        font-weight: normal;
        color: #666;
        font-size: 12px;
    }

/* 名称与折扣标签同行（行内元素），金额与说明各自换行，
   不用 float 排列是为了避开子块高度不一时的清除问题 */
.hm-rental-discount-name {
    color: #31373c;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
}

.hm-rental-discount-rate {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 9px;
    background: #ff5500;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    vertical-align: middle;
}

.hm-rental-discount-money {
    display: block;
    margin-top: 2px;
    color: #e4393c;
    font-size: 18px;
    font-family: Arial, sans-serif;
    line-height: 24px;
}

.hm-rental-discount-cmn {
    display: block;
    color: #999;
    font-size: 12px;
    line-height: 18px;
}

.hm-rental-discount-save {
    display: block;
    color: #d4550a;
    font-size: 12px;
    line-height: 18px;
}

/* 点了折扣档但租期装不下：把“没吃到折扣”说清楚并给出补救入口，
   不能只把价格默默改回去，客户会以为系统乱收费 */
.hm-rental-discount-warn {
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px solid #f3cccc;
    border-radius: 4px;
    background: #fef4f4;
    color: #e4393c;
    font-size: 12px;
    line-height: 20px;
}

    .hm-rental-discount-warn a {
        color: #e4393c;
        text-decoration: underline;
        margin-left: 4px;
    }

.hm-rental-discount-on {
    margin-top: 8px;
    color: #d4550a;
    font-size: 12px;
    line-height: 20px;
}

/* ---------- 租金试算器 ---------- */
.hm-rental-calc {
    border: 1px solid #d6e6f7;
    border-radius: 7px;
    background: #f7fbff;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.hm-rental-calc-head {
    font-size: 14px;
    font-weight: bold;
    color: #0d6fb8;
    margin-bottom: 10px;
}

.hm-rental-calc-form {
    margin: 0;
}

.hm-rental-calc-row {
    margin-bottom: 8px;
    line-height: 30px;
}

    .hm-rental-calc-row > label {
        display: inline-block;
        color: #666;
        margin-right: 6px;
    }

    .hm-rental-calc-row .hm-rental-radio {
        margin-right: 12px;
    }

.hm-rental-calc-sep {
    display: inline-block;
    color: #ccc;
    margin: 0 8px;
}

.hm-rental-calc-unit {
    color: #999;
    margin: 0 12px 0 4px;
}

.hm-rental-calc-err {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 3px;
    background: #fef4f4;
    border: 1px solid #f3cccc;
    color: #e4393c;
    line-height: 20px;
}

.hm-rental-calc-result {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cfe0f0;
}

.hm-rental-calc-table {
    width: 100%;
}

    .hm-rental-calc-table th {
        width: 80px;
        padding: 4px 10px 4px 0;
        text-align: right;
        font-weight: normal;
        color: #666;
        line-height: 22px;
    }

    .hm-rental-calc-table td {
        padding: 4px 0;
        color: #31373c;
        line-height: 22px;
    }

        .hm-rental-calc-table td b {
            color: #e4393c;
            font-family: Arial, sans-serif;
        }

.hm-rental-calc-total th, .hm-rental-calc-total td {
    border-top: 1px solid #cfe0f0;
    padding-top: 8px;
    font-weight: bold;
}

/* 年租折扣行：原价用删除线表示“这不是你要付的钱”，免得客户把原价当报价 */
.hm-rental-calc-save em {
    font-style: normal;
    font-family: Arial, sans-serif;
    color: #999;
    text-decoration: line-through;
    margin-right: 4px;
}

.hm-rental-calc-tip {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    margin-top: 8px;
}

/* ---------- 档期日历 ---------- */
.hm-rental-cal {
    padding: 12px 14px;
    overflow: hidden;
}

.hm-rental-cal-cell {
    float: left;
    width: 44px;
    height: 44px;
    margin: 0 4px 4px 0;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    cursor: default;
    position: relative;
}

.hm-rental-cal-d {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #31373c;
    line-height: 22px;
    margin-top: 2px;
}

.hm-rental-cal-w {
    display: block;
    font-size: 11px;
    color: #999;
    line-height: 16px;
}

/* 忙闲等级：lv0 完全可租 / lv1 部分可租 / lv2 已租满 */
.hm-rental-cal-lv0 {
    background: #f4faf4;
    border-color: #cfe6cf;
}

    .hm-rental-cal-lv0 .hm-rental-cal-d {
        color: #52a352;
    }

.hm-rental-cal-lv1 {
    background: #fffbf0;
    border-color: #f5e0b0;
}

    .hm-rental-cal-lv1 .hm-rental-cal-d {
        color: #f0a020;
    }

.hm-rental-cal-lv2 {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

    .hm-rental-cal-lv2 .hm-rental-cal-d {
        color: #bbb;
        text-decoration: line-through;
    }

    .hm-rental-cal-lv2 .hm-rental-cal-w {
        color: #bbb;
    }

.hm-rental-cal-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.hm-rental-cal-legend {
    float: right;
    font-size: 12px;
    color: #999;
    line-height: 40px;
}

    .hm-rental-cal-legend .hm-rental-cal-cell {
        float: none;
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 4px 0 12px;
        vertical-align: middle;
        border-radius: 2px;
    }

/* ==========================================================================
   五、我的租赁订单（rental_myorder.aspx）
   会员中心 #main 宽约 780px，表格列宽按比例分配，不用固定像素，避免窄屏溢出。
   ========================================================================== */

.hm-rental-otable {
    width: 100%;
    border: 1px solid #e8e8e8;
    background: #fff;
}

    .hm-rental-otable thead th {
        padding: 9px 10px;
        background: #fafbfc;
        border-bottom: 1px solid #e8e8e8;
        color: #666;
        font-weight: normal;
        font-size: 12px;
        text-align: left;
        line-height: 20px;
    }

.hm-rental-ocol-goods {
    width: 32%;
}

.hm-rental-ocol-site {
    width: 17%;
}

.hm-rental-ocol-rent {
    width: 16%;
}

.hm-rental-ocol-amount {
    width: 14%;
}

.hm-rental-ocol-status {
    width: 11%;
}

.hm-rental-ocol-action {
    width: 10%;
}

.hm-rental-ogroup {
    border-bottom: 1px solid #e8e8e8;
}

.hm-rental-ohead td {
    padding: 7px 10px;
    background: #f7fbff;
    border-bottom: 1px solid #eef2f6;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

.hm-rental-otime {
    margin-right: 14px;
}

.hm-rental-ono {
    margin-right: 14px;
}

    .hm-rental-ono a {
        color: #666;
        font-family: Arial, sans-serif;
    }

        .hm-rental-ono a:hover {
            color: #108bee;
        }

.hm-rental-otype {
    float: right;
}

.hm-rental-obody td {
    padding: 12px 10px;
    vertical-align: top;
    line-height: 22px;
    border-bottom: 0;
}

.hm-rental-oc-goods {
    overflow: hidden;
}

.hm-rental-opic {
    float: left;
    display: block;
    width: 62px;
    height: 62px;
    margin-right: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    background: #fafafa;
    overflow: hidden;
    text-align: center;
}

    .hm-rental-opic img {
        width: 62px;
        height: 62px;
    }

.hm-rental-ogoods {
    overflow: hidden;
}

    .hm-rental-ogoods a {
        color: #31373c;
        line-height: 20px;
        display: block;
        max-height: 40px;
        overflow: hidden;
    }

        .hm-rental-ogoods a:hover {
            color: #108bee;
        }

    .hm-rental-ogoods span {
        color: #999;
        font-size: 12px;
    }

.hm-rental-osite {
    color: #31373c;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

.hm-rental-oamount {
    color: #e4393c;
    font-weight: bold;
    font-size: 15px;
    font-family: Arial, sans-serif;
}

.hm-rental-opaid {
    color: #52a352 !important;
}

.hm-rental-ocountdown {
    color: #f0a020 !important;
}

.hm-rental-ooverdue {
    color: #e4393c !important;
    font-weight: bold;
}

.hm-rental-oaction {
    padding-top: 2px;
}

    .hm-rental-oaction .hm-rental-btn, .hm-rental-oaction a {
        display: inline-block;
        margin: 0 0 6px;
    }

.hm-rental-myorder .hm-rental-empty {
    border: 1px solid #e8e8e8;
}

/* 会员中心三页位于 #main 内，宽度应跟随主栏而不是再次按视口计算。 */
.hm-rental-myorder, .hm-rental-order, .hm-rental-orderinfo {
    width: 100%;
    max-width: 100%;
    padding: 0 0 42px;
    box-sizing: border-box;
}

    .hm-rental-myorder .mod-main, .hm-rental-order .mod-main, .hm-rental-orderinfo .mod-main {
        margin-bottom: 16px;
        padding: 0;
        border: 1px solid #e2eaf1;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
        overflow: hidden;
    }

        .hm-rental-myorder .mod-main .mt, .hm-rental-order .mod-main .mt, .hm-rental-orderinfo .mod-main .mt {
            padding: 15px 18px;
        }

            .hm-rental-myorder .mod-main .mt h3, .hm-rental-order .mod-main .mt h3, .hm-rental-orderinfo .mod-main .mt h3 {
                color: #253746;
                font-size: 18px;
                line-height: 24px;
            }

/* ---------- 会员中心骨架：左侧菜单（下单 / 我的租赁订单 / 订单详情 三页共用） ----------
   这三页复用了会员中心的 #sub / #menu 结构，但 person_center.css 里那份是京东
   遗留样式：#menu 定宽 100px，「我的租赁订单」会被挤成两行；选中项和 hover 用的
   是站内并不存在的京东红 #e4393c。
   这里在 rental.css 内重写，而不是去引 person_center_haomei.css —— 后者还带
   select、.mod-main .mt h3 等全局 !important 规则，会连带改掉租赁表单的控件高度
   与卡片标题颜色。rental.css 只在租赁页加载，而 #content / #sub / #main 这三个
   ID 也只出现在租赁三页（母版页里没有），所以不会波及会员中心。
   选择器链与 person_center.css 逐字对齐，保证同权重下按加载顺序覆盖。 */

/* 左栏定宽 + 右栏自适应，替掉原来 #content 补角 + #main 负边距的老布局 */
#content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0 42px;
    box-sizing: border-box;
}

    /* 原 clearfix 的 :after 在 flex 容器里会变成一个新的弹性项，直接关掉 */
    #content:after {
        content: none;
        display: none;
    }

#sub {
    position: static;
    float: none;
    left: auto;
    flex: 0 0 200px;
    width: 200px;
}

#main {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
    overflow: visible;
}

#menu {
    width: 100%;
    padding: 16px 12px;
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: linear-gradient(180deg, #f1f8ff 0%, #fbfdff 48%, #fff 100%);
    box-shadow: 0 6px 20px rgba(35, 74, 108, .06);
    box-sizing: border-box;
}

    #menu dl {
        margin: 0;
        padding: 0;
    }

        #menu dl dt {
            height: 34px;
            margin-bottom: 10px;
            padding: 0 0 0 27px;
            border-bottom: 1px solid #e4eef7;
            color: #24364a;
            font-size: 15px;
            font-weight: 600;
            line-height: 34px;
            white-space: nowrap;
            background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='5.6' r='2.9' fill='none' stroke='%23108bee' stroke-width='1.6'/%3E%3Cpath d='M3.4 15.4C4 12.6 6.2 10.9 9 10.9s5 1.7 5.6 4.5' fill='none' stroke='%23108bee' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 7px;
        }

        #menu dl dd {
            margin: 0 0 2px;
            color: #52606d;
            line-height: normal;
        }

            #menu dl dd a {
                display: block;
                height: 38px;
                padding: 0 12px;
                border-radius: 6px;
                color: #52606d;
                font-size: 14px;
                line-height: 38px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: color .18s ease, background .18s ease, box-shadow .18s ease;
            }

                #menu dl dd a:hover {
                    color: #108bee;
                    background: #eaf5ff;
                    text-decoration: none;
                }

        /* 当前项：主题蓝渐变实心，取代京东红 */
        #menu dl dd.curr a {
            color: #fff;
            font-weight: 600;
            background: linear-gradient(135deg, #108bee 0%, #0d6fb8 100%);
            box-shadow: 0 4px 12px rgba(16, 139, 238, .26);
        }

            #menu dl dd.curr a:hover {
                color: #fff;
                background: linear-gradient(135deg, #1a94f2 0%, #1079c4 100%);
            }

/* ==========================================================================
   六、租赁订单详情（rental_order_info.aspx）
   ========================================================================== */

/* ---------- 订单概要 ---------- */
.hm-rental-oi-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    padding: 16px 18px;
}

.hm-rental-oi-no {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 18px;
    flex: 1 1 580px;
    min-width: 0;
    font-size: 14px;
    color: #31373c;
    line-height: 26px;
}

    .hm-rental-oi-number { white-space: nowrap; }

    .hm-rental-oi-number b {
        font-family: Arial, sans-serif;
        margin-left: 3px;
    }

.hm-rental-oi-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

    .hm-rental-oi-status .hm-rental-badge { margin-right: 0; }

.hm-rental-oi-time {
    color: #999;
    font-size: 12px;
    line-height: 26px;
    white-space: nowrap;
}

.hm-rental-oi-src {
    color: #999;
    font-size: 12px;
    line-height: 26px;
}

.hm-rental-oi-remark {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 8px 14px;
    background: #fffbf0;
    border: 1px solid #f5e0b0;
    border-radius: 6px;
    color: #8a6d3b;
    font-size: 12px;
    line-height: 20px;
}

.hm-rental-oi-countdown {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 8px 14px;
    background: #fef4f4;
    border: 1px solid #f3cccc;
    border-radius: 6px;
    color: #e4393c;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
}

.hm-rental-oi-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px;
    border-top: 1px solid #dce8f2;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 28px rgba(27, 57, 80, .12);
    box-sizing: border-box;
}

    .hm-rental-oi-foot .hm-rental-btn {
        margin: 0;
        white-space: nowrap;
    }

.hm-rental-page.hm-rental-orderinfo { padding-bottom: 112px; }

@media screen and (max-width: 767px) {
    .hm-rental-oi-foot { justify-content: center; gap: 6px; padding: 10px 8px; }
    .hm-rental-oi-foot .hm-rental-btn { flex: 1 1 0; min-width: 0; padding: 0 5px; font-size: 12px; }
}

/* ---------- 订单进度条（6 步，已取消/拒单时整体置灰） ---------- */
.hm-rental-stepbar {
    overflow: hidden;
    padding: 22px 12px 18px;
    margin-bottom: 16px;
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
}

.hm-rental-stepbar-item {
    float: left;
    width: 16.6667%;
    text-align: center;
    position: relative;
}

    .hm-rental-stepbar-item i {
        display: block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        margin: 0 auto 6px;
        border-radius: 50%;
        border: 1px solid #d3d5d6;
        background: #fff;
        color: #bbb;
        font-size: 13px;
        font-style: normal;
        font-weight: bold;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }

    .hm-rental-stepbar-item span {
        display: block;
        font-size: 12px;
        color: #999;
        line-height: 18px;
        padding: 0 2px;
    }
    /* 未完成节点之间的连接细线 */
    .hm-rental-stepbar-item:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 13px;
        width: 100%;
        height: 1px;
        background: #e8e8e8;
        z-index: 1;
    }

    .hm-rental-stepbar-item:last-child:after {
        display: none;
    }

.hm-rental-stepbar-done i {
    background: #52a352;
    border-color: #52a352;
    color: #fff;
}

.hm-rental-stepbar-done span {
    color: #52a352;
}

.hm-rental-stepbar-done:after {
    background: #52a352;
}

.hm-rental-stepbar-curr i {
    background: #108bee;
    border-color: #108bee;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(16,139,238,.16);
}

.hm-rental-stepbar-curr span {
    color: #108bee;
    font-weight: bold;
}

.hm-rental-stepbar-stop i {
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #bbb;
}

.hm-rental-stepbar-stop span {
    color: #bbb;
}

.hm-rental-stepbar-stopped {
    background: #fafafa;
}

    .hm-rental-stepbar-stopped .hm-rental-stepbar-item i {
        background: #f0f0f0;
        border-color: #e0e0e0;
        color: #bbb;
    }

    .hm-rental-stepbar-stopped .hm-rental-stepbar-item span {
        color: #bbb;
    }

/* ---------- 付款区 ---------- */
.hm-rental-pay-ways {
    overflow: hidden;
    margin: 0 -6px;
}

.hm-rental-pay-way {
    float: left;
    width: 33.33%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

    .hm-rental-pay-way > div, .hm-rental-pay-way {
        line-height: 22px;
    }

        .hm-rental-pay-way b {
            display: block;
            font-size: 13px;
            color: #31373c;
            margin-bottom: 4px;
        }

        .hm-rental-pay-way span {
            display: block;
            color: #666;
            font-size: 12px;
            line-height: 22px;
            word-break: break-all;
        }

.hm-rental-pay-acct {
    font-style: normal;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #e4393c;
    letter-spacing: 1px;
}

.hm-rental-pay-tip {
    margin-top: 6px;
}

.hm-rental-pickup {
    background: #f7fbff;
    border: 1px dashed #cfe0f0;
    border-radius: 3px;
    padding: 8px 12px;
    color: #666;
    line-height: 22px;
}

/* ---------- 订单动态时间轴 ---------- */
.hm-rental-orderinfo .hm-rental-timeline {
    padding: 6px 0 0 8px;
    margin: 0;
}

.hm-rental-orderinfo .hm-rental-timeline > .hm-rental-tl-item {
    position: relative;
    padding: 0 0 20px 24px;
    border-left: 1px solid #e8e8e8;
    margin-left: 4px;
}

.hm-rental-orderinfo .hm-rental-timeline > .hm-rental-tl-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.hm-rental-orderinfo .hm-rental-timeline > .hm-rental-tl-last:not(:last-child) {
    border-left-color: #108bee;
}

.hm-rental-tl-dot {
    position: absolute;
    left: -5px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d3d5d6;
    border: 1px solid #fff;
}

.hm-rental-tl-body {
    line-height: 20px;
}

    .hm-rental-tl-body b {
        display: block;
        font-size: 13px;
        color: #31373c;
    }

    .hm-rental-tl-body span {
        display: block;
        color: #666;
        font-size: 12px;
        line-height: 20px;
        word-break: break-all;
    }

    .hm-rental-tl-body em {
        display: block;
        color: #999;
        font-size: 12px;
        font-style: normal;
        margin-top: 2px;
    }
/* 最新一条（列表倒序渲染，故为第一个 li）高亮，客户一眼看到当前进度 */
.hm-rental-tl-last {
    border-left-color: #108bee;
}

    .hm-rental-tl-last .hm-rental-tl-dot {
        background: #108bee;
        width: 11px;
        height: 11px;
        left: -6px;
        top: 3px;
    }

    .hm-rental-tl-last .hm-rental-tl-body b {
        color: #108bee;
    }

/* ==========================================================================
   七、下单确认页（rental_order.aspx）
   ========================================================================== */

/* ---------- 已选设备摘要 ---------- */
.hm-rental-order-goods {
    overflow: hidden;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #e7edf2;
    border-radius: 7px;
    background: #fbfdff;
}

.hm-rental-order-goods-pic {
    float: left;
    width: 90px;
    height: 90px;
    margin-right: 12px;
    border: 1px solid #eee;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

    .hm-rental-order-goods-pic img {
        width: 90px;
        height: 90px;
    }

.hm-rental-order-goods-info {
    overflow: hidden;
}

.hm-rental-order-goods-name {
    margin: 0 0 6px;
    line-height: 22px;
}

    .hm-rental-order-goods-name a {
        color: #31373c;
        font-size: 14px;
        font-weight: bold;
    }

        .hm-rental-order-goods-name a:hover {
            color: #108bee;
        }

.hm-rental-order-goods-meta {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    margin: 0;
}

.hm-rental-order-goods-price {
    margin: 6px 0 0;
    color: #666;
    font-size: 12px;
}

    .hm-rental-order-goods-price em {
        font-style: normal;
        color: #e4393c;
        font-size: 18px;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

/* ---------- 试算刷新条 ---------- */
.hm-rental-calc-bar {
    padding: 10px 12px;
    margin-top: 6px;
    border-radius: 3px;
    background: #f7fbff;
    border: 1px dashed #cfe0f0;
    overflow: hidden;
}

    .hm-rental-calc-bar .hm-rental-btn {
        margin-right: 10px;
    }

/* ---------- 提交区 ---------- */
.hm-rental-submit {
    padding: 18px;
    margin-top: 4px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fafbfc;
}

    .hm-rental-submit .hm-rental-btn {
        margin: 0 6px 8px;
    }

.hm-rental-submit-reason {
    margin: 6px auto 0;
    max-width: 620px;
    padding: 8px 12px;
    background: #fef4f4;
    border: 1px solid #f3cccc;
    border-radius: 3px;
    color: #e4393c;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
}

.hm-rental-submit-tip {
    color: #999;
    font-size: 12px;
    line-height: 20px;
    margin: 6px auto 0;
    max-width: 620px;
    text-align: left;
}

.hm-rental-order-shell { width: 100%; }
.hm-rental-order-shell #main { flex: 1 1 100%; width: 100%; }
.hm-rental-page.hm-rental-order { padding-bottom: 160px; }
.hm-rental-order .hm-rental-submit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-top: 1px solid #dce8f2;
    border-radius: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 28px rgba(27, 57, 80, .12);
}
.hm-rental-submit-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--hm-pc-width, 1240px);
    margin: 0 auto;
    text-align: left;
}
.hm-rental-submit-summary span,
.hm-rental-submit-summary small { display: block; color: #6b7d89; font-size: 12px; }
.hm-rental-submit-summary strong { display: block; margin: 3px 0; color: #db5a23; font-size: 23px; line-height: 1.2; }
.hm-rental-submit-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hm-rental-submit-consent { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #405364; font-size: 13px; }
.hm-rental-submit-consent label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.hm-rental-submit-consent input { width: 17px; height: 17px; margin: 0; accent-color: #108bee; cursor: pointer; }
.hm-rental-submit-consent a { color: #087cc3; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hm-rental-consent-unavailable { color: #b25224; }
.hm-rental-consent-tip { margin: 0; padding: 7px 11px; border: 1px solid #f2d7ad; border-radius: 6px; background: #fff8ec; color: #85501b; font-size: 12px; line-height: 18px; }
.hm-rental-consent-tip[hidden] { display: none; }
.hm-rental-agreement-open { overflow: hidden; }
.hm-rental-agreement-overlay[hidden] { display: none; }
.hm-rental-agreement-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 35, 49, .62);
    box-sizing: border-box;
}
.hm-rental-agreement-modal {
    display: flex;
    flex-direction: column;
    width: 860px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(10, 29, 45, .28);
    overflow: hidden;
}
.hm-rental-agreement-modal-head,
.hm-rental-agreement-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; }
.hm-rental-agreement-modal-head { padding: 20px 28px; border-bottom: 1px solid #e8eef3; }
.hm-rental-agreement-modal-head h2 { margin: 0; color: #263948; font-size: 20px; line-height: 28px; }
.hm-rental-agreement-modal-head span { display: block; margin-top: 3px; color: #789; font-size: 12px; }
.hm-rental-agreement-modal-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f5f8; color: #536675; font-size: 28px; line-height: 30px; cursor: pointer; }
.hm-rental-agreement-modal-close:hover,
.hm-rental-agreement-modal-close:focus { background: #e4edf4; color: #087cc3; }
.hm-rental-agreement-modal .hm-rental-agreement-modal-scroll { flex: 1 1 auto; min-height: 0; padding: 22px 30px; overflow-y: auto; overflow-x: hidden; word-break: break-word; }
.hm-rental-agreement-modal-foot { padding: 14px 28px; border-top: 1px solid #e8eef3; background: #f8fbfd; }
.hm-rental-agreement-modal-foot span { color: #687d8c; font-size: 12px; }
.hm-rental-agreement-modal-foot .hm-rental-btn { margin: 0; }
.hm-rental-agreement-modal-foot .hm-rental-btn-primary { border-color: #108bee; background: #108bee; color: #fff; font-weight: bold; }
.hm-rental-agreement-modal-foot .hm-rental-btn-primary:hover { border-color: #008fd7; background: #008fd7; color: #fff; }
.hm-rental-submit-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hm-rental-order .hm-rental-submit-actions .hm-rental-btn { margin: 0; }
.hm-rental-order .hm-rental-submit-reason { max-width: var(--hm-pc-width, 1240px); margin: 0 auto 8px; border-color: #f2d7ad; background: #fff8ec; color: #85501b; border-radius: 6px; }
@media screen and (max-width: 767px) {
    .hm-rental-page.hm-rental-order { padding-bottom: 190px; }
    .hm-rental-order .hm-rental-submit { padding: 10px 12px; }
    .hm-rental-submit-inner { flex-wrap: wrap; gap: 8px; }
    .hm-rental-submit-summary { width: 100%; }
    .hm-rental-submit-summary strong { display: inline-block; margin: 0 0 0 6px; font-size: 19px; }
    .hm-rental-submit-summary small { display: none; }
    .hm-rental-submit-controls { align-items: stretch; width: 100%; }
    .hm-rental-submit-actions { width: 100%; }
    .hm-rental-submit-actions .hm-rental-btn { flex: 1; text-align: center; }
    .hm-rental-agreement-overlay { padding: 12px; }
    .hm-rental-agreement-modal { max-height: calc(100vh - 24px); }
    .hm-rental-agreement-modal-head { padding: 14px 16px; }
    .hm-rental-agreement-modal-head h2 { font-size: 17px; }
    .hm-rental-agreement-modal .hm-rental-agreement-modal-scroll { padding: 14px 18px; }
    .hm-rental-agreement-modal-foot { padding: 12px 16px; }
    .hm-rental-agreement-modal-foot span { display: none; }
}

/* ==========================================================================
   八、服务协议全文页（rental_agreement.aspx）
   ========================================================================== */

.hm-rental-agreement-box {
    border: 1px solid #e2eaf1;
    border-radius: 8px;
    background: #fff;
    padding: 38px 58px 32px;
    max-width: 1040px;
    margin: 0 auto;
    box-shadow: 0 5px 22px rgba(35, 74, 108, .05);
}

.hm-rental-agreement-hd {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 18px;
}

    .hm-rental-agreement-hd h1 {
        font-size: 24px;
        color: #31373c;
        margin: 0 0 10px;
        line-height: 34px;
        font-weight: bold;
    }

.hm-rental-agreement-meta {
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

    .hm-rental-agreement-meta span {
        margin: 0 10px;
        display: inline-block;
    }

.hm-rental-agreement-sign {
    margin-top: 8px;
    text-align: left;
}

    .hm-rental-agreement-sign th {
        width: 90px;
    }

.hm-rental-agreement-body {
    line-height: 28px;
    color: #31373c;
    font-size: 14px;
    padding: 6px 0 16px;
    word-break: break-all;
}

    .hm-rental-agreement-body p {
        margin: 0 0 10px;
    }

    .hm-rental-agreement-body h2, .hm-rental-agreement-body h3 {
        font-size: 15px;
        color: #31373c;
        margin: 16px 0 8px;
        line-height: 26px;
    }

    .hm-rental-agreement-body img {
        max-width: 100%;
        height: auto;
    }

    .hm-rental-agreement-body table {
        max-width: 100%;
    }

    .hm-rental-agreement-body ul, .hm-rental-agreement-body ol {
        padding-left: 22px;
        margin: 0 0 10px;
    }

    .hm-rental-agreement-body ul {
        list-style: disc;
    }

    .hm-rental-agreement-body ol {
        list-style: decimal;
    }

.hm-rental-agreement-ft {
    border-top: 1px dashed #e8e8e8;
    padding-top: 14px;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

    .hm-rental-agreement-ft p {
        margin: 0 0 4px;
    }

.hm-rental-agreement-print {
    color: #ccc;
    margin-top: 8px !important;
}

.hm-rental-agreement-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 14px 20px;
    border-top: 1px solid #dce8f2;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 28px rgba(27, 57, 80, .12);
    box-sizing: border-box;
}

    .hm-rental-agreement-btns .hm-rental-btn {
        margin: 0;
    }

.hm-rental-page.hm-rental-agreement { padding-bottom: 112px; }

@media screen and (max-width: 767px) {
    .hm-rental-agreement-btns { padding: 10px 12px; }
    .hm-rental-agreement-btns .hm-rental-btn { flex: 1 1 0; max-width: 220px; padding: 0 8px; }
}

/* 列表页说明区使用与其它区块一致的完整卡片，避免标题栏在内边距中二次缩进。 */
.hm-rental-list .hm-rental-tips {
    padding: 0;
    overflow: hidden;
    border-color: #e2eaf1;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(35, 74, 108, .035);
}

.hm-rental-list .hm-rental-tips-list {
    padding: 12px 20px 16px;
}

    .hm-rental-list .hm-rental-tips-list li {
        padding: 7px 0 7px 18px;
    }

        .hm-rental-list .hm-rental-tips-list li b {
            display: inline-block;
            min-width: 130px;
            color: #253746;
        }

        .hm-rental-list .hm-rental-tips-list li span {
            color: #71808c;
        }

@media screen and (min-width: 1680px) {
    .hm-rental-list .hm-rental-goods-card,
    .hm-rental-list .hm-rental-goods-grid-list .hm-rental-goods-card {
        width: 25%;
    }

    .hm-rental-goods-pic {
        height: 220px;
    }

        .hm-rental-goods-pic img {
            height: 218px;
            object-fit: contain;
        }

    .hm-rental-dtl-gallery {
        width: 420px;
    }

    .hm-rental-dtl-info {
        margin-left: 454px;
    }

    .hm-rental-dtl-pic, .hm-rental-dtl-pic img {
        width: 420px;
        height: 370px;
    }

    .hm-rental-dtl-video video {
        width: 420px;
    }
}

/* ==========================================================================
   九、窄屏适配（官网已有 pc-responsive.css，此处只处理租赁自有栅格，
       不介入全站断点，避免与现有响应式规则相互覆盖）
   ========================================================================== */

@media screen and (max-width: 1219px) {
    .hm-rental-page {
        width: 100%;
        padding: 12px 0 30px;
        box-sizing: border-box;
    }

    .hm-rental-goods-card {
        width: 33.33%;
    }

    .hm-rental-list .hm-rental-goods-card {
        width: 50%;
    }

    .hm-rental-cate-item {
        width: calc(33.33% - 14px);
    }

    .hm-rental-hero-text {
        width: 58%;
    }

    .hm-rental-hero-stats {
        width: 40%;
    }

    .hm-rental-dtl-gallery {
        width: 300px;
    }

    .hm-rental-dtl-pic, .hm-rental-dtl-pic img {
        width: 300px;
        height: 264px;
    }

    .hm-rental-dtl-info {
        margin-left: 322px;
    }

    .hm-rental-agreement-box {
        padding: 22px 20px;
    }
}

@media screen and (max-width: 991px) {
    .hm-rental-goods-card, .hm-rental-list .hm-rental-goods-card {
        width: 50%;
    }

    .hm-rental-cate-item {
        width: calc(50% - 14px);
    }

    .hm-rental-hero {
        padding: 20px;
    }

    .hm-rental-hero-text, .hm-rental-hero-stats {
        float: none;
        width: 100%;
    }

    .hm-rental-hero-stats {
        padding-top: 16px;
    }

    .hm-rental-hero-title {
        font-size: 22px;
        line-height: 32px;
    }

    .hm-rental-dtl-gallery, .hm-rental-dtl-info {
        float: none;
        width: auto;
        margin-left: 0;
    }

    .hm-rental-dtl-pic, .hm-rental-dtl-pic img {
        width: 100%;
        height: auto;
    }

    .hm-rental-search-tel {
        float: none;
        display: block;
        margin-top: 8px;
        line-height: 22px;
    }

    .hm-rental-search-input {
        width: 70%;
    }

    .hm-rental-input-wide, .hm-rental-textarea {
        width: 100%;
    }

    .hm-rental-select {
        width: 100%;
    }

    .hm-rental-ocol-site, .hm-rental-ocol-rent {
        display: none;
    }

    .hm-rental-stepbar-item span {
        font-size: 11px;
    }

    .hm-rental-rule-grid li {
        width: 50%;
        margin-bottom: 8px;
    }

    .hm-rental-cal-cell {
        width: 38px;
        height: 40px;
    }
}

/* ==========================================================================
   十、打印（协议页与订单详情页支持客户存档）
   ========================================================================== */

@media print {
    .hm-rental-agreement-btns { display: none !important; }
    .hm-rental-oi-foot { display: none !important; }
    .hm-rental-page.hm-rental-agreement { padding-bottom: 0; }
    .hm-rental-page.hm-rental-orderinfo { padding-bottom: 0; }
    .hm-rental-page {
        width: 100%;
        padding: 0;
    }

    .hm-rental-btn, .hm-rental-cta, .hm-rental-crumb, .hm-rental-pager {
        display: none !important;
    }

    .hm-rental-agreement-box, .hm-rental-panel, .hm-rental-block {
        border-color: #ccc;
        box-shadow: none;
    }
}

/* ==========================================================================
   十一、页面级标识类
   各页根节点携带一个唯一标识类，既作为后续页面级微调的钩子，
   也统一给出最小高度，避免内容过短时页脚上跳。
   ========================================================================== */

.hm-rental-index, .hm-rental-list, .hm-rental-detail {
    min-height: 620px;
}

.hm-rental-order, .hm-rental-myorder, .hm-rental-orderinfo {
    min-height: 420px;
}

.hm-rental-agreement {
    min-height: 520px;
    padding-bottom: 40px;
}
.hm-rental-periods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hm-rental-periods-unit {
    color: #66788a;
    font-size: 13px;
    margin-left: 5px;
}

.hm-rental-period {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #d8e5f0;
    border-radius: 8px;
    color: #34516a;
    background: #f8fbff;
    text-decoration: none;
}

.hm-rental-period-on,
.hm-rental-period:hover {
    border-color: #1689df;
    background: #eaf5ff;
    color: #0875c7;
}

.hm-rental-periods-note {
    color: #748697;
    font-size: 12px;
    line-height: 1.6;
}