/* Custom styling for form dropdowns with light placeholder text */

/* Style for select elements with empty labels (placeholders) */
select option:first-child {
    color: #6c757d !important; /* Light gray color for placeholder text */
    font-style: italic;
}

/* Style for select elements when no option is selected */
select:invalid {
    color: #6c757d !important; /* Light gray color when placeholder is shown */
    font-style: italic;
}

/* Reset color when a valid option is selected */
select:valid {
    color: #212529 !important; /* Dark color for selected options */
    font-style: normal;
}

/* Enhanced styling for form-select elements */
.form-select:invalid {
    color: #6c757d !important;
    font-style: italic;
}

.form-select:valid {
    color: #212529 !important;
    font-style: normal;
}

/* Specific styling for dropdown placeholders */
.form-select option[value=""] {
    color: #6c757d !important;
    font-style: italic;
}

.form-control option[value=""] {
    color: #6c757d !important;
    font-style: italic;
}

/* Additional styling for better visual hierarchy */
.form-select option:not([value=""]) {
    color: #212529 !important;
    font-style: normal;
}

.form-control option:not([value=""]) {
    color: #212529 !important;
    font-style: normal;
}

/* Focus states for better UX */
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Hover effects for dropdowns */
.form-select:hover {
    border-color: #b0b0b0;
}

/* Custom styling for large form selects */
.form-select-lg {
    font-size: 1.1rem;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem;
}

/* Ensure placeholder text is visible in all browsers */
.form-select::-webkit-input-placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.form-select::-moz-placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.form-select:-ms-input-placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.form-select::placeholder {
    color: #6c757d !important;
    opacity: 1;
}