/**
 * Atelier Spotlight for mod_finder — the Alfa Commerce search palette, applied to
 * Joomla Smart Search. Ported from mod_alfa_search_enterprise/css/palette.css with
 * the same tokens and values, so both sites read as one design.
 *
 * Root-namespaced (`alfa-es`), no framework classes. All motion is transform/opacity;
 * the one exception is the icon draw (stroke-dashoffset) on a small area for a single
 * entry moment. prefers-reduced-motion disables everything.
 *
 * Tokens are declared on the root AND on the body-mounted scrim — each lives outside
 * the other's scope once the script relocates the dialog.
 */

.alfa-es,
.alfa-es-scrim {
    --alfa-es-accent: #c84869;
    /* Ink = the accent where it renders TEXT on the panel background. The raspberry
       that sings as a hairline is only 4.58:1 as copy, so text gets a darker cut of
       it: #a83a58 is 6.15:1 on white. */
    --alfa-es-accent-ink: #a83a58;
    --alfa-es-bg: #ffffff;
    --alfa-es-fg: #191817;
    --alfa-es-muted: rgba(25, 24, 23, 0.55);
    --alfa-es-hairline: rgba(25, 24, 23, 0.12);
    --alfa-es-scrim: rgba(12, 11, 10, 0.55);
    --alfa-es-hover: rgba(25, 24, 23, 0.05);
    --alfa-es-radius: 14px;
    --alfa-es-blur: 14px;
    --alfa-es-t-fast: 160ms;
    --alfa-es-t-slow: 320ms;
    --alfa-es-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --alfa-es-stagger: 36ms;
    --alfa-es-draw: 550ms;
    --alfa-es-z: 2147480000;
    --alfa-es-icon-stroke: 1.6;
}

@media (prefers-color-scheme: dark) {
    .alfa-es[data-alfa-es-theme="auto"],
    .alfa-es-scrim[data-alfa-es-theme="auto"] {
        --alfa-es-bg: #17161a;
        --alfa-es-fg: #f4f1ea;
        --alfa-es-muted: rgba(244, 241, 234, 0.55);
        --alfa-es-hairline: rgba(244, 241, 234, 0.14);
        --alfa-es-hover: rgba(244, 241, 234, 0.07);
        /* The accent itself is 3.97:1 on this background — under AA — so dark mode
           takes a lighter tint instead: 6.16:1. */
        --alfa-es-accent-ink: #e2748d;
    }
}

/* ── Trigger ─────────────────────────────────────────────────────────── */
.alfa-es-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    font: inherit;
    color: var(--alfa-es-fg);
    background: var(--alfa-es-bg);
    border: 1px solid var(--alfa-es-hairline);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: border-color var(--alfa-es-t-fast) var(--alfa-es-ease),
                transform var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-trigger:hover { border-color: var(--alfa-es-accent); transform: translateY(-1px); }
.alfa-es-trigger:active { transform: scale(0.98); }
.alfa-es-trigger-text { flex: 1; text-align: start; opacity: 0.65; }
.alfa-es-trigger-kbd {
    font-size: 0.72em;
    border: 1px solid var(--alfa-es-hairline);
    border-radius: 6px;
    padding: 0.1em 0.45em;
    opacity: 0.6;
}
/* A touch device has no ⌘K to press — this also catches iPadOS, whose user agent
   claims to be a Mac. */
@media (hover: none) and (pointer: coarse) {
    .alfa-es-trigger-kbd { display: none !important; }
}

/* ── Icons: self-drawing strokes ─────────────────────────────────────── */
.alfa-es-icon { width: 1.15em; height: 1.15em; flex: none; }
.alfa-es-icon .alfa-es-draw {
    stroke: currentColor;
    stroke-width: var(--alfa-es-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.alfa-es-row-glyph { color: var(--alfa-es-accent-ink); display: inline-flex; }
.alfa-es-row-glyph .alfa-es-icon { width: 1.5em; height: 1.5em; }

/* ── Scrim + panel ───────────────────────────────────────────────────── */
.alfa-es-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--alfa-es-z);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(12vh, 7rem) 1rem 1rem;
    background: var(--alfa-es-scrim);
    -webkit-backdrop-filter: blur(var(--alfa-es-blur));
    backdrop-filter: blur(var(--alfa-es-blur));
    opacity: 0;
    /* Closed = fully click-through AND fully gone: the element stays mounted for the
       fade, but a transparent full-viewport layer must never eat the page's clicks,
       and an aria-modal dialog left "visible" to assistive tech would mark the whole
       page inert. visibility flips after the fade, and it also releases the
       backdrop-filter cost while closed. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--alfa-es-t-slow) var(--alfa-es-ease),
                visibility 0s var(--alfa-es-t-slow);
}
.alfa-es-scrim[data-alfa-es-openstate] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--alfa-es-t-slow) var(--alfa-es-ease), visibility 0s;
}
.alfa-es-scrim[data-alfa-es-full] { padding: 0; }

.alfa-es-panel {
    width: min(680px, 100%);
    /* The last min() term is the VISUAL viewport (set by the script while open):
       with the phone keyboard up the panel shrinks to what is actually on screen
       instead of sinking behind the keys. */
    max-height: min(72vh, 640px, calc(var(--alfa-es-vvh, 200vh) - min(12vh, 7rem) - 1rem));
    display: flex;
    flex-direction: column;
    color: var(--alfa-es-fg);
    background: var(--alfa-es-bg);
    border: 1px solid var(--alfa-es-hairline);
    border-top: 2px solid var(--alfa-es-accent);
    border-radius: var(--alfa-es-radius);
    box-shadow: 0 24px 70px rgba(10, 9, 8, 0.35);
    overflow: hidden;
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform var(--alfa-es-t-slow) var(--alfa-es-ease),
                opacity var(--alfa-es-t-slow) var(--alfa-es-ease);
}
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-panel { transform: none; opacity: 1; }
.alfa-es-scrim[data-alfa-es-full] .alfa-es-panel {
    width: 100%;
    height: var(--alfa-es-vvh, 100dvh);
    max-height: var(--alfa-es-vvh, 100dvh);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* The finder form IS the panel body — it must stretch, or the results area cannot. */
.alfa-es-panel .mod-finder {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

/* ── Input row ───────────────────────────────────────────────────────── */
.alfa-es-input-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--alfa-es-hairline);
    color: var(--alfa-es-muted);
    /* The suggestion list becomes a second line of this row (see below). */
    flex-wrap: wrap;
}
.alfa-es-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1.06em;
    color: var(--alfa-es-fg);
    background: none;
    border: 0;
    outline: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.alfa-es-input::placeholder { color: var(--alfa-es-muted); }
/* The caret already says where focus is; a ring around the full-width field reads
   as a second, competing box. Every OTHER control in the panel keeps its ring.
   Scoped to .alfa-es-panel to outrank the panel-wide :focus-visible rule below —
   the two would otherwise tie on specificity and source order would decide. */
.alfa-es-panel .alfa-es-input:focus-visible { outline: 0; }
.alfa-es-input::-webkit-search-cancel-button,
.alfa-es-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.alfa-es-close,
.alfa-es-submit {
    display: inline-flex;
    color: var(--alfa-es-muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 8px;
    transition: color var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-close:hover,
.alfa-es-submit:hover { color: var(--alfa-es-fg); }
.alfa-es-submit { color: var(--alfa-es-accent-ink); }

/* ── Autosuggest: Smart Search's own awesomplete, in palette dress ───── */
/* display:contents lets the input stay a direct flex child of the row, while the
   dropdown resolves its position against the row itself. */
.alfa-es-panel .awesomplete { display: contents; }
/* IN FLOW, NOT FLOATING: as a wrapped flex line the suggestions push the results
   down instead of covering the first one. The negative margins bleed the strip to
   the panel edges and cancel the row's own bottom padding. */
.alfa-es-panel .awesomplete > ul {
    position: static;
    order: 9;
    flex: 0 0 100%;
    margin: 0.6rem -1.1rem -0.9rem;
    padding: 0.3rem 0;
    list-style: none;
    background: var(--alfa-es-bg);
    border: 0;
    border-top: 1px solid var(--alfa-es-hairline);
    border-radius: 0;
    box-shadow: none;
    max-height: 32vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-shadow: none;
}
.alfa-es-panel .awesomplete > ul::before { display: none; }
.alfa-es-panel .awesomplete > ul > li {
    display: block;
    padding: 0.5rem 1.15rem;
    color: var(--alfa-es-fg);
    background: none;
    cursor: pointer;
    transition: background-color var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-panel .awesomplete > ul > li:hover,
.alfa-es-panel .awesomplete > ul > li[aria-selected="true"] {
    color: var(--alfa-es-fg);
    background: var(--alfa-es-hover);
    box-shadow: inset 2px 0 0 var(--alfa-es-accent);
}
.alfa-es-panel .awesomplete mark,
.alfa-es-panel .awesomplete > ul > li[aria-selected="true"] mark {
    padding: 0;
    color: var(--alfa-es-accent-ink);
    background: none;
    font-weight: 600;
}

/* ── Results ─────────────────────────────────────────────────────────── */
.alfa-es-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.4rem 0;
}
.alfa-es-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.15rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-row:hover,
.alfa-es-row[data-active] { background: var(--alfa-es-hover); color: inherit; text-decoration: none; }
.alfa-es-row[data-active] { box-shadow: inset 2px 0 0 var(--alfa-es-accent); }
.alfa-es-row-main { flex: 1; min-width: 0; }
.alfa-es-row-title { display: block; }
.alfa-es-row-desc {
    display: block;
    font-size: 0.82em;
    color: var(--alfa-es-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alfa-es-row-desc:empty { display: none; }
.alfa-es-row-go {
    color: var(--alfa-es-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--alfa-es-t-fast) var(--alfa-es-ease),
                transform var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-row:hover .alfa-es-row-go,
.alfa-es-row[data-active] .alfa-es-row-go { opacity: 1; transform: none; }

.alfa-es-empty { margin: 0; padding: 1.4rem 1.15rem; color: var(--alfa-es-muted); }

/* Advanced filters, when the module turns them on. */
.alfa-es-advanced { padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--alfa-es-hairline); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.alfa-es-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--alfa-es-hairline);
    font-size: 0.82em;
    color: var(--alfa-es-muted);
}
.alfa-es-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: inherit;
    color: var(--alfa-es-accent-ink);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
.alfa-es-viewall:hover { color: var(--alfa-es-accent-ink); text-decoration: underline; }

/* ── Entry choreography: draw the icons, stagger the rows ────────────── */
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-draw {
    animation: alfa-es-draw var(--alfa-es-draw) var(--alfa-es-ease) both;
}
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-draw-late { animation-delay: 0.18s; }
@keyframes alfa-es-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

[data-alfa-es-reveal] {
    animation: alfa-es-rise 0.34s var(--alfa-es-ease) both;
    animation-delay: calc(var(--alfa-es-i, 0) * var(--alfa-es-stagger));
}
@keyframes alfa-es-rise {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

/* Loading shimmer — pure transform/opacity, template-owned markup. */
.alfa-es-loading { display: grid; gap: 0.55rem; padding: 0.9rem 1.15rem; }
.alfa-es-shimmer {
    height: 0.95rem;
    border-radius: 6px;
    background: var(--alfa-es-hover);
    overflow: hidden;
    position: relative;
}
.alfa-es-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--alfa-es-hairline), transparent);
    animation: alfa-es-shimmer 1.1s var(--alfa-es-ease) infinite;
}
.alfa-es-shimmer:nth-child(2) { width: 82%; }
.alfa-es-shimmer:nth-child(3) { width: 64%; }
@keyframes alfa-es-shimmer { to { transform: translateX(100%); } }

/* ── Motion off: user preference ─────────────────────────────────────── */
/* Lists *::after too — the shimmer sweep lives on a pseudo-element, which the
   element selectors alone never match. */
@media (prefers-reduced-motion: reduce) {
    .alfa-es *, .alfa-es *::after,
    .alfa-es-scrim, .alfa-es-scrim *, .alfa-es-scrim *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Page scroll locks while the palette is open. */
[data-alfa-es-lock] { overflow: hidden !important; }

/* Keyboard focus is always visible inside the palette. */
.alfa-es-panel :focus-visible { outline: 2px solid var(--alfa-es-accent); outline-offset: 2px; border-radius: 6px; }

/* Author display values (inline-flex etc.) beat the UA's [hidden] rule, so hidden
   elements would stay visible without this. */
.alfa-es [hidden], .alfa-es-scrim [hidden] { display: none !important; }

/* ── RTL: mirror the physical-axis details ───────────────────────────── */
[dir="rtl"] .alfa-es-row[data-active] { box-shadow: inset -2px 0 0 var(--alfa-es-accent); }
[dir="rtl"] .alfa-es-row-go { transform: translateX(4px); }