/* Basic styling for the form to ensure horizontal flow */
.ealf-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-end;
    font-family: inherit;
    width: 100%;
}

.ealf-filter-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 80px;
}

.ealf-filter-price {
    flex: 2.5; /* Give price much more width */
}

.ealf-filter-group label {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}

.ealf-filter-group input {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ealf-filter-group select {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 30px 10px 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"><path fill="%23333" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/></svg>');
    background-repeat: no-repeat, repeat;
    background-position: right 10px center, 0 0;
    background-size: 10px auto, 100%;
}

.ealf-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ealf-price-inputs input {
    flex: 1;
    width: 100%;
}

/* Hide number input spinners forcibly */
.ealf-price-inputs input[type="number"]::-webkit-inner-spin-button,
.ealf-price-inputs input[type="number"]::-webkit-outer-spin-button,
.ealf-filter-form input[type="number"]::-webkit-inner-spin-button,
.ealf-filter-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.ealf-price-inputs input[type="number"],
.ealf-filter-form input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.ealf-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 
 * Smooth transition for loop grid container during AJAX calls.
 * To enable this, add a CSS class `ealf-grid-wrapper` or simply apply 
 * to Elementor widgets when they enter `.is-loading` state 
 */
.elementor-widget-loop-grid.is-loading,
.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Empty state message */
.ealf-no-results {
    padding: 40px;
    text-align: center;
    background: #f9fafb;
    border: 1px dashed #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #555;
    width: 100%;
}