/* ============================================================================
 * Theme: Minimal Light (Free)
 *
 * Clean white surface on a near-invisible gray border, a single bright-blue
 * primary accent for selected/active states, and a solid near-black CTA
 * variant for the "1-click setup" pattern. Inspired by the minimal dashboard
 * patterns captured in media/minimal.webp: large display stat numbers,
 * card-based surfaces with generous corner rounding, restrained shadows,
 * neutral grays, pill-shaped chips, and a single primary tint for emphasis.
 */

.fast-fuzzy-search--minimal-light {
    --ffs-border-color:           var(--ffs-color-gray-200);
    --ffs-scrollbar-thumb:        var(--ffs-color-gray-400);
    --ffs-scrollbar-thumb-hover:  var(--ffs-color-gray-500);
    --ffs-kbd-bg:                 var(--ffs-color-gray-100);
    --ffs-kbd-border:             var(--ffs-color-gray-300);

    --ffs-press-scale:    0.985;
    --ffs-active-scale:   0.97;
    --ffs-highlight-bg:   var(--ffs-color-primary-100);
    --ffs-highlight-fg:   var(--ffs-color-primary-800);

    @media (prefers-reduced-motion: reduce) {
        --ffs-press-scale:  1;
        --ffs-active-scale: 1;
    }
}

/* ---- Field ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__field {
    height: 48px;
    background: var(--ffs-color-white);
    border: 1px solid var(--ffs-border-color);
    border-radius: 10px;
    box-shadow: var(--ffs-shadow-sm);
    color: var(--ffs-color-gray-900);
    transition: border-color var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow   var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light[data-has-query="true"] .fast-fuzzy-search__field {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* ---- Input ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__input,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__input::placeholder {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-500);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-400);
}

/* ---- Icon ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__icon,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-gray-700);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}


/* ---- Clear button ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__clear button {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__clear button:hover {
    background: var(--ffs-color-gray-200);
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__clear button:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Post-type bar ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__post-types {
    background: var(--ffs-color-gray-50);
    border-bottom-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-900);
    padding: var(--ffs-space-3) var(--ffs-space-4);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-list {
    gap: var(--ffs-space-2);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button {
    border: 1px solid var(--ffs-color-gray-300);
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button[aria-selected="true"] {
    border-color: var(--ffs-color-primary-600);
    color: var(--ffs-color-primary-600);
    background: var(--ffs-color-primary-50);
    box-shadow: inset 0 0 0 1px var(--ffs-color-primary-600);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button[aria-selected="true"]:hover {
    background: var(--ffs-color-primary-100);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button[disabled],
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Context strip ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__context {
    color: var(--ffs-color-gray-900);
    background: var(--ffs-color-gray-50);
    border-bottom: 1px solid var(--ffs-border-color);
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* ---- Panel ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__panel {
    border: 1px solid var(--ffs-border-color);
    border-top: 0;
    background: var(--ffs-color-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px;
    line-height: 20px;
    box-shadow: var(--ffs-shadow-sm);
    color: var(--ffs-color-gray-900);
    transition: box-shadow var(--ffs-duration) var(--ffs-easing);
    overflow: hidden;
}

/* Slight lift when the panel is open and the user is interacting */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__field:focus-within + .fast-fuzzy-search__panel,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link:hover),
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link[aria-selected="true"]) {
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.05), 0 8px 20px rgba(var(--ffs-color-primary-rgb), 0.08);
}

/* ---- Result link ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link {
    color: var(--ffs-color-gray-900);
    border-radius: 8px;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
    animation: ffs-minimal-light-row-in var(--ffs-duration) var(--ffs-easing) both;
    animation-delay: calc(var(--ffs-i, 0) * 18ms);
}

@keyframes ffs-minimal-light-row-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:hover {
    background: var(--ffs-color-gray-100);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ffs-color-white), 0 0 0 4px var(--ffs-color-primary-600);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] {
    background: var(--ffs-color-primary-50);
    box-shadow: inset 0 0 0 1px var(--ffs-color-primary-600);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"]:hover {
    background: var(--ffs-color-primary-100);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon-frame,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-icon-frame {
    transform: translateX(2px);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[disabled],
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Result icon + image ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-white);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-image {
    border-radius: 8px;
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-image {
    transform: scale(1.05);
}

/* ---- Result chip ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-white);
}

/* ---- Empty state ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__empty {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__empty-title {
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__empty-description {
    color: var(--ffs-color-gray-500);
}

/* ---- Keyboard footer ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__keyboard-shortcuts {
    background: var(--ffs-color-gray-50);
    border-top-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__kbd {
    background: var(--ffs-color-white);
    border-color: var(--ffs-color-gray-300);
    color: var(--ffs-color-gray-900);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__keyboard-shortcuts:hover .fast-fuzzy-search__kbd {
    border-color: var(--ffs-color-gray-400);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__kbd:hover {
    background: var(--ffs-color-gray-100);
    transform: translateY(-0.5px);
}

/* ---- View all button ---- */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all {
    background: var(--ffs-color-gray-50);
    color: var(--ffs-color-primary-600);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing);
    position: relative;
    overflow: hidden;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ffs-color-primary-50);
    opacity: 0;
    transition: opacity var(--ffs-duration-fast) var(--ffs-easing);
    pointer-events: none;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all:hover {
    color: var(--ffs-color-primary-700);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all:hover::before {
    opacity: 1;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all:active::before {
    background: var(--ffs-color-primary-100);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all > * {
    position: relative;
    z-index: 1;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all-icon {
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon {
    transform: translateX(3px);
}

/* ---- Panel close button ---- */
.fast-fuzzy-search__panel-close--minimal-light {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-900);
    border-radius: var(--ffs-radius-pill);
    box-shadow: var(--ffs-shadow-md);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__panel-close--minimal-light:hover,
.fast-fuzzy-search__panel-close--minimal-light:focus {
    background: var(--ffs-color-gray-100);
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.05), 0 8px 18px rgba(var(--ffs-color-primary-rgb), 0.08);
}

.fast-fuzzy-search__panel-close--minimal-light:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Trigger buttons (button.php + icon-button.php) ----
 *
 * Both the icon-only button and the full-text "Search" button share the
 * same surface; only the border-radius and padding differ. The lift on
 * hover (deeper shadow) plus the bg shift are unified into a single
 * :hover rule. The focus ring uses the primary accent for both buttons.
 */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-900);
    border: 1px solid var(--ffs-color-gray-200);
    box-shadow: var(--ffs-shadow-sm);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light {
    border-radius: var(--ffs-radius-pill);
}

.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light {
    border-radius: 10px;
    padding: 0 var(--ffs-space-4);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light:hover,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light:hover {
    background: var(--ffs-color-gray-50);
    border-color: var(--ffs-color-gray-300);
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.05), 0 6px 14px rgba(var(--ffs-color-primary-rgb), 0.08);
}



.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light:focus-visible {
    border-color: var(--ffs-color-primary-600);
    box-shadow: 0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.15);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light[disabled],
.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-light[aria-disabled="true"],
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light[disabled],
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-light[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- CTA button (dark) ----
 *
 * Mirrors the "1-click setup" pattern in media/minimal.webp: solid dark
 * fill, white label, soft elevation. Applied via a modifier class so
 * themes that need it can opt in without breaking the default look.
 */
.fast-fuzzy-search__cta--minimal-light {
    background: var(--ffs-color-black);
    color: var(--ffs-color-white);
    border: 1px solid var(--ffs-color-black);
    border-radius: 10px;
    padding: 0 var(--ffs-space-5);
    box-shadow: var(--ffs-shadow-sm);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__cta--minimal-light:hover {
    background: var(--ffs-color-gray-900);
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.08), 0 8px 18px rgba(var(--ffs-color-primary-rgb), 0.12);
    transform: translateY(-0.5px);
}

.fast-fuzzy-search__cta--minimal-light:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.25);
}



.fast-fuzzy-search__cta--minimal-light[disabled],
.fast-fuzzy-search__cta--minimal-light[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Highlight (fuzzy match) ----
 *
 * The fuzzy search wraps matched substrings in <mark> or
 * .fast-fuzzy-search__highlight. We tint with the primary palette so
 * matches are easy to scan without overwhelming the row.
 */
.fast-fuzzy-search--minimal-light mark,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__highlight {
    background: var(--ffs-highlight-bg);
    color: var(--ffs-highlight-fg);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] mark,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight {
    background: var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-900);
}

/* ---- Loading skeleton ----
 *
 * Optional class to apply to a result row while content is loading.
 * Uses a subtle primary-tinted shimmer that respects reduced motion.
 */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__skeleton {
    background: linear-gradient(
        90deg,
        var(--ffs-color-gray-100) 0%,
        var(--ffs-color-gray-200) 50%,
        var(--ffs-color-gray-100) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    color: transparent;
    animation: ffs-minimal-light-shimmer 1.4s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes ffs-minimal-light-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fast-fuzzy-search--minimal-light .fast-fuzzy-search__skeleton {
        animation: none;
        background: var(--ffs-color-gray-100);
    }
}