/* Fix for Select Course button overflow */
.course-card .cta-button.select-course {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal; /* Allow text to wrap if needed */
    text-align: center;
    display: block;
    margin: 10px auto;
}

/* Adjust Date Field Sizing */
#dob, #start_date {
    width: 85% !important; /* Force width reduction */
    max-width: 90% !important; /* Ensure it never hits the edge */
    box-sizing: border-box !important;
    display: block !important;
    margin-right: auto !important; /* Align left */
}

/* Blue Box Styling for Course Enrollment Sections */
.form-section {
    border: 3px solid var(--primary-color); /* Uniform blue border */
    padding: 20px;
    margin-bottom: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.1);
    overflow: hidden; /* Prevent content from overflowing the box */
}

/* Ensure the blue border is consistent */
.form-section h3 {
    color: var(--primary-color);
    margin-top: 0;
}

/* Specific fix for the Select Course dropdown to ensure it doesn't overflow */
#course_type {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .form-section {
        padding: 15px;
    }
    
    #dob, #start_date {
        width: 100%; /* Full width on mobile for better touch targets */
    }
}