@charset "utf-8";
/* Cookie 同意機制:底部橫幅與偏好設定面板。
   色彩沿用 layout/tw/css/style.css 的 --main_color_* 變數, 不另外定義品牌色。 */

/* ---------- 底部橫幅 ---------- */
.CookieConsentBar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background-color: var(--main_color_bk, #2e2c2f);
    color: #fff;
    padding: 20px 24px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}

.CookieConsentBar.is-open { display: block; }

.CookieConsentBar > .inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.CookieConsentBar .cont { flex: 1 1 520px; min-width: 0; }
.CookieConsentBar .title { font-size: 1.125rem; font-weight: 700; margin: 0 0 8px; }
.CookieConsentBar .desc { margin: 0; line-height: 1.75em; font-size: 0.95rem; }
.CookieConsentBar .desc a { color: var(--main_color_yl, #f5ac26); }
.CookieConsentBar .desc a:hover,
.CookieConsentBar .desc a:focus { color: #fff; }
.CookieConsentBar .actions { display: flex; gap: 12px; flex: 0 0 auto; }

/* ---------- 按鈕 ----------
   依北流 UI 設計規範:直角(無圓角)、實心鈕白字、外框鈕 1px 細框、字距加寬。 */
.CookieConsentBtn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 11px 28px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: 0.15em;
    text-indent: 0.15em;   /* 補回 letter-spacing 造成的右側偏移, 讓文字維持置中 */
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
}

/* 主要動作(全部接受):橘底白字, 依需求方指定。
   注意:此組合對比為 1.94:1, 低於 WCAG AA 的 4.5:1 —— 同色相要達標需深至 #a06a07,
   已非橘色, 故依指定保留視覺。hover 轉為站上既有的較深橘紅, 對比提升為 3.75:1。 */
.CookieConsentBtn.primary {
    background-color: var(--main_color_yl, #f5ac26);
    border-color: var(--main_color_yl, #f5ac26);
    color: #fff;
}

.CookieConsentBtn.primary:hover,
.CookieConsentBtn.primary:focus {
    background-color: #dd5b26;
    border-color: #dd5b26;
    color: #fff;
}

/* 次要動作(儲存設定):白底綠框綠字, 綠色取 logo 同色系的 --main_color_dark_g(5.71:1)。 */
.CookieConsentBtn.secondary {
    background-color: #fff;
    border-color: var(--main_color_dark_g, #626958);
    color: var(--main_color_dark_g, #626958);
}

.CookieConsentBtn.secondary:hover,
.CookieConsentBtn.secondary:focus {
    background-color: var(--main_color_dark_g, #626958);
    border-color: var(--main_color_dark_g, #626958);
    color: #fff;
}

/* ---------- 偏好設定面板 ---------- */
.CookieConsentMask {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9100;
    background-color: rgba(0, 0, 0, .55);
    overflow-y: auto;
    padding: 24px;
}

.CookieConsentMask.is-open { display: block; }

.CookieConsentPanel {
    background-color: #fff;
    color: var(--main_color_bk, #2e2c2f);
    max-width: 720px;
    margin: 6vh auto 24px;
    border-radius: 0;
    padding: 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

.CookieConsentPanel .panel_title { font-size: 1.375rem; font-weight: 700; margin: 0 0 20px; }
.CookieConsentPanel .item { border-top: 1px solid #e0e0e0; padding: 18px 0; }
.CookieConsentPanel .item:last-of-type { border-bottom: 1px solid #e0e0e0; }
.CookieConsentPanel .item_head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.CookieConsentPanel .item_name { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.CookieConsentPanel .item_name .en { font-weight: 400; color: var(--main_color_gr, #575959); }
.CookieConsentPanel .item_desc { margin: 10px 0 0; line-height: 1.75em; font-size: 0.95rem; color: var(--main_color_gr, #575959); }
.CookieConsentPanel .panel_actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ---------- 開關 ---------- */
.CookieSwitch { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.CookieSwitch .state { font-size: 0.9rem; color: var(--main_color_gr, #575959); }
.CookieSwitch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.CookieSwitch .track {
    display: block;
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background-color: #b5b5b5;
    transition: background-color .3s ease;
}

.CookieSwitch .track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform .3s ease;
}

.CookieSwitch input:checked + .track { background-color: var(--main_color_light_g, #85a476); }
.CookieSwitch input:checked + .track::before { transform: translateX(24px); }
.CookieSwitch input:disabled + .track { background-color: #cfcfcf; cursor: not-allowed; }
.CookieSwitch input:focus + .track { outline: 2px dashed var(--main_color_active, #f5ac26); outline-offset: 3px; }
.CookieSwitch label.track { cursor: pointer; }
.CookieSwitch input:disabled + label.track { cursor: not-allowed; }

/* ---------- 手機 ---------- */
@media screen and (max-width: 767px) {
    .CookieConsentBar { padding: 16px; }
    .CookieConsentBar > .inner { gap: 16px; }
    .CookieConsentBar .actions { width: 100%; }
    .CookieConsentBar .actions .CookieConsentBtn { flex: 1 1 0; text-align: center; padding: 12px 8px; }
    .CookieConsentPanel { padding: 20px; margin-top: 3vh; }
    .CookieConsentPanel .item_head { align-items: flex-start; flex-wrap: wrap; }
    .CookieConsentPanel .panel_actions .CookieConsentBtn { flex: 1 1 0; text-align: center; }
}

@media print {
    .CookieConsentBar, .CookieConsentMask { display: none !important; }
}