/* ============================================
PRICE LIST - Search Styles
============================================ */

.price-search-wrapper {
margin-bottom: 2rem;
}

.price-search-box {
position: relative;
max-width: 600px;
margin: 0 auto;
}

.price-search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--med-text-light);
font-size: 1.25rem;
z-index: 2;
pointer-events: none;
}

.price-search-input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid var(--med-border);
border-radius: var(--med-radius);
font-size: 1rem;
background: var(--med-bg);
color: var(--med-text);
transition: all 0.2s ease;
}

.price-search-input:focus {
border-color: var(--med-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.price-search-clear {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--med-text-light);
cursor: pointer;
display: none;
padding: 0.25rem;
font-size: 1.25rem;
transition: color 0.2s;
}

.price-search-clear:hover {
color: var(--med-text);
}

.price-search-results {
text-align: center;
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--med-text-light);
}

/* Mobile adjustments */
@media (max-width: 768px) {
.price-search-input {
font-size: 16px; /* Prevent zoom on iOS */
}
}

/* Fix for recommended badge visibility - ensure parent containers don't clip */
.med-grid:has(.med-card-highlight),
.med-section:has(.med-card-highlight) {
	overflow: visible;
}

/* Alternative: ensure all parent containers of highlighted cards allow overflow */
.med-container .med-grid-3:has(.med-card-highlight),
.med-container .med-grid-2:has(.med-card-highlight),
.med-container .med-grid:has(.med-card-highlight) {
	overflow: visible;
	padding-top: 0.5rem;
}