/* ============================================================
   Tony Web Host — Custom Login Page (built 2026-11-07)
   Scoped to body:has(.twh-login) (class printed by header.tpl on the login template; selectors use :has(.twh-login) so they follow the login page wherever it renders).
   Desktop: white form panel left, Mirror Dawn scene right.
   Mobile: scene becomes full-screen background under a
   translucent white form panel. No global styles are touched.
   ============================================================ */
body:has(.twh-login) #header,
body:has(.twh-login) footer,
body:has(.twh-login) .footer { display: none !important; }
body:has(.twh-login) { background: #fff; }
body:has(.twh-login) section#main-body { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has(.twh-login) section#main-body > .container { max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
body:has(.twh-login) section#main-body .row { margin: 0 !important; }
body:has(.twh-login) section#main-body [class*="col-"] { padding: 0 !important; max-width: none !important; flex: none !important; width: 100% !important; }

.twh-login { display: flex; min-height: 100vh; width: 100%; font-family: inherit; }
.twh-login__panel { width: 37% !important; flex: 0 0 37% !important; max-width: 37% !important; background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.twh-login__inner { width: 100%; max-width: 400px; margin: 0 auto; }
.twh-login__logo { width: 230px; max-width: 82%; height: auto; display: block; margin: 0 auto 26px auto; }
.twh-login__title { font-size: 34px; line-height: 1.15; font-weight: 800; color: #01112b; text-align: center; margin: 0 0 10px 0; letter-spacing: -0.5px; }
.twh-login__sub { text-align: center; color: #44506a; font-size: 15.5px; line-height: 1.55; margin: 0 0 30px 0; }
.twh-login__scene { display: block !important; width: 63% !important; flex: 0 0 63% !important; max-width: 63% !important; position: relative; overflow: hidden; min-height: 100vh; background-image: url('/assets/img/twh-login-scene.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.twh-login__scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* scene carries no overlay: the photograph stands clean (Anthony, Nov 7) */

body:has(.twh-login) form.login-form { max-width: 400px; margin: 0 auto; }
body:has(.twh-login) form.login-form .card { border: none !important; box-shadow: none !important; max-width: none !important; margin: 0 !important; background: transparent !important; }
body:has(.twh-login) form.login-form .card-body { padding: 0 !important; }
/* (removed: that selector also matched the password form-group in the custom template) */
body:has(.twh-login) form.login-form .card-footer { background: transparent !important; border: none !important; padding: 18px 0 0 0 !important; text-align: center; }
body:has(.twh-login) form.login-form .form-control { border-radius: 10px; min-height: 50px; font-size: 15px; }
body:has(.twh-login) form.login-form #login.btn { background-color: #01112b !important; border-color: #01112b !important; color: #ffffff !important; border-radius: 10px; font-weight: 700; font-size: 16px; padding: 12px 26px; }
body:has(.twh-login) form.login-form #login.btn:hover,
body:has(.twh-login) form.login-form #login.btn:focus { background-color: #0a2a57 !important; border-color: #0a2a57 !important; }
body:has(.twh-login) form.login-form .form-group { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; }
body:has(.twh-login) form.login-form .form-control { display: block !important; visibility: visible !important; opacity: 1 !important; }
body:has(.twh-login) form.login-form .input-group { display: flex !important; visibility: visible !important; opacity: 1 !important; }
body:has(.twh-login) .providerLinkingFeedback,
body:has(.twh-login) .login-form ~ div { max-width: 400px; margin-left: auto; margin-right: auto; }

@media (max-width: 991px) {
    .twh-login { position: relative; display: block !important; min-height: 100vh; background-image: url('/assets/img/twh-login-scene.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
    .twh-login__scene { display: none !important; }
    .twh-login__panel { width: 100% !important; flex: none !important; max-width: none !important; min-height: 100vh; background: transparent !important; padding: 28px 18px; }
    .twh-login__inner { background: rgba(255,255,255,0.88); border-radius: 20px; padding: 34px 26px 28px 26px; box-shadow: 0 18px 50px rgba(1,17,43,0.35); width: 100%; max-width: 400px; }
}
/* the thanks block lives in the form panel at every size (Anthony, Nov 7) */

/* --- Premium restyle (Anthony's reference direction, Nov 7) ---
   One-line fields, plant-green full-width button, quiet small text. */
body:has(.twh-login) form.login-form .form-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:has(.twh-login) form.login-form .card-body { display: flex; flex-direction: column; }
body:has(.twh-login) form.login-form .card-body > .float-left { order: 2; float: none !important; }
body:has(.twh-login) form.login-form .card-body > .text-right { order: 1; text-align: left !important; margin: 2px 0 18px 0; font-size: 13.5px; color: #66707f; display: flex; justify-content: space-between; align-items: center; }
body:has(.twh-login) form.login-form .twh-forgot { font-size: 13px; color: #66707f; text-decoration: none; }
body:has(.twh-login) form.login-form .twh-forgot:hover { text-decoration: underline; }
body:has(.twh-login) form.login-form .input-group-prepend { display: none !important; }
body:has(.twh-login) form.login-form .input-group { border: none !important; border-bottom: 1px solid #d9dee7 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body:has(.twh-login) form.login-form .input-group:focus-within { border-bottom-color: #0d3f8f !important; }
body:has(.twh-login) form.login-form .form-control { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 46px; padding-left: 2px; font-size: 15px; color: #1c2733; }
body:has(.twh-login) form.login-form .form-control::placeholder { color: #98a2b3; }
body:has(.twh-login) form.login-form .input-group-append .btn-reveal-pw { background: transparent !important; border: none !important; box-shadow: none !important; color: #98a2b3; }
body:has(.twh-login) form.login-form .form-group { margin-bottom: 22px; }
body:has(.twh-login) form.login-form a.small.text-muted { font-size: 12.5px; color: #8a94a6 !important; }
body:has(.twh-login) form.login-form #login.btn { background-color: #01112b !important; border-color: #01112b !important; color: #ffffff !important; width: 100%; border-radius: 30px; font-weight: 600; font-size: 15.5px; padding: 13px 26px; }
body:has(.twh-login) form.login-form #login.btn:hover,
body:has(.twh-login) form.login-form #login.btn:focus { background-color: #0d2a57 !important; border-color: #0d2a57 !important; }
body:has(.twh-login) form.login-form .card-footer { font-size: 13.5px; color: #66707f; }
body:has(.twh-login) form.login-form .card-footer a { color: #0d3f8f; }
.twh-login__title { font-size: 27px; font-weight: 700; }
.twh-login__sub { font-size: 14px; color: #7c8798; }

html body form.login-form button#login.btn,
html body form.login-form input#login.btn,
html body form.login-form #login.btn-primary,
html body form.login-form #login.btn {
    background: #01112b !important;
    background-color: #01112b !important;
    border-color: #01112b !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
html body form.login-form #login.btn:hover,
html body form.login-form #login.btn:focus {
    background: #0d2a57 !important;
    background-color: #0d2a57 !important;
    border-color: #0d2a57 !important;
}

/* --- Create Account (register) page: same premium system, taller form --- */
body:has(.twh-register) header.header, body:has(.twh-register) #header, body:has(.twh-register) footer#footer, body:has(.twh-register) .footer { display: none !important; }
body:has(.twh-register) section#main-body { padding: 0 !important; margin: 0 !important; }
body:has(.twh-register) section#main-body > .container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body:has(.twh-register) .primary-content { padding: 0 !important; margin: 0 !important; max-width: none !important; flex: 0 0 100% !important; }

/* Register fixes round 2 (QA findings, Nov 7): intl-tel chip, captcha, toggle */
body:has(.twh-register) #registration .intl-tel-input { width: 100%; display: block; }
body:has(.twh-register) #registration .intl-tel-input input.field { padding-left: 52px !important; }
body:has(.twh-register) #registration .intl-tel-input .flag-container { border-bottom: 1px solid #d9dee7; }
body:has(.twh-register) #registration #inputCaptchaImage { border-radius: 6px; margin: 4px 0; }
body:has(.twh-register) #registration .bootstrap-switch { border-radius: 999px !important; }
body:has(.twh-register) #registration .password-strength-meter .progress { height: 6px; border-radius: 999px; background: #eef1f5; }
body:has(.twh-register) #registration .password-strength-meter p { font-size: 12px; }

/* Auth-chrome suppression by BODY CLASS — the register build's stranded bars
   (breadcrumb + Already Registered) hid inside the #header element, which
   :has() selectors could not reliably reach after WHMCS markup shifts. */
body.twh-auth header.header, body.twh-auth #header, body.twh-auth footer#footer, body.twh-auth .footer { display: none !important; }
body.twh-auth .master-breadcrumb { display: none !important; }
body.twh-auth section#main-body { padding: 0 !important; margin: 0 !important; }
body.twh-auth section#main-body > .container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.twh-auth .primary-content { padding: 0 !important; margin: 0 !important; max-width: none !important; flex: 0 0 100% !important; }

/* Register round 3 (Nov 7): WHMCS injects the 'already registered' bar inside the
   primary content (not the header) — hidden by structure, inputs stay in DOM. */
/* register bar hide REMOVED Nov 7 6:37 PM — it concealed the whole signup block; replaced by a template-level fix */
body:has(.twh-register) #registration .intl-tel-input { width: 100% !important; display: block !important; }
body:has(.twh-register) #registration .intl-tel-input input#inputPhone { padding-left: 92px !important; }
body:has(.twh-register) #registration .iti { width: 100% !important; display: block !important; }
body:has(.twh-register) #registration .iti input#inputPhone { padding-left: 92px !important; }
.twh-login { align-items: flex-start; }

/* Register round 4 (Nov 7): the linkedaccounts include renders INSIDE the brand
   block (the .twh-login__inner wrapper), not as a sibling of it. */
body #registration input#inputPhone, body #registration input#inputPhone.field { padding-left: 92px !important; }

/* Login scene as a background (Nov 7, closing change): the scene <img> proved to
   have a fragile load/layout path in checker browsers; the first verified build
   presented the scene as a background. The photograph itself is unchanged. */
.twh-login__scene { background-image: url('/assets/img/twh-login-scene.jpg'); background-size: cover; background-position: center; }

/* --- Login: quiet way back to the storefront (Anthony, 2026-11-08) --- */
.twh-back-home { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: #7c8798; text-decoration: none; }
.twh-back-home:hover, .twh-back-home:focus { color: #0D3F8F; text-decoration: none; }

/* --- Login: panel takes the full height so its content floats centered (Anthony, 2026-11-08) --- */
.twh-login .twh-login__panel { min-height: 100vh; align-self: stretch; }

/* twh-navy-header 2026-11-08 */
.header{background:#01112B}
.header .navbar-light{background:#01112B!important}
.header .topbar{background:#01112B;color:#E8EDF5}
.header .topbar .btn{color:#E8EDF5!important}
.header .logo-img{max-height:54px;width:auto}
.header .toolbar .nav-link{color:#E8EDF5!important}
.header .main-navbar-wrapper{background:#01112B}
.header .main-navbar-wrapper .navbar-nav>li>a{color:#E8EDF5!important}
.header .main-navbar-wrapper .navbar-nav>li>a:hover,.header .main-navbar-wrapper .navbar-nav>li>a:focus{color:#F5B43A!important}
.twh-hbtns{display:flex;align-items:center;gap:10px;margin-left:16px}
.twh-hbtn-login{display:inline-block;padding:8px 18px;border:1px solid #5B6F92!important;border-radius:3px;color:#E8EDF5!important;font-weight:700;font-size:14px;white-space:nowrap;background:transparent!important}
.twh-hbtn-login:hover{border-color:#FFFFFF!important;color:#FFFFFF!important;text-decoration:none}
.twh-hbtn-start{display:inline-block;padding:8px 18px;border:1px solid #F5B43A;border-radius:3px;background:#F5B43A;color:#01112B!important;font-weight:700;font-size:14px;white-space:nowrap}
.twh-hbtn-start:hover{background:#F0B52C;border-color:#F0B52C;color:#01112B!important;text-decoration:none}

/* ============================================================
   TWH REGISTER v6 — UNIFIED (2026-11-09)
   The Create Account page on the documented WHMCS pattern:
   the child theme carries the template; this one stylesheet
   carries the whole design. No JavaScript layout, no inline
   styles. Shell = .twh-register (flex row): form panel left,
   Mirror Dawn scene panel right (fixed, full height).
   Form measure: one 640px column, centered in the panel.
   ============================================================ */
body:has(.twh-register) section#main-body .row { margin: 0 !important; }
body:has(.twh-register) { background: #ffffff; }
/* The stock primary sidebar on this page holds only the 'Already Registered'
   shortcut card; it renders as a stray bar outside the form column. Retired
   here - its Login door lives in the form's help row instead. */
body:has(.twh-register) section#main-body .sidebar { display: none !important; }

/* --- shell --- */
.twh-register { display: flex; flex-direction: row; align-items: stretch; width: 100%; min-height: 100vh; background: #ffffff; }
.twh-reg-left { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; background: #ffffff; padding: 44px 48px 56px; display: flex; flex-direction: column; align-items: center; }
.twh-reg-left > * { width: 100%; max-width: 640px; box-sizing: border-box; }
.twh-reg-right { position: fixed; top: 0; right: 0; width: 50%; height: 100vh; overflow: hidden; z-index: 1; background: #2b1d33 url('/assets/img/twh-register-scene2.webp') center / cover no-repeat; }
.twh-reg-logo { position: absolute; top: 22px; left: 24px; width: 129px; max-width: 40%; height: auto; display: block; }

/* --- help doors --- */
.twh-reg-help { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 30px 0; }
.twh-reg-help a { color: #0d3f8f; font-size: 14px; font-weight: 600; text-decoration: none; }
.twh-reg-help a:hover { text-decoration: underline; }

/* --- steps --- */
.twh-reg-step { margin: 0 0 26px 0; }
.twh-reg-step-title { font-size: 21px; font-weight: 800; color: #01112b; letter-spacing: -0.3px; margin: 0 0 16px 0; }
.twh-reg-choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e3ddcf; border-radius: 12px; padding: 16px 18px; margin: 0 0 14px 0; cursor: pointer; background: #ffffff; }
.twh-reg-choice > input[type="radio"] { margin-top: 5px; accent-color: #0d3f8f; }
.twh-reg-choice-body { display: block; flex: 1 1 auto; }
.twh-reg-choice-title { display: block; font-size: 15.5px; font-weight: 700; color: #01112b; margin: 0 0 10px 0; }
.twh-reg-note { display: block; font-size: 13px; color: #5b6b82; line-height: 1.5; margin-top: 8px; }
.twh-reg-later { display: inline-block; font-size: 14px; color: #0d3f8f; font-weight: 600; margin-top: 2px; }

/* --- domain fields --- */
.twh-reg-domain-row { display: flex; flex-direction: column; gap: 10px; }
.twh-reg-domain-name, .twh-reg-domain-full { width: 100%; box-sizing: border-box; border: none; border-bottom: 2px solid #cfd6e2; background: transparent; padding: 9px 2px; font-size: 16.5px; color: #01112b; outline: none; }
.twh-reg-domain-tld { width: 100%; box-sizing: border-box; border: 1px solid #d8dfec; border-radius: 8px; background: #ffffff; padding: 9px 10px; font-size: 15.5px; color: #01112b; }
.twh-reg-domain-name:focus, .twh-reg-domain-full:focus { border-bottom-color: #0d3f8f; }

/* --- Step 2: the stock form in the same system --- */
body:has(.twh-register) #registration .card { border: none !important; box-shadow: none !important; background: transparent !important; margin-bottom: 22px !important; }
body:has(.twh-register) #registration .card-body { padding: 0 !important; }
body:has(.twh-register) #registration .card-title { font-size: 17px; font-weight: 800; color: #01112b; letter-spacing: -0.2px; margin: 0 0 14px 0; text-transform: none; }
body:has(.twh-register) #registration .field-icon { display: none !important; }
body:has(.twh-register) #registration .form-group { margin-bottom: 18px; }
body:has(.twh-register) #registration input.field, body:has(.twh-register) #registration select.field, body:has(.twh-register) #registration .form-control { border: none !important; border-bottom: 2px solid #cfd6e2 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 9px 2px !important; font-size: 16px; color: #01112b; height: auto !important; width: 100%; box-sizing: border-box; }
body:has(.twh-register) #registration input.field:focus, body:has(.twh-register) #registration select.field:focus, body:has(.twh-register) #registration .form-control:focus { border-bottom-color: #0d3f8f !important; outline: none !important; }
body:has(.twh-register) #registration input.field::placeholder { color: #98a2b3; }
body:has(.twh-register) #registration .btn.generate-password { border-radius: 999px; font-size: 13px; }

/* --- the Register button: a compact navy pill in the column (Anthony, Nov 8: it does not run end to end) --- */
body:has(.twh-register) #registration input.btn-primary[type='submit'] { background: #01112b !important; background-color: #01112b !important; border-color: #01112b !important; color: #ffffff !important; border-radius: 999px !important; width: auto !important; min-width: 240px; max-width: 100%; font-weight: 600; font-size: 16px; padding: 13px 34px; }
body:has(.twh-register) #registration input.btn-primary[type='submit']:hover { background: #0d2a57 !important; background-color: #0d2a57 !important; border-color: #0d2a57 !important; }

/* --- phone: scene becomes the top band, form stacks below --- */
@media (max-width: 991px) {
  .twh-register { flex-direction: column; min-height: 0; }
  .twh-reg-right { order: -1; position: relative; width: 100%; max-width: none; flex: none; height: 230px; background-image: url('/assets/img/twh-register-scene2-mobile.webp'); background-position: center; }
  .twh-reg-left { flex: none; width: 100%; max-width: none; padding: 28px 20px 44px; }
  .twh-reg-logo { width: 96px; top: 16px; left: 18px; }
}

/* twh footer rebuild 2026-11-09 */
#footer.footer{background:#01112B!important}
.twh-footer-brand{text-align:center;margin:4px 0 22px}
.twh-footer-logo{height:52px;width:auto}
.twh-footer-cols{display:flex;flex-wrap:wrap;gap:28px 48px;justify-content:space-between;text-align:left;margin:0 0 20px}
.twh-footer-col{min-width:150px}
.twh-footer-col h5{color:#F5B43A;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px}
.twh-footer-col a{display:block;color:#C9D6EE;font-size:13.5px;padding:4px 0;white-space:nowrap}
.twh-footer-col a:hover{color:#F5B43A;text-decoration:none}
#footer .copyright{color:#E8EDF5;text-align:center}