/* VGS Performance Parts Finder — Frontend v3 */

.vgs-pf-finder { width: 100%; }
/* Non-compact: spacing between stacked fields */
.vgs-pf-field { margin-bottom: 10px; }
.vgs-pf-field:last-child { margin-bottom: 0; }
/* Compact: UIkit grid handles column spacing */
.vgs-pf-finder--compact .vgs-pf-field { margin-bottom: 0; }
/* Selects always fill their column */
.vgs-pf-field .uk-select { width: 100%; }
.vgs-pf-field .uk-select:disabled { opacity: .4; cursor: not-allowed; }
.vgs-pf-field .uk-select:focus { border-color: #c00; }
.vgs-pf-submit:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.vgs-pf-error { color: #c00; font-size: 13px; margin: 4px 0 0; }



/* Active bar on shop page (server-rendered, no flash) */
.vgs-pf-active-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #1a1a1a; color: #fff; font-size: 14px; border-radius: 4px; margin-bottom: 20px; }
.vgs-pf-active-icon { font-size: 18px; }
.vgs-pf-active-label { flex: 1; }
.vgs-pf-active-bar strong { color: #fff; }
/* Clear button — plain text only, no uk-button */
/* (kept for reference, no additional overrides needed) */

@media (max-width: 640px) {
    .vgs-pf-active-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- Zero results ---- */
.vgs-pf-no-results { text-align:center; padding:48px 24px; }
.vgs-pf-no-results-icon { font-size:48px; margin-bottom:16px; }
.vgs-pf-no-results h3 { font-size:20px; margin:0 0 10px; }
.vgs-pf-no-results p { color:#666; margin:0 0 24px; }
.vgs-pf-no-results-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.vgs-pf-browse-all-btn { background:#c00 !important; color:#fff !important; border-color:#c00 !important; }
.vgs-pf-browse-all-btn:hover { background:#a00 !important; border-color:#a00 !important; }

/* ---- Compatibility badge (product page) ---- */
.vgs-pf-compat-badge {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:4px; margin:12px 0; font-size:14px;
}
.vgs-pf-compat-badge .vgs-pf-compat-icon { font-size:20px; flex-shrink:0; }
.vgs-pf-compat-yes { background:#edfaed; border:1px solid #4caf50; color:#1a5c1a; }
.vgs-pf-compat-no  { background:#faeeed; border:1px solid #c00; color:#7a2a2a; }
.vgs-pf-compat-unknown { background:#fafaed; border:1px solid #e6b800; color:#5a4a0a; }
.vgs-pf-compat-no a { color:#c00; font-weight:600; }

/* ---- Fitment tab ---- */
.vgs-pf-fitment-tab h3 { margin:0 0 20px; font-size:16px; }
.vgs-pf-ft-make { margin-bottom:24px; }
.vgs-pf-ft-make-name { font-size:15px; font-weight:700; margin:0 0 10px; padding-bottom:6px; border-bottom:2px solid #eee; }
.vgs-pf-ft-model { margin-bottom:12px; padding-left:12px; }
.vgs-pf-ft-model-name { display:block; font-size:13px; color:#555; margin-bottom:4px; }
.vgs-pf-ft-variants { margin:0; padding:0 0 0 12px; list-style:disc; }
.vgs-pf-ft-variants li { font-size:13px; padding:2px 0; color:#333; }
.vgs-pf-ft-variants li.vgs-pf-ft-match { color:#1a5c1a; font-weight:600; }
.vgs-pf-ft-match-badge { display:inline-block; background:#4caf50; color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:6px; vertical-align:middle; }

/* ---- Recent searches ---- */
.vgs-pf-recent { margin-top: 14px; }
.vgs-pf-recent-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin: 0 0 6px; }
.vgs-pf-recent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vgs-pf-recent-chip {
    display: inline-flex; align-items: center; padding: 5px 10px 5px 12px;
    background: #f0f0f0; color: #333; font-size: 12px;
    border-radius: 20px; border: 1px solid #ddd;
    transition: all .15s; white-space: nowrap;
}
.vgs-pf-recent-chip a { color: inherit; text-decoration: none; }
.vgs-pf-recent-chip:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.vgs-pf-recent-remove {
    background: none; border: none; color: #c00; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 0 0 6px; opacity: .6;
}
.vgs-pf-recent-remove:hover { opacity: 1; }
.vgs-pf-recent-chip:hover .vgs-pf-recent-remove { color: #ff9999; opacity: .8; }