/* importer le fichier css inital pour appliquer ces styles dans ce fichier */
@import url('./initial.css'); 

/* Password input wrapper styles */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 45px;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.password-toggle:hover {
    color: var(--primary-color);
    background: rgba(0, 123, 255, 0.1);
}

.password-toggle i {
    font-size: 16px;
}

.center-container
{
    width: 100vw;
    height: fit-content;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* font-size: 18px; */
    overflow-x: hidden;
}
.login_form
{
    width: 70%;
    height: 75vh;
    min-height: 480px;
    min-width: 850px;
    /* background-color: var(--primary-color); */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 1px var(--primary-color);
    border-radius: 15px!important;
    /* gap: 25px; */
}
.login_form.boutique_form
{
    width: 60%;
    height: fit-content;
    border:1px solid var(--primary-color);
    margin-top: 20px;
}
.home-link
{
    display: none!important;
}
.home-link a>img
{
    height: 80px;
    width: 100px;
    transform: scale(3.5);
    /* object-fit: contain; */
    object-position:center;
    margin: auto;
}
.login_form .img_block
{
    width: 30%;
    height: 100%;
    min-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    position: relative;

}
.survole-login
{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: .8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 25px;
    color: white;
    padding: 25px;
}
.survole-login .logo-img
{
   width: 130px;
   height: 130px;
   transform: scale(2.5);
   /* background-color: red; */
}
/* .login_form .img_block img
{
    width: 70%;
    height: 70%;
} */
.login_form .form_block
{
     width:60%;
     height:100%;
     min-width: 400px;
     /* background-color:#fff; */
     padding:25px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 20px;
}

.header_profil
{
    color: var(--primary-color);
}
.login_form .form_block form , .login_form .form_block .header
{
    width: 95%;
    height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  /* margin-top: 10px; */
}
.login_form .form_block .header
{
    gap: 10px;
}
.title-require
{
    width: 100%;
    text-align: left;
    font-size: 16px;
}
.title-require.hidden, p.hidden
{
    display: none;
}
.login_form .form_block form , .login_form .form_block .header.boutique
{
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.login_form .form_block .header>h3{
    font-size: 25px;
    font-weight: bold;
}
.form_block.form_boutique
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.login_form .form_block .header>h3>strong{
    font-style: normal;
    color:var(--primary-color);
}
.login_form .form_block form .input
{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
  min-width: 250px;
}
.login_form .form_block form .input input,.login_form .form_block form .input> select,.login_form .form_block form .input> textarea
{
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #dad8d8f1;
  outline: none;
  text-indent: 25px;
  font-size: 18px;
}
.login_form .form_block form .input> input[type='submit'] , .login_form .form_block form .input> input[type='button']
{
    background-color: var(--primary-color);
    color: #fff;
    margin-top: 15px;
    cursor: pointer;
}
.login_form .form_block form .input> input[type='submit']:hover,.login_form .form_block form .input> input[type='button']:hover
{
    transition: background 0.5s ease-in;
    background-color: var(--primary-hover-color);
}
.login_form .form_block form .input> span
{
    margin-top: 5px;
}
.login_form .form_block form .input> span>a
{
    text-decoration: none;
    color: var(--primary-color);
    margin-left: 10px;
}
.form_block.form_boutique
{
    width: 100%;
    gap: 15px!important;
}
.input-btn
{
    width: 100%!important;
}
.input.input-boutique
{
    width: 48%!important;
    gap: 5px!important;
}
.input.input-boutique
{
    width: 48%;
}
.input.hidden,.flex.hidden,.ligne.hidden,.parrainage-taks.hidden
{
    display: none!important;
}
.check
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.politique
{
    width: 80vw;
    text-align: justify;
}
.check input[type='radio']
{
    width: 25px;
    height: 25px;
    border: 1px solid var(--outline-color);
    cursor: pointer;
}
.parrainage-taks
{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}
.parrainage-taks p
{
    width: 100%;
}
.input-radio
{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 40px;
}

form.formulaire_boutique
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px!important;
    padding: 25px;
}
.form_boutique
{
    width: 100%;
    gap: 25px!important;
}
.error
{
    color:   var(--danger-color);
}
.text-color
{
    color: var(--success-color);
}
/* definir la mise en forme de tout les boutons du projet */
.btn
{
    padding: 15px 25px;
    background-color: var(--primary-hover-color);
    color: #fff;
    margin-top: 15px;
    border-radius: var(--border-raduis);
    cursor: pointer;
}
/* definir les proprietes lors du survole du boutton  */
.btn:hover
{
    transition: transform 0.2s ease-in;
    background-color: var(--primary-hover-color);
    transform: scale(1.05);
}
.img_login
{
    width: 100%;
    height: 100%!important;
}
.formulaire-boutique
{
    width: 100%;
}
.flex
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 30px; */
    flex-wrap: wrap;
}
/* Alert */
 .alert {
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 5px;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .alert.success {
        background: rgba(10, 221, 60, 0.1);
        color: var(--success-color);
        border: 1px solid rgba(10, 221, 60, 0.3);
    }

    .alert.danger {
        background: rgba(244, 67, 54, 0.1);
        color: var(--danger-color);
        border: 1px solid rgba(244, 67, 54, 0.3);
    }

.alert.warning {
        background: rgba(230, 158, 43,0.1);
        color: var(--warning-color);
        border: 1px solid rgba(244, 67, 54, 0.3);
}
  /*Confirmation du contrat de licence*/
.ligne
{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
#confirmeContratLicence
{
    width: 40px;
    height: 20px;
    cursor: pointer;
}
.input .error-message
{
   color: var(--danger-color)!important;
   font-size: 14px;
} 
/* .input span.erreur
{
    font-size: 12px!important;
   color: var( --background-color)!important;
}  */
.error-message-code 
{
    color: var(--danger-color)!important;
   font-size: 14px;
}
.error-message-code.danger
{
    color: var(--danger-color)!important;
   font-size: 14px;
}
.error-message-code.success 
{
    color: var(--success-color)!important;
}
.error-message.success
{
    color: var(--success-color)!important;
}
.input .success
{
    color: var(--success-color)!important;
}

sup
{
  font-size: 14px;
  color: var(  --danger-color);
}  
/* gerer des formulaires */
@media screen and (max-width:1200px) {

    .login_form.boutique_form
    {
      width: 80%;
    }

}

/* gerer des formulaires */
@media screen and (max-width:900px) {
    .center-container
    {
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin-top: 20px;
        gap: 0;
    }
    .login_form
    {
        margin-top: 0;
    }
    .home-link
        {
            display: block!important;
            width: 100%;
        }
        .home-link a
        {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
    .center-container
    {
        height: fit-content;
    }
    .login_form .form_block
    {
        gap: 15px;
    }
    .login_form .img_block  
    {
        display: none;
    }
    .login_form
    {
        min-width: 300px;
        height: fit-content!important;
        margin-top: 50px;
        border: 1px solid var(--primary-color);
    }
    .login_form.boutique_form
    {
      width: 90%;
    }
    .login_form
    {
        width: 80vw;
        height: fit-content;
        min-width: 300px;
        justify-content: center;
        background-color: transparent;
    }
    .login_form .form_block
    {
        width: 90%;
        min-width: 300px;
        padding: 10px;
    }
    .login_form .form_block form 
    {
        width: 90%;
        padding: 25px 0px;
    }
    .login_form .form_block form , .login_form .form_block .header
    {
        justify-content: center;
        align-items: center;
    }
    .form_block.form_boutique
    {
        gap: 10px!important;
    }
    .link_boutique
    {
        font-size: 18px;
    }
}
@media (max-width:800px) {
    .parrainage-taks
    {
        flex-wrap: wrap;
    }
    .parrainage-taks p
    {
        width: 90%;
    }
    .input-radio
    {
        width: 90%;
        justify-content: center;
    }
    .flex
    {
         flex-wrap: wrap!important;
    }
    .input.input-boutique
    {
        width: 100%!important;
    }
}
@media (max-width:550px) {

   .center-container
   {
    padding: 15px;
   }
   .ligne>span
   {
    font-size: 1rem;
   }
   .login_form 
   {
    width: 90vw;
   }
   .login_form.boutique_form
   {
     width: 98%;
   }
    .login_form .form_block
    {
        gap: 25px;
    }
    .txt-small
    {
        font-size: 13px;
    } 
    .link_boutique
    {
        font-size: 16px;
    }
    .login_form .form_block form , .login_form .form_block .header
    {
        width: 100%;
    }
    .login_form .form_block
    {
        width: 100%;
    }
    .login_form .form_block form 
    {
        width: 100%;
    }
}