/* ============================================================
   MAKTABA SEARCH — строка поиска библиотеки/книги, страница выдачи
   и панель поиска в читалке (docs/search-tz-v1.md §8).
   Строка и выдача — общий компонент (css/kawn-search.css), здесь только
   размещение внутри Мактабы и панель читалки на её theme-токенах.
   ============================================================ */

/* Строка поиска над библиотекой / категорией / на странице книги */
.mkt-search {
    max-width: 760px;
    margin: 0 auto 28px;
}
.mkt-search .search-input {
    padding: 14px 64px 14px 22px;
    font-size: 15px;
}
@media (max-width: 640px) {
    .mkt-search { margin-bottom: 20px; }
}
.mkt-book-page .mkt-search { margin: 0 0 32px; max-width: 640px; }

/* Страница выдачи */
.mkt-search-page .ks-results { max-width: 960px; padding: 0; }

/* ── Панель поиска в читалке ── */
.mkt-reader-search .mkt-search-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
}
.mkt-search-panel-field { position: relative; }
.mkt-search-panel-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--mkt-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background: var(--mkt-bg, var(--surface-0));
    color: var(--mkt-text, var(--text-1));
    font: inherit;
    font-size: 15px;
}
.mkt-search-panel-input:focus { outline: none; border-color: var(--accent); }
.mkt-search-panel-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mkt-search-panel-clear {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--mkt-text, var(--text-2));
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}
.mkt-search-panel-clear:hover { opacity: 1; background: var(--mkt-border, var(--surface-2)); }
.mkt-search-scope { display: flex; gap: 6px; }
.mkt-search-scope .mkt-control-opt { flex: 1 1 0; }
.mkt-search-panel-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mkt-search-panel-msg {
    font-size: 13px;
    opacity: 0.7;
    padding: 6px 10px;
}
.mkt-search-hit {
    display: block;
    width: 100%;
    text-align: start;
    border: 0;
    border-inline-start: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 8px 10px;
    color: var(--mkt-text, var(--text-1));
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mkt-search-hit:hover, .mkt-search-hit:focus-visible {
    background: var(--mkt-bg, var(--surface-2));
    border-inline-start-color: var(--accent);
    outline: none;
}
.mkt-search-hit-crumb { font-size: 12px; opacity: 0.7; margin-bottom: 2px; }
.mkt-search-hit-text {
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkt-search-hit-text[dir="rtl"] { font-family: var(--font-arabic); font-size: 16px; line-height: var(--leading-arabic); }
.mkt-search-hit mark, mark.mkt-search-mark {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}