/* ============================================================ STOMAPOINT — Search Feature Styles Adaugă în DUPĂ styles.css și mobile.css: ============================================================ */ /* ── Search toggle button (navbar) ── */ .search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: #333; cursor: pointer; border-radius: 50%; transition: background-color 0.2s ease, color 0.2s ease; margin-left: 8px; flex-shrink: 0; } .search-toggle:hover { background-color: rgba(201, 168, 106, 0.12); color: #C9A86A; } /* ── Overlay ── */ .search-overlay { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; z-index: 2000; padding: 90px 16px 16px; box-sizing: border-box; opacity: 0; transition: opacity 0.2s ease; } .search-overlay.active { display: flex; opacity: 1; } /* ── Search box ── */ .search-box { background: #fff; width: 100%; max-width: 600px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); overflow: hidden; max-height: 80vh; display: flex; flex-direction: column; transform: translateY(-12px); transition: transform 0.2s ease; } .search-overlay.active .search-box { transform: translateY(0); } .search-input-wrapper { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0; } .search-input-wrapper svg { color: #C9A86A; flex-shrink: 0; } #searchInput { flex: 1; border: none; outline: none; font-size: 1rem; font-family: inherit; background: transparent; color: #333; } #searchInput::placeholder { color: #999; } .search-close { border: none; background: none; font-size: 1.1rem; color: #999; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color 0.2s ease, background-color 0.2s ease; flex-shrink: 0; } .search-close:hover { color: #333; background-color: rgba(0, 0, 0, 0.05); } /* ── Results ── */ .search-results { overflow-y: auto; padding: 8px; } .search-result-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: inherit; cursor: pointer; transition: background-color 0.15s ease; } .search-result-item:hover, .search-result-item.highlighted { background-color: rgba(201, 168, 106, 0.1); } .search-result-title { font-weight: 600; color: #333; font-size: 0.98rem; } .search-result-title mark { background-color: rgba(201, 168, 106, 0.35); color: inherit; border-radius: 3px; padding: 0 1px; } .search-result-meta { font-size: 0.82rem; color: #999; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .search-result-desc { font-size: 0.88rem; color: #777; line-height: 1.4; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search-result-price { font-weight: 700; color: #C9A86A; } .search-empty, .search-hint { padding: 32px 16px; text-align: center; color: #999; font-size: 0.92rem; } /* ── Mobile adjustments ── */ @media (max-width: 768px) { .search-overlay { padding: 70px 12px 12px; align-items: flex-start; } .search-box { max-height: 75vh; border-radius: 12px; } .search-input-wrapper { padding: 14px 14px; } #searchInput { font-size: 16px; /* prevents iOS zoom */ } .search-toggle { margin-left: 4px; } }