/**
 * Finder Search Pro v1.6.0 — Frontend
 * v3.5.0 hybrid: Concept 3 (draggable centered modal) + Concept 5 (live
 * results with icons, active row green tint, meta tags) + keyboard nav.
 */

/* FLOATING LAUNCHER BUTTON
   v5.7.1 — Brand refresh. The previous old-identity green
   (linear-gradient #00a52e → #008626) has been replaced by the locked
   v5.6.8 rebrand palette: a solid teal core (#008194) ringed by a
   slowly rotating sage→teal conic gradient. The ring is a ::before
   pseudo-element masked into a thin band; the button itself never
   rotates, so the magnifier icon stays naturally upright and any
   JS-set positioning transform (used by center-left / center-right
   placements) is preserved. */
#deiso-finder-float-btn {
    position: fixed;
    z-index: 999998;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #008194;
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(0, 129, 148, 0.38),
        inset 0 0 0 2px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    /* v11.5.0 — the position transform (centre placements) and the
       return-motion transform are carried as variables and composed here,
       so neither overrides the other or the hover lift. */
    --deiso-fb-anchor: translate(0, 0);
    --deiso-fb-fx: translate(0, 0);
    --deiso-fb-motion: 320ms;
    transform: var(--deiso-fb-anchor) var(--deiso-fb-fx);
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease, visibility 0s linear 0s;
    line-height: 1;
    padding: 0;
    isolation: isolate;
}
/* Rotating sage→teal conic ring. Uses the mask-composite trick to
   keep only the outer ring visible; the inner content area is masked
   out so the teal core shows through. z-index: -1 sits the ring
   behind the button background within the isolated stacking context. */
#deiso-finder-float-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 0deg, #63976B, #2D8B8A, #008194, #63976B);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: -1;
    animation: deiso-finder-ring-spin 6s linear infinite;
    pointer-events: none;
}
@keyframes deiso-finder-ring-spin {
    to { transform: rotate(360deg); }
}
#deiso-finder-float-btn:hover {
    transform: var(--deiso-fb-anchor) translateY(-2px) scale(1.04);
    box-shadow:
        0 14px 34px rgba(0, 129, 148, 0.48),
        inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}
#deiso-finder-float-btn:active { transform: var(--deiso-fb-anchor); }

/* HIDE ON SCROLL / RETURN MOTION — v11.5.0
   Leaving and returning use the configured length and one soft easing
   curve; the hover lift keeps its own short timing. Visibility switches
   off only after the motion ends, so the fade is seen, and a hidden
   button cannot be clicked or reached by keyboard. */
#deiso-finder-float-btn.is-fb-hidden,
#deiso-finder-float-btn.is-fb-returning {
    transition:
        box-shadow 0.25s ease,
        transform var(--deiso-fb-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity var(--deiso-fb-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        filter var(--deiso-fb-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 0s;
}
#deiso-finder-float-btn.is-fb-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s, 0s, 0s, var(--deiso-fb-motion);
}
#deiso-finder-float-btn.is-fb-hidden[data-fx="zoom"]  { --deiso-fb-fx: scale(0.55); }
#deiso-finder-float-btn.is-fb-hidden[data-fx="slide"] { --deiso-fb-fx: translateX(var(--deiso-fb-slide, 40px)); }
#deiso-finder-float-btn.is-fb-hidden[data-fx="rise"]  { --deiso-fb-fx: translateY(var(--deiso-fb-rise, 14px)); }
#deiso-finder-float-btn.is-fb-hidden[data-fx="blur"]  { --deiso-fb-fx: scale(0.9); filter: blur(6px); }

/* Respect users who prefer reduced motion — freeze the rotating ring. */
@media (prefers-reduced-motion: reduce) {
    #deiso-finder-float-btn::before {
        animation: none;
    }
    /* v11.5.0 — plain fade only, whatever effect is chosen. */
    #deiso-finder-float-btn.is-fb-hidden {
        --deiso-fb-fx: translate(0, 0) !important;
        filter: none !important;
    }
}

/* BACKDROP */
.deiso-finder-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.deiso-finder-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* MODAL — Concept 3 shell, centered on launch */
.deiso-finder-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 1000000;
    width: 92%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0a1929;
}
/* v3.5.21 — Batch 4 Item #3: ONLY font-family inherits to children.
   The previous merged block accidentally applied opacity:0 +
   pointer-events:none + box-shadow + overflow + transition to every
   descendant via the universal `*` selector, hiding all modal contents
   even when the modal was open. Now restricted to font-family. */
.deiso-finder-modal *,
.deiso-finder-modal *::before,
.deiso-finder-modal *::after {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.deiso-finder-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
/* v3.5.21 — Defensive override: force children visible when modal is open.
   Guards against any future external CSS that might hide modal interior
   via inherited opacity or pointer-events on children. */
.deiso-finder-modal.is-open *,
.deiso-finder-modal.is-open *::before,
.deiso-finder-modal.is-open *::after {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* v3.7.7 — ID-based defensive override. Wins against any cached older
   version of THIS file (the pre-v3.5.21 buggy merged universal selector
   that applied opacity:0 to all descendants), and against any external
   CSS — theme, optimizer plugin, lazy-fade library — that tries to keep
   modal children invisible. Higher specificity than the class-based
   override above; uses visibility on top of opacity so even a
   visibility:hidden rule can't keep content hidden.

   v3.7.8 — REMOVED the bare `#deiso-finder-modal,` selector that was at
   the start of this list. It forced opacity:1 + visibility:visible +
   pointer-events:auto on the modal element WITHOUT requiring `.is-open`,
   which (a) made the modal appear by default on every page load and
   (b) prevented the close button and Escape key from hiding it (the
   JS still removed .is-open correctly but this CSS kept overriding).
   The override now correctly applies ONLY when .is-open is present. */
#deiso-finder-modal.is-open,
#deiso-finder-modal.is-open *,
#deiso-finder-modal.is-open *::before,
#deiso-finder-modal.is-open *::after {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.deiso-finder-modal.has-moved {
    transform: none;
}
.deiso-finder-modal.is-dragging {
    transition: none;
}

/* OPEN / CLOSE EFFECT — v11.5.0 x2
   The effect rides on the individual translate / scale properties, which
   compose with the centring transform instead of replacing it — so the
   centring, a dragged position, and the full-screen phone layout are all
   left exactly as they were. Closing plays the same motion in reverse. */
.deiso-finder-modal[data-fx] {
    --deiso-fm-motion: 220ms;
    transform: translate(-50%, -50%);
    translate: 0 0;
    scale: 1;
    transition:
        opacity var(--deiso-fm-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        translate var(--deiso-fm-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        scale var(--deiso-fm-motion) cubic-bezier(0.22, 0.61, 0.36, 1),
        filter var(--deiso-fm-motion) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.deiso-finder-modal[data-fx].has-moved { transform: none; }
.deiso-finder-modal[data-fx].is-dragging { transition: none; }
.deiso-finder-backdrop[data-fx] {
    --deiso-fm-motion: 220ms;
    transition: opacity var(--deiso-fm-motion) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.deiso-finder-modal[data-fx="zoom"]:not(.is-open) { scale: 0.96; }
.deiso-finder-modal[data-fx="drop"]:not(.is-open) { translate: 0 -16px; }
.deiso-finder-modal[data-fx="rise"]:not(.is-open) { translate: 0 16px; }
.deiso-finder-modal[data-fx="blur"]:not(.is-open) { scale: 0.98; filter: blur(8px); }
.deiso-finder-modal[data-fx="none"],
.deiso-finder-backdrop[data-fx="none"] { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .deiso-finder-modal[data-fx]:not(.is-open) { translate: 0 0; scale: 1; filter: none; }
}

/* DRAG HEADER */
.deiso-finder-drag-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: linear-gradient(90deg, #0a1929 0%, #0f162a 100%);
    cursor: move;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    color: #ffffff;
}
.deiso-finder-drag-handle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #00a52e 30%, #00a52e 70%, transparent 100%);
}
.deiso-finder-drag-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.deiso-finder-drag-dots {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.deiso-finder-drag-dots span {
    width: 12px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 1px;
    display: block;
}
.deiso-finder-modal-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.deiso-finder-modal-title strong {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}
.deiso-finder-close {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    border: none;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
}
.deiso-finder-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* BODY */
.deiso-finder-body {
    padding: 18px 18px 4px;
}
.deiso-finder-search-wrap {
    position: relative;
}
.deiso-finder-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #70909e;
    pointer-events: none;
    z-index: 2;
}
/* F4 (v3.5.3) + FND1 (v3.5.9) — Force padding-left to clear the
   icon. Professional font stack + proper hierarchy: search input
   larger than modal title for clear typographic rhythm. */
.deiso-finder-search-input {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #e0e6ed;
    color: #0a1929;
    padding: 14px 14px 14px 44px !important;
    border-radius: 10px;
    font-size: 15px !important;
    outline: none;
    transition: all 0.18s ease;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    box-sizing: border-box;
    text-indent: 0 !important;
    letter-spacing: -0.1px;
}
.deiso-finder-search-input:focus {
    border-color: #00a52e;
    box-shadow: 0 0 0 3px rgba(0, 165, 46, 0.18);
}
.deiso-finder-search-input::placeholder {
    color: #94a3a8;
    font-weight: 400;
}

/* RESULTS — Concept 5 */
.deiso-finder-results {
    list-style: none;
    margin: 14px 0 0;
    /* v5.4.2 FINDER-FIX — last result was being clipped because max-height
       was a fixed 280px (about 5 rows). Switched to viewport-relative
       (min(60vh, 520px)) so up to ~9 rows fit on a normal screen, plus extra
       bottom padding so the final row never sits flush against the edge. */
    padding: 8px 8px 18px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #f0f4f7;
}
.deiso-finder-results:empty {
    display: none;
}
.deiso-finder-results::-webkit-scrollbar { width: 6px; }
.deiso-finder-results::-webkit-scrollbar-track { background: transparent; }
.deiso-finder-results::-webkit-scrollbar-thumb {
    background: rgba(0, 165, 46, 0.35);
    border-radius: 3px;
}
.deiso-finder-results::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 165, 46, 0.55);
}

.deiso-finder-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #0a1929;
    cursor: pointer;
    text-decoration: none;
    margin: 2px 0;
    transition: background 0.12s ease;
    list-style: none;
}
.deiso-finder-result:hover,
.deiso-finder-result.is-active {
    background: rgba(0, 165, 46, 0.07);
    color: #0a1929;
}
.deiso-finder-result-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(39, 93, 126, 0.08);
    color: #275d7e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.deiso-finder-result:hover .deiso-finder-result-icon,
.deiso-finder-result.is-active .deiso-finder-result-icon {
    background: rgba(0, 165, 46, 0.14);
    color: #008626;
}
.deiso-finder-result-text {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* X2 — matched-term highlight inside result titles.
   The ink is the module's existing hover colour (#008626, the same value
   already used by .deiso-finder-result:hover .deiso-finder-result-icon) and
   the tint reuses the existing hover green rgba(0, 165, 46, ...). No new
   colour values are introduced. Applies to a single word and to every
   matched token of a sentence, and to fuzzy matches, since the spans are
   supplied by the server. */
.deiso-finder-result .deiso-finder-hl {
    background: rgba(0, 165, 46, 0.14);
    color: #008626;
    font-weight: 700;
    padding: 0 2px;
    margin: 0 -1px;
    border-radius: 3px;
    text-decoration: none;
}
/* Keep the highlight legible while the row is hovered or keyboard-active:
   the row tint deepens, so the highlight tint deepens with it. */
.deiso-finder-result:hover .deiso-finder-hl,
.deiso-finder-result.is-active .deiso-finder-hl {
    background: rgba(0, 165, 46, 0.22);
    color: #008626;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result .deiso-finder-hl {
    background: rgba(0, 165, 46, 0.22);
    color: #00a52e;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result:hover .deiso-finder-hl,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result.is-active .deiso-finder-hl {
    background: rgba(0, 165, 46, 0.32);
    color: #00a52e;
}

.deiso-finder-result-meta {
    font-size: 10px;
    color: #94a3a8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.deiso-finder-empty {
    padding: 18px 14px;
    text-align: center;
    color: #94a3a8;
    font-size: 12.5px;
    font-style: italic;
}
.deiso-finder-loading {
    padding: 18px 14px;
    text-align: center;
    color: #6b7c8a;
    font-size: 12.5px;
}

/* FOOTER hints */
/* X7 — the footer keeps its original flex/space-between layout untouched,
   so it renders correctly whether the markup has two children (a browser
   still running a cached older finder.js) or three (current finder.js).
   Switching this to a fixed three-column grid would have left ESC sitting
   in the middle column for anyone on a stale script. The count is centred
   by taking it out of flow instead, which the two-child layout never sees. */
.deiso-finder-foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 14px;
    border-top: 1px solid #f0f4f7;
    font-size: 10.5px;
    color: #6b7c8a;
    background: #fafbfc;
}
.deiso-finder-foot-left {
    display: flex;
    gap: 14px;
}
.deiso-finder-foot-key {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.deiso-finder-foot-count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deiso-finder-foot-count b {
    color: #008626;
    font-weight: 600;
}
.deiso-finder-foot-count.is-empty {
    color: #94a3a8;
}
.deiso-finder-kbd {
    background: #ffffff;
    border: 1px solid #d6dde3;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 10px;
    color: #0a1929;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(10, 25, 41, 0.04);
}

/* Very narrow screens cannot fit all three footer groups on one line, so
   the count steps aside rather than colliding with the key hints. */
@media (max-width: 430px) {
    .deiso-finder-foot-count {
        display: none;
    }
}

/* MOBILE — full-screen, drag disabled */
/* X1 (v9.0.0) — the result list could not be scrolled on a phone once the
   Max Results ceiling was raised above roughly ten rows.

   Root cause: the results <ul> is emitted INSIDE .deiso-finder-body (see
   the modal template in finder-*.js), so it is a grandchild of the modal,
   not a direct flex child of it. The previous rules here applied
   `flex: 1` to .deiso-finder-results as if it were a direct child — that
   declaration was inert, because its actual parent (.deiso-finder-body)
   was a plain block container. At the same time `max-height: none`
   removed the only height constraint the list had (the desktop
   `min(60vh, 520px)`), and `.deiso-finder-body { flex-shrink: 0 }` pinned
   the body at its full content height. The list therefore grew past the
   modal's own height, .deiso-finder-modal's `overflow: hidden` clipped
   it, the footer was pushed off the bottom of the screen, and every row
   below the fold became unreachable — no inner scroll existed, and the
   modal is position:fixed so the page could not scroll to them either.

   Fix: make .deiso-finder-body a real flex column that takes the space
   between the header and the footer, give the list `min-height: 0` so a
   flex item is actually allowed to shrink below its content height (the
   default `min-height: auto` is what prevents the scroll container from
   ever forming), and hold the header, search field and footer at their
   natural size. Height is additionally expressed in dvh so the mobile
   browser's address bar is accounted for and the final row is never left
   underneath it. Desktop is untouched — everything below stays inside
   this max-width: 720px block. */
@media (max-width: 720px) {
    .deiso-finder-modal {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .deiso-finder-modal.is-open {
        transform: none !important;
    }
    .deiso-finder-drag-handle {
        cursor: default;
        flex: 0 0 auto;
    }
    .deiso-finder-drag-dots {
        display: none;
    }
    /* Takes all remaining height and becomes the column that the search
       field and the scrolling list share. min-height: 0 is required — a
       flex item defaults to min-height: auto, which refuses to shrink
       below its content and is exactly what defeated the scroll before. */
    .deiso-finder-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    .deiso-finder-search-wrap {
        flex: 0 0 auto;
    }
    .deiso-finder-results {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .deiso-finder-foot {
        flex: 0 0 auto;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    #deiso-finder-float-btn {
        width: 48px;
        height: 48px;
    }
}

/* DARK MODE OPTION */
.deiso-finder-modal.deiso-finder-dark {
    background: #0f162a;
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-results {
    border-color: rgba(255, 255, 255, 0.08);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result {
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result:hover,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result.is-active {
    background: rgba(0, 165, 46, 0.18);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-foot {
    background: #0a1929;
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-kbd {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-foot-count b {
    color: #00a52e;
}

/* LEGACY BAR — hidden, kept for back-compat */
#deiso-finder-bar { display: none !important; }

/* ============================================================
   DEISO DESIGN SYSTEM v2.0 — v11.5.0 x4
   The Finder panel is restyled as a DEISO card: white, 22px radius,
   card border and locked card shadow, and the 6px sage-to-teal strap
   across the top. Jost throughout. Every value below is taken from the
   design system's colour, transparency, shadow and geometry tables;
   the navy header and the green accents it replaces are not on the
   palette. Placed last so it settles every earlier rule by order.
   ============================================================ */
.deiso-finder-backdrop {
    background: rgba(26, 26, 26, 0.55);
}
.deiso-finder-modal {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid rgba(26, 26, 26, 0.10);
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(26, 26, 26, 0.04);
    font-family: 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif;
}
.deiso-finder-modal *,
.deiso-finder-modal *::before,
.deiso-finder-modal *::after {
    font-family: 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
/* The strap — card top strap, 6px, full width, z-index 2. */
.deiso-finder-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 2;
    background: linear-gradient(90deg, #63976B 0%, #2D8B8A 50%, #008194 100%);
    pointer-events: none;
}
html[dir="rtl"] .deiso-finder-modal::before {
    background: linear-gradient(270deg, #63976B 0%, #2D8B8A 50%, #008194 100%);
}

/* Header — white, charcoal title, hairline beneath. */
.deiso-finder-drag-handle {
    background: #ffffff;
    color: #1a1a1a;
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.deiso-finder-drag-handle::before {
    display: none;
}
.deiso-finder-drag-dots span {
    background: #94a3b8;
}
.deiso-finder-modal-title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: #94a3b8;
}
.deiso-finder-modal-title strong {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}
.deiso-finder-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.20);
    color: #1a1a1a;
    font-size: 18px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.deiso-finder-close:hover,
.deiso-finder-close:focus-visible {
    background: #ffffff;
    color: #008194;
    border-color: #008194;
    outline: none;
}

/* Search field */
.deiso-finder-body {
    padding: 20px 20px 6px;
}
.deiso-finder-search-icon {
    color: #008194;
    left: 16px;
}
.deiso-finder-search-input {
    min-height: 50px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.20);
    border-radius: 12px;
    color: #1a1a1a;
    padding: 13px 16px 13px 46px !important;
    font-size: 16px !important;
    font-weight: 400;
    letter-spacing: 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.deiso-finder-search-input:focus {
    border-color: #008194;
    box-shadow: 0 0 0 3px rgba(0, 129, 148, 0.30);
}
.deiso-finder-search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Results */
.deiso-finder-results {
    margin: 16px 0 0;
    padding: 10px 4px 18px;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.deiso-finder-results::-webkit-scrollbar-thumb { background: rgba(0, 129, 148, 0.30); }
.deiso-finder-results::-webkit-scrollbar-thumb:hover { background: rgba(0, 129, 148, 0.45); }
.deiso-finder-result {
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
    color: #1a1a1a;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.deiso-finder-result:hover,
.deiso-finder-result.is-active {
    background: rgba(0, 129, 148, 0.07);
    box-shadow: inset 0 0 0 1px rgba(0, 129, 148, 0.20);
    color: #1a1a1a;
}
.deiso-finder-result-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 151, 107, 0.18) 0%, rgba(45, 139, 138, 0.12) 48%, rgba(0, 129, 148, 0.10) 100%);
    color: #006675;
    font-size: 12px;
    font-weight: 700;
}
.deiso-finder-result:hover .deiso-finder-result-icon,
.deiso-finder-result.is-active .deiso-finder-result-icon {
    background: linear-gradient(135deg, #63976B, #008194);
    color: #ffffff;
}
.deiso-finder-result-text {
    font-weight: 400;
}
.deiso-finder-result .deiso-finder-hl,
.deiso-finder-result:hover .deiso-finder-hl,
.deiso-finder-result.is-active .deiso-finder-hl {
    background: rgba(0, 129, 148, 0.10);
    color: #006675;
    font-weight: 600;
    border-radius: 4px;
}
.deiso-finder-result-meta {
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #006675;
    background: rgba(0, 129, 148, 0.07);
    border: 1px solid rgba(0, 129, 148, 0.20);
    border-radius: 999px;
    padding: 4px 10px;
}
.deiso-finder-empty,
.deiso-finder-loading {
    color: #94a3b8;
    font-size: 14px;
    font-style: normal;
}

/* Footer — soft panel, keyboard chips from the component catalogue. */
.deiso-finder-foot {
    background: #f7fafc;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    color: #475569;
    font-size: 12.5px;
    padding: 12px 20px 14px;
}
.deiso-finder-foot-left { gap: 16px; }
.deiso-finder-foot-key { gap: 6px; }
.deiso-finder-kbd {
    display: inline-flex;
    align-items: center;
    background: #1a1a1a;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: none;
}
/* The larger keyboard chips widen the left group, so the count takes
   its place in the row instead of being centred over it; the row's
   space-between keeps it midway between the two hint groups. */
.deiso-finder-foot-count {
    position: static;
    left: auto;
    transform: none;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    padding: 0 12px;
}
.deiso-finder-foot-count b { color: #008194; font-weight: 600; }
.deiso-finder-foot-count.is-empty { color: #94a3b8; }

/* Phone — the panel is full screen, so it loses its radius and border;
   the strap stays on top. */
@media (max-width: 720px) {
    .deiso-finder-modal {
        border: none;
        border-radius: 0;
    }
    .deiso-finder-drag-handle {
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
    }
    .deiso-finder-modal::before {
        top: env(safe-area-inset-top, 0px);
    }
}

/* Dark mode — the design system's dark panel. */
.deiso-finder-modal.deiso-finder-dark {
    background: #0e1416;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.10);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-drag-handle {
    background: #0e1416;
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-modal-title { color: #c3ced6; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-modal-title strong { color: #ffffff; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-close {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-close:hover,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-close:focus-visible {
    color: #4fc3d4;
    border-color: #4fc3d4;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-icon { color: #4fc3d4; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-input:focus {
    border-color: #4fc3d4;
    box-shadow: 0 0 0 3px rgba(79, 195, 212, 0.28);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-search-input::placeholder { color: #94a3b8; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-results { border-top-color: rgba(255, 255, 255, 0.10); }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result { color: #ffffff; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result:hover,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result.is-active {
    background: rgba(79, 195, 212, 0.10);
    box-shadow: inset 0 0 0 1px rgba(79, 195, 212, 0.28);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result-icon { color: #4fc3d4; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result:hover .deiso-finder-result-icon,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result.is-active .deiso-finder-result-icon { color: #ffffff; }
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result .deiso-finder-hl,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result:hover .deiso-finder-hl,
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result.is-active .deiso-finder-hl {
    background: rgba(79, 195, 212, 0.10);
    color: #4fc3d4;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-result-meta {
    color: #4fc3d4;
    background: rgba(79, 195, 212, 0.10);
    border-color: rgba(79, 195, 212, 0.28);
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-foot {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(255, 255, 255, 0.10);
    color: #c3ced6;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-kbd {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border: none;
}
.deiso-finder-modal.deiso-finder-dark .deiso-finder-foot-count b { color: #4fc3d4; }

/* x152 — the modal search field in Arabic.
   The icon is pinned with left:14px and the field reserves the space for it
   with padding-left:44px. Both are correct in English and neither is mirrored
   here, so on an Arabic page the text begins at the right edge — where the
   reserve is 14px — and runs under the icon the mirrored layer has moved to
   that side. Measured on the live modal with a write probe: the overlap goes
   to 0 when the reserve and the pin change sides together, which is why they
   are written as one pair and not two rules. */
html[dir="rtl"] .deiso-finder-search-input {
    padding: 14px 44px 14px 14px !important;
}
html[dir="rtl"] .deiso-finder-search-icon {
    left: auto;
    right: 14px;
}

/* x27 (file x153) — full result titles, never cut off.
   Titles were held to one line with an ellipsis, so on a long title neither
   Mahdi nor a visitor could read which page it was. Approved render: every
   title shows in full on as many lines as it needs, no "…" and no line cap.
   Desktop keeps the type pill top-right beside the first line; the icon and
   pill align to the first line rather than the middle of a tall row. */
.deiso-finder-result {
    align-items: flex-start !important;
}
.deiso-finder-result-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.45;
    min-width: 0;
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
}
.deiso-finder-result-icon,
.deiso-finder-result-meta {
    margin-top: 1px;
}

/* Phone — the type moves under the title as a small label, so the title
   has the full row width. Same markup; the row becomes a two-column grid. */
@media (max-width: 720px) {
    .deiso-finder-result {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 3px;
    }
    .deiso-finder-result-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .deiso-finder-result-text {
        grid-column: 2;
        grid-row: 1;
    }
    .deiso-finder-result-meta,
    .deiso-finder-modal.deiso-finder-dark .deiso-finder-result-meta {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-top: 0;
        padding: 0;
        background: none;
        border: 0;
        font-size: 11px;
        line-height: 1.2;
    }
}