/* Start custom CSS for shortcode, class: .elementor-element-2fe1961 *//* Search Container */
.petitions-search-container {
    max-width: 100%; /* Take full width */
    background: url('https://modelos.duvidajuridica.com.br/wp-content/uploads/2024/01/seguranca-juridica-assinatura-miro-neto-advogados-linkwell-1528-1024x448-1.jpg') no-repeat center center;
    background-size: cover;
    padding: 70px;
    border-radius: 20px;
}

.petition-search-box {
    /* ... other styles ... */
    position: relative; /* Required for absolute positioning of the icon */
}

.petition-search-button {
    position: absolute;
    right: 0; /* Aligns the icon to the right */
    top: 0; /* Aligns the icon to the top */
    bottom: 0; 
    background-color: #811A21;
}

.petition-search-box input[type="text"] {
    padding-right: 50px; /* Add padding to prevent text from hiding behind the icon */
}

/* Main Container */
.petitions-container {
    display: flex;
    align-items: flex-start; /* Align the top edges */
    margin-top: 30px; /* Space between search bar and main content */
}

/* Sidebar */
.petitions-sidebar {
    width: 250px; 
    flex: 0 0 200px; 
    padding: 20px; 
    border-right: 1px solid #ccc; 
    margin-right: 20px; 
    border: 1px solid #eee;
    border-radius: 5px;
    text-align: center;
}

.petitions-sidebar select {
    width: 100%; /* Make the dropdown full width of its parent container */
    padding: 10px; /* Add some padding inside the dropdown for better readability */
    font-size: 16px; /* Increase font size for better readability */
    border: 1px solid #ccc; /* Add a border to the dropdown */
    border-radius: 5px; /* Optional: add rounded corners to the dropdown */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a shadow for depth */
    -webkit-appearance: none; /* Remove default styling on iOS */
    -moz-appearance: none; /* Remove default styling on Firefox */
    appearance: none; /* Remove default arrow for a custom dropdown */
    background-image: url('path-to-your-custom-arrow-image'); /* Add your custom arrow image */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position your custom arrow on the right */
    background-size: 12px; /* Size your custom arrow appropriately */
    cursor: pointer; /* Change the cursor to indicate this is a dropdown */
}


/* Style the dropdown when it is focused */
.petitions-sidebar select:focus {
    outline: none; /* Remove the default focus outline */
    border-color: #0071a1; /* Change the border color to indicate focus */
}

/* You may also want to add a hover state */
.petitions-sidebar select:hover {
    border-color: #0071a1; /* Change border color on hover */
}

/* Make sure to add responsive design considerations */
@media (max-width: 768px) {
    .petitions-sidebar select {
        font-size: 14px; /* Smaller font size on mobile devices */
    }
}



/* Product Grid */
.petition-grid {
    flex: 1; /* Take remaining space */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Product Item */
.petition-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.petition-image {
    /* Style for the product image */
    margin: 0 auto; /* Center the image */
    width: 100%; /* Set width to fit the container */
    max-width: 300px; /* Max width of the image */
    height: auto; /* Keep the aspect ratio */
    overflow: hidden; /* Hide the overflow */
}

.petition-image img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Keep the aspect ratio */
    display: block; /* Remove inline display */
    margin-bottom: 20px; /* Space between image and download button */
}

/* Button */
.button.download-button {
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #811A21;
}

.woocommerce-js #respond input#submit, .woocommerce-js a.button, .woocommerce-js button.button, .woocommerce-js input.button {
    background-color: #811A21;
    
}

/* Additional responsive adjustments if needed */
@media (max-width: 768px) {
    .petitions-container {
        flex-direction: column;
    }

    .petitions-sidebar {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* Add this to your existing CSS */
.filter-controls {
    margin-top: 20px; /* Space from the category filters */
}

.sidebar-divider {
    border-top: 1px solid #ccc; /* Style the horizontal line */
    margin-bottom: 20px; /* Space below the line */
}

.control-group {
    margin-bottom: 15px; /* Space between each control group */
}

.control-group label {
    display: block; /* Make the label block to go above the select box */
    margin-bottom: 5px; /* Space between the label and select box */
}

.control-group select {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the select box */
    border: 1px solid #ccc; /* Border style */
    border-radius: 5px; /* Rounded corners */
    -webkit-appearance: none; /* For iOS and Safari */
    -moz-appearance: none; /* For Firefox */
    appearance: none; /* For modern browsers */
    background: url('path-to-down-arrow-icon') no-repeat right 10px center; /* Custom arrow */
    background-size: 12px; /* Size of custom arrow */
    cursor: pointer; /* Change cursor to pointer */
}

.filter-button {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the button */
    background-color: #811A21; /* Background color */
    color: white; /* Text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.filter-button:hover {
    background-color: #811A21; /* Darker shade on hover */
}

/* Add media queries as needed for responsiveness */
@media (max-width: 768px) {
    /* Adjust sizes and paddings on smaller screens */
}

.control-group label {
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    }/* End custom CSS */