/**
 * OnlineChamp Autocomplete Search Styles
 *
 * @package OnlineChamp_Autocomplete_Search
 */

/* Wrapper */
.oc-autocomplete-wrapper {
	--autocomplete-input-height: 100%;
	--autocomplete-input-bg: var(--form-field-bg, var(--surface-container, #fff));
	--autocomplete-input-border-width: var(--form-field-border-width, 1px);
	--autocomplete-input-border-color: var(--form-field-border-color, #ddd);
	--autocomplete-input-border-focus-color: var(--form-field-focus-border-color, var(--focus-ring-color, #0073aa));
	--autocomplete-input-focus-box-shadow: var(
		--form-field-focus-shadow,
		0 0 0 1px var(--autocomplete-input-border-focus-color)
	);
	--autocomplete-input-padding: 8px;
	--autocomplete-input-radius: var(--form-field-radius, var(--base-radius, 8px));
	--autocomplete-input-text: var(--form-field-color, var(--text-primary, #27343f));
	--autocomplete-input-font-size: var(--form-field-font-size, var(--base-size, 16px));
	--autocomplete-input-font-weight: var(--base-weight, 500);
	--autocomplete-input-line-height: var(--form-field-line-height, var(--base-line-height, 1));
	--autocomplete-input-placeholder-color: var(--form-field-placeholder-color);

	--autocomplete-title-text: var(--text-primary, #333);
	--autocomplete-title-font-size: 1.6rem;
	--autocomplete-title-font-weight: 600;
	--autocomplete-title-line-height: 1.4;
	--autocomplete-title-margin-bottom: 2px;

	--autocomplete-label-text: var(--text-secondary, #333);
	--autocomplete-label-font-size: 1.3rem;
	--autocomplete-label-font-weight: 500;
	--autocomplete-label-line-height: 1;

	--autocomplete-item-padding: 1rem 1.4rem;
	--autocomplete-item-hover-bg: var(--surface-subtle, #f4f4f4);
	--autocomplete-item-divider: var(--border-subtle, #f0f0f0);
	--autocomplete-item-focus: var(--focus-ring-color, #0073aa);

	--autocomplete-thumbnail-bg: var(--surface-subtle, #f5f5f5);
	--autocomplete-thumbnail-radius: 100%;

	--autocomplete-spinner-track: var(--surface-muted, #f3f3f3);
	--autocomplete-spinner-focus: var(--focus-ring-color, #0073aa);

	--autocomplete-wrapper-max-width: 600px;

	--autocomplete-results-bg: var(--surface, #fff);
	--autocomplete-results-border: var(--form-field-border, 1px solid var(--border-default, #ddd));
	--autocomplete-results-box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary, #000) 12%, transparent);
	--autocomplete-results-max-height: 400px;
	--autocomplete-results-radius: var(--form-field-radius, 1rem);

	--autocomplete-no-results-padding: 16px;
	--autocomplete-no-results-font-size: 16px;
	--autocomplete-no-results-text: var(--text-secondary, #666);

	--autocomplete-thumbnail-size: 48px;

	--autocomplete-padding: 12px 16px;
	--autocomplete-item-gap: 12px;

	position: relative;
	max-width: var(--autocomplete-wrapper-max-width);
	width: 100%;
	height: 100%;
}

/* Search container */
.oc-autocomplete-search-container {
	position: relative;
	display: flex;
	align-items: center;

	height: 100%;
}

/* Search input */
.oc-autocomplete-wrapper input.oc-autocomplete-input {
	width: 100%;
	height: var(--autocomplete-input-height);
	padding: var(--autocomplete-input-padding);
	font-size: var(--autocomplete-input-font-size);
	line-height:var(--autocomplete-input-line-height);
	border: var(--autocomplete-input-border-width) solid var(--autocomplete-input-border-color);
	border-radius: var(--autocomplete-input-radius);
	background: var(--autocomplete-input-bg);
	color: var(--autocomplete-input-text);
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.oc-autocomplete-wrapper input.oc-autocomplete-input:focus {
	outline: none;
	border-color: var(--autocomplete-input-border-focus-color);
	box-shadow: var(--autocomplete-input-focus-box-shadow);
}

.oc-autocomplete-wrapper input.oc-autocomplete-input::placeholder {
	color: var(--autocomplete-input-placeholder-color);
}

/* Loading spinner */
.oc-autocomplete-loading {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.oc-autocomplete-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--autocomplete-spinner-track);
	border-top: 2px solid var(--autocomplete-spinner-focus);
	border-radius: 50%;
	animation: oc-autocomplete-spin 0.8s linear infinite;
}

@keyframes oc-autocomplete-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Results container */
.oc-autocomplete-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	background: var(--autocomplete-results-bg);
	border: var(--autocomplete-results-border);
	border-radius: var(--autocomplete-results-radius);
	box-shadow: var(--autocomplete-results-box-shadow);
	max-height: var(--autocomplete-results-max-height);
	overflow-y: auto;
	z-index: 1000;
	box-sizing: border-box;
	text-align: left;
}

/* Result item */
.oc-autocomplete-item {
	padding: var(--autocomplete-item-padding);
	cursor: pointer;
	border-bottom: 1px solid var(--autocomplete-item-divider);
	transition: background-color 0.15s ease;
}

.oc-autocomplete-item:last-child {
	border-bottom: none;
}

.oc-autocomplete-item:hover,
.oc-autocomplete-item.oc-autocomplete-selected {
	background-color: var(--autocomplete-item-hover-bg);
}

.oc-autocomplete-item:focus {
	outline: 2px solid var(--autocomplete-item-focus);
	outline-offset: -2px;
}

/* Item content layout */
.oc-autocomplete-item-content {
	display: flex;
	align-items: center;
	gap: var(--autocomplete-item-gap);
}

/* Thumbnail */
.oc-autocomplete-thumbnail {
	flex-shrink: 0;
	width: var(--autocomplete-thumbnail-size);
	height: var(--autocomplete-thumbnail-size);
	border-radius: var(--autocomplete-thumbnail-radius);
	overflow: hidden;
	background: var(--autocomplete-thumbnail-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.oc-autocomplete-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text content */
.oc-autocomplete-text {
	flex: 1;
	min-width: 0;
}

.oc-autocomplete-title {
	font-size: var(--autocomplete-title-font-size);
	font-weight: var(--autocomplete-title-font-weight);
	color: var(--autocomplete-title-text);
	line-height: var(--autocomplete-title-line-height);
	margin-bottom: var(--autocomplete-title-margin-bottom);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-autocomplete-label {
	font-size: var(--autocomplete-label-font-size);
	color: var(--autocomplete-label-text);
	line-height: var(--autocomplete-label-line-height);
	font-weight: var(--autocomplete-label-font-weight);
}

/* No results message */
.oc-autocomplete-no-results {
	padding: var(--autocomplete-no-results-padding);
	text-align: center;
	color: var(--autocomplete-no-results-text);
	font-size: var(--autocomplete-no-results-font-size);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.oc-autocomplete-wrapper {
		max-width: 100%;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.oc-autocomplete-input,
	.oc-autocomplete-item {
		transition: none;
	}

	.oc-autocomplete-spinner {
		animation: none;
		border-top-color: transparent;
	}
}