/*
 * Filter Bar Shortcode — stylesheet
 * Version: 2.0.0
 *
 * Override custom properties on .fbs-filterbar in your theme CSS:
 *
 *   .fbs-filterbar {
 *       --fbs-btn-radius:      4px;
 *       --fbs-btn-active-bg:   #0073aa;
 *       --fbs-btn-active-color:#fff;
 *   }
 */

/* -------------------------------------------------------------------------
   Custom properties
   ---------------------------------------------------------------------- */

.fbs-filterbar {
	--fbs-gap:               1rem;

	/* Buttons */
	--fbs-btn-padding:       1em 1.5em;
	--fbs-btn-radius:        2em;
	--fbs-btn-font-size:     0.82rem;
	--fbs-btn-bg:            none;
	--fbs-btn-color:         #333333;
	--fbs-btn-border:        2px solid #888;

	/* Active button */
	--fbs-btn-active-bg:     var(--wp--preset--color--custom-secondaire-3);
	--fbs-btn-active-color:  #f5f5f5;

	/* Count badge */
	--fbs-count-font-size:   0.88em;
	--fbs-count-opacity:     0.6;

	/* Search */
	--fbs-search-radius:     3px;
	--fbs-search-border:     2px solid #888;
	--fbs-search-padding:    0.4em 0.85em;
}

/* -------------------------------------------------------------------------
   Wrapper
   ---------------------------------------------------------------------- */

.fbs-filterbar {
	display:     flex;
	font-weight:600;
	flex-wrap:   wrap;
	align-items: center;
	gap:         var(--fbs-gap);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.fbs-buttons {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--fbs-gap);  

}

.fbs-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;  /* Add this for horizontal centering */
	gap:             0.3em;
	padding:         var(--fbs-btn-padding);
	font-size:       var(--fbs-btn-font-size);
	font-family:     inherit;
	line-height:     1.4;
	text-decoration: none;
	white-space:     nowrap;
	border:          var(--fbs-btn-border);
	border-radius:   var(--fbs-btn-radius);
	background:      var(--fbs-btn-bg);
	color:           var(--fbs-btn-color);
	cursor:          pointer;
	transition:      background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	min-width:       9em;
}

.fbs-btn:hover {
	background:     #fff;
}

.fbs-btn:focus-visible {
	background:     var(--fbs-btn-active-bg);
	color: var(--fbs-btn-active-color);
}

.fbs-btn--active {
	background:   var(--fbs-btn-active-bg) !important;
	color:        var(--fbs-btn-active-color);
	border-color: var(--fbs-btn-active-bg);
}



.fbs-count {
	font-size:            var(--fbs-count-font-size);
	opacity:              var(--fbs-count-opacity);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Search
   ---------------------------------------------------------------------- */

.fbs-search {
	display:       flex;
	align-items:   stretch;
	border:        var(--fbs-search-border);
	border-radius: var(--fbs-search-radius);
	overflow:      hidden;
	margin-left:1em;
}

.fbs-search__input {
	flex:        1 1 auto;
	min-width:   12ch;
	padding:     var(--fbs-search-padding);
	font-size:   inherit;
	font-family: inherit;
	line-height: 1.4;
	background:  var(--fbs-btn-bg);
	border:      none;
	color:       inherit;
	outline:     none;
	-webkit-appearance: none;
	appearance:  none;
}

.fbs-search__input::-webkit-search-decoration,
.fbs-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.fbs-search__input::placeholder {
	opacity: 0.45;
}

.fbs-search__input:focus-visible {
	background:#fff;
}




.fbs-search__submit {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 0.7em;
	background:      var(--fbs-btn-bg);
	border:          none;
	cursor:          pointer;
	color:           inherit;
	line-height:     1;
	transition:      background 0.15s ease;
}

.fbs-search__submit:hover,
.fbs-search__submit:focus-visible {
	background:     color-mix(in srgb, currentColor 10%, transparent);
	outline:        2px solid currentColor;
	outline-offset: -2px;
}

.fbs-search__submit svg {
	display: block;
	fill:    currentColor;
}

/* -------------------------------------------------------------------------
   Loading state on .filter-results
   Added by JS while the fetch is in flight.
   ---------------------------------------------------------------------- */

.filter-results {
	transition: opacity 0.2s ease;
}

.filter-results.fbs-loading {
	opacity:        0.4;
	pointer-events: none;
	cursor:         wait;
}

/* -------------------------------------------------------------------------
   Accessibility
   ---------------------------------------------------------------------- */

.fbs-screen-reader-text {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

.fbs-error {
	color:       #c00;
	font-family: monospace;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.fbs-filterbar {
		flex-direction: column;
		align-items:    flex-start;
	}

	.fbs-search {
		width: 100%;
	}
}