/* Header + mobile-menu live search (livewire/search/header-search.blade.php).
   Brand tokens come from public/css/home.css. */

[x-cloak] { display: none !important; }

.sr-search { position: relative; width: 100%; max-width: 480px; }
.sr-search--compact { max-width: none; margin-bottom: 1.25rem; }
.sr-search--compact .tbp-mm-search { margin-bottom: 0; }

/* Hide the browser's own clear "x" so it doesn't clash with the button. */
.sr-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.sr-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: .5rem;
    z-index: 1040; /* above the sticky .tbp-nav (1030) */
    color: var(--hp-text);
}
.sr-search--compact .sr-panel { position: static; min-width: 0; margin-top: .5rem; box-shadow: none; }

.sr-group + .sr-group { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--hp-border); }

.sr-label {
    display: block;
    padding: .5rem .6rem .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.sr-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .6rem;
    border-radius: 10px;
    color: var(--hp-text);
    text-decoration: none;
    outline: none;
}
.sr-row:hover,
.sr-row:focus-visible { background: var(--hp-purple-soft); color: var(--hp-purple); }

.sr-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background: var(--hp-purple-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hp-purple);
}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sr-name {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .35rem;
    padding: .65rem;
    border-top: 1px solid var(--hp-border);
    color: var(--hp-purple);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.sr-all:hover,
.sr-all:focus-visible { text-decoration: underline; color: var(--hp-purple-dark); }
.sr-all i { font-size: .75em; }

.sr-empty { padding: 1rem .75rem; text-align: center; }
.sr-empty strong { display: block; margin-bottom: .35rem; font-size: .9rem; }
.sr-empty p { margin: 0 0 .85rem; font-size: .8rem; color: var(--hp-muted); }
.sr-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

.sr-btn,
.sr-btn-outline {
    display: inline-block;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--hp-purple);
}
.sr-btn { background: var(--hp-purple); color: #fff; }
.sr-btn:hover { background: var(--hp-purple-dark); border-color: var(--hp-purple-dark); color: #fff; }
.sr-btn-outline { background: #fff; color: var(--hp-purple); }
.sr-btn-outline:hover { background: var(--hp-purple-soft); color: var(--hp-purple); }

@media (max-width: 575.98px) {
    .sr-search { max-width: none; }
    .sr-panel { min-width: 0; }
}