/* ============================================================
   RPM MotoShop - Enhancement Styles
   All UX improvements, smart search, filters, favorites,
   history, comparator, kits, badges
   ============================================================ */

/* === Product Badges/Selos === */
.rpm-badges { position:absolute; top:8px; left:8px; z-index:3; display:flex; flex-direction:column; gap:4px; }
.rpm-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.65rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:white; background:var(--badge-color, var(--neon-red)); line-height:1.4; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,0.3); }

/* === Favorite Button === */
.rpm-fav-btn { position:absolute; top:8px; right:8px; z-index:3; width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; backdrop-filter:blur(4px); font-size:0.9rem; }
.rpm-fav-btn:hover { background:rgba(255,0,51,0.8); transform:scale(1.15); }
.rpm-fav-btn.active { background:var(--neon-red); color:white; }
.rpm-fav-btn.active i { animation:heartBeat 0.4s; }
@keyframes heartBeat { 0%{transform:scale(1)} 25%{transform:scale(1.3)} 50%{transform:scale(0.9)} 100%{transform:scale(1)} }

/* === Compare Button === */
.rpm-compare-btn { position:absolute; top:8px; right:44px; z-index:3; width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; backdrop-filter:blur(4px); font-size:0.85rem; }
.rpm-compare-btn:hover { background:rgba(0,149,255,0.8); transform:scale(1.15); }
.rpm-compare-btn.active { background:var(--neon-blue); color:white; }

/* === Compare Bar (fixed bottom) === */
.rpm-compare-bar { position:fixed; bottom:0; left:0; right:0; z-index:1040; background:var(--bg-card); border-top:1px solid var(--border-color); padding:12px 20px; display:flex; align-items:center; gap:12px; justify-content:center; box-shadow:0 -4px 20px rgba(0,0,0,0.3); }
.rpm-compare-bar .compare-items { display:flex; gap:8px; }
.rpm-compare-bar .compare-item { position:relative; width:44px; height:44px; border-radius:8px; overflow:hidden; border:2px solid var(--border-color); }
.rpm-compare-bar .compare-item img { width:100%; height:100%; object-fit:cover; }
.rpm-compare-bar .compare-remove { position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:var(--neon-red); color:white; border:none; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* === Compare Table === */
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:12px 16px; border-bottom:1px solid var(--border-color); text-align:center; vertical-align:middle; }
.compare-table th { background:var(--bg-secondary); }
.compare-table td:first-child { text-align:left; font-weight:600; color:var(--text-muted); font-size:0.85rem; white-space:nowrap; }

/* === Smart Search Dropdown === */
.rpm-smart-search-dropdown { position:absolute; top:100%; left:0; right:0; z-index:9999; background:var(--bg-card); border:1px solid var(--border-color); border-radius:0 0 var(--radius-md) var(--radius-md); box-shadow:0 8px 32px rgba(0,0,0,0.4); max-height:400px; overflow-y:auto; display:none; }
.rpm-smart-search-dropdown.visible { display:block; animation:slideDown 0.2s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.ss-group { border-bottom:1px solid var(--border-color); }
.ss-group:last-child { border-bottom:none; }
.ss-group-title { padding:8px 14px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); background:rgba(255,255,255,0.02); }
.ss-item { display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; color:var(--text-primary); transition:background 0.15s; }
.ss-item:hover { background:rgba(255,0,51,0.06); }
.ss-item img { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.ss-item-info { flex:1; min-width:0; }
.ss-item-name { display:block; font-size:0.88rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-item-price { font-size:0.8rem; color:var(--neon-green); font-weight:700; }
.ss-empty { padding:20px; text-align:center; color:var(--text-muted); font-size:0.9rem; }

/* === Filters Panel === */
.rpm-filters-panel { margin-bottom:16px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); overflow:hidden; }
.filters-toggle { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; font-weight:600; font-size:0.9rem; color:var(--text-secondary); transition:background 0.15s; }
.filters-toggle:hover { background:rgba(255,255,255,0.03); }
.filter-chevron { transition:transform 0.2s; }
.filter-chevron.open { transform:rotate(180deg); }
.filters-body { padding:16px; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; align-items:start; border-top:1px solid var(--border-color); }
.filter-group label { display:block; font-size:0.78rem; font-weight:600; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.3px; }
.filter-group select, .filter-group input[type="range"] { width:100%; }
.filter-checks { display:flex; flex-direction:column; gap:6px; }
.filter-checks label { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--text-secondary); text-transform:none; font-weight:400; cursor:pointer; }
.filter-checks input[type="checkbox"] { accent-color:var(--neon-red); width:16px; height:16px; }
.filters-count { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--neon-red); color:white; font-size:0.7rem; font-weight:700; }
.form-control-dark-sm { padding:6px 10px !important; font-size:0.85rem !important; }

/* === Kits === */
.kits-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.kit-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.kit-card:hover { border-color:var(--neon-red); box-shadow:0 4px 20px rgba(255,0,51,0.1); }
.kit-header { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid rgba(255,255,255,0.04); position:relative; }
.kit-header h4 { margin:0; font-size:1rem; font-weight:700; }
.kit-header p { margin:4px 0 0; font-size:0.82rem; color:var(--text-muted); }
.kit-image { width:70px; height:70px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.kit-discount { position:absolute; top:12px; right:12px; background:var(--neon-red); color:white; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:800; }
.kit-products { padding:12px 16px; }
.kit-product-item { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.kit-product-item:last-child { border-bottom:none; }
.kit-product-item img { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.kit-product-item span { flex:1; font-size:0.85rem; }
.kit-product-item small { color:var(--text-muted); font-size:0.8rem; }
.kit-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(255,255,255,0.02); border-top:1px solid var(--border-color); }
.kit-pricing { display:flex; flex-direction:column; gap:2px; }
.kit-original { text-decoration:line-through; color:var(--text-muted); font-size:0.82rem; }
.kit-final { font-size:1.2rem; font-weight:800; color:var(--neon-green); }
.kit-savings { font-size:0.78rem; color:var(--neon-orange); font-weight:600; }

/* === Skeleton Loading === */
.skeleton-card { pointer-events:none; }
.skeleton { background:linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255,255,255,0.06) 50%, var(--bg-secondary) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px; }
.skeleton-img { width:100%; aspect-ratio:4/3; }
.skeleton-text { height:12px; width:100%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* === Fly to Cart Animation === */
.rpm-fly-to-cart { position:fixed; z-index:99999; font-size:1.5rem; color:var(--neon-red); pointer-events:none; animation:flyToCart 0.6s forwards ease-in; }
@keyframes flyToCart {
    0% { transform:scale(1); opacity:1; }
    100% { transform:translate(calc(var(--target-x, 50vw) - 50vw), calc(var(--target-y, 0) - 50vh)) scale(0.3); opacity:0; }
}

/* === Lazy Section Animation === */
.rpm-lazy-section { opacity:0; transform:translateY(20px); transition:opacity 0.5s, transform 0.5s; }
.rpm-lazy-section.visible { opacity:1; transform:translateY(0); }

/* === History Section (mini cards) === */
.product-card-mini { min-width:160px !important; max-width:180px !important; }
.product-card-mini .image-wrapper { height:100px; }
.product-card-mini .product-info { padding:8px 10px !important; }

/* === Low Stock Warning (enhanced) === */
.stock-urgency { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:0.75rem; font-weight:700; background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.stock-urgency i { animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* === Enhanced Banner Transitions === */
.rpm-hero-slide { transition:opacity 0.6s ease, transform 0.6s ease; opacity:0; transform:scale(1.02); }
.rpm-hero-slide.active { opacity:1; transform:scale(1); }
.rpm-hero img { transition:transform 8s ease; }
.rpm-hero-slide.active img { transform:scale(1.05); }

/* === Nav Favorites Link === */
.nav-fav-count { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--neon-red); color:white; font-size:0.65rem; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* === Smooth scrollbar for product scrolls === */
.products-scroll::-webkit-scrollbar { height:6px; }
.products-scroll::-webkit-scrollbar-track { background:transparent; }
.products-scroll::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
.products-scroll::-webkit-scrollbar-thumb:hover { background:var(--neon-red); }

/* === Responsive adjustments === */
@media(max-width:768px) {
    .rpm-compare-bar { padding:8px 12px; }
    .rpm-compare-bar .compare-item { width:36px; height:36px; }
    .filters-body { grid-template-columns:1fr 1fr; }
    .kits-grid { grid-template-columns:1fr; }
    .rpm-compare-btn { display:none; }
    .rpm-smart-search-dropdown { max-height:60vh; }
}
@media(max-width:480px) {
    .filters-body { grid-template-columns:1fr; }
}