/* Phonely V13.79 — Sign in, Register, Forgot password and Set new password.
   The site header/footer styles come from public-pages-common.css (shared with every
   public page, so the browser downloads it once). This file holds only the sign-in pages'
   own styles; page-only rules are scoped (#loginForm, .register-page, #forgotForm, ...). */

/* ---------- shared layout of all four pages ---------- */
/* Phonely login page — desktop & mobile */
.login-page{max-width:1200px;margin:0 auto;padding:54px 22px 78px;min-height:calc(100vh - 330px)}
.login-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:clamp(35px,6vw,92px);align-items:center}
.login-intro{padding:20px 0;position:relative}
.login-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#ed7b25;background:#fff3e8;padding:11px 14px;border-radius:9px}
.login-intro h1{font-size:clamp(40px,4.7vw,66px);letter-spacing:-2.4px;line-height:1.07;margin:24px 0 15px;color:#142943;font-weight:850}
.login-intro h1 span{color:#f18431}
.login-intro>p{font-size:16px;color:#66758a;max-width:470px;line-height:1.75}
.intro-benefits{display:grid;gap:25px;margin-top:38px}
.intro-benefits>div{display:flex;gap:15px;align-items:center}
.intro-benefits>div>span{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:13px;background:#fff1e5;color:#e77c29;font-size:18px}
.intro-benefits strong{display:block;font-size:14px;color:#1c304a;margin-bottom:4px}
.intro-benefits small{font-size:13px;color:#778398}
.intro-decoration{display:flex;align-items:center;gap:9px;margin-top:48px;font-weight:850;color:#152c47;font-size:19px;opacity:.68}
.intro-decoration>i{color:#f18431}.intro-decoration em{color:#f18431;font-style:normal}
.login-card{background:#fff;border:1px solid #e7edf4;border-radius:20px;padding:clamp(25px,3.2vw,39px);box-shadow:0 18px 65px rgba(20,41,67,.075)}
.login-card-top{text-align:center;margin-bottom:31px}
.login-symbol{height:55px;width:55px;margin:0 auto 18px;border-radius:16px;background:#fff0e3;color:#ef7e29;display:grid;place-items:center;font-size:21px}
.login-card h2{font-size:23px;letter-spacing:-.5px;color:#172d49;margin:0 0 8px;font-weight:800}
.login-card-top p{font-size:13px;color:#7c8796;margin:0}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:750;color:#26364d;margin-bottom:9px}
.label-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.label-line a{color:#eb7e2c;font-size:12px;font-weight:700;text-decoration:none;margin-bottom:9px}
.input-wrap{height:49px;border:1px solid #e0e6ef;border-radius:11px;display:flex;align-items:center;gap:11px;padding:0 14px;transition:border-color .2s,box-shadow .2s;background:#fff}
.input-wrap:focus-within{border-color:#f18b39;box-shadow:0 0 0 3px rgba(241,139,57,.12)}
.input-wrap>i{color:#99a5b5;font-size:15px}
.input-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:#172d49}
.input-wrap input::placeholder{color:#a4adba}
.password-toggle{border:0;background:transparent;color:#8492a5;cursor:pointer;padding:7px}
.field-error{display:block;color:#cc3f38;font-size:11px;min-height:0;margin-top:5px}
.remember{display:flex;align-items:center;gap:9px;font-size:12px;color:#617187;cursor:pointer;margin:0 0 22px}
.remember input{accent-color:#ef822e;width:15px;height:15px}
.login-submit{width:100%;height:49px;border:0;border-radius:11px;background:#ef812e;color:#fff;font-weight:800;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .2s,transform .2s}
.login-submit:hover{background:#dc6e1e;transform:translateY(-1px)}
.form-status{font-size:12px;text-align:center;color:#b45309;margin:10px 0 0;min-height:0}
.login-divider{display:flex;align-items:center;gap:13px;color:#8995a5;font-size:12px;margin:24px 0 18px}
.login-divider:before,.login-divider:after{content:'';height:1px;background:#e9edf2;flex:1}
.create-account{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #dce4ed;border-radius:11px;height:47px;color:#263e59;text-decoration:none;font-size:13px;font-weight:800}
.create-account:hover{background:#f8fafc;border-color:#c9d6e3}
.demo-note{margin:19px 0 0;color:#8b97a7;font-size:11px;line-height:1.6;text-align:center}
.demo-note i{margin-right:5px}
@media(max-width:850px){.login-shell{grid-template-columns:1fr;max-width:520px;margin:auto}.login-intro{display:none}.login-page{padding:33px 16px 58px;min-height:0}}
@media(max-width:580px){.login-page{padding:24px 14px 44px}.login-card{padding:25px 20px;border-radius:15px}.login-card h2{font-size:21px}}

/* ---------- Sign in ---------- */
.login-remember-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.login-remember-row .remember{margin:0;min-width:0}
.login-remember-row .login-forgot-link{color:#f47b20;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.login-remember-row .login-forgot-link:hover,.login-remember-row .login-forgot-link:focus-visible{text-decoration:underline}
#loginForm .server-notice{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 15px;margin:0 0 23px;border:1px solid;
  border-radius:14px;box-shadow:0 5px 18px rgba(19,39,67,.045);
  animation:ppNoticeAppear .22s ease-out;
}
#loginForm .server-notice--error{background:linear-gradient(115deg,#fff3f1,#fffafb);border-color:#f7d8d4;color:#9d3433}
#loginForm .server-notice--success{background:linear-gradient(115deg,#effaf4,#f9fffb);border-color:#c9ebd7;color:#176c43}
#loginForm .server-notice__icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:16px}
#loginForm .server-notice--error .server-notice__icon{background:#ffe2dc;color:#e15a42}
#loginForm .server-notice--success .server-notice__icon{background:#d9f4e3;color:#208955}
#loginForm .server-notice__content{flex:1;min-width:0;padding-top:1px}
#loginForm .server-notice__content strong{display:block;font-size:13px;font-weight:800;line-height:1.4;letter-spacing:-.1px}
#loginForm .server-notice__content p{margin:4px 0 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:#59667b}
@keyframes ppNoticeAppear{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:580px){#loginForm .server-notice{padding:12px;gap:10px;border-radius:12px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#loginForm .server-notice{animation:none}}

/* ---------- Register ---------- */
.register-page .login-shell{align-items:center}
.register-page .login-card-top{margin-bottom:24px}
.register-page .field{margin-bottom:15px}
.register-page .login-intro h1{max-width:520px}
.register-terms{display:flex;align-items:flex-start;gap:10px;margin:19px 0 8px;color:#637188;font-size:12px;line-height:1.6;cursor:pointer}
.register-terms input{flex:0 0 15px;width:15px;height:15px;margin-top:2px;accent-color:#ef822e}
.register-terms a{color:#e87a26;text-decoration:none;font-weight:700}
.register-terms a:hover{text-decoration:underline}
.password-hint{display:block;color:#8390a1;font-size:11px;margin-top:5px}
.register-page .login-card{max-width:490px;width:100%;justify-self:end}
@media(max-width:850px){.register-page .login-card{max-width:none;justify-self:stretch}}
@media(max-width:580px){.register-page .login-page{padding-top:18px}.register-page .login-card{padding:23px 19px}.register-page .login-card-top{margin-bottom:20px}}

/* V13.12 premium registration feedback */
#registerForm .server-notice{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;margin:0 0 22px;border:1px solid;border-radius:14px;box-shadow:0 5px 18px rgba(19,39,67,.045);animation:ppRegisterNotice .22s ease-out}
#registerForm .server-notice--error{background:linear-gradient(115deg,#fff3f1,#fffafb);border-color:#f7d8d4;color:#9d3433}
#registerForm .server-notice--success{background:linear-gradient(115deg,#effaf4,#f9fffb);border-color:#c9ebd7;color:#176c43}
#registerForm .server-notice__icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:16px}
#registerForm .server-notice--error .server-notice__icon{background:#ffe2dc;color:#e15a42}
#registerForm .server-notice--success .server-notice__icon{background:#d9f4e3;color:#208955}
#registerForm .server-notice__content{flex:1;min-width:0;padding-top:1px}
#registerForm .server-notice__content strong{display:block;font-size:13px;font-weight:800;line-height:1.4}
#registerForm .server-notice__content p{margin:4px 0 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:#59667b}
#registerForm .register-terms a:focus-visible{outline:2px solid #ef822e;outline-offset:3px;border-radius:3px}
/* Premium consent validation: compact accessible alert with icon */
#registerForm #agreeError{display:none}
#registerForm #agreeError:not(:empty){
 display:flex;align-items:center;gap:10px;box-sizing:border-box;
 margin:9px 0 16px;padding:12px 13px;
 border:1px solid #f3c6c7;border-left:3px solid #e35b59;
 border-radius:12px;background:linear-gradient(110deg,#fff1f1 0%,#fff9f8 100%);
 color:#a32d35;font-size:12px;font-weight:600;line-height:1.55;
 box-shadow:0 4px 16px rgba(151,37,44,.055);
 animation:ppRegisterNotice .22s ease-out;
}
#registerForm #agreeError:not(:empty)::before{
 content:"\f06a";font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome,sans-serif;
 font-weight:900;display:grid;place-items:center;flex:0 0 30px;
 width:30px;height:30px;border-radius:9px;background:#ffe1e1;color:#d73f49;font-size:15px;
}
#registerForm #agree[aria-invalid="true"]{outline:2px solid #e35b59;outline-offset:3px}
@media(max-width:580px){#registerForm #agreeError:not(:empty){padding:10px 11px;font-size:11.5px;gap:9px}}
@media(prefers-reduced-motion:reduce){#registerForm #agreeError:not(:empty){animation:none}}
@keyframes ppRegisterNotice{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:580px){#registerForm .server-notice{padding:12px;gap:10px;border-radius:12px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#registerForm .server-notice{animation:none}}

/* V13.14 — live password strength meter (register only) */
#registerForm .pp-password-strength{--strength-color:#c5ceda;margin-top:11px;margin-bottom:3px;padding:12px 13px;border:1px solid #e9edf4;background:linear-gradient(110deg,#fbfcff,#fff);border-radius:12px;transition:background .2s,border-color .2s}
#registerForm .pp-strength-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#40516c;font-size:11px;font-weight:700;margin-bottom:9px}
#registerForm .pp-strength-label{color:#7e8ca2;font-weight:800;font-size:11px}
#registerForm .pp-strength-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#registerForm .pp-strength-bars span{height:5px;border-radius:50px;background:#e7ebf2;transition:background .22s}
#registerForm .pp-strength-tip{display:block;margin-top:9px;font-size:10.5px;line-height:1.5;color:#7b8aa0}
#registerForm .pp-password-strength[data-strength="weak"]{--strength-color:#e34d4d;border-color:#f5dbdb;background:linear-gradient(110deg,#fff7f7,#fff)}
#registerForm .pp-password-strength[data-strength="medium"]{--strength-color:#d99121;border-color:#f2e5c8;background:linear-gradient(110deg,#fffbf1,#fff)}
#registerForm .pp-password-strength[data-strength="strong"]{--strength-color:#218d62;border-color:#d0ecdd;background:linear-gradient(110deg,#f3fcf7,#fff)}
#registerForm .pp-password-strength:not([data-strength="none"]) .pp-strength-label{color:var(--strength-color)}
#registerForm .pp-password-strength[data-strength="weak"] .pp-strength-bars span:nth-child(1),
#registerForm .pp-password-strength[data-strength="medium"] .pp-strength-bars span:nth-child(-n+2),
#registerForm .pp-password-strength[data-strength="strong"] .pp-strength-bars span{background:var(--strength-color)}
@media(max-width:420px){#registerForm .pp-password-strength{padding:11px}}
@media(prefers-reduced-motion:reduce){#registerForm .pp-password-strength,#registerForm .pp-strength-bars span{transition:none}}

/* ---------- Forgot password + Set new password ---------- */
.login-page.auth-reset-page .login-card .field{margin-bottom:24px}
.login-page.auth-reset-page .login-card .form-status{line-height:1.6}
.login-page.auth-reset-page .login-card .login-symbol{background:#fff0e3}
.login-page.auth-reset-page .login-shell{align-items:center}
@media(max-width:850px){.login-page.auth-reset-page{padding-top:44px}}

/* ---------- Forgot password ---------- */
/* V13.11: Premium server feedback for forgot password */
#forgotForm .server-notice{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;margin:0 0 23px;border:1px solid;border-radius:14px;box-shadow:0 5px 18px rgba(19,39,67,.045);animation:ppForgotNoticeAppear .22s ease-out}
#forgotForm .server-notice--error{background:linear-gradient(115deg,#fff3f1,#fffafb);border-color:#f7d8d4;color:#9d3433}
#forgotForm .server-notice--success{background:linear-gradient(115deg,#effaf4,#f9fffb);border-color:#c9ebd7;color:#176c43}
#forgotForm .server-notice__icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:16px}
#forgotForm .server-notice--error .server-notice__icon{background:#ffe2dc;color:#e15a42}
#forgotForm .server-notice--success .server-notice__icon{background:#d9f4e3;color:#208955}
#forgotForm .server-notice__content{flex:1;min-width:0;padding-top:1px}
#forgotForm .server-notice__content strong{display:block;font-size:13px;font-weight:800;line-height:1.4;letter-spacing:-.1px}
#forgotForm .server-notice__content p{margin:4px 0 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:#59667b}
@keyframes ppForgotNoticeAppear{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:580px){#forgotForm .server-notice{padding:12px;gap:10px;border-radius:12px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#forgotForm .server-notice{animation:none}}

/* ---------- Set new password ---------- */
.password-guide{display:grid;gap:8px;margin:-8px 0 22px;padding:13px 15px;background:#f8fafc;border:1px solid #edf0f5;border-radius:10px;color:#7a8899;font-size:11px}.password-guide>div{display:flex;align-items:center;gap:9px}.password-guide i{font-size:12px}.password-guide .valid{color:#19865b}.login-page.auth-setpw-page .login-card .field{margin-bottom:23px}.login-page.auth-setpw-page .login-card .form-status{line-height:1.6}.login-page.auth-setpw-page .login-card .login-symbol{background:#fff0e3}@media(max-width:580px){.password-guide{font-size:11px}}
#newPasswordForm .server-notice{display:flex;align-items:flex-start;gap:12px;margin:0 0 20px;padding:14px;border:1px solid;border-radius:14px;box-shadow:0 5px 18px rgba(19,39,67,.045)}
#newPasswordForm .server-notice--error{background:linear-gradient(115deg,#fff3f1,#fffafb);border-color:#f7d8d4;color:#9d3433}
#newPasswordForm .server-notice--success{background:linear-gradient(115deg,#effaf4,#f9fffb);border-color:#c9ebd7;color:#176c43}
#newPasswordForm .server-notice>i{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#ffe2dc;color:#e15a42}
#newPasswordForm .server-notice--success>i{background:#d9f4e3;color:#208955}
#newPasswordForm .server-notice strong{font-size:13px;font-weight:800}
#newPasswordForm .server-notice p{margin:5px 0 0;font-size:12px;line-height:1.6;color:#59667b}
#newPasswordForm .server-notice a{display:inline-block;margin-top:9px;color:#176c43;font-size:13px;font-weight:800}