/* Unified Select Element Styling */
/* This CSS file provides consistent styling for select elements across featured and capacity pages */

/* Main select element styling */
.select,
.select_filter {
    border: 2px solid hsl(210, 100%, 86%) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.02), rgba(255, 255, 255, 0.8)) !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(20, 99, 179, 0.1) !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    height: 40px !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Hover state */
.select:hover,
.select_filter:hover {
    border-color: #0e4d8a !important;
    box-shadow: 0 4px 12px rgba(20, 99, 179, 0.18) !important;
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.04), rgba(255, 255, 255, 0.95)) !important;
    transform: translateY(-1px) !important;
}

/* Focus state */
.select:focus,
.select_filter:focus {
    outline: none !important;
    border-color: #0e4d8a !important;
    box-shadow: 0 6px 16px rgba(20, 99, 179, 0.25) !important;
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.06), rgba(255, 255, 255, 1)) !important;
}

/* Option styling */
.select option,
.select_filter option {
    padding: 8px;
    background: #ffffff;
    color: #374151;
}

/* Checked option styling */
.select option:checked,
.select_filter option:checked {
    background: linear-gradient(135deg, #1463b3, #0e4d8a);
    color: #ffffff;
}

/* Form select class styling (used in featured.html) */
.form-select {
    border: 2px solid #1463b3;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.02), rgba(255, 255, 255, 0.8));
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(20, 99, 179, 0.1);
    font-weight: 500;
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
}

.form-select:hover {
    border-color: #0e4d8a;
    box-shadow: 0 4px 12px rgba(20, 99, 179, 0.18);
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.04), rgba(255, 255, 255, 0.95));
    transform: translateY(-1px);
}

.form-select:focus {
    outline: none;
    border-color: #0e4d8a;
    box-shadow: 0 6px 16px rgba(20, 99, 179, 0.25);
    background: linear-gradient(135deg, rgba(20, 99, 179, 0.06), rgba(255, 255, 255, 1));
}

.form-select option {
    padding: 8px;
    background: #ffffff;
    color: #374151;
}

.form-select option:checked {
    background: linear-gradient(135deg, #1463b3, #0e4d8a);
    color: #ffffff;
}