/* ================================================================
   無障礙設計 a11y
   - 跳轉連結（skip-link）
   - 螢幕閱讀器專用文字（sr-only）
   - 全域 focus-visible 替代 outline:none
   - WCAG 2.1 AA 對應
   ================================================================ */

/* ---------- 跳到主要內容 ----------
   平常隱藏在畫面外；鍵盤聚焦時瞬間顯示，按 Enter 可跳到 #main-content
*/
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    z-index: 10000;
    padding: 12px 18px;
    background: #1a1a2e;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ff8a00;
    outline-offset: 0;
}

/* ---------- 螢幕閱讀器專用（視覺不顯示但 AT 可讀） ---------- */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* 聚焦時可見（用於可被 tab 到的隱藏連結） */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ---------- 全域 focus-visible 焦點環 ----------
   舊有 outline:none 規則仍會生效，但 :focus-visible 補上一層
   只有「鍵盤聚焦」才會出現亮環，滑鼠點擊不會
*/
*:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* 表單元素特別放大 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.18);
}

/* 確保 #main-content 取得焦點時不出現難看的 outline（用 tabindex='-1' 進入）*/
#main-content:focus,
#main-content:focus-visible {
    outline: none !important;
}

/* ---------- 預設拒絕 outline:none 沒補替代的情境 ----------
   若有 .no-outline-but-focused 類別需要乾淨 hover，
   仍可用 outline:none。但別在「可聚焦」元素上用。
*/

/* ---------- 強制覆蓋既有 `outline:none !important` ----------
   下列既有 class 在 member_style.css / cart.css / common.css / login.css 等
   檔案中使用 !important 取消焦點環，無障礙會失分。
   這裡用高特異度（兩個 class）強制補回橘色焦點環。
*/
input.cart_point_input:focus-visible,
input.login_form:focus-visible,
input.login_form_key:focus-visible,
input.form_input_v1:focus-visible,
input.form-control:focus-visible,
select.form_select_v1:focus-visible,
textarea.form_input_v1:focus-visible,
.cart_point_input input:focus-visible,
.btn.shareBtnPublic:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.18) !important;
}

/* ---------- 必填星號 aria-hidden 文字提示 ---------- */
[aria-required="true"] + label::after,
label.fv-label .fv-required {
    /* 既有 form_validator.css 已處理 */
}

/* ---------- 行動裝置最小觸控目標 44×44px（WCAG 2.5.5）----------
   只強制主要 CTA 與表單按鈕；icon 按鈕（如關閉×、書籤、加減數量）保留原尺寸
*/
@media (pointer: coarse) {
    .cta-btn,
    a.cta-btn,
    .form_button_order,
    .sendv2_btn,
    .cartaddv2_btn,
    .cartaddv3_btn,
    .prodaddv2_btn,
    .ticket_btn {
        min-height: 44px;
    }
}

/* ---------- 列印時保留 alt 文字顯示 ---------- */
@media print {
    img[alt]::after {
        content: attr(alt);
    }
    .skip-link { display: none !important; }
}

/* ---------- 高對比模式（Windows 高對比、forced-colors） ---------- */
@media (forced-colors: active) {
    .cta-btn,
    .skip-link {
        border: 2px solid ButtonText;
    }
}

/* ================================================================
   20261006 前台無障礙補強（搭配 js/a11y_front.js）
   ================================================================ */

/* 桌機下拉選單：鍵盤展開時（.open）也要顯示，不只 :hover */
.nav_item.open ul.sub_nav {
    display: block;
}
/* 包住選單文字的按鈕不改變原本排版 */
.a11y_navtoggle {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    color: inherit;
    cursor: pointer;
}
/* 子選單項目聚焦時與 hover 同樣的底色提示 */
.nav_item ul.sub_nav li:focus-visible,
.nav_more_btn ul.sub_nav div:focus-visible {
    background: rgba(0, 0, 0, 0.06);
}

/* 購物車抽屜以 tabindex=-1 接焦點，不顯示外框 */
#cart_setcon:focus {
    outline: none !important;
}

/* 使用者在系統設定「減少動態效果」時，關閉動畫與平滑捲動（WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   會員中心：文字對比與版面（2026-10-06 第三輪，登入後實測）
   規則：一般文字對比 ≥ 4.5:1（WCAG 1.4.3）。品牌橘 #f97316 只當按鈕底色，
   當「文字色」用在白底時只有 2.8:1，改用同色系深橘 #c2410c（5.2:1）。
   ================================================================ */
body .e_important,
body .ct_showtime,
body .mbls1_list:nth-child(2) .mbls1_lright,
body .mb_mbls1_list:nth-child(2) .mb_mbls1_lright {
    color: #c2410c !important;
}
/* 購物車數量徽章：白字配深橘底 */
body .floating_shopCount,
body .footm_shopCount,
body .shopCount {
    background-color: #c2410c !important;
    color: #fff !important;
}
/* 灰色輔助字：#999 / #888 → #5f6368（白底 6.1:1、淺藍灰底 ≥ 5:1） */
body .this_block_v4_title_tab_nums,
body .empty_state__sub,
body .cccon_time {
    color: #5f6368 !important;
}
/* 麵包屑最後一層（目前頁面） */
body .breadcrumb span,
body .breadcrumb li:last-child,
body .breadcrumb .active {
    color: #5f6368 !important;
}

/* 折價券狀態章：原本被套上橘色按鈕底，綠字壓橘底看不清楚；改回白底印章 */
body .coupon_crbtn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    cursor: default;
}
body .is_chking {
    color: #047857 !important;           /* 白底 5.5:1 */
    border-color: #047857 !important;
}
body .tbchking_hr { border-color: #047857 !important; }
body .is_used {
    color: #4b5563 !important;           /* 白底 7.6:1 */
    border-color: #4b5563 !important;
}
body .tb_hr { border-color: #4b5563 !important; }
body .is_end {
    color: #b91c1c !important;           /* 白底 6.5:1 */
    border-color: #b91c1c !important;
}
body .tbend_hr { border-color: #b91c1c !important; }
/* 已使用／已過期卡片：原本整張 opacity .68 會把文字對比拉到不及格，改只靠左側灰色標籤區分 */
body .coupon_card:has(.is_used),
body .coupon_card:has(.is_end) {
    opacity: 1 !important;
}

/* 基本資料：沒填的欄位原本只剩一條細灰框，看起來像跑版；顯示「未填寫」 */
body .evalue_minwidth:empty::before {
    content: "未填寫";
    color: #5f6368;
}
/* 折價券左側直排「折價券」：白字在 #e03f19 只有 4.3:1，底色加深一階到 #c2410c（5.2:1） */
body .coupon_cleft_text {
    background-color: #c2410c !important;
}
body .ccleft_intext {
    color: #fff !important;
}
/* 已使用／已過期：左側改深灰，白字仍有 4.8:1 */
body .coupon_card:has(.is_used) .coupon_cleft_text,
body .coupon_card:has(.is_end) .coupon_cleft_text {
    background-color: #6b7280 !important;
}