/* ═══════════════════════════════════════════════════════════
   FITNESS CHECKIN — TELA DE LOGIN
   Layout de tela dividida: marca a esquerda, formulario a direita.

   Este arquivo vive na pagina do WordPress, FORA do shadow DOM que protege
   o app — se o JS falhar, o usuario ainda precisa conseguir entrar. Como o
   tema alcanca cada elemento daqui, toda propriedade visual leva !important:
   um tema com `form{background:lime!important}` reescreve o card inteiro.
   Nao e preciosismo, foi o que o teste com tema hostil exigiu.
   ═══════════════════════════════════════════════════════════ */

#fc-login {
  /* Paleta dourada, so do login. O app usa verde. */
  --fcl-gold: #FFC629;
  --fcl-gold-soft: #D9A441;
  --fcl-ink: #1A1206;
  --fcl-bg-esq: #0A0A0A;
  --fcl-bg-dir: #141414;
  --fcl-campo: #0D0D0D;
  --fcl-texto: #F2F2F0;
  --fcl-texto2: #9C9C96;
  --fcl-borda: #262626;

  display: flex !important;
  align-items: stretch !important;
  min-height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--fcl-bg-dir) !important;
  color: var(--fcl-texto) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  overflow: hidden !important;

  /* Sangra para a largura toda, escapando do container do tema. */
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

#fc-login *, #fc-login *::before, #fc-login *::after { box-sizing: border-box !important; }

/* ── PAINEL ESQUERDO (marca) ── */
#fc-login .fcl-marca {
  flex: 1 1 51% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 56px 40px !important;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.09) 0%, transparent 55%),
    radial-gradient(80% 70% at 15% 88%, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(145deg, #121212 0%, #0A0A0A 55%, #050505 100%) !important;
  overflow: hidden !important;
}
/* Losangos de fundo, discretos, ecoando a marca. */
#fc-login .fcl-marca::before,
#fc-login .fcl-marca::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 18% !important;
  transform: rotate(45deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.055), transparent) !important;
  pointer-events: none !important;
}
#fc-login .fcl-marca::before {
  width: 340px !important; height: 340px !important;
  top: -110px !important; right: -80px !important;
}
#fc-login .fcl-marca::after {
  width: 240px !important; height: 240px !important;
  bottom: -90px !important; left: -70px !important;
}

#fc-login .fcl-marca-conteudo {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  margin: auto 0 !important;
}
#fc-login .fcl-marca-logo { width: 132px !important; height: 132px !important; flex: none !important; }
#fc-login .fcl-marca-nome {
  display: block !important;
  font-size: 62px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0 !important; padding: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
  background: none !important;
}

#fc-login .fcl-rodape {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--fcl-texto2) !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important;
  text-transform: none !important;
}

/* ── PAINEL DIREITO (formulario) ── */
#fc-login .fcl-form-area {
  flex: 1 1 49% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 56px 40px !important;
  background: var(--fcl-bg-dir) !important;
}

#fc-login form.fcl-form {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

#fc-login .fcl-form-logo {
  width: 128px !important; height: 128px !important;
  display: block !important;
  margin: 0 auto 46px !important;
}

#fc-login .fcl-campo { display: block !important; margin: 0 0 22px !important; }
#fc-login .fcl-campo > span {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--fcl-texto) !important;
  margin: 0 0 9px !important; padding: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
  background: none !important;
  line-height: 1.4 !important;
}
#fc-login .fcl-campo input {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  background: var(--fcl-campo) !important;
  border: 1px solid var(--fcl-borda) !important;
  border-radius: 8px !important;
  color: var(--fcl-texto) !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  box-shadow: none !important;
  outline: none !important;
}
#fc-login .fcl-campo input:focus {
  border-color: var(--fcl-gold-soft) !important;
  box-shadow: 0 0 0 3px rgba(255,198,41,.14) !important;
  outline: none !important;
}
/* Campo de senha com o botao de revelar embutido */
#fc-login .fcl-senha { position: relative !important; }
#fc-login .fcl-senha input { padding-right: 48px !important; }
#fc-login .fcl-olho {
  position: absolute !important;
  right: 6px !important; bottom: 0 !important;
  width: 42px !important; height: 50px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
  color: var(--fcl-texto2) !important;
  cursor: pointer !important;
}
#fc-login .fcl-olho:hover { color: var(--fcl-gold) !important; }
#fc-login .fcl-olho svg { width: 19px !important; height: 19px !important; display: block !important; }

#fc-login .fcl-lembrar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: var(--fcl-texto) !important;
  cursor: pointer !important;
  background: none !important;
  text-transform: none !important;
  font-family: inherit !important;
  font-weight: 400 !important;
}
#fc-login .fcl-lembrar input {
  width: 17px !important; height: 17px !important;
  min-height: 0 !important; flex: none !important;
  margin: 0 !important; padding: 0 !important;
  accent-color: #D9A441;
  border-radius: 3px !important;
  cursor: pointer !important;
}
#fc-login .fcl-lembrar span {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--fcl-texto) !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: none !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1.4 !important;
}

#fc-login .fcl-btn {
  display: block !important;
  width: 190px !important;
  margin: 0 auto 26px !important;
  padding: 13px 20px !important;
  background: var(--fcl-gold-soft) !important;
  color: var(--fcl-ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
  height: auto !important; min-height: 0 !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .15s ease !important;
}
#fc-login .fcl-btn:hover { background: var(--fcl-gold) !important; }
#fc-login .fcl-btn:active { transform: translateY(1px) !important; }

#fc-login .fcl-link {
  display: block !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--fcl-gold-soft) !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
#fc-login .fcl-link:hover { color: var(--fcl-gold) !important; text-decoration: underline !important; }

#fc-login .fcl-aviso {
  margin: 0 0 22px !important;
  padding: 11px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  background: #1E1E1E !important;
  color: var(--fcl-texto2) !important;
  border: 1px solid var(--fcl-borda) !important;
  text-transform: none !important;
  font-family: inherit !important;
}
#fc-login .fcl-aviso.erro {
  background: rgba(224,90,64,.12) !important;
  color: #E8705A !important;
  border-color: rgba(224,90,64,.42) !important;
}

/* ── TABLET / MOBILE ── */
@media (max-width: 900px) {
  #fc-login { min-height: 0 !important; }
  #fc-login .fcl-marca {
    flex: none !important;
    padding: 34px 24px !important;
  }
  #fc-login { flex-direction: column !important; }
  #fc-login .fcl-marca-conteudo { gap: 18px !important; margin: 0 !important; }
  #fc-login .fcl-marca-logo { width: 74px !important; height: 74px !important; }
  #fc-login .fcl-marca-nome { font-size: 36px !important; }
  #fc-login .fcl-rodape { display: none !important; }
  #fc-login .fcl-marca::before, #fc-login .fcl-marca::after { display: none !important; }
  #fc-login .fcl-form-area { padding: 34px 24px 48px !important; }
  #fc-login .fcl-form-logo { display: none !important; }
}

@media (max-width: 480px) {
  #fc-login .fcl-marca-nome { font-size: 30px !important; }
  #fc-login .fcl-btn { width: 100% !important; }
}