@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root{
  --teal:#157885;
  --teal-dark:#0F5C62;
  --teal-link:#157C85;
  --green:#00A651;
  --green-dark:#006936;
  --red:#C80023;
  --red-dark:#9E001B;
  --grey-btn:#676767;
  --grey-btn-hover:#505050;
  --ink:#505050;
  --ink-soft:#555555;
  --input-border:#505050;
  --bar-grey:#e2e2e2;
  --panel-line:#ddd;
  --footer-grey:#e9edee;
  --heading-blue:#157885;
  --heading-blue-bold:#0F5C62;
  --step-navy:#157885;
  --step-grey:#a9a9a9;
  --asterisk:#C80023;
  --page-title:#6D6E71;
  --link-blue:#157C85;
  --res-text:#6D6E71;
  --res-icon:#157885;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Open Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
a{color:var(--teal-link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ================================================================
   PORTAL HEADER
   ================================================================ */
.portal-header{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  padding:10px 32px;
  display:flex;
  align-items:center;
  min-height:64px;
}
.portal-logo{
  height:44px;
  width:auto;
  display:block;
}

/* ================================================================
   PORTAL MAIN
   ================================================================ */
.portal-main{
  flex:1 0 auto;
  padding:80px 20px 0;
  max-width:1280px;
  width:100%;
  margin:0 auto;
}

/* ================================================================
   TWO-COLUMN LAYOUT
   ================================================================ */
.portal-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:stretch;
  padding:0 16px;
}

.portal-col-left{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:60px 0 0;
}
.portal-login-inner{
  width:100%;
  max-width:540px;
}

.portal-col-right{
  display:grid;
  padding:0;
}

/* ================================================================
   PORTAL HEADING (shared style)
   ================================================================ */
.portal-heading{
  font-family:'Open Sans',sans-serif;
  font-size:34px;
  font-weight:400;
  font-style:normal;
  color:#555;
  text-align:center;
  margin-bottom:8px;
}

/* ================================================================
   LOGIN FORM
   ================================================================ */
.portal-field{
  margin-bottom:4px;
}
.portal-field label{
  display:block;
  padding:8px;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}
.portal-field input{
  width:100%;
  height:48px;
  font-size:14px;
  border-radius:8px;
  border:1px solid var(--input-border);
  padding:0 8px;
  font-family:inherit;
  color:var(--ink);
  outline:none;
  transition:border-color .15s;
}
.portal-field input:focus{
  border-color:#94a3b8;
  outline:2px solid #000;
  outline-offset:1px;
}
.portal-field input:active{
  border-color:#94a3b8;
}

.portal-pw-wrap{
  position:relative;
}
.portal-pw-wrap input{
  padding-right:60px;
}
.portal-pw-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:none;
  padding:4px 8px;
  font-size:14px;
  color:var(--teal-link);
  cursor:pointer;
  font-family:inherit;
  outline:1px solid transparent;
}
.portal-pw-toggle:hover{
  text-decoration:underline;
}
.portal-pw-toggle:focus{
  outline:1px solid #000;
}

.portal-remember{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 8px 8px;
}
.portal-remember input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--teal);
  cursor:pointer;
  flex-shrink:0;
}
.portal-remember label{
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
}

/* ================================================================
   PORTAL BUTTONS (pill-shaped)
   ================================================================ */
.portal-btn-wrap{
  display:flex;
  justify-content:center;
  padding:2px 0;
}
.portal-btn{
  display:inline-block;
  width:200px;
  text-align:center;
  padding:9px 8px;
  border-radius:9999px;
  border:none;
  color:#fff;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s;
  line-height:1.5;
}
.portal-btn:hover{
  text-decoration:none;
}

.portal-btn-green{
  background:var(--green);
}
.portal-btn-green:hover,
.portal-btn-green:focus{
  background:var(--green-dark);
  color:#fff;
}

.portal-btn-grey{
  background:#9a9a9a;
}
.portal-btn-grey:hover,
.portal-btn-grey:focus{
  background:#808080;
  color:#fff;
}

.portal-btn-red{
  background:var(--red);
}
.portal-btn-red:hover,
.portal-btn-red:focus{
  background:var(--red-dark);
  color:#fff;
}

.portal-btn-wrap-full .portal-btn{
  width:100%;
}

/* ================================================================
   FORGOT LINKS
   ================================================================ */
.portal-forgot{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:8px;
  font-size:14px;
}
.portal-forgot a{
  padding:0 4px;
  color:var(--teal-link);
}
.portal-forgot a:hover{
  text-decoration:underline;
}
.portal-sep{
  color:var(--ink);
  padding:0 2px;
}

/* ================================================================
   EMPLOYER CARD
   ================================================================ */
.portal-employer-card{
  width:100%;
  background:#f7f8f8;
  border:2px solid #eee;
  border-radius:6px;
  padding:40px 48px;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  gap:32px;
  place-content:center;
  justify-items:center;
}
.portal-employer-card .portal-heading{
  align-self:end;
  padding-top:8px;
}
.portal-employer-card .portal-btn-wrap-full{
  width:100%;
  padding:0 8px;
}
.portal-employer-note{
  text-align:center;
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
  max-width:380px;
  align-self:start;
}

/* ================================================================
   HELPFUL LINKS
   ================================================================ */
.portal-helpful{
  padding:180px 24px 40px;
  text-align:center;
}
.portal-helpful .portal-heading{
  margin-bottom:12px;
}
.portal-links-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  font-size:14px;
}
.portal-links-row a{
  padding:0 4px;
  color:var(--teal-link);
}
.portal-links-row a:hover{
  text-decoration:underline;
}

/* ================================================================
   PORTAL FOOTER
   ================================================================ */
.portal-footer{
  flex-shrink:0;
  margin-top:auto;
  padding:8px 16px 16px;
  color:#6D6E71;
  font-size:12px;
  position:relative;
}
.portal-footer-divider{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:40px;
}
.portal-footer-divider::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:#676767;
  border-radius:9999px;
}
.portal-footer-logo{
  position:relative;
  z-index:1;
  width:96px;
  height:96px;
  object-fit:contain;
  background:#fff;
  padding:8px;
  border:2px solid #ccc;
  border-radius:12px;
}
.portal-footer-text{
  text-align:center;
  line-height:1.7;
  padding:0 16px;
  color:#6D6E71;
}
.portal-footer-text a{
  color:var(--teal-link);
  text-decoration:underline;
}
.portal-footer-text a:hover{
  cursor:pointer;
}
.portal-footer-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px 0;
  gap:4px;
}
.portal-footer-nav a{
  color:var(--teal-link);
  text-decoration:underline;
  font-size:14px;
}
.portal-footer-ref{
  text-align:center;
  padding:8px 0;
  color:#6D6E71;
}

/* ================================================================
   AUTH LOADER / ERROR (shared with login.html)
   ================================================================ */
.auth-loader{
  display:flex;align-items:center;gap:12px;
  justify-content:center;
  margin:12px 0 0;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;height:0;overflow:hidden;
}
.auth-loader.visible{opacity:1;height:auto;overflow:visible}
.auth-spinner{
  width:20px;height:20px;
  border:2.5px solid #ddd;
  border-top-color:var(--teal);
  border-radius:50%;
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-loader span{color:#888;font-size:13px}

.auth-error{
  margin:12px 0 0;
  padding:10px 14px;
  background:#fdf2f2;
  border:1px solid #f0d0d0;
  border-radius:3px;
  color:#9a3030;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;height:0;overflow:hidden;
}
.auth-error.visible{opacity:1;height:auto;overflow:visible}

/* ================================================================
   LEGACY PAGES (login.html, register.html, etc.)
   ================================================================ */
.site-header{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 0 0 18px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  position:relative;
  z-index:30;
  height:62px;
}
.site-header .logo{display:flex;align-items:center;flex-shrink:0}
.site-header .logo img{height:44px;display:block}

.site-header .contact{
  font-size:12.5px;
  color:#333;
  line-height:1.7;
  flex-shrink:0;
}
.site-header .contact div{display:flex;align-items:center;gap:5px}
.site-header .contact svg{width:13px;height:13px;color:#555;flex-shrink:0}

.site-header .page-title{
  font-size:24px;
  font-weight:300;
  color:var(--page-title);
  letter-spacing:.2px;
  margin-left:6px;
  white-space:nowrap;
}

.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;padding-right:16px;flex-shrink:0}

.btn-auth{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 24px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:12.5px;
  font-weight:600;
  font-family:inherit;
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.btn-auth svg{width:18px;height:18px;flex-shrink:0}
.btn-auth.signin{background:var(--teal)}
.btn-auth.signin:hover{background:var(--grey-btn)}
.btn-auth.register{background:var(--grey-btn)}
.btn-auth.register:hover{background:var(--grey-btn-hover)}

main{flex:1 0 auto}

/* ================================================================
   LOGIN PAGE (login.html)
   ================================================================ */
.auth-wrap{
  max-width:540px;
  margin:40px 0 80px 120px;
  padding:0 40px;
  width:100%;
}
.auth-lock{text-align:center;margin-bottom:10px}
.auth-lock svg{width:44px;height:44px;color:#5a5a5a;stroke-width:1.4;display:inline-block}
.auth-note{
  text-align:center;color:#888;margin:0 0 24px;
  line-height:1.55;font-size:12px;
}
.auth-h{text-align:center;font-weight:700;color:#333;font-size:16px;margin-bottom:26px}

.auth-form-area{max-width:420px}

.field{margin-bottom:4px}
.field label{display:block;color:#555;margin-bottom:5px;font-size:13px}
.field label i{color:var(--asterisk);font-style:normal;margin-left:2px}
.field input{
  width:100%;border:1px solid #444;background:#fff;
  padding:9px 10px;font-size:13px;outline:none;font-family:inherit;
}
.field input:focus{border-color:#000}
.field-help{font-size:12px;color:#666;margin:7px 0 20px}
.field-help a{color:var(--link-blue)}

.btn-lg{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 24px;border:none;
  color:#fff;text-transform:uppercase;letter-spacing:.9px;
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;text-decoration:none;
}
.btn-lg svg{width:18px;height:18px}
.btn-lg.maroon{background:var(--teal)}
.btn-lg.maroon:hover{background:var(--teal-dark)}
.btn-lg.signin:hover{background:var(--grey-btn)}
.btn-lg.grey{background:var(--grey-btn)}
.btn-lg.grey:hover{background:var(--grey-btn-hover)}

.auth-reg{color:#7a7a7a;margin:22px 0 10px;font-size:13px}

.auth-field-error{
  color:#c0392b;font-size:11.5px;margin:4px 0 0;
  opacity:0;height:0;overflow:hidden;transition:opacity .3s ease;
}
.auth-field-error.visible{opacity:1;height:auto;overflow:visible}

/* ================================================================
   REGISTRATION (register.html)
   ================================================================ */
.reg-wrap{max-width:840px;margin:36px auto 80px;padding:0 20px;text-align:center;width:100%}
.steps{display:flex;justify-content:center}
.step{
  position:relative;
  background:var(--step-grey);
  color:#fff;font-size:12px;font-weight:700;
  padding:7px 20px 7px 26px;
  margin-left:-10px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.step:first-child{
  margin-left:0;padding-left:18px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.step.active{background:var(--step-navy)}

.reg-sub{margin:16px 0 6px;color:#555;font-size:13px}
.reg-lead{margin:0 0 36px;color:#555;font-size:13px}

.reg-form{display:inline-block;text-align:left}
.reg-row{display:flex;align-items:center;gap:22px;margin-bottom:18px}
.reg-row label{width:100px;color:#555;text-align:left;font-size:13px}
.reg-row label i{color:var(--asterisk);font-style:normal;margin-left:2px}
.reg-row input{
  width:220px;border:1px solid #DCDDDE;background:#fff;
  padding:9px 10px;font-size:13px;outline:none;font-family:inherit;
}
.reg-row input:focus{border-color:#888}

.reg-actions{margin-top:34px;display:flex;gap:12px;justify-content:center}

/* ================================================================
   SITE FOOTER (legacy pages)
   ================================================================ */
.site-footer{
  flex-shrink:0;
  background:var(--footer-grey);
  padding:28px 20px 22px;
  text-align:center;
  color:#6a6a6a;
}
.site-footer nav a{
  color:#565656;text-transform:uppercase;text-decoration:none;
  font-size:12px;letter-spacing:.6px;margin:0 18px;
}
.site-footer nav a:hover{text-decoration:underline}
.site-footer .copy{margin-top:12px;font-size:11px;color:#6a6a6a}
.site-footer .sitemap{margin-top:10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.site-footer .sitemap a{color:#565656;text-decoration:none}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px){
  .portal-header{padding:10px 16px;min-height:54px}
  .portal-logo{height:36px}
  .portal-main{padding:40px 12px 0}
  .portal-columns{
    grid-template-columns:1fr;
    gap:32px;
  }
  .portal-col-left{padding:16px 0 0}
  .portal-login-inner{width:100%;max-width:480px}
  .portal-col-right{padding:0 16px}
  .portal-employer-card{min-height:300px;gap:24px;padding:24px 16px}
  .portal-helpful{padding:80px 16px 32px}
  .portal-footer{margin-top:120px}

  /* Legacy pages */
  .site-header{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .site-header .logo img{height:36px}
  .site-header .contact{font-size:11.5px}
  .site-header .page-title{width:100%;margin:0;font-size:20px}
  .header-actions{width:100%;padding-right:0}
  .btn-auth{flex:1;justify-content:center;padding:10px 8px}
  .auth-wrap{margin:30px auto 60px;max-width:100%;padding:0 20px}
  .auth-note br{display:none}
  .reg-row{flex-direction:column;align-items:flex-start;gap:6px}
  .reg-row input{width:100%}
  .reg-form{display:block;padding:0 12px}
  .step{font-size:11px;padding:6px 16px 6px 22px}
  .step:first-child{padding-left:14px}
}

@media (max-width:480px){
  .portal-header{padding:8px 12px;min-height:48px}
  .portal-logo{height:32px}
  .portal-main{padding:28px 8px 0}
  .portal-heading{font-size:26px}
  .portal-columns{gap:24px;padding:0 4px}
  .portal-col-left{padding:12px 0 0}
  .portal-col-right{padding:0 8px}
  .portal-employer-card{min-height:260px;gap:20px;padding:20px 12px}
  .portal-employer-note{font-size:13px}
  .portal-helpful{padding:60px 12px 24px}
  .portal-links-row{flex-direction:column;gap:8px}
  .portal-links-row .portal-sep{display:none}
  .portal-footer{margin-top:80px;padding:8px 12px 12px}
  .portal-footer-logo{width:64px;height:64px}
  .portal-footer-text{font-size:11px}

  /* Legacy pages */
  .site-header{padding:8px 10px;gap:6px}
  .site-header .logo img{height:32px}
  .site-header .contact{font-size:10.5px;line-height:1.5}
  .site-header .contact span{font-size:10.5px}
  .site-header .page-title{font-size:17px}
  .header-actions{gap:6px}
  .btn-auth{font-size:11px;padding:9px 6px;letter-spacing:.5px}
  .btn-auth svg{width:15px;height:15px}
  .auth-wrap{margin:24px auto 50px;padding:0 16px}
  .auth-lock svg{width:36px;height:36px}
  .auth-note{font-size:11.5px}
  .auth-h{font-size:15px;margin-bottom:20px}
  .auth-form-area{max-width:100%}
  .field input{padding:10px;font-size:14px}
  .btn-lg{padding:10px 20px;font-size:12px;width:100%;justify-content:center}
  .auth-reg{font-size:12.5px}
  .reg-wrap{margin:24px auto 50px;padding:0 16px}
  .steps{flex-wrap:wrap;gap:4px;justify-content:center}
  .step{font-size:10px;padding:5px 12px 5px 18px;margin-left:-6px}
  .step:first-child{padding-left:10px;margin-left:0}
  .reg-sub{font-size:12px}
  .reg-lead{font-size:12px;margin-bottom:24px}
  .reg-actions{flex-direction:column;gap:10px}
  .reg-actions .btn-lg{width:100%;justify-content:center}
  .site-footer{padding:20px 12px 16px}
  .site-footer nav a{font-size:10.5px;margin:0 8px;letter-spacing:.4px}
  .site-footer .copy{font-size:10px}
  .site-footer .sitemap{font-size:10px}
}