/* =========================================================
   StartPOZI — Поисковая строка (общая, как в DuckDuckGo)
   • Лупа в конце строки: при наведении конец строки тёмно-голубой,
     при клике — поиск (как Enter)
   • Крестик рядом с лупой: только когда есть текст, при наведении
     увеличивается и краснеет, при клике — очищает
   • При фокусе — тёмно-голубая обводка по контуру
   Автоматически применяется к #search-input (index.html, search.html).
   ========================================================= */

.spz-bar { --spz-bar-accent: #1a56db; }
:root[data-spz-theme="dark"] .spz-bar { --spz-bar-accent: #3b82f6; }
:root[data-spz-theme="dark2"] .spz-bar { --spz-bar-accent: #4a8bf5; }

/* Контейнер кнопок справа */
.spz-bar-actions {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

/* Лупа — кнопка отправки */
.spz-loupe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-light, #70757a);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.spz-loupe svg { width: 19px; height: 19px; display: block; }
.spz-loupe:hover {
    background: var(--spz-bar-accent);
    color: #ffffff;
    transform: scale(1.04);
}
.spz-loupe:active { transform: scale(0.96); }

/* Крестик — очистка */
.spz-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-light, #70757a);
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.spz-clear svg { width: 16px; height: 16px; display: block; }
.spz-bar.has-text .spz-clear { display: flex; }
.spz-clear:hover {
    transform: scale(1.28);
    color: #ea4335;
    background: rgba(234, 67, 53, 0.10);
}
.spz-clear:active { transform: scale(1.1); }

/* Место под кнопки в самом поле */
.spz-bar #search-input { padding-right: 84px !important; }

/* Фокус — тёмно-голубой контур */
.spz-bar #search-input:focus {
    border-color: var(--spz-bar-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.18) !important;
}
:root[data-spz-theme="dark"] .spz-bar #search-input:focus,
:root[data-spz-theme="dark2"] .spz-bar #search-input:focus {
    box-shadow: 0 0 0 3px rgba(74, 139, 245, 0.22) !important;
}

@media (max-width: 480px) {
    .spz-bar #search-input { padding-right: 76px !important; }
    .spz-loupe { width: 34px; height: 34px; }
}