body{
      direction: rtl;
}
@font-face {
    font-family: 'B Roya'; /* نام دلخواه برای فونت */
    src: url('font/BRoyaBd_0.ttf') format('truetype'); /* فرمت مدرن */
     
    font-weight: normal;
    font-style: normal;
  }
  
  :root{
    --main-font-size:1rem;
    --main-focus-color:blue;
    --main-click-color:blue;
    --main-font-family: 'B Roya';
    --main-color:rgb(148, 146, 146);
}

#sign-up{
    /* display: none; */
background-color: rgb(255, 255, 255);
width: 45%;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
font-family: var(--main-font-family);
margin-top: -50px;
margin-bottom: -50px;
/* overflow: auto; یا overflow: hidden; */

}
.disabled{
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}
.line-1 ,.line-2 div {
padding: 3px;
margin-right: 4px;
font-size: 22px;
font-family: var(--main-font-family);
font-weight: bold;
     
    }
    .line-3{
        font-size: 16px;
        font-family: var(--main-font-family);
        margin-right: 10px;
      
    }
    .line-2{
        display:flex;
        padding-right: 10px;
        align-items: center;
       
    }
    .line-2 span{
        margin-top: 7px;
        color: black !important;
    }
    #wellcom{
        display: none;
    }
 
#account-container{
    width: 800px;
    margin: 200px auto;
    /* height: 300px; */
    background-color: black;
    display: flex;
    flex-direction: row;
}
#enter{
    gap: 7px;
    width: 40%;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-items: center;
    /* justify-content: center; */
    align-items: center;
    margin-top: 100px;
    font-family: var(--main-font-family);
}

#enter img{
    width: 43px;
    height: 50px;
}
#enter button{
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    align-content: center;
    align-items: center;
    gap: 10px;
    background-color: red;
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bold;
    font-family: var(--main-font-family);
    justify-content: center;
    cursor: pointer;
border-radius: 5px;
}
#enter button img{
    height: 20px;
    width: 20px;
}
#enter a{
    text-decoration: none;
    color:rgb(255, 253, 253) ;
}
    #hesabKarbari ,#mobile  {
        text-align: center;
        font-family: var(--main-font-family);
        font-size: 22px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    #mobile  {
        font-size: 22px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    
    


.informations {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(3, auto); 
    padding: 0px;
    margin: 0px;
    gap: 1px; /* کمی gap را افزایش دادم تا بهتر دیده شود */
    box-sizing: border-box; /* برای پیش بینی پذیری بهتر */

}

.information {
display: block;
padding: 10px; 
box-sizing: border-box;
gap: 5px;
margin: 0px;
padding-top: 10px;
padding-bottom:0px ; 
box-sizing: border-box; /* برای پیش بینی پذیری بهتر */

}

.information span  {
    font-size: 0.6rem;
    line-height: 25px;
    font-family: var(--main-font-family);
    margin-bottom: 5px; 
}

.information input {
    color: black;
    font-size: var(--main-font-size);
    height: 35px;
    font-family: var(--main-font-family);
    border: none;
    border-bottom: 1px solid rgb(20, 19, 19);
    outline: none !important;
    width: 100%; 
    box-sizing: border-box; 
}

.information select {
    color:var(--main-color);
    font-size: 0.6rem;
  }
.information option{
    color: black;
    font-size: 1rem;
}
#mobile{
    color: red;
    font-size: 1rem;
}
.information ::placeholder{
    color: var(--main-color);
    font-size: 0.8rem;

}
.information input:hover {
    border-bottom: 2px solid rgb(20, 19, 19); /* یا رنگ دلخواه */
    outline: none !important;
}
.information input:focus{
    border-bottom: 2px solid rgb(10, 33, 233); /* یا رنگ دلخواه */
    outline: none !important;
}
.information select:focus{
    border-bottom: 2px solid rgb(10, 33, 233); /* یا رنگ دلخواه */
    outline: none !important; 
}
#provinence-select, #city-select ,#gender{
    width: 100%;
}
#provinence-select ,#city-select ,#gender{
    background-color: rgb(255, 255, 255);
    border: none;
    border-bottom: 1px solid rgb(20, 19, 19);
    font-family: var(--main-font-family);
    font-size: 1rem;
}
#provinence-select:hover {
    border-bottom: 2px solid rgb(20, 19, 19);;
}
#city-select:hover{
    border-bottom: 2px solid rgb(20, 19, 19);;
}
#gender:hover{
    border-bottom: 2px solid rgb(20, 19, 19);;
}
.spanUp{
    font-size: 0.8rem;
    font-family: var(--main-font-family) ;
    color: white;
  pointer-events: none;
  user-select: none;

}
.error{
    font-size: 0.8rem;
    font-family: var(--main-font-family) ;
    color:red;
    display: block;
  
}

.submit{
    display: flex;
    width: 100%;
justify-content: center;
margin-bottom: 30px;
margin-top: 20px;
}
#sendButton{
    color: aliceblue;
    background-color: rgb(198, 191, 191);
    width: 150px;
    font-size: 20px;
    border-radius: 0px;
    font-family: var(--main-font-family);
    border-radius: 5px;
    cursor: pointer;

}
.confirmation{
    font-family: var(--main-font-family);
    margin-top: 10px;
    padding: 10px;
    line-height: 20px;
    display: flex;
    gap: 5px;
    align-items: flex-start;
  
}
.confirmation div{
    text-align: center;
}
#provinence-select option{
    color: black;
}
/* .information input::placeholder{
    color: rgb(50, 49, 49);
} */
.option{
    color: rgb(184, 23, 23);
  
}
.form-row ::placeholder{
    color: brown !important;
}