/* search-extra.css - extra rows of the header search dropdown + the /search page (search.php). The base dropdown styles are in style.css. */

.search-suggest { padding: .6rem 1rem; font-size: .85rem; color: var(--text-secondary, #94a3b8); border-bottom: 1px solid var(--border-color, #334155); }
.search-suggest-btn { background: none; border: 0; padding: 0; margin-left: .25rem; font: inherit; font-weight: 700; color: var(--accent-blue, #3b82f6); cursor: pointer; text-decoration: underline; }
.search-all-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; margin-bottom: .5rem; border-radius: 8px; background: var(--bg-dark, #141828); border: 1px solid var(--border-color, #334155); color: var(--text-light, #fff); text-decoration: none; font-weight: 600; font-size: .9rem; }
.search-all-btn:hover { border-color: var(--accent-blue, #3b82f6); }
.search-result-item.highlighted { background: rgba(59, 130, 246, .15); }

/* /search page */
.sp-main { padding: 2rem 0 4rem; min-height: 60vh; }
.sp-title { font-size: 1.7rem; margin-bottom: 1rem; color: var(--text-light, #fff); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-form { position: relative; display: flex; gap: .6rem; max-width: 720px; margin-bottom: 1.5rem; }
.sp-form i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary, #94a3b8); pointer-events: none; }
.sp-form input { flex: 1; padding: .9rem 1rem .9rem 2.6rem; border-radius: 10px; border: 1px solid var(--border-color, #334155); background: var(--bg-card, #1c2136); color: var(--text-light, #fff); font-size: 1rem; font-family: inherit; }
.sp-form input:focus { outline: 2px solid var(--accent-blue, #3b82f6); outline-offset: 1px; }
.sp-form button { padding: 0 1.4rem; border: 0; border-radius: 10px; background: var(--accent-blue, #3b82f6); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.sp-note, .sp-count { color: var(--text-secondary, #94a3b8); margin: 0 0 1rem; }
.sp-count a { color: var(--accent-blue, #3b82f6); }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 820px; }
.sp-item { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bg-card, #1c2136); border: 1px solid var(--border-color, #334155); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.sp-item:hover, .sp-item:focus-visible { border-color: var(--accent-blue, #3b82f6); transform: translateY(-1px); }
.sp-thumb { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--bg-dark, #141828); display: flex; align-items: center; justify-content: center; color: var(--text-secondary, #94a3b8); }
.sp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sp-name { font-weight: 600; color: var(--text-light, #fff); overflow: hidden; text-overflow: ellipsis; }
.sp-label { align-self: flex-start; font-size: .72rem; padding: .1rem .55rem; border-radius: 999px; background: rgba(59, 130, 246, .15); color: var(--accent-blue, #3b82f6); font-weight: 700; }
.sp-arrow { color: var(--text-secondary, #94a3b8); }
.sp-pager { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; color: var(--text-secondary, #94a3b8); }
.sp-pager a { padding: .4rem .9rem; border: 1px solid var(--border-color, #334155); border-radius: 8px; color: var(--text-light, #fff); text-decoration: none; }
.sp-empty { text-align: center; padding: 2.5rem 1rem; max-width: 560px; margin: 0 auto; }
.sp-empty > i { font-size: 2.2rem; color: var(--text-secondary, #94a3b8); margin-bottom: .8rem; }
.sp-empty p { margin: .3rem 0; color: var(--text-light, #fff); }
.sp-empty .sp-sub { color: var(--text-secondary, #94a3b8); }
.sp-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.sp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .92rem; }
.sp-wa { background: #25d366; color: #fff !important; }
.sp-order { background: var(--accent-premium, #f0b90b); color: #141828 !important; }
.sp-more { margin-top: 1.5rem; }
@media (max-width: 600px) { .sp-form { flex-direction: column; } .sp-form button { padding: .8rem; } }