/* Keep it minimal; Bootstrap handles most styling */

.page-template-template-application-form legend {
    font-size: 16px;
}

#app-form-error-summary:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.invalid-feedback:empty {
    display: none;
}

/* Make fieldset border clearly visible when invalid */
#degree_level-fieldset.border-danger {
    border-width: 2px !important;
}

/* Required field indicator */
p.required-field span[aria-hidden="true"],
.form-label span[aria-hidden="true"] {
    color: #dc3545; /* Bootstrap danger red */
    font-weight: 600;
    margin-left: 0.125rem;
}

/* Remove border radius from all form fields */
.form-control,
.form-select,
.form-check-input,
.btn {
    border-radius: 0;
}



/* =========================
   Course checkbox styling
   ========================= */

.course-month {
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
}

/* Make each course feel like a row */
.course-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.course-item:hover {
    background-color: #f8f9fa;
}

/* Title stands out */
.course-title {
    font-weight: 600;
    line-height: 1.3;
}

/* Metadata row */
.course-meta {
    font-size: 0.875rem;
    color: #6c757d; /* Bootstrap secondary */
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* Individual meta items */
.course-meta span {
    white-space: nowrap;
}

/* Cost emphasis */
.course-cost {
    font-weight: 600;
    color: #212529;
}

/* Checkbox alignment */
.course-item .form-check-input {
    flex-shrink: 0;
    margin-top: 0.35rem;
}


/* =========================
   Larger course checkboxes
   ========================= */

/* Increase checkbox size */
.course-item .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.35rem;
}

/* Improve focus ring visibility */
.course-item .form-check-input:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Ensure label text aligns nicely with larger checkbox */
.course-item .course-text {
    line-height: 1.35;
}

/* =========================
   Course Note Styling
   ========================= */

/*.course-note {
    font-size: 0.9rem;
    color: #495057; !* Bootstrap body secondary *!
}*/

.course-note {
    font-size: 0.9rem;
    color: #495057;
    background-color: #f8f9fa;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #0d6efd; /* Bootstrap primary */
}

/* ==================================================
   Darken checkbox & radio borders (scoped to your form)
   ================================================== */

/* Darker borders for checkboxes and radio buttons */
#application-form .form-check-input {
    border-color: #6c757d; /* Bootstrap secondary */
}

/* ==================================================
   Improve checked + focus states (important)
   ================================================== */
/* Checked state */
#application-form .form-check-input:checked {
    background-color: #0d6efd; /* Bootstrap primary */
    border-color: #0d6efd;
}

/* Keyboard focus */
#application-form .form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ==================================================
   (Optional) Slightly heavier border for unchecked state
   ================================================== */
#application-form .form-check-input {
    border-width: 2px;
}