/**
 * cotag004-template.css
 * COTAG004PageTemplate.xhtml 模板層外部 CSS — CSP default-src 'self' 合規
 * 取代 TxnPageTemplate.xhtml 中所有 inline style="" 屬性與 inline <style> 區塊
 */

/* ── 通用隱藏 ── */

/* 取代 style="display:none" — h:outputText(realMsg/virtualMsg)、popup div */
.csp-hidden {
    display: none;
}

/* 取代 .menu_lv3 { display:none } — 由 cotag004-template.js 依 frameMode 動態加掛 */
.csp-frame-hidden {
    display: none;
}

/* ── Popup overlay（全域彈窗容器） ── */

/* 取代 style="display: none; z-index: 2000" — #_global_div_popup */
.csp-popup-overlay {
    display: none;
    z-index: 2000;
}

/* ── Popup area 寬度 ── */

/* 取代 style="width:1050px" — _global_div_popup .area */
.csp-popup-area-xl {
    width: 1050px;
}

/* 取代 style="width:600px" — pop_fee_note, investmentInformationDesc, pop_motp_info, linePnpInformationDesc .area */
.csp-popup-area-md {
    width: 600px;
}

/* 取代 style="width:370px" — pop_deviceAuth_info .area */
.csp-popup-area-sm {
    width: 370px;
}

/* ── Popup body 高度限制 ── */

/* 取代 style="max-height:450px" — pop_fee_note .pop_body、pop_deviceAuth_info .pop_body */
.csp-popup-body-lg {
    max-height: 450px;
}

/* 取代 style="max-height:380px" — pop_motp_info .pop_body */
.csp-popup-body-md {
    max-height: 380px;
}

/* ── 文字樣式 ── */

/* 取代 style="font-size:13px" — pop_deviceAuth_info .pop_body */
.csp-text-sm {
    font-size: 13px;
}

/* 取代 style="font-size:17px" — pop_deviceAuth_info .pop_tit */
.csp-text-md {
    font-size: 17px;
}

/* 取代 style="text-align:center" — pop_deviceAuth_info 圖片容器 */
.csp-text-center {
    text-align: center;
}

/* 取代 style="color: #444" — investmentReadTerm、linePnpReadTerm */
.csp-text-dark {
    color: #444;
}

/* ── 捲動區 ── */

/* 取代 style="overflow: auto; height: 170px" — investmentInfoContent、linePnpInfoContent */
.csp-scroll-box {
    overflow: auto;
    height: 170px;
}

/* ── 間距 ── */

/* 取代 style="padding: 20px" — pop_motp_info .pop_body ul */
.csp-list-pad {
    padding: 20px;
}

/* ── COTAG004 子頁面用 ── */

/* 取代 COTAG004_Home.xhtml h:selectBooleanCheckbox style="width: 16px; height: 16px;" */
.csp-checkbox-sm {
    width: 16px;
    height: 16px;
}

/* 取代 COTAG004_Home.xhtml h:outputLabel style="font-size: 15px;" */
.csp-label-md {
    font-size: 15px;
}

/* ── COTAG004_Home word_area 捲動修復 ──
 * cotagConstants.properties 的 cotag004.home.contractV3 輸出：
 *   <div class="word_area m10" style="overflow: auto; height: 250px;">
 * 該 inline style 被 CSP default-src 'self' 封鎖（style-src 不允許 unsafe-inline）。
 * base.css .word_area 預設 overflow:hidden，須以高 specificity 規則取代。
 * 使用 .area_bg .word_area（specificity 0-2-0）蓋過 base.css .word_area（0-1-0）。
 * 僅影響 COTAG004PageTemplate（本 CSS 僅由 COTAG004PageTemplate 載入）。
 */
.area_bg .word_area {
    overflow: auto;
    height: 250px;
}

/* ── confirm.feeNote 跨行手續費說明表格欄寬 ──
 * b2cConstants.properties confirm.feeNote 輸出含 style="width:X%" inline style：
 *   第 1 列（合計 100%）：15% ∣ 40%（colspan=2） ∣ 25% ∣ 20%
 *   第 2 列資料欄：第 2、3 格各 20%
 * 被 CSP 封鎖；以 #pop_fee_note 範圍內 nth-child 選取器重現。
 */
#pop_fee_note .tb1 tr:nth-child(1) td:nth-child(1) { width: 15%; }
#pop_fee_note .tb1 tr:nth-child(1) td:nth-child(2) { width: 40%; } /* colspan=2 */
#pop_fee_note .tb1 tr:nth-child(1) td:nth-child(3) { width: 25%; }
#pop_fee_note .tb1 tr:nth-child(1) td:nth-child(4) { width: 20%; }
#pop_fee_note .tb1 tr:nth-child(2) td:nth-child(2),
#pop_fee_note .tb1 tr:nth-child(2) td:nth-child(3) { width: 20%; }

/* ── investment.agreeBook.content ol 縮排 ──
 * b2cConstants.properties investment.agreeBook.content 輸出含：
 *   <ol class="ps1" style="padding:0 0 10px 30px;">
 * 被 CSP 封鎖；以外部 CSS 重現縮排。
 */
#investmentInfoContent ol.ps1 { padding: 0 0 10px 30px; }
/* COTAG004_CardInfo - 個資遮蔽與眼睛開關樣式
 * 使用 CSS text-security 遮蔽，而非 type=password，
 * 避免瀏覽器密碼管理員對非密碼欄位（身分證號、信用卡號）介入。
 */


/* ── 遮蔽狀態（JS 未執行時的 fallback；實際遮蔽由 cotag004-main.js 以 inline style 控制） ── */
.pii-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

/* ── 隱藏 IE/Edge 瀏覽器自帶的密碼顯示按鈕 ─────────────────────────────── */
.pii-masked::-ms-reveal {
    display: none !important;
}

/* ── 眼睛開關按鈕 ──────────────────────────────────────────────────────── */
.eyes-toggle {
    display: inline-block;
    width: 24px;
    height: 22px;
    vertical-align: middle;
    cursor: pointer;
    background: url(../../img/icon/ico_conceal.png) no-repeat center;
    background-size: contain;
}

.eyes-toggle.eyes-on {
    background-image: url(../../img/icon/ico_visible.png);
}