/* Shared Anime/Manga search. Separate classes avoid legacy page search styles. */
.header-search,
.header-search-overlay {
    --header-search-text: var(--yz-text, #f0f0f5);
    --header-search-muted: var(--yz-muted, #a7a7af);
    --header-search-border: var(--yz-border, rgba(255, 255, 255, .12));
    --header-search-surface: var(--yz-surface-1, #0b0b0d);
    --header-search-row: var(--bg-elevated, #1b1e24);
    --header-search-focus: var(--yz-purple, #a855f7);
    color: var(--header-search-text);
}

.navbar .header-search--desktop {
    position: relative;
    display: block;
    flex: 1 1 20rem;
    order: 3;
    min-width: 13rem;
    max-width: 23.5rem;
    margin-left: auto;
}

.navbar .user-menu > .mobile-search-toggle,
.home-route .navbar .user-menu > .mobile-search-toggle {
    display: none;
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .25rem .5rem .25rem .75rem;
    border: 1px solid var(--header-search-border);
    border-radius: .5rem;
    background: rgba(22, 23, 28, .94);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.header-search-form:focus-within {
    border-color: var(--header-search-focus);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .22);
}

.header-search-icon {
    flex: 0 0 auto;
    color: var(--header-search-muted);
    pointer-events: none;
}

.header-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: .25rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--header-search-text);
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.5;
    appearance: none;
}

.header-search-input::placeholder {
    color: var(--header-search-muted);
    opacity: 1;
}

.header-search-input:focus,
.header-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.header-search-clear,
.header-search-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--header-search-muted);
    cursor: pointer;
}

.header-search-clear:hover,
.header-search-close:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--header-search-text);
}

.header-search-panel {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    z-index: 70;
    width: max(100%, 22rem);
    max-width: calc(100vw - 2rem);
    max-height: min(36rem, calc(100dvh - 5.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
    border: 1px solid var(--header-search-border);
    border-radius: 1rem;
    background: var(--header-search-surface);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .42);
}

.header-search-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    gap: .25rem;
    margin: .75rem;
    padding: .25rem;
    border: 1px solid var(--header-search-border);
    border-radius: .75rem;
    background: #19191d;
}

.header-search-tab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 0;
    min-height: 2.25rem;
    padding: .25rem .5rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--header-search-muted);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
}

.header-search-tab:hover {
    color: var(--header-search-text);
}

.header-search-tab[aria-selected="true"] {
    background: #fafafa;
    color: #111114;
}

.header-search-status {
    margin: 0;
    padding: 1rem 1.25rem;
    color: var(--header-search-muted);
    font-size: .875rem;
    line-height: 1.6;
    text-align: center;
}

.header-search-history {
    padding: 0 .75rem .875rem;
}

.header-search-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.header-search-history-heading h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--header-search-muted);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.header-search-history-clear {
    padding: .25rem;
    border: 0;
    background: transparent;
    color: var(--header-search-muted);
    font-family: inherit;
    font-size: .8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.header-search-history-clear:hover {
    color: var(--header-search-text);
}

.header-search-recents {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}

.header-search-history-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--header-search-border);
    border-radius: .625rem;
    background: #1b1b1d;
}

.header-search-history-query {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2rem;
    overflow: hidden;
    padding: .25rem .375rem .25rem .75rem;
    border: 0;
    background: transparent;
    color: var(--header-search-text);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 550;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.header-search-history-remove {
    display: grid;
    flex: 0 0 2rem;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--header-search-muted);
    cursor: pointer;
}

.header-search-history-query:hover,
.header-search-history-remove:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.header-search-history-empty {
    margin: .25rem 0;
    color: var(--header-search-muted);
    font-size: .8125rem;
}

.header-search-results:empty {
    display: none;
}

.header-search-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border-top: 1px solid var(--header-search-border);
    background: var(--header-search-row);
    color: var(--header-search-text);
    text-decoration: none;
    transition: background 150ms ease;
}

.header-search-result:hover,
.header-search-result[aria-selected="true"] {
    background: #2a2b32;
    color: var(--header-search-text);
}

.header-search-result-poster {
    display: block;
    flex: 0 0 3rem;
    width: 3rem;
    height: 4.25rem;
    border-radius: .25rem;
    background: #303139;
    object-fit: cover;
}

.header-search-result-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.header-search-result-title,
.header-search-result-secondary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result-title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
}

.header-search-result-secondary {
    color: #d0d0d7;
    font-size: .8125rem;
    line-height: 1.5;
}

.header-search-result-meta {
    display: block;
    color: var(--header-search-muted);
    font-size: .75rem;
    line-height: 1.5;
}

.header-search-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--header-search-border);
    color: var(--header-search-text);
    font-size: .8125rem;
    font-weight: 550;
    text-decoration: none;
}

.header-search-all:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.header-search :is(button, a):focus-visible,
.header-search-close:focus-visible,
.navbar .mobile-search-toggle:focus-visible {
    outline: 2px solid var(--header-search-focus, var(--yz-purple));
    outline-offset: -2px;
}

.header-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    align-items: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(1rem, env(safe-area-inset-top)) .75rem max(1rem, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-search-dialog {
    width: 100%;
    min-width: 0;
    max-width: 38rem;
    margin-inline: auto;
    padding: 1rem;
    border: 1px solid var(--header-search-border);
    border-radius: 1rem;
    background: var(--header-search-surface);
}

.header-search-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.header-search-dialog-heading h2 {
    margin: 0;
    color: var(--header-search-text);
    font-size: 1rem;
    font-weight: 650;
}

.header-search--mobile .header-search-input {
    font-size: 1rem;
}

.header-search--mobile .header-search-panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 10rem);
    margin-top: .75rem;
    box-shadow: none;
}

.header-search--mobile :is(.header-search-clear, .header-search-tab, .header-search-history-query, .header-search-history-remove),
.header-search-overlay .header-search-close {
    min-height: 2.75rem;
}

.header-search--mobile .header-search-history-remove {
    flex-basis: 2.75rem;
    width: 2.75rem;
}

.header-search--mobile .header-search-history-clear {
    min-height: 2.75rem;
}

/* Native hidden must win over flex/grid declarations when JS closes a surface. */
.header-search [hidden],
.header-search-overlay[hidden] {
    display: none !important;
}

@media (min-width: 1001px) and (max-width: 1180px) {
    .navbar .header-search--desktop {
        flex-basis: 15rem;
        max-width: 18.75rem;
    }
}

@media (max-width: 1000px) {
    .navbar .header-search--desktop {
        display: none;
    }

    .navbar .user-menu > .mobile-search-toggle,
    .home-route .navbar .user-menu > .mobile-search-toggle {
        display: grid;
    }
}

@media (max-width: 360px) {
    .header-search-dialog {
        padding: .75rem;
    }

    .header-search-result {
        gap: .75rem;
        padding: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-search-form,
    .header-search-result {
        transition: none;
    }
}