@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

h1, h2, h3, h4, h5, h6, p, a, label, button {
  font-family: 'Inter', sans-serif!important;
}

.account-forms {
    border: #979797 solid 1px;
    padding: 2em;
    margin: 2em auto;
    background-color: rgb(228, 228, 228)
}

/*  accounts form */
.account-forms h1 {
    font-size: 3em;
    border-bottom: 2px solid #e6a97a;
    padding-bottom: 0.1em;
    font-weight: bold;
}


/* .account-forms form input[type="checkbox"] p {
    width: 20px;
    height: 20px;
    background-color: transparent;
 } */

.account-forms p, .account-forms form p label  {
    font-weight: bold;
    font-size: large;
    margin: .3em 0;
 }

 .account-forms p a,  .account-forms a {
    color: #00a86c;
    text-decoration: underline;
    font-weight: bold;
}

.account-forms p a:hover, .account-forms a:hover {
    color: #00a775;
    text-decoration: none;

}

/* sign in/up button */
.account-forms button {
    background-color: #008a5a;
    color: white;
    border: none;
    padding: 0.5em 1em;
    margin-top: 1em;
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
    margin: 20px 0;
    width: 100%;
}

.account-forms button:hover {
    background-color: #00a775;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* google button and h2 */
.account-forms h2 {
    font-size: 2em;
    text-align: center;
    padding-bottom: 0.2em;
    font-weight: bold;
}
 
 .account-forms ul li  {
    width: 100%;
}

.account-forms li a {
    background: #00a86c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0em;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    gap: 10px; /* Adds spacing between icon and text */
}


.account-forms li a::before {
    content: "";
    background: url('https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA');
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; /* Adjust the size of the icon */
    height: 30px;
    display: inline-block;
}

.account-forms li a:hover {
    background: #00a775;
    color: #3b2b30;
    text-decoration: none;
}

/* form inputs */
.account-forms form p input:not([type="checkbox"]):not([type="radio"])  {
    width: 100%;
    border-radius: 5px;
    color: black!important;
    background-color: white;
    padding: 0.5em;
 }

 /* Target only <p> that contains an <input type="radio"> */
 .account-forms p:has(input[type="radio"]) {
    background-color: #f9f9f9; /* Light background */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between radio and text */
}

/* Style the radio button */
.account-forms p:has(input[type="radio"])  input[type="radio"] {
    accent-color: #007bff; /* Blue radio button */
    width: 18px;
    height: 18px;
}

.account-forms form p input[type="checkbox"] {
    width: 20px !important;
    height: 20px;

}

/* Style the label */
.account-forms p:has(input[type="radio"]) label {
    font-weight: bold;
    color: #333;
}

/* Style strong text inside this specific p */
.account-forms p:has(input[type="radio"]) strong {
    color: #28a745; /* Green for Verified & Primary */
    margin-left: 5px;
}