﻿/* Source branding, with aligned form columns and responsive page geometry. */
body.merchant-route{min-width:0}
.merchant-join{background:#fafafa;color:#333;font-family:Arial,'Microsoft YaHei',sans-serif}
.merchant-join *{box-sizing:border-box}
.join-container{width:min(1200px,calc(100% - 48px));margin:0 auto}
.join-header{position:relative;height:30.729167vw;min-height:440px;overflow:hidden}
.join-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.join-header>.join-container{position:relative;z-index:1;height:100%}
.join-top{height:70px;display:flex;align-items:center;justify-content:space-between}
.join-top>a>img{height:43px;width:auto;display:block}
.join-top>button{display:flex;align-items:center;justify-content:center;gap:5px;color:#fff;min-width:44px;min-height:44px;font-size:14px}
.join-top>button>img{width:20px;height:20px;border-radius:50%}
.join-copy{width:58%;padding-top:10px;color:#fff}
.join-copy h1{font-size:clamp(30px,2.5vw,48px);font-weight:400;line-height:1.2;margin:0 0 24px}
.join-copy p{font-size:20px;line-height:1.45;margin:0}
.join-panel{position:relative;z-index:2;margin-top:-120px;margin-bottom:50px;padding:38px 64px 64px;border-radius:15px;background:#fff}
.join-panel>h2{width:min(600px,100%);font-size:24px;font-weight:700;line-height:1.3;margin:0 auto 10px}
.join-login{width:min(600px,100%);font-size:14px;line-height:1.6;margin:0 auto}
.join-login a{color:#ed0d50}
@media(min-width:641px){
 .join-panel>h2,.join-panel>.join-login{width:calc(min(600px,100%) - 220px);margin-left:calc((100% - min(600px,100%))/2 + 220px);margin-right:0}
}
.join-form{width:min(600px,100%);margin:36px auto 0}
.join-tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 26px 220px}
.join-tabs button{min-height:44px;background:#eee;border-radius:4px;color:#333;font-size:14px}
.join-tabs button.active{background:#ed0d50;color:#fff}
.join-field{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:20px;align-items:center;margin-bottom:22px;font-size:14px}
.join-field>span{line-height:1.5;color:#606266}
.join-field>span:before{content:'*';color:#f56c6c;margin-right:4px}
.join-field>input,.join-password{width:100%;min-width:0}
.join-field input{width:100%;height:44px;border:1px solid #dcdfe6;border-radius:4px;padding:0 14px;font-size:14px;background:#fff;box-shadow:none}
.join-field input::placeholder{color:#909399}
.join-field input:focus,.join-field select:focus,.join-footer input:focus{outline:none;border-color:#ed0d50;box-shadow:0 0 0 2px rgba(237,13,80,.12)}
.merchant-join input::selection{background:rgba(237,13,80,.18);color:#333}
.join-password button:focus-visible{outline:2px solid #ed0d50;outline-offset:-4px;border-radius:4px}
.join-password{position:relative}
.join-password input{padding-right:44px}
.join-password button{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.join-password img{width:16px;height:auto}
.join-next{display:block;margin:30px 0 0 220px;width:calc(100% - 220px);height:44px;background:#ed0d50;color:#fff;border-radius:7px;font-size:14px}
.join-next:hover{background:#d80944}
.join-form .form-error{margin:0 0 0 220px;width:auto;line-height:1.5}
.join-form .form-error:empty{display:none}
.join-footer{background:#fff;border-top:1px solid #eee;padding:44px 24px 0}
.join-footer-columns{width:min(1200px,100%);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr .7fr;gap:28px;padding-bottom:36px;border-bottom:1px solid #ddd}
.join-footer-columns>section{min-width:0}
.join-footer-logo{display:block;height:65px;width:auto;margin-bottom:22px}
.join-footer h3{font-size:18px;font-weight:400;line-height:1.4;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid #ed0d50}
.join-footer section>button,.join-footer section>a{display:block;text-align:left;font-size:14px;line-height:1.6;margin-bottom:12px;overflow-wrap:anywhere}
.join-footer section>p{margin:0 0 10px;font-size:14px}
.join-footer input{width:100%;height:44px;padding:0 14px;border:1px solid #dcdfe6;border-radius:4px;min-width:0}
.join-footer form>button{display:block;margin-top:12px;min-height:44px;background:#ed0d50;color:#fff;padding:0 23px;font-size:15px;border-radius:3px}
.join-copyright{text-align:center;font-size:13px;color:#666;line-height:1.6;padding:22px 0;margin:0}
@media(max-width:1024px){
 .join-header{min-height:440px}.join-copy{width:65%}.join-copy p{font-size:17px}
 .join-panel{padding:32px 36px 48px}.join-footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
}
@media(max-width:640px){
 .join-container{width:calc(100% - 32px)}
 .join-header{height:auto;min-height:0;padding-bottom:76px}
 .join-background{object-position:65% center}
 .join-header:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,69,155,.75),rgba(0,69,155,.35));pointer-events:none}
 .join-top{height:64px}.join-top>a>img{height:38px}
 .join-copy{width:100%;padding:12px 0 0}.join-copy h1{font-size:30px;line-height:1.2;margin-bottom:18px;max-width:340px}
 .join-copy p{font-size:15px;line-height:1.6}
 .join-panel{margin-top:-40px;margin-bottom:28px;padding:26px 20px 32px;border-radius:12px}
 .join-panel>h2{font-size:22px}.join-login{font-size:14px}
 .join-form{margin-top:26px}.join-tabs{margin:0 0 24px;gap:12px}
 .join-field{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:20px}
 .join-field input{height:48px;font-size:16px}.join-password button{height:48px;width:48px}
 .join-next{width:100%;margin:26px 0 0;height:48px;font-size:16px}.join-form .form-error{margin:0}
 .join-footer{padding:30px 20px 0}.join-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:24px}
 .join-footer-columns>section:first-child{grid-column:1/-1}.join-footer-logo{height:52px;margin-bottom:16px}
 .join-footer form{display:flex;gap:10px;max-width:440px}.join-footer form>button{margin:0;padding:0 14px;flex-shrink:0}
 .join-footer h3{font-size:16px}.join-footer section>button,.join-footer section>a{min-height:36px;margin-bottom:6px}
}
@media(max-width:360px){.join-copy h1{font-size:26px}.join-panel{padding:24px 16px}.join-footer-columns{grid-template-columns:1fr}.join-footer form{flex-direction:column}.join-footer form>button{align-self:flex-start}}

.join-field select{width:100%;min-height:48px;border:1px solid #ddd;border-radius:4px;padding:10px;background:#fff}.join-field input[type=file]{padding:10px;height:auto}.join-agreement{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.join-agreement a{color:#ed0d50}.join-success{margin-top:60px;text-align:center}.join-success h2{margin:0 auto 20px}.join-success .join-next{display:block;margin:24px auto;line-height:48px}

.join-top>button>img{width:26px;height:26px;border:0}.join-top>button{gap:8px}
.join-application-form{margin-top:32px;margin-bottom:32px}.join-application-form .join-field{grid-template-columns:180px minmax(0,1fr);column-gap:20px;margin-bottom:22px}.join-application-form .join-field input,.join-application-form .join-field>select{height:50px;border:1px solid #eee;border-radius:4px;width:100%;min-width:0;padding:0 14px;font-size:14px}.join-application-form .join-field input::placeholder{color:#999}.join-application-form .join-upload-field,.join-application-form .join-document-field{align-items:start}.join-application-form .join-upload-field>span,.join-application-form .join-document-field>span{padding-top:9px}.merchant-upload{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;flex-shrink:0;background:#f7f8fa;overflow:hidden;cursor:pointer;color:#aaa}.merchant-upload svg{width:35px;height:35px}.merchant-upload>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#f7f8fa}.merchant-upload>img[hidden]{display:none}.join-application-form .merchant-upload>input{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer}.merchant-upload:focus-within{outline:2px solid #ed0d50;outline-offset:3px}.join-document-cards{display:flex;align-items:flex-start;gap:30px;flex-wrap:wrap}.join-document-card{width:100px;position:relative;padding-top:32px}.join-document-card>select{position:absolute;top:0;left:0;width:100px;height:26px;padding:0 4px;border:1px solid #eee;font-size:12px;border-radius:3px}.join-document-card>p{font-size:12px;color:#333;line-height:1.4;text-align:center;width:80px;margin:8px 0 0}.join-application-form .join-agreement{display:flex;align-items:flex-start;gap:8px;justify-content:center;margin:36px 0 20px;font-size:14px;line-height:1.6}.join-agreement input{width:16px;height:16px;margin:3px 0 0;accent-color:#ed0d50;flex-shrink:0}.join-agreement a{color:#ed0d50}.join-application-form .join-next{width:min(475px,100%);margin:20px auto 32px}.join-application-form .form-error{margin:0 0 0 200px}.join-application-panel{padding-bottom:48px}
@media(max-width:640px){.join-application-form .join-field{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:24px}.join-application-form .join-field>span{padding-top:0}.join-document-cards{gap:12px}.join-document-card{width:calc((100% - 12px)/2);min-width:80px}.join-document-card>select{width:100%}.join-application-form .join-agreement{justify-content:flex-start;margin-top:28px}.join-application-form .form-error{margin-left:0}.join-application-form .join-next{margin-left:0;width:100%}}

.join-application-panel>h2{width:auto;margin:0 0 10px}.join-document-card{padding-top:0}.join-document-card>input[type=hidden]{display:none}
.join-field-error{grid-column:2;color:#f56c6c;font-size:12px;line-height:1.5;margin:5px 0 0}.join-field.has-error input{border-color:#f56c6c}.join-field.has-error input:focus{box-shadow:0 0 0 2px #f56c6c18}@media(max-width:640px){.join-field-error{grid-column:1}}

.join-account-input{display:flex;align-items:stretch;min-width:0;border:1px solid #ddd;border-radius:4px;background:#fff;overflow:hidden}.join-account-input>input{min-width:0;flex:1;width:0;border:0!important;border-radius:0}.join-account-input:focus-within{border-color:#ed0d50;box-shadow:0 0 0 2px #ed0d5014}.join-phone-prefix{display:flex;align-items:center;max-width:145px;flex:0 0 120px;border-inline-end:1px solid #eee}.join-phone-prefix[hidden]{display:none}.join-phone-prefix select{width:100%;height:100%;min-height:48px;border:0;background:transparent;padding:0 10px;font-size:14px;box-shadow:none}.join-account-input input:focus{box-shadow:none}@media(max-width:640px){.join-phone-prefix{max-width:110px;flex-basis:100px}.join-phone-prefix select{font-size:13px;padding-inline:8px}}

/* Clear focus states on the onboarding form. */
.join-field input:focus,.join-field select:focus{border-color:#8e8796!important;box-shadow:0 0 0 3px rgba(200,0,64,.26)!important}
.join-password:focus-within{border-radius:6px;outline:2px solid #8e8796;outline-offset:1px}
.merchant-upload:focus-within{outline:3px solid #8e8796;outline-offset:3px}
.join-next:disabled{cursor:wait;opacity:.75}

/* One focus border, compact selected country code, explicit upload status. */
.join-field input:focus,.join-field select:focus{box-shadow:none!important;outline:none!important;border-color:#8e8796!important}
.join-password:focus-within{outline:none!important;box-shadow:none!important}
.join-account-input:focus-within{box-shadow:none!important;outline:none!important;border-color:#8e8796}
.join-account-input input:focus,.join-phone-prefix select:focus{border:0!important}
.join-phone-prefix{position:relative;flex:0 0 76px!important;max-width:76px!important}
.join-phone-prefix select{color:transparent!important;position:absolute;inset:0;width:100%;cursor:pointer;z-index:2}
.join-phone-prefix select option{color:#222}
.join-phone-value{padding:0 10px;pointer-events:none;align-self:center;font-size:14px;color:#333}
.merchant-upload-status{position:absolute;bottom:4px;left:4px;right:4px;padding:4px 6px;background:#fff;color:#65758a;border-radius:4px;font-size:11px;line-height:1.4;text-align:center;pointer-events:none}
.merchant-upload-status[data-state=success]{color:#168044;background:#eaf7ef}
.merchant-upload-status[data-state=error]{color:#b42336;background:#fff0f1}
#toast{display:flex;align-items:center;gap:12px;top:max(18px,env(safe-area-inset-top));width:max-content;max-width:calc(100vw - 32px);border:1px solid #e5e7eb;border-radius:12px;padding:14px 18px;background:#fff;box-shadow:0 8px 32px #0002;color:#273444;font-size:14px;line-height:1.5;z-index:10000}
#toast .notice-icon{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#eaf0fa;color:#3266ae;display:flex;align-items:center;justify-content:center;font-weight:700}
#toast[data-state=success] .notice-icon{background:#e8f7ed;color:#168044}
#toast[data-state=error] .notice-icon{background:#fff0f1;color:#b42336}
#toast[data-state=loading] .notice-icon{width:20px;height:20px;flex-basis:20px;background:none;border:2px solid #f5ceda;border-top-color:#8e8796;animation:join-notice-spin .8s linear infinite}
@keyframes join-notice-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#toast[data-state=loading] .notice-icon{animation:none}}

/* Restrained focus and geometric upload confirmation icon. */
.join-password button:focus-visible{outline-color:#8e8796}
.merchant-upload:focus-within{outline:1px solid #8e8796;outline-offset:2px}
#toast[data-state=success] .notice-icon{background:transparent;color:#39715e;border:1.5px solid currentColor;border-radius:50%;position:relative;font-weight:normal}
#toast[data-state=success] .notice-icon::after{content:"";position:absolute;width:9px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);top:7px;left:6px}

/* Visible first-step progress, restrained confirmation, and iOS focus sizing. */
#toast[data-state=loading] .notice-icon{border-top-color:#ed0d50}
.join-next[aria-busy=true]{display:flex;align-items:center;justify-content:center;gap:10px;opacity:1;background:#fff;color:#d80944;border:1px solid #ed0d50}
.join-next[aria-busy=true]::before{content:"";width:18px;height:18px;border:2px solid #f5ceda;border-top-color:#ed0d50;border-radius:50%;animation:join-notice-spin .8s linear infinite;flex-shrink:0}
#toast[data-state=success] .notice-icon{border:0;background:#f1f5f9;color:#526a82;border-radius:6px;width:28px;height:28px;flex-basis:28px}
#toast[data-state=success] .notice-icon::after{content:none}
#toast .notice-icon svg{width:20px;height:20px;display:block}
@media(max-width:768px){.join-field input,.join-field select,.join-application-form .join-field input,.join-application-form .join-field>select,.join-phone-prefix select,.join-document-card>select,.join-footer input{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){.join-next[aria-busy=true]::before{animation:none}}
