/* Sign-in pages (Login, Account verification, Support) replicated from the Paynt Portal (21 October 2026).
   Every value comes from the reference login-replica.html measured on portal.paynt.com: do not reinterpret them.
   Everything is scoped under .login-shell so the rest of the Growth Hub is not touched. Poppins is self-hosted (app.css). */
html,body{margin:0;padding:0;background:#f4f7f9}

.login-shell{
  --surface-subtle-lower:#f4f7f9; --surface-canvas-rgb:255,255,255;
  --text-primary:#0f2832; --text-secondary:#243e48; --text-tertiary:#4b6671;
  --action-primary-bg:#0f2832; --action-primary-bg-hover:#243e48; --action-primary-fg:#fff;
  --action-primary-bg-disabled:#e5eaf0; --action-primary-fg-disabled:#9aa5b8;
  --action-secondary-border:#a6bbc4; --input-border:#859fa9; --icon-muted:#647f8b;
  --link:#1c478b; --required:#993c3c; --focus-ring:#a38aff;
  --duration:.15s; --ease:cubic-bezier(.4,0,.2,1);
}
.login-shell,.login-shell *{box-sizing:border-box;margin:0;padding:0}
.login-shell{font-family:"Poppins",sans-serif;font-size:16px;font-weight:400;color:#000;
  display:flex;justify-content:center;align-items:center;position:relative;height:100vh;z-index:2;padding:0 16px;overflow:hidden;background:var(--surface-subtle-lower)}
body:has(.login-shell){margin:0;background:#f4f7f9}

/* ---------- SHELL ---------- */
.login-shell .shape{position:absolute;z-index:-1;display:block}
.login-shell .shape--left{top:0;left:0}
.login-shell .shape--right{bottom:-15px;right:0}
.login-shell .shape--laptop{display:none}
.login-shell__content{width:626px;padding:64px;background:rgba(var(--surface-canvas-rgb),.8);border-radius:24px;box-shadow:rgba(147,162,174,.04) 0 4px 10px 8px}
.login-shell__copyright{position:fixed;bottom:48px;left:0;right:0;z-index:3;text-align:center;font-size:16px;font-weight:500;line-height:24px;color:var(--text-primary)}

/* ---------- LOGO ---------- */
.login-shell .logo{width:136px;height:48px;margin:0 auto 24px;display:block}
.login-shell .logo img{width:136px;height:48px;display:block}

/* ---------- TITLES / TEXTS ---------- */
.login-shell .login-form__title{margin:48px 0 40px;font-size:20px;font-weight:600;line-height:28px;color:var(--text-primary);text-align:center}
.login-shell .h-lg{font-size:24px;font-weight:600;line-height:32px;color:var(--text-primary);text-align:center}

/* ---------- INPUT ---------- */
.login-shell .field{margin-bottom:24px}
.login-shell .form-label{display:flex;gap:2px;font-size:14px;font-weight:500;line-height:20px;color:var(--text-primary);padding:2px 0;margin-bottom:4px}
.login-shell .form-label__required{color:var(--required)}
.login-shell .input-wrap{display:flex;align-items:center;gap:8px;height:48px;padding:12px;background:#fff;border-radius:8px;box-shadow:var(--input-border) 0 0 0 1px inset;transition:box-shadow var(--duration) var(--ease)}
.login-shell .input-wrap:focus-within{box-shadow:var(--focus-ring) 0 0 0 2px inset}
.login-shell .input-wrap input{flex:1;min-width:0;height:auto;border:0;outline:0;box-shadow:none;background:transparent;font:inherit;font-size:16px;line-height:24px;color:#000}
.login-shell .pw-toggle{width:24px;height:24px;border:0;background:none;border-radius:4px;cursor:pointer;color:var(--icon-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-shell .pw-toggle:focus-visible{outline:2px solid var(--focus-ring)}

/* ---------- BUTTONS ---------- */
.login-shell .app-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:14px 20px;column-gap:8px;border:none;outline:none;border-radius:64px;min-width:92px;white-space:nowrap;cursor:pointer;font-family:inherit;font-size:13.3333px;font-weight:400;text-decoration:none;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease)}
.login-shell .app-btn:focus-visible{outline:2px solid var(--focus-ring)}
.login-shell .app-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.login-shell .app-btn--primary:not(:disabled):hover{background:var(--action-primary-bg-hover)}
.login-shell .app-btn--primary:disabled{background:var(--action-primary-bg-disabled);color:var(--action-primary-fg-disabled);cursor:not-allowed}
.login-shell .app-btn--secondary{background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--action-secondary-border)}
.login-shell .app-btn--secondary:hover{background:#f4f7f9}
.login-shell .text-link{border:0;background:none;border-radius:4px;cursor:pointer;font-family:inherit;font-size:14px;line-height:20px;color:var(--link);text-decoration:underline}
.login-shell .text-link:focus-visible{outline:2px solid var(--focus-ring)}

/* login */
.login-shell .login-btn{margin:64px 0}
.login-shell .forgot{text-align:center}

/* ---------- MFA ---------- */
.login-shell .mfa-icon{display:flex;justify-content:center;height:64px;margin:32px 0}
.login-shell .mfa-text{margin:0 0 16px;line-height:24px;color:var(--text-secondary);text-align:center}
.login-shell .otp{display:flex;justify-content:center;gap:8px}
.login-shell .otp input{width:48px;height:48px;padding:0;text-align:center;font-family:inherit;font-size:24px;font-weight:600;line-height:32px;color:var(--text-primary);background:#fff;border:2px solid var(--action-secondary-border);border-radius:12px;outline:none;box-shadow:none}
.login-shell .otp input:focus{border-color:var(--focus-ring)}
.login-shell .checkbox{display:inline-flex;align-items:center;gap:8px;margin-top:24px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;color:var(--text-primary)}
.login-shell .checkbox input{width:20px;height:20px;margin:2px;accent-color:var(--text-primary);border-radius:4px}
.login-shell .checkbox.centered{display:flex;justify-content:center}
.login-shell .mfa-buttons{display:flex;flex-direction:column;row-gap:16px;margin:64px 0 32px}
.login-shell .mfa-support-row{display:flex;justify-content:center;align-items:center;gap:4px}
.login-shell .mfa-support-row p{line-height:24px;color:var(--text-tertiary)}
/* Growth Hub additions, not on the Portal: the recovery-code entry and the messages */
.login-shell .mfa-recovery{display:flex;justify-content:center}
.login-shell .mfa-recovery .input-wrap{width:240px}
.login-shell .mfa-recovery input{text-align:center;letter-spacing:.06em}
.login-shell .mfa-alt{display:flex;justify-content:center;margin-top:8px}
.login-shell .auth-msg{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:14px;line-height:20px;background:#fdecec;color:#8a2c2c}
.login-shell .auth-msg.success,.login-shell .auth-msg.info{background:#e8f6ee;color:#1d6b43}
.login-shell .auth-msg.warning{background:#fff4e0;color:#7a4a00}

/* ---------- SUPPORT ---------- */
.login-shell .mfa-support{padding:0 40px}
.login-shell .mfa-support__text{margin:24px auto 48px;font-size:16px;font-weight:600;line-height:24px;color:var(--text-secondary);text-align:center}
.login-shell .mfa-support__list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;justify-content:center;margin-bottom:48px}
.login-shell .info-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;max-width:200px;height:200px;padding:20px;border-radius:16px;text-decoration:none;transition:background-color var(--duration) var(--ease)}
.login-shell .info-card__icon{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:8px;flex-shrink:0}
.login-shell .info-card__title{font-size:16px;font-weight:600;line-height:24px;color:var(--text-primary)}
.login-shell .info-card__text{font-size:14px;line-height:20px;color:var(--text-secondary)}
.login-shell .info-card--blue{background:#d0e0fe}.login-shell .info-card--blue .info-card__icon{background:#dce9ff}
.login-shell .info-card--green{background:#cef5df}.login-shell .info-card--green .info-card__icon{background:#dcf9e9}
.login-shell .info-card--pink{background:#f3ddfe}.login-shell .info-card--pink .info-card__icon{background:#f7e8ff}
.login-shell .info-card--purple{background:#e3dcfe}.login-shell .info-card--purple .info-card__icon{background:#ede8ff}
.login-shell .phone{display:flex;align-items:center;column-gap:6px;font-size:14px;line-height:20px;color:var(--text-secondary);text-decoration:none}
.login-shell .phone svg{flex-shrink:0;border-radius:2px}
.login-shell .phone .cc{font-size:10px;font-weight:600;line-height:12px;padding:0 3px;border-radius:2px;background:rgba(255,255,255,.7);color:var(--text-primary)}

/* the language choice (the Growth Hub is multilingual): small, top right, outside the card */
.login-shell .auth-lang{position:absolute;top:16px;right:16px;z-index:3;display:flex;gap:4px}
.login-shell .auth-lang button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:12px;line-height:16px;padding:4px 8px;border-radius:6px;color:var(--text-tertiary)}
.login-shell .auth-lang button.on{background:rgba(255,255,255,.8);color:var(--text-primary);font-weight:500}
.login-shell .auth-lang button:focus-visible{outline:2px solid var(--focus-ring)}

/* ---------- RESPONSIVE (original breakpoints) ---------- */
@media (max-width:1919px){
  .login-shell .shape--desktop{display:none}.login-shell .shape--laptop{display:block}
  .login-shell__content{width:426px;padding:32px}
  .login-shell__copyright{bottom:30px}
  .login-shell .mfa-support{padding:0}
  .login-shell .mfa-support .h-lg{font-size:20px;line-height:28px}
  .login-shell .mfa-support__text{font-weight:400;margin-bottom:16px}
  .login-shell .mfa-support__list{display:flex;flex-direction:column;row-gap:12px}
  .login-shell .info-card{max-width:none;height:auto}
}
@media (max-width:1199px){.login-shell__content{width:414px}.login-shell__copyright{bottom:64px}}
@media (max-width:767px){.login-shell__content{width:100%;max-width:414px;padding:24px}.login-shell__copyright{bottom:40px}}
.login-shell .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* required field left empty, as on the Portal: red ring, alert icon, «Field is required» */
.login-shell .field-alert{display:none;color:#993c3c;flex-shrink:0}
.login-shell .field-error{display:none;margin-top:4px;font-size:12px;line-height:16px;color:#993c3c}
.login-shell .field.has-error .input-wrap{box-shadow:#993c3c 0 0 0 1px inset}
.login-shell .field.has-error .input-wrap:focus-within{box-shadow:var(--focus-ring) 0 0 0 2px inset}
.login-shell .field.has-error .field-alert,.login-shell .field.has-error .field-error{display:block}
.login-shell .input-wrap input::placeholder{color:#647f8b}
/* the language choice, inside the card under the last link (as before the Portal replica) */
.login-shell .auth-lang{position:static;display:flex;justify-content:center;gap:6px;margin-top:18px}
.login-shell .auth-lang button{font-size:13px;line-height:18px;padding:5px 10px}
.login-shell .auth-lang button.on{background:#eaf0fb;color:#1c478b}
/* below 1920 px the real Portal keeps the support cards in a 2 × 2 grid (the reference file stacks them and runs off a
   900 px screen): 2 × 2 here too, a single column only on phones */
@media (max-width:1919px){
  .login-shell .mfa-support__list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px}
  .login-shell .info-card{padding:16px;gap:10px;height:auto;min-height:150px}
  .login-shell .info-card__title{font-size:15px;line-height:22px}
  .login-shell .info-card__text,.login-shell .phone{font-size:13px;line-height:18px}
}
@media (max-width:767px){.login-shell .mfa-support__list{grid-template-columns:1fr;gap:12px}.login-shell .info-card{min-height:0}}
.login-shell .info-card__icon svg{width:26px;height:26px}
/* when the card is taller than the screen (phones, short laptop screens) the page scrolls and the copyright follows the card */
@media (max-width:767px),(max-height:760px){
  .login-shell{flex-direction:column;height:auto;min-height:100vh;padding:32px 16px;overflow:hidden}
  .login-shell__copyright{position:static;margin-top:24px}
}
/* fields filled by the browser (saved email and password), as on the Portal: the whole field light blue, Poppins kept,
   and an animation that tells the script the field is filled (Chrome hides autofilled values until the first click) */
@keyframes gh-autofill{from{opacity:1}to{opacity:1}}
.login-shell .input-wrap:has(input:-webkit-autofill){background:#eff6ff}
.login-shell .input-wrap input:-webkit-autofill,.login-shell .input-wrap input:-webkit-autofill:hover,.login-shell .input-wrap input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #eff6ff inset;box-shadow:0 0 0 1000px #eff6ff inset;-webkit-text-fill-color:#0f2832;caret-color:#0f2832;
  font-family:"Poppins",sans-serif;font-size:16px;transition:background-color 99999s;animation-name:gh-autofill;animation-duration:1ms}
.login-shell .input-wrap input:-webkit-autofill::first-line{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px}
.login-shell .input-wrap input{color:#0f2832}

/* the demo-only installation says so on its sign-in page, so it is never mistaken for the real one (26/10/2026) */
.login-env{margin:-4px auto 16px;width:max-content;max-width:100%;padding:6px 14px;border-radius:999px;background:#e6f6ec;color:#11683a;
  font-weight:600;font-size:13px;letter-spacing:.02em;text-align:center}