.wp-block-wlc-algolia-autocomplete {
	--wlc-accent: #DB002F;
	position: relative !important;
	width: 100%;

	&__container {
		position: relative !important;
		width: 100%;
	}

	&__wrapper {
		width: 100%;
		position: relative !important;
	}

	// Override Algolia Autocomplete default styles
	.aa-Autocomplete {
		width: 100%;
		position: relative !important;
	}

	.aa-Form {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		border: 2px solid #f0f0f0;
		transition: all 0.3s ease;
		overflow: hidden;

		&:focus-within {
			border-color: var(--wlc-accent, #DB002F);
			box-shadow: 0 4px 20px rgba(219, 0, 47, 0.15);
		}
	}

	.aa-InputWrapper {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}

	.aa-InputWrapperPrefix {
		position: absolute;
		left: 20px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 8px;
		pointer-events: none; // Don't block input clicks

		.aa-LoadingIndicator {
			display: none; // Hide loading indicator in prefix
		}
	}

	.aa-InputWrapperSuffix {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		pointer-events: auto; // Allow clicks on clear button
	}

	.aa-Input {
		width: 100%;
		padding: 18px 60px 18px 60px; // More padding to avoid overlap with icons
		font-size: 18px;
		line-height: 1.5;
		border: none;
		border-radius: inherit;
		background: transparent;
		box-shadow: none;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		color: #1a1a1a;
		font-weight: 500;
		font-family: inherit;
		position: relative;
		z-index: 1;

		&::placeholder {
			color: #999;
			font-weight: 400;
		}

		&:focus {
			outline: none;
			border: none;
			box-shadow: none;
		}

		&:focus-visible {
			outline: none;
			border: none;
			box-shadow: none;
		}
	}

	.aa-Form.wp-block-wlc-algolia-autocomplete__form {
		border-radius: 16px;
		overflow: hidden;
	}

	.aa-Input.wp-block-wlc-algolia-autocomplete__input,
	.aa-Input.wp-block-wlc-algolia-autocomplete__input:focus,
	.aa-Input.wp-block-wlc-algolia-autocomplete__input:focus-visible {
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
		border-radius: 14px !important;
	}

	.aa-SubmitButton,
	.aa-ClearButton {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20px;
		background: transparent;
		border: none;
		cursor: pointer;
		color: #666;
		transition: color 0.2s ease;
		font-size: 20px;

		&:hover {
			color: var(--wlc-accent, #DB002F);
		}

		svg {
			width: 20px;
			height: 20px;
		}
	}

	.aa-ClearButton {
		svg {
			width: 18px;
			height: 18px;
		}
	}


	// Ensure form and input are visible - override any hidden styles
	.aa-Autocomplete {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.aa-Form {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
	}

	.aa-InputWrapper {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		position: relative !important;
		flex: 1;
	}

	.aa-Input {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		position: relative !important;
		flex: 1;
	}

	.aa-Panel {
		position: absolute !important;
		top: calc(100% + 8px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		z-index: 9999 !important; // Higher z-index to appear above footer
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		max-height: 600px;
		display: flex !important; // Force display
		visibility: visible !important; // Force visibility
		opacity: 1 !important; // Force opacity
		flex-direction: column;
		margin-top: 8px;
		// Force positioning relative to parent, not viewport
		transform: none !important;
	}

	&.is-panel-hidden {
		.aa-Panel,
		.wp-block-wlc-algolia-autocomplete__panel {
			display: none !important;
			visibility: hidden !important;
			opacity: 0 !important;
		}
	}

	// Hide detached overlay and button completely
	.aa-DetachedOverlay {
		display: none !important;
	}

	.aa-DetachedSearchButton {
		display: none !important;
	}

	.aa-DetachedContainer {
		display: none !important;
	}

	.aa-DetachedFormContainer {
		display: none !important;
	}

	.aa-DetachedCancelButton {
		display: none !important;
	}

	.aa-PanelLayout {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 0;
		align-items: start;
		min-height: 0;
		height: auto;
		max-height: none;
		overflow: visible;

		// Default Autocomplete merges `aa-Panel--scrollable` here; use .aa-Panel as the only scroll container.
		&.aa-Panel--scrollable {
			overflow: visible;
			max-height: none;
			height: auto;
		}

		// When suggestions are disabled, results take full width
		&.is-full-width {
			grid-template-columns: 1fr;
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}
	}

	.aa-Source {
		padding: 20px;
		overflow: visible;
		max-height: none;
		background: #fafafa;

		&.aa-Source-query-suggestions {
			border-right: 1px solid #e8e8e8;
			background: #fff;
		}

		&.aa-Source-search-results {
			background: #fff;
		}

		// When suggestions are disabled, remove border from first (and only) source
		.aa-PanelLayout.is-full-width & {
			&:first-child {
				border-right: none;
			}
		}

		@media (max-width: 768px) {
			border-right: none !important;
			border-bottom: 1px solid #e8e8e8;
			padding: 16px;

			&:last-child {
				border-bottom: none;
			}

		}
	}

	// Two-column mode: keep Popular Searches in a dedicated left column.
	.aa-PanelLayout:not(.is-full-width) > .aa-Source.aa-Source-query-suggestions {
		grid-column: 1;
		align-self: start;
		position: relative;
	}

	.aa-PanelLayout:not(.is-full-width) > .aa-Source.aa-Source-search-results {
		grid-column: 2;
	}

	.aa-PanelLayout > .aa-ResultsColumn {
		grid-column: 2;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.aa-PanelLayout.is-full-width > .aa-ResultsColumn {
		grid-column: 1;
	}

	@media (max-width: 768px) {
		.aa-PanelLayout:not(.is-full-width) > .aa-Source.aa-Source-query-suggestions,
		.aa-PanelLayout:not(.is-full-width) > .aa-Source.aa-Source-search-results,
		.aa-PanelLayout > .aa-ResultsColumn {
			grid-column: auto;
			grid-row: auto;
			position: static;
			z-index: auto;
		}
	}

	.aa-SourceHeader {
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 2px solid #e8e8e8;
	}

	.aa-SourceHeaderTitle {
		font-size: 12px;
		font-weight: 700;
		color: #666;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin: 0;
	}

	.aa-List {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.aa-List.aa-ListLayout-grid {
		display: grid;
		grid-template-columns: repeat(var(--wlc-ac-grid-columns, 2), minmax(0, 1fr));
		gap: 8px;
	}

	.aa-List.aa-ListLayout-grid .aa-Item {
		margin-bottom: 0;
	}

	.aa-List.aa-ListLayout-grid .aa-ItemLink {
		height: 100%;
		margin-bottom: 0;
	}

	.aa-List.aa-ListLayout-grid .aa-ItemContent {
		height: 100%;
	}

	.aa-Item {
		margin-bottom: 6px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.aa-ItemLink {
		display: block;
		padding: 14px 16px;
		border-radius: 10px;
		text-decoration: none;
		color: inherit;
		transition: all 0.2s ease;
		background: #fff;
		border: 1px solid transparent;
		margin-bottom: 4px;

		&:hover {
			background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
			border-color: #e0e0e0;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
			transform: translateY(-1px);
		}

		&:focus {
			outline: 2px solid var(--wlc-accent);
			outline-offset: 2px;
		}

		&:active {
			transform: translateY(0);
		}
	}

	// Custom item content styles
	.aa-ItemContent {
		display: flex;
		flex-direction: column;
		gap: 8px;

		&.aa-ItemLayout-horizontal {
			flex-direction: row;
			align-items: flex-start;
			gap: 12px;

			.aa-ItemImage {
				flex-shrink: 0;
				width: 80px;
				height: 80px;
				overflow: hidden;
				border-radius: 8px;
				background: #f5f5f5;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}
			}

			.aa-ItemContentBody {
				flex: 1;
				min-width: 0;
			}
		}

		&.aa-ItemLayout-grid {
			display: flex;
			flex-direction: column;
			gap: 8px;

			.aa-ItemImage {
				width: 100%;
				aspect-ratio: 4 / 3;
				height: auto;
				overflow: hidden;
				border-radius: 8px;
				background: #f5f5f5;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}
			}
		}
	}

	.aa-ItemImage {
		margin-bottom: 8px;
		border-radius: 8px;
		overflow: hidden;
		background: #f5f5f5;
		width: 60px; // Fixed width for thumbnails
		height: 60px; // Fixed height for thumbnails
		flex-shrink: 0;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover; // Crop to fit
			display: block;
			border-radius: 8px;
		}

		a {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	&.is-result-layout-horizontal {
		.aa-ItemContent.aa-ItemLayout-horizontal {
			flex-direction: row;
			align-items: flex-start;
			gap: 12px;
		}

		.aa-ItemContent.aa-ItemLayout-horizontal .aa-ItemImage {
			width: 80px;
			height: 80px;
			margin-bottom: 0;
		}
	}

	@media (max-width: 768px) {
		.aa-List.aa-ListLayout-grid {
			grid-template-columns: 1fr;
		}
	}

	.aa-ItemContentBody {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.aa-ItemTitle {
		font-weight: 600;
		font-size: 16px;
		line-height: 1.5;
		color: #1a1a1a;
		margin: 0 0 6px 0;

		// Style for highlighted text (<em> tags from Algolia Highlight)
		em {
			font-style: normal;
			font-weight: 700;
			background: linear-gradient(120deg, rgba(219, 0, 47, 0.15) 0%, rgba(219, 0, 47, 0.25) 100%);
			padding: 2px 4px;
			border-radius: 3px;
			color: var(--wlc-accent, #DB002F);
		}

		a {
			color: inherit;
			text-decoration: none;
			transition: color 0.2s ease;
			display: block;

			&:hover {
				color: var(--wlc-accent);
			}
		}

		// Style for highlighted text
		em {
			font-style: normal;
			font-weight: 700;
			background: linear-gradient(120deg, rgba(219, 0, 47, 0.15) 0%, rgba(219, 0, 47, 0.25) 100%);
			padding: 2px 4px;
			border-radius: 3px;
			color: var(--wlc-accent);
		}
	}

	.aa-ItemExcerpt {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin: 0 0 8px 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

		// Style for highlighted text
		em {
			font-style: normal;
			font-weight: 600;
			background: linear-gradient(120deg, rgba(219, 0, 47, 0.15) 0%, rgba(219, 0, 47, 0.25) 100%);
			padding: 2px 4px;
			border-radius: 3px;
			color: var(--wlc-accent);
		}
	}

	.aa-ItemMeta {
		font-size: 11px;
		color: #999;
		display: flex;
		gap: 12px;
		margin: 0;
		flex-wrap: wrap;

		.aa-ItemMetaDate,
		.aa-ItemMetaAuthor {
			display: inline-flex;
			align-items: center;
			gap: 4px;

			&::before {
				content: '';
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background: #ccc;
			}
		}
	}

	.aa-ItemField {
		font-size: 13px;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 6px;

		&.is-price {
			font-weight: 700;
			color: var(--wlc-accent);
			font-size: 16px;
		}

		&.is-sku {
			font-family: 'Courier New', monospace;
			font-size: 11px;
			color: #666;
		}

		&.is-badge {
			.aa-ItemFieldValue {
				display: inline-block;
			}
		}

		&.is-stock {
			color: #666;
		}

		.aa-ItemFieldLabel {
			font-weight: 500;
			color: #666;
		}

		.aa-ItemFieldValue {
			color: #333;
			font-weight: 500;

			a {
				color: inherit;
				text-decoration: none;

				&:hover {
					color: var(--wlc-accent);
				}
			}
		}
	}

	.aa-ItemButton {
		margin-top: 4px;

		.aa-ItemButtonLink {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 8px 16px;
			background: var(--wlc-accent);
			color: #fff;
			text-decoration: none;
			border-radius: 6px;
			font-size: 13px;
			font-weight: 600;
			transition: all 0.2s ease;
			border: none;
			cursor: pointer;

			&:hover {
				background: #c0002a;
				transform: translateY(-1px);
				box-shadow: 0 4px 8px rgba(219, 0, 47, 0.3);
			}

			&:active {
				transform: translateY(0);
			}
		}
	}

	.aa-ItemBadge {
		display: inline-block;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;

		&.is-in-stock {
			background: #d4edda;
			color: #155724;
		}

		&.is-out-of-stock {
			background: #f8d7da;
			color: #721c24;
		}

		&.is-on-backorder {
			background: #fff3cd;
			color: #856404;
		}
	}

	.aa-ItemStock {
		font-size: 12px;
		color: #666;
	}

	.aa-NoResults {
		padding: 24px;
		text-align: center;
		color: #999;
		font-size: 14px;
	}

	// Loading state - hide in input wrapper, only show in panel if needed
	.aa-InputWrapper .aa-LoadingIndicator {
		display: none !important;
	}

	.aa-LoadingIndicator {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		color: #999;
	}

	// Hide label if it's overlapping
	.aa-Label {
		display: none !important;
	}

	// Gradient bottom (if used)
	.aa-GradientBottom {
		display: none;
	}

	// Show All button footer
	.aa-SourceFooter {
		padding: 12px 20px;
		border-top: 1px solid #e8e8e8;
		background: transparent;
		text-align: center;

		&:empty {
			display: none;
		}
	}

	.aa-ShowAllButton {
		display: inline-block;
		padding: 10px 20px;
		background: var(--wlc-accent, #DB002F);
		color: #fff;
		text-decoration: none !important;
		border: none !important;
		box-shadow: none;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		transition: all 0.2s ease;

		&:hover {
			background: #c0002a;
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(219, 0, 47, 0.3);
		}

		&:active {
			transform: translateY(0);
		}
	}
}
