/* Dr.MVP V2 System Screens: login (LOS02), sign-up 3 steps (LOS03), forgot password (LOS04).
   Source: LoggedOut_System_Screens_Preview.html line 8 (.auth-layout .. .modal-body), DrMVP_Website_Handoff_20261007_LoggedOut_v1.2.
   Spec: docs/plans/20261007_DrMVP_V2_System_Screens_Spec_DRAFT.md sections 1.2, 2.3, 3.4, 4.2. Every rule starts with .drmvpv2-auth.
   Not ported (prototype only): .preview-note, .inline-result.show, .signup-panel{display:none}. */
.drmvpv2-auth{--navy:#071b4d;--blue:#0b63e5;--yellow:#ffbd1a;--line:#d8e2ef;--soft:#f3f7fc;--muted:#60728e;--green:#08b94e;--shadow:0 18px 50px rgba(7,27,77,.12);color:var(--navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.65}
.drmvpv2-auth,.drmvpv2-auth *,.drmvpv2-auth *::before,.drmvpv2-auth *::after{box-sizing:border-box}
.drmvpv2-auth[hidden],.drmvpv2-auth [hidden]{display:none!important}
/* Preview has no link reset, so links are UA-underlined there; Bootstrap removes the underline -> restore it. */
.drmvpv2-auth a{color:inherit;text-decoration:underline}
.drmvpv2-auth.system-main{min-height:640px;background:linear-gradient(150deg,#f6f9fd 0,#fff 48%,#f0f5fc 100%)}

/* Layout. Integration change: tracks use minmax(0,..) instead of minmax(320px,..)/minmax(380px,..) -
   the delivered minimums (320+380+40 gap+60 padding = 800px) overflow horizontally between 768 and 799px. */
.drmvpv2-auth .auth-layout{min-height:700px;display:grid;grid-template-columns:minmax(0,480px) minmax(0,620px);gap:90px;align-items:center;justify-content:center;padding:70px 30px}
.drmvpv2-auth .auth-story{max-width:470px;min-width:0}
.drmvpv2-auth .eyebrow{margin:0 0 14px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.16em}
.drmvpv2-auth .auth-story h1{margin:0;font-size:48px;line-height:1.25}
.drmvpv2-auth .auth-story p:not(.eyebrow){margin:17px 0;color:var(--muted);font-size:17px;line-height:1.9}
.drmvpv2-auth .story-points{display:grid;gap:13px;margin-top:28px}
.drmvpv2-auth .story-point{display:flex;align-items:center;gap:12px;font-weight:800}
.drmvpv2-auth .story-point i{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:#e6f0ff;color:var(--blue);font-style:normal}

/* Card + fields. select:not(.dw-hsel): mobiscroll hides the real <select> with .dw-hsel (1px, clipped) and shows #Gender_dummy instead. */
.drmvpv2-auth .form-card{min-width:0;padding:38px;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow)}
.drmvpv2-auth .form-card h2{margin:0 0 6px;font-size:28px}
.drmvpv2-auth .form-card>p:not(.inline-result){margin:0 0 26px;color:var(--muted);line-height:1.7}
.drmvpv2-auth .form-card>h2+.signup-progress{margin-top:20px}
.drmvpv2-auth .form-grid{display:grid;gap:17px}
.drmvpv2-auth .form-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drmvpv2-auth .field{min-width:0;display:grid;gap:7px;margin:0;color:#314564;font-size:14px;font-weight:800}
.drmvpv2-auth label{margin:0}
.drmvpv2-auth .field input,.drmvpv2-auth .field select:not(.dw-hsel){width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:400;outline:0}
.drmvpv2-auth .field input:focus,.drmvpv2-auth .field select:not(.dw-hsel):focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,99,229,.1)}
.drmvpv2-auth .field input:disabled{background:#eef2f7;color:#72819a}
.drmvpv2-auth .wide{grid-column:1/-1}
.drmvpv2-auth .check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;color:#4f6280;font-size:13px;line-height:1.6}
.drmvpv2-auth .check input{margin-top:4px;flex:0 0 auto}
.drmvpv2-auth .check label{flex:1 1 0;min-width:0;font-weight:400}
.drmvpv2-auth .check .error-msg{flex:0 0 100%}
.drmvpv2-auth .primary-action{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:16px;font-weight:900;cursor:pointer}
.drmvpv2-auth .primary-action:disabled{opacity:.6;cursor:not-allowed}
.drmvpv2-auth .auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:17px;color:var(--blue);font-size:14px}

/* Errors: jQuery Validate prepends <label class="form-error"> into .error-msg; server errors come from ValidationSummary (spec 8 D1 default: red, below the password field). */
.drmvpv2-auth .error-msg{display:block;color:#a4262c;font-size:13px;font-weight:700}
.drmvpv2-auth .error-msg:empty{display:none}
.drmvpv2-auth .error-msg label{margin:0;font-weight:700}
.drmvpv2-auth .auth-error{color:#a4262c;font-size:14px;font-weight:700}
.drmvpv2-auth .auth-error:empty,.drmvpv2-auth .auth-error:has(.validation-summary-valid){display:none}
.drmvpv2-auth .auth-error ul{margin:0;padding-left:18px}
.drmvpv2-auth .form-group{margin:0}

/* Forgot password result (#result). Delivered .inline-result is display:none until .show; here the shared script fills #result, so hide only while empty. */
.drmvpv2-auth .inline-result{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#e8f7ee;color:#17693b;font-size:13px;text-align:left;overflow-wrap:anywhere}
.drmvpv2-auth #result:empty{display:none}

/* Sign-up progress. .step1/.step2/.step3 + .imgBox-desc are driven by Scripts/SignUp/index.js (text-primary = current/done, text-black-50 = upcoming);
   Bootstrap's .text-primary/.text-black-50 are !important, so the colour override must be too (spec 1.2 / 3.4). */
.drmvpv2-auth .signup-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 26px}
.drmvpv2-auth .signup-step{min-width:0}
.drmvpv2-auth .signup-step .imgBox-desc{display:block;padding:10px;border-radius:10px;background:#eef2f7;color:#72819a;text-align:center;font-size:12px;font-weight:900;line-height:1.5}
.drmvpv2-auth .signup-step .imgBox-desc.text-primary{color:var(--blue)!important;background:#e4efff}
.drmvpv2-auth .signup-step .imgBox-desc.text-black-50{color:#72819a!important;background:#eef2f7}

/* Carousel keeps index.js slide events (spec 8 D11). Small inset so focus rings are not clipped by .carousel-inner{overflow:hidden}. */
.drmvpv2-auth .carousel-inner{padding:4px}

/* mobiscroll (spec 8 D3: keep the scroller, restyle the box). Legacy dispatcher styles use ID selectors -> need (1,1,0). */
.drmvpv2-auth #Gender_dummy,.drmvpv2-auth #Birthday_dummy{display:block;width:100%;height:auto;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:400;line-height:1.65}
.drmvpv2-auth #Gender_dummy[disabled],.drmvpv2-auth #Birthday_dummy[disabled]{background:#eef2f7;color:#72819a}

/* Step 2 */
.drmvpv2-auth .signup-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.drmvpv2-auth .secondary-action{width:100%;min-height:54px;border:1px solid #cddaea;border-radius:10px;background:#fff;color:var(--navy);font-size:16px;font-weight:900;cursor:pointer}
.drmvpv2-auth .secondary-action:disabled{opacity:.6;cursor:not-allowed}

/* Step 2.5: Views/Signup/MobileVerification.cshtml is shared by all four brands and is NOT edited; it is appended inside #mobileInput.
   Restyle it only inside .drmvpv2-auth #mobileInput. !important is limited to Bootstrap utilities that are themselves !important (.bg-info, .bg-danger, .text-white). */
.drmvpv2-auth #mobileInput #VerificationCode{margin:0}
.drmvpv2-auth #mobileInput .jumbotron{width:100%;margin:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--soft)!important;text-align:center}
.drmvpv2-auth #mobileInput .jumbotron .card-header{margin:0 0 8px;padding:10px 14px;border:0;border-radius:10px;background:#e4efff!important;color:var(--blue)!important;font-size:18px}
.drmvpv2-auth #mobileInput .jumbotron .card-title{margin:0;color:var(--muted);font-size:15px;font-weight:800}
.drmvpv2-auth #mobileInput .jumbotron h2{margin:12px 0 0;font-size:inherit}
.drmvpv2-auth #mobileInput #timer{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:22px;font-weight:900;letter-spacing:.06em}
.drmvpv2-auth #mobileInput .input-group-prepend{display:none}
.drmvpv2-auth #mobileInput #txtVerificationCode{width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;text-align:center;letter-spacing:.2em}
.drmvpv2-auth #mobileInput #txtVerificationCode:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,99,229,.1)}
.drmvpv2-auth #mobileInput #btnSubmitVerificationCode{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:16px;font-weight:900}
.drmvpv2-auth #mobileInput h5{margin:0;color:#4f6280;font-size:14px;font-weight:400}
.drmvpv2-auth #mobileInput #btnReSubmit{color:var(--blue);font-weight:800}

/* Step 3 (delivered .modal-body + .button.yellow) */
.drmvpv2-auth .signup-done{padding:32px;border-radius:16px;background:#071b4d;color:#fff;text-align:center}
.drmvpv2-auth .signup-done i{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:24px;font-style:normal}
.drmvpv2-auth .signup-done h3{margin:0;font-size:20px;line-height:1.6}
.drmvpv2-auth .signup-done p{margin:12px 0 20px;color:#d6e3f6;line-height:1.8}
.drmvpv2-auth .button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:10px;text-decoration:none;font-weight:900}
.drmvpv2-auth .button.yellow{background:var(--yellow);color:var(--navy)}

.drmvpv2-auth a:focus-visible,.drmvpv2-auth button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

@media(max-width:1100px){
    .drmvpv2-auth .auth-layout{gap:40px}
}
@media(max-width:767px){
    .drmvpv2-auth .auth-layout{min-height:auto;display:block;padding:52px 18px}
    .drmvpv2-auth .auth-story{margin-bottom:28px}
    .drmvpv2-auth .auth-story h1{font-size:32px}
    .drmvpv2-auth .auth-story p:not(.eyebrow){font-size:15px}
    .drmvpv2-auth .form-card{padding:24px 18px;border-radius:20px}
    .drmvpv2-auth .form-grid.two{grid-template-columns:minmax(0,1fr)}
    .drmvpv2-auth .auth-links{display:grid}
    .drmvpv2-auth #mobileInput .jumbotron{padding:18px 14px}
}