/* ============================================================
   Motors Filter Element — filter.css
   ============================================================ */

/* Custom property defaults (overridden inline per instance) */
.mfe-filter-wrap {
    --mfe-btn-bg:      #d42027;
    --mfe-radius:      16px;
    --mfe-bg:          #ffffff;
    --mfe-border:      #e2e8f0;
    --mfe-field-bg:    #f1f3f5;
    --mfe-field-hover: #e9ecef;
    --mfe-text:        #1a202c;
    --mfe-muted:       #718096;
    --mfe-shadow:      0 4px 24px rgba(0,0,0,.10);
    --mfe-transition:  .18s ease;
}

/* Wrapper */
.mfe-filter-wrap {
    background: var(--mfe-bg);
    border-radius: var(--mfe-radius);
    box-shadow: var(--mfe-shadow);
    padding: 22px 22px 18px;
    max-width: 760px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--mfe-text);
}

/* Form rows */
.mfe-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.mfe-row:last-child { margin-bottom: 0; }

/* ---- Search bar ------------------------------------------------------ */
.mfe-search-row { margin-bottom: 14px; }

.mfe-search-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--mfe-field-bg);
    border: 1.5px solid var(--mfe-border);
    border-radius: 50px;
    padding: 0 14px;
    transition: border-color var(--mfe-transition), box-shadow var(--mfe-transition);
}
.mfe-search-wrap:focus-within {
    border-color: var(--mfe-btn-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfe-btn-bg) 15%, transparent);
}

.mfe-search-icon {
    color: var(--mfe-btn-bg);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.mfe-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--mfe-text);
    height: 44px;
    min-width: 0;
}
.mfe-search-input::placeholder { color: var(--mfe-muted); }

.mfe-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mfe-text);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--mfe-transition), transform var(--mfe-transition);
}
.mfe-history-btn:hover { background: var(--mfe-btn-bg); transform: scale(1.08); }

/* ---- Field + Select -------------------------------------------------- */
.mfe-field-wrap {
    position: relative;
    flex: 1;
    min-width: 140px;
}

.mfe-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    border: 1.5px solid var(--mfe-border);
    border-radius: 10px;
    background: var(--mfe-field-bg);
    color: var(--mfe-text);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color var(--mfe-transition), background var(--mfe-transition);
    box-sizing: border-box;
}
.mfe-select:hover  { background: var(--mfe-field-hover); }
.mfe-select:focus  { border-color: var(--mfe-btn-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfe-btn-bg) 12%, transparent); }

.mfe-chevron {
    pointer-events: none;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mfe-muted);
    display: flex;
    align-items: center;
}

/* ---- Price toggle radio ---------------------------------------------- */
.mfe-price-toggle-row {
    align-items: center;
    margin-bottom: 10px;
}

.mfe-radio-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    color: var(--mfe-text);
}

.mfe-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.mfe-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--mfe-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--mfe-transition);
    background: #fff;
}
.mfe-radio-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mfe-btn-bg);
    opacity: 0;
    transition: opacity var(--mfe-transition);
}
.mfe-radio-label input[type="radio"]:checked ~ .mfe-radio-dot {
    border-color: var(--mfe-btn-bg);
}
.mfe-radio-label input[type="radio"]:checked ~ .mfe-radio-dot::after {
    opacity: 1;
}

/* Tooltip */
.mfe-tooltip {
    cursor: help;
    position: relative;
    color: #2d3748;
    display: inline-flex;
    align-items: center;
}
.mfe-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a202c;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 240px;
    white-space: normal;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mfe-transition);
    z-index: 999;
}
.mfe-tooltip:hover::after { opacity: 1; }

/* ---- Divider row + Reset -------------------------------------------- */
.mfe-actions-row {
    align-items: center;
    border-top: 1px solid var(--mfe-border);
    padding-top: 12px;
    margin-top: 4px;
}
.mfe-spacer { flex: 1; }

.mfe-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--mfe-btn-bg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background var(--mfe-transition);
}
.mfe-reset-btn svg { color: var(--mfe-btn-bg); }
.mfe-reset-btn:hover { background: color-mix(in srgb, var(--mfe-btn-bg) 8%, transparent); }

/* ---- Search button --------------------------------------------------- */
.mfe-submit-row { margin-top: 4px; }

.mfe-search-btn {
    width: 100%;
    height: 52px;
    background: var(--mfe-btn-bg);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter var(--mfe-transition), transform var(--mfe-transition);
}
.mfe-search-btn:hover  { filter: brightness(1.10); transform: translateY(-1px); }
.mfe-search-btn:active { transform: translateY(0);  filter: brightness(.95); }

.mfe-count {
    font-size: 16px;
    font-weight: 700;
}

/* ---- Loading state --------------------------------------------------- */
.mfe-filter-wrap.mfe-loading .mfe-search-btn {
    opacity: .7;
    cursor: wait;
}

/* ---- Responsive ------------------------------------------------------ */
@media ( max-width: 540px ) {
    .mfe-filter-wrap { padding: 16px 14px 14px; }
    .mfe-field-wrap  { min-width: calc(50% - 5px); }
    .mfe-tax-row     { flex-direction: column; }
    .mfe-tax-row .mfe-field-wrap { min-width: 100%; }
}

/* ---- Title ------------------------------------------------------- */
.mfe-filter-title {
    display: block;
    width: 100%;
}

/* ---- Dependent (child) select ------------------------------------ */
.mfe-child-select { position: relative; }

.mfe-loading-dots {
    display: none;
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--mfe-border);
    border-top-color: var(--mfe-btn-bg);
    border-radius: 50%;
    animation: mfe-spin .6s linear infinite;
    pointer-events: none;
}

.mfe-child-loading .mfe-loading-dots { display: block; }
.mfe-child-loading .mfe-select       { opacity: .55; }

@keyframes mfe-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Disabled child select style */
.mfe-select:disabled {
    opacity: .5;
    cursor: not-allowed;
}