/* =====================================================
   OZONTECH-EU • PARTNER ENTERPRISE LOGIN
===================================================== */

:root{

  --bg-1:#020617;
  --bg-2:#081120;
  --bg-3:#0B172A;

  --accent:#00C8FF;
  --accent-2:#3B82F6;

  --text:#F8FAFC;
  --muted:#94A3B8;

  --card:
    rgba(12,22,40,.82);

}

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

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{

  width:100%;

  height:100%;

  overflow:hidden;
}

body.login-page{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  font-family:
    Inter,
    system-ui,
    sans-serif;

  color:var(--text);

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(0,200,255,.10),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 80%,
      rgba(59,130,246,.10),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      var(--bg-1),
      var(--bg-2),
      var(--bg-3)
    );

  overflow:hidden;
}

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

.login-wrapper{

  width:100%;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;
}

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

.login-card{

  width:100%;

  max-width:430px;

  padding:34px 30px 26px;

  border-radius:28px;

  background:var(--card);

  backdrop-filter:blur(22px);

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

  border:
    1px solid rgba(0,200,255,.12);

  box-shadow:

    0 30px 80px rgba(0,0,0,.45),

    0 0 80px rgba(0,200,255,.05);

  position:relative;

  overflow:hidden;
}

.login-card::before{

  content:"";

  position:absolute;

  top:-140px;
  right:-120px;

  width:260px;
  height:260px;

  background:
    radial-gradient(
      circle,
      rgba(0,200,255,.15),
      transparent 75%
    );

  pointer-events:none;
}

/* =====================================================
   BRAND
===================================================== */

.login-brand{

  text-align:center;

  margin-bottom:20px;
}

.login-badge{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:8px 14px;

  border-radius:999px;

  background:
    rgba(0,200,255,.08);

  border:
    1px solid rgba(0,200,255,.18);

  color:#8CEBFF;

  font-size:12px;

  font-weight:700;

  margin-bottom:14px;
}

.login-logo-glow{

  width:64px;
  height:64px;

  margin:0 auto 12px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,200,255,.22),
      rgba(0,200,255,.05) 60%,
      transparent
    );
}

.login-logo{

  font-size:38px;

  font-weight:900;

  color:#FFF;

  letter-spacing:-1px;
}

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

.login-header{

  text-align:center;

  margin-bottom:22px;
}

.login-header h2{

  font-size:24px;

  font-weight:800;

  margin-bottom:8px;
}

.login-sub{

  color:rgba(255,255,255,.72);

  font-size:14px;

  line-height:1.6;

  max-width:300px;

  margin:0 auto;
}

/* =====================================================
   FORM
===================================================== */

#loginForm{

  display:flex;

  flex-direction:column;

  gap:14px;
}

.input-group{

  width:100%;
}

.input-group input{

  width:100%;

  height:54px;

  padding:0 16px;

  border-radius:16px;

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

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

  color:#FFF;

  font-size:15px;

  outline:none;

  transition:.25s;
}

.input-group input::placeholder{

  color:#64748B;
}

.input-group input:focus{

  border-color:
    rgba(0,200,255,.55);

  box-shadow:
    0 0 0 4px rgba(0,200,255,.08);
}

/* =====================================================
   BOTÃO
===================================================== */

#btnLogin{

  width:100%;

  height:56px;

  border:none;

  border-radius:16px;

  cursor:pointer;

  font-size:15px;

  font-weight:800;

  color:#03131A;

  background:
    linear-gradient(
      135deg,
      #00C8FF,
      #3B82F6
    );

  box-shadow:
    0 14px 30px rgba(0,200,255,.18);

  transition:.25s;
}

#btnLogin:hover{

  transform:
    translateY(-2px);
}

/* =====================================================
   STATUS
===================================================== */

.login-status{

  min-height:18px;

  text-align:center;

  font-size:12px;

  font-weight:600;
}

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

.login-footer{

  margin-top:14px;

  display:flex;

  justify-content:center;
}

.forgot-btn{

  border:none;

  background:none;

  cursor:pointer;

  color:#8CEBFF;

  font-size:13px;

  font-weight:700;

  padding:8px 12px;

  border-radius:12px;

  transition:.25s;
}

.forgot-btn:hover{

  background:
    rgba(0,200,255,.08);
}

/* =====================================================
   COPY
===================================================== */

.partner-copy{

  margin-top:18px;

  text-align:center;

  color:
    rgba(255,255,255,.85);

  font-size:13px;

  letter-spacing:.3px;
}

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

@media(max-width:768px){

  .login-card{

    max-width:360px;

    padding:28px 22px 22px;
  }

  .login-logo{

    font-size:32px;
  }

  .login-header h2{

    font-size:22px;
  }

  .login-sub{

    font-size:13px;
  }
}


/* =====================================================
   PATCH FINAL • LOGIN PARTNER COMPACTO
===================================================== */

/* REMOVE SCROLL TOTAL */

html,
body,
body.login-page,
.login-wrapper{
  overflow:hidden !important;
}

/* CENTRALIZAÇÃO */

.login-wrapper{

  width:100% !important;

  min-height:100vh !important;

  height:100vh !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:12px !important;
}

/* CARD MAIS COMPACTO */

.login-card{

  width:100% !important;

  max-width:380px !important;

  padding:26px 24px 20px !important;

  border-radius:26px !important;
}

/* BADGE */

.login-badge{

  padding:7px 12px !important;

  font-size:11px !important;

  margin-bottom:12px !important;
}

/* GLOW */

.login-logo-glow{

  width:52px !important;
  height:52px !important;

  margin:0 auto 8px !important;
}

/* LOGO */

.login-logo{

  font-size:30px !important;

  letter-spacing:-1px !important;
}

/* HEADER */

.login-header{

  margin-bottom:18px !important;
}

.login-header h2{

  font-size:20px !important;

  margin-bottom:6px !important;
}

.login-sub{

  font-size:13px !important;

  max-width:260px !important;

  line-height:1.5 !important;
}

/* FORM */

#loginForm{

  gap:12px !important;
}

/* INPUTS */

.input-group input{

  height:50px !important;

  font-size:14px !important;

  border-radius:14px !important;

  padding:0 15px !important;
}

/* BOTÃO */

#btnLogin{

  height:52px !important;

  border-radius:14px !important;

  font-size:15px !important;
}

/* STATUS */

.login-status{

  min-height:16px !important;

  font-size:12px !important;
}

/* ESQUECI SENHA */

.login-footer{

  margin-top:12px !important;
}

.forgot-btn{

  font-size:13px !important;
}

/* RODAPÉ */

.partner-copy{

  margin-top:14px !important;

  text-align:center !important;

  color:#FFFFFF !important;

  opacity:.92 !important;

  font-size:12px !important;

  font-weight:500 !important;

  letter-spacing:.2px !important;
}

/* NOTEBOOKS */

@media(max-height:850px){

  .login-card{

    max-width:370px !important;

    padding:24px 22px 18px !important;
  }

  .login-logo{

    font-size:28px !important;
  }

  .login-header h2{

    font-size:19px !important;
  }

  .input-group input{

    height:48px !important;
  }

  #btnLogin{

    height:50px !important;
  }
}

/* MOBILE */

@media(max-width:768px){

  .login-card{

    max-width:340px !important;

    padding:24px 20px 18px !important;

    border-radius:24px !important;
  }

  .login-logo{

    font-size:26px !important;
  }

  .login-header h2{

    font-size:18px !important;
  }

  .login-sub{

    font-size:12px !important;

    max-width:230px !important;
  }

  .input-group input{

    height:48px !important;
  }

  #btnLogin{

    height:50px !important;
  }

  .partner-copy{

    font-size:11px !important;
  }
}