/* StarFroid Image Search — v2 styling, matching the brand design tokens
   (navy/accent/borders/radii from the design brief). Uses logical
   properties throughout so it mirrors correctly under RTL (Arabic). */

/* Layout: the camera trigger sits *beside* the search bar on the same row —
   NOT inside FiboSearch's field. Keeping it out of FiboSearch's own DOM means
   FiboSearch's script can't move, rebuild, or swallow it, and its first tap
   opens the camera directly on mobile (a button placed inside the field needed
   a second tap to get past FiboSearch's mobile activation). .sf-search becomes
   a flex row: the FiboSearch wrapper flexes to fill, the camera is a fixed
   icon button at the end. Flex layout mirrors correctly under RTL. These rules
   only load when the feature is active, so they never affect a plugin-off page.
   The button is rendered here by the theme's search.php right after the bar —
   no JS moves it. */
.sf-search {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sf-search .dgwt-wcas-search-wrapp {
	min-width: 0;
}

.sfis-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 0 0 auto;
	width: 48px;
	min-height: 48px;
	padding: 0;
	border: 1.5px solid #E4EBF1;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0E2C49;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

/* Pin the icon size. Astra's global button rules apply a large padding
   (15px 30px) that otherwise squeezed the SVG to 0 width — the padding:0
   above fixes that, and this guards the icon against any flex-shrink. */
.sfis-trigger svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.sfis-trigger:hover {
	background: #F4F7FA;
	border-color: #2E8BC0;
}

.sfis-trigger:active {
	transform: scale(0.96);
}

.sfis-trigger:focus-visible {
	outline: 2px solid #2E8BC0;
	outline-offset: 2px;
}

.sfis-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Modal
 * ------------------------------------------------------------------- */

.sfis-modal[hidden] {
	display: none;
}

.sfis-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.sfis-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 44, 73, 0.55);
	backdrop-filter: blur(2px);
}

.sfis-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 12px;
	max-width: 460px;
	width: 100%;
	max-height: 85vh;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(14, 44, 73, 0.25);
	animation: sfis-panel-in 200ms ease;
}

@keyframes sfis-panel-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.sfis-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 12px 20px;
	border-block-end: 1px solid #E4EBF1;
	flex-shrink: 0;
}

.sfis-modal__title {
	font-family: "Sora", "Inter", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #0E2C49;
	margin: 0;
}

.sfis-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #5A6B7B;
	cursor: pointer;
	transition: background-color 150ms ease;
}

/* Pin the X so Astra's global button padding can't squeeze it to 0 width
   (same gotcha as the camera trigger). */
.sfis-modal__close svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.sfis-modal__close:hover {
	background: #F4F7FA;
	color: #0E2C49;
}

.sfis-modal__close:focus-visible {
	outline: 2px solid #2E8BC0;
	outline-offset: 2px;
}

#sfis-modal-body {
	padding: 16px 20px 20px;
	overflow-y: auto;
}

.sfis-hint {
	color: #5A6B7B;
	text-align: center;
	padding: 24px 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.sfis-hint--error {
	color: #E0413E;
}

/* ---------------------------------------------------------------------
 * Loading state
 * ------------------------------------------------------------------- */

.sfis-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 32px 8px;
}

.sfis-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #E4EBF1;
	border-block-start-color: #2E8BC0;
	border-radius: 50%;
	animation: sfis-spin 700ms linear infinite;
}

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

.sfis-loading p {
	margin: 0;
	color: #5A6B7B;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
 * Result cards
 * ------------------------------------------------------------------- */

.sfis-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sfis-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #E4EBF1;
	border-radius: 12px;
	text-decoration: none;
	color: #15202B;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.sfis-result:hover,
.sfis-result:focus-visible {
	background: #F4F7FA;
	border-color: #2E8BC0;
}

.sfis-result img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #F4F7FA;
	border: 1px solid #E4EBF1;
}

.sfis-result__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sfis-result__name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfis-result__price {
	font-family: "Sora", "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #0E2C49;
}

/* Orange round "go" button on each result (design D). Decorative — the whole
   card is the link; this just signals tappability in the brand accent. */
.sfis-result__go {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #F26419;
	color: #FFFFFF;
	transition: background-color 150ms ease;
}

.sfis-result:hover .sfis-result__go,
.sfis-result:focus-visible .sfis-result__go {
	background: #D9530C;
}

[dir="rtl"] .sfis-result__go {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sfis-modal__panel,
	.sfis-spinner,
	.sfis-trigger {
		animation: none !important;
		transition: none !important;
	}
}