/* Intelisale custom code - autocomplete UI for the Pavilion theme's native search box (used when
   ProductSearchAutoCompleteEnabled is on). Deliberately uses its own "azs-" class prefix and its own
   file - no dependency on any athena-*.css/js file, so this keeps working whether Athena, Azure Search,
   ElasticSearch, or no provider at all is currently active. Loaded unconditionally (see Head.cshtml) -
   harmless when the native autocomplete markup/classes below are never rendered onto the page.

   Sizing/colors below are taken from the LIVE production Athena widget (eshop.wurth.rs), read off its
   computed styles rather than eyeballed, so this matches what merchants already see there:
     popup      background #f2f2f2, border-radius 20px, padding 20px, shadow 0 3px 16px rgba(0,0,0,.16),
                width 850px
     columns    products ~426px / categories ~361px (=> 1.18fr / 1fr) with a dashed divider between
     heading    16px, weight 900, uppercase, #000, 20px below
     thumbnail  60px
     name       14px #000  (category names are #000 too - only the matched search substring is red)
     accent     #d71920
   Two deliberate departures from Athena, both explicitly requested: thumbnails get rounded corners and
   no border (Athena's are square and borderless).

   The layout is CSS Grid rather than Athena's absolute-positioned columns - this widget is a real
   jQuery UI .autocomplete() instance (kept for native keyboard nav/ARIA), which requires every item to
   stay a flat, direct <li> child of the <ul> it manages. Explicit per-item grid-column placement
   (azs-col-product / azs-col-category) turns that single flat list into two independent visual columns
   without needing separate DOM containers per column - see SearchBox/Default.cshtml's _renderMenu.

   Every selector that targets something *inside* the dropdown is scoped with the full
   ".search-box .ui-autocomplete.ui-menu" prefix, even where a shorter ".azs-*" selector would normally
   be enough. This is required, not stylistic: this theme's styles.css and 480.css both style the base
   jQuery UI widget (".ui-autocomplete img { display: none }", ".ui-autocomplete a { display: block }")
   at specificity 0-1-1, which beats a bare single-class ".azs-*" rule at 0-1-0 regardless of file load
   order. Prefixing reliably wins. */

.search-container {
    position: relative;
}

.azs-search-loader {
    display: none;
    position: absolute;
    top: 50%;
    right: 48px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #d71920;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.azs-search-loader.azs-loading {
    display: block;
    animation: azs-spin 0.7s linear infinite;
}

@keyframes azs-spin {
    to {
        transform: rotate(360deg);
    }
}

.search-box .ui-autocomplete.ui-menu {
    display: grid;
    /* products column widened / categories narrowed from Athena's 426/361 (1.18fr/1fr) split, per
       explicit request to make the desktop popup more compact so more results fit without scrolling. */
    grid-template-columns: 1.45fr 0.85fr;
    /* "dense" (not the sparse default) is required here: with the default packing, the shared
       row-placement cursor only ever moves forward, so once it advances while auto-placing the
       product column's items it would push the category column's items down by the same amount
       instead of letting them start right under their own heading. "dense" re-searches from the top
       for each item, which is safe here since product/category items never share a column - it can
       only backfill gaps within a column, never reorder across the product/category boundary. */
    grid-auto-flow: dense;
    column-gap: 36px;
    row-gap: 0;
    align-content: start;
    position: absolute;
    /* This theme's .search-box (the offset parent) is often much narrower than a comfortable
       two-column dropdown (as little as ~300px) - a plain width:100% would pin the dropdown to that
       narrow width. Fallback values only: the authoritative width/left/right on desktop (>=1025px) are
       set in JS, in the jQuery UI autocomplete's "open" handler in SearchBox/Default.cshtml, AFTER
       jQuery UI's own _resizeMenu()/.position() calls have already inline-set width/left/top to match
       the (often narrow) input. That inline-vs-inline ordering is what actually wins. */
    width: min(850px, calc(100vw - 24px));
    left: auto;
    right: 0;
    /* REQUIRED, do not remove: this theme's 480.css sets ".ui-autocomplete { width: 390px;
       max-width: 100% }" inside an "@media (min-width: 481px)" block. That max-width clamps this
       dropdown to the width of its offset parent (.search-box), which on this theme can be as little
       as ~305px - so without this reset the two-column layout silently collapses to the search
       input's own width no matter what "width" we set here or from JS. Our selector's specificity
       (0,3,0) beats that rule's (0,1,0), so a plain reset is enough - no !important needed. */
    max-width: none;
    max-height: 77vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f2f2f2;
    border: none;
    border-radius: 20px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .16);
    padding: 20px;
    margin: 8px 0 0;
    z-index: 9000;
    list-style: none;
    box-sizing: border-box;
}

.search-box .ui-autocomplete.ui-menu:not(.azs-has-categories) {
    grid-template-columns: 1fr;
    width: min(500px, calc(100vw - 24px));
}

/* dashed vertical divider between the two columns - same look as the production Athena widget's
   .athena-flex:before, hidden entirely when there's only a product column to show. Positioned in the
   middle of the column gap produced by the 1.45fr/0.85fr split above. */
.search-box .ui-autocomplete.ui-menu.azs-has-categories::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 62%;
    width: 0;
    border-left: 2px dashed #c6c6c6;
}

.search-box .ui-autocomplete.ui-menu::-webkit-scrollbar {
    width: 7px;
}

.search-box .ui-autocomplete.ui-menu::-webkit-scrollbar-track {
    background: #f2f2f2;
}

.search-box .ui-autocomplete.ui-menu::-webkit-scrollbar-thumb {
    background: #a6a6a6;
    border-radius: 7px;
}

.search-box .ui-autocomplete.ui-menu::-webkit-scrollbar-thumb:hover {
    background: #737373;
}

.search-box .ui-autocomplete.ui-menu .azs-section-heading {
    grid-row: 1;
    /* min-width:0 + overflow-wrap guard against a grid item's default min-content sizing blowing out
       the whole grid's column width - e.g. a missing localization resource renders as its raw
       dotted resource key (one long unbroken token with no spaces to wrap on), which without this
       would force the column - and the whole dropdown - far wider than intended. */
    min-width: 0;
    overflow-wrap: break-word;
    padding: 0 6px 14px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    pointer-events: none;
}

.search-box .ui-autocomplete.ui-menu .azs-col-product {
    grid-column: 1;
}

.search-box .ui-autocomplete.ui-menu .azs-col-category {
    grid-column: 2;
}

.search-box .ui-autocomplete.ui-menu:not(.azs-has-categories) .azs-col-category {
    display: none;
}

/* "view all results" link (appended separately, after the product/category items) - spans both grid
   columns as a footer row rather than getting swallowed into a gap by dense packing */
.search-box .ui-autocomplete.ui-menu .azs-search-page-link {
    grid-column: 1 / -1;
    padding: 14px 6px 0;
    border-top: 1px solid #dcdcdc;
    margin-top: 10px;
}

.search-box .ui-autocomplete.ui-menu .azs-search-page-link > a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #d71920;
    text-decoration: none;
    padding: 6px;
}

.search-box .ui-autocomplete.ui-menu .azs-item {
    list-style: none;
    min-width: 0;
    /* tightened from 10px per explicit "compact" request, so more of the 10 configured autocomplete
       results fit on screen without scrolling */
    margin-bottom: 6px;
}

.search-box .ui-autocomplete.ui-menu .azs-item-link {
    display: flex;
    align-items: center;
    /* REQUIRED, do not remove: this theme's mobile nav container (.responsive-nav-wrapper, which
       .search-box gets re-parented into below the 1024px breakpoint - see pavilion.js) sets
       "text-align: center", and nothing else in the ancestor chain resets it, so without this the
       product/category name and SKU render centered instead of left-aligned. Confirmed live by walking
       getComputedStyle().textAlign up the DOM from .azs-item-link. */
    text-align: left;
    gap: 15px;
    padding: 4px 6px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
}

.search-box .ui-autocomplete.ui-menu .azs-item.ui-state-focus .azs-item-link,
.search-box .ui-autocomplete.ui-menu .azs-item-link:hover,
.search-box .ui-autocomplete.ui-menu .azs-item-link.ui-state-hover {
    background-color: rgba(0, 0, 0, .06);
}

.search-box .ui-autocomplete.ui-menu .azs-item-image {
    display: inline-block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex: 0 0 auto;
    /* no border + rounded corners, both explicitly requested (Athena's own thumbs are square/borderless).
       The white backdrop keeps transparent PNGs from looking like holes in the grey popup. */
    border: none;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.search-box .ui-autocomplete.ui-menu .azs-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-box .ui-autocomplete.ui-menu .azs-item-label {
    font-size: 14px;
    line-height: 1.35;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-box .ui-autocomplete.ui-menu .azs-item-sku {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.2;
    color: #555;
}

/* Mobile bottom sheet - deliberately COMPACT, not a scaled-down copy of the desktop/Athena-parity
   sizing above. The desktop numbers (60px thumbs, 16px headings, 20px padding) were sized for an
   850px-wide two-column popup; carried straight onto a narrow single-column phone screen they blew up
   the row pitch to ~80px and only 4-5 results fit before scrolling. Every value below is deliberately
   smaller than its desktop counterpart, independent of it - a phone screen has less room and the goal
   here is to show more results, not to mirror desktop's spacing. */
@media (max-width: 1024px) {
    .search-box .ui-autocomplete.ui-menu {
        /* Anchored directly under the input (like desktop, and like the production Athena widget's own
           mobile CSS - "position: absolute; top: calc(100% + 1px)") rather than pinned to the viewport
           bottom as a "sheet". The earlier bottom-sheet approach left a large, confusing gap of page
           content visible between the search box and the popup, because a fixed-to-viewport-bottom
           element's top edge has no relationship to where the input actually is - confirmed live
           (measured an 88px gap between the input and the popup on a 390px-tall test). jQuery UI's
           .position() call inline-sets top/left to match the input already, so !important is still
           needed to win over that - only the VALUES changed here, not the need for !important. */
        position: absolute;
        top: calc(100% + 2px) !important;
        left: 0 !important;
        right: 0;
        width: 100% !important;
        max-width: none;
        max-height: 68vh;
        margin: 0;
        /* Tightened further after feedback that the compact pass still left too much visible padding -
           outer popup inset 12px->8px, top gap 8px->2px (near-flush with the search box, matching
           production Athena's own "+1px" mobile gap), and the per-row spacing below (margin-bottom,
           link padding) tightened to match. */
        padding: 8px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .search-box .ui-autocomplete.ui-menu.azs-has-categories::before {
        display: none;
    }

    /* single-column grid still has explicit grid-column:1/2 on individual items (desktop rules) -
       reset both to the same implicit column so nothing pushes an extra column track back in */
    .search-box .ui-autocomplete.ui-menu .azs-col-product,
    .search-box .ui-autocomplete.ui-menu .azs-col-category {
        grid-column: 1;
    }

    /* the category heading is a second section stacked under the products, so it needs its own
       top spacing (on desktop both headings sit side by side on grid-row 1) */
    .search-box .ui-autocomplete.ui-menu .azs-section-heading {
        grid-row: auto;
        font-size: 12px;
        padding: 0 2px 4px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-col-category.azs-section-heading {
        padding-top: 8px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-item {
        margin-bottom: 0;
    }

    .search-box .ui-autocomplete.ui-menu .azs-item-link {
        gap: 10px;
        padding: 4px 2px;
        /* keeps the row an accessible >=44px tap target even though the thumbnail itself shrinks to
           40px below, and the padding around it is now minimal - the row's min-height (not its padding)
           is what guarantees the tap target stays accessible. */
        min-height: 44px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-item-image {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        padding: 2px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-item-label {
        font-size: 13px;
        line-height: 1.25;
    }

    .search-box .ui-autocomplete.ui-menu .azs-item-sku {
        margin-top: 2px;
        font-size: 11px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-search-page-link {
        padding: 10px 4px 0;
        margin-top: 6px;
    }

    .search-box .ui-autocomplete.ui-menu .azs-search-page-link > a {
        font-size: 13px;
        padding: 6px 4px;
    }

    /* Widens the actual search INPUT (not the results popup above) to fill the header row instead of
       leaving ~200px of dead space either side of it. Root cause, confirmed live: this theme's own
       styles.css only sets a "max-width: 300px" CAP on input.search-box-text (not a width), and 480.css
       only sets a fixed "width: 390px" starting at its own @media (min-width: 481px) floor - so below
       481px there is no width at all (the input falls back to the browser's native ~166px intrinsic
       size) and from 481-1024px it's pinned to a fixed 390px regardless of actual viewport width.
       .search-container is a flex child of .form.minisearch (display:flex) with the default
       flex-grow:0, so it shrink-wraps to the input's own (undersized) width rather than stretching to
       fill the row - flex-grow:1 here is what actually makes the whole search bar widen, not just the
       input tag. Scoped to this file (Pavilion + search-specific) rather than editing styles.css/480.css
       directly, which are shared base-theme files used by every client on this theme. */
    .search-box .search-container {
        flex-grow: 1;
        min-width: 0;
    }

    .search-box input.search-box-text {
        width: 100% !important;
        max-width: none !important;
        /* styles.css gives this input "margin: 0 5px" at every breakpoint. Combined with width:100% (of
           .search-container, which itself now fills the row via flex-grow:1 above), that left margin
           pushes the whole box 5px past the container's right edge instead of sitting flush/symmetric -
           confirmed live (input right edge measured beyond the container's own right edge by exactly
           5px). Zeroing it here keeps the fill centered instead of overflowing to one side. */
        margin: 0 !important;
    }
}