/* ============================================= AutoParts — Main CSS Flat, light-first design system (calibrated against trodo.com). See the THEME TOKENS block below before changing any colour. ============================================= */ /* ---- Google Font ---- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ============================================= THEME TOKENS Calibrated against trodo.com, the reference the client picked: a flat, light-first parts catalogue. The rules that keep it looking serious: * NO gradients anywhere. Every fill is one solid colour. * NO glows, and shadows only where something genuinely floats (dropdowns, modals). Cards are separated by a 1px border instead. * Small radii (4px surfaces / 6px controls), not pill-shaped. * One accent (blue) for actions and links. Amber is reserved for warnings — it is NOT the price colour; prices are plain dark ink, which is what makes a catalogue read as a catalogue. * Restrained weights: 600 for headings, never 800/900. Light is the DEFAULT theme (`:root`); dark is the opt-in variant. Every variable is defined in both and keeps its ROLE, not its lightness, so the ~700 var() call sites need no per-theme handling: --bg-primary page background --bg-secondary recessed fill: inputs, hovers, table stripes --bg-card card / panel surface --bg-card-hover card surface, hovered --bg-nav sticky bars (navbar, admin topbar) The active theme is written to `data-theme` on by the inline script in includes/theme_boot.php (see it for why that must run before paint). ============================================= */ :root { color-scheme: light; /* Surfaces */ --bg-primary: #FBFBFC; --bg-secondary: #F4F6F8; --bg-card: #FFFFFF; --bg-card-hover: #F9FAFB; --bg-nav: #FFFFFF; --bg-overlay: rgba(33, 43, 54, 0.45); --bg-row-alt: #FAFBFC; --bg-img-placeholder: #F4F6F8; /* The dark band behind the hero. A flat slate, not a gradient. */ --bg-hero: #212B36; --text-on-hero: #FFFFFF; --text-on-hero-muted: #B6BEC7; /* Accent — one blue, used for actions and links only. */ --blue-400: #0077C7; --blue-500: #0077C7; --blue-600: #0069B0; --blue-700: #005991; /* Warnings / attention. Never used for prices. */ --amber-400: #B45309; --amber-500: #C2680C; --amber-600: #92400E; --on-amber: #FFFFFF; --green-500: #067A54; --green-text:#067A54; --red-500: #D42C2C; --red-400: #D42C2C; /* Ink */ --text-primary: #212B36; --text-secondary: #4A5765; --text-muted: #637381; /* Price gets its own token so it is never confused with an accent. */ --price-color: #212B36; /* Hairlines. A card is a white box with a 1px border and nothing else. */ --border: #E6E9EC; --border-blue: #B7D8EE; --border-card: #E6E9EC; /* Badges over product photography stay dark-on-light-text in BOTH themes: they sit on arbitrary images, not on the page surface. */ --bg-img-badge: rgba(255, 255, 255, 0.94); --on-img-badge: #212B36; --bg-img-scrim: none; /* Kept as variables because ~30 call sites reference them, but every one is now a SOLID colour. Do not reintroduce linear-gradient() here. */ --gradient-blue: #0077C7; --gradient-amber: #B45309; --gradient-hero: #212B36; --gradient-card: none; /* Glow is off. The names survive so the ~5 call sites keep resolving — as a transparent zero-shadow, because a literal `none` inside a comma-separated box-shadow list is invalid and voids the declaration. */ --glow-blue: 0 0 0 rgba(0,0,0,0); --glow-amber: 0 0 0 rgba(0,0,0,0); /* Shadows: only for things that genuinely overlay the page. */ --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.06); --shadow-md: 0 2px 8px rgba(33, 43, 54, 0.10); --shadow-lg: 0 8px 24px rgba(33, 43, 54, 0.14); --shadow-card: none; /* Radius */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 6px; --radius-xl: 8px; /* Transitions — short and unshowy. */ --transition: all 0.15s ease; --transition-fast: all 0.12s ease; --transition-slow: all 0.2s ease; } :root[data-theme="dark"] { color-scheme: dark; --bg-primary: #12161C; --bg-secondary: #1A1F27; --bg-card: #171C23; --bg-card-hover: #1E242D; --bg-nav: #171C23; --bg-overlay: rgba(0, 0, 0, 0.6); --bg-row-alt: #1A1F27; --bg-img-placeholder: #1A1F27; --bg-hero: #0E1218; --text-on-hero: #F2F4F6; --text-on-hero-muted: #99A4B0; /* Lifted so it clears contrast on a dark surface; still one accent. */ --blue-400: #4DA8E8; --blue-500: #3E9BDD; --blue-600: #58B4EF; --blue-700: #7BC5F4; --amber-400: #D99A3C; --amber-500: #C9862A; --amber-600: #B0731F; --on-amber: #12160F; --green-500: #35B37E; --green-text:#35B37E; --red-500: #E5646A; --red-400: #E5646A; --text-primary: #E4E8ED; --text-secondary: #A8B2BD; --text-muted: #7A8592; --price-color: #E4E8ED; --border: #262D37; --border-blue: #2C4A63; --border-card: #262D37; --bg-img-badge: rgba(10, 13, 18, 0.82); --on-img-badge: #FFFFFF; --bg-img-scrim: none; --gradient-blue: #2C7FBE; --gradient-amber: #C9862A; --gradient-hero: #0E1218; --gradient-card: none; --glow-blue: 0 0 0 rgba(0,0,0,0); --glow-amber: 0 0 0 rgba(0,0,0,0); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-card: none; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* 15px base (trodo runs 14px). Every rem below scales with this, so this one line is what tightens the whole page density. */ font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; outline: none; } ul, ol { list-style: none; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--blue-700); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--blue-600); } /* ---- Selection ---- */ ::selection { background: rgba(59,130,246,0.3); color: var(--text-primary); } /* ============================================= LAYOUT ============================================= */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; } /* Grid */ .grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } /* ============================================= NAVBAR ============================================= */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--bg-nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0; } .navbar-inner { display: flex; align-items: center; gap: 24px; height: 70px; } .navbar-logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.2px; flex-shrink: 0; } .navbar-logo .logo-icon { width: 36px; height: 36px; background: var(--gradient-blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--glow-blue); } .logo-text-auto { color: var(--text-primary); } .logo-text-parts { color: var(--blue-400); } .navbar-search { flex: 1; max-width: 560px; position: relative; } .navbar-search input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 48px 11px 18px; color: var(--text-primary); font-size: 0.9rem; transition: var(--transition); } .navbar-search input::placeholder { color: var(--text-muted); } .navbar-search input:focus { border-color: var(--blue-500); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .navbar-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; } .navbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav-icon-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); position: relative; } .nav-icon-btn:hover { background: var(--bg-card-hover); border-color: var(--border-blue); color: var(--text-primary); } .cart-badge { position: absolute; top: -5px; right: -5px; background: var(--gradient-amber); color: var(--on-amber); font-size: 0.65rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); line-height: 1; } /* ============================================= HERO SECTION ============================================= */ .hero { background: var(--gradient-hero); padding: 80px 0 60px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: none; pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -30%; right: -5%; width: 50%; height: 150%; background: none; pointer-events: none; } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); border-radius: 100px; padding: 6px 16px; font-size: 0.8rem; font-weight: 500; color: var(--blue-400); margin-bottom: 24px; } .hero-title { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin-bottom: 16px; color: var(--text-on-hero); } /* Was a blue->amber gradient fill. Solid now; the emphasis comes from weight and colour, not from a rainbow. */ .hero-title .gradient-text { color: var(--text-on-hero); } .hero-subtitle { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 36px; max-width: 550px; line-height: 1.7; } .hero-search { display: flex; gap: 12px; max-width: 600px; } .hero-search input { flex: 1; background: rgba(13, 21, 38, 0.8); border: 1px solid var(--border-blue); border-radius: var(--radius-md); padding: 16px 22px; color: var(--text-primary); font-size: 0.95rem; backdrop-filter: blur(10px); transition: var(--transition); } .hero-search input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } .hero-search input::placeholder { color: var(--text-muted); } .hero-stats { display: flex; gap: 40px; margin-top: 48px; } .hero-stat { } .hero-stat-value { font-size: 1.8rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; } .hero-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } /* ============================================= CATEGORY BAR ============================================= */ .category-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 0; } .category-bar-inner { display: flex; gap: 4px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; } .category-bar-inner::-webkit-scrollbar { display: none; } .cat-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; } .cat-btn:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .cat-btn.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: var(--blue-400); } /* ============================================= PRODUCTS SECTION ============================================= */ .products-section { padding: 40px 0 60px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; } .section-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } .section-count { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; } .sort-select { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; transition: var(--transition); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } .sort-select:focus { border-color: var(--blue-500); color: var(--text-primary); } /* ============================================= PRODUCT CARD ============================================= */ .product-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-card); } .product-card:hover { transform: translateY(-4px); border-color: var(--border-blue); box-shadow: var(--shadow-md), var(--glow-blue); background: var(--bg-card-hover); } .product-card-image { position: relative; aspect-ratio: 4/3; background: var(--bg-img-placeholder); overflow: hidden; flex-shrink: 0; } .product-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: var(--transition-slow); } .product-card:hover .product-card-image img { transform: none; } .product-card-image-overlay { position: absolute; inset: 0; background: var(--bg-img-scrim); } .product-brand-badge { position: absolute; top: 12px; left: 12px; background: var(--bg-img-badge); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 4px 10px; font-size: 0.72rem; font-weight: 700; color: var(--on-img-badge); letter-spacing: 0.5px; text-transform: uppercase; } .product-stock-badge { position: absolute; top: 12px; right: 12px; border-radius: var(--radius-xs); padding: 4px 8px; font-size: 0.7rem; font-weight: 600; } .stock-in { background: rgba(16,185,129,0.15); color: var(--green-500); border: 1px solid rgba(16,185,129,0.25); } .stock-out { background: rgba(239, 68, 68,0.15); color: var(--red-400); border: 1px solid rgba(239,68,68,0.25); } /* Make/Model tag chip — product.php's structured "Marka / Model" row */ .model-tag { display: inline-block; background: rgba(59,130,246,0.12); color: var(--blue-400); border: 1px solid rgba(59,130,246,0.2); border-radius: var(--radius-xs); padding: 4px 10px; font-size: 0.78rem; font-weight: 600; margin: 0 6px 6px 0; } .product-card-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .product-category { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; } .product-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-code-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); border-radius: var(--radius-xs); padding: 4px 10px; font-size: 0.85rem; font-weight: 700; color: var(--blue-400); width: fit-content; font-family: 'Courier New', monospace; } .product-card-footer { padding: 0 18px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .product-price { font-size: 1.15rem; font-weight: 600; color: var(--price-color); letter-spacing: -0.2px; } .btn-add-cart { display: flex; align-items: center; gap: 6px; background: var(--gradient-blue); border: none; border-radius: var(--radius-sm); padding: 9px 16px; color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-add-cart:hover { transform: scale(1.04); box-shadow: var(--glow-blue); } .btn-add-cart:active { transform: scale(0.97); } .btn-add-cart.added { background: var(--green-500); } /* ============================================= BUTTONS ============================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; line-height: 1; } .btn-primary { background: var(--gradient-blue); color: #fff; } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: var(--glow-blue); } .btn-amber { background: var(--gradient-amber); color: var(--on-amber); } .btn-amber:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: var(--glow-amber); } .btn-whatsapp { background: #25D366; color: #fff; padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-md); } .btn-whatsapp:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 0 25px rgba(37,211,102,0.3); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--border-blue); color: var(--text-primary); background: var(--bg-card); } .btn-danger { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.25); color: var(--red-400); } .btn-danger:hover { background: rgba(239,68,68,0.25); } .btn-sm { padding: 7px 14px; font-size: 0.8rem; } .btn-lg { padding: 16px 32px; font-size: 1rem; } .btn-full { width: 100%; } /* ============================================= MINI CART SIDEBAR ============================================= */ .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 200; opacity: 0; visibility: hidden; transition: var(--transition); } .cart-overlay.open { opacity: 1; visibility: visible; } .cart-sidebar { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; background: var(--bg-secondary); border-left: 1px solid var(--border); z-index: 201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .cart-sidebar.open { transform: translateX(0); } .cart-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border); } .cart-sidebar-title { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .cart-close-btn { width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: var(--transition-fast); } .cart-close-btn:hover { color: var(--text-primary); border-color: var(--border-blue); } .cart-sidebar-items { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; } .cart-item { display: flex; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: 14px; transition: var(--transition-fast); } .cart-item:hover { border-color: var(--border); } .cart-item-img { width: 70px; height: 70px; border-radius: var(--radius-xs); background: var(--bg-primary); overflow: hidden; flex-shrink: 0; } .cart-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .cart-item-brand { font-size: 0.75rem; color: var(--blue-400); margin-bottom: 8px; } .cart-item-controls { display: flex; align-items: center; gap: 10px; } .qty-btn { width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; transition: var(--transition-fast); } .qty-btn:hover { border-color: var(--border-blue); color: var(--text-primary); } .qty-value { font-size: 0.9rem; font-weight: 700; min-width: 20px; text-align: center; } .cart-item-price { font-size: 1rem; font-weight: 700; color: var(--price-color); white-space: nowrap; align-self: center; } .cart-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: flex; align-items: center; transition: var(--transition-fast); align-self: flex-start; } .cart-item-remove:hover { color: var(--red-400); } .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; color: var(--text-muted); text-align: center; padding: 40px; } .cart-empty-icon { font-size: 3.5rem; opacity: 0.4; } .cart-sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--border); } .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .cart-total-label { color: var(--text-secondary); font-size: 0.9rem; } .cart-total-amount { font-size: 1.3rem; font-weight: 600; color: var(--price-color); } /* ============================================= FILTER SIDEBAR (Desktop) ============================================= */ .shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; } /* AJAX filtering (ShopFilter in main.js) swaps this region's contents in place. While the request is in flight the layout dims and stops taking clicks, so a second filter can't be queued against results that are about to be replaced. Deliberately no spinner and no height change — the grid must not shift under the pointer. */ .shop-layout.is-loading { opacity: .45; pointer-events: none; transition: opacity .18s ease; } .shop-layout.is-loading .filter-sidebar { /* The sidebar is what the user is actually interacting with — keep it legible so the control they just changed stays readable. */ opacity: .85; } .filter-sidebar { position: sticky; top: 90px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 24px; } .filter-title { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .filter-group { margin-bottom: 24px; } .filter-group-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .filter-check-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; } .filter-check-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition-fast); font-size: 0.85rem; } .filter-check-item:hover { background: var(--bg-secondary); } .filter-check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue-500); cursor: pointer; } /* ---- Filter list search (Brend) ---- */ .filter-search { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 10px; margin-bottom: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-muted); transition: var(--transition-fast); } .filter-search:focus-within { border-color: var(--border-blue); color: var(--blue-400); } .filter-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 8px 0; font-family: inherit; font-size: 0.82rem; color: var(--text-primary); } .filter-search input::placeholder { color: var(--text-muted); } .filter-search-empty { padding: 8px 10px; font-size: 0.78rem; color: var(--text-muted); } .filter-clear { display: block; margin-top: 8px; font-size: 0.75rem; color: var(--text-muted); transition: var(--transition-fast); } .filter-clear:hover { color: var(--red-400); } /* ============================================= SEARCHABLE SELECT (assets/js/searchable-select.js) The real