html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: Arial, sans-serif;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
		

        /* =====================================================
           FUNDO
           ===================================================== */
		   
        .bg-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*O imagem do fundo está na raiz*/
            background-image: url('../../Background.jpeg');
            background-size: cover;
            background-position: center top;
            z-index: 1;
        }
		

        /* =====================================================
           LOGO FIXO NO CANTO SUPERIOR ESQUERDO
           ===================================================== */
		   
        .top-left-logo {
            position: fixed;
            top: 20px;
            left: 3%;
            width: 15%;
            height: auto;
            z-index: 10;
        }

        .top-left-logo img {
            width: 100%;
            height: auto;
            display: block;
        }
		

        /* =====================================================
           CARD DE REGISTO CENTRADO
           ===================================================== */
		   
        .register-card {
            position: absolute; 
            top: 50%;           /* Puxa 50% a partir do topo */
            left: 50%;          /* Puxa 50% a partir da esquerda */
            transform: translate(-50%, -50%); /* Garante o centro exato do próprio card */
            width: 90%;
            max-width: 420px;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            text-align: center;
            overflow: hidden;
            box-sizing: border-box;
            z-index: 10;
        }
		
		/* CARD DE LOGIN CENTRADO (igual ao register-card)*/
    .login-card {
      position: absolute; /* Altera de relative para absolute */
      top: 50%;           /* Puxa 50% a partir do topo */
      left: 50%;          /* Puxa 50% a partir da esquerda */
      transform: translate(-50%, -50%); /* Garante o centro exato do próprio card */
  
      width: 90%;
      max-width: 320px;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      text-align: center;
      overflow: hidden;
      box-sizing: border-box;
	  z-index: 10;        /* Força o card a ficar à frente da imagem de fundo */
    }

	
        /* =====================================================
           EFEITO DO CARD
           ===================================================== */
		   
        .register-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--beige);
            backdrop-filter: blur(3px) saturate(160%);
            -webkit-backdrop-filter: blur(3px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            z-index: -1;
        }
		/* Cartão de Login (igual ao register-card::before)*/
    .login-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--beige);
      backdrop-filter: blur(3px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(3px) saturate(160%) !important;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      z-index: -1;
    }
		

        /* =====================================================
           TÍTULO
           ===================================================== */
		   
        .register-card h2 {
            margin-top: 0;
            margin-bottom: 25px;
            color: var(--brown);
        }
		/*Igual ao register-car h2)*/
		.login-card h2 {
      margin-top: 0;
      color: var(--brown);
      margin-bottom: 25px;
    }
	/*Paragrafo de texto*/
	.register-card p {
        color: var(--brown);
    }
		

        /* =====================================================
           MENSAGENS
           ===================================================== */
		   
        .msg-box {
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 14px;
            text-align: left;
        }

        .msg-erro {
            background-color: var(--red_light);
            border: 1px solid var(--red);
            color: var(--red);
        }

        .msg-sucesso {
            background-color: var(--green_light);
            border: 1px solid #28a745;
            color: var(--green);
        }
		/*diferente*/
		.error-msg {
      background-color: rgba(220, 53, 69, 0.2);
      border: 1px solid #dc3545;
      color: #ff808b;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 15px;
      font-size: 14px;
      text-align: left;
    }
		

        /* =====================================================
           INPUTS
           ===================================================== */
		/* Caixa de texto*/
        .input-group {
			margin-bottom: 15px;
            text-align: left;
        }
		/* Caixa de texto no signup */
.input-group-signup {
    margin-bottom: 15px;
    text-align: left;
}

/* Container do grupo - agora comporta-se como texto fluído */
.checkbox-group .checkbox-label {
    display: inline;       /* Remove o comportamento de bloco/flex */
    cursor: pointer;
}

/* Customização para que a checkbox se comporte como uma letra grande */
.checkbox-group .checkbox-input {
    width: 18px;                 /* Tamanho ligeiramente maior */
    height: 18px;                /* Tamanho ligeiramente maior */
    display: inline-block;       /* Permite definir tamanho mantendo o comportamento de texto */
    vertical-align: text-bottom; /* Alinha a base da checkbox com a base das letras */
    margin: 0 6px 0 0;           /* 0 à esquerda para eliminar a margem exagerada, e 6px à direita para afastar do texto */
    padding: 0;
    cursor: pointer;
}

/* O texto continua inline logo a seguir à checkbox */
.checkbox-group .checkbox-text {
    display: inline;
    font-size: 14px;             /* Ajuste conforme o design do seu site */
}


		/* Area de escrita*/
        .input-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            background: var(--brown);
            color: var(--white);
            font-size: 15px;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s;
        }
		
		/* Texto de separação entre temas no signup*/
        .line-text-signup {
			width: 100%;
            padding: 9px;
			margin-left: 12px;
			margin-top: -8px;
			text-align: left;
        }
		.line-text-signup a {
			color: var(--brown);
            font-size: 15px;
			font-weight: bold;
        }
		/* contentor que inclui 2 campos no signup*/
        .input-group-signup-2coll {
            /*margin-bottom: 15px;*/
			text-align: left;
            display: flex;        /* filhos passam a ficar lado a lado */
            gap: 50px;             /* espaço entre os dois campos */
        }
		
		/* Area de escrita no signup*/
        .input-group-signup input {
			width: 91%;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            background: var(--brown);
            color: var(--white);
            font-size: 15px;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s;
        }
		
		.input-group-signup select {
			width: 91%; 
			padding: 12px; 
			border-radius: 8px; 
			border: 1px solid rgba(255, 255, 255, 0.3);
			background: var(--brown); 
			color: var(--white);
			font-size: 15px;
			font-family: inherit;
			box-sizing: border-box;
            outline: none;
		}
		
		.flex-group {
			background: transparent;
			border: 1px solid var(--brown);
			/*border-color: var(--border_selected);*/
			text-align: left;
            display: flex;        /* filhos passam a ficar lado a lado */
            gap: 0px;
		}
		.block-group {
			background: transparent;
			text-align: left;
        }


        /* Focus */
		/* Cor quando obtem o focus para escrever */
        .input-group input:focus {
            border-color: var(--border_selected);
            background: var(--brown-light);
        }
		/* Cor quando obtem o focus para escrever no signup */
        .input-group-signup input:focus {
            border-color: var(--border_selected);
            background: var(--brown-light);
        }
		/* Cor quando obtem o focus para selecionar no signup */
        .input-group-signup select:focus {
            border-color: var(--border_selected);
            background: var(--brown-light);
        }

		
        /* Placeholder */
        /* Cor do texto pré-preenchido */
        .input-group input::placeholder {
            color: var(--color_placeholder);
        }
		/* Cor do texto pré-preenchido */
        .input-group-signup input::placeholder {
            /*opacity: var(--opacity_placeholder);*/
			color: var(--color_placeholder);
        }
		/* Cor do texto pré-preenchido */
        .input-group-signup select:invalid {
		    color: var(--color_placeholder);
		}
		/* Cor da data quando não está preenchida (Placeholder) */
       .input-group-signup input:invalid {
           color: var(--color_placeholder);
        }
		/* Empurra o ícone do calendário totalmente para a direita */
       .input-group-signup input#date_of_birth::-webkit-calendar-picker-indicator {
           margin-left: auto;
           margin-right: -40px; /* Ajusta à borda direita */
           cursor: pointer;
	       filter: invert(1);
        }

		
		/* =====================================================
        PASSWORD - MOSTRAR / ESCONDER
        ===================================================== */

       .wrapper {
           position: relative;
           width: 100%;
        }

       .wrapper input {
           padding-right: 48px;
        }

       .password-toggle {
          position: absolute;
          top: 50%;
          right: 35px;
          transform: translateY(-50%);
          width: 32px;
          height: 32px;
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--white);
          font-size: 18px;
		  opacity: var(--opacity_placeholder);
          line-height: 1;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .password-toggle:hover {
           color: var(--white);
        }
		
		/* =====================================================
           BOTÃO
           ===================================================== */
        /* Botao submit */
        .btn-submit {
			/*width: 100%;*/
            width: 91%;
            padding: 12px;
            background-color: var(--brown);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition:
                background-color 0.2s;
            box-shadow:
                0 4px 15px rgba(0, 0, 0, 0.2);
            margin-top: 15px;
        }


        /* Hover */
        /* Cor do botao submit quando passa o cursor por cima */
        .btn-submit:hover {
            background-color: var(--brown-dark);
        }


    /* =====================================================
    LINK INFERIOR
    ===================================================== */
    /* Texto do link de recuperacao de password */
    .footer-links {
      margin-top: 20px;
      font-size: 15px;
    }
	
    /* Cor do texto do link de recuperacao de password */
    .footer-links a {
      color: var(--brown);
      text-decoration: underline;
      transition: color 0.2s;
    }
	
    /* Cor do texto do link de recuperacao de password - quando passao o cursor*/
    .footer-links a:hover {
      color: var(--brown-dark);
      text-decoration: underline;
	  font-weight: bold;
    }