/* ==================================================
   Google CSE 搜尋框樣式覆寫 (由外部 CSS 載入以符合 CSP)
   ================================================== */

/* 1. 設定 Placeholder 的文字顏色 */
#WebsiteSearchForm input.gsc-input::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

/* 2. 徹底移除輸入框內的 Google 預設背景圖案與排版干擾 */
#WebsiteSearchForm input.gsc-input.remove-gsc-bg,
#WebsiteSearchForm input.gsc-input {
    background: #ffffff !important; /* 強制覆蓋為純白底色，消滅背景圖 */
    text-indent: 0 !important; /* 確保文字不會被往右邊擠 */
}

/* 3. 強制顯示放大鏡的父層 <td> */
#WebsiteSearchForm td.gsc-search-button {
    display: table-cell !important;
    width: 1% !important;
    vertical-align: middle !important;
}

/* 4. 設定放大鏡按鈕的本體外觀 */
#WebsiteSearchForm button.gsc-search-button,
#WebsiteSearchForm button.gsc-search-button-v2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 45px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important; /* 設定按鈕底色為白色 */
    border: 0px solid #ccc !important; /* 依需求可改成 1px 加邊框 */
    cursor: pointer !important;
}

    /* 5. 【關鍵修復】把按鈕內的 SVG 放大鏡圖示改成深灰色，解決白底白字問題 */
    #WebsiteSearchForm button.gsc-search-button-v2 svg {
        fill: #555555 !important;
    }

    /* (可選) 滑鼠移過去時的按鈕視覺回饋 */
    #WebsiteSearchForm button.gsc-search-button-v2:hover {
        background-color: #f1f1f1 !important;
    }