/**
 * Merida Search — Autocomplete Dropdown
 *
 * BEM naming, CSS custom properties.
 * Layers on top of .merida-search-field from custom-header.css.
 */

/* ================================================================
   Custom Properties
   ================================================================ */
:root {
    --ms-dropdown-bg: var(--global-palette9, #fff);
    --ms-dropdown-border: var(--global-palette7, #d0d5dd);
    --ms-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ms-dropdown-radius: 12px;
    --ms-dropdown-max-height: 480px;
    --ms-dropdown-z: 99999;

    --ms-item-hover-bg: var(--global-palette8, #f5f7fa);
    --ms-item-active-bg: var(--global-palette7, #e8ecf0);
    --ms-item-padding: 10px 16px;
    --ms-item-gap: 12px;

    --ms-title-color: var(--global-palette3, #1a1a2e);
    --ms-title-size: 14px;
    --ms-title-weight: 600;

    --ms-meta-color: var(--global-palette5, #666);
    --ms-meta-size: 12px;

    --ms-image-size: 48px;
    --ms-image-radius: 6px;
    --ms-image-bg: var(--global-palette8, #f5f7fa);

    --ms-see-all-color: var(--merida-brand-color, #183e86);
    --ms-see-all-size: 14px;
    --ms-see-all-weight: 600;
}

/* ================================================================
   Search Wrapper — Positioning context for dropdown
   ================================================================ */
.merida-main-header__search,
.merida-header-search {
    position: relative;
}

/* ================================================================
   Dropdown Container
   ================================================================ */
.merida-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--ms-dropdown-z);
    background: var(--ms-dropdown-bg);
    border: 1px solid var(--ms-dropdown-border);
    border-radius: var(--ms-dropdown-radius);
    box-shadow: var(--ms-dropdown-shadow);
    max-height: var(--ms-dropdown-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: none;
}

.merida-search-results--visible {
    display: block;
}

/* ================================================================
   Result Item
   ================================================================ */
.merida-search-result {
    display: flex;
    align-items: center;
    gap: var(--ms-item-gap);
    padding: var(--ms-item-padding);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
    border-bottom: 1px solid var(--ms-dropdown-border);
}

.merida-search-result:last-of-type {
    border-bottom: none;
}

.merida-search-result:hover,
.merida-search-result--active {
    background: var(--ms-item-hover-bg);
}

.merida-search-result:active {
    background: var(--ms-item-active-bg);
}

/* ================================================================
   Result — Image
   ================================================================ */
.merida-search-result__image {
    width: var(--ms-image-size);
    height: var(--ms-image-size);
    object-fit: contain;
    border-radius: var(--ms-image-radius);
    background: var(--ms-image-bg);
    flex-shrink: 0;
}

/* ================================================================
   Result — Content
   ================================================================ */
.merida-search-result__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.merida-search-result__title {
    font-size: var(--ms-title-size);
    font-weight: var(--ms-title-weight);
    color: var(--ms-title-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merida-search-result__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ms-meta-size);
    color: var(--ms-meta-color);
    line-height: 1.3;
}

.merida-search-result__sku {
    font-size: var(--ms-meta-size);
    color: var(--ms-meta-color);
}

.merida-search-result__category {
    font-size: var(--ms-meta-size);
    color: var(--ms-meta-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Separator dot between meta items */
.merida-search-result__meta-sep {
    color: var(--ms-dropdown-border);
}

/* ================================================================
   "See All Results" Link
   ================================================================ */
.merida-search-results__all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: var(--ms-see-all-size);
    font-weight: var(--ms-see-all-weight);
    color: var(--ms-see-all-color);
    text-decoration: none;
    border-top: 1px solid var(--ms-dropdown-border);
    transition: background-color 0.15s;
    cursor: pointer;
}

.merida-search-results__all:hover {
    background: var(--ms-item-hover-bg);
}

/* ================================================================
   Loading State
   ================================================================ */
.merida-search-results__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--ms-meta-color);
    font-size: var(--ms-meta-size);
}

/* ================================================================
   No Results
   ================================================================ */
.merida-search-results__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--ms-meta-color);
    font-size: var(--ms-title-size);
}

/* ================================================================
   Overlay — Click-to-close backdrop
   ================================================================ */
.merida-search-results__overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ms-dropdown-z) - 1);
    display: none;
}

.merida-search-results__overlay--visible {
    display: block;
}

/* ================================================================
   Mobile — Full-width dropdown, capped height
   ================================================================ */
@media (max-width: 1024px) {
    .merida-search-results {
        max-height: 60vh;
        border-radius: 0 0 var(--ms-dropdown-radius) var(--ms-dropdown-radius);
    }
}

/* ================================================================
   Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .merida-search-result,
    .merida-search-results__all {
        transition: none;
    }
}