/**
 * mobile-toolbar.css
 *
 * 【1.0.0-sprint4.29】新增按鈕[3]「詢價」（點擊會依商品頁當前這隻寵物動態
 * 組出LINE私訊連結，見 interest-list.js initMobileToolbarInquiryButton()）。
 * 這顆一樣是自訂上傳圖示、一樣需要強制變白，索性把sprint4.28那條原本只
 * 套用在按鈕[2]的規則，改成套用在「所有自訂上傳圖示按鈕」，之後不管後台
 * 再加第幾顆自訂按鈕都會自動變白、不用每次都回來加一條新的CSS規則，只有
 * 按鈕[1]（LINE）明確排除、保留品牌綠色。詳細規則見下面
 * `.wd-toolbar .wd-custom-icon img` 那段。
 *
 * 【1.0.0-sprint4.28 現場修正】客人回報：深色底、客服泡泡位移都已生效（確認
 * 背景色實測為 rgb(51,51,51)＝#333，客服泡泡也確實往上推開，沒有再擋住
 * 「預約」按鈕），但「預約」（按鈕[2]）那顆圖示本身沒有跟著其他圖示變白。
 *
 * 直接檢查現場DOM找到原因：跟前4顆內建圖示（用CSS字體圖示、顏色由
 * `color`屬性控制）不一樣，按鈕[1]「官方LINE」和按鈕[2]「預約」都是後台
 * 上傳的「自訂按鈕圖標」，本質是一個`<img src="xxx.svg">`——圖片本身的
 * 顏色是SVG檔案內部寫死的，瀏覽器把它當一般圖片載入，CSS的`color`屬性
 * 完全影響不到圖片內部的顏色，不管加不加`!important`都一樣，這是CSS的
 * 圖片本質限制，不是載入順序或優先權的問題（跟sprint4.27修正的問題不同）。
 *
 * 另外實測發現按鈕[2]目前上傳的圖示檔名是
 * phone_forwarded_24dp_1F1F1F_...，是一個深色（#1F1F1F）的「來電轉接」
 * 電話圖示，不是我原本準備、已經放在你同步資料夾裡的白色日曆圖示
 * （wka-toolbar-calendar-icon.svg）——不確定是你另外自己上傳了這顆，還是
 * 媒體庫選到舊圖，煩請確認一下這是不是你要的圖示，如果要換成日曆圖示，
 * 後台上傳那張白色SVG即可（不管上傳哪張圖，下面這條filter都會自動把它
 * 轉成純白色，不用特地找白底圖）。
 *
 * 修法：用CSS的`filter: brightness(0) invert(1)`，不管原圖是什麼顏色，
 * 強制轉成純白色剪影，這樣不用依賴原始SVG檔案的顏色，未來換圖示也不用
 * 擔心顏色問題。只限定套用在按鈕[2]（`.wd-toolbar-link-2`），刻意不套用到
 * 按鈕[1]（LINE），因為LINE圖示是品牌識別色（綠色），要保留原色，不能被
 * 強制變白。
 *
 * 1.0.0-sprint4.24 現場修正：手機版底部固定導覽列（WoodMart主題內建的
 * 「移動端底部導覽欄」功能，後台：主題設定 → 一般的 → 移動端底部導覽欄）
 * 背景色調整。
 *
 * 背景：客人回報手機版很多使用者滑到底也不會發現這排固定選單（原本是白底，
 * 幾乎融入頁面背景），加上後台已經新增一顆「📅 預約」自訂按鈕（按鈕[2]，
 * 網址設定為 /booking/，商品頁上點擊時會被 interest-list.js 攔截改成跟
 * 商品頁「預約互動」按鈕一樣的動態行為，見該檔案 initMobileToolbarButton()）。
 * 改成跟「預約互動」按鈕同一組橘色系，讓使用者一眼注意到整排都是「可以點、
 * 可以問」的操作列，跟站上其他呼籲行動按鈕的視覺語言一致。
 *
 * 這支CSS要「全站」載入（不像 interest-list.css 只在商品頁/預約頁載入），
 * 因為這排底部導覽列是WoodMart主題全站共用的元件，首頁、分類頁都會出現。
 * 掛載的地方見 class-interest-list.php enqueue_mobile_toolbar_style()。
 *
 * 【1.0.0-sprint4.27 現場修正】原本這裡故意不用 !important，改用很晚的
 * enqueue priority（200）想讓這支CSS排在主題樣式之後輸出、靠cascade自然
 * 蓋過去——但sprint4.26上線後客人現場看發現完全沒生效，背景還是白的。
 * 直接在現場網頁檢查實際輸出的 `<link>` 順序，發現我們這支CSS檔案反而排
 * 在主題的base.css「前面」，跟priority=200預期的「排最後面」剛好相反，
 * 代表這個網站有什麼東西（快取／前端優化類的外掛，這個網站上有裝
 * Accelerator，但沒有進一步逐一排查是不是就是它）會重新調整CSS輸出順序，
 * 單靠調整enqueue順序在這個網站上不可靠。改回用 !important——跟sprint4.23
 * 那次「盡量不用!important」的教訓不衝突：那次是我們自己兩顆按鈕的CSS
 * 打架，這次是「載入順序本身就不可控」的情況，!important在這裡才是
 * 務實、穩定的做法。
 *
 * 【1.0.0-sprint4.26 現場修正】上面這段原本是橘色系（跟「預約互動」按鈕
 * 同一組漸層），實際上線後客人現場看覺得橘色跟頁面上緣的促銷提示列
 * （「互動請先預約｜以免撲空、造成誤會與不便!」，同樣是暖色系）撞色、
 * 太多橘色混在一起，改成深灰底（#333）＋白字白圖示。這個顏色跟我們外掛
 * 既有的「已選寵物」提示列（.wka-floating-bar，同樣用 #333）視覺呼應，
 * 對比最強、辨識度最高，也不會跟站上其他暖色系元素混淆。
 */
.wd-toolbar {
    background: #333 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15) !important;
}

.wd-toolbar,
.wd-toolbar .wd-toolbar-label,
.wd-toolbar .wd-tools-icon {
    color: #fff !important;
}

/* 購物車數量小紅點：深色底上改用品牌橘色圓圈＋白字，維持對比，同時把
   「有東西/有動作」的橘色線索保留在導覽列裡。 */
.wd-toolbar .wd-cart-number {
    background-color: #ff9f43 !important;
    color: #fff !important;
}

/* 【1.0.0-sprint4.28】所有自訂上傳圖示按鈕（後台上傳圖標，WoodMart會加上
   wd-custom-icon這個class）本質是<img>，`color`管不到，強制轉成純白剪影，
   跟其他字體圖示的白色統一。
   【1.0.0-sprint4.29】原本只寫死套用在按鈕[2]（.wd-toolbar-link-2），這次
   新增按鈕[3]「詢價」後，改成套用在所有.wd-custom-icon（用WoodMart自己
   輸出的class，不用管是按鈕幾號），之後後台不管再加第幾顆自訂按鈕都會
   自動變白。 */
.wd-toolbar .wd-custom-icon img {
    filter: brightness(0) invert(1);
}

/* 例外：按鈕[1]「官方LINE」保留品牌綠色，不強制變白。選擇器故意比上面
   那條多疊一層（.wd-toolbar .wd-toolbar-link-1 ...），確保不管CSS規則
   最後實際輸出順序如何，靠權重（specificity）就能穩定蓋過去，不用依賴
   「寫在後面」這件事（sprint4.27學到這個網站的CSS順序不完全可控）。 */
.wd-toolbar .wd-toolbar-link-1 .wd-custom-icon img {
    filter: none;
}

/*
 * 【1.0.0-sprint4.25 現場修正】導覽列上線後客人回報：最右邊那顆「預約」
 * 按鈕被右下角浮動的Chaty客服泡泡（[LINE]頻道那顆圓形按鈕，外掛：Chaty，
 * class .chaty-widget.right-position）整個蓋住、按不到。
 *
 * 原因：Chaty泡泡本來就是固定在畫面右下角（bottom:25px; right:25px），
 * 這排底部導覽列是這次sprint4.24才新增的，兩者本來沒有互相考慮過對方的
 * 位置，剛好在手機版疊在一起。
 *
 * 修法：只在跟WoodMart導覽列同一個手機斷點（max-width:768px，跟主題
 * .wd-toolbar本身用的斷點一致）把Chaty泡泡往上推，空出導覽列的高度，
 * 兩者不再重疊。76px是導覽列實測高度（約56px）加上一些緩衝間距。桌機版
 * 不受影響，維持Chaty原本的右下角位置。
 *
 * 【1.0.0-sprint4.27】這條原本也是靠late enqueue priority、不用
 * !important，但跟上面.wd-toolbar一樣被網站的前端優化外掛打亂載入順序、
 * 沒有真的生效（客人回報客服泡泡還是蓋住預約按鈕），改回用!important，
 * 原因見檔案開頭sprint4.27的說明。
 */
@media (max-width: 768px) {
    .chaty-widget.right-position {
        bottom: 76px !important;
    }
}