/**
 * 會員獨立頁樣式（login / register / forgot-password / resend-verification）。
 *
 * 與彈窗版（member-dialog.css）的關係：彈窗樣式全數鎖在 dialog.member-dialog scope，
 * 頁面套不到（reset-password 頁 1613769 同坑）；本檔以 .member-auth-page-wrapper scope
 * 提供頁面版表單基礎樣式，主題 CSS 變數 token 與彈窗版一致，兩者互不影響。
 * 走實體檔（style-src 'self'）而非 inline <style>，CSP enforce 後仍安全。
 */

/* 2026-08-20 改版：版面尺寸對齊 evo_ec_ux 原型 prototype_會員登入_260810.html；
   色彩與字體仍走站台既有 CSS 變數，各站客製能力不變。 */

.member-auth-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 48px 24px 88px;
    font-size: var(--FontSizeBody, 16px);
}

.member-auth-page-wrapper *,
.member-auth-page-wrapper *::before,
.member-auth-page-wrapper *::after {
    box-sizing: border-box;
}

.member-auth-page-wrapper .auth-page-block {
    width: 100%;
    max-width: 488px;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 0;
    box-shadow: none;
    padding: 40px 36px;
    text-align: center;
}

.member-auth-page-wrapper .page-main-title {
    padding-left: 0;
    font-size: var(--FontSizeSecondary, 24px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--TextColorPrimary, #303133);
    margin-bottom: 8px;
}

/* ===== 表單 ===== */

.member-auth-page-wrapper .member-form {
    text-align: left;
    margin-top: 16px;
}

.member-auth-page-wrapper .form-row {
    margin-bottom: 18px;
}

.member-auth-page-wrapper .form-label {
    display: block;
    font-size: var(--FontSizeHint, 14px);
    font-weight: 500;
    line-height: 1;
    color: var(--TextColorPrimary, #303133);
    margin-bottom: 8px;
}

.member-auth-page-wrapper .input-col {
    position: relative;
}

.member-auth-page-wrapper .input-style {
    height: 48px;
    padding: 0 14px;
    width: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 0;
    background-color: #fff;
    font-size: var(--FontSizeBody, 15px);
    line-height: 1;
    color: var(--TextColorPrimary, #303133);
    transition: border-color .15s ease-in-out;
}

.member-auth-page-wrapper .input-style:focus,
.member-auth-page-wrapper .input-style:active {
    border-color: var(--BtnPrimaryBg, #000);
    outline: none;
}

.member-auth-page-wrapper .input-style.error {
    border-color: #eb5757;
}

.member-auth-page-wrapper .input-style::placeholder {
    color: #a8abb2;
}

.member-auth-page-wrapper .input-style:disabled {
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
}

/* 密碼欄讓出右側切換鈕空間 */
.member-auth-page-wrapper .input-col:has(.showpsd) .input-style {
    padding-right: 44px;
}

.member-auth-page-wrapper .showpsd {
    position: absolute;
    right: 14px;
    top: 24px;
    transform: translateY(-50%);
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 0;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

.member-auth-page-wrapper .showpsd img {
    max-width: 100%;
    display: block;
}

/* ===== 欄位錯誤 ===== */

.member-auth-page-wrapper .error-alert {
    color: #eb5757;
    font-size: var(--FontSizeHint, 14px);
    line-height: 1.5;
    margin-top: 6px;
    display: none;
}

/* ===== 行內警示（頁面內容的一部分，非彈窗） =====
   .login-error-message / .unverified-hint 為既有 hook（member-pages.js showMessage 依賴 id，
   此處只換視覺）；色調由 --danger / --warning 修飾詞承載，對齊原型 InlineAlert。

   ⚠ 圖示刻意用「絕對定位的 ::before」而非 flex：member-pages.js:71 與 :238 會寫
   inline style `display: block` 到這兩個區塊，inline 壓過 class，若這裡寫
   `display: flex` 會被覆蓋成 block、圖示掉到文字上一行＝破版。絕對定位不吃 display 值，
   兩種情況都正確。改動此段前務必先讀這條註解。 */

.member-auth-page-wrapper .auth-alert {
    position: relative;
    padding: 12px 14px 12px 42px;
    margin-bottom: 18px;
    text-align: left;
    font-size: var(--FontSizeHint, 14px);
    line-height: 1.7;
    color: var(--TextColorPrimary, #303133);
    border-left: 3px solid transparent;
}

.member-auth-page-wrapper .auth-alert::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 15px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.member-auth-page-wrapper .auth-alert--danger {
    background-color: #fef2f2;
    border-left-color: #eb5757;
}

/* 成功提示（邀請註冊完成、導頁前）；綠色取成功勾勾圖示同色 #67C23A */
.member-auth-page-wrapper .auth-alert--success {
    background-color: #f0fdf4;
    border-left-color: #67C23A;
}

/* 警示內的後續動作連結（例：「直接登入 或 忘記密碼？」），與訊息同一行 */
.member-auth-page-wrapper .auth-alert .error-actions {
    margin-left: 6px;
}

.member-auth-page-wrapper .auth-alert--danger::before {
    /* Material error_outline：描邊圓框，對齊原型 InlineAlert（danger 用 error_outline） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eb5757'%3E%3Cpath d='M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

.member-auth-page-wrapper .auth-alert--warning {
    background-color: #fff7ed;
    border-left-color: #e6a23c;
}

.member-auth-page-wrapper .auth-alert--warning::before {
    /* 原型的非 danger 色調用 Material info（實心 i），刻意與 danger 的驚嘆號區隔 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e6a23c'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* ===== 按鈕與連結 ===== */

.member-auth-page-wrapper .primary-btn-style {
    background-color: var(--BtnPrimaryBg, #000);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    color: var(--BtnPrimaryTextColor, #fff);
    text-align: center;
    height: 52px;
    padding: 0 18px;
    line-height: 1;
    width: 100%;
    font-size: var(--BtnFontSize, 16px);
    font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    text-decoration: none;
}

.member-auth-page-wrapper .primary-btn-style:active,
.member-auth-page-wrapper .primary-btn-style:focus,
.member-auth-page-wrapper .primary-btn-style:visited {
    color: var(--BtnPrimaryTextColor, #fff);
}

.member-auth-page-wrapper .primary-btn-style:disabled {
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
}

@media (hover: hover) {
    .member-auth-page-wrapper .primary-btn-style:hover:not(:disabled) {
        background-color: var(--BtnPrimaryHoverBg, #606266);
        color: var(--BtnPrimaryHoverTextColor, #fff);
    }
}

.member-auth-page-wrapper .link-btn {
    border: 0;
    background-color: transparent;
    color: var(--BtnPrimaryBg, #000);
    padding: 0;
    margin: 0 4px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity .2s ease-in-out;
}

.member-auth-page-wrapper .gray-link-btn {
    color: #606266;
    border: 0;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    margin-top: 22px;
    font-size: var(--FontSizeBody, 15px);
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s ease-in-out;
}

@media (hover: hover) {
    .member-auth-page-wrapper .link-btn:hover,
    .member-auth-page-wrapper .gray-link-btn:hover {
        opacity: .75;
    }
}

/* 重新發送＝原型的 ResendButton：文字連結，不是填滿的主按鈕。
   倒數中（disabled）轉灰、去底線、游標 not-allowed；倒數結束才變回可點的連結。
   注意它在 blade 裡是 <button>，靠 :disabled 而非 class 切換狀態，JS 不必動。 */
.member-auth-page-wrapper .resend-link {
    display: inline-block;
    border: 0;
    background-color: transparent;
    padding: 0;
    font-size: var(--FontSizeBody, 15px);
    font-weight: 500;
    line-height: 1;
    color: var(--BtnPrimaryBg, #000);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}

.member-auth-page-wrapper .resend-link:disabled {
    color: #909399;
    text-decoration: none;
    cursor: not-allowed;
}

@media (hover: hover) {
    .member-auth-page-wrapper .resend-link:not(:disabled):hover {
        opacity: .75;
    }
}

/* 「沒收到信件？」＝原型 ResendButton 上方的小字提示 */
.member-auth-page-wrapper .resend-hint {
    font-size: var(--FontSizeHint, 14px);
    line-height: 1.6;
    color: #909399;
    margin: 0 0 4px;
}

/* 「返回登入」＝原型的 BackToLogin：arrow_back 圖示在文字前，間距 5px。
   圖示用 mask + currentColor（不用 background-image），顏色跟著文字走；
   日後 .gray-link-btn 的 color 若改吃站台變數，箭頭會自動跟上、不必改兩個地方。 */
.member-auth-page-wrapper .gray-link-btn.back-to-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.member-auth-page-wrapper .gray-link-btn.back-to-login::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

/* ===== 頁面專屬元件 ===== */

/* ===== 選項列（保持登入／同意條款） ===== */

.member-auth-page-wrapper .auth-page-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.member-auth-page-wrapper .remember-me-label,
/* 同意條款列：卡片本身是 text-align:center，這裡拉回靠左（對齊原型），
   並讓「我已閱讀並同意」與「服務條款」連結在同一行、可換行不撐破。 */
.member-auth-page-wrapper .agree-terms-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* 錯誤訊息要自己占一整行——否則在 flex 列裡會擠到「服務條款」旁邊。
   （JS 顯示時寫的是 inline style display:block，壓得過 class，但壓不過 flex 佈局，
   所以要靠 flex-basis 把它推到下一行。） */
.member-auth-page-wrapper .agree-terms-row .error-alert {
    flex: 0 0 100%;
}

.member-auth-page-wrapper .agree-terms-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--FontSizeBody, 15px);
    line-height: 1;
    color: #606266;
}

.member-auth-page-wrapper .remember-me-label input,
.member-auth-page-wrapper .agree-terms-label input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--BtnPrimaryBg, #000);
}

/* 必填星號＝原型 Field 的 required 標記。純視覺：可及性靠 input 自己的 required 屬性，
   所以標 aria-hidden，不讓螢幕閱讀器把「*」當內容唸出來。 */
.member-auth-page-wrapper .required-mark {
    margin-left: 3px;
    color: #eb5757;
}

.member-auth-page-wrapper .password-hint,
.member-auth-page-wrapper .field-hint {
    color: #909399;
    font-size: var(--FontSizeHint, 14px);
    margin: 4px 0 0;
}

.member-auth-page-wrapper .password-hint[hidden] {
    display: none;
}

/* 密碼強度條（註冊頁；級別與色調同改密碼彈窗 member-dialog.css 的 .password-strength） */
.member-auth-page-wrapper .password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.member-auth-page-wrapper .password-strength[hidden] {
    display: none;
}

.member-auth-page-wrapper .password-strength__track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: #ebeef5;
    overflow: hidden;
}

.member-auth-page-wrapper .password-strength__bar {
    width: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.member-auth-page-wrapper .password-strength__text {
    min-width: 2em;
    font-size: var(--FontSizeHint, 14px);
    line-height: 1;
}

.member-auth-page-wrapper .password-strength[data-level="weak"] .password-strength__bar { background-color: #f56c6c; }
.member-auth-page-wrapper .password-strength[data-level="weak"] .password-strength__text { color: #f56c6c; }
.member-auth-page-wrapper .password-strength[data-level="medium"] .password-strength__bar { background-color: #e6a23c; }
.member-auth-page-wrapper .password-strength[data-level="medium"] .password-strength__text { color: #e6a23c; }
.member-auth-page-wrapper .password-strength[data-level="strong"] .password-strength__bar { background-color: #67c23a; }
.member-auth-page-wrapper .password-strength[data-level="strong"] .password-strength__text { color: #67c23a; }

.member-auth-page-wrapper .register-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    font-size: var(--FontSizeBody, 15px);
    color: #606266;
    text-align: center;
}

.member-auth-page-wrapper .guest-order-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: var(--FontSizeBody, 15px);
    text-align: center;
}

.member-auth-page-wrapper .text-center {
    text-align: center;
}

/* ===== 結果／成功區塊（verify-email / reset-password / register 成功態共用） ===== */

.member-auth-page-wrapper .label-icon {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    margin: 8px auto 16px;
}

.member-auth-page-wrapper .label-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.member-auth-page-wrapper .result-title {
    font-size: var(--FontSizeSecondary, 22px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--TextColorPrimary, #303133);
    margin-bottom: 10px;
}

.member-auth-page-wrapper .result-desc {
    color: #606266;
    font-size: var(--FontSizeBody, 15px);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* ===== RWD ===== */

@media (max-width: 599px) {
    .member-auth-page-wrapper {
        padding: 24px 16px 64px;
    }

    .member-auth-page-wrapper .auth-page-block {
        padding: 32px 20px;
    }

    .member-auth-page-wrapper .page-main-title {
        font-size: var(--FontSizeSecondary, 22px);
    }
}

/* 社群登入區塊（third_party_login 切片；partial=partials/social-login） */
.member-auth-page-wrapper .login-option {
    text-align: center;
}

/* 「或使用下列方式登入」＝原型的 Divider：左右各一條線 */
.member-auth-page-wrapper .login-option .login-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 18px;
    font-size: var(--FontSizeHint, 14px);
    line-height: 1;
    color: #909399;
}

.member-auth-page-wrapper .login-option .login-title::before,
.member-auth-page-wrapper .login-option .login-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e4e7ed;
}

.member-auth-page-wrapper .login-option .login-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-auth-page-wrapper .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 0;
    font-size: var(--FontSizeBody, 15px);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: opacity .2s ease-in-out;
}

.member-auth-page-wrapper .social-btn__mark {
    display: flex;
    flex-shrink: 0;
}

.member-auth-page-wrapper .social-btn--line {
    background-color: #06C755;
    color: #fff;
}

.member-auth-page-wrapper .social-btn--google {
    background-color: #fff;
    color: var(--TextColorPrimary, #303133);
    border: 1px solid #DCDFE6;
}

.member-auth-page-wrapper .social-btn--facebook {
    background-color: #1877F2;
    color: #fff;
}

@media (hover: hover) {
    .member-auth-page-wrapper .social-btn:hover {
        opacity: .88;
    }
}

/* 橘色警示條（重設密碼成功但帳號停用中）：不自動消失、需手動關閉；⛔ 不是綠色成功樣式
   規格＝ec-docs 02_Features/member_portal_password_recovery.yaml「Orange Warning Toast」 */
.member-warning-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 16px;
    background-color: #fff7ed;
    border: 1px solid #f59e0b;
    border-left-width: 4px;
    border-radius: 6px;
    color: #9a3412;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    font-size: 15px;
    line-height: 1.5;
}

.member-warning-toast[hidden] {
    display: none;
}

.member-warning-toast__close {
    flex: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}