/* 搜尋／列表頁樣式：篩選列、結果列、結果 grid、空狀態 */
/* 為什麼：顏色一律引用 variables.css 變數，字級間距用 rem，禁止直接色碼 */

.search-page {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* ===== 篩選列 ===== */
.search-filter {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* 關鍵字列：輸入框 + 搜尋鈕 */
.search-filter__row--search {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.search-filter__keyword {
    position: relative;
    flex: 1 1 16rem;
    display: flex;
    align-items: center;
}

.search-filter__keyword-icon {
    position: absolute;
    left: var(--space-md);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    opacity: 0.6;
}

.search-filter__input {
    width: 100%;
    padding: 0.7rem var(--space-md) 0.7rem 2.75rem;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition);
}

.search-filter__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.search-filter__submit {
    flex: 0 0 auto;
}

/* 每個篩選群組：標題 + 控制項 */
.search-filter__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.search-filter__legend {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-soft);
}

/* 桌面用 select */
.search-filter__select {
    width: 100%;
    max-width: 22rem;
    padding: 0.6rem var(--space-md);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.search-filter__select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* chip grid：手機篩選用（一排可點標籤） */
.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.chip-btn {
    padding: 0.45rem 1rem;
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.chip-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 選中狀態：主色底白字 */
.chip-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.search-filter__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* 預設（手機優先）：顯示 chip grid，隱藏 select 與桌面提交按鈕 */
.search-filter__select {
    display: none;
}

.chip-grid {
    display: flex;
}

.search-filter__actions {
    display: none;
}

/* 買 / 租 chip 全程顯示（buy/rent 選項少，桌面亦用 chip） */
.chip-grid--deal {
    display: flex;
}

/* ===== 結果列 ===== */
.search-result-head {
    margin-bottom: var(--space-lg);
}

.search-result-head__count {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.search-result-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* 條件摘要標籤：點擊移除該條件 */
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.3rem 0.8rem;
    font-size: var(--fs-sm);
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: var(--radius-pill);
    transition: all var(--transition);
}

.filter-tag:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.filter-tag__x {
    width: 0.8rem;
    height: 0.8rem;
}

.filter-tag--clear {
    background: transparent;
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
}

.filter-tag--clear:hover {
    background: var(--color-bg-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ===== 結果 grid ===== */
.search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

/* 搜尋頁樓盤列表：間距略縮，令手機雙欄更緊湊 */
.search-page .home-grid {
    gap: var(--space-sm);
}

/* ===== 空狀態 ===== */
.search-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
}

.search-empty__icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-md);
    opacity: 0.7;
}

.search-empty__title {
    font-size: var(--fs-lg);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.search-empty__text {
    color: var(--color-text-soft);
    margin-bottom: var(--space-lg);
}

.search-empty__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Tablet：768 ~ 1024 ===== */
@media (min-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Desktop：>1024 改用 select，隱藏 region/district/type 的 chip grid ===== */
@media (min-width: 1025px) {
    .search-filter__select {
        display: block;
    }

    /* 桌面隱藏地區／細分／類型的 chip grid（改用 select） */
    .chip-grid--region,
    .chip-grid--district,
    .chip-grid--type {
        display: none;
    }

    /* 桌面顯示「套用篩選 / 清除」動作列 */
    .search-filter__actions {
        display: flex;
    }

    .search-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}