/*
 * 登入首頁樣式。
 * 由設計稿 assets/css/app.css 中 _login.scss 區塊擷取,只保留 index.html 實際用到的規則。
 * 其餘版面(container/form-control/input-group/btn/img-fluid/reboot)沿用 lib/bootstrap5。
 */

/* ---- icomoon(設計稿字型檔,僅登入頁使用,family 另取名避免與 css/icomoon 衝突) ---- */
@font-face {
    font-family: "icomoon-login";
    src: url("login-fonts/icomoon.woff") format("woff"),
         url("login-fonts/icomoon.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"],
.password-eye:before {
    font-family: "icomoon-login" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrows-rotate-reverse:before { content: "\e90a"; }
.icon-key-skeleton:before { content: "\e984"; }
.icon-lock-keyhole1:before { content: "\e987"; }
.icon-shield-keyhole:before { content: "\e996"; }
.icon-user1:before { content: "\e9a9"; }

/* ---- 版面 ---- */
body {
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #6c757d;
}

.login-tradevan {
    background: url("../image/login/login-bg.png") top center no-repeat;
    min-height: 100vh;
    /* 設計稿原為 display:flex(橫向),但頁尾是 .container 的兄弟節點,
       需改為直向排列頁尾才會落在底部。 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.login-tradevan > .container { flex: 1; }

@media screen and (max-width: 1024px) {
    .login-tradevan { background-size: cover; }
}

@media (max-width: 576px) {
    .login-tradevan { height: auto; padding-bottom: 20px; }
}

.login-tradevan .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
    border-radius: 6px;
}

.login-tradevan .login-tvlogo {
    padding: 20px 0 14% 0;
    display: flex;
}

.login-tradevan .login-tvlogo .pic-tv img { height: 60px; }

@media (max-width: 576px) {
    .login-tradevan .login-tvlogo .pic-tv img { height: 40px; }
}

.login-tradevan .allcont {
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    .login-tradevan .allcont { width: 100%; }
}

/* ---- 登入表單 ---- */
.login-tradevan .tvform {
    width: 430px;
    flex-shrink: 0;
    padding: 40px;
    border-radius: 20px;
}

@media screen and (max-width: 820px) {
    .login-tradevan .tvform { width: 70%; }
}

@media screen and (max-width: 767px) {
    .login-tradevan .tvform { width: 100%; padding: 40px 10px; }
}

.login-tradevan .tvform .from-tit {
    font-size: 24px;
    font-weight: bold;
    color: #005fbf;
    margin-bottom: 20px;
    text-align: center;
}

.login-tradevan .tvform .from-tit img { width: 75%; }

.login-tradevan .tvform form .form-group {
    clear: both;
    margin-bottom: 20px;
}

.login-tradevan .tvform form .form-group .input-group {
    border: 1px solid #ced4da;
    border-radius: 50px;
    background: #fff;
    align-items: center;
    flex-wrap: nowrap;
}

.login-tradevan .tvform form .form-group .input-group .input-group-addon {
    padding: 0 10px 0 10px;
    border: 0;
    display: flex;
    align-items: center;
}

.login-tradevan .tvform form .form-group .input-group .input-group-addon i {
    font-size: 1.3rem;
    position: relative;
    top: 2px;
    color: #1b697f;
}

.login-tradevan .tvform form .form-group .input-group .input-group-addon2 {
    padding: 0 0 0 10px;
    display: flex;
    align-items: center;
}

/* 驗證碼圖的欄寬。原生圖為 120px,留 10px 左內距剛好不縮圖。
   寫在 CSS 而非 inline style,窄螢幕的 media query 才蓋得掉。 */
.login-tradevan .tvform form .form-group .input-group .input-group-addon2.code {
    width: 130px;
}

.login-tradevan .tvform form .form-group .input-group .form-control {
    border: 0;
    border-radius: 0;
    /* 設計稿原為 1rem;放大輸入文字與 placeholder */
    font-size: 1.125rem;
    /* Bootstrap 的 1rem 左右內距在膠囊內是多餘的,而且會讓
       「輸入4碼驗證碼」在最窄的驗證碼欄被截字 */
    padding-left: 8px;
    padding-right: 2px;
    box-shadow: none;
    background: transparent;
    min-width: 0;
}

.login-tradevan .tvform form .form-group .input-group .form-control:focus {
    border-color: #1abc9c;
    box-shadow: none;
}

/*
 * 自動填入(Edge/Chrome 記住帳號密碼)會把欄位塗上淡藍色底。那是 UA 樣式且標了
 * !important,一般的 background 蓋不掉,只能用 inset box-shadow 疊上去,
 * 再把底色的 transition 拉到實質等同停用。膠囊本身就是白底,所以填白色看不出來。
 * 選擇器沿用同一串祖先,才壓得過上面把 box-shadow 設成 none 的規則。
 *
 * 注意:字型與字級不在這裡處理。自動填入後字級沒跟著變大是 Chromium 的繪製
 * 失效問題(計算樣式本來就是對的),CSS 無法解決,已確認過。
 */
.login-tradevan .tvform form .form-group .input-group .form-control:-webkit-autofill,
.login-tradevan .tvform form .form-group .input-group .form-control:-webkit-autofill:hover,
.login-tradevan .tvform form .form-group .input-group .form-control:-webkit-autofill:focus,
.login-tradevan .tvform form .form-group .input-group .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #212529;
    caret-color: #212529;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 100000s ease-in-out 0s;
}

.login-tradevan .tvform form .form-group .input-group-text {
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

/* 重整驗證碼是個 <a>,要蓋掉 bootstrap reboot 的 a{text-decoration:underline} */
.login-tradevan .tvform form .form-group .input-group-text a {
    color: #6c757d;
    text-decoration: none;
}
.login-tradevan .tvform form .form-group .input-group-text a:hover i { color: #1abc9c; }

/* 窄螢幕卡片變窄(padding 40px 10px),把圖示左右內距收緊,
   讓「輸入4碼驗證碼」不會被截字 */
@media (max-width: 576px) {
    .login-tradevan .tvform form .form-group .input-group .input-group-addon {
        padding-left: 4px;
        padding-right: 4px;
    }

    .login-tradevan .tvform form .form-group .input-group-text {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* 再窄就只能讓驗證碼圖等比縮小(img-fluid)。
   375px(常見手機寬度)仍維持原生 120px 不縮。 */
@media (max-width: 360px) {
    .login-tradevan .tvform form .form-group .input-group .input-group-addon2.code {
        width: 96px;
    }
}

/* 密碼顯示/隱藏 */
.password-eye {
    cursor: pointer;
    display: inline-block;
}

/* 兩者皆不在 tab 順序內,滑鼠點擊時也不要留下 focus 外框 */
.password-eye:focus,
#captchaReload:focus {
    outline: none;
}

.password-eye:before {
    color: #6c757d;
    content: "\e94a";
    line-height: 1.2;
    font-size: 1.4rem;
}

.show-password .password-eye:before { content: "\e94b"; }

/* 錯誤訊息:預設隱藏,加上 .has-error 才顯示 */
.login-tradevan .tvform form .form-group .help-block {
    float: right;
    display: none;
    font-size: 15px;
}

.login-tradevan .tvform form .form-group.has-error .help-block {
    color: #f1556c;
    display: inline-block;
}

/* 登入失敗等整體訊息 */
.login-tradevan .tvform .login-alert {
    display: none;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 8px;
    background: #fdecee;
    color: #f1556c;
    font-size: 15px;
    text-align: center;
}

.login-tradevan .tvform .login-alert.show { display: block; }

/* ---- 登入按鈕 ---- */
.login-tradevan .tvform form .btn-block {
    width: 100%;
    margin-top: 25px;
    padding: 12px;
    border: 0;
    border-radius: 30px;
    color: #fff;
    transition: all 0.15s ease-out;
}

.login-tradevan .tvform form .btn-block:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

.login-tradevan .tvform form .btn-success {
    background: #2dafd3;
    background: linear-gradient(to bottom, #2dafd3 0%, #1b697f 100%);
}

.login-tradevan .tvform form .btn-success:disabled {
    opacity: 0.65;
    transform: none;
}

/*
 * ---- OTP 驗證頁(Views/Home/Otp.cshtml)----
 * 沿用上面同一套版面(.login-tradevan / .tvform / .input-group / .btn-block),
 *
 * 但刻意與登入首頁區隔:不用底圖、不放右側插圖,改成單張置中卡片,
 * 避免使用者分不清自己在哪一頁。以下規則由 Otp.cshtml 最外層的 .otp-page 觸發。
 */
.login-tradevan.otp-page {
    background: #eef3f7;
}

/* 內容在頁面垂直置中,頁尾仍留在底部 */
.login-tradevan.otp-page > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-tradevan.otp-page .login-tvlogo {
    padding: 32px 0 24px 0;
    justify-content: center;
}

/* 沒有底圖襯底,卡片得自己有白底 */
.login-tradevan.otp-page .tvform {
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 64, 70, 0.12);
}

.login-tradevan .tvform .otp-lead {
    text-align: center;
    font-size: 1.125rem;
    color: #323a46;
    margin-bottom: 18px;
}

.login-tradevan .tvform .otp-webid {
    text-align: center;
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 16px;
}

.login-tradevan .tvform .otp-webid b {
    font-size: 1.375rem;
    letter-spacing: 3px;
    color: #005fbf;
}

/* 6 碼驗證碼置中並拉開字距 */
.login-tradevan .tvform form .form-group .input-group .form-control.otp-code {
    text-align: center;
    letter-spacing: 6px;
    font-size: 1.25rem;
    padding-right: 8px;
}

.login-tradevan .tvform .otp-msg {
    min-height: 22px;
    margin-top: 12px;
    text-align: center;
    color: #f1556c;
    font-size: 15px;
}

.login-tradevan .tvform .otp-hint {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: #98a6ad;
    line-height: 1.7;
}

.login-tradevan .tvform .otp-sim {
    margin-bottom: 16px;
    padding: 8px 10px;
    border: 1px solid #ffe69c;
    border-radius: 8px;
    background: #fff3cd;
    color: #856404;
    font-size: 14px;
    text-align: center;
}

.login-tradevan .tvform .otp-sim b {
    font-size: 16px;
    letter-spacing: 2px;
}

/* 次要按鈕。與 .btn-block 同權重,靠排在後面覆蓋其 border 與 margin-top */
.login-tradevan .tvform form .btn-resend {
    margin-top: 12px;
    border: 1px solid #b9c6cc;
    background: #fff;
    color: #1b697f;
}

.login-tradevan .tvform form .btn-resend:disabled {
    opacity: 0.65;
    transform: none;
}

/* ---- 右側圖 ---- */
.login-tradevan .tvpic {
    display: flex;
    flex: 1;
    justify-content: center;
}

@media screen and (max-width: 990px) {
    .login-tradevan .tvpic { display: none; }
}

.login-tradevan .tvpic img {
    width: 80%;
    object-fit: contain;
}

@media screen and (max-width: 1399px) {
    .login-tradevan .tvpic img { width: 100%; }
}

/* ---- 頁尾 ---- */
footer .tvfooter-cont {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

footer .tvfooter-cont span {
    display: flex;
    justify-content: end;
    margin-bottom: 2px;
}