/* ===== 整體 filter 區域外觀 ===== */
.filter-section {
    border-radius: 14px;
    padding: 18px 18px 22px;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 60%, #f7fafc 100%);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.filter-section {
    /*border: 1px solid #FFFFFF;*/
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #E8F1F5;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


/*過濾 篩選器部分*/
/* 过滤区域样式 */
.filter-section h5 {
    color: #004085;
    font-weight: bold;
}


/* 产品分类标题 */
.product-category {
    color: #004085;
    font-weight: bold;
    margin-bottom: 10px;
}


/* 按钮样式调整 */
#apply_price_filter,
#apply_battery_filter,
#apply_keyword_filter,
#clear_filters1,
#clear_filters2,
.clear_filters,
.copy-button {
    background-color: #004A7C;
    color: #fff;
    /*font-weight: bold;*/
    /*border: 1px solid white;*/
    /*margin-bottom: 20px;*/
}

#apply_price_filter:hover,
#apply_battery_filter:hover,
#apply_keyword_filter:hover,
#clear_filters1:hover,
#clear_filters2:hover,
.clear_filters:hover,
.copy-button:hover {
    background-color: #007EA7;
    color: #fff;
    font-weight: bold;
    /*margin-bottom: 20px;*/
}


/* 上方標題列 */
.filter-top-row {
    margin-bottom: 12px;
}

.filter-main-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.filter-main-title-icon {
    font-size: 1.2rem;
}

.filter-main-title-text {
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.03em;
}

.filter-main-title-sub {
    font-size: 0.83rem;
    color: #8a8f99;
}

.filter-last-updated {
    font-size: 0.82rem;
    color: #7a7f88;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.02);
}

/* ===== 每一個 filter 區塊 ===== */
.filter-block {
    border-top: 1px dashed #e1e4ea;
    padding-top: 10px;
    margin-top: 10px;
}

/* header：可點擊展開 / 收合 */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    cursor: pointer;
    border-radius: 10px;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

.filter-header:hover {
    background: #f3f6ff;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

/* 展開狀態 */
.filter-block.collapsed-open .filter-header {
    background: #eef3ff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.32);
}

/* 左側標題區 */
.filter-header-left {
    display: flex;
    flex-direction: column;
}

.filter-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: #21242a;
}

.filter-block.collapsed-open .filter-title {
    color: #2563eb; /* 藍色主色 */
}

.filter-subtitle {
    font-size: 0.8rem;
    color: #8a8f99;
}

/* 右側：tag + 箭頭 */
.filter-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 折疊箭頭 */
.filter-toggle-icon {
    font-size: 0.9rem;
    transition:
        transform 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
    color: #7a7f88;
    opacity: 0.8;
}

.filter-block.collapsed-open .filter-toggle-icon {
    transform: rotate(90deg);
    color: #2563eb;
    opacity: 1;
}

/* 預設：body 收起來 */
.filter-block .filter-body {
    display: none;
    padding-top: 8px;
    padding-left: 4px;
    padding-right: 4px;
}

/* ===== 已套用條件的標籤列 ===== */
.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.78rem;
    justify-content: flex-end;
    max-width: 260px;
}

/* 沒有任何標籤時的提示字樣 */
.selected-tags:empty::before {
    content: "尚未套用條件";
    color: #c0c4cf;
    font-style: italic;
}

/* 單一標籤 */
.selected-tag {
    background: #eff4ff;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 2px 8px 2px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: #1d4ed8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.08s ease;
}

.selected-tag:hover {
    background: #e0ecff;
    border-color: rgba(37, 99, 235, 0.7);
    transform: translateY(-1px);
}

/* 標籤文字 */
.selected-tag .tag-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 標籤右側的 X */
.selected-tag .tag-remove {
    font-weight: 700;
    cursor: pointer;
    padding-left: 4px;
    font-size: 0.9em;
    opacity: 0.8;
}

.selected-tag .tag-remove:hover {
    opacity: 1;
}

/* 提示訊息 */
.message {
    font-size: 0.78rem;
    color: #ffffff;
    margin-top: 4px;
}

/* 小 hint 文字 */
.hint-text {
    font-size: 0.78rem;
    color: #1e88e5;
}

/* 清除篩選的按鈕 */
.clear-filters {
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 4px 16px;
    border: 1px solid #d4d9e2;
    background: #ffffff;
    color: #4b5563;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.clear-filters:hover {
    background: #f3f4f6;
    border-color: #c4cad7;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* 「套用」按鈕 */
.apply-button {
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 4px 16px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #1e88e5 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
    transition:
        box-shadow 0.15s ease,
        transform 0.08s ease,
        filter 0.15s ease;
}

.apply-button:hover {
    filter: brightness(1.03);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.apply-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

/* 手機版 / 小螢幕微調 */
@media (max-width: 576px) {
    .filter-main-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-main-title-sub {
        margin-top: 2px;
    }

    .filter-last-updated {
        margin-top: 6px;
        text-align: left;
    }

    .selected-tags {
        max-width: 180px;
    }

    .selected-tag .tag-text {
        max-width: 90px;
    }
}








/* =========================
   篩選區外框（配色比照描述區）
   ========================= */

/* 外框卡片：同 gg-desc-card */
.gg-filter-card {
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  background: #f8f9ff;
  overflow: hidden;
  margin-top: 1.5rem;
}

/* 標題列（總開關）：同 gg-desc-header 漸層 */
.gg-filter-header {
  padding: 0.6rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #e3f2fd 0%, #e8eaf6 100%);
  cursor: pointer;
}

.gg-filter-header-text {
  display: flex;
  flex-direction: column;
}

/* 小標籤：同 gg-desc-label */
.gg-filter-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e88e5;
}

/* 大標題：同 gg-desc-title */
.gg-filter-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #005691;
}

/* 右側：最後更新時間 + 收折按鈕 */
.gg-filter-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 最後更新時間：字色跟描述內容一樣 #455a64 */
.filter-last-updated {
  font-size: 0.8rem;
  color: #455a64;
  white-space: nowrap;
}

/* 收合按鈕：比照 gg-desc-toggle-btn */
.gg-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #3949ab;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(57,73,171,0.3);
  background: rgba(255,255,255,0.6);
}

.gg-filter-toggle-icon {
  font-size: 0.8rem;
}

/* 內容區：比照 gg-desc-body */
.gg-filter-body {
  padding: 0.75rem 0.9rem 0.9rem;
  font-size: 0.9rem;
  color: #455a64;
  background: #ffffff;
  border-top: 1px solid #e0e7ff;
}

/* 上方的 🔍 標題列稍微排整齊 */
.filter-top-row .filter-main-title {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.filter-main-title-icon {
  font-size: 1rem;
}

.filter-main-title-text {
  font-weight: 600;
  font-size: 0.95rem;
}

.filter-main-title-sub {
  font-size: 0.8rem;
  color: #607d8b;
}

/* 手機上排版稍微鬆一點：比照描述區的感覺 */
@media (max-width: 576px) {
  .gg-filter-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .gg-filter-right {
    width: 100%;
    justify-content: space-between;
  }

  .filter-last-updated {
    font-size: 0.75rem;
  }

  .gg-filter-title {
    font-size: 0.95rem;
  }

  .gg-filter-body {
    font-size: 0.92rem;
  }
}





/* ===== 產品名稱篩選器：手機版客製排版 ===== */

@media (max-width: 768px) {
  /* 整體改成直排：一個類別一列 */
  .filter-block[data-filter-group="product_name"] .row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .filter-block[data-filter-group="product_name"] .col {
    display: flex;               /* 左類別 + 右型號欄 */
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;   /* 類別之間分隔線 */
  }

  .filter-block[data-filter-group="product_name"] .col:last-child {
    border-bottom: none;
  }

  /* 類別區：固定一個寬度，不要太寬避免擠右邊 */
  .filter-block[data-filter-group="product_name"] .product-category {
    flex: 0 0 2.95em;        /* 固定寬度，大約 4.5 字寬，可自行調整 */
    max-width: 2.95em;       /* 限制最大寬度，不讓它再變寬 */
    font-weight: 600;
    margin-bottom: 0;
    white-space: normal;    /* 允許自動換行 */
    word-break: break-word; /* 太長時強制斷行，避免擠到右邊欄 */
    font-size: 0.9rem;
}

  /* 右邊型號欄：吃掉剩餘空間，整體靠右 */
  .filter-block[data-filter-group="product_name"] .product-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;       /* 右邊整欄都向右對齊 */
    gap: 0;
    padding-right: 0.25rem;      /* 讓文字不要貼太邊，可視覺調整 */
  }

  /* 單一型號：一列 = 左 checkbox+文字 / 右價格 */
  .filter-block[data-filter-group="product_name"] .product-item {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;   /* 往右堆 */
    padding: 0.25rem 0;
    border-bottom: 1px dashed #eceff1;  /* 選項之間的淺色虛線 */
    font-size: 0.9rem;
  }

  .filter-block[data-filter-group="product_name"] .product-item:last-child {
    border-bottom: none;
  }

  /* 左側：checkbox + 型號文字 → 向右對齊 */
  .filter-block[data-filter-group="product_name"] .product-item label {
    flex: 1;
    text-align: right;           /* 型號文字靠右 */
    white-space: nowrap;         /* 避免型號換行（可依需求拿掉） */
  }

  /* 右側：價格區 → 靠最右邊 */
  .filter-block[data-filter-group="product_name"] .product-item .hint-text {
    flex: 0 0 auto;
    margin-left: 0.5rem;         /* 和型號文字拉開一點距離 */
    font-size: 0.75rem;
    text-align: right;
    white-space: nowrap;         /* 防止價格拆兩行 */
  }
}