:root {
  --polyt-purple: #7617ff;
  --polyt-purple-soft: #7256d8;

  --polyt-orange: #ffab43;

  --polyt-blue: #5e8fc9;

  --polyt-white: #ffffff;

  --polyt-text: #161616;

  --polyt-muted: #8f949b;

  --polyt-input: #e1e6eb;
}

/* =========================================================
   BASE
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--polyt-text);

  background:
    linear-gradient(
      rgba(48, 62, 105, 0.33),
      rgba(45, 48, 80, 0.3)
    ),
    url("/assets/images/login-background.jpeg")
    center center / cover
    no-repeat fixed;

  overflow-x: hidden;
}

.page-overlay {
  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(232, 227, 241, 0.48),
      rgba(75, 99, 145, 0.08)
    );

  z-index: -1;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  position: relative;

  z-index: 10;
}

.navbar-brand {
  font-size: 1rem;

  letter-spacing: -0.04em;
}

.navbar .nav-link {
  color: rgba(
    255,
    255,
    255,
    0.9
  );

  font-weight: 600;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.navbar .nav-link:hover {
  color: #fff;
}

.navbar .nav-link.active {
  color: #fff;

  text-decoration: underline;

  text-underline-offset: 4px;
}

.btn-contact {
  min-width: 107px;

  padding: 9px 25px;

  border: none;

  border-radius: 0;

  background:
    var(--polyt-orange);

  color: #fff;

  font-weight: 700;
}

/* =========================================================
   ÁREA PRINCIPAL
========================================================= */

.login-main {
  position: relative;

  z-index: 1;
}

.min-vh-content {
  min-height:
    calc(100vh - 105px);

  padding-bottom: 55px;
}

/* =========================================================
   MARCA
========================================================= */

.brand-main {
  padding-left: 24px;

  font-size:
    clamp(
      4rem,
      6vw,
      6rem
    );

  font-weight: 600;

  letter-spacing: -0.08em;

  line-height: 1;
}

.brand-poly {
  color:
    var(--polyt-purple);
}

.brand-t {
  color:
    var(--polyt-orange);
}

/* =========================================================
   CARD LOGIN
========================================================= */

.login-card {
  width: 100%;

  max-width: 410px;

  padding:
    38px 40px;

  border:
    1.5px solid
    var(--polyt-blue);

  border-radius: 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 24px 70px
    rgba(
      26,
      33,
      58,
      0.13
    );

  backdrop-filter:
    blur(12px);
}

.login-title {
  margin: 0;

  font-size: 2rem;

  font-weight: 700;
}

.login-subtitle {
  margin: 0;

  color:
    var(--polyt-blue);

  font-size: 1.65rem;

  font-weight: 400;
}

/* =========================================================
   INPUT
========================================================= */

.input-wrapper {
  position: relative;
}

.input-wrapper .form-control {
  height: 48px;

  padding:
    0 50px
    0 68px;

  border: none;

  border-radius: 100px;

  background:
    var(--polyt-input);

  box-shadow: none;

  font-size: 0.83rem;

  font-weight: 600;

  color:
    #3e444a;
}

.input-wrapper .form-control:focus {
  background:
    #e7ebef;

  box-shadow:
    0 0 0
    3px
    rgba(
      94,
      143,
      201,
      0.14
    );
}

.input-wrapper .form-control::placeholder {
  color:
    #93979c;

  opacity: 1;
}

.input-icon {
  position: absolute;

  top: 50%;
  left: 8px;

  display: flex;

  width: 48px;
  height: 38px;

  align-items: center;
  justify-content: center;

  transform:
    translateY(-50%);

  border-radius: 100px;

  background:
    rgba(
      205,
      214,
      222,
      0.75
    );

  color: #111;

  font-size: 1.2rem;

  z-index: 2;
}

.password-toggle {
  position: absolute;

  top: 50%;
  right: 16px;

  transform:
    translateY(-50%);

  padding: 4px;

  border: 0;

  background:
    transparent;

  color:
    #71767d;
}

/* =========================================================
   LOGIN BUTTON
========================================================= */

.btn-login {
  min-height: 48px;

  border: none;

  border-radius: 100px;

  background:
    var(--polyt-orange);

  color: #111;

  font-weight: 700;

  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.btn-login:hover {
  background:
    var(--polyt-orange);

  color: #111;

  filter:
    brightness(0.97);

  transform:
    translateY(-1px);
}

.btn-login:disabled {
  opacity: 0.75;
}

.login-footer {
  margin-top: 20px;

  text-align: center;

  font-size: 0.82rem;

  font-weight: 600;
}

.login-footer a {
  color:
    var(--polyt-blue);

  font-weight: 700;
}

/* =========================================================
   CARD DIREITO
========================================================= */

.solution-card {
  display: grid;

  width: min(
    100%,
    550px
  );

  min-height: 515px;

  grid-template-columns:
    1fr 1fr;

  overflow: hidden;

  border-radius: 15px;

  box-shadow:
    0 25px 80px
    rgba(
      19,
      25,
      50,
      0.14
    );
}

.solution-content {
  padding:
    40px
    30px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  color:
    var(--polyt-purple-soft);
}

.solution-heading {
  margin: 0;

  font-size:
    1.35rem;

  line-height: 1.05;
}

.solution-content h2 {
  margin-bottom: 28px;

  font-size:
    1.35rem;

  font-weight: 800;
}

.feature {
  margin-top: 25px;
}

.feature-title {
  font-weight: 700;

  font-size: 0.88rem;
}

.feature p {
  margin:
    7px 0 0;

  font-size: 0.84rem;

  line-height: 1.1;
}

.solution-image {
  min-width: 0;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.08)
    ),
    url("/assets/images/tecnico-login.jpeg")
    center center / cover
    no-repeat;
}

/* =========================================================
   ALERTA
========================================================= */

.alert {
  padding:
    10px 14px;

  border-radius: 10px;

  font-size: 0.84rem;
}

/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 991.98px
) {

  body {
    background-position:
      center;
  }

  .login-main {
    padding:
      25px 0
      50px;
  }

  .min-vh-content {
    min-height:
      auto;
  }

  .brand-main {
    padding-left: 0;

    text-align: center;

    font-size:
      4.3rem;
  }

  .login-card {
    margin:
      0 auto;
  }

}

@media (
  max-width: 575.98px
) {

  .navbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .login-card {
    padding:
      32px 24px;
  }

  .brand-main {
    font-size:
      3.8rem;
  }

}