/**
 * 手機版分類搜尋條（fate-mobile-filter-bar）
 *
 * 首頁上方的「搜尋 + 縣市 + 排序」整合為單一區塊：
 *   第 1 列：搜尋輸入 + 搜尋鈕
 *   第 2 列：縣市、排序
 *   第 3 列：店家數／同步時間與「重設」
 *
 * 縣市與排序使用原生 <select>，因此不需要額外 JS 或抽屜；
 * 選取後即送出。
 *
 * 只在 <=767px 生效；桌機版完全不受影響（桌機由 .toolbar 呈現）。
 * 桌機版同時隱藏僅供手機使用的表單控制項。
 */

.fate-mobile-filter-bar {
    display: none;
}

@media (max-width: 767px) {
    /* ── 手機：隱藏桌機的篩選列、分類頁籤與搜尋摘要，改由分類搜尋條呈現 ── */
    body .hero > .toolbar,
    body .layout-main > .hero > .toolbar,
    body .home-listing-nav,
    body .fate-search-summary {
        display: none !important;
    }

    /* .hero 的主要內容（搜尋摘要＋篩選列）在手機版已全部隱藏，但 DC Inside
       主題把 .hero 與 .sidebar-card 併在同一條規則裡套用卡片外觀
       （background/border/border-radius/box-shadow）。少了內容撐開高度後，
       該卡片外觀仍在原地畫出一個約 38x36px 的空白小白方塊。
       這裡直接讓 .hero 不參與版面，連同卡片外觀一起收起；.hero 內已無可見
       內容，故不影響任何資訊呈現。 */
    body .hero,
    body .layout-main > .hero {
        display: none !important;
    }

    /* 無 JS 時的送出鈕（<noscript> 內，不會影響有 JS 的版面）。 */
    .fate-mobile-filter-native {
        display: block;
        margin: 0 0 0.7rem;
    }

    /* ── 分類搜尋條本體 ── */
    .fate-mobile-filter-bar {
        display: block;
        position: sticky;
        /* 貼在行動版頂端列下方（沒有頂端列時為 0）。 */
        top: var(--fate-mobile-filter-sticky-top, 0px);
        z-index: 30;
        margin: 0 0 0.7rem;
        padding: 0.55rem 0.6rem;
        border: 1px solid var(--line, #ccc);
        border-radius: 12px;
        background: var(--card, #fff);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    }

    .fate-mobile-filter-bar__row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }

    .fate-mobile-filter-bar__row + .fate-mobile-filter-bar__row {
        margin-top: 0.45rem;
    }

    /* 搜尋列：輸入框吃掉剩餘寬度，送出鈕固定寬度。 */
    .fate-mobile-filter-bar__field {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    .fate-mobile-filter-bar__icon {
        position: absolute;
        left: 0.6rem;
        display: inline-flex;
        color: var(--muted, #666);
        pointer-events: none;
    }

    .fate-mobile-filter-bar__icon svg {
        display: block;
        width: 1rem;
        height: 1rem;
    }

    .fate-mobile-filter-bar__input {
        width: 100%;
        min-width: 0;
        padding: 0.5rem 0.6rem 0.5rem 2rem;
        border: 1px solid var(--line, #ccc);
        border-radius: 999px;
        background: var(--bg2, #f5f5f5);
        color: var(--fg, #333);
        font: inherit;
        font-size: 0.92rem;
        line-height: 1.3;
        -webkit-appearance: none;
        appearance: none;
    }

    .fate-mobile-filter-bar__input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    .fate-mobile-filter-bar__input:focus {
        outline: none;
        border-color: var(--accent, #0066cc);
        background: var(--card, #fff);
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
    }

    .fate-mobile-filter-bar__submit {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.95rem;
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--accent, #0066cc);
        color: #fff;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.3;
        cursor: pointer;
        white-space: nowrap;
    }

    .fate-mobile-filter-bar__submit:active {
        filter: brightness(0.94);
    }

    /* 三個篩選欄位等寬，select 可壓縮，永不撐破容器。 */
    .fate-mobile-filter-bar__slot {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        display: block;
    }

    .fate-mobile-filter-bar__slot select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 0.42rem 0.4rem;
        border: 1px solid var(--line, #ccc);
        border-radius: 8px;
        background: var(--bg2, #f5f5f5);
        color: var(--fg, #333);
        font: inherit;
        font-size: 0.82rem;
        line-height: 1.3;
        text-overflow: ellipsis;
    }

    /* ── 店家數／同步時間與重設 ── */
    .fate-mobile-filter-bar__meta {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        margin-top: 0.45rem;
        color: var(--muted, #666);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .fate-mobile-filter-bar__meta-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .fate-mobile-filter-bar__meta-text strong {
        color: var(--fg, #333);
        font-weight: 600;
    }

    .fate-mobile-filter-bar__clear {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0.15rem 0.5rem;
        border: 1px solid var(--line, #ccc);
        border-radius: 999px;
        background: transparent;
        color: var(--muted, #666);
        font-size: 0.76rem;
        line-height: 1.4;
        text-decoration: none;
        white-space: nowrap;
    }
}

/* 極窄機種：再把字級與內距收一級，避免三個欄位擠壓變形。 */
@media (max-width: 359px) {
    .fate-mobile-filter-bar__slot select {
        font-size: 0.76rem;
        padding: 0.4rem 0.3rem;
    }

    .fate-mobile-filter-bar__submit {
        padding: 0.5rem 0.7rem;
        font-size: 0.86rem;
    }
}