/*So im just kinda reusing the login page sry for the confusion*/




  /* ["data-required"]{
    border: 1px solid red;
  } */


:root {
    --email-check-spinner : none;
    --buttons-flow: 'prev create';

    
}





#email_check_spinner {
    display : var(--email-check-spinner);
}




.heights-logo-login { width: clamp(200px,30%,300px); }



.MAIN-GRID { 
    grid-template-rows: 2% 93% 5%; 
    grid-template-areas:
    "top"
    "main"
    "footer";
    #c-top {
        grid-area: top;
        height:100%;
    }
    #c-create-account{
        grid-area: main;
        height:100%;

        #create-account-area{
            height:100%;
            display: -webkit-flex; /* Safari fallback */
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            /* background-image: var(--carbon_fiber); */
            background-color: var(--white-tinted);
            background-color: var(--primary-color);
        }


        
    }
    #c-footer{
        grid-area: footer;
    }

    

}

/* #c-create-account { margin-top: 30px; } */




#login-container { /*the entire creat account form*/
    /* height: 90%; */
    border-left: 1px solid var(--grey1);
    border-right: 1px solid var(--grey1);
    /* box-shadow: 1px 1px 1px black; */
    /* background-image: unset; */
    /* background-color: rgb(191, 185, 185); */
    background-color: var(--white-tinted);
     /* background-color: var(--halftone_yellow) !important; */
    
    height:100%;
    width:60rem;
    border-radius: 5%;
    display: grid;
    grid-template-rows: 10% 10% 70% 10%;

    #login-logo {
        
        margin-top: 10%;
        width: 100%;
        display: -webkit-flex; /* Safari fallback */
        display: flex;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-align-items: center;
        align-items: center;
        a {
            display: contents;
        }
        
    }

    #login-block,#login-buttons {
        width:80%;
        justify-self: center;
        
    }

    .login-block {
        width: 90%;
        justify-self: center;
        margin-top: 30px;
    }
    
}



/*Needs to go after login container*/
@media screen and (max-width: 480px) {
    #login-container {
      height: 100vh;
      width: 100vw;
      border-radius: unset;
      grid-template-rows: 11% 15% 64% 10%;

    }

    .MAIN-GRID {
      /* margin: 0 3vw 0 3vw; */
      display: unset;
      height: 100%;

    }

    #c-create-account{
      height: 100%;
      margin-top: 0px;
    }

    #c-footer {
      display: none;
    }
    #c-top {
        display: none;
    }
    .heights-logo-login{
        
    }

 

}









input { 
    border: 1px solid #bbb;
    padding: 0 0 0 10px;
    width:100%;
}


input,label,input[type="submit"] {
    margin-left: 0% !important;
    height: 40px;
    margin-bottom: 25px;
    border-radius: 5px;
    outline: 0;
    -moz-outline-style: none;
    width: 100%;
    font-size: 16px;
    padding: 0 0 0 10px;
}


.input-fields-container > div.input-field {
    /* outline: 1px solid black; */
    margin-bottom: 1rem;
    display: grid;
    grid-template-rows: 2rem 4rem 2.5rem;
}












/* ! -------------------------------------------------------------------------- */



/*All of them*/
#ca_input_container{
    height: 100%;
}

/* Each of them */
.input-fields-container {
    /* height: 100%; */
}



/* Individual steps */
/* ----------------------------------------------------- */

#ca_input_step1 {
    
}

#ca_input_step2 {

}
#ca_input_step3 > * {
    min-width: 0;
  }
  
  #ca_input_step3 sl-input,
  #ca_input_step3 sl-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #ca_input_step3 sl-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  
#ca_input_step3 {


    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr); /* Ensures 4 equal-height rows */
    width: 100%;
    column-gap: 1rem;
    grid-template-areas: 
    'first-name  first-name last-name last-name'
    'dob  dob  gender .'
    'address-1 address-1 address-2 address-2'
    'city city state zip'
    ;


    /*    (  ROW START / COL START / ROW END / COL END  )   */

    .first-name {
        grid-area: first-name ;
    }
    .last-name {
        grid-area: last-name;
    }
    
    .dob {
        grid-area:dob ;
    }
    
    .gender {
        grid-area: gender;
    }
    
    .address-1 {
        grid-area: address-1;
    }
    
    .address-2 {
        grid-area: address-2;
    }
    
    .city {
        grid-area: city;
    }
    
    .state {
        grid-area: state;
    }
    
    .zip {
        min-width: 0!important; /* very important for grid */
        width: 100%;
        grid-area: zip;
    }

    
}


#ca_input_step4 {
    
    /*
    contract_signature
    sms_auth
    email_auth
    
    */

    display: grid;
    height:95%;

    grid-template-rows: 45% 9% 15% 1% 15% 15%;


    #heights_contract_container::part(header){
        background-color: var(--primary-color);
        color:white;
        text-align: center;
        
    }
    #heights_contract_container::part(footer){
        background-color: var(--primary-color);
        color:white;
        text-align: center;
       
    }
    #heights_contract_container::part(body){

        background-color: #ffffff63;
        color:var(--primary-color);

    }


    .contract-card {
        h2 {
            font-family: 'Roboto';
            font-weight: bold;
           
        }
        p {
            font-family: 'Roboto';
         
        }
    }


    #auth_info {

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;

        #auth_info_header{
            display: flex;
            align-items: center;
            font-size:1.2em;
            font-weight: 700;
            color: #bbb;
            sl-icon{
            font-size: 1.2em;
            }


        }
        #auth_info_body{
            margin-top: 0.6em;
            font-size: 0.9em;
            width: 80%;
        }
        
    }

    


    


    


}

/* ---------------------------------------------------------*/



/* The div around each input */
sl-input.ca_input_item {
    position: relative; /* Make the container relative so ::after can be positioned within it */
    width: 100%; /* Ensure the container takes full width */
    box-shadow: rgba(0, 0, 0, 0.12) 5px 7px 3px;
}


.ca_input_item::after {
    content: "\f00c";
    font-size: 12px;
    font-family: var(--icon_font-fontawesome);
    position: absolute; /* Absolutely position the check icon */
    right: 1rem; /* Use rem units for right positioning, more scalable */
    top: 50%; /* Center vertically */
    
    display: none; 
}



/*Forward and backwards buttons on the account creation page*/
#login-buttons-ca {
    
    width:80%;
    justify-self: center;
    display: grid;
    height: min-content;
    height: 0rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: var(--buttons-flow);
    grid-template-rows: 1fr;
    gap: 4rem;

    sl-button::part(base) {
        font-size: var(--sl-font-size-x-large);
        /* line-height: var(--sl-line-height-looser); */
        line-height: 5rem;
        font-size: 2rem;
        /* height: 4rem; */
    }
    
    
    

    /* sl-button{
        font-family: "Public Sans" !important;
        height:100%;
        font-size: 16px;
        border-radius:10px;
        color:var(--primary-color);
        letter-spacing: 1px;
        background-color: #2f363d00;
    } */

    
    

    #container_previous_button{
        grid-area: prev;
        

        .previous-button {
            width: 100%;
            color:white;
        }
    }

    #container_next_button{
        grid-area: next;
        .next-button {
            width: 100%;
            border-width: 0px;
            color:white;
        }
    }

    #container_create_account_button{
        grid-area: create;
        .create-account-button {
     
            width: 100%;
            border-width: 0px;
            color:white;
        }
    }




    
}