/* ================================================================
   login.css — 登入 / 註冊頁面樣式
   設計系統：shopto (primary #365a9e / bg #f5f7fc)
   原則：主色藍統一，卡片乾淨，表單友善
   ================================================================ */

/* ── 頁面背景 ── */
body { background: var(--sp-bg, #f5f7fc); }

/* ── 外層卡片 ── */
.login_block {
    background: #fff;
    border-radius: 14px;
    width: 460px;
    max-width: 100%;
    padding: 0;
    margin: 0 auto 48px;
    box-shadow: 0 4px 32px rgba(54, 90, 158, .10);
    border: 1px solid rgba(54, 90, 158, .08);
    /* overflow: hidden 移除，避免 tooltip / dropdown 被裁切 */
}

/* ── 表單框架 ── */
.login_frame {
    box-sizing: border-box;
    position: relative;
}

/* ── Tab 切換列 ── */
.login_frame > :first-child {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.login_frame .login_tab1,
.login_frame .login_tab2 {
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    float: left;
    height: 52px;
    width: 50%;
    line-height: 52px;
    text-align: center;
    transition: color .2s, border-color .2s, background .2s;
    letter-spacing: .4px;
    position: relative;
    user-select: none;
}

/* 作用中 Tab：藍底白字 */
.login_tab1 {
    color: var(--sp-primary, #365a9e);
    border-bottom: 3px solid var(--sp-primary, #365a9e);
    background: var(--sp-primary-light, #eef2fb);
}

/* 非作用中 Tab */
.login_tab2 {
    color: #9ca3af;
    border-bottom: 3px solid #e8edf5;
    background: #fafbff;
}

.login_tab2:hover {
    color: var(--sp-primary-mid, #6887c4);
    border-bottom-color: var(--sp-primary-mid, #6887c4);
    background: #f3f6fd;
}

.clearfx { clear: both; }

/* ── 表單內容區 ── */
.login_write_block {
    padding: 24px 28px 20px;
}

/* ── 欄位標籤 ── */
.write_fonts {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 0 5px;
    letter-spacing: .3px;
}

.write_fonts:first-child { padding-top: 4px; }
.write_fonts_top10 { padding-top: 14px; }

.write_fonts_important {
    color: #dc2626;
    font-size: 12px;
}

/* ── 輸入框 ── */
input:focus { outline: none; }

.login_form {
    width: 100%;
    background: #f8faff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    padding: 11px 14px;
    color: #1a1a2e;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    box-sizing: border-box;
}

.login_form::placeholder { color: #b0bec5; }

.login_form:hover {
    border-color: var(--sp-primary-mid, #6887c4);
    background: #fff;
}

.login_form:focus {
    background: #fff;
    border-color: var(--sp-primary, #365a9e);
    box-shadow: 0 0 0 3px rgba(54, 90, 158, .10);
}

/* ── 驗證碼輸入框 ── */
.login_form_key {
    background: #f8faff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    padding: 9px 10px;
    color: #1a1a2e;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}

.login_form_key:hover,
.login_form_key:focus {
    background: #fff;
    border-color: var(--sp-primary, #365a9e);
    box-shadow: 0 0 0 3px rgba(54, 90, 158, .10);
}

/* ── 驗證碼區塊 ── */
.key_block {
    position: relative;
    padding: 10px 0 4px;
}

.key_img {
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    display: block;
}

.refresh_span {
    font-size: 12px;
    color: var(--sp-primary-mid, #6887c4);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s;
}

.refresh_span:hover { color: var(--sp-primary, #365a9e); }

/* 驗證碼：三欄緊靠，圖＋輸入框＋重刷 */
.key_block table {
    width: auto !important;
}
.key_block table tr {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.key_block table td {
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    width: auto !important;
}
.key_block table td[width="5"] { display: none !important; }
.key_block .login_form_key { width: 100px !important; }

/* ── 按鈕區 ── */
.login_btn_row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

/* 主按鈕（登入 / 註冊）— 主色藍 */
.login_btn {
    flex: 1;
    background: var(--sp-primary, #365a9e);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 20px;
    text-align: center;
    user-select: none;
    letter-spacing: .4px;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
    box-shadow: 0 2px 10px rgba(54, 90, 158, .22);
}

.login_btn:hover {
    background: var(--sp-primary-dark, #2a4780);
    box-shadow: 0 4px 16px rgba(54, 90, 158, .28);
    transform: translateY(-1px);
}

.login_btn:active { transform: translateY(0); }

/* 次要按鈕（忘記密碼）— 藍色 outline */
.login_btn_out {
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid var(--sp-border, #e2e8f0);
    border-radius: 8px;
    color: var(--sp-primary-mid, #6887c4);
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
    user-select: none;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
}

.login_btn_out:hover {
    border-color: var(--sp-primary, #365a9e);
    color: var(--sp-primary, #365a9e);
    background: var(--sp-primary-light, #eef2fb);
}

/* ── 第三方登入區 ── */
.social-login {
    margin-top: 20px;
}

.member_other_hr {
    position: relative;
    z-index: 9;
    height: 28px;
    margin: 6px 0 14px;
}

.member_other_hr::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8edf5;
    z-index: 9;
}

.member_other_hr::after {
    content: 'or';
    text-align: center;
    width: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af;
    background: #fff;
    font-size: 12px;
    z-index: 10;
    padding: 0 6px;
}

.social_msgtitle {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin: 0 0 12px;
    letter-spacing: .3px;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 第三方按鈕統一樣式 */
.btn-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    font-size: 17px;
    outline: none;
}

.btn-social:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.btn-line   { color: #06c755; border-color: rgba(6,199,85,.35); }
.btn-line:hover { background: #f0fff7; border-color: #06c755; }

.btn-facebook { color: #1877f2; border-color: rgba(24,119,242,.35); }
.btn-facebook:hover { background: #f0f5ff; border-color: #1877f2; }

.btn-google { color: #ea4335; border-color: rgba(234,67,53,.35); }
.btn-google:hover { background: #fff5f5; border-color: #ea4335; }

/* ── 老舊 fb/google/Line btn（保留相容性）── */
.fb_btn, .google_btn, .Line_btn {
    width: calc(33% - 5px);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin-top: 10px;
    padding: 7px 4px;
    text-align: center;
    transition: all .2s ease;
    white-space: nowrap;
}

.fb_btn     { background: #1877f2; }
.fb_btn:hover { background: #1457b3; }

.google_btn { background: #ea4335; }
.google_btn:hover { background: #c5221f; }

.Line_btn   { background: #06c755; }
.Line_btn:hover { background: #04a344; }

.fb_btn_disable,
.google_btn_disable,
.Line_btn_disable { opacity: .4; pointer-events: none; }

/* ── 登出按鈕 ── */
.login_out {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    text-align: center;
    display: inline-block;
    background: #fff;
    width: 120px;
    color: var(--sp-primary-mid, #6887c4);
    padding: 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(54,90,158,.08);
    cursor: pointer;
    transition: all .15s ease;
}

.login_out:hover {
    background: var(--sp-primary-light, #eef2fb);
    border-color: var(--sp-primary, #365a9e);
    color: var(--sp-primary, #365a9e);
}

/* ── 訊息展示 ── */
.login_msg_block { width: 100%; position: relative; }

.lmb_show {
    color: #9ca3af;
    width: calc(33% - 5px);
    display: inline-block;
    text-align: center;
    font-size: 12px;
}

/* ── 工具類 ── */
.key_img { border-radius: 8px; }

.detailBtn {
    display: inline-block;
    background: var(--sp-primary, #365a9e);
    font-size: 13px;
    color: #fff;
    width: 64px;
    padding: 4px;
    line-height: 1.7;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s;
}
.detailBtn:hover { background: var(--sp-primary-dark, #2a4780); }

.radius { border-radius: 8px; }

.marginBottom10px { margin-bottom: 10px; }

/* ── 表單底部裝飾（卡片下方淡色帶）── */
.login_block_footer {
    border-top: 1px solid #f0f3fb;
    background: #fafbff;
    padding: 12px 28px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

/* ── sendv2 按鈕在登入頁的覆寫（主色藍）── */
/* 統一高度：padding / line-height / box-sizing 三者一致 */
.login_write_block .sendv2_btn,
.login_write_block .sendv2_out_btn {
    box-sizing: border-box !important;
    display: block !important;
    padding: 0 20px !important;
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-align: center;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .1s;
    white-space: nowrap;
    vertical-align: middle;
}

/* 主按鈕：實心藍 */
.login_write_block .sendv2_btn {
    background: var(--sp-primary, #365a9e) !important;
    color: #fff !important;
    border: 1.5px solid var(--sp-primary, #365a9e) !important;
    box-shadow: 0 2px 10px rgba(54,90,158,.22);
    flex: 1;
}
.login_write_block .sendv2_btn:hover {
    background: var(--sp-primary-dark, #2a4780) !important;
    border-color: var(--sp-primary-dark, #2a4780) !important;
    box-shadow: 0 4px 16px rgba(54,90,158,.28) !important;
    transform: translateY(-1px);
}

/* 次要按鈕：outline */
.login_write_block .sendv2_out_btn {
    background: #fff !important;
    color: var(--sp-primary-mid, #6887c4) !important;
    border: 1.5px solid #e2e8f0 !important;
    flex: 0 0 auto;
}
.login_write_block .sendv2_out_btn:hover {
    border-color: var(--sp-primary, #365a9e) !important;
    color: var(--sp-primary, #365a9e) !important;
    background: var(--sp-primary-light, #eef2fb) !important;
}

/* btn_row：stretch 讓兩按鈕等高 */
.login_btn_row {
    align-items: stretch !important;
}

/* 移除舊的 center 間距補丁 */

/* ── RWD ── */
@media (max-width: 500px) {
    .login_block { border-radius: 0; box-shadow: none; border-left: none; border-right: none; }
    .login_write_block { padding: 18px 16px 14px; }
    .btn-social { width: 40px; height: 40px; font-size: 15px; }
}