/* Oakton Brand Color Integrations */

.brand-text {
    color: #006257;
}

/* Oakton Brand Color Integrations */

.btn-brand {
    background-color: #006257;
    border-color: #006257;
    color: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover state: Darken slightly more for a stronger visual contrast shift */
.btn-brand:hover {
    background-color: #003832; 
    border-color: #002f2a;
    color: #ffffff;
}

/* Focus state (Tab selected): Add a high-contrast focus ring */
.btn-brand:focus,
.btn-brand:focus-visible {
    background-color: #004d44;
    border-color: #004d44;
    color: #ffffff;
    outline: 0;
    /* Uses a semi-transparent version of the brand color for the focus ring */
    box-shadow: 0 0 0 0.25rem rgba(0, 98, 87, 0.5); 
}

/* Active state (Clicking/Pressing down) */
.btn-brand:active {
    background-color: #00362f;
    border-color: #002f29;
    color: #ffffff;
}

/* Ensure reCAPTCHA widget shrinks gracefully on extremely small mobile screens */
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center center;
    }
}
/* override the background of the alert */
.alert.alert-info { 
    /*  Override the background color */
    --bs-alert-bg: #F5F5F5; 
    
    /* Optional: Update the border to match or be slightly darker */
    --bs-alert-border-color: #878787; 
    
    /* Optional: Ensure the text is readable against your new background */
    --bs-alert-color: #000000; 
    
    /* Optional: Change the color of any links inside the alert */
    /* --bs-alert-link-color: #000000; */
} 

/* password strength */
/*  Smooth transition for the progress bar */
/*  .progress-bar { */
/*     transition: width 0.4s ease, background-color 0.4s ease; */
/* } */
/* no longer needed for bootstrap 5 */

/* Custom styling for the requirement list */
.req-list {
  font-size: 0.85rem;
}
.req-list li {
     transition: color 0.3s ease;
 }

/* Fix border radius for input groups with validation -no longer needed for bootstrap 5 */
/* .input-group.has-validation > .form-control:not(:focus).is-valid, */
/* .input-group.has-validation > .form-control:not(:focus).is-invalid { */
/*     z-index: 2; */
/*  } */

/* Progress Bar */
.progress-thin {
  height: 6px;
}

#strengthBar {
    width: 0%;
}

/* Centers the radio button group within the form */
#chooseusername .mb-4 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
/* 1. Improve radio button contrast and align with Oakton brand colors */
.form-check-input {
    border-color: #555555; /* Darkens the default Bootstrap idle border */
}

.form-check-input:checked {
    background-color: #006257;
    border-color: #004d44;
}

.form-check-input:focus {
    border-color: #006257;
    box-shadow: 0 0 0 0.25rem rgba(0, 98, 87, 0.35);
}

/* 2. Improve contrast for disabled radio buttons and their associated labels */
.form-check-input:disabled {
    opacity: 0.8; 
    background-color: #e2e2e2;
    border-color: #878787;
}

.form-check-input:disabled ~ .form-check-label {
    opacity: 1; /* Removes Bootstrap's default label fade */
    color: #4a4a4a; /* Maintains distinct contrast from active text without failing WCAG guidelines */
}