/* ── Enterprise Search 2026 ─────────────────────────────────────── */
/* 3 modes: --icon (toggle dropdown), --inline (always visible), --overlay (fullscreen) */
/* Dark mode: .dark class on <html>, uses CSS vars */

/* ── Base ──────────────────────────────────────────────────────── */
.enterprise-search {
    --es-bg: var(--fl-paper, #ffffff);
    --es-border: var(--fl-border, #e5e7eb);
    --es-text: var(--fl-text-primary, #111827);
    --es-text-secondary: var(--fl-text-secondary, #6b7280);
    --es-accent: var(--theme-primary, #3b82f6);
    --es-hover: #f3f4f6;
    --es-shadow: var(--fl-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    /* All corner rounding follows the theme-wide radius tokens (admin-configurable) */
    --es-radius: var(--theme-radius, 12px);
    --es-radius-lg: var(--theme-radius-lg, 16px);
    --es-radius-sm: var(--theme-radius-sm, 8px);
    --es-dropdown-max-h: 520px;
}

.dark .enterprise-search {
    --es-bg: var(--dark-surface, #1e1e2e);
    --es-border: var(--dark-border, #313244);
    --es-text: var(--dark-text, #cdd6f4);
    --es-text-secondary: var(--dark-text-secondary, #a6adc8);
    --es-hover: var(--dark-surface-hover, #313244);
    --es-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4);
}

/* ── Form ──────────────────────────────────────────────────────── */
.es-form {
    width: 100%;
}

.es-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--es-bg);
    border: 2px solid var(--es-border);
    border-radius: var(--es-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.es-input-group:focus-within {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-accent) 20%, transparent);
}

.es-input-icon {
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--es-text-secondary);
    flex-shrink: 0;
}

.es-input {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.5;
    background: transparent;
    border: none;
    outline: none;
    color: var(--es-text);
}

.es-input::placeholder {
    color: var(--es-text-secondary);
}

/* Remove browser default search input styling */
.es-input::-webkit-search-cancel-button,
.es-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.es-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    align-self: stretch;
    padding: 0;
    background: var(--es-accent);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.es-submit:hover {
    background: color-mix(in srgb, var(--es-accent) 80%, white);
}

.es-submit:focus-visible {
    outline: 2px solid white;
    outline-offset: -2px;
}

.dark #header .es-submit,
.dark .es-submit {
    background: color-mix(in srgb, var(--es-accent) 70%, white);
    color: #111;
}

.dark #header .es-submit:hover,
.dark .es-submit:hover {
    background: color-mix(in srgb, var(--es-accent) 55%, white);
    color: #111;
}

/* "esc" close chip — the single close affordance in overlay mode */
.es-esc-btn {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    margin-right: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--es-text-secondary);
    background: var(--es-hover);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}

.es-esc-btn:hover {
    color: var(--es-text);
    border-color: var(--es-accent);
}

/* ── Clear Buttons (in input group) ────────────────────────────── */
.es-clear-query-btn,
.es-clear-recent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-right: 4px;
    color: var(--es-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.es-clear-query-btn:hover,
.es-clear-recent-btn:hover {
    color: var(--es-text);
    background: var(--es-hover);
}

/* ── Keyboard Shortcut Hint ─────────────────────────────────────── */
.es-shortcut-hint {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    margin-right: 8px;
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--es-text-secondary);
    background: var(--es-hover);
    border: 1px solid var(--es-border);
    white-space: nowrap;
    pointer-events: none;
    flex-shrink: 0;
    border-radius: var(--theme-radius-xs, 4px);
}

@media (min-width: 768px) {
    .es-shortcut-hint {
        display: flex;
    }
}

/* ── Dropdown ──────────────────────────────────────────────────── */
.es-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow);
    overflow-y: auto;
    max-height: var(--es-dropdown-max-h);
    z-index: 50;
    scrollbar-width: thin;
    scrollbar-color: var(--es-border) transparent;
}

.es-dropdown::-webkit-scrollbar {
    width: 4px;
}

.es-dropdown::-webkit-scrollbar-thumb {
    background: var(--es-border);
    border-radius: 2px;
}

.es-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Sections & Titles ─────────────────────────────────────────── */
.es-section {
    padding: 8px 0;
}

.es-section + .es-section {
    border-top: 1px solid var(--es-border);
}

.es-section-title {
    display: block;
    padding: 4px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--es-text-secondary);
}

/* ── Result Items ──────────────────────────────────────────────── */
.es-result-item,
.es-preset-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--es-text);
    transition: background 0.1s;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font-size: 0.9375rem;
}

.es-result-item:hover,
.es-result-item.es-active,
.es-preset-item:hover,
.es-preset-item.es-active {
    background: var(--es-hover);
}

.es-preset-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--es-text-secondary);
}

.es-page-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--es-text-secondary);
}

/* ── Thumbnails ────────────────────────────────────────────────── */
/* Product photo: shown whole on the surface, a non-square one is letterboxed, not cropped or upscaled */
.es-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--es-radius-sm);
    background: var(--es-hover);
    flex-shrink: 0;
}

/* Page and article covers are drawn 1200x630 — the wide slot crops them edge to edge */
.es-thumb-wide {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--es-radius-sm);
}

/* ── Item Info ─────────────────────────────────────────────────── */
.es-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.es-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* совпадение с запросом: <mark> без классов — заголовок вставляет x-safe-html (E78) */
.es-item-title mark {
    background: var(--color-yellow-200, #fef08a);
    color: inherit;
    border-radius: 0.25rem;
    padding: 0 0.125rem;
}

.dark .es-item-title mark {
    background: color-mix(in srgb, var(--color-yellow-800, #854d0e) 50%, transparent);
}

.es-item-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-accent);
}

/* ── Did You Mean ──────────────────────────────────────────────── */
.es-did-you-mean {
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--es-text-secondary);
    border-bottom: 1px solid var(--es-border);
}

.es-did-you-mean-link {
    color: var(--es-accent);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.es-did-you-mean-link:hover {
    opacity: 0.8;
}

/* ── No Results ────────────────────────────────────────────────── */
.es-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--es-text-secondary);
    font-size: 0.9375rem;
}

/* ── View All ──────────────────────────────────────────────────── */
.es-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--es-accent);
    background: transparent;
    border: none;
    border-top: 1px solid var(--es-border);
    cursor: pointer;
    transition: background 0.15s;
}

.es-view-all:hover {
    background: var(--es-hover);
}

/* ── Skeleton Loading ──────────────────────────────────────────── */
.es-skeleton {
    padding: 8px 0;
}

.es-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.es-skeleton-img {
    width: 48px;
    height: 48px;
    border-radius: var(--es-radius-sm);
    background: linear-gradient(90deg, var(--es-hover) 25%, color-mix(in srgb, var(--es-hover) 50%, transparent) 50%, var(--es-hover) 75%);
    background-size: 200% 100%;
    animation: es-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.es-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.es-skeleton-line {
    height: 12px;
    border-radius: var(--es-radius-sm);
    background: linear-gradient(90deg, var(--es-hover) 25%, color-mix(in srgb, var(--es-hover) 50%, transparent) 50%, var(--es-hover) 75%);
    background-size: 200% 100%;
    animation: es-shimmer 1.5s ease-in-out infinite;
}

@keyframes es-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODE: ICON (toggle dropdown — current behavior enhanced)       */
/* ═══════════════════════════════════════════════════════════════ */
.enterprise-search--icon {
    position: relative;
    width: 100%;
    max-width: var(--screen-2xl, 1536px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .enterprise-search--icon {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .enterprise-search--icon {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.enterprise-search--icon .es-search-wrapper {
    padding: 12px 0;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODE: INLINE (always visible in header, marketplace-style)     */
/* ═══════════════════════════════════════════════════════════════ */
.enterprise-search--inline {
    position: relative;
    flex: 1;
    max-width: 600px;
    margin: 0 24px;
}

.enterprise-search--inline .es-search-wrapper {
    width: 100%;
}

.enterprise-search--inline .es-input-group {
    border-radius: 99px;
}

.enterprise-search--inline .es-submit {
    border-radius: 0 99px 99px 0;
}

.enterprise-search--inline .es-dropdown {
    border-radius: var(--es-radius-lg);
    margin-top: 8px;
}

/* When inline mode is active, hide the icon-toggle search dropdown on desktop */
/* The search icon button and #search-content are only needed on mobile */
/* Mode comes as a <body> class (Observer\AddSearchStyleBodyClass), not body:has(): :has() on <body>
   recalculated styles of the whole page on every inserted node (board D1 (i)). */
@media (min-width: 768px) {
    body.es-style-inline #search-content {
        display: none;
    }
}

@media (max-width: 767px) {
    .enterprise-search--inline {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODE: OVERLAY (fullscreen modal — Apple/Spotify style)         */
/* ═══════════════════════════════════════════════════════════════ */
.enterprise-search--overlay {
    position: relative;
}

.es-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(10 12 24 / 0.45);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    z-index: 90;
}

.dark .es-overlay-backdrop {
    background: rgb(0 0 0 / 0.65);
}

/* In overlay mode the header's #search-content bar is redundant chrome —
   the search UI is teleported to <body> as a fullscreen modal. */
body.es-style-overlay #search-content {
    display: none;
}

.enterprise-search--overlay .es-search-wrapper {
    position: fixed;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
    max-width: 1200px;
    z-index: 100;
}

.enterprise-search--overlay .es-input-group {
    border-radius: var(--es-radius-lg);
    border-width: 1px;
    box-shadow: var(--es-shadow);
}

/* The rule above comes later than .es-input-group:focus-within and took its glow away, so the overlay field showed
   no focus once the theme's unlayered outline stopped covering for it (E752). 1px border + 1px ring = the 2px
   accent edge of the base group. */
.enterprise-search--overlay .es-input-group:focus-within {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 1px var(--es-accent), 0 0 0 4px color-mix(in srgb, var(--es-accent) 20%, transparent), var(--es-shadow);
}

.enterprise-search--overlay .es-input {
    font-size: 1.125rem;
    padding-top: 14px;
    padding-bottom: 14px;
}

.enterprise-search--overlay .es-input-icon {
    padding-left: 14px;
}

.enterprise-search--overlay .es-dropdown {
    position: relative;
    top: auto;
    margin-top: 12px;
    border-radius: var(--es-radius-lg);
    max-height: min(70vh, 760px);
}

/* ═══════════════════════════════════════════════════════════════ */
/* Cards layout (desktop, admin-switchable: Suggestions Layout)   */
/* ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* auto-fill keeps the empty tracks, so one or two results take one column instead of the whole panel (a 360px
       thumbnail stretched over the row went blurry, E885). The column is the width a full row gives each card —
       --es-row cards per row, set from the admin «Max …» counts on the element — and never narrower than the old
       minimum, below which the row wraps exactly as before. */
    .es-results--cards .es-section-items {
        --es-row: 5;
        --es-card-gap: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - (var(--es-row) - 1) * var(--es-card-gap)) / var(--es-row))), 1fr));
        gap: var(--es-card-gap);
        padding: 4px 16px 14px;
    }

    .es-results--cards .es-section-items--wide {
        --es-row: 3;
        grid-template-columns: repeat(auto-fill, minmax(max(215px, calc((100% - (var(--es-row) - 1) * var(--es-card-gap)) / var(--es-row))), 1fr));
    }

    .es-results--cards .es-result-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--es-border);
        border-radius: var(--es-radius);
        transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.1s;
    }

    .es-results--cards .es-result-item:hover,
    .es-results--cards .es-result-item.es-active {
        background: var(--es-bg);
        border-color: var(--es-accent);
        box-shadow: var(--es-shadow);
        transform: translateY(-2px);
    }

    .es-results--cards .es-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: var(--es-radius-sm);
    }

    .es-results--cards .es-thumb-wide {
        aspect-ratio: 1200 / 630;
    }

    .es-results--cards .es-item-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .es-results--cards .es-item-info {
        gap: 4px;
    }

    .es-results--cards .es-item-price {
        font-size: 0.875rem;
    }

    /* Placeholder tile when a page/post has no cover image */
    .es-results--cards .es-page-icon {
        width: 100%;
        aspect-ratio: 1200 / 630;
        border-radius: var(--es-radius-sm);
        background: var(--es-hover);
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Responsive                                                     */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .enterprise-search--icon .es-search-wrapper {
        padding: 8px 12px;
    }

    /* Overlay: top-aligned on mobile (directly under header) */
    .enterprise-search--overlay .es-search-wrapper {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        transform: none;
        border-radius: 0 0 20px 20px;
        background: var(--es-bg);
        padding: 0 0 env(safe-area-inset-bottom, 0);
        max-height: 85vh;
        overflow-y: auto;
    }

    .enterprise-search--overlay .es-input-group {
        margin: 12px;
        border-radius: var(--es-radius);
    }

    .enterprise-search--overlay .es-dropdown {
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-height: 60vh;
    }

    /* Swipe handle indicator */
    .enterprise-search--overlay .es-search-wrapper::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--es-border);
        border-radius: 2px;
        margin: 8px auto;
    }

    .es-dropdown {
        --es-dropdown-max-h: 60vh;
    }

    /* Touch-friendly hit targets (min 44px per Apple HIG) */
    .es-result-item,
    .es-preset-item {
        padding: 12px;
        font-size: 0.875rem;
        min-height: 44px;
    }

    .es-thumb {
        width: 40px;
        height: 40px;
    }

    .es-input {
        font-size: 1rem; /* Prevent iOS zoom on focus (must be ≥16px) */
    }

    .es-submit {
        padding: 14px;
    }

    .es-view-all {
        padding: 14px;
        min-height: 44px;
    }
}