/* 机器人租赁列表页（/robots）的筛选卡片：版式取自原型 pc-robots.html 的 .filter-card。
 *
 * 三条约定：
 * 1) 本文件只服务 /robots（模板 head 里单独引入），其它页面不受影响；
 * 2) 筛选状态全部由服务端渲染成链接（<a class="chip" href="/robots?...">），
 *    所以无 JS 也能点；局部刷新由 rental-market.js 负责，不在这里做交互；
 * 3) .r-market 改成单列 —— 筛选卡片取代了原来的左侧「成品整机分类」侧栏
 *    （rental.css 里是 grid-template-columns:220px 1fr，这里后加载所以压得住）。
 * 配色沿用站点租赁页令牌（#e7272d 主色），不引入新的色系。 */

/* 顶部 hero 与列表区之间的距离：原来由被删掉的「按使用场景快速租赁」「按品牌找成品整机」
   两个区块撑开，删掉后要显式补上，否则筛选卡片会贴着 hero。 */
.r-market {
    grid-template-columns: 1fr;
    margin-top: 24px
}

/* 结果卡片一行四个（原型 .grid 是 4 列，rental.css 里是 3 列）。
   断点必须在本文件里写全：本文件在 rental.css 之后加载，只补一个 1180 断点的话，
   宽度 ≤1000px 时会把 rental.css 的「2 列」覆盖成 3 列。 */
.r-cards {
    grid-template-columns: repeat(4, 1fr)
}

@media (max-width:1180px) {
    .r-cards {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:1000px) {
    .r-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:720px) {
    .r-cards {
        grid-template-columns: 1fr
    }
}

.filter-card {
    background: #fff;
    border: 0;
    border-radius: 10px;
    padding: 2px 18px 12px;
    margin-bottom: 14px;
    box-shadow: var(--gr-card-shadow)
}

.filter-card .fc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #f1f1f1
}

.filter-card .fc-row:last-child {
    border-bottom: 0;
    padding-bottom: 4px
}

.filter-card .fc-row .lb {
    flex: none;
    width: 108px;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    white-space: nowrap
}

.filter-card .fc-row .f-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0
}

/* 分类 / 场景 / 品牌都用同一枚 chip：选中是品牌色实心，未选中是浅灰底 */
.chip {
    padding: 6px 16px;
    background: #f5f6f8;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: background .15s, color .15s, border-color .15s
}

.chip:hover {
    background: #fdeceb;
    color: #e7272d
}

.chip.active {
    background: linear-gradient(135deg, #f23b32, #c6181f);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(230, 57, 57, .22)
}

.chip.active:hover {
    color: #fff
}

/* 品牌行：选项多，默认只占一行，点右侧「展开」再看全部 */
.fc-row-brand {
    align-items: flex-start
}

.fc-row-brand .lb {
    padding-top: 6px
}

.fc-row-brand .f-opts {
    max-height: 38px;
    overflow: hidden;
    transition: max-height .24s ease
}

.fc-row-brand .f-opts.open {
    max-height: 600px
}

.fc-more {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding-left: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #e7272d;
    cursor: pointer;
    white-space: nowrap;
    user-select: none
}

.fc-more .arw {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .22s
}

.fc-more.on .arw {
    transform: rotate(180deg)
}

.fc-more:hover {
    color: #c6181f
}

/* 综合筛选行：排序 tab + 服务城市 + 结果数 + 重置 */
.fc-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0
}

.sort-tabs {
    display: flex;
    gap: 6px
}

.sort-tabs .st {
    font-size: 13.5px;
    color: #555;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 7px;
    white-space: nowrap
}

.sort-tabs .st:hover {
    background: #f5f6f8
}

.sort-tabs .st.active {
    background: #fdeceb;
    color: #e7272d
}

.tb-sep {
    width: 1px;
    height: 20px;
    background: #ececec
}

/* 服务城市是唯一还需要表单的筛选（选项是「有供给的城市」列表）：选完立即生效，
   无 JS 时点「筛选」按钮仍然可用。 */
.fc-form {
    display: flex;
    align-items: center;
    gap: 8px
}

.fc-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #555
}

.fc-form select {
    height: 34px;
    max-width: 190px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    padding: 0 8px;
    font-size: 13.5px;
    color: #333;
    background: #fff
}

.fc-form button {
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    border-radius: 7px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer
}

.fc-form button:hover {
    border-color: #e7272d;
    color: #e7272d
}

/* 结果数独占一行、右对齐（原型里 view-count 就在综合筛选行下面单独一行）。
   必须用 order 把它排到最后：否则它会把「重置」顶到下一行左侧，看起来像排版坏了。 */
.fc-tools .fc-count {
    flex: 0 0 100%;
    order: 9;
    margin-left: 0;
    margin-top: 4px;
    text-align: right
}

.fc-reset {
    font-size: 13px;
    font-weight: 700;
    color: #e7272d
}

.fc-reset:hover {
    color: #c6181f
}

/* ---------- 综合筛选的补充控件：价格区间 / 租赁周期 / 地区（版式贴原型） ---------- */
.filter-card .fc-price {
    display: flex;
    align-items: center;
    gap: 6px
}

.filter-card .fc-price .lab {
    font-size: 13.5px;
    font-weight: 700;
    color: #555
}

.filter-card .fc-price input[type=number] {
    width: 78px;
    height: 34px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    padding: 0 8px;
    font-size: 13.5px;
    color: #333;
    background: #fff
}

.filter-card .fc-price input[type=number]:focus {
    border-color: #e7272d;
    outline: none
}

.filter-card .fc-price .dash {
    color: #bbb;
    font-size: 12px
}

/* 下拉面板（租赁周期 / 选择城市）：用原生 <details>，禁用 JS 也能展开，不需要额外脚本 */
.fc-panel {
    position: relative
}

.fc-panel>summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #555;
    background: #fff;
    white-space: nowrap
}

.fc-panel>summary::-webkit-details-marker {
    display: none
}

.fc-panel>summary b {
    font-weight: 700;
    color: #e7272d
}

.fc-panel[open]>summary {
    border-color: #e7272d;
    color: #e7272d
}

.fc-panel .arw {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .2s
}

.fc-panel[open] .arw {
    transform: rotate(180deg)
}

.fc-panel-body {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 320px;
    max-height: 320px;
    overflow: auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(17, 17, 26, .12);
    padding: 12px 14px
}

.fc-panel-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 260px
}

.fc-panel-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f1f1
}

.fc-panel-foot a {
    font-size: 13px;
    font-weight: 700;
    color: #e7272d
}

.fc-city-group {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f1f1
}

.fc-city-group:last-of-type {
    border-bottom: 0
}

.fc-group-name {
    flex: none;
    width: 44px;
    font-size: 12.5px;
    font-weight: 700;
    color: #888;
    padding-top: 6px
}

.fc-group-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0
}

.chip.sm {
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: 6px
}

.chip em {
    font-style: normal;
    font-size: 11px;
    color: #9a9aa5;
    margin-left: 5px
}

.chip.active em {
    color: rgba(255, 255, 255, .78)
}

@media (max-width:900px) {
    .filter-card {
        padding: 2px 14px 10px
    }

    .filter-card .fc-row {
        flex-wrap: wrap;
        gap: 8px
    }

    .filter-card .fc-row .lb {
        width: 100%
    }

    .fc-count {
        margin-left: 0
    }

    .fc-more {
        height: 30px;
        padding-left: 0
    }
}

/* ---------- 综合筛选行 / 地区行的最终版式（控件顺序与形态照原型 pc-robots.html） ----------
   这一段写在文件最后，专门覆盖前几轮迭代留下的规则（结果数独占行、重置当纯文字链接等）。 */

/* 结果数回到同一行最右：顺序 = 排序 → 价格 → 租赁周期 → 重置 → ……计数 */
.fc-tools .fc-count {
    flex: 0 0 auto;
    order: 0;
    margin-left: auto;
    margin-top: 0;
    text-align: right
}

/* 价格：一个带边框的输入组「价格 最低 — 最高」，组内输入去掉自己的边框 */
.filter-card .fc-price {
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    background: #fff
}

.filter-card .fc-price .lab {
    color: #555;
    font-weight: 700
}

/* 这里的 !important 是被迫的：commerce.css 有一条全站表单规则
   `input,select,textarea{min-height:42px;border:1px solid #ccc!important;
   border-radius:4px!important;background:#fff!important;padding:9px 12px!important}`，
   会把价格输入框变成 42px 高、自带边框和白底 —— 塞进 34px 高的 .fc-price 容器里就上下溢出，
   看起来是「大框里还套着两个带框的小格、占位文字被切掉」。
   !important 之间再比特异性：这里 (0,3,1) 强于全站那条 (0,0,1)，所以压得住。 */
.filter-card .fc-price input[type=number] {
    width: 68px;
    height: 28px;
    min-height: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 13.5px;
    line-height: 28px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield
}

/* number 输入默认带上下微调箭头，会挤掉「最低 / 最高」的显示宽度；这里靠键盘输入，去掉 */
.filter-card .fc-price input[type=number]::-webkit-outer-spin-button,
.filter-card .fc-price input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.filter-card .fc-price input[type=number]::placeholder {
    color: #b6b6bf
}

/* 价格不需要「确定」按钮（改完自动生效），但保留一个视觉隐藏的 submit：
   禁用 JS 时在输入框里回车仍然能提交。
   这里同样要 !important：commerce.css 的 `body button{display:inline-flex;min-height:42px}`
   会把按钮撑成 42px 高（clip 之外还留着盒模型，将来 clip 一改就会被看见）。 */
.fc-hide {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

/* 重置：白底按钮（原型是 <button>；这里用链接，保持禁用 JS 也能点 + 局部刷新可拦截） */
.fc-reset {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    background: #fff;
    color: #555;
    font-size: 13.5px;
    font-weight: 600
}

.fc-reset:hover {
    border-color: #e7272d;
    color: #e7272d
}

/* 供货 / 服务地区：省 / 市两个下拉 + 提示 + 右侧「清空地区」 */
.fc-region-dds {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0
}

/* 「省 / 市」是下拉框外的说明标签（贴原型：框里只放当前值） */
.fc-dd-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #888
}

/* 没选省份时「市」是灰的且不可点（原型：先选省份，再选城市） */
.fc-panel-off {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #eee;
    border-radius: 7px;
    background: #fafafa;
    color: #b6b6bf;
    cursor: not-allowed;
    white-space: nowrap
}

.fc-panel-off .k {
    color: #c2c2ca
}

.fc-region-hint {
    font-size: 12.5px;
    color: #9a9aa5
}

.fc-region-clear {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #666
}

.fc-region-clear:hover {
    color: #c6181f
}