/* 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 */
}