/**
 * Cubix_AlgoliaCustom — cubix-search.css
 *
 * Transforms Algolia's default dropdown into a James Allen-style
 * two-column popup modal.
 *
 * HOW IT WORKS:
 * Algolia renders its panel as:
 *   <div class="aa-Panel autocomplete-panel">
 *     <div class="aa-PanelLayout">
 *       <section data-autocomplete-source-id="popular_searches">...</section>
 *       <section data-autocomplete-source-id="suggestions">...</section>
 *       <section data-autocomplete-source-id="categories">...</section>
 *       <section data-autocomplete-source-id="products">...</section>
 *     </div>
 *   </div>
 *
 * We use CSS Grid on aa-PanelLayout to split these sections into
 * left (suggestions/categories) and right (products) columns.
 * No JS needed for layout — pure CSS.
 *
 * EMPTY STATE (panel opens, no query):
 * popular_searches section shows on left.
 * products section shows default products on right (from openOnFocus query).
 *
 * TYPING STATE:
 * popular_searches hides (getItems returns [] when query.length > 0).
 * suggestions + categories show on left.
 * products update on right.
 */

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
    --dh-gold:       #C9A84C;
    --dh-gold-pale:  #F5EDD5;
    --dh-gold-light: #E8D48A;
    --dh-charcoal:   #1A1A1A;
    --dh-warm-white: #FDFAF5;
    --dh-border:     #E2D9C8;
    --dh-mid:        #6B6B6B;
    --dh-serif:      'Cormorant Garamond', Georgia, serif;
    --dh-sans:       'Montserrat', -apple-system, sans-serif;
}

/* ── Panel container ───────────────────────────────────────────────── */
/* ── Detached overlay (the dark backdrop) ─────────────────────── */
/* ── Force the body class Algolia adds when detached is open ── */

/* ── Panel inside modal — two column grid ────────────────────── */
.aa-DetachedContainer .aa-Panel {
    /* No positioning tricks needed — it's already inside the modal */
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.aa-DetachedContainer .aa-PanelLayout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 380px;
    padding: 0;
}

/* Left column sources */
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="popular_searches"],
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="suggestions"],
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="categories"] {
    grid-column: 1;
    border-right: 1px solid #E2D9C8;
    padding: 16px 0;
}

.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="popular_searches"] { grid-row: 1; }
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="suggestions"]      { grid-row: 2; }
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="categories"]       { grid-row: 3; }

/* Right column — products */
.aa-DetachedContainer .aa-Source[data-autocomplete-source-id="products"] {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding: 16px;
    background: #FDFAF5;
}

/* ── Trigger button (what the search icon becomes) ───────────── */
/* Wire your existing search icon to open the modal instead */
/* Algolia replaces the input — hide the detached button it creates,
   keep using your theme's search icon as the trigger               */
.aa-DetachedSearchButton {
    display: none; /* we use the existing Magento search icon */
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .aa-DetachedContainer {
        margin: 0 !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        min-height: 100vh;
    }
    .aa-DetachedContainer .aa-PanelLayout {
        grid-template-columns: 1fr;
    }
    .aa-DetachedContainer .aa-Source[data-autocomplete-source-id="products"] {
        grid-column: 1;
        grid-row: auto;
        border-top: 1px solid #E2D9C8;
    }
    .aa-DetachedContainer .aa-Source[data-autocomplete-source-id="products"] .aa-List {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Source sections — LEFT column ────────────────────────────────── */
.autocomplete-panel .aa-Source[data-autocomplete-source-id="popular_searches"],
.autocomplete-panel .aa-Source[data-autocomplete-source-id="suggestions"],
.autocomplete-panel .aa-Source[data-autocomplete-source-id="categories"] {
    grid-column: 1;
    border-right: 1px solid var(--dh-border);
    padding: 20px 0;
    overflow-y: auto;
}

/* Stack left-column sources vertically */
.autocomplete-panel .aa-Source[data-autocomplete-source-id="popular_searches"] { grid-row: 1; }
.autocomplete-panel .aa-Source[data-autocomplete-source-id="suggestions"]      { grid-row: 2; }
.autocomplete-panel .aa-Source[data-autocomplete-source-id="categories"]       { grid-row: 3; }

/* ── Source section — RIGHT column (products) ──────────────────────── */
.autocomplete-panel .aa-Source[data-autocomplete-source-id="products"] {
    grid-column: 2;
    grid-row: 1 / span 3;   /* span all rows */
    padding: 20px;
    background: var(--dh-warm-white);
}

/* ── Hide empty sources cleanly ───────────────────────────────────── */
.autocomplete-panel .aa-Source:empty { display: none; }

/* ── Reset Algolia default item styles ────────────────────────────── */
.autocomplete-panel .aa-Item {
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    cursor: pointer;
}
.autocomplete-panel .aa-List {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Section labels ────────────────────────────────────────────────── */
.cubix-section-label,
.autocomplete-panel .aa-SourceHeader .cubix-section-label {
    display: block;
    font-family: var(--dh-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #AAA;
    padding: 0 16px 10px;
    margin: 0;
}

/* ── Popular search items ──────────────────────────────────────────── */
.cubix-popular-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.cubix-popular-item:hover,
.aa-Item[aria-selected="true"] .cubix-popular-item {
    background: var(--dh-gold-pale);
    border-left-color: var(--dh-gold);
}
.cubix-popular-icon { color: #CCC; flex-shrink: 0; }
.cubix-popular-term {
    flex: 1;
    font-family: var(--dh-sans);
    font-size: 13px;
    color: var(--dh-charcoal);
}
.cubix-popular-arrow {
    font-size: 16px;
    color: var(--dh-gold);
    opacity: 0;
    transition: opacity 0.12s;
    line-height: 1;
}
.cubix-popular-item:hover .cubix-popular-arrow,
.aa-Item[aria-selected="true"] .cubix-popular-item .cubix-popular-arrow {
    opacity: 1;
}

/* ── Suggestion items ──────────────────────────────────────────────── */
.cubix-suggestion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.cubix-suggestion-item:hover,
.aa-Item[aria-selected="true"] .cubix-suggestion-item {
    background: var(--dh-gold-pale);
    border-left-color: var(--dh-gold);
}
.cubix-suggestion-icon { color: #CCC; flex-shrink: 0; }
.cubix-suggestion-term {
    flex: 1;
    font-family: var(--dh-sans);
    font-size: 13px;
    color: var(--dh-charcoal);
}
/* Algolia wraps matched text in <mark> inside the Highlight component */
.cubix-suggestion-term mark {
    background: none;
    color: var(--dh-gold);
    font-weight: 600;
}
.cubix-suggestion-arrow {
    font-size: 16px;
    color: var(--dh-gold);
    opacity: 0;
    transition: opacity 0.12s;
}
.cubix-suggestion-item:hover .cubix-suggestion-arrow,
.aa-Item[aria-selected="true"] .cubix-suggestion-item .cubix-suggestion-arrow {
    opacity: 1;
}

/* ── Category items ────────────────────────────────────────────────── */
.cubix-category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.cubix-category-item:hover,
.aa-Item[aria-selected="true"] .cubix-category-item {
    background: var(--dh-gold-pale);
    border-left-color: var(--dh-gold);
}
.cubix-category-icon { color: #CCC; flex-shrink: 0; }
.cubix-category-name {
    flex: 1;
    font-family: var(--dh-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--dh-charcoal);
}
.cubix-category-name mark {
    background: none;
    color: var(--dh-gold);
    font-weight: 600;
}
.cubix-category-path {
    font-size: 10px;
    color: #AAA;
    font-family: var(--dh-sans);
}
.cubix-category-arrow {
    font-size: 16px;
    color: var(--dh-gold);
    opacity: 0;
    transition: opacity 0.12s;
}
.cubix-category-item:hover .cubix-category-arrow,
.aa-Item[aria-selected="true"] .cubix-category-item .cubix-category-arrow {
    opacity: 1;
}

/* ── Products section header (right panel) ─────────────────────────── */
.autocomplete-panel
.aa-Source[data-autocomplete-source-id="products"]
.aa-SourceHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}
.autocomplete-panel
.aa-Source[data-autocomplete-source-id="products"]
.aa-SourceHeader .cubix-section-label {
    padding: 0;
}

/* ── Products grid ─────────────────────────────────────────────────── */
.autocomplete-panel
.aa-Source[data-autocomplete-source-id="products"]
.aa-List {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.autocomplete-panel
.aa-Source[data-autocomplete-source-id="products"]
.aa-SourceNoResults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* ── Product card ──────────────────────────────────────────────────── */
.aa-source .product-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--dh-border);
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.aa-source .product-item:hover,
.aa-Item[aria-selected="true"] .aa-source .product-item {
    border-color: var(--dh-gold);
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.18);
    transform: translateY(-2px);
}
.cubix-product-img img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: #F8F5EF;
}
.cubix-product-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #F8F5EF 0%, #EDE6D8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.cubix-product-info { padding: 8px; }
.cubix-product-name {
    font-family: var(--dh-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--dh-charcoal);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cubix-product-name mark {
    background: none;
    color: var(--dh-gold);
    font-weight: 600;
}
.cubix-product-price {
    font-family: var(--dh-serif);
    font-size: 14px;
    color: var(--dh-gold);
    margin: 0;
}

/* ── No results (empty state right panel) ──────────────────────────── */
/* .autocomplete-panel .aa-SourceNoResults {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #CCC;
    font-family: var(--dh-sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    gap: 8px;
} */

/* ── Close panel when clicking outside (the overlay) ──────────────── */
/* The aa-Panel itself IS the overlay (position:fixed, full viewport)
   Clicking the dark area outside the card triggers aa-DetachedOverlay
   which Algolia handles natively via the detached mode */

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .autocomplete-panel.aa-Panel {
        padding: 0 !important;
    }
    .autocomplete-panel .aa-PanelLayout {
        grid-template-columns: 1fr;
        min-height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }
    .autocomplete-panel .aa-Source[data-autocomplete-source-id="popular_searches"],
    .autocomplete-panel .aa-Source[data-autocomplete-source-id="suggestions"],
    .autocomplete-panel .aa-Source[data-autocomplete-source-id="categories"] {
        grid-column: 1;
        border-right: none;
        border-bottom: 1px solid var(--dh-border);
    }
    .autocomplete-panel .aa-Source[data-autocomplete-source-id="products"] {
        grid-column: 1;
        grid-row: auto;
    }
    .autocomplete-panel
    .aa-Source[data-autocomplete-source-id="products"]
    .aa-List {
        grid-template-columns: repeat(2, 1fr);
    }
}