/**
* @license
*
* Font Family: Clash Display
* Designed by: Indian Type Foundry
* URL: https://www.fontshare.com/fonts/clash-display
* © 2025 Indian Type Foundry
*
* Clash Display Extralight 
* Clash Display Light 
* Clash Display Regular 
* Clash Display Medium 
* Clash Display Semibold 
* Clash Display Bold 
* Clash Display Variable (Variable font)

*
*/
@font-face {
  font-family: 'ClashDisplay-Extralight';
  src: url('../fonts/clashdisplay/ClashDisplay-Extralight.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Extralight.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Light';
  src: url('../fonts/clashdisplay/ClashDisplay-Light.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Light.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Regular';
  src: url('../fonts/clashdisplay/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Regular.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Medium';
  src: url('../fonts/clashdisplay/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Medium.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('../fonts/clashdisplay/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Semibold.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('../fonts/clashdisplay/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Bold.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'ClashDisplay-Variable';
  src: url('../fonts/clashdisplay/ClashDisplay-Variable.woff2') format('woff2'),
       url('../fonts/clashdisplay/ClashDisplay-Variable.woff') format('woff'),
       url('../fonts/clashdisplay/ClashDisplay-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* Fonte padrão */
body {
    font-family: 'ClashDisplay-Regular', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #061111;
    color: #fff;
    min-height: 100vh;    /* ocupa ao menos a tela inteira */
    display: block;       /* remove o flex fixo */
}

/* Container principal */
.page-container {
  display: flex;
  min-height: 100vh;
  background: #0d0f0f;
}

/* Coluna esquerda */
.login-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;  /* fica no topo */
  padding: 40px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  color: #fff;
   margin: auto;
}

/* Coluna direita */
.login-image {
  flex: 0 0 50%;        /* ocupa no máximo metade da tela */
  max-width: 50%;       /* garante que nunca passa disso */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;        /* reduz padding para não somar largura extra */
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-sizing: border-box;
}

.login-image img {
  width: 95%;           /* ocupa até 95% da largura da coluna */
  max-height: 90vh;     /* nunca passa da altura visível */
  object-fit: contain;  /* mantém proporção */
  border-radius: 12px;
}

/* Logo */
.logo img {
    width: 196px;
    margin-bottom: 30px;
}

/* Campos de entrada */
.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 14px;
    background: #1a1c1d;
    border: 1px solid #8BFF4C;
    border-radius: 6px;
    font-size: 15px;
    color: #fff;
    outline: none;
}

.input-group input::placeholder {
    color: #aaa;
}

/* Ícone de senha */
.password-group {
    display: flex;
    align-items: center;
}

.password-group .toggle-password {
    position: absolute;
    right: 12px;
    cursor: pointer;
    color: #aaa;
}

/* Checkbox lembrar */
.remember {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
}

.remember input {
    accent-color: #8BFF4C;
    margin-right: 6px;
}

/* Botão login */
.btn-login {
    width: 100%;
    background: #8BFF4C;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-login:hover {
    background: #6fd340;
}

/* Divider */
.divider {
margin: 20px 0;
border-top: 1px solid #333;
}

/* Botão Google */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #2b2b2b;
    color: #fff;
    font-size: 15px;
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-google img {
    width: 20px;
    height: 20px;
}

/* Cadastro */
.signup {
    margin-top: 20px;
    font-size: 14px;
}

.signup a {
    color: #8BFF4C;
    text-decoration: none;
    font-weight: bold;
}

.signup a:hover {
    text-decoration: underline;
}

/* Rodapé */
footer {
    margin-top: 25px;
    font-size: 12px;
    color: #777;
}

.recover span {
  color: #8ff75e;
  font-weight: bold;
}

/* Responsividade */
@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
  }

  .login-image {
    display: none;
  }

  .login-container {
    padding: 20px;
  }
}