/* Employer authentication and registration visual refresh.
   Loaded after the shared site styles so SiteLok markup remains untouched. */

.tf-employer-portal,
.tf-employer-registration-portal {
  --auth-ink: #082f35;
  --auth-teal: #087f74;
  --auth-mint: #dff7ee;
  --auth-gold: #f5a623;
  color: var(--auth-ink);
}

.tf-employer-portal {
  background:
    radial-gradient(circle at 8% 14%, rgba(48, 184, 159, .16), transparent 25rem),
    linear-gradient(145deg, #effaf6 0%, #fffaf0 100%);
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
}

.tf-employer-portal .emp-login__container {
  max-width: 1240px;
  min-height: 650px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(8, 78, 77, .12);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 30px 75px rgba(5, 54, 58, .14);
}

.tf-employer-portal .emp-login__illustration {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 15%, rgba(247, 182, 55, .24), transparent 12rem),
    linear-gradient(150deg, #073f45, #087f74);
}

.tf-employer-portal .emp-login__illustration-content { position: relative; z-index: 2; }
.tf-employer-portal .emp-login__illustration-title { color: #fff; font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1.02; }
.tf-employer-portal .emp-login__illustration-text { color: rgba(255,255,255,.84); font-size: 1.08rem; line-height: 1.75; }
.tf-employer-portal .tf-employer-eyebrow { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.tf-employer-portal .emp-login__stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.17); backdrop-filter: blur(10px); }
.tf-employer-portal .emp-login__stat b,
.tf-employer-portal .emp-login__stat-number { color: #fff; font-size: 1rem; }
.tf-employer-portal .emp-login__stat small,
.tf-employer-portal .emp-login__stat-label { color: rgba(255,255,255,.7); font-size: .88rem; }
.tf-employer-portal .emp-login__stat > i { color: #ffd27a; font-size: 1.25rem; }
.tf-employer-portal .emp-login__panel { padding: clamp(2.4rem, 5vw, 5rem); }
.tf-employer-portal .emp-login__title { color: var(--auth-ink); font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -.04em; }
.tf-employer-portal .emp-login__welcome { color: #52696c; font-size: 1.08rem; }
.tf-employer-portal .emp-login__label { color: #173f43; font-size: .9rem; font-weight: 800; letter-spacing: .04em; }
.tf-employer-portal .emp-login__input { min-height: 58px; padding: 0 1.15rem; border: 1px solid #c9dcd9; border-radius: 14px; color: #123b3f; font-size: 1rem; background: #fbfefd; }
.tf-employer-portal .emp-login__input:focus { border-color: var(--auth-teal); box-shadow: 0 0 0 4px rgba(8,127,116,.12); }
.tf-employer-portal .emp-login__button { min-height: 60px; border-radius: 14px; background: linear-gradient(135deg, #087f74, #075961); box-shadow: 0 14px 30px rgba(8,127,116,.24); }

.tf-employer-registration-portal {
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem);
  background:
    radial-gradient(circle at 90% 8%, rgba(245, 166, 35, .15), transparent 25rem),
    linear-gradient(145deg, #edf9f5, #fffdf7);
}

.emp-regis__shell {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.5fr);
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(8, 78, 77, .12);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 30px 75px rgba(5, 54, 58, .14);
}

.emp-regis__story {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.7rem, 3vw, 3.5rem);
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 205, 105, .25), transparent 13rem),
    linear-gradient(160deg, #073f45, #087f74);
  color: #fff;
}

.emp-regis__story-content { position: sticky; top: 2rem; z-index: 2; }
.emp-regis__story h2 { margin: 1.4rem 0 1rem; color: #fff; font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.04; letter-spacing: -.04em; }
.emp-regis__story p { color: rgba(255,255,255,.82); font-size: 1.06rem; line-height: 1.7; }
.emp-regis__story .emp-login__illustration-stats { margin-top: 2rem; }
.emp-regis__story .emp-login__stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.emp-regis__story .emp-login__stat b { color: #fff; }
.emp-regis__story .emp-login__stat small { color: rgba(255,255,255,.7); }
.emp-regis__story .emp-login__stat > i { color: #ffd27a; }
.emp-regis__story-note { display: flex; gap: .9rem; align-items: center; margin-top: 2rem; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.1); }
.emp-regis__story-note a { display: block; margin-top: .2rem; color: #ffd27a; font-weight: 800; }
.tf-employer-registration-portal .emp-regis__container { width: auto; max-width: none; padding: clamp(2rem, 4vw, 4.5rem); box-shadow: none; border-radius: 0; }
.tf-employer-registration-portal .emp-regis__header { text-align: left; }
.tf-employer-registration-portal .emp-regis__title { color: var(--auth-ink); font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em; }
.tf-employer-registration-portal .emp-regis__intro { max-width: 760px; color: #52696c; font-size: 1.04rem; line-height: 1.7; }
.tf-employer-registration-portal .emp-regis__section { padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid #d9e8e5; border-radius: 20px; background: #fbfefd; }
.tf-employer-registration-portal .emp-regis__section-title { color: #0b5556; font-size: 1.06rem; }
.tf-employer-registration-portal .emp-regis__label { color: #173f43; font-size: .88rem; font-weight: 800; }
.tf-employer-registration-portal .emp-regis__input,
.tf-employer-registration-portal .emp-regis__select,
.tf-employer-registration-portal .emp-regis__textarea { padding: 1rem 1.1rem; border: 1px solid #c8dbd8; border-radius: 13px; color: #123b3f; font-size: 1rem; background: #fff; }
.tf-employer-registration-portal .emp-regis__input { min-height: 54px; }
.tf-employer-registration-portal .emp-regis__input:focus,
.tf-employer-registration-portal .emp-regis__select:focus,
.tf-employer-registration-portal .emp-regis__textarea:focus { border-color: var(--auth-teal); box-shadow: 0 0 0 4px rgba(8,127,116,.11); outline: 0; }
.tf-employer-registration-portal .emp-regis__button { min-height: 62px; border-radius: 14px; background: linear-gradient(135deg, #087f74, #075961); box-shadow: 0 14px 30px rgba(8,127,116,.22); }

.emp-forgot { background: linear-gradient(145deg, #effaf6, #fffaf0); }
.emp-forgot__container { border: 1px solid rgba(8,78,77,.12); border-radius: 30px; overflow: hidden; box-shadow: 0 26px 68px rgba(5,54,58,.13); }
.emp-forgot__illustration { background: linear-gradient(155deg, #073f45, #087f74); }
.emp-forgot__illustration-title { color: #fff; }
.emp-forgot__illustration-text,
.emp-forgot__tip-text { color: rgba(255,255,255,.8); }
.emp-forgot__title { color: #082f35; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.04em; }
.emp-forgot__subtitle { color: #52696c; font-size: 1.05rem; }
.emp-forgot__label { color: #173f43; font-size: .9rem; font-weight: 800; }
.emp-forgot__input { min-height: 58px; padding: 0 1.15rem; border: 1px solid #c8dbd8; border-radius: 14px; color: #123b3f; font-size: 1rem; }
.emp-forgot__button { min-height: 60px; border-radius: 14px; background: linear-gradient(135deg, #087f74, #075961); }

@media (max-width: 980px) {
  .emp-regis__shell { grid-template-columns: 1fr; }
  .emp-regis__story-content { position: relative; top: auto; }
  .emp-regis__story .emp-login__illustration-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .tf-employer-portal,
  .tf-employer-registration-portal { padding: 1rem; }
  .tf-employer-portal .emp-login__container,
  .emp-regis__shell { border-radius: 22px; }
  .tf-employer-portal .emp-login__panel,
  .tf-employer-registration-portal .emp-regis__container { padding: 1.5rem; }
  .emp-regis__story { padding: 2rem 1.5rem; }
  .emp-regis__story .emp-login__illustration-stats { grid-template-columns: 1fr; }
  .tf-employer-registration-portal .emp-regis__grid { grid-template-columns: 1fr; }
  .tf-employer-registration-portal .emp-regis__field { grid-column: 1; }
}