/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


.custom-blog-filter-section {
    background-color: #F4F4F4;
    padding: 20px 0;
    padding-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-family: Roboto, sans-serif;
}

.custom-blog-filter-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.custom-blog-filter-label {
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f98e2b;
    color: white;
    padding: 10px 15px;
    flex-shrink: 0;
    margin: 0;
    display: inline-block;
    height: 46px;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 26px;
}

.custom-blog-filter-wrapper {
    position: relative;
    width: 300px;
    max-width: 100%;
    margin: 0;
    height: 46px;
}

.custom-blog-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    box-sizing: border-box;
    height: 46px;
    vertical-align: middle;
}

.custom-blog-filter-select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

@media screen and (max-width: 768px) {
    .custom-blog-filter-container {
        flex-direction: column;
        align-items: center;
    }

    .custom-blog-filter-label {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 576px) {
    .custom-blog-filter-wrapper {
        max-width: 100%;
        width: 250px;
    }
    .custom-blog-filter-container {
        gap: 15px;
    }
}

/* Custom Pagination Styling to Resemble Flatsome UX Relay */

/* Container for the pagination */
nav.woocommerce-pagination.nav-pagination-custom.ajax-pagination {
    text-align: center; /* Center the pagination block */
    margin-top: 30px; /* Space above pagination */
    margin-bottom: 30px; /* Space below pagination */
    clear: both; /* Ensure it clears any floats */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* A common system font stack */
}

/* The UL element holding the page numbers */
nav.woocommerce-pagination ul.page-numbers {
    display: inline-block; /* Allows centering of the UL itself via text-align on parent */
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 3px; /* Optional: slight rounding for the group */
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.05); */ /* Optional: subtle shadow */
}

/* Individual list items */
nav.woocommerce-pagination ul.page-numbers li {
    display: inline; /* Make list items flow horizontally */
    margin: 0;
}

/* Styling for both links (a.page-numbers) and current page span (span.page-numbers.current) */
nav.woocommerce-pagination ul.page-numbers li .page-numbers {
    display: inline-block;
    min-width: 40px; /* Ensure consistent width */
    padding: 8px 12px;
    line-height: 20px; /* Adjust for vertical centering of text */
    text-align: center;
    text-decoration: none;
    border: 1px solid #ddd; /* Default border */
    background-color: #fff; /* Default background */
    color: #555; /* Default text color */
    margin-left: -1px; /* Collapse borders for a button group effect */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    font-size: 0.9em;
}

/* Remove left margin for the first item to prevent double border look */
nav.woocommerce-pagination ul.page-numbers li:first-child .page-numbers {
    margin-left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* Add rounding for the last item */
nav.woocommerce-pagination ul.page-numbers li:last-child .page-numbers {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Hover state for links */
nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    background-color: #f5f5f5; /* Light hover background */
    color: #333;
    border-color: #ccc;
}

/* Current page styling */
nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background-color: #0073aa; /* Example primary color (WordPress blue) */
    border-color: #0073aa;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

/* Styling for dots (...) */
nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
    border-color: transparent; /* Make dots have no border */
    background-color: transparent;
    padding: 8px 6px; /* Adjust padding for dots */
    cursor: default;
}

/* Styling for Next/Prev links if they have text or icons */
nav.woocommerce-pagination ul.page-numbers li a.next.page-numbers,
nav.woocommerce-pagination ul.page-numbers li a.prev.page-numbers {
    font-weight: bold;
    /* If using Flatsome icons, they might already be styled.
       The arrow → is text here. */
}

/* If you want to use Flatsome's icon for next/prev:
   You'd need to ensure your PHP outputs the <i> tag.
   The existing CSS targets the text arrow →.
   If your PHP outputted <i class="icon-angle-right"></i> inside the <a>: */
nav.woocommerce-pagination ul.page-numbers li a.next.page-numbers i,
nav.woocommerce-pagination ul.page-numbers li a.prev.page-numbers i {
    /* CSS for Flatsome icons if not already inheriting */
    font-size: 1em; /* Adjust as needed */
}




@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}