/**
 * Mono Product Search Block Styles
 *
 * Ultra-sleek, compact pill-shaped search bar matching exact visual design specifications.
 * On mobile & tablet (<= 768px): Displays input field + search icon button, hiding category dropdown.
 * On desktop (> 768px): Displays full pill search bar with input + category dropdown + search icon button.
 *
 * @package Mono
 * @since 1.0.0
 */

.wp-block-mono-product-search.mono-product-search-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mono-search-max-width, 640px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* Form Container */
.mono-product-search-form {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	background-color: var(--mono-search-bg, #f3f4f6);
	color: var(--mono-search-color, #374151);
	box-sizing: border-box;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	border: 1px solid transparent;
}

/* Corner Radius Variants */
.mono-search-radius-pill .mono-product-search-form {
	border-radius: var(--wp--custom--radius--full, 9999px);
}

.mono-search-radius-rounded .mono-product-search-form {
	border-radius: var(--wp--custom--radius--medium, 8px);
}

.mono-search-radius-square .mono-product-search-form {
	border-radius: 0px;
}

/* Size Variants - Sleek & Compact Heights */
.mono-search-size-small .mono-product-search-form {
	min-height: 34px;
	padding: 1px 3px;
}

.mono-search-size-medium .mono-product-search-form {
	min-height: 40px;
	padding: 2px 4px;
}

.mono-search-size-large .mono-product-search-form {
	min-height: 46px;
	padding: 3px 6px;
}

/* Form Hover & Focus State */
.mono-product-search-form:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mono-product-search-form:focus-within {
	background-color: #ffffff;
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* 1. Keyword Input Field Section */
.mono-product-search-input-field {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 90px;
}

.mono-product-search-input {
	width: 100%;
	height: 100%;
	border: none !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	color: inherit;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	padding: 0.35rem 1rem;
	box-sizing: border-box;
	line-height: 1.25;
}

.mono-product-search-input::placeholder {
	color: #9ca3af;
	opacity: 1;
	font-weight: 400;
}

/* 2. Vertical Divider Line */
.mono-product-search-divider {
	display: block;
	width: 1px;
	height: 16px;
	background-color: var(--mono-search-border, #e5e7eb);
	flex-shrink: 0;
	margin: 0 2px;
	transition: background-color 0.25s ease;
}

/* 3. Category Dropdown Select Section */
.mono-product-search-category-select-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 0.65rem;
}

.mono-product-search-category-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	color: inherit;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.35rem 1.35rem 0.35rem 0.4rem;
	cursor: pointer;
	max-width: 150px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1.25;
}

.mono-product-search-category-select option {
	color: #111827;
	background-color: #ffffff;
	padding: 6px;
}

/* Chevron Down Arrow Icon */
.mono-product-search-chevron {
	position: absolute;
	right: 0.65rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: currentColor;
	opacity: 0.7;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mono-product-search-category-select-wrapper:hover .mono-product-search-chevron {
	opacity: 1;
	transform: translateY(-50%) translateY(1px);
}

/* 4. Search Submit Button */
.mono-product-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: inherit;
	padding: 0.35rem 0.85rem;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--full, 9999px);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mono-product-search-button:hover {
	background-color: var(--mono-search-btn-hover, rgba(0, 0, 0, 0.05));
	transform: scale(1.05);
}

.mono-product-search-button:active {
	transform: scale(0.96);
}

.mono-product-search-icon {
	display: block;
	flex-shrink: 0;
	color: currentColor;
}

/* Hide legacy toggle buttons */
.mono-product-search-mobile-toggle,
.mono-product-search-mobile-close {
	display: none !important;
}

/* ============================================================
   RESPONSIVE MOBILE & TABLET STYLING (<= 768px)
   Displays Input Text Field + Search Icon Button.
   Hides Category Dropdown to maintain a sleek compact layout.
   ============================================================ */
@media (max-width: 768px) {
	.mono-product-search-form {
		display: flex !important;
		width: 100%;
		min-height: 38px;
	}

	/* Hide category dropdown wrapper and category divider on mobile/tablet */
	.mono-product-search-category-select-wrapper,
	.mono-product-search-divider-category {
		display: none !important;
	}

	.mono-product-search-input-field {
		flex: 1 1 auto;
	}

	.mono-product-search-input {
		font-size: 0.85rem;
		padding: 0.3rem 0.85rem;
	}

	.mono-product-search-button {
		padding: 0.3rem 0.75rem;
	}
}