@charset "UTF-8";
/* ==========================================================================
   ts_modern — 登录页 Tab 修复
   --------------------------------------------------------------------------
   问题：head 里有一段数据库注入的样式（源头未知，含 a{color:#000}），
   位于所有主题样式之后，把裸 <a> 全部压成纯黑。登录页的
   「Returning Customers / New? Please Provide Your Billing Information」
   是 Bootstrap .nav-tabs .nav-link（透明底），黑金模式下黑字压黑底不可见。
   --------------------------------------------------------------------------
   修复：只作用于 body#loginBody 的 .nav-tabs .nav-link，用主题变量取色
   （变量随 data-theme 自动切换，浅/深共用同一套规则）。
   .nav-tabs .nav-link 特异性 (0,2,0) 高于裸 a (0,0,1)，与注入样式的
   先后顺序无关，必然胜出。
   删除本文件即完整回退。
   ========================================================================== */

/* --------------------------------------------------------------------------
   两个 Tab 标签被全站 .nav-link 的大写 + 宽字距撑长，在 50% 宽的中心列里
   放不下会折成两行，底部拖出不齐的发丝线。改成等宽段式 Tab：桌面并排、
   窄屏堆叠，标签内部允许换行。
   -------------------------------------------------------------------------- */
body#loginBody .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--lx-line, #E7E1D7);
}

body#loginBody .nav-tabs .nav-link {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: normal;
    padding: 12px 14px;
    line-height: 1.45;
    /* 全站 .nav-link 的 .14em 宽字距把这两个长标签撑到换行难看，
       这里单独收到 .06em，并让断行尽量均衡（特异性高于全站规则，
       故能覆盖它的 !important）。 */
    letter-spacing: .06em !important;
    text-wrap: balance;
}

@media (max-width: 575.98px) {
    body#loginBody .nav-tabs {
        flex-wrap: wrap;
    }

    body#loginBody .nav-tabs .nav-link {
        flex: 1 1 100%;
        text-align: left;
        padding: 11px 12px;
    }
}

/* 未激活 Tab：次要文字色，清晰可读 */
body#loginBody .nav-tabs .nav-link {
    color: var(--lx-text-2, #4E4A45);
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--lx-line, #E7E1D7);
}

/* hover / focus：金色，与全站链接语言一致 */
body#loginBody .nav-tabs .nav-link:hover {
    color: var(--theme-accent-gold, #D4AF37);
    border-color: transparent;
}

body#loginBody .nav-tabs .nav-link:focus,
body#loginBody .nav-tabs .nav-link:focus-visible {
    color: var(--theme-accent-gold, #D4AF37);
    outline: 2px solid var(--theme-accent-gold, #D4AF37);
    outline-offset: 2px;
}

/* 激活 Tab：卡片底 + 主文字色，替代 Bootstrap 写死的白底灰字
   （深色模式下那块白底非常刺眼） */
body#loginBody .nav-tabs .nav-link.active {
    color: var(--lx-text, #17161A);
    background-color: var(--lx-card, #FFFFFF);
    border-color: var(--lx-line, #E7E1D7);
    border-bottom-color: var(--lx-card, #FFFFFF);
}

/* 激活 Tab 顶边给一条金色短线，呼应站点 Luxe 语言 */
body#loginBody .nav-tabs .nav-link.active {
    border-top: 2px solid var(--theme-accent-gold, #D4AF37);
}

/* --------------------------------------------------------------------------
   登录栏内的普通文本链接（如「Forgot your password?」）同样被那条
   a{color:#000} 压成纯黑，在黑底上基本读不出来，一并补色。
   排除 Tab 与按钮，避免与上面的规则打架。
   -------------------------------------------------------------------------- */
body#loginBody #loginDefault a:not(.nav-link):not(.btn):not(.cssButton) {
    color: var(--theme-link-color, #4E4A45);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body#loginBody #loginDefault a:not(.nav-link):not(.btn):not(.cssButton):hover {
    color: var(--theme-accent-gold, #D4AF37);
}

body#loginBody #loginDefault a:not(.nav-link):not(.btn):not(.cssButton):focus-visible {
    outline: 2px solid var(--theme-accent-gold, #D4AF37);
    outline-offset: 2px;
}