/**
 * 医院聚合页样式（archive.css）
 *
 * 规范来源：.ai/FRONTEND-ARCHIVE.md 第 1 / 3.4 / 4.2 / 8 / 9 节
 * 复用 single.css 的设计 token（--unithmemd-*），所以本文件不重复定义 :root；
 * 所有选择器统一 unithmemd- 前缀，避免污染 Flatsome 主题。
 */

/* -------------------------------------------------------------------------
 * 1. 页面容器（与档案页同宽同间距：75vw + max-width 1800px + 左右 40px）
 * ---------------------------------------------------------------------- */
.unithmemd-archive {
    width: 75vw;
    max-width: 1800px; /* 一般屏幕 75vw 完全生效，超宽屏最多 1800px */
    margin: 0 auto;
    padding: 0 40px var(--unithmemd-space-5);
    font-family: var(--unithmemd-font);
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

/* -------------------------------------------------------------------------
 * 2. 页头（标题 "Browse Hospitals in China"）
 * ---------------------------------------------------------------------- */
.unithmemd-archive__header {
    margin: var(--unithmemd-space-4) 0;
    text-align: center;
}

.unithmemd-archive__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #000000;
}

/* 聚合页的面包屑：紧跟标题下方 8px，与搜索框之间 16px（档案页的基础值 12px / 8px 在这里被覆盖） */
.unithmemd-archive .unithmemd-breadcrumbs {
    margin: 8px 0 16px 0;
}

/* 数据合计（第 5 轮：位置移到科室轮播之后、卡片网格之前；第 9 轮：字号 / 字重 / 颜色按面包屑轮次调整） */
.unithmemd-archive__count {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    text-align: left;
}

/* 搜索栏与科室轮播之间的分隔线（第 5 轮；第 6 轮加深为 #666666） */
.unithmemd-archive__divider {
    border: none;
    border-top: 1px solid #666666;
    margin: var(--unithmemd-space-3) 0;
    width: 100%;
}

/* -------------------------------------------------------------------------
 * 3. 卡片网格（第 4.1 / 4.2 节：≥1100px 4 列 / 768-1100px 2 列 / ≤767px 1 列）
 * ---------------------------------------------------------------------- */
.unithmemd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1100px) {
    .unithmemd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .unithmemd-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* -------------------------------------------------------------------------
 * 3.1 短码 [unithmemd_cards]：卡片网格容器
 *     网格本身复用上面的 .unithmemd-grid（4 / 2 / 1 列响应式与聚合页完全一致）
 * ---------------------------------------------------------------------- */
.unithmemd-cards-shortcode {
    margin: 0 0 var(--unithmemd-space-3);
}

.unithmemd-cards-shortcode .unithmemd-grid {
    margin: 0;
}

/* -------------------------------------------------------------------------
 * 4. 卡片（第 3.4 节）
 * ---------------------------------------------------------------------- */
.unithmemd-card {
    display: flex;
    flex-direction: column;
    min-height: 400px; /* 等高卡片：内容少的也跟着对齐 */
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}

.unithmemd-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.unithmemd-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* 主图（轮播：横滑 + snap，隐藏滚动条） */
.unithmemd-card__gallery {
    flex: 0 0 auto; /* 不被 flex 压缩，永远保持 4:3 */
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    background: #f0f0f0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.unithmemd-card__gallery::-webkit-scrollbar {
    display: none;
}

.unithmemd-card__gallery img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    scroll-snap-align: start;
}

/* 卡片内容区 */
.unithmemd-card__body {
    flex: 1 1 auto; /* 占满图区之后的剩余高度 */
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* 第 1 行：城市 + 属性徽章 */
.unithmemd-card__row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.unithmemd-card__city {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.unithmemd-card__badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #1d9bf0;
    background: #ffffff;
    border: 1px solid #1d9bf0;
    border-radius: 4px;
}

/* 第 2 行：医院名 + 认证 | 星级 + 分数（左右对齐） */
.unithmemd-card__row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.unithmemd-card__name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.unithmemd-card__name {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unithmemd-card__verified {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: block;
}

.unithmemd-card__rating {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px; /* 原 14px：评分放大一档（★ 与分数一起变大） */
    color: #000000;
}

.unithmemd-card__rating-star {
    color: #000000;
}

/* 有评分：实心星用主色；无评分：空心星灰色
   （评分区域始终输出并占位，第 2 行右侧的属性徽章不会因此错位） */
.unithmemd-card__rating-star--filled {
    color: var(--unithmemd-primary);
}

.unithmemd-card__rating-star--empty {
    color: #cccccc;
}

.unithmemd-card__rating-score {
    font-weight: 600;
}

/* 第 3 行：标签 */
.unithmemd-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.unithmemd-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

/* 第 4 行：价格（From 16USD，黑色） */
.unithmemd-card__price {
    font-size: 14px;
    font-weight: 600;
    color: #000000; /* 原 #1a9d5e 绿色 → 黑色 */
    margin: 0;
    margin-top: auto; /* 价格贴底（等高卡片） */
}

/* -------------------------------------------------------------------------
 * 5. 分页（第 8 节：WordPress paginate_links()）
 * ---------------------------------------------------------------------- */
.unithmemd-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.unithmemd-pagination a,
.unithmemd-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
}

.unithmemd-pagination a:hover {
    color: var(--unithmemd-primary);
    border-color: var(--unithmemd-primary);
}

.unithmemd-pagination .current {
    background: #1a9d5e;
    color: #fff;
    border-color: #1a9d5e;
}

.unithmemd-pagination .dots {
    border-color: transparent;
}

/* -------------------------------------------------------------------------
 * 6. 空状态（第 9 节）
 * ---------------------------------------------------------------------- */
.unithmemd-empty {
    padding: var(--unithmemd-space-5) var(--unithmemd-space-2);
    text-align: center;
}

.unithmemd-empty p {
    margin: 0;
    font-size: 16px;
    color: var(--unithmemd-medium);
}

/* -------------------------------------------------------------------------
 * 7. 响应式：平板 768px ~ 1100px / 手机 max-width: 767px
 * （网格断点在第 3 节，这里只管容器与卡片内边距）
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .unithmemd-archive {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .unithmemd-archive {
        width: 100%;
        padding: 0 16px var(--unithmemd-space-5);
        font-size: 15px;
    }

    .unithmemd-archive__header {
        margin: var(--unithmemd-space-3) 0;
    }

    .unithmemd-archive__title {
        font-size: 22px;
    }

    .unithmemd-card__body {
        padding: 12px;
    }

    .unithmemd-pagination {
        margin-top: var(--unithmemd-space-4);
    }
}

/* -------------------------------------------------------------------------
 * 8. 搜索栏（第 5.4 节）
 * ---------------------------------------------------------------------- */
.unithmemd-search-bar {
    /* 图标本体（URL 编码的内联 SVG）：放在 CSS 里，避免被 HTML 白名单过滤器把 <svg> 清掉 */
    --unithmemd-icon-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201093%201024'%3E%3Cpath%20fill='%23fff'%20d='M765.430341%20214.830782c-145.796255-138.506443-386.360077-138.506443-539.446145%200s-145.796255%20364.490639%200%20502.997082c72.898128%2065.608315%20167.665694%20102.057379%20269.723072%20102.057378%20102.057379%200%20196.824945-36.449064%20269.723073-102.057378%2072.898128-65.608315%20109.347192-153.086068%20109.347192-247.853635%200-94.767566-36.449064-189.535132-109.347192-255.143447z%20m-619.634086%20575.895209c-138.506443-131.21663-182.245319-328.041575-109.347191-502.997081%2080.18794-174.955507%20255.143447-284.302698%20459.258204-284.302698s379.070264%20109.347192%20459.258205%20284.302698%2036.449064%20371.780451-109.347192%20502.997081c-189.535132%20182.245319-502.997081%20182.245319-699.822026%200z%20m925.806222%20211.404571c-14.579626%2014.579626-29.159251%2021.869438-51.028689%2021.869438-14.579626%200-36.449064-7.289813-51.028689-21.869438l-94.767566-87.477754c-29.159251-21.869438-29.159251-65.608315%200-87.477753%2029.159251-21.869438%2072.898128-21.869438%2094.767566%200l94.767566%2087.477753c14.579626%2014.579626%2021.869438%2029.159251%2021.869438%2043.738877%207.289813%2014.579626%200%2029.159251-14.579626%2043.738877z'/%3E%3C/svg%3E");
    --unithmemd-icon-filter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20fill='%23fff'%20d='M810.666667%20170.666667a42.666667%2042.666667%200%200%201%2042.666666%2042.666666v85.333334a42.666667%2042.666667%200%201%201-85.333333%200V213.333333a42.666667%2042.666667%200%200%201%2042.666667-42.666666zM554.666667%20725.333333a42.666667%2042.666667%200%201%200-85.333334%200v85.333334a42.666667%2042.666667%200%201%200%2085.333334%200v-85.333334zM512%20170.666667a42.666667%2042.666667%200%200%201%2042.666667%2042.666666v170.666667a42.666667%2042.666667%200%201%201-85.333334%200V213.333333a42.666667%2042.666667%200%200%201%2042.666667-42.666666zM256%20213.333333a42.666667%2042.666667%200%200%200-85.333333%200v170.666667a42.666667%2042.666667%200%201%200%2085.333333%200V213.333333zM256%20725.333333a42.666667%2042.666667%200%201%200-85.333333%200v85.333334a42.666667%2042.666667%200%201%200%2085.333333%200v-85.333334zM853.333333%20640a42.666667%2042.666667%200%201%200-85.333333%200v170.666667a42.666667%2042.666667%200%201%200%2085.333333%200v-170.666667z'/%3E%3Cpath%20fill='%23fff'%20d='M682.666667%20384a128%20128%200%201%200%20256%200%20128%20128%200%200%200-256%200zM512%20768a128%20128%200%201%201%200-256%20128%20128%200%200%201%200%20256zM213.333333%20597.333333a128%20128%200%201%201%200-256%20128%20128%200%200%201%200%20256z'/%3E%3C/svg%3E");

    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto var(--unithmemd-space-4);
    padding: 6px 6px 6px 20px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
}

/* 键盘聚焦时整条栏亮一个焦点环（输入框自身 outline 已清掉，仍保证可见） */
.unithmemd-search-bar:focus-within {
    border-color: var(--unithmemd-primary);
    box-shadow: 0 0 0 3px var(--unithmemd-primary-light);
}

/* 图标壳（放大镜 / 筛选）：PHP 只输出空壳 <span>，图形由 mask 提供（第 5 轮换成 se.svg / saixuan.svg）
   整块 !important：Flatsome 的全局 button 规则会压住尺寸 / 字体 / 行高，导致图标被挤变形 */
.unithmemd-search-bar__glyph {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
}

.unithmemd-search-bar__glyph--search {
    -webkit-mask-image: var(--unithmemd-icon-search) !important;
    mask-image: var(--unithmemd-icon-search) !important;
}

.unithmemd-search-bar__glyph--filter {
    -webkit-mask-image: var(--unithmemd-icon-filter) !important;
    mask-image: var(--unithmemd-icon-filter) !important;
}

/* 兜底：若站点上是旧模板（仍带内联 SVG），不要再画一遍 */
.unithmemd-search-bar svg {
    display: none;
}

/* 给读屏用的 label：视觉上隐藏但保留关联 */
.unithmemd-search-bar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 输入框：Flatsome 的 input[type="search"] 权重（0,1,1）比单个 class（0,1,0）高，
   下面这些属性全部 !important 覆盖；值就是我们要的值，所以只是防主题顶掉 */
.unithmemd-search-bar__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 10px 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: #333 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* 清掉主题给 input[type="search"] 加的放大镜背景图（第 5 轮） */
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.unithmemd-search-bar__input::placeholder {
    color: var(--unithmemd-light);
}

/* Safari / Chrome 原生搜索框自带的放大镜与清除按钮：一并去掉（整条栏只保留两个按钮图标） */
.unithmemd-search-bar__input::-webkit-search-cancel-button {
    display: none;
}

.unithmemd-search-bar__input::-webkit-search-decoration {
    display: none;
}

/* 图标按钮（筛选 / 提交）：整块 !important —— Flatsome 有全局 button 规则
   （width / height / min-width / min-height / padding / font-size / line-height / text-transform …），
   不加会被整块压掉，按钮尺寸错乱、图标被挤变形 */
.unithmemd-search-bar__icon {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--unithmemd-medium) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: color 0.2s, background 0.2s !important;
}

/* （图标尺寸由上面的 .unithmemd-search-bar__glyph 控制） */

/* 顺序说明：__submit 的两条必须排在这条之后 —— 双方权重相同（都是 0,2,0），
   加了 !important 后同样是「后写的赢」，否则提交按钮的 hover 底色会被这里的灰色顶掉 */
.unithmemd-search-bar__icon:hover {
    color: #000000 !important;
    background: var(--unithmemd-bg) !important;
}

/* 提交按钮：浅灰底（第 5 轮由绿色改为浅灰） */
.unithmemd-search-bar__icon--submit {
    background: #f4f4f4 !important;
    color: #333333 !important;
}

.unithmemd-search-bar__icon--submit:hover {
    background: #e8e8e8 !important;
    color: #000000 !important;
}

/* 主题（Flatsome）会给 :focus 加橙色方块，这里统一清掉 */
.unithmemd-search-bar__icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

.unithmemd-search-bar__icon--submit:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 键盘导航时用自绘焦点环（鼠标点击不会出现） */
.unithmemd-search-bar__icon:focus-visible {
    outline: 2px solid var(--unithmemd-primary) !important;
    outline-offset: 2px !important;
}

.unithmemd-search-bar__icon--submit:focus-visible {
    outline: 2px solid var(--unithmemd-primary) !important;
    outline-offset: 2px !important;
}

@media (max-width: 767px) {
    .unithmemd-search-bar {
        padding: 4px 4px 4px 16px;
    }

    .unithmemd-search-bar__icon {
        width: 36px !important;
        height: 36px !important;
    }
}

/* -------------------------------------------------------------------------
 * 9. 科室横向轮播（第 7.4 节）
 * ---------------------------------------------------------------------- */
.unithmemd-departments {
    position: relative;
    width: 100%;
    margin: 0 auto var(--unithmemd-space-4); /* 底部间距保留：与卡片网格拉开 */
    padding: 0 45px; /* 给左右箭头让位（照 UX Block） */
    display: flex;
    align-items: center;
    background-color: #ffffff;
}

.unithmemd-departments__track {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 12px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.unithmemd-departments__track::-webkit-scrollbar {
    display: none;
}

/* 每个科室：7 等分（gap 20px × 6 = 120px） */
.unithmemd-dept,
.unithmemd-dept:hover,
.unithmemd-dept:focus,
.unithmemd-dept:active {
    flex: 0 0 calc((100% - 120px) / 7);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    /* !important：压住 Flatsome 的 a:hover 下划线（主题那边也用 !important，所以这里要靠 .unithmemd-dept:hover 这类更高权重选择器） */
    text-decoration: none !important;
}

.unithmemd-dept__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    overflow: hidden;
}

.unithmemd-dept__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.unithmemd-dept__name {
    font-size: 14px;
    line-height: 1.3;
    color: #333333;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

/* hover：图标框上浮 + 阴影加大 + 青绿边框；文字变青绿 */
.unithmemd-dept:hover .unithmemd-dept__icon {
    border-color: #008489;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.unithmemd-dept:hover .unithmemd-dept__name {
    color: #008489;
}

/* 当前选中的科室（?hospital_department={slug}） */
.unithmemd-dept.is-active .unithmemd-dept__icon {
    border-color: #008489;
    background-color: #e8f6ee;
}

.unithmemd-dept.is-active .unithmemd-dept__name {
    color: #008489;
}

/* 左右箭头：34×34 白底圆 + 边框 + 阴影（照 UX Block） */
.unithmemd-departments__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    user-select: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    z-index: 1;
}

/* 箭头符号用 unicode（❮ \276E / ❯ \276F）：模板里的内联 SVG 会被 HTML 白名单过滤器清掉，这里隐藏并自绘 */
.unithmemd-departments__nav svg {
    display: none;
}

.unithmemd-departments__nav--prev::before {
    content: '\276E';
}

.unithmemd-departments__nav--next::before {
    content: '\276F';
}

.unithmemd-departments__nav:hover {
    background-color: #f7f7f7;
    border-color: #b0b0b0;
    color: #333;
}

/* 已经在最左 / 最右：archive.js 会禁用对应箭头 */
.unithmemd-departments__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.unithmemd-departments__nav--prev {
    left: 5px;
}

.unithmemd-departments__nav--next {
    right: 5px;
}

/* 手机端（UX Block 用的就是 768px 断点）：每屏 4 个 + 整体尺寸收一档 */
@media (max-width: 768px) {
    .unithmemd-departments {
        padding: 0 30px;
    }

    .unithmemd-departments__track {
        gap: 15px;
    }

    /* 四个状态都要覆盖，否则 hover 时会被桌面那条更高权重的规则顶回 7 等分 */
    .unithmemd-dept,
    .unithmemd-dept:hover,
    .unithmemd-dept:focus,
    .unithmemd-dept:active {
        flex: 0 0 calc((100% - 45px) / 4);
    }

    .unithmemd-dept__icon {
        width: 50px;
        height: 50px;
    }

    .unithmemd-dept__icon img {
        width: 26px;
        height: 26px;
    }

    .unithmemd-dept__name {
        font-size: 12px;
    }

    .unithmemd-departments__nav {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .unithmemd-departments__nav--prev {
        left: 2px;
    }

    .unithmemd-departments__nav--next {
        right: 2px;
    }
}

/* -------------------------------------------------------------------------
 * 10. 筛选弹窗（第 6.1 节；结构 / 尺寸与评论、报价弹窗保持一致）
 * ---------------------------------------------------------------------- */
.unithmemd-filter-modal[hidden] {
    display: none;
}

.unithmemd-filter-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.unithmemd-filter-modal__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.unithmemd-filter-modal__content {
    position: relative;
    width: 80vw;
    min-width: 320px;
    max-width: 1400px;
    height: auto;
    max-height: 90vh;
    margin: auto;
    padding: 40px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: var(--unithmemd-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: unithmemd-filter-slide-down 0.25s ease-out;
}

/* 第 6.1 节：全屏弹窗「从顶部滑下」 */
@keyframes unithmemd-filter-slide-down {
    from {
        transform: translateY(-16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unithmemd-filter-modal__content {
        animation: none;
    }
}

.unithmemd-filter-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #000000;
    background: transparent;
    border: none;
    cursor: pointer;
}

.unithmemd-filter-modal__close:hover {
    color: var(--unithmemd-primary);
}

.unithmemd-filter-modal__heading {
    margin: 0 0 var(--unithmemd-space-2);
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    text-align: center;
}

/* Sort 与 Filter 之间的分隔线（第 6.1 节） */
.unithmemd-filter-modal__heading--filter {
    margin-top: var(--unithmemd-space-3);
    padding-top: var(--unithmemd-space-3);
    border-top: 1px solid var(--unithmemd-border);
}

/* Sort：radio 视觉上隐藏，label 当按钮用（纯 CSS，无 JS） */
.unithmemd-filter-sort {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.unithmemd-filter-sort__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.unithmemd-filter-sort__btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 14px;
    color: #333333;
    background: #ffffff;
    border: 1px solid var(--unithmemd-border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.unithmemd-filter-sort__btn:hover {
    border-color: #000000;
}

/* 选中态（第 6 轮：去绿色 → 白底 + 黑边框 + 黑字） */
.unithmemd-filter-sort__input:checked + .unithmemd-filter-sort__btn {
    color: #000000;
    background: #ffffff;
    border-color: #000000;
    font-weight: 600;
}

.unithmemd-filter-sort__input:focus-visible + .unithmemd-filter-sort__btn {
    outline: 2px solid var(--unithmemd-primary);
    outline-offset: 2px;
}

/* Filter：五个下拉（第 6.3 节） */
.unithmemd-filter-fields {
    display: grid;
    gap: var(--unithmemd-space-2);
}

.unithmemd-filter-field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.unithmemd-filter-field__label {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

/* 下拉框：Flatsome 给 select 设过固定 height / line-height，会把文字压扁裁半，
   下面这些属性加 !important 覆盖（值就是我们要的值） */
.unithmemd-filter-field__select {
    width: 100%;
    height: auto !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #333333;
    background: #ffffff;
    border: 1px solid #000000; /* 第 6 轮：边框改黑 */
    border-radius: var(--unithmemd-radius-sm);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.unithmemd-filter-field__select:focus {
    border-color: #000000;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* 该分类法下还没有 term：禁用下拉，避免出现点了没反应的控件 */
.unithmemd-filter-field__select:disabled {
    color: var(--unithmemd-light);
    background: var(--unithmemd-bg);
    cursor: not-allowed;
}

/* Apply Filters / Reset */
.unithmemd-filter-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: var(--unithmemd-space-3);
}

/* Apply Filters（第 6 轮：去绿色 → 白底 + 黑边框 + 黑字；不再使用 unithmemd-btn--primary） */
.unithmemd-filter-form__apply {
    width: 100%;
    max-width: 420px;
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: var(--unithmemd-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.unithmemd-filter-form__apply:hover {
    background: #f4f4f4;
}

.unithmemd-filter-form__reset {
    font-size: 14px;
    color: var(--unithmemd-medium);
    text-decoration: underline;
}

.unithmemd-filter-form__reset:hover {
    color: var(--unithmemd-primary);
}

@media (max-width: 767px) {
    .unithmemd-filter-modal {
        padding: 24px 12px;
    }

    .unithmemd-filter-modal__content {
        width: 100%;
        padding: 32px 20px 24px;
    }

    .unithmemd-filter-modal__close {
        top: 10px;
        right: 10px;
    }

    /* 手机端：标签在上、下拉在下 */
    .unithmemd-filter-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .unithmemd-filter-sort {
        gap: 8px;
    }

    .unithmemd-filter-sort__btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}