/* ============================================================
   登入 / 註冊 / 忘記密碼樣式表 —— 官網前台設計系統的第四個已遷移區域

   涵蓋四頁：
     front/auth/login.blade.php                     登入（雙頁攤開卡）
     front/sign_up/show_third_party.blade.php        註冊方式選擇（單頁卡，路由 sign_up.show／URL /signup）
     front/sign_up/show.blade.php                    註冊表單（單頁卡，路由 sign_up.show_third_party／URL /signup/third-party）
     front/member/forget_password/index.blade.php    忘記密碼（單頁卡）

   【路由名稱與檔名是反的,踩過一次坑】sign_up.show 這個路由名稱指向的是
   show_third_party.blade.php,sign_up.show_third_party 這個路由名稱指向
   的才是 show.blade.php——命名在 SignUpController 裡就是反的,不是這次
   遷移弄反。改動前務必先看 controller,不要憑檔名或路由名猜。

   前身是 css/auth-style.css（漸層底 + 玻璃擬態卡 + 位移 hover，跟系統的
   克制筆調完全相反）。三頁共用同一個入會/登入動線，這次一起遷移，理由
   跟 checkout.css 遷移時一樣：色系與元件不能在中途換人。檔名跟著改成
   auth/auth.css，比照 member/member.css、checkout/checkout.css 的作法。

   【依賴】本檔使用的 CSS 自訂屬性（--brand-primary-* / --neutral-* /
   --panel-hairline / --ink-wash / --ink-divider / --semantic-error* /
   --link / --line-brand*）全部定義在 huatung.css 的 :root。載入順序必須
   是 huatung.css 在前、本檔在後 —— layout.blade.php 的 @stack('css')
   就在 huatung.css 的 <link> 之後，三頁都由該 stack 載入。

   【Facebook 藍本檔自帶】--facebook-brand 目前有兩個消費者（結帳頁 +
   這裡），照 checkout.css 開頭那條註解「日後出現第二個消費者時，把它
   上移到 huatung.css」——本檔先沿用同一份本地宣告，沒有上移。原因是
   huatung.css 走 webpack mix，改它要跑一次 npm run prod，而那支指令在
   本專案會外溢動到無關的 bundle（見專案筆記），不該在這次遷移裡順手做。
   上移是下一步，留給使用者決定要不要現在做。

   【元件配方比照會員中心 / 結帳頁】面板、浮動 label 欄位、錯誤狀態、
   焦點環、按鈕語言，逐條比照 member.css / checkout.css 的共用元件層；
   差別只在 class 前綴是 .auth-。要改元件的長相時三邊要一起改。

   【不進 webpack mix 是刻意的】前身就是用 ?v={{ filemtime() }} 直接
   載入的原始檔，沒進 mix，理由同上。

   【雙頁攤開只有登入頁用】登入頁是唯一有「已是會員 / 還不是會員」二選一
   情境的頁面，用 .auth-spread 呈現成攤開的兩頁。註冊、忘記密碼欄位較多
   或情境單純，維持單頁卡（.auth-panel），共用同一套元件配方。
   ============================================================ */

/* ========================================
   0. 本檔自有的色票（見上方說明）
   ======================================== */
:root {
    --facebook-brand: #1977F2;
}

/* ========================================
   1. 頁面外殼
   ======================================== */

/* 靠 padding 定住卡片的位置，不用 min-height:100vh 去撐版面置中 ——
   後者在高螢幕上會在卡片與 footer 之間留一大塊死白（曾經這樣做過，
   2026-08-11 改掉）。比照 checkout-page 的節奏：上 40px、下 56px。 */
.auth-page-shell {
    display: flex;
    justify-content: center;
    padding: 40px 16px 56px;
    background: var(--neutral-100);
}

/* ========================================
   2. 單頁卡（註冊 / 忘記密碼共用）
   ======================================== */
.auth-panel {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--panel-hairline);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(45, 41, 38, .08);
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 480px) {
    .auth-panel {
        padding: 24px 20px 22px;
    }
}

.auth-heading {
    font-size: var(--fs-sub);
    font-weight: 700;
    color: var(--neutral-700);
    margin: 0;
}

.auth-intro {
    margin: 0 0 -6px;
    color: var(--neutral-500);
    font-size: var(--fs-sub);
    line-height: 1.6;
}

/* ========================================
   3. 雙頁攤開卡（登入頁專用）

   左頁是登入表單、右頁是「還不是會員」的招募面。中間一條窄裝訂縫
   （髮絲邊 + 兩側各自往中心淡出的漸層陰影），不是插畫，全部用既有
   token 組出來。<992px 收成單欄，裝訂縫轉成頁與頁之間的一條上緣髮絲線
   ——比照 DESIGN.md「992px 是全站唯一的雙欄斷點」，不另訂新斷點。
   ======================================== */
.auth-spread {
    width: 100%;
    max-width: 720px;
    background: #fff;
    border: 1px solid var(--panel-hairline);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(45, 41, 38, .08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    overflow: hidden;
}

.auth-spread-page {
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    min-width: 0;
}

.auth-spread-page--login::after,
.auth-spread-page--recruit::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
}

.auth-spread-page--login::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--ink-wash));
}

.auth-spread-page--recruit::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--ink-wash));
}

.auth-spread-seam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--panel-hairline);
}

.auth-perk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-perk-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fs-sub);
    line-height: 1.5;
    color: var(--neutral-700);
}

.auth-perk-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--brand-primary-500);
    margin-top: 6px;
}

@media (max-width: 992px) {
    .auth-spread {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .auth-spread-seam {
        left: 0;
        right: 0;
        top: auto;
        bottom: 50%;
        width: auto;
        height: 1px;
    }

    .auth-spread-page--login::after,
    .auth-spread-page--recruit::before {
        display: none;
    }

    .auth-spread-page--recruit {
        padding-top: 24px;
    }
}

@media (max-width: 480px) {
    .auth-spread-page {
        padding: 24px 20px;
    }
}

/* ========================================
   4. 欄位：浮動 label，逐條比照 member.css 的 .member-field--floating

   同樣的規則：只用在 text/tel/email/password 這類「空/非空」二元清楚的
   input。可編輯的 select、type="date"、帶前綴框的欄位（本檔是手機號碼
   + 發送驗證碼鈕）不套用，維持靜態 label（見下面 5. 非浮動欄位）。
   ======================================== */
.auth-field {
    margin-bottom: 0;
}

.auth-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--neutral-500);
    font-size: var(--fs-sub);
    font-weight: 600;
}

.auth-field--floating {
    position: relative;
    padding-top: 9px;
}

.auth-field--floating label {
    position: absolute;
    left: 8px;
    top: 22px;
    padding: 0 4px;
    margin: 0;
    background: #fff;
    color: var(--neutral-400);
    font-size: var(--fs-sub);
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    transition: top .15s ease, color .15s ease, opacity .15s ease;
}

.auth-field--floating:has(.auth-control:focus) label,
.auth-field--floating:has(.auth-control:not(:placeholder-shown)) label {
    top: 0;
    color: var(--neutral-500);
}

.auth-field--floating:has(.auth-control:focus) label {
    color: var(--brand-primary-700);
}

.auth-field--floating:has(.auth-control.is-invalid) label {
    color: var(--semantic-error);
}

@media (prefers-reduced-motion: reduce) {
    .auth-field--floating label {
        transition: none;
    }
}

.auth-control {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--neutral-400);
    border-radius: 4px;
    background: #fff;
    color: var(--neutral-700);
    font-size: var(--fs-sub);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-control:focus {
    border-color: var(--brand-primary-500);
    box-shadow: 0 0 0 3px var(--brand-primary-100);
    outline: none;
}

.auth-control:disabled {
    background: var(--neutral-200);
    color: var(--neutral-500);
    cursor: not-allowed;
}

.auth-control.is-invalid {
    border-color: var(--semantic-error);
}

.auth-field:has(> .auth-error) .auth-control {
    border-color: var(--semantic-error);
}

.auth-field:has(> .auth-error) .auth-control:focus {
    border-color: var(--semantic-error);
    box-shadow: 0 0 0 3px var(--semantic-error-wash);
}

@media (prefers-reduced-motion: reduce) {
    .auth-control {
        transition: none;
    }
}

/* 浮動 label 欄位：錯誤訊息騎上輸入框上緣、取代 label，比照 member.css。
   用 opacity 讓 label 淡出而不是 display:none —— <label for> 仍是這個
   input 的可及名稱來源，讀屏才讀得到。 */
.auth-field--floating > .auth-error {
    position: absolute;
    top: 0;
    left: 8px;
    max-width: calc(100% - 16px);
    margin: 0;
    padding: 0 4px;
    background: #fff;
    color: var(--semantic-error);
    font-size: var(--fs-sub);
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    animation: auth-error-rise .15s ease;
}

.auth-field--floating:has(> .auth-error) > label {
    opacity: 0;
}

/* ========================================
   5. 非浮動欄位（手機號碼 + 發送驗證碼、生日）
   ======================================== */
.auth-field-static {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-input-group {
    display: flex;
    gap: 8px;
}

.auth-input-group .auth-control {
    flex: 1;
}

.auth-btn-inline {
    flex: none;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--neutral-400);
    border-radius: 4px;
    background: var(--neutral-200);
    color: var(--neutral-700);
    font-size: var(--fs-micro);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: scale var(--press-out, 0.18s) var(--press-ease, cubic-bezier(0.2, 0.9, 0.25, 1));
}

@media (hover: hover) {
    .auth-btn-inline:hover:not(:disabled) {
        border-color: var(--brand-primary-100);
        background: var(--brand-primary-100);
        color: var(--brand-primary-700);
    }
}
/* 按壓回饋(2026-09-08 一次補齊)。宣告與上面那組 hover 相同,外加整顆縮一下 ——
   觸控上沒有 hover,滑鼠點連結也不觸發 :focus-visible,:active 是手指唯一
   看得到的回饋。而只換顏色不夠:手指正好蓋住變色的那一塊,看得見的只有邊緣。
   transition-duration 那一行把按下的方向壓成瞬間(回彈仍走基準態的 --press-out)。
   ⚠️ 不可以搬進 @media (hover: hover) —— 那等於在手機上整組失效。
   配方與三個 token 見 huatung.css 的 :root --press-scale。 */
.auth-btn-inline:active:not(:disabled) {
    border-color: var(--brand-primary-100);
    background: var(--brand-primary-100);
    color: var(--brand-primary-700);
    transition-duration: var(--press-in, 0.04s);
}

.auth-btn-inline:active {
    scale: var(--press-scale, 1);
    transition-duration: var(--press-in, 0.04s);
}


.auth-btn-inline:disabled {
    color: var(--neutral-500);
    cursor: not-allowed;
}

/* 非浮動欄位下方常駐錯誤（跟浮動欄位不同：這裡沒有邊框線可以騎）。 */
.auth-field-static > .auth-error {
    margin: 0;
    color: var(--semantic-error);
    font-size: var(--fs-sub);
    font-weight: 600;
    animation: auth-error-rise .15s ease;
}

.auth-help {
    margin: 0;
    color: var(--neutral-500);
    font-size: var(--fs-micro);
    line-height: 1.55;
}

@keyframes auth-error-rise {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field--floating > .auth-error,
    .auth-field-static > .auth-error {
        animation: none;
    }
}

/* ========================================
   6. 連結、按鈕、分隔線
   ======================================== */
.auth-field-row-end {
    display: flex;
    justify-content: flex-end;
}

.auth-link {
    color: var(--link);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link:focus-visible {
    color: var(--link-hover);
}

@media (hover: hover) {
    .auth-link:hover {
        color: var(--link-hover);
    }
}

.auth-btn-submit {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 6px;
    background: var(--brand-primary-700);
    color: #fff;
    font-size: var(--fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease,
                scale var(--press-out, 0.18s) var(--press-ease, cubic-bezier(0.2, 0.9, 0.25, 1));
}

@media (hover: hover) {
    .auth-btn-submit:hover {
        background: var(--brand-primary-600);
    }
}
/* 按壓回饋(2026-09-08 一次補齊)。宣告與上面那組 hover 相同,外加整顆縮一下 ——
   觸控上沒有 hover,滑鼠點連結也不觸發 :focus-visible,:active 是手指唯一
   看得到的回饋。而只換顏色不夠:手指正好蓋住變色的那一塊,看得見的只有邊緣。
   transition-duration 那一行把按下的方向壓成瞬間(回彈仍走基準態的 --press-out)。
   ⚠️ 不可以搬進 @media (hover: hover) —— 那等於在手機上整組失效。
   配方與三個 token 見 huatung.css 的 :root --press-scale。 */
.auth-btn-submit:active {
    background: var(--brand-primary-600);
    scale: var(--press-scale, 1);
    transition-duration: var(--press-in, 0.04s);
}


.auth-btn-submit:focus-visible,
.auth-control:focus-visible,
.auth-link:focus-visible,
.auth-btn-ghost:focus-visible,
.auth-social-btn:focus-visible,
.auth-btn-inline:focus-visible {
    outline: 2px solid var(--brand-primary-700);
    outline-offset: 2px;
}

.auth-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--neutral-400);
    border-radius: 6px;
    background: #fff;
    color: var(--neutral-700);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease,
                scale var(--press-out, 0.18s) var(--press-ease, cubic-bezier(0.2, 0.9, 0.25, 1));
}

@media (hover: hover) {
    .auth-btn-ghost:hover {
        border-color: var(--brand-primary-100);
        background: var(--brand-primary-100);
        color: var(--brand-primary-700);
    }
}
/* 按壓回饋(2026-09-08 一次補齊)。宣告與上面那組 hover 相同,外加整顆縮一下 ——
   觸控上沒有 hover,滑鼠點連結也不觸發 :focus-visible,:active 是手指唯一
   看得到的回饋。而只換顏色不夠:手指正好蓋住變色的那一塊,看得見的只有邊緣。
   transition-duration 那一行把按下的方向壓成瞬間(回彈仍走基準態的 --press-out)。
   ⚠️ 不可以搬進 @media (hover: hover) —— 那等於在手機上整組失效。
   配方與三個 token 見 huatung.css 的 :root --press-scale。 */
.auth-btn-ghost:active {
    border-color: var(--brand-primary-100);
    background: var(--brand-primary-100);
    color: var(--brand-primary-700);
    scale: var(--press-scale, 1);
    transition-duration: var(--press-in, 0.04s);
}


.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--neutral-500);
    font-size: var(--fs-micro);
    font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ink-divider);
}

.auth-foot-note {
    text-align: center;
    margin: 0;
    color: var(--neutral-500);
    font-size: var(--fs-micro);
}

/* ========================================
   7. 第三方登入（三顆平輩的按鈕，逐條比照 checkout.css 的
      .checkout-social-btn。品牌識別留在圖示上，按鈕本身維持中性外框。）
   ======================================== */
.auth-social-login {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.auth-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 8px;
    border: 1px solid var(--neutral-400);
    border-radius: 6px;
    background: #fff;
    color: var(--neutral-700);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease,
                scale var(--press-out, 0.18s) var(--press-ease, cubic-bezier(0.2, 0.9, 0.25, 1));
}

@media (hover: hover) {
    .auth-social-btn:hover {
        border-color: var(--brand-primary-100);
        background: var(--brand-primary-100);
        color: var(--brand-primary-700);
    }
}
/* 按壓回饋(2026-09-08 一次補齊)。宣告與上面那組 hover 相同,外加整顆縮一下 ——
   觸控上沒有 hover,滑鼠點連結也不觸發 :focus-visible,:active 是手指唯一
   看得到的回饋。而只換顏色不夠:手指正好蓋住變色的那一塊,看得見的只有邊緣。
   transition-duration 那一行把按下的方向壓成瞬間(回彈仍走基準態的 --press-out)。
   ⚠️ 不可以搬進 @media (hover: hover) —— 那等於在手機上整組失效。
   配方與三個 token 見 huatung.css 的 :root --press-scale。 */
.auth-social-btn:active {
    border-color: var(--brand-primary-100);
    background: var(--brand-primary-100);
    color: var(--brand-primary-700);
    scale: var(--press-scale, 1);
    transition-duration: var(--press-in, 0.04s);
}


.auth-social-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* LINE 走 components.css 的 .ht-icon 遮罩(2026-08-21)。形狀仍然是官方
   來源 —— FA 5.15.4 免費版附的 svgs/brands/line.svg,只是不再為了這一顆
   字符載入 77KB 的 brands 字型。手畫品牌圖形一樣是禁止的。

   尺寸給到 16px 而不是靠 font-size:改遮罩之後圖示的大小由 width/height
   決定,直接寫成跟旁邊 Google / Facebook 兩顆行內 SVG 相同的數字,三顆才
   真的一樣大(舊寫法是 1em 再被 fa-fw 撐成 1.25em,比鄰居大了兩像素)。 */
.auth-social-btn i {
    flex: none;
    width: 16px;
    height: 16px;
}

.auth-social-btn .auth-social-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-social-btn.is-line svg,
.auth-social-btn.is-line i {
    color: var(--line-brand);
}

.auth-social-btn.is-fb svg {
    color: var(--facebook-brand);
}

/* 單頁卡（註冊頁若日後加社群註冊）版面較寬，社群鈕可以放得下文字，
   不用縮成 icon-only；雙頁卡左頁較窄，靠 .auth-social-login--compact
   把文字收起來,只留圖示 + title 屬性,無障礙名稱由 aria-label 提供。 */
.auth-social-login--compact .auth-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 註冊方式選擇頁（單一入口，四選一）：直式一欄、文字常駐、稍微高一點,
   當成一顆完整的選項列而不是壓縮的圖示鈕。 */
.auth-social-login--stacked {
    grid-template-columns: 1fr;
    gap: 10px;
}

.auth-social-login--stacked .auth-social-btn {
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 8px 16px;
    font-size: var(--fs-sub);
}