/* =========================================================
   DATERAQUEST 2.0
   PREMIUM LOGIN PAGE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --dq-green: #5c9f3f;

  --dq-green-dark: #28551d;

  --dq-green-soft: #edf6e9;

  --dq-text: #243421;

  --dq-muted: #7b8379;

  --dq-border: rgba(60, 100, 45, .10);

}


/* =========================================================
   BODY
========================================================= */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;

  width: 100%;
  min-height: 100%;

}


body {

  position: relative;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--dq-text);

  overflow-x: hidden;

  background:

    linear-gradient(
      rgba(255,255,255,.76),
      rgba(255,255,255,.76)
    ),

    url("../img/bg/bg-datera.png")
      center / cover
      fixed;

}


/* =========================================================
   BACKGROUND
========================================================= */

.login-background {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;

}


/* Data Grid */

.data-grid {

  position: absolute;

  inset: 0;

  opacity: .35;

  background-image:

    linear-gradient(
      rgba(70,110,55,.055) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(70,110,55,.055) 1px,
      transparent 1px
    );

  background-size: 45px 45px;

  mask-image:

    linear-gradient(
      to bottom,
      transparent,
      black 20%,
      black 80%,
      transparent
    );

}


/* Glow */

.glow {

  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  filter: blur(90px);

  opacity: .12;

}


.glow-1 {

  top: -180px;

  right: -120px;

  background: #73aa58;

}


.glow-2 {

  bottom: -200px;

  left: -150px;

  background: #9bc987;

}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.data-circle {

  position: absolute;

  border-radius: 50%;

  border: 1px dashed rgba(80,130,60,.13);

}


.circle-1 {

  width: 500px;
  height: 500px;

  right: -250px;

  top: 10%;

}


.circle-2 {

  width: 350px;
  height: 350px;

  left: -200px;

  bottom: 5%;

}


/* =========================================================
   DATA DOTS
========================================================= */

.data-dots {

  position: absolute;

  top: 20%;

  right: 8%;

  display: grid;

  grid-template-columns:
    repeat(3, 7px);

  gap: 8px;

  opacity: .25;

}


.data-dots span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--dq-green);

}


/* =========================================================
   HEADER
========================================================= */

.login-header {

  position: absolute;

  top: 25px;

  left: 0;

  right: 0;

  z-index: 10;

  display: flex;

  justify-content: center;

}


.back-home {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 9px 16px;

  color: #53614e;

  background: rgba(255,255,255,.65);

  border: 1px solid rgba(60,100,45,.08);

  border-radius: 50px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 600;

  backdrop-filter: blur(12px);

  box-shadow:
    0 8px 25px rgba(30,50,20,.04);

  transition: all .3s ease;

}


.back-home i {

  font-size: 14px;

  transition: transform .3s ease;

}


.back-home:hover {

  color: var(--dq-green-dark);

  background: rgba(255,255,255,.9);

  transform: translateY(-2px);

}


.back-home:hover i {

  transform: translateX(-3px);

}


/* =========================================================
   WRAPPER
========================================================= */

.login-wrapper {

  position: relative;

  flex: 1;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 100px 20px 80px;

}


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

.login-card {

  position: relative;

  width: 440px;

  padding: 42px 42px 32px;

  text-align: center;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.91),
      rgba(255,255,255,.78)
    );

  border: 1px solid rgba(255,255,255,.95);

  border-radius: 28px;

  box-shadow:

    0 30px 80px
      rgba(30,55,20,.10),

    0 5px 20px
      rgba(30,55,20,.04);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  overflow: hidden;

}


/* top highlight */

.login-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 12%;

  width: 76%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90,150,60,.35),
      transparent
    );

}


/* =========================================================
   TOP LABEL
========================================================= */

.login-top-label {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-bottom: 25px;

  padding: 6px 11px;

  color: var(--dq-green-dark);

  background: rgba(90,160,60,.07);

  border: 1px solid rgba(90,160,60,.10);

  border-radius: 50px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.status-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--dq-green);

  box-shadow:
    0 0 0 4px rgba(90,160,60,.08);

}


/* =========================================================
   LOGO
========================================================= */

.login-logo {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 25px;

}


.login-logo .logo-icon {

  width: 76px;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 12px
      rgba(30,70,20,.10)
    );

}


.login-logo .logo-text {

  width: 125px;

  height: auto;

  object-fit: contain;

  margin-left: -9px;

}


/* =========================================================
   HEADING
========================================================= */

.login-heading h1 {

  margin: 0 0 9px;

  color: var(--dq-green-dark);

  font-size: 29px;

  line-height: 1.2;

  font-weight: 750;

  letter-spacing: -.6px;

}


.login-heading p {

  max-width: 300px;

  margin: 0 auto 23px;

  color: var(--dq-muted);

  font-size: 13px;

  line-height: 1.65;

}


/* =========================================================
   COMPETITION BADGE
========================================================= */

.competition-badge {

  display: flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  margin-bottom: 20px;

  padding: 11px 13px;

  text-align: left;

  background:
    rgba(240,247,237,.65);

  border: 1px solid rgba(90,150,60,.10);

  border-radius: 13px;

}


.badge-icon {

  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 9px;

  color: var(--dq-green);

  background: rgba(90,150,60,.10);

}


.badge-content span {

  display: block;

  margin-bottom: 2px;

  color: var(--dq-green);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;

}


.badge-content strong {

  display: block;

  color: #42513d;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .3px;

}


/* =========================================================
   GOOGLE BUTTON
========================================================= */

.google-btn {

  position: relative;

  width: 100%;

  min-height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  padding: 14px 45px 14px 18px;

  color: #30372f;

  background: #fff;

  border: 1px solid rgba(50,70,45,.13);

  border-radius: 14px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease;

}


.google-btn:hover {

  transform: translateY(-3px);

  border-color: rgba(90,150,60,.25);

  background: #fff;

  box-shadow:

    0 15px 30px
      rgba(40,80,25,.09);

}


.google-btn:active {

  transform: translateY(-1px);

}


.google-icon {

  display: flex;

  align-items: center;

  justify-content: center;

}


.google-arrow {

  position: absolute;

  right: 17px;

  color: #a2aaa0;

  font-size: 15px;

  transition:
    transform .3s ease,
    color .3s ease;

}


.google-btn:hover .google-arrow {

  color: var(--dq-green);

  transform: translateX(3px);

}


/* =========================================================
   SECURITY
========================================================= */

.secure-login {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-top: 13px;

  color: #8b9388;

  font-size: 9px;

}


.secure-login i {

  color: var(--dq-green);

  font-size: 12px;

}


/* =========================================================
   DIVIDER
========================================================= */

.login-divider {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 25px 0 17px;

}


.login-divider span {

  flex: 1;

  height: 1px;

  background: rgba(60,90,50,.09);

}


.login-divider small {

  color: #a0a69d;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


/* =========================================================
   TERMS
========================================================= */

.login-terms {

  max-width: 320px;

  margin: 0 auto;

  color: #969c94;

  font-size: 9px;

  line-height: 1.7;

}


.login-terms a {

  color: #62765b;

  font-weight: 600;

  text-decoration: none;

}


.login-terms a:hover {

  color: var(--dq-green);

  text-decoration: underline;

}


/* =========================================================
   BACK LINK
========================================================= */

.login-back {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 18px;

  color: #6e786b;

  text-decoration: none;

  font-size: 10px;

  font-weight: 600;

  transition: all .3s ease;

}


.login-back i {

  transition: transform .3s ease;

}


.login-back:hover {

  color: var(--dq-green-dark);

}


.login-back:hover i {

  transform: translateX(-3px);

}


/* =========================================================
   FOOTER
========================================================= */

.login-footer {

  position: absolute;

  bottom: 20px;

  left: 0;
  right: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  color: #92998f;

  font-size: 9px;

  letter-spacing: .3px;

}


.footer-dot {

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--dq-green);

  opacity: .6;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

  .login-wrapper {

    padding:
      105px
      20px
      75px;

  }


  .login-card {

    width: 100%;

    max-width: 440px;

    padding:
      35px
      30px
      28px;

    border-radius: 24px;

  }


  .circle-1 {

    right: -300px;

  }


  .circle-2 {

    left: -270px;

  }


  .login-header {

    top: 20px;

  }


  .back-home {

    font-size: 10px;

  }


  .login-footer {

    bottom: 15px;

    font-size: 8px;

  }

}


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

@media (max-width: 480px) {

  body {

    background-attachment: scroll;

  }


  .login-wrapper {

    padding:
      90px
      15px
      65px;

  }


  .login-card {

    padding:
      30px
      20px
      25px;

    border-radius: 21px;

  }


  .login-top-label {

    margin-bottom: 20px;

  }


  .login-logo .logo-icon {

    width: 62px;

  }


  .login-logo .logo-text {

    width: 105px;

    margin-left: -7px;

  }


  .login-heading h1 {

    font-size: 25px;

  }


  .login-heading p {

    font-size: 12px;

    margin-bottom: 20px;

  }


  .competition-badge {

    padding: 10px;

  }


  .badge-icon {

    width: 31px;
    height: 31px;

  }


  .badge-content strong {

    font-size: 9px;

  }


  .google-btn {

    min-height: 51px;

    font-size: 12px;

  }


  .login-footer {

    flex-wrap: wrap;

    padding: 0 20px;

    gap: 6px;

  }


  .data-dots {

    right: 5%;

    transform: scale(.7);

  }

}


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

@media (max-width: 360px) {

  .login-wrapper {

    padding-left: 10px;
    padding-right: 10px;

  }


  .login-card {

    padding:
      27px
      17px
      23px;

  }


  .login-logo .logo-icon {

    width: 55px;

  }


  .login-logo .logo-text {

    width: 95px;

  }


  .login-heading h1 {

    font-size: 23px;

  }


  .competition-badge {

    display: none;

  }


  .google-btn {

    font-size: 11px;

  }

}