#cap-auth-wrapper {
    max-width: 380px;
    margin: 40px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); /* lighter shadow */
    padding: 32px 28px 24px 28px;
}


.cap-form {
    display: none;
    animation: fadeIn 0.4s;
}
.cap-form.active {
    display: block;
}

.cap-form h1 {
    text-align: center !important;
    color: #222;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 300 !important;
    font-size: 27px;
    margin-top: 12px;
}
.cap-logo {
    display:flex;
    justify-content: center ;
}
.form-span-text {
    text-align: center !important;
    color: black !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 100 !important;
    margin-top: -8px;
    font-size: 12px;
}

.cap-field label {
    display: block;
    margin-bottom: 12px;
    color: black;
    font-size: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cap-field input::placeholder{
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cap-field input {
    width: 100%;
    padding: 10px 12px;
  
    font-size: 15px;
    background: #fafbfc;
    transition: border 0.2s;
}
.cap-field input:focus {
    border-color: #0073e6;
    outline: none;
}


.cap-field-singup label {
    display: block;
    margin-bottom: 12px;
    color: black;
    font-size: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}



    margin-bottom: 12px;
input#cap-signup-password{
      width: 100%;
    padding: 10px 12px; 
    font-size: 15px;
    background: #fafbfc !important;
    transition: border 0.2s;
}
.cap-field-singup input::placeholder{
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cap-field-singup input {
    width: 100%;
    padding: 10px 12px; 
    font-size: 15px;
    background: #fafbfc;
    transition: border 0.2s;
}
.cap-field input:focus {
    border-color: #0073e6;
    outline: none;
}


.cap-btn {
     background-color: #2069ff!important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05) !important;
    color: #fff     !important;
    border: none !important;
    width: 100% !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    
}

.cap-divider {
    text-align: center;
    margin: -11px 0 10px 0;
    position: relative;
}
.cap-divider span {
    background: #fff;
    padding: 0 12px;
    color: black;
    font-size: 15px;
    position: relative;
    z-index: 1;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cap-divider:before {
    content: "";
    display: block;
    height: 1px;
    background: #e0e0e0;
    position: absolute;
    left: 0; right: 0; top: 50%;
    z-index: 0;
}

.cap-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #444;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow 0.2s, border 0.2s;
    box-shadow: 0 2px 8px rgba(66,133,244,0.08);
    margin-bottom: 10px;
}
.cap-google-btn:hover {
    border-color: #4285f4;
    box-shadow: 0 4px 16px rgba(66,133,244,0.12);
    color: #4285f4;
}
.cap-google-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

.cap-switch {
    text-align: center;
    font-size: 12px;
    margin-top: 0px !important;
}
.cap-switch a {
    color: black !important;
    font-weight: 500;
     font-family: 'Plus Jakarta Sans', sans-serif !important;
     text-decoration: underline !important;
     margin-top: 0px !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px);}
    to { opacity: 1; transform: translateY(0);}
}

.cap-field {
  position: relative;
}
.cap-field {
  position: relative;
}

.cap-field .cap-error {
  display: none;
  color: red;
  font-size: 13px;
  margin-top: 5px;
}

.cap-field.error input {
  border: 1px solid red;
}

/* ensure focus does NOT override error */
.cap-field.error input:focus {
  border: 1px solid red !important;
}
.cap-field.error .cap-error {
  display: block;
}


/* New CSS */
.cap-socail-login {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap:10px;
   
}

.div-socail-login{
    height: 45px;
    width:  45px;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;

    
}

.cap-remember-me {
    display:flex;
    justify-content: space-between;
}
.cap-remember-me {
    margin-top: 10px;
}
.checkbox-wrapper {
    display: flex;
    align-items: center; /* aligns checkbox and text vertically */
    gap: 5px; /* optional spacing between checkbox and text */
    color: black;
     font-weight: 200;
     font-family: 'Plus Jakarta Sans', sans-serif !important;
     font-size: 12px;
}

.checkbox-wrapper input[type="checkbox"] {
    margin: 0; /* removes default margin that may shift it */
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
    width: 100%;
    outline: none;
    border: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.DonotHaveAccount{
    margin-top: 15px !important;
}

.Signup {
    color:black ; font-size:15px ; font-weight : 600;
     font-family: 'Plus Jakarta Sans', sans-serif !important;
     margin-left: 5px;
}

.cap-field #cap-forgot-email{
        width: 100%;
        padding: 10px 12px; 
        font-size: 15px;
        background: #fafbfc !important;
        transition: border 0.2s;
}

.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    text-decoration: none;
    width: 100%;
    max-width: 280px;
    margin: 10px auto;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.google-login-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.google-login-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.google-login-btn span {
    flex: 1;
    text-align: center;
}