/* =====================================================
   iOS / Safari: evita auto-scale de texto
   + altura total
===================================================== */
html, body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

/* =====================================================
   VARIÁVEL GLOBAL DE TRANSPARÊNCIA (CONTROLE MASTER)
===================================================== */
:root{
  --login-transparencia: 0.02;
}

/* =====================================================
   FUNDO
===================================================== */
body.img{
  position: relative;
  min-height: 100vh;
}

body.img::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56.25rem 32.5rem at 50% 18%,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.58) 58%,
      rgba(0,0,0,.72) 100%
    );
}

.login-wrap,
.ftco-section{
  position: relative;
  z-index: 1;
}

/* =====================================================
   TIPOGRAFIA
===================================================== */
.h2, .h3, .h4, .h5 {
  line-height: 1.5;
  font-weight: 400;
  font-family: "Lato", Arial, sans-serif;
  color: #000;
}

/* ✅ títulos separados (evita h6 ficar gigante) */
.main-title{
  font-size: clamp(2.2rem, 5vw, 2.3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.sub-title{
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
}

.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.login-wrap {
  position: relative;
  color: rgba(255, 255, 255, 0.55);
}

/* =====================================================
   INPUTS
===================================================== */
.login-wrap .form-floating > label::after {
  background: transparent !important;
}

.login-wrap .form-floating > .form-control {
  height: 3.5rem;
  min-height: 3.5rem;
  background: transparent !important;
}

.login-wrap .form-floating > .form-control.form-underline {
  background: rgba(255,255,255,var(--login-transparencia)) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 2px solid rgba(255,255,255,.40) !important;
  border-radius: 0 !important;
  padding-left: .2rem !important;
  padding-right: 2.8rem !important;
  padding-top: 1.45rem !important;
  padding-bottom: .45rem !important;
  box-shadow: none !important;
  transition: .25s;
}

.login-wrap .form-floating > .form-control.form-underline:hover {
  background: rgba(255,255,255,calc(var(--login-transparencia) + 0.03)) !important;
  border-bottom-color: rgba(255,255,255,.60) !important;
}

.login-wrap .form-floating > .form-control.form-underline:focus {
  background: rgba(255,255,255,calc(var(--login-transparencia) + 0.06)) !important;
  border-bottom: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: none !important;
}

.login-wrap .form-floating > label {
  color: rgba(255, 255, 255, .92) !important;
  padding: .9rem .2rem !important;
}

.login-wrap .form-floating > .form-control.form-underline:focus ~ label,
.login-wrap .form-floating > .form-control.form-underline:not(:placeholder-shown) ~ label {
  color: #fff !important;
  transform: scale(.85) translateY(-.6rem) !important;
}

.field-icon{
  position:absolute;
  top:50%;
  right: .75rem;
  transform:translateY(-35%);
  color:#fff;
  cursor:pointer;
  opacity:.9;
  font-size: 1rem !important;
}
.field-icon:hover{ opacity:1; }

/* =====================================================
   CHECKBOX
===================================================== */
.checkbox-wrap {
  display: block;
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: .75rem;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
}

.checkbox-wrap input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
}

.checkmark:after {
  content: "\f0c8";
  font-family: "FontAwesome";
  position: absolute;
  color: #fff;
  font-size: 1.25rem;
  margin-top: -0.25rem;
  transition: .25s;
}

.checkbox-wrap input:checked ~ .checkmark:after {
  content: "\f14a";
}

/* =====================================================
   BOTÕES
===================================================== */

/* ✅ se você NÃO quiser mexer no HTML, aplique no btn-outline-light */
.btn-outline-light,
.btn-login-link{
  text-align: left !important;
  justify-content: flex-start !important;
  /*background: rgba(255,255,255,.78) !important;*/
  border: 1px solid rgba(255,255,255,.78) !important;
  /*color: #212529 !important;*/
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600 !important;
  font-size: .875rem !important;
  box-shadow: 0 .625rem 1.625rem rgba(0,0,0,.16);
}

.btn-outline-light:hover,
.btn-login-link:hover{
  background: #fff !important;
  border-color: #fff !important;
}

/* =====================================================
   FRASE RODAPÉ
===================================================== */
.frase {
  position: fixed;
  bottom: 1rem;
  font-size: .75rem;
  color: #bbb;
  width: 100%;
  text-align:center;
}

/* =====================================================
   AUTOFILL FIX
===================================================== */
.login-wrap input.form-control.form-underline:-webkit-autofill{
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 0 0 1000px rgba(255,255,255,var(--login-transparencia)) inset!important;
}

/* =====================================================
   🚀 CENTRALIZA + IMPEDE ARRASTE DO BROWSER
===================================================== */
body{
  overflow:hidden;
  overscroll-behavior-y:none;
}

.ftco-section{
  min-height:100vh;
  min-height:100dvh;

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

  padding:0!important;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.ftco-section > .container{
  width:100%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}