/* General styling for the filter form container */
.filteri-form {
    background-color: #ffffff; /* Clean white background */
    padding: 20px 30px; /* Adequate padding for spacing */
    border-radius: 10px; /* Rounded corners for elegance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 40px; /* Space below the filter section */
    border: 1px solid #ddd; /* Light border for separation */
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
}

/* Styling for the product options container */
.product-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/* Styling for each dropdown and input field */
.product-option .dropdown {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(14% - 15px); /* Compact and responsive width */
    max-width: 110px; /* Limit the maximum width */
    min-width: 100px; /* Ensure consistency */
}

/* Fix alignment for "Sortiraj po cijeni" */
.product-option .dropdown:first-child {
    align-self: flex-end; /* Align with other filters */
}

/* Styling for labels */
.product-option label {
    font-size: 12px; /* Compact label text */
    font-weight: bold;
    color: #444; /* Slightly darker gray for clarity */
    margin-bottom: 5px;
    text-transform: capitalize; /* Consistent text style */
}

/* Styling for input fields and select dropdowns */
.product-option input,
.product-option select {
    width: 100%;
    padding: 6px 10px; /* Compact padding for smaller fields */
    font-size: 12px; /* Slightly smaller font size */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light gray background */
    color: #333; /* Dark text */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 35px; /* Consistent height for all input fields */
}

/* Focus styles for inputs and dropdowns */
.product-option input:focus,
.product-option select:focus {
    border-color: #a68f5b; /* Gold accent for focus */
    box-shadow: 0 0 4px rgba(166, 143, 91, 0.5); /* Glow effect */
    outline: none;
}

/* Styling for the submit button */
.product-option .btn {
    background-color: #a68f5b; /* Gold accent color */
    color: #fff; /* White text */
    font-size: 14px; /* Button text size */
    font-weight: bold;
    padding: 8px 15px; /* Compact button size */
    border: none;
    border-radius: 6px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-end; /* Align button with fields */
    height: 35px; /* Match input field height for consistency */
}

/* Hover effect for the submit button */
.product-option .btn:hover {
    background-color: #8a7548; /* Darker gold for hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow on hover */
}

/* Styling for the button inside .floatleft */
.floatleft .btn {
    background-color: #a68f5b; /* Gold accent color */
    color: #fff; /* White text */
    font-size: 16px; /* Larger button text size */
    font-weight: bold;
    padding: 12px 20px; /* Increased padding for a larger button */
    border: none;
    border-radius: 8px; /* Rounded corners for elegance */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    text-align: center;
    height: auto; /* Allow flexible height for content */
    margin-top: 30px;
}

/* Hover effect for the button */
.floatleft .btn:hover {
    background-color: #8a7548; /* Slightly darker gold on hover */
    transform: translateY(-2px); /* Lift the button slightly */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

/* Your existing CSS remains the same until the media query */

@media screen and (max-width: 768px) {
    /* Adjust the filter form container with more height */
    .filteri-form {
        padding: 0 30px; /* Remove top padding, keep horizontal padding */
        margin: 0 0 30px 0; /* Remove top margin */
        width: 100%;
        position: relative;
        z-index: 100;
        background-color: #ffffff;  
        min-height: 950px;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Product options container */
    .product-option {
        display: block;
        width: 100%;
        position: relative;
        z-index: 101;
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }

    /* First dropdown (sort by price) specific styling */
    .product-option .dropdown:first-child {
        margin-top: -450px; /* Remove top margin from first filter */
        padding-top: 0; /* Remove top padding from first filter */
    }

    /* Style for each dropdown container with more breathing room */
    .product-option .dropdown {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin: 0; /* Increased bottom margin */
        float: none;
        display: block;
        position: relative;
        z-index: 102;
    }

    /* Input and select styles with consistent spacing */
    .product-option input,
    .product-option select {
        width: 100%;
        margin-bottom: 10px; /* Increased bottom margin */
        position: relative;
        z-index: 103;
        background-color: #ffffff;
        height: 45px; /* Slightly larger input fields */
    }

    /* Label styling with more space */
    .product-option label {
        display: block;
        margin-bottom: 0px; /* Increased margin */
        padding: 5px 0;
        font-size: 14px; /* Slightly larger font */
    }

    /* Button container with better positioning */
    .floatleft {
        float: none;
        width: 100%;
        display: block;
        margin-bottom: 20px;
        position: relative;
        z-index: 102;
    }

    /* Filter button with improved styling */
    .floatleft .btn {
        width: 100%;
        display: block;
        margin-top: 50px; /* Increased top margin */
        position: relative;
        z-index: 103;
        height: 50px; /* Larger button */
        font-size: 16px; /* Larger font size */
    }

    /* Ensure proper stacking context */
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    /* Add space between form elements */
    .product-option > * {
        margin-bottom: 20px; /* Increased spacing */
    }
}