/* ============================================================================
 * Theme: Iris (Pro) — Stripe-inspired
 *
 * DESIGN.md source: https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/stripe/
 *
 * Signature purple (#635BFF), top-down white-to-#fafafb gradient on the
 * field, weight-300 type, 8px radius, soft shadow. The catalog entry is
 * the source of truth for all colors, gradients, type weights, and radii.
 *
 * SECTION INDEX (matches css/style.css BEM contract):
 *   /* ---- Tokens ---- */                  — :root custom properties
 *   /* ---- Field ---- */                   — .fast-fuzzy-search__field
 *   /* ---- Input ---- */                   — .fast-fuzzy-search__input
 *   /* ---- Icon ---- */                    — .fast-fuzzy-search__icon
 *   /* ---- Clear button ---- */            — .fast-fuzzy-search__clear
 *   /* ---- Post-type bar ---- */           — .fast-fuzzy-search__post-types + chips
 *   /* ---- Context strip ---- */           — .fast-fuzzy-search__context
 *   /* ---- Panel ---- */                   — .fast-fuzzy-search__panel
 *   /* ---- Result link ---- */             — .fast-fuzzy-search__result-link
 *   /* ---- Result icon + image ---- */     — .fast-fuzzy-search__result-icon
 *   /* ---- Result chip ---- */             — .fast-fuzzy-search__chip
 *   /* ---- Result item divider ---- */     — .fast-fuzzy-search__result-item
 *   /* ---- Empty + keyboard + view-all --- — empty state, kbd footer, view-all
 *   /* ---- View all button ---- */        — .fast-fuzzy-search__view-all
 *   /* ---- Panel close button ---- */      — .fast-fuzzy-search__panel-close
 *   /* ---- Trigger buttons (button.php + icon-button.php) ---- */
 *                                            .fast-fuzzy-search__button + .fast-fuzzy-search__icon-button
 * ============================================================================
 */

.fast-fuzzy-search--iris {
    --ffs-border-color:           #e3e1e8;
    --ffs-scrollbar-thumb:        #c4c2cc;
    --ffs-scrollbar-thumb-hover:  #635BFF;
}

/* ---- Field ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__field {
    height: 48px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafb 100%);
    border: 1px solid var(--ffs-border-color);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(60, 66, 87, 0.08);
    color: #3C4257;
}

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

.fast-fuzzy-search--iris .fast-fuzzy-search__field:focus-within {
    border-color: #635BFF;
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.2);
}

/* ---- Input ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__input,
.fast-fuzzy-search--iris .fast-fuzzy-search__input::placeholder {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    color: #635BFF;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__input::placeholder {
    color: rgba(99, 91, 255, 0.5);
}

/* ---- Icon ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__icon,
.fast-fuzzy-search--iris .fast-fuzzy-search__icon-frame {
    color: #635BFF;
}

/* ---- Clear button ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__clear button {
    background: rgba(99, 91, 255, 0.1);
    color: #635BFF;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__clear button:hover {
    background: rgba(99, 91, 255, 0.18);
}

/* ---- Post-type bar ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__post-types {
    background: #fafafb;
    border-bottom: 1px solid var(--ffs-border-color);
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__chip-button {
    border-color: var(--ffs-border-color);
    background: #ffffff;
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__chip-button:hover {
    background: #fafafb;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__chip-button[aria-selected="true"] {
    border-color: #635BFF;
    background: rgba(99, 91, 255, 0.08);
    color: #635BFF;
    box-shadow: inset 0 0 0 1px #635BFF;
}

/* ---- Context strip ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__context {
    color: #3C4257;
    background: #fafafb;
}

/* ---- Panel ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__panel {
    background: #ffffff;
    border: 1px solid var(--ffs-border-color);
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #3C4257;
    box-shadow: 0 4px 12px rgba(60, 66, 87, 0.08);
}

/* ---- Result link ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__result-link {
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__result-link:hover {
    background: #fafafb;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__result-link[aria-selected="true"] {
    border-color: #635BFF;
    border-left-color: #635BFF;
    background: rgba(99, 91, 255, 0.08);
    box-shadow: inset 0 0 0 1px #635BFF;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__result-link[aria-selected="true"]:hover {
    background: rgba(99, 91, 255, 0.12);
}

/* ---- Result icon + image ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__result-icon {
    background: #fafafb;
    color: #635BFF;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--iris .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon {
    background: #635BFF;
    color: #ffffff;
}

/* ---- Result chip ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__chip {
    background: #fafafb;
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip,
.fast-fuzzy-search--iris .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip {
    background: #635BFF;
    color: #ffffff;
}

/* ---- Empty + keyboard + view-all --- */
.fast-fuzzy-search--iris .fast-fuzzy-search__empty {
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__empty-title {
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__empty-description {
    color: rgba(60, 66, 87, 0.7);
}

.fast-fuzzy-search--iris .fast-fuzzy-search__keyboard-shortcuts {
    background: #fafafb;
    border-top-color: var(--ffs-border-color);
    color: #3C4257;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__kbd {
    background: #ffffff;
    border-color: var(--ffs-border-color);
    color: #3C4257;
}

/* ---- View all button ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__view-all {
    background: #fafafb;
    color: #635BFF;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__view-all:hover {
    background: rgba(99, 91, 255, 0.08);
}

/* ---- Panel close button ---- */
.fast-fuzzy-search__panel-close--iris {
    background: #ffffff;
    color: #3C4257;
    box-shadow: 0 1px 2px rgba(60, 66, 87, 0.08);
}

.fast-fuzzy-search__panel-close--iris:hover,
.fast-fuzzy-search__panel-close--iris:focus {
    background: #fafafb;
}

/* ---- Trigger buttons (button.php + icon-button.php) ---- */
.fast-fuzzy-search--iris .fast-fuzzy-search__icon-button,
.fast-fuzzy-search--iris .fast-fuzzy-search__button {
    background: linear-gradient(180deg, #ffffff 0%, #fafafb 100%);
    color: #3C4257;
    border: 1px solid var(--ffs-border-color);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(60, 66, 87, 0.08);
    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--iris .fast-fuzzy-search__icon-button {
    border-radius: var(--ffs-radius-pill);
}

.fast-fuzzy-search--iris .fast-fuzzy-search__button {
    border-radius: 8px;
}

.fast-fuzzy-search--iris .fast-fuzzy-search__icon-button:hover,
.fast-fuzzy-search--iris .fast-fuzzy-search__button:hover {
    background: #ffffff;
    border-color: #635BFF;
    box-shadow: 0 2px 4px rgba(60, 66, 87, 0.1), 0 6px 14px rgba(60, 66, 87, 0.08);
}

.fast-fuzzy-search--iris .fast-fuzzy-search__icon-button:focus-visible,
.fast-fuzzy-search--iris .fast-fuzzy-search__button:focus-visible {
    border-color: #635BFF;
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.2);
}
