/*
 * Darealmop_Search — structural skeleton only, no appearance.
 *
 * This file ships ONLY structural rules: box model, flex layout, hidden /
 * visible states, modal overlay positioning, and motion timing. It
 * deliberately ships NO colours, NO backgrounds, NO box-shadows, NO
 * borders, NO border-radius, NO font-family / font-size / font-weight,
 * and NO decorative padding.
 *
 * The selectors below belong to two camps:
 *   1) Native Magento_Search selectors (`#search`, `#search_mini_form`,
 *      `#search_autocomplete`) — we re-skin them, never rename them.
 *   2) Our own `dm-search-*` selectors — added by the JS mixin.
 *
 * Every visual surface is a `--dm-search-*` custom property that ships
 * NO default — on a blank theme they resolve to `initial` and the
 * structural rules still hold. See README.md "CSS hooks (for theme
 * designers)" for the full token inventory.
 */

/* ---------- native quicksearch container: structural slot ---------- */

.block.block-search .control {
    position: relative; /* anchor for absolute-positioned `.dm-search-clear` */
    display: flex;
    align-items: stretch;
    width: 100%;
}

/*
 * Recent-searches dropdown sits in the same `.control` row, absolutely
 * positioned so it does NOT push the page layout when it appears. The
 * native `#search_autocomplete` Magento ships below the input keeps its
 * own positioning — our list is rendered alongside but only when the
 * input is empty (the mixin gates that), so there is no visual clash.
 */

/* ---------- inline clear button ------------------------------------ */

.dm-search-clear {
    position: absolute;
    top: 50%;
    right: var(--dm-search-clear-right);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--dm-search-clear-size);
    height: var(--dm-search-clear-size);
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.dm-search-clear[hidden] {
    display: none;
}

/* ---------- focus-trap modal overlay -------------------------------- */

.dm-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding-top: var(--dm-search-overlay-offset);
}

.dm-search-overlay[hidden] {
    display: none;
}

.dm-search-overlay-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.dm-search-overlay-surface {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--dm-search-overlay-max-width);
    padding: var(--dm-search-overlay-padding);
}

/*
 * Scroll-lock while the overlay is up. We only set `overflow: hidden` —
 * no padding-right compensation, because that's theme-territory (the
 * theme owns the scrollbar-gutter strategy).
 */
body.dm-search-modal-open {
    overflow: hidden;
}

/* ---------- recent-searches dropdown -------------------------------- */

.dm-search-recents {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: var(--dm-search-recents-max-height);
    overflow-y: auto;
}

.dm-search-recents[hidden] {
    display: none;
}

.dm-search-recents-item {
    display: block;
    box-sizing: border-box;
    cursor: pointer;
}

/* ---------- live-results dropdown (AJAX) ---------------------------- */

/*
 * Same anchoring strategy as the recents list: absolutely positioned in
 * the `.control` row so opening it never reflows the page. Structural
 * only — the scroll cap, flex item layout and text truncation. Every
 * surface (background, borders, the .is-active highlight, the loading
 * dim) is a `--dm-search-results-*` token the theme paints. `.is-active`
 * (keyboard/hover) and `.is-loading` carry no rule here on purpose.
 */
.dm-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 101;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-height: var(--dm-search-results-max-height);
    overflow-y: auto;
    overflow-x: hidden;
}

.dm-search-results[hidden] {
    display: none;
}

.dm-search-results-label {
    display: block;
    box-sizing: border-box;
}

.dm-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-search-results-item {
    display: block;
    margin: 0;
    padding: 0;
}

.dm-search-results-link,
.dm-search-results-all {
    display: flex;
    align-items: center;
    gap: var(--dm-search-results-gap);
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.dm-search-results-thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--dm-search-results-thumb-size);
    height: var(--dm-search-results-thumb-size);
    overflow: hidden;
}

.dm-search-results-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dm-search-results-text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let the name truncate instead of overflowing */
}

.dm-search-results-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-search-results-count {
    margin-left: auto;
    flex: 0 0 auto;
}

.dm-search-results-empty {
    display: block;
    box-sizing: border-box;
}

/* ---------- motion preferences -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dm-search-overlay,
    .dm-search-clear,
    .dm-search-recents,
    .dm-search-results {
        transition: none;
    }
}

/*
 * ---------- Custom properties (referenced above, NO defaults) -------
 *
 * Themes set these on `.block.block-search` (or `:root`, or any
 * wrapper). They are referenced above without var(..., fallback) on
 * purpose: on a blank theme they collapse to `initial` and the
 * structural rules still hold. The skeleton ships NOTHING that paints
 * the look.
 *
 *   --dm-search-clear-right          right offset of the clear button (referenced)
 *   --dm-search-clear-size           width/height of the clear button (referenced)
 *   --dm-search-overlay-offset       top offset of the overlay surface (referenced)
 *   --dm-search-overlay-max-width    max width of the overlay surface (referenced)
 *   --dm-search-overlay-padding      padding inside the overlay surface (referenced)
 *   --dm-search-recents-max-height   max-height before scroll (referenced)
 *   --dm-search-results-max-height   live dropdown max-height before scroll (referenced)
 *   --dm-search-results-gap          gap between thumb and text in a hit (referenced)
 *   --dm-search-results-thumb-size   product thumbnail square size (referenced)
 *
 * The following are NOT consumed by this stylesheet — they are
 * documented here so every theme uses the same names:
 *
 *   --dm-search-clear-color
 *   --dm-search-clear-hover-color
 *   --dm-search-overlay-backdrop-bg
 *   --dm-search-overlay-surface-bg
 *   --dm-search-overlay-surface-color
 *   --dm-search-overlay-surface-radius
 *   --dm-search-overlay-surface-shadow
 *   --dm-search-recents-bg
 *   --dm-search-recents-color
 *   --dm-search-recents-border
 *   --dm-search-recents-radius
 *   --dm-search-recents-item-padding
 *   --dm-search-recents-item-hover-bg
 *   --dm-search-recents-item-hover-color
 *
 *   --dm-search-results-bg
 *   --dm-search-results-color
 *   --dm-search-results-border
 *   --dm-search-results-radius
 *   --dm-search-results-shadow
 *   --dm-search-results-label-color
 *   --dm-search-results-label-bg
 *   --dm-search-results-item-padding
 *   --dm-search-results-name-color
 *   --dm-search-results-price-color
 *   --dm-search-results-count-color
 *   --dm-search-results-active-bg        (.is-active row background)
 *   --dm-search-results-active-color     (.is-active row text)
 *   --dm-search-results-all-bg           ("View all" footer)
 *   --dm-search-results-all-color
 *   --dm-search-results-empty-color
 */