/**
 * Styling for the AJAX search widget markup output by foo_search.php.
 *
 * IMPORTANT: these classes are intentionally NOT the "fg-*" classes used
 * by FooGallery core's native search widget. Reusing those class names
 * would let FooGallery's own JS (event delegation / DOM-ready auto-init)
 * match and act on this markup too, causing conflicts. Everything here
 * is prefixed "fgs-" (FooGallery Search) so it's fully isolated.
 *
 * The values below are a best-effort recreation of FooGallery's visual
 * language. To match your theme's native widget pixel-for-pixel, open
 * devtools on a page where the real .fg-search-wrap renders, select it,
 * and use the Styles/Computed panel (or "Copy styles") to pull the exact
 * colors, spacing and font — then adjust the values below to match.
 */

.fgs-wrap {
	width: 100%;
	max-width: 400px;
	margin: 0 0 20px;
	box-sizing: border-box;
}

.fgs-wrap * {
	box-sizing: border-box;
}

.fgs-inner {
	display: flex;
	align-items: stretch;
	position: relative;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	overflow: hidden;
	transition: border-color .3s ease-out, box-shadow .3s ease-out;
}

.fgs-inner:focus-within {
	border-color: #999;
	box-shadow: 0 0 0 1px #999;
}

.fgs-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fgs-input::placeholder {
	color: #999;
}

.fgs-clear,
.fgs-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	border: none;
	background: transparent;
	color: #666;
	cursor: pointer;
	padding: 0;
	transition: color .3s ease-out, background-color .3s ease-out;
}

.fgs-clear:hover,
.fgs-submit:hover {
	color: #333;
	background-color: #f5f5f5;
}

.fgs-clear:focus,
.fgs-submit:focus {
	outline: 2px solid #999;
	outline-offset: -2px;
}

/* Hidden until there's something to clear — toggled in JS. */
.fgs-clear {
	display: none;
}

.fgs-wrap.fgs-has-value .fgs-clear {
	display: inline-flex;
}

.fgs-icon {
	fill: currentColor;
	display: block;
}

/* Visually hidden but still readable by screen readers, same pattern
   FooGallery core uses for its own "fg-sr-only" labels. */
.fgs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.foogallery-search-count {
	margin: 8px 0;
	font-size: 13px;
	color: #666;
}

.foogallery-search-results {
	width: 100%;
}

/* Loading indicator — shown only while a search request is running. */
.fgs-loading {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	font-size: 13px;
	color: #666;
}

.fgs-wrap.fgs-is-loading .fgs-loading {
	display: flex;
}

.fgs-spinner {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-top-color: #666;
	border-radius: 50%;
	animation: fgs-spin .8s linear infinite;
}

@keyframes fgs-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fgs-spinner {
		animation-duration: 2s;
	}
}

/* Error message (empty search, failed request). Collapses when empty. */
.fgs-message {
	margin: 8px 0;
	font-size: 13px;
	color: #b32d2e;
}

.fgs-message:empty {
	display: none;
}

/* "Load more" control — the IntersectionObserver trigger and its manual
   fallback button. Hidden until a search actually reports more results,
   and hidden again once there's nothing left to load. */
.fgs-load-more {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0;
	min-height: 1px; /* keeps the element observable even with no visible content */
}

.fgs-wrap.fgs-has-more .fgs-load-more {
	display: flex;
}

.fgs-load-more-btn {
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	color: #333;
	font-size: 13px;
	padding: 8px 16px;
	cursor: pointer;
	transition: border-color .3s ease-out, background-color .3s ease-out;
}

.fgs-load-more-btn:hover {
	background-color: #f5f5f5;
	border-color: #999;
}

.fgs-load-more-loading {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #666;
}

/* While a "load more" request is in flight, hide the button and show the
   loading indicator instead (mirrors .fgs-is-loading for the main spinner). */
.fgs-wrap.fgs-is-loading-more .fgs-load-more-btn {
	display: none;
}

.fgs-wrap.fgs-is-loading-more .fgs-load-more-loading {
	display: flex;
}

/* pagination="dots" — numbered page links. Empty (and collapses to
   nothing) until a search actually returns more than one page. */
.fgs-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 16px 0;
}

.fgs-pagination:empty {
	display: none;
}

.fgs-page-link {
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	color: #333;
	font-size: 13px;
	min-width: 32px;
	padding: 6px 10px;
	cursor: pointer;
	transition: border-color .3s ease-out, background-color .3s ease-out;
}

.fgs-page-link:hover:not([disabled]) {
	background-color: #f5f5f5;
	border-color: #999;
}

.fgs-page-link[disabled] {
	cursor: default;
}

.fgs-page-link.fgs-page-current {
	background-color: #333;
	border-color: #333;
	color: #fff;
}

.fgs-page-dots {
	padding: 6px 4px;
	color: #999;
	font-size: 13px;
}

/* pagination="dots" — small unlabeled circular dots instead of numbered
   links, plus prev/next arrow buttons. */
.fgs-page-dot {
	min-width: 0;
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	background-color: #ddd;
	border-color: #ddd;
}

.fgs-page-dot:hover:not([disabled]) {
	background-color: #bbb;
	border-color: #bbb;
}

.fgs-page-dot.fgs-page-current {
	background-color: #333;
	border-color: #333;
}

.fgs-page-arrow {
	min-width: 0;
	line-height: 1;
	font-size: 16px;
	padding: 4px 8px;
}