.welcomeFields input,
.recover-fields input{
    background-color: rgb(var(--color-white));
    color: rgb(var(--color-grey)) !important;
    border: 1px solid transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill{
    -webkit-text-fill-color: rgb(var(--color-grey)) !important;
    border-color: rgb(var(--color-white));
}

.welcomeFields input::placeholder,
.recover-fields input::placeholder{
    color: rgb(var(--color-light-grey)) !important;
}

.signin-form button,
.sign-in-register,
.register-login,
.register-form button,
.recover-form button{
    max-width: unset;
    text-decoration: none;
    text-transform: uppercase;
}

.welcomeFields input:focus,
.welcomeFields input:focus-visible,
.recover-fields input:focus,
.recover-fields input:focus-visible{
    border-color: rgb(var(--color-grey));
    box-shadow: none;
    outline: none;
}

.old-website {
    padding: 3.5rem 2.5rem;
    background: #FFEEDF;
    margin-inline: auto;
    text-align: center;
}

.form-width{
    max-width: 505px;
    margin-inline: auto;
}
#AAI-customeractivate *{
    font-family: var(--text-font-family-condensed);
}

#AAI-title{
    font-family: var(--text-font-neue-md);
    font-weight: var(--heading-font-weight-ltd);
    font-style: var(--heading-font-style-ltd);
    letter-spacing: var(--heading-letter-spacing-ltd);
    text-transform: var(--heading-text-transform-ltd);
    font-size: 30px;
    color: rgb(var(--color-grey));
    line-height: 2.5rem;
}

#AAI-description {
    font-weight: var(--text-font-weight-ltd);
    font-style: var(--text-font-style-ltd);
    font-size: 16px;
    color: rgb(var(--color-grey));
    line-height: 18px;
    margin: 25px 0;
}

#AAI-buttontext a {
    color: #524F4F;
    font-size: 16px;
    font-weight: var(--text-font-weight-ltd);
    font-style: var(--text-font-style-ltd);
    letter-spacing: var(--text-letter-spacing-ltd);
    text-decoration: underline;
    text-underline-offset: 4px;
}

#AAI-buttontext a:hover{
        color: #524f4f80;
        transition: color .3s ease-in-out;
}

.customer-form__box-inner h3{
    font-weight: 500;
}

#AAI-modal {
    background-color: #FFEEDF !important;
    width: calc(100% - 30px) !important;
    max-width: 505px !important;
}

#AAI-customeractivate #AAI-modal{
    width: calc(100% - 30px) !important;
}
#AAI-instructions{
    font-size: 16px;
}

#AAI_email {
    width: 100%;
    height: 5.4rem;
    background: rgb(var(--color-white));
    border-width: 1px;
    padding-inline-start: var(--input-padding-inline);
    padding-inline-end: var(--input-padding-inline);
    font-size: 14px;
    margin: 2rem 0 1rem;
    font-family: var(--text-font-neue-md);
    font-size: 16px;
}

#AAI_email::placeholder{
    color: rgb(var(--color-light-grey)) !important;
}

#AAI-submitbtn,
#AAI-cancel,
#AAI-close{
    appearance: none;
    border-radius: var(--rounded-button);
    background-color: rgb(var(--button-background));
    color: rgb(var(--button-text-color));
    text-align: center;
    line-height: 1.6;
    transition: background-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out;
    display: flex;
    position: relative;
    border: 1px solid rgb(var(--button-outline-color));
    align-items: center;
    justify-content: center;
    font-family: var(--text-font-family-ltd-md);
    font-weight: var(--text-font-weight-ltd-md);
    font-style: var(--text-font-style-ltd-md);
    letter-spacing: var(--text-letter-spacing-ltd-md);
    max-width: unset;
    text-decoration: none;
    width: 100%;
    font-size: var(--text-condensed-md-3);
    padding: 0;
    height: 5.4rem;
    margin-top: 1.5rem;
}

#AAI-cancel{
    margin-top: 0;
}

#AAI-cancel a{
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: normal;
    font-size: 16px;
}

#AAI-cancel a:hover{
    color: #524f4f80;
    transition: color .3s ease-in-out;
}

#AAI-submitbtn input {
    font-weight: 500;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: var(--text-font-neue-md);
    text-transform: uppercase;
    border: 1px solid rgb(var(--button-background));
    --button-background: var(--button-background-primary) / var(--button-background-opacity, 1);
    --button-text-color: var(--button-text-primary);
    cursor: pointer;
}

#AAI-submitbtn input:hover{
    background-color: rgb(var(--color-white));
    color: rgb(var(--color-grey));
    border-color: rgb(var(--color-grey));
}

#AAI-close {
    --button-background: var(--button-background-primary) / var(--button-background-opacity, 1);
    --button-text-color: var(--button-text-primary);
    --button-outline-color: var(--button-background-primary);
}

#AAI-close a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#AAI-close:hover{
    background-color: rgb(var(--color-white));
    color: rgb(var(--color-grey));
    border-color: rgb(var(--color-grey));
}

div#AAI-confirmation {
    font-size: 16px;
}

.customer-form__box-inner h1{
    color: rgb(var(--color-grey));
    font-family: var(--text-font-neue-md);
    font-weight: var(--heading-font-weight-ltd);
    font-style: var(--heading-font-style-ltd);
    letter-spacing: var(--heading-letter-spacing-ltd);
    text-transform: var(--heading-text-transform-ltd);
}

.recover-fields .banner--success{
    font-family: var(--text-font-family-ltd);
    font-weight: var(--text-font-weight-ltd);
    font-style: var(--text-font-style-ltd);
    letter-spacing: var(--text-letter-spacing-ltd);
    font-size: var(--text-condensed-6);
    line-height: 1.6rem;
}

.underline-offset{
    text-underline-offset: 4px;
}

.welcomeFields .checkbox-container{
    font-family: var(--text-font-family-condensed);
    font-weight: var(--text-font-weight-condensed);
    font-style: var(--text-font-style-condensed);
    letter-spacing: var(--text-letter-spacing-condensed);
    font-size: 16px;
}
/* ---------------- Radio Buttons ----------------------*/

.agree-checkbox {
    display: flex;
    gap: 2.5rem;
    margin: 1.5rem 0;
}

/* The radio-wrapper */
.radio-wrapper {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    border: 1px solid transparent;
  }

  .radio-wrapper:has(input:focus){
    border: 1px solid rgb(var(--color-grey));
  }
  
  /* Hide the browser's default radio button */
  .radio-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: transparent;
    border: 2px solid rgb(var(--color-grey));
    border-radius: 50%;
}
  
  /* When the radio button is checked, add a blue background */
  .radio-wrapper input:checked ~ .checkmark {
    border: 2px solid rgb(var(--color-grey));
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio-wrapper input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio-wrapper .checkmark:after {
       top: 2px;
      left: 2px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgb(var(--color-grey));
  }

/* ----------- END --------------*/


.agree-checkbox ~ .form-control,
.agree-checkbox + .form-control {
  display: none;
}
.agree-checkbox:has(#professional-label.checked) ~ .form-control,
.agree-checkbox:has(#professional-label.checked) + .form-control {
  display: block;
}

.welcomeFields .checkbox-container {
   align-items: center;
}

.welcomeFields .checkbox-container label{
    font-family: var(--text-font-family-ltd);
    font-weight: var(--text-font-weight-ltd);
    font-style: var(--text-font-style-ltd);
    letter-spacing: var(--text-letter-spacing-ltd);
    font-size: var(--text-condensed-5);
    line-height: 1.8rem;
    margin-top: 1rem;
    color: rgb(var(--color-grey)) !important;
    text-align: left;
    margin-top: 5px;
}

.welcomeFields .checkbox-container label a:hover{
        color: #524f4f80;
        transition: color .3s ease-in-out;
}

.welcomeFields .checkbox-container .checkbox{
    width: 22px;
    height: 22px;
    box-shadow: none;
    border-radius: 0;
}

.welcomeFields .checkbox-container label a{
    text-decoration: underline;
    text-underline-offset: 2px;
}

.recover-form{
    gap: 2.5rem;
}

.checkbox~label{
    opacity: 1;
}



@media screen and (max-width:768px) {

    .customer-form__box{
        margin: 2.5rem 1.5rem;
        padding-inline: 1.5rem;
    }

    .old-website{
        padding-inline: 1.5rem;
        max-width: 475px;
        margin-inline: auto;
    }

    #AAI-modal {
        max-width: 475px!important;
    }

    .underline-offset {
        font-size: 16px;
    }

    .welcomeFields .checkbox-container label {
        font-size: 14px;
        line-height: 16px;
    }
    
}

@media screen and (max-width:500px) {
    .old-website{
        margin: 2.5rem 1.5rem;
    }
}