/* ============================================================================
 * Theme: Brutal (Pro)
 *
 * Hard 2px black borders, square corners, hard offset shadows on focus.
 * No rounded corners anywhere. High-contrast black + white.
 */

.fast-fuzzy-search--brutal {
    --ffs-border-color:           var(--ffs-color-black, #000000);
    --ffs-scrollbar-thumb:        var(--ffs-color-black, #000000);
    --ffs-scrollbar-thumb-hover:  var(--ffs-color-black, #000000);
    --ffs-kbd-bg:                 var(--ffs-color-white, #ffffff);
    --ffs-kbd-border:             var(--ffs-color-black, #000000);
}

/* ---- Field ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__field {
    height: 56px;
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-border-color);
    border-radius: 0;
    color: var(--ffs-color-black, #000000);
    border-color: var(--ffs-color-black, #000000);
    box-shadow: 6px 6px 0 0 var(--ffs-color-black, #000000);
}

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

.fast-fuzzy-search--brutal .fast-fuzzy-search__field:focus-within {
    transform: translate(-3px, -3px);
}

/* ---- Input ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__input,
.fast-fuzzy-search--brutal .fast-fuzzy-search__input::placeholder {
    
    font-weight: 600;
    color: var(--ffs-color-black, #000000);
}

/* ---- Icon ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__icon {
    color: var(--ffs-color-black, #000000);
}

/* ---- Clear button (fixed: hover was identical to base) ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__clear button {
    background: transparent;
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__clear button:hover {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
}

/* ---- Post-type bar ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__post-types {
    background: var(--ffs-color-white, #ffffff);
    border-bottom: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__chip-button {
    border: 2px solid var(--ffs-color-black, #000000);
    background: var(--ffs-color-white, #ffffff);
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
    font-weight: 600;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    box-shadow: 3px 3px 0 0 var(--ffs-color-black, #000000);
    transform: translate(-2px, -2px);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__chip-button[aria-selected="true"] {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    box-shadow: 4px 4px 0 0 var(--ffs-color-black, #000000);
    transform: translate(-2px, -2px);
}

/* ---- Context strip ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__context {
    color: var(--ffs-color-black, #000000);
    background: var(--ffs-color-white, #ffffff);
    border-top: 1px solid var(--ffs-color-black, #000000);
    border-bottom: 1px solid var(--ffs-color-black, #000000);
}

/* ---- Panel ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__panel {
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-color-black, #000000);
    border-top: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ffs-color-black, #000000);
    box-shadow: 6px 6px 0 0 var(--ffs-color-black, #000000);
}

/* ---- Result item divider ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__result-item:not(:last-child) {
    border-bottom: 2px solid var(--ffs-color-black, #000000);
}

/* ---- Result link ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link {
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link:hover {
    background: var(--ffs-color-gray-100, #f0f0f0);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link[aria-selected="true"] {
    border-color: var(--ffs-color-black, #000000);
    border-left-color: var(--ffs-color-black, #000000);
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    box-shadow: inset 0 0 0 2px var(--ffs-color-white, #ffffff);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link[aria-selected="true"]:hover {
    background: var(--ffs-color-gray-800, #2f2f2f);
}

/* ---- Result icon ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__result-icon {
    width: 48px;
    height: 48px;
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-white, #ffffff);
    color: var(--ffs-color-black, #000000);
    border-color: var(--ffs-color-white, #ffffff);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-white, #ffffff);
    color: var(--ffs-color-black, #000000);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-image {
    width: 48px;
    height: 48px;
    border: 2px solid var(--ffs-color-black, #000000);
    border-radius: 0;
}

/* ---- Result chip ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__chip {
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    border-color: var(--ffs-color-white, #ffffff);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip {
    background: var(--ffs-color-white, #ffffff);
    color: var(--ffs-color-black, #000000);
}

/* ---- Empty state ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__empty {
    background: var(--ffs-color-white, #ffffff);
    color: var(--ffs-color-gray-700, #757575);
}

/* ---- Keyboard footer ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__keyboard-shortcuts {
    background: var(--ffs-color-white, #ffffff);
    border-top: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
}

/* ---- Panel close button (fixed: hover was identical to base) ---- */
.fast-fuzzy-search__panel-close--brutal {
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
    border-radius: 0;
    box-shadow: 4px 4px 0 0 var(--ffs-color-black, #000000);
}

.fast-fuzzy-search__panel-close--brutal:hover,
.fast-fuzzy-search__panel-close--brutal:focus {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--ffs-color-black, #000000);
}

/* ---- Trigger buttons (icon + full) ----
 *
 * Icon button (icon-button.php) and full text button (button.php).
 * Hard 2px black borders, square corners, hard offset shadow. Hover
 * lifts the shadow from 4px to 6px with a 2px translate. The base
 * style.css sets the :active scale (0.97) which combines with the
 * translate for a clear "pressed" feel.
 */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--brutal,
.fast-fuzzy-search__button.fast-fuzzy-search--brutal {
    background: var(--ffs-color-white, #ffffff);
    border: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
    box-shadow: 4px 4px 0 0 var(--ffs-color-black, #000000);
    border-radius: 0;
    font-weight: 600;
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--brutal {
    border-radius: 0;
}

.fast-fuzzy-search__button.fast-fuzzy-search--brutal {
    border-radius: 0;
    padding: 0 var(--ffs-space-5);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--brutal:hover,
.fast-fuzzy-search__button.fast-fuzzy-search--brutal:hover {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    box-shadow: 6px 6px 0 0 var(--ffs-color-black, #000000);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--brutal:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--brutal:focus-visible {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
    box-shadow: 6px 6px 0 0 var(--ffs-color-black, #000000);
}

/* ---- View all button ---- */
.fast-fuzzy-search--brutal .fast-fuzzy-search__view-all {
    border-top: 2px solid var(--ffs-color-black, #000000);
    color: var(--ffs-color-black, #000000);
    font-weight: 600;
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__view-all:hover {
    background: var(--ffs-color-black, #000000);
    color: var(--ffs-color-white, #ffffff);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon {
    transform: translate(2px, 0);
}

.fast-fuzzy-search--brutal .fast-fuzzy-search__view-all:active {
    background: var(--ffs-color-gray-800, #2f2f2f);
}

/* Scrollbar square edges */
.fast-fuzzy-search--brutal .fast-fuzzy-search__scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0;
}