/* Estilizações gerais  */

@import url("root.css");

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--BG-Purple-1);
    color: var(--Text-Alto-Contraste);

}


/* parte do topo da página */

.header{
    position: relative;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    background-color: var(--Solid-PURPLE-Normal); 
    color: var(--BG-Purple-1);
    width:100%;
    height: 8.313rem;
    padding-top: 1.625rem;
    padding-left: 2rem;
    padding-top: 1.25rem;
    margin-top: 0; /* sobre o fundo no celular */  
}

/* foto de perfil no home */

.photo{
    width: 80px !important;
    height: 80px !important; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 20px; 
   
}


#welcomeMessage {
  color: #333; /* Cor do texto */
  padding: 10px 50px; /* Espaçamento interno */
  border-radius: 5px; /* Bordas arredondadas */
  font-size: 20px; /* Tamanho da fonte */
  font-weight: 800;
  text-align: center;
}


#welcomeMessages span{
    background-color: #0E3D34;
}


/* frase Olá */

.welcome{ /* nome do usuário*/
    display: flex;    
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding-left: 3rem;
    
}

#bemvinde{
    color: var(--Text-PURPLE-Baixo-Contraste);
    width: 100%;
}



/* Parte principal do home */
.main_content{
    position: relative;
    margin-top: 20px;
    margin-bottom: 150px;
    width: 100%;
    
 
}


/* logo -frase*/
#vai{
    width: 50%;
    height: 6.175rem;
    flex-shrink: 0;
    margin-left: -20px;
   
}


/* frase superior de boas vindas */
.header h2{
    font-size: var(--titulo-size);
    font-weight: var(--titulo-weight-7);
    
}

/* ESTILIZAÇÃO DOS CARDS */

/* Titulo da sessão cards */
.carona-proxima{
    text-align: center;
    margin-top:1.563rem;
    font-size: .9rem;
}


/* estrutura do card */
.cards-section{
    margin-top: 40px;
    height: var(--Card-Card-Height);
    border-radius: var(--border-radius-xs);
    background: var(--Interactive-Components--Primary-Color-3 , #F5EEFF);
    width: 90%;
    height: 100%;
    margin: 30px auto 58px;
    padding: 20px auto;
 
}

/* situação: disponivel */
.situation{
    border: none; 
    left: 25px;
    top: -15px;
    padding: 8px 10px;
    border-radius: 5px;
    font-weight: 600;
    background-color: var(--Success-500-Normal);
    color: #ffff;
}


/* conteudo interno do card */
.content-group-card{
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    
}

/* div do botao mensagem */
.contato{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 18px;    
}

/* botao mensagem */
.contato button{
    padding: 10px;
    font-size: .9rem;
} 


    
.contato .mensagem{
    border-radius: var(--border-radius-xs);
    left: 125px;
    border: 2px solid var(--Solid-PURPLE-Normal);
    font-weight: 600;
    width: 180px;
    
}
        

.conteudo-card h3{
    font-size: 1rem;
    line-height: 20px;
}

.conteudo-card p{
    font-size: .8rem;
    line-height: 22px;
}


.contato-group-img .contato{
    width: 43px;
    height: 52px;
}



.contato-group-img p{
    color: var(--Secondary-Color-Texto-Alto-Contraste, var(--Secondary--Color-Text--Secondary-Color-12, #0E3D34));
   font-size: .65rem;
}



.img-card img{
    width: 73px;
    height: 73px;
    
}



/* ----POPUPS---- */

dialog::backdrop{
    background-color: var(--Text-Gray-Baixo-Contraste);
  }

  #modal, #modal2, #modal3, #modal4, #modal5, #modal6,#modal7,#modal8, #modal9, #modal10, #modal11, #abrirModalPerfil{
    border:1px solid var(--Borda-PURPLE-Forte); 
    background:var(--BG-Purple-2);
    padding: 10px;
    border-radius: 8px;
    left: 20px;
    top: 180px;
    width: 345px;
    position: fixed;
    
  }
  


  dialog .title{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--Solid-PURPLE-Normal);
    color: var(--BG-Purple-1);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
  }


  .title h3{
    padding: 10px;
    font-family: var(--titulo-size);
  }



   .formulario{
    display: flex;
    flex-direction: column;
    gap: 5px; 
    width: 100%;
      
   }

   .formulario label{
    font-size: .9rem;
    margin-top: 10px;
    display: flex;
    align-items: start;

   }


   .formulario label ~ input {
    width: 100%;
    background: none;
    font-size: .98rem;
    padding: 15px 45px 15px 20px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  

   /* Estilização do placeholder */
  .formulario input::placeholder {
    color: var(--text-color-soft);
  }


  /* estilização de foco */
  .formulario input:focus {
    border: 2px solid var(--Borda-PURPLE-Forte);
  }
  
  
/* PopUp */
textarea{
    width: 100%;
    background: none;
    font-size: .98rem;
    padding: 15px 45px 15px 20px;
    outline: none;
    border: 1px solid var( --Text-Gray-Alto-Contraste); 
    border-radius: 5px;
    margin-bottom: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

}


.formulario textarea::placeholder {
    color: var(--text-color-soft);
    font-family: "Poppins", sans-serif;
  }
 

.formulario textarea:focus {
    border: 2px solid var(--Borda-PURPLE-Forte);
  }
  
  
  .buttonDiv{
    display: flex;
    width: 100%;
    position: relative;
    justify-content:center;
    gap: 50px;
  }

  .btnDiv .mensagem{
    background-color: var(--Solid-PURPLE-Normal);
    color: var(--BG-Purple-1);
    border: none; 
}
 

  .button-contact{
    padding: 20px;
    width: 180px;
    border: none;
    border-radius: 5px;
    font-weight: var(--titulo-weight-7);
    background-color: var(--Solid-PURPLE-Normal);
    color: var(--BG-Purple-1);
  }


  .contato button{
    margin-right: 30px;
  }


  .back-contact{
    background-color: var(--BG-Purple-1);
    border: 2px solid var(--Solid-PURPLE-Normal);
    color: var(--Text-PURPLE-Alto-Constraste);
  }



  @media (min-width: 390px) {
    
   /* botao mensagem */
   .contato button{
    margin-right: 40px;
} 


}



@media (min-width: 450px) {

      /* botao mensagem */
.contato button{
    margin-right: 50px;
}
       

}