/* ══════════════════════════════════════════════════════════════════
   ⚡⚡⚡ S42：語言切換器樣式（C 案：純圖示地球鈕 ＋ 雙行面板）。
   前台與後台共用「唯一的一份」。搭配 Views/Shared/_LanguageSwitcher.cshtml。

   ⚠⚠ 為什麼獨立成一個檔案、不寫在 site.css：
     後台 Areas/Admin/Views/Shared/_Layout.cshtml 只載入 admin.css，從來不載 site.css，
     所以以前只寫在 site.css 的 .ec-lang 規則在後台完全沒生效——後台那顆 <details>
     一直是「原生三角形＋原生按鈕＋inline 撐開版面」的樣子。
     解法**不是**把同一份樣式再貼一份到 admin.css（兩份會各自漂移），
     而是抽成這一份 language-switcher.css，前台與後台的 Layout 各自 <link> 它。
     ⇒ 要改切換器外觀只改這裡；不要再往 site.css / admin.css 加任何 .ec-lang 規則。

   ⚠ 這個檔案只能出現 .ec-lang 開頭的選擇器，不碰任何全域樣式、不碰 --shop-* 變數。
   ⚠ 專案沒有 build step，CSS 直接送出去：不用 color-mix()、:has()、巢狀語法。
   ⚠ 前台導覽列在「極簡黑」佈景是深色、後台導覽列是白色，
     所以圖示鈕的 hover 底色刻意用「中性灰的半透明」rgba(127,127,127,.18)，
     深底、淺底都看得見；不要寫死 rgba(255,255,255,.12)（舊版作法，白底上等於看不見）。
   ⚠⚠ 展開面板的底色寫死 #fff、文字色寫死 #212529，不可以用 color: inherit——
     舊版用 inherit，在深色導覽列底下會變成「白底白字」，而且只有切到極簡黑
     佈景才看得到、沒有任何錯誤訊息。
   ⚠ 目前語言那一列不再用 ::after { content: " ✓" } 加勾勾——
     左邊那條藍直條已經夠明顯，而且 content 裡的字元會被螢幕閱讀器念出來；
     狀態改由 partial 上的 aria-current 表達。
   ══════════════════════════════════════════════════════════════════ */

/* ---- 容器：面板要絕對定位在它底下 ---- */
.ec-lang {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.ec-lang form { margin: 0; }

/* ---- 收合狀態：36×36 的純圖示鈕（只有一顆地球 SVG） ---- */
.ec-lang > summary {
    list-style: none;               /* 關掉原生三角標記（Firefox / Chrome 新版） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    color: inherit;                 /* 圖示顏色跟著導覽列文字色走（深底白、白底黑） */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s ease;
}
.ec-lang > summary::-webkit-details-marker { display: none; }   /* 關掉原生三角標記（舊版 WebKit / Safari） */
.ec-lang > summary::marker { content: ""; }

.ec-lang-icon {
    width: 19px;
    height: 19px;
    display: block;
    flex: 0 0 auto;
}

/* hover／focus／展開中：中性灰半透明，深淺底都看得見 */
.ec-lang > summary:hover,
.ec-lang > summary:focus-visible,
.ec-lang[open] > summary {
    background: rgba(127, 127, 127, .18);
}
.ec-lang > summary:focus { outline: none; }
.ec-lang > summary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ---- 展開面板：白底、深字，顏色全部寫死 ---- */
.ec-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1040;
    width: 222px;
    padding: 6px;
    background: #fff;
    color: #212529;                 /* ⚠ 寫死，不可 inherit（見檔頭） */
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    text-align: left;
    line-height: 1.2;
}

/* 面板最上面的小標題（"Language"，刻意不翻譯，理由見 partial） */
.ec-lang-heading {
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #868e96;
}

/* ---- 每一列：<button>，兩行（母語名／英文名） ---- */
.ec-lang-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 0;
    border-left: 3px solid transparent;   /* 目前語言用這條變藍 */
    border-radius: 7px;
    background: transparent;
    color: #212529;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .12s ease;
}
.ec-lang-item:hover,
.ec-lang-item:focus-visible {
    background: #f1f3f5;
}
.ec-lang-item:focus { outline: none; }
.ec-lang-item:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}
.ec-lang-item.is-current {
    background: rgba(13, 110, 253, .09);
    border-left-color: #0d6efd;
}

.ec-lang-native,
.ec-lang-en {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ec-lang-native {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
}
.ec-lang-en {
    font-size: 11.5px;
    font-weight: 400;
    color: #868e96;
}

/* ---- 手機：靠右展開會被視窗切掉，改成靠左；寬度不超過視窗 ---- */
@media (max-width: 575.98px) {
    .ec-lang-menu {
        right: auto;
        left: 0;
        width: min(222px, calc(100vw - 32px));
    }
}