/* [2026-10-12] 目的：註冊與員工登入頁文字最小為 12px，提升欄位提示、步驟及輔助文字的可讀性。 */
/* [2026-10-11] 目的：註冊頁跟隨首頁改用深綠與淺灰綠，恢復綠色品牌側欄並同步按鈕、焦點與商店示意色彩；錯誤提示仍保留警示色。 */
/* [2026-10-11] 目的：註冊頁與新版首頁統一深綠白色系，包含側欄、表單、按鈕與商店示意；保留原表單布局與驗證流程。 */
/* [2026-10-11] 目的：開店註冊採官網黑白視覺與分區表單，移除窄欄、隱藏提示及舊字體設定；樣式僅用於本頁。 */
body.signup-page {
    margin: 0;
    background: #f5f5f5;
    color: #141414;
    font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.signup-page #CenterContenter, .signup-page #CenterContenter * { box-sizing: border-box; }
.signup-page #mainnav { margin: 0; border: 0; }
.signup-page #top-bar { border-bottom: 1px solid #e5e5e5; box-shadow: none; background: #ffffff; }
.signup-page #Header1_Logo { font-size: 20px; letter-spacing: .03em; }
.signup-page #CenterContenter { padding: 120px 36px 72px; min-height: calc(100vh - 200px); background: radial-gradient(ellipse at 8% 12%, #eeeeee 0, transparent 45%), radial-gradient(ellipse at 92% 85%, #f2f2f2 0, transparent 40%); }
.signup-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 30px; align-items: start; }
.signup-intro { position: relative; overflow: hidden; padding: 32px 30px; border-radius: 18px; background: radial-gradient(ellipse at 100% 40%, #394944 0, transparent 65%), #202d2a; color: #ffffff; box-shadow: 0 18px 45px rgba(0, 0, 0, .13); }
.signup-back { color: #d4d4d4; font-size: 12px; text-decoration: none; display: inline-block; margin-bottom: 35px; }
.signup-back:hover { color: #ffffff; }
.signup-eyebrow { display: block; color: #7a818b; font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.signup-intro .signup-eyebrow { color: #a9cfb6; }
.signup-intro h1 { margin: 17px 0; font-size: 34px; font-weight: 600; line-height: 1.5; letter-spacing: -.04em; }
.signup-intro-text { color: #d4d4d4; font-size: 13px; line-height: 1.9; margin: 0; max-width: 280px; }
.signup-guide { display: grid; gap: 20px; margin: 28px 0; }
.signup-guide > div { display: flex; gap: 15px; align-items: flex-start; }
.signup-guide > div > span { color: #a9cfb6; font-size: 12px; padding-top: 3px; font-weight: 600; }
.signup-guide p { margin: 0; font-size: 12px; color: #bdbdbd; line-height: 1.8; }
.signup-guide strong { display: block; color: #ffffff; font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.signup-intro-login { border-top: 1px solid #404040; padding-top: 21px; margin: 0; font-size: 12px; color: #bdbdbd; }
.signup-intro-login a, .signup-card-login a { color: #141414; font-weight: 600; text-decoration: none; }
.signup-intro-login a { color: #ffffff; }
.signup-intro-login a:hover, .signup-card-login a:hover { text-decoration: underline; }
.SignupBlock { position: relative; width: 100%; min-width: 0; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 18px; padding: 36px 40px 28px; box-shadow: 0 16px 45px rgba(0, 0, 0, .055); }
.SignupBlock::before { content: ""; position: absolute; left: 40px; top: -1px; width: 52px; height: 3px; border-radius: 0 0 3px 3px; background: #28513e; }
.signup-card-header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5; }
.signup-card-header .signup-eyebrow { color: #28513e; }
.signup-card-header h2 { margin: 8px 0 7px; font-size: 27px; letter-spacing: -.03em; font-weight: 600; }
.signup-card-header > p { margin: 0; font-size: 13px; color: #848b95; }
#Message:empty { display: none; }
#Message:not(:empty) { margin: 0 0 22px; padding: 12px 15px; background: #fff5f3; color: #a33121; border: 1px solid #f0d4cd; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.signup-section { margin: 0 0 26px; padding: 0 0 26px; border-bottom: 1px solid #e5e5e5; }
.signup-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.signup-section-heading > span { border: 1px solid #d5e5da; background: #eaf2ed; color: #28513e; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.signup-section-heading h3 { margin: 0; font-size: 15px; font-weight: 600; }
.signup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 17px; }
.SignupInput { min-width: 0; }
.signup-field-wide { grid-column: 1 / -1; }
.SignupInput label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 500; color: #333333; }
.SignupInputValueTxt { display: block; width: 100%; height: 44px; background: #fafafa; border: 1px solid #dcdcdc; border-radius: 7px; padding: 10px 12px; color: #141414; font: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.SignupInputValueTxt::placeholder { color: #a0a6af; opacity: 1; }
.SignupInputValueTxt:focus { border-color: #28513e; outline: none; box-shadow: 0 0 0 3px rgba(40, 81, 62, .12); background: #fff; }
.signup-field-hint { margin: 7px 0 0; font-size: 12px; color: #9299a3; }
.SignupShowTxt { margin: 0 0 18px; font-size: 12px; line-height: 1.8; color: #8b929b; }
.SignupShowTxt a { color: #525252; text-decoration: underline; text-underline-offset: 3px; }
.Signup { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; border: 1px solid #28513e; border-radius: 8px; background: #28513e; color: #ffffff; padding: 12px 18px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 5px 12px rgba(40, 81, 62, .13); transition: background .15s, box-shadow .15s; }
.Signup > span:last-child { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #ffffff; }
.Signup:hover { background: #1d3c2e; color: #ffffff; box-shadow: 0 7px 18px rgba(40, 81, 62, .2); }
.Signup:focus-visible, .signup-page a:focus-visible { outline: 3px solid #28513e; outline-offset: 3px; }
.signup-card-login { margin: 16px 0 0; font-size: 12px; text-align: center; color: #949ba4; }
.signup-page .Footer { background: #fff; border-top: 1px solid #e5e7eb; }

/* [2026-10-11] 目的：品牌側欄加入純 CSS 商店視窗與商品幾何示意，補足畫面完成度並避免新增圖檔依賴。 */
.signup-store-visual { position: relative; margin: 26px -4px 22px; padding: 16px 6px 22px; }
.signup-store-orbit { position: absolute; width: 235px; height: 235px; border: 1px solid rgba(169, 207, 182, .2); border-radius: 50%; left: 20px; top: -10px; }
.signup-store-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #a9cfb6; top: 32px; right: 27px; box-shadow: 0 0 0 5px rgba(169, 207, 182, .08); }
.signup-store-window { position: relative; transform: rotate(-4deg); background: #ffffff; border: 1px solid #dcdcdc; border-radius: 9px; overflow: hidden; box-shadow: 0 16px 28px rgba(0, 0, 0, .22); }
.signup-window-bar { height: 25px; border-bottom: 1px solid #e5e5e5; display: flex; gap: 4px; align-items: center; padding: 0 10px; background: #f5f5f5; }
.signup-window-bar i { width: 4px; height: 4px; border-radius: 50%; background: #a3a3a3; }
.signup-window-bar span { margin-left: auto; color: #737373; font-size: 12px; letter-spacing: .15em; }
.signup-window-content { padding: 13px; }
.signup-window-brand { display: flex; align-items: center; justify-content: space-between; color: #141414; font-size: 12px; font-weight: 600; }
.signup-window-brand span { color: #737373; font-size: 12px; letter-spacing: .08em; }
.signup-window-hero { display: flex; justify-content: space-between; align-items: center; height: 82px; background: #eaf2ed; margin: 10px 0; padding: 12px; overflow: hidden; }
.signup-window-hero > span { font-size: 12px; color: #141414; font-weight: 600; line-height: 1.7; }
.signup-sculpture { position: relative; width: 43px; height: 52px; border-radius: 23px 23px 4px 4px; background: linear-gradient(100deg, #28513e, #a9cfb6); box-shadow: 10px 8px 0 #c1d8ca; transform: rotate(12deg); }
.signup-sculpture::after { content: ""; position: absolute; inset: 10px 9px 0; border-radius: 20px 20px 0 0; background: #eaf2ed; }
.signup-window-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.signup-window-products i { height: 36px; border-radius: 3px; background: radial-gradient(circle at 50% 50%, #28513e 0 9px, transparent 10px), #eaf2ed; }
.signup-window-products i:nth-child(2) { background: linear-gradient(70deg, transparent 35%, #404040 36% 65%, transparent 66%), #e5e5e5; }
.signup-window-products i:nth-child(3) { background: radial-gradient(ellipse at 50% 70%, #28513e 0 11px, transparent 12px), #eaf2ed; }
.signup-store-caption { display: block; margin-top: 23px; text-align: center; font-size: 12px; color: #bdbdbd; letter-spacing: .19em; }

/* [2026-10-11] 目的：平板縮小側欄，手機改為單欄並保留可讀字級與足夠的輸入區域。 */
@media (max-width: 980px) {
    .signup-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
    .signup-intro { padding: 27px 24px; }
    .signup-intro h1 { font-size: 29px; }
    .SignupBlock { padding: 28px; }
}
@media (max-width: 767px) {
    .signup-page #CenterContenter { padding: 108px 18px 40px; }
    .signup-layout { display: block; max-width: 560px; }
    .signup-intro { padding: 24px; margin-bottom: 20px; border-radius: 12px; }
    .signup-back { margin-bottom: 22px; }
    .signup-intro h1 { margin: 10px 0; font-size: 30px; line-height: 1.4; }
    .signup-intro h1 br { display: none; }
    .signup-intro-text { max-width: none; font-size: 13px; }
    .signup-guide, .signup-intro-login { display: none; }
    .signup-store-visual { display: none; }
    .SignupBlock { padding: 25px 22px; border-radius: 12px; }
    .signup-card-header h2 { font-size: 24px; }
    .signup-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .SignupInputValueTxt { font-size: 16px; height: 48px; }
    .signup-page #Header1_Logo { margin-left: 8px; font-size: 18px; }
}

/* [2026-10-11] 目的：以欄位錯誤、成功訊息與忙碌狀態呈現註冊防呆，避免只靠彈窗提醒或重複送出。 */
.signup-field-error { margin: 7px 0 0; font-size: 12px; color: #a33121; line-height: 1.6; overflow-wrap: anywhere; }
.signup-field-error:empty { display: none; }
.signup-field-invalid .SignupInputValueTxt { border-color: #be6554; background: #fff8f6; }
.signup-field-invalid .SignupInputValueTxt:focus { box-shadow: 0 0 0 3px rgba(190, 101, 84, .12); }
.SignupInputValueTxt[aria-busy="true"] { border-color: #28513e; }
.SignupInputValueTxt:disabled { opacity: .75; cursor: wait; }
.Signup:disabled, .Signup:disabled:hover { opacity: .7; cursor: wait; box-shadow: none; }
.Signup:disabled[aria-busy="false"] { cursor: default; }
#Message.signup-message-success { color: #285139; background: #eef6ee; border-color: #c8dfca; }

/* [2026-10-11] 目的：註冊頁隱藏聯絡資訊後，頁尾改為等寬雙欄，手機直向排列，避免保留空白第三欄。 */
.signup-page .Footer .wsite-multicol{display:flex;flex-wrap:wrap}
.signup-page .Footer .wsite-multicol-col{float:none;width:50%;min-width:0}
@media (max-width:767px){.signup-page .Footer .wsite-multicol-col{width:100%}}
/* [2026-10-11] 目的：註冊頁頁尾連結覆寫 Bootstrap 預設藍色，使用品牌深綠並以底線提示滑鼠移入及鍵盤聚焦狀態。 */
.signup-page .Footer a,.signup-page .Footer a:visited{color:#28513e;text-decoration:none}
.signup-page .Footer a:hover,.signup-page .Footer a:focus-visible{color:#1d3c2e;text-decoration:underline;text-underline-offset:3px}

/* [2026-10-11] 目的：建店成功資訊沿用品牌配色，網址可換行，登入及查看商店按鈕在手機可直向排列。 */
.signup-complete[hidden]{display:none}
.signup-complete{color:#333333;font-size:14px}
.signup-complete dl{padding:20px;background:#f3f6f4;border-radius:8px;margin:24px 0}
.signup-complete dt{font-size:12px;color:#666666;margin-top:14px}
.signup-complete dt:first-child{margin-top:0}
.signup-complete dd{margin:4px 0 0;overflow-wrap:anywhere}
.signup-complete a{color:#28513e}
.signup-complete-actions{display:flex;flex-wrap:wrap;gap:12px}
/* [2026-10-12] 目的：HTTPS 尚未就緒時確實隱藏查看商店入口，避免連結 display 樣式蓋過 hidden 屬性。 */
.signup-complete-actions a[hidden]{display:none}
.signup-complete-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid #28513e;border-radius:8px;text-decoration:none}
.signup-complete-actions .signup-complete-primary{background:#28513e;color:#ffffff}
.signup-complete-actions a:hover{background:#eaf2ed;color:#1d3c2e}
.signup-complete-actions .signup-complete-primary:hover{background:#1d3c2e;color:#ffffff}
@media(max-width:767px){.signup-complete-actions a{width:100%}}