/* GL LACC District Filter Styles */

.gl-lacc-filter-container {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.gl-lacc-filter-container h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 1.5em;
    text-align: center;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

.gl-lacc-filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Filters Row - Side by Side Layout */
.gl-lacc-filters-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Province Filter Styles */
.gl-lacc-province-select {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    min-width: 0; /* Prevents flex item from overflowing */
}

.gl-lacc-province-select label {
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.gl-lacc-province-select select {
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    color: #333;
    transition: border-color 0.3s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.gl-lacc-province-select select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.gl-lacc-province-select select:hover {
    border-color: #0073aa;
}

/* District Filter Styles */
.gl-lacc-district-filter {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: #e8f4fd;
    border-radius: 6px;
    border: 1px solid #b3d9f2;
    animation: slideIn 0.3s ease-out;
    min-width: 0; /* Prevents flex item from overflowing */
}

.gl-lacc-district-filter label {
    font-weight: 600;
    color: #0073aa;
    font-size: 14px;
}

.gl-lacc-district-filter select {
    padding: 12px 16px;
    border: 2px solid #b3d9f2;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    color: #333;
    transition: border-color 0.3s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.gl-lacc-district-filter select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.gl-lacc-district-filter select:hover {
    border-color: #0073aa;
}

/* Selected Results Styles */
.gl-lacc-selected-results {
    min-height: 100px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.gl-lacc-selected-results p {
    margin: 0;
    color: #666;
    text-align: center;
    font-style: italic;
}

.selected-info {
    text-align: left;
}

.selected-info h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.3em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    text-align: center;
}

/* District Details Styles */
.district-details {
    margin-bottom: 20px;
}

.province-info {
    margin: 8px 0;
    font-style: normal;
    color: #333;
    font-size: 14px;
}

.province-info strong {
    color: #0073aa;
}

/* District Content Styles */
.district-content {
    margin: 20px 0;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.district-content h5 {
    margin: 0 0 10px 0;
    color: #0073aa;
    font-size: 1.1em;
    font-weight: 600;
}

.content-text {
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}

.content-text p {
    margin: 0 0 10px 0;
    text-align: left;
    font-style: normal;
}

.content-text p:last-child {
    margin-bottom: 0;
}

/* District Actions Styles */
.district-actions {
    margin: 15px 0;
    text-align: center;
}

.view-district-btn {
    display: inline-block;
    background: #28a745;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.view-district-btn:hover {
    background: #218838;
    color: #fff;
    text-decoration: none;
}

.action-buttons {
    margin-top: 15px;
    text-align: center;
}

.reset-filter {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.reset-filter:hover {
    background: #c82333;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading states */
.gl-lacc-district-filter select option:contains("Loading") {
    color: #0073aa;
    font-style: italic;
}

/* Error states */
.gl-lacc-district-filter select option:contains("Error") {
    color: #dc3545;
    font-weight: 500;
}

/* Responsive design */
@media (max-width: 768px) {
    .gl-lacc-filter-container {
        margin: 10px;
        padding: 15px;
    }
    
    .gl-lacc-filters-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .gl-lacc-province-select,
    .gl-lacc-district-filter {
        padding: 12px;
    }
    
    .gl-lacc-province-select select,
    .gl-lacc-district-filter select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .district-content {
        padding: 12px;
    }
    
    .content-text {
        font-size: 13px;
    }
}

/* Success animation */
.selected-info {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}