.simpleshopmessage {
    font-size: 1.5rem !important;
    color: white;
    position: absolute;
    top: 15px;
    width: 50%;
    display: block;
    right: 20px;
    text-align: right;
    font-weight: bolder;
}
.card .woocommerce-Price-amount bdi{
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    font-weight: normal;
    font-size: 1.85rem;
}
body.term-306 .input-text, body.term-306.select2-container, body.term-306.select{
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
.card-img-top img {
    border-radius: 0;
}
/* Container for the filters */
.filter-container {
    display: flex;
    justify-content: space-between; /* Space out the elements */
    align-items: center; /* Vertically align items */
    opacity:0.6;
    padding: var(--space-s) !important;
}
/* Search input - align to the left */

/* Number of products dropdown - centered */
.filter-container #number-of-products {
    flex: 0; /* Center this dropdown */
    margin: 0 20px; /* Ensure spacing between other elements */
}

/* Sort by dropdown - align to the right */
.filter-container #sort-by {
    flex: 1; /* Take up available space */
    max-width: 200px; /* Restrict the maximum width */
    margin-left: auto; /* Push it to the right */
    width: 174px;
}
/* Hide the default radio button */
.radio-button-label input[type="radio"] {
    display: none;
}
/* Container for the search box */
.search-box-container {
    position: relative;
    width: 100%; /* Make it responsive */
    max-width: 400px; /* Adjust the maximum width as needed */

}

/* Styling for the search box input */
.search-box {
    width: 100%;
    padding: 10px 15px 10px 35px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 2px solid #ddd; /* Subtle border */
    border-radius: 4px; /* Slightly rounded corners */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Container for the select dropdown */
.select-container {
    position: relative;
    /*width: 100%;
    max-width: 400px; !* Adjust as needed *!*/
}

/* Styling for the select element */
.wpgb-select {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 2px solid #ddd; /* Subtle border */
    border-radius: 4px; /* Slightly rounded corners */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); *//* Subtle shadow for depth */
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Cpath fill="%23999" d="M10 12l-5-5h10l-5 5z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Focus and hover effects */
.wpgb-select:focus {
    border-color: #0073aa; /* Similar to WP Admin blue */
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.5); /* Light blue shadow on focus */
    outline: none; /* Remove the default outline */
}

.wpgb-select:hover {
    border-color: #0073aa; /* Same color for hover */
}

/* Optional: For consistency, style the container when the select is focused */
.select-container:focus-within .wpgb-select {
    border-color: #0073aa;
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.5);
}

/* Ensuring the dropdown arrow stays within the container */
.select-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Styling for placeholder text */
.search-box::placeholder {
    color: #999;
    opacity: 1; /* Ensure consistent opacity across browsers */
}

/* Hover and focus effects */
.search-box:focus {
    border-color: #0073aa; /* Border color on focus, similar to WP Admin blue */
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.5); /* Light blue shadow on focus */
    outline: none; /* Remove the default outline */
}

/* Optional: Add a search icon inside the input */
.search-box-container::before {
    content: '\f002'; /* FontAwesome search icon, ensure FontAwesome is loaded */
    font-family: "FontAwesome";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #999;
}

/* Hide the default radio button */
.radio-button-label input[type="radio"] {
    display: none;
}

/* Style the label as a button */
.radio-button-label {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px auto;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background-color: #f1f1f1;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    width: 100%;
}

/* Style the label when the radio button is checked */
.radio-button-label input[type="radio"]:checked + .radio-button-label,.radio-button-label.active {
    background-color: var(--primary); /* Your primary color */
    color: #fff; /* White text color */
    border-color: var(--primary); /* Border color matches the background */
}

/* Optional: Hover effect */
.radio-button-label:hover {
    background-color: var(--primary-light); /* A lighter shade of your primary color */
    color: #fff; /* White text color on hover */
}


/* Container for the cards to display them side by side */
.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between the cards */
    justify-content: space-between; /* Align cards evenly */
    align-items: stretch; /* Stretch the cards to match the height of*/
}

/* Individual card styling */
.card {
    flex: 1 1 calc(50% - 20px); /* Take up 50% of the container's width minus the gap */
    max-width: calc(50% - 20px); /* Restrict the maximum width of each card */
    box-shadow: 0 5px 28px 0 var(--shade-trans-20); /* Optional: Adds a subtle shadow for better separation */
    border-radius: 0; /* Optional: Adds rounded corners */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make the card take full available height */
    min-height:630px;
}
.product-list.pre-built .card{
    min-height: 710px !important;
}
/* Container for the card image */
.card-img-top {
    max-height: 330px; /* Maximum height of the image container */
    overflow: hidden; /* Clips the content if it exceeds the container */
    position: relative; /* Ensures overlay content stays within the container */
    min-height:330px;
}

/* Ensuring the image itself fits within the container */
.card-img-top img {
    width: 100%; /* Ensures the image takes the full width of the container */
    height: auto; /* Maintains the aspect ratio */
    max-height: 100%; /* Makes sure the image doesn't exceed the container's height */
    display: block; /* Removes any inline spacing below the image */
    object-fit: cover; /* Clips the image if it's too tall, ensuring it fills the container */
    object-position: center; /* Centers the image within the container */
}
/* Overlay styling to make sure it's visible */
.card-img-overlay {
    position: absolute; /* Ensures the overlay is positioned relative to the card-img-top container */
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Ensures the overlay appears on top of the image */
    display: flex; /* Allows you to align overlay content using flexbox */
    justify-content: space-between; /* Example: space out content within the overlay */
    align-items: end; /* Example: align content at the bottom */
    padding: 10px; /* Add padding inside the overlay for spacing */
    background: rgba(0, 0, 0, 0.5); /* Optional: A semi-transparent background to make the overlay text stand out */
    color: #fff; /* White text for better readability */
}
/* Ensure strong tags and the following text are evenly spaced */
.card-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-text strong {
    margin-right: 10px; /* Optional: Adjust spacing between strong and regular text */
    font-weight: 700;
}
.pn-card--detail-title {
    font-weight: 600 !important;
}
.card-body h4{
    font-weight: 600;
    color: var(--secondary-dark);
    font-size: var(--text-m);
    text-align: left;
}
/* Ensure 5px spacing between each <p> tag */
.card-body p {
    margin-bottom: 3px;
    margin-top:3px;
}

/* Optional: Remove the last <p> tag's margin if not needed */
.card-body p:last-child {
    margin-bottom: 0;
}

/* Optional: Ensures the card content remains within the card and has padding */
.card-body, .card-footer {
    padding: 15px;
}
/* Ensure the card body takes up available space */
.card-body {
    flex-grow: 1; /* Make the body grow to fill available space */
}

/* Styling for the card footer */
.card-footer {
    display: flex;
    justify-content: space-between; /* Align the spans to the left and right */
    align-items: center; /* Vertically center the content */
    position: relative; /* Ensure it stays within the card */
    bottom: 0; /* Align to the bottom of the card */
    background-color: var(--secondary-dark); /* Set the background color */
    padding: 10px 15px; /* Add some padding */
    border-top: 1px solid #ddd; /* Optional: Add a border at the top of the footer */
    color:white !important;
}
.card-footer span{
    color:white !important;
}
/* Styling for the "Buy" button */
.card-footer .btn-buy,.card-footer .added_to_cart.wc-forward {
    background-color: var(--primary); /* Background color for the button */
    color: #fff; /* White text color */
    padding: 8px 16px; /* Padding inside the button */
    border: none; /* Remove default button border */
    border-radius:0; /* Optional: Add rounded corners */
    text-decoration: none; /* Remove underline from link */
    font-weight: normal; /* Make the text bold */
    display: inline-block; /* Make sure the button behaves like a button */
    margin-top: 0 !important;
}

/* Optional: Add a hover effect to the "Buy" button */
.card-footer .btn-buy:hover,.card-footer .added_to_cart.wc-forward:hover  {
    background-color: var(--primary-hover); /* Assuming you have a hover color defined */
    text-decoration: none; /* Ensure no underline on hover */
    color: #fff; /* Maintain white text color on hover */
}
/* Badge/Ribbon styling */
.card-badge {
    position: absolute;
    top: 10px; /* Position from the top */
    right: 10px; /* Position from the right */
    background-color: var(--success); /* Background color for the badge */
    color: #fff; /* White text color */
    padding: 5px 10px; /* Padding inside the badge */
    font-size: 12px; /* Font size for the badge text */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 3px; /* Optional: Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow for better visibility */
    z-index: 10; /* Ensure the badge is on top of other elements */
}

/* Optional: Styling for a ribbon effect */
.card-badge.ribbon {
    width: 75px; /* Width of the ribbon */
    height: 75px; /* Height of the ribbon */
    background-color: var(--primary); /* Background color for the ribbon */
    color: #fff; /* White text color */
    text-align: center;
    font-weight: bold;
    transform: rotate(45deg); /* Rotate the ribbon for the diagonal effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    top: -10px; /* Adjust the position to move the ribbon slightly outside */
    right: -20px; /* Adjust the position for a better fit */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Adjust font size to fit within the ribbon */
}
/* Preloader container */
.ajax-preloader {
    display: none; /* Hidden by default */
    position: absolute; /* Position it at the top of the page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    z-index: 9999; /* Ensure it's on top of other content */
    justify-content: center;
    align-items: center;
}

/* Spinner animation */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary); /* Primary color for the spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Optional: Adjust the layout for mobile devices */
@media (max-width: 768px) {
    .card {
        flex: 1 1 100%; /* Cards will stack on smaller screens */
        max-width: 100%;
    }
}

/* Container for pagination buttons */
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* Individual pagination buttons */
.page-number {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 16px;
    background-color: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.ajax-preloader.active{
    display: flex;
}

/* Styling for the active/current page */
a.active.page-number {
    background-color: var(--primary-dark); /* Darker shade for the active page */
    color: #fff; /* White text color */
    pointer-events: none; /* Disable click on the current page */
}

/* Hover effect for pagination buttons */
a.page-number:hover {
    background-color: var(--primary-hover); /* Assuming you have a hover color defined */
    color: #fff; /* Maintain white text color */
}

/* Styling for the 'Next' button specifically */
a.next.page-number {
    background-color: var(--primary); /* Ensure 'Next' button has the same primary background */
    color: #fff; /* White text color */
    font-weight: bold; /* Bold text */
    border-radius: 4px; /* Rounded corners for consistency */
}

/* Hover effect for the 'Next' button */
a.next.page-number:hover {
    background-color: var(--primary-hover); /* Apply the same hover effect */
}

/* Basic styling for the price slider container and elements */
.price-slider-filter-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.price-slider-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.price-slider-ui {
    margin: 0 10px; /* Add some horizontal margin for handles */
}

/* jQuery UI Slider default styles might need adjustments */
/* Ensure the slider track and handles are visible */
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    touch-action: none; /* For touch devices */
    border-radius: 50%; /* Make handles circular */
    border: 1px solid #aaa;
    background: #eee;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
    background: #3B82F6; /* Example range color - Tailwind blue-500 */
    border-radius: 1em; /* Rounded range bar */
}

/* Horizontal slider */
.ui-slider-horizontal {
    height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.2em; /* Adjust vertical position of handle */
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.price-slider-amount {
    margin-top: 15px;
    font-size: 0.9em;
    color: #333;
}