/* 确认订单页：站内壳层（.wrap/.shop-top/.head/.crumb）复用 rental-booking.css，这里只放本页样式。
   配色沿用站点令牌：--gr-red #e7272d / --gr-red-deep #c9131b，不引入其它色系。 */

.checkout-page {
    /* 底部不再留白：页脚上方已经有站脚自身的间距，这里再来 60px 会显得很空 */
    padding: 18px 0 0
}

.checkout-tip {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #fff7f5;
    color: #8a5a00;
    font-size: 13px
}

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 18px;
    align-items: start
}

.co-card {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid #eceded;
    border-radius: 10px;
    background: #fff
}

/* 付款详情固定：sticky 必须挂在**网格子项**（aside.co-right）上，不能挂在子项内部的卡片上。
   原来挂在卡片上，而 .checkout-grid 用了 align-items:start（子项高度 = 内容高度），
   卡片的父元素就是与它等高的 aside → 可移动空间为 0，视觉上完全没固定。
   实测（CDP）：aside 与卡片同高 519px；改成挂在 aside 上后滚动时卡片停在 top:16px。 */
.co-right {
    position: sticky;
    top: 16px;
    align-self: start
}

.co-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.co-head h2 {
    margin: 0;
    font-size: 16px
}

.co-head span {
    display: flex;
    align-items: center;
    gap: 14px
}

.co-link {
    border: 0;
    background: none;
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer
}

.co-link:hover {
    text-decoration: underline
}

.co-count {
    color: #5f6874;
    font-size: 12px
}

.co-btn {
    border: 1px solid #d8dbe0;
    background: #fff;
    color: #313a46;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer
}

.co-btn.primary {
    border-color: #c9131b;
    background: #c9131b;
    color: #fff
}

/* 支付按钮沿用原型的 .btn-submit 版式（满宽 / 52px / 品牌红渐变）；
   渐变取站点主按钮既有写法，不引入原型 #FF6B5B→#E63939 那套红。 */
.co-btn.pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 16px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef3439, var(--gr-red-deep));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(230, 57, 57, .24);
    cursor: pointer
}

.co-btn.pay em {
    font-style: normal
}

/* 不可支付时必须「明显是灰的」：只降透明度的话红底仍然像可点的品牌色，
   用户会一直去点。灰底白字是电商里最直白的「这步现在走不了」。 */
.co-btn.pay:disabled {
    background: #c8ccd2;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none
}

/* 服务地址卡片 */
.addr-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.addr-card {
    position: relative;
    padding: 14px 16px 15px;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    overflow: hidden
}

/* commerce.css 有一条 `body button{display:inline-flex;align-items:center;justify-content:center}`
   （运行时注入、排在页面 CSS 之后），会把这张卡片排成**一行**并强制居中。
   卡片是「地址 / 详细地址 / 名称 + 电话」三行文字，所以改回块级：
   单类 `.addr-card` 实测压不过它，必须用 `.addr-list .addr-card`（两个类）才稳定生效。 */
.addr-list .addr-card {
    display: block
}

.addr-card:hover {
    border-color: #c9131b
}

/* 选中态用「红框 + 右上角对勾」，不再整块浅红铺底：一屏多张卡片时更容易一眼找到当前地址 */
.addr-card.on {
    border-color: #c9131b;
    background: #fffbfa
}

.addr-card.on:after {
    content: '✓';
    position: absolute;
    right: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: #c9131b;
    color: #fff;
    font-size: 11px;
    border-radius: 0 7px 0 8px
}

.addr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.addr-head b {
    color: #313a46;
    font-size: 14px
}

.addr-phone {
    color: #5f6874;
    font-size: 13px
}

.addr-card b,
.addr-card small {
    display: block
}

.addr-card .addr-line {
    /* 地址卡片三行版式：地址（省市区）/ 详细地址 / 名称 + 电话。
       span 默认是行内元素，不加 block 三行会挤在同一行里。 */
    display: block;
    margin-top: 6px;
    color: #5f6874;
    font-size: 12px;
    line-height: 1.6
}

.addr-card .addr-line.addr-head {
    /* 名称 + 电话 + 标签仍要共行，特异性高于上面的 block */
    display: flex
}

.addr-card .addr-line:first-child {
    margin-top: 0
}

.addr-card .addr-region {
    color: #313a46;
    font-size: 13px
}

.addr-card .addr-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f3f5;
    color: #5a636e;
    font-size: 11px;
    line-height: 1.6
}

.addr-card .addr-tag.default {
    background: #fff1ed;
    color: #c9131b
}

.addr-empty {
    grid-column: 1 / -1;
    padding: 16px;
    border-radius: 8px;
    background: #f7f8fa;
    color: #5a636e;
    font-size: 13px
}

.addr-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e6e8ec
}

.addr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.addr-grid label.wide {
    grid-column: 1 / -1
}

.addr-grid label span {
    display: block;
    margin-bottom: 5px;
    color: #5f6874;
    font-size: 12px
}

.addr-grid input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #d8dbe0;
    border-radius: 6px
}

.addr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px
}

.addr-actions em {
    color: #b5252b;
    font-size: 12px;
    font-style: normal
}

/* 商品行 */
.goods-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 108px 110px;
    gap: 14px;
    align-items: center
}

.goods-cover {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: #f2f3f5;
    overflow: hidden
}

.goods-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.goods-title {
    display: block;
    font-size: 14px
}

.goods-attrs {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: #5f6874;
    font-size: 12px;
    line-height: 1.7
}

/* 数量控件就放在商品行里（京东/大疆的位置）：− 1 + ，到上下限时按钮置灰 */
.goods-qty {
    display: flex;
    align-items: center
}

.co-stepper {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 1px solid #d8dbe0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff
}

.co-stepper .co-step {
    display: grid;
    place-items: center;
    width: 32px;
    height: 100%;
    padding: 0;
    border: 0;
    background: #fff;
    color: #313a46;
    cursor: pointer
}

.co-stepper .co-step:hover:not(:disabled) {
    background: #f5f6f8
}

.co-stepper .co-step:disabled {
    color: #cacfd7;
    cursor: not-allowed
}

.co-stepper input {
    box-sizing: border-box;
    width: 42px;
    height: 100%;
    padding: 0;
    border: 0;
    border-left: 1px solid #e6e8ec;
    border-right: 1px solid #e6e8ec;
    background: #fff;
    color: #313a46;
    font-size: 13px;
    text-align: center
}

/* 数量输入框是普通输入框，不是待校验的表单域：站点公共样式（commerce.css 的
   `input:focus{border-color:var(--gr-brand)!important}` 与 `input:focus-visible{outline:2px solid}`）
   会给它套上「红边 + 红色光晕」，看起来像填错了。这里覆盖掉，只保留灰色聚焦提示。
   用 !important + 更高特异度，否则会被后加载的 commerce.css 压回去。 */
.co-stepper input:focus,
.co-stepper input:focus-visible {
    border-color: #e6e8ec !important;
    box-shadow: none !important;
    outline: none
}

.co-stepper:focus-within {
    border-color: #9aa3ae
}

/* 「+」到库存上限时只做视觉变灰，按钮仍可点（点了要弹提示），所以不能真的 disabled。 */
.co-stepper .co-step.at-limit {
    color: #cacfd7
}

/* 气泡提示 .gr-toast 已于 2026-09-20 迁到全站通用样式 ui.css（本页与其它页面共用一套）。 */

.goods-price {
    text-align: right
}

.goods-price b {
    display: block;
    color: #b5252b;
    font-size: 15px
}

.goods-price small {
    color: #5f6874;
    font-size: 12px
}

.goods-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e6e8ec;
    color: #5f6874;
    font-size: 12px
}

/* 本页承担的下单选择：租赁日期 / 服务地区 / 技术人员 / 数量。
   租期与数量必须在本页可改，否则「确认页显示的金额」和「实际下单金额」会不一致。 */
.co-config {
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px dashed #e6e8ec
}

.co-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #f5f6f8
}

.co-row:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.co-row>b {
    padding-top: 9px;
    color: #313a46;
    font-size: 13px
}

.co-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.co-field>input[type=date] {
    box-sizing: border-box;
    width: 152px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid #d8dbe0;
    border-radius: 6px;
    font-size: 13px
}

.co-field>.spec-input {
    box-sizing: border-box;
    width: min(320px, 100%);
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d8dbe0;
    border-radius: 6px;
    font-size: 13px
}

.co-hint {
    flex-basis: 100%;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.6
}

/* 由方案/套餐决定、用户不能改的项（如「已包含技术人员跟随」）用只读标签呈现，
   给一个点了没用的选择控件会让人以为能改。 */
.co-fixed {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 6px;
    background: #f5f6f8;
    color: #5f6874;
    font-size: 13px
}

.co-fixed.ok {
    background: #fff5f5;
    color: #c9131b;
    font-weight: 700
}

/* 技术人员与服务地区复用 rental-booking.css 的 .spec-chips，这里只压小一点尺寸 */
.co-field .spec-chips label {
    padding: 6px 13px;
    font-size: 13px
}

/* 规则与保障 */
.rule-block p {
    margin: 0 0 10px;
    color: #4c5461;
    font-size: 13px;
    line-height: 1.8
}

.rule-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.rule-list li {
    color: #5f6874;
    font-size: 12px;
    line-height: 1.9
}

.rule-list li:before {
    content: '·';
    margin-right: 5px;
    color: #c9131b;
    font-weight: 900
}

/* 订单备注：默认一行，由 rental-checkout.js 的 autoGrowRemark() 按内容撑高，
   所以禁用拖拽（resize）与内部滚动，避免和自动高度打架。 */
#remark {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #d8dbe0;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.7;
    overflow: hidden;
    resize: none
}

/* 「增配技术员」后面的单价：套餐条里 `.spec-chips.packages label b` 是 flex 布局（套餐名 + 标价右对齐），
   会把这枚 <b> 也变成块级；这里按更高特异度改回行内，让它跟在文字后面。 */
.spec-chips.packages label b.eng-fee {
    display: inline;
    margin-left: 4px;
    color: #e1252d;
    font-weight: 800
}

/* 套餐条上的技术人员标签：颜色对应 EngineerState（含 / 可加配 / 不含）。 */
.pkg-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 11px;
    line-height: 1.6
}

.pkg-tag.included {
    background: #eef7f1;
    color: #1a7f47
}

.pkg-tag.optional {
    background: #fff7e6;
    color: #a86200
}

.pkg-tag.none {
    background: #f2f4f7;
    color: #6b7686
}

/* 费用明细卡片：版式对齐原型 pc-order.html 的 .ck-card（白底、大圆角、阴影，
   标题带品牌红竖条）。右栏不再用 .co-card，1px 描边的卡片样式只留给左栏。 */
.ck-card {
    margin-bottom: 0;
    padding: 24px 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(27, 27, 31, .03), 0 6px 20px rgba(27, 27, 31, .05)
}

.ck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px
}

.ck-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #313a46;
    font-size: 18px;
    font-weight: 700
}

.ck-head h3 i {
    display: inline-block;
    width: 5px;
    height: 19px;
    border-radius: 3px;
    background: var(--gr-red)
}

.sum-lines {
    border-top: 1px solid #f0f1f3
}

.sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f6f8;
    color: #5f6874;
    font-size: 14px
}

.sum-row b {
    color: #313a46;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.sum-row.discount b {
    color: #b5252b
}

/* .sum-row 用了 display:flex，会盖掉浏览器默认的 [hidden]{display:none}，必须显式声明 */
.sum-row[hidden] {
    display: none
}

.sum-val {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

/* 押金「可退」标签：绿色沿用站点既有成功色（rental-booking.css .result.success 同色系） */
.sum-ref {
    padding: 2px 7px;
    border-radius: 5px;
    background: #eef9f2;
    color: #167743;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

#couponSelect {
    max-width: 190px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d8dbe0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px
}

.sum-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #f0f1f3
}

.sum-total .lb {
    color: #313a46;
    font-size: 15px;
    font-weight: 600
}

.sum-total .v {
    color: #b5252b;
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

/* 支付方式：原型的 .pay-block / .pay-opt 圆形单选卡片 */
.pay-block {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f1f3
}

.pay-h {
    margin-bottom: 10px;
    color: #313a46;
    font-size: 14px;
    font-weight: 700
}

.pay-opts {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pay-opts .pay-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid #d8dbe0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer
}

.pay-opts .pay-opt:hover {
    border-color: #c9131b
}

.pay-opts .pay-opt:has(input:checked) {
    border-color: #c9131b;
    background: #fff5f5
}

.pay-opt .rd {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #c6c7ce;
    border-radius: 50%;
    background: #fff
}

.pay-opt:has(input:checked) .rd {
    border-color: #c9131b;
    background: #c9131b;
    box-shadow: 0 0 0 3px rgba(230, 57, 57, .14)
}

.pay-opt:has(input:checked) .rd:after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg)
}

.pay-opt .pi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 800
}

.pay-opt .pi.ali {
    background: #1677ff
}

.pay-opt .pi.wx {
    background: #07c160
}

.pay-opt .tx {
    min-width: 0
}

.pay-opt .tx b {
    display: block;
    color: #313a46;
    font-size: 14px;
    font-weight: 700
}

.pay-opt:has(input:checked) .tx b {
    color: #c9131b
}

.pay-opt .tx i {
    display: block;
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal
}

/* 视觉隐藏单选框。用 `.pay-opts .pay-opt input` 压过 commerce.css 里
   `input[type=radio]{width/height:16px!important}`（同为 !important 时比特异度） */
.pay-opts .pay-opt input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none
}

.pay-note {
    margin: 12px 0 0;
    color: #5f6874;
    font-size: 12px;
    line-height: 1.7
}

/* 弹窗骨架（.gr-dialog）在全站通用样式 ui.css，收银台专有样式（.wb-pay-*）在 pay-dialog.css，
   与会员中心租赁订单共用同一份，本页不再定义弹窗样式 */

@media (max-width:1080px) {
    .checkout-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .co-right {
        position: static
    }

    .addr-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:680px) {

    .addr-list,
    .addr-grid,
    .goods-row {
        grid-template-columns: minmax(0, 1fr)
    }

    .goods-cover {
        width: 100%;
        height: 180px
    }

    .goods-price {
        text-align: right
    }

    .co-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px
    }

    .co-row>b {
        padding-top: 0
    }
}