/* Restaurant Elementor Widgets — menu search field, results list and menu-page filter state. */

.rew-search {
	position: relative;
	width: 100%;
	min-width: 0;
	font-family: var(--mg-font-ui);
}

.rew-search__form {
	margin: 0;
}

.rew-search__label {
	display: block;
	margin: 0 0 8px;
	color: var(--mg-text);
	font: 600 var(--mg-step--1) / 1.3 var(--mg-font-ui);
}

.rew-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.rew-search__icon {
	position: absolute;
	inset-inline-start: 14px;
	width: 20px;
	height: 20px;
	color: var(--mg-text-muted);
	pointer-events: none;
}

body input.rew-search__input {
	width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 88px 0 44px;
	border: 1.5px solid var(--mg-border);
	border-radius: var(--mg-radius-pill);
	background: var(--mg-surface);
	color: var(--mg-text);
	font: 400 16px / 1.2 var(--mg-font-ui); /* 16px keeps iOS from zooming the page on focus. */
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mg-transition-fast), box-shadow var(--mg-transition-fast);
}

body input.rew-search__input::placeholder {
	color: var(--mg-text-muted);
	opacity: 1;
}

body input.rew-search__input::-webkit-search-cancel-button,
body input.rew-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

body input.rew-search__input:hover {
	border-color: var(--mg-border-strong);
}

body input.rew-search__input:focus,
body input.rew-search__input:focus-visible {
	border-color: var(--mg-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-primary) 22%, transparent);
}

.rew-search__busy {
	position: absolute;
	inset-inline-end: 52px;
	display: inline-flex;
	color: var(--mg-primary);
}

.rew-search__busy[hidden] {
	display: none;
}

body button.rew-search__clear {
	position: absolute;
	inset-inline-end: 4px;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mg-radius-pill);
	background: transparent;
	color: var(--mg-text-muted);
	cursor: pointer;
}

body button.rew-search__clear:hover,
body button.rew-search__clear:focus-visible,
body button.rew-search__clear:focus {
	background: var(--mg-bg-soft);
	color: var(--mg-text);
}

body button.rew-search__clear[hidden] {
	display: none;
}

.rew-search__clear svg {
	width: 18px;
	height: 18px;
}

/* Results panel (dropdown mode). */
.rew-search__panel {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 8px);
	z-index: 60;
	overflow: hidden;
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius-md);
	background: var(--mg-surface-elevated);
	box-shadow: var(--mg-shadow-md);
}

.rew-search__panel[hidden] {
	display: none;
}

.rew-search__list {
	max-height: min(60vh, 440px);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.rew-search__list:empty {
	display: none;
}

.rew-search__opt {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto 40px;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	margin: 0;
	padding: 6px 6px 6px 8px;
	border-radius: var(--mg-radius-sm);
	color: var(--mg-text);
	cursor: pointer;
	transition: background-color var(--mg-transition-fast);
}

.rew-search__opt.is-active {
	background: var(--mg-bg-soft);
	box-shadow: inset 3px 0 0 var(--mg-primary);
}

.rew-search__thumb {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: var(--mg-radius-sm);
	background: var(--mg-bg-soft);
	object-fit: cover;
}

.rew-search__thumb--empty {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 31c6-1 12-6 16-14' fill='none' stroke='%237d8f63' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='19' cy='24' rx='3.2' ry='5' transform='rotate(-35 19 24)' fill='%23b8c49f'/%3E%3Cellipse cx='27' cy='19' rx='3.2' ry='5' transform='rotate(40 27 19)' fill='%23b8c49f'/%3E%3Cellipse cx='31' cy='27' rx='3.6' ry='4.6' fill='%233f5a2a'/%3E%3C/svg%3E") center / 70% no-repeat,
		var(--mg-secondary-soft);
}

.rew-search__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.rew-search__name {
	overflow: hidden;
	color: var(--mg-text);
	font: 600 15px / 1.3 var(--mg-font-ui);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rew-search__name mark {
	padding: 0;
	background: transparent;
	color: var(--mg-primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--mg-gold) 70%, transparent);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

.rew-search__meta {
	overflow: hidden;
	color: var(--mg-text-muted);
	font: 400 13px / 1.3 var(--mg-font-ui);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rew-search__price {
	color: var(--mg-text);
	font: 600 14px / 1 var(--mg-font-ui);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rew-search__add {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--mg-radius-pill);
	background: var(--mg-primary);
	color: #FFF;
	transition: background-color var(--mg-transition-fast), transform var(--mg-transition-fast);
}

.rew-search__add svg {
	width: 18px;
	height: 18px;
}

.rew-search__opt:hover .rew-search__add,
.rew-search__opt.is-active .rew-search__add {
	background: var(--mg-primary-hover);
}

.rew-search__add:hover {
	transform: scale(1.06);
}

.rew-search__opt.is-soldout .rew-search__thumb,
.rew-search__opt.is-soldout .rew-search__name {
	opacity: .6;
}

.rew-search__state {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 14px 16px;
	color: var(--mg-text-muted);
	font: 400 14px / 1.45 var(--mg-font-ui);
}

.rew-search__state[hidden],
.rew-search__state:empty {
	display: none;
}

.rew-search__list:not(:empty) + .rew-search__state {
	border-top: 1px solid var(--mg-border);
}

.rew-search__state p {
	margin: 0;
}

.rew-search__empty-title {
	color: var(--mg-text);
	font-weight: 600;
}

.rew-search__error {
	color: var(--mg-danger);
}

body a.rew-search__all {
	color: var(--mg-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body a.rew-search__all:hover,
body a.rew-search__all:focus-visible,
body a.rew-search__all:focus {
	color: var(--mg-primary-hover);
}

/* Filter mode (menu page): the count and Clear sit under the field. */
.rew-search--filter .rew-search__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 12px 4px 0;
}

body button.rew-search__reset {
	min-height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--mg-border-strong);
	border-radius: var(--mg-radius-pill);
	background: var(--mg-surface);
	color: var(--mg-primary);
	font: 600 13px / 1 var(--mg-font-ui);
	cursor: pointer;
}

body button.rew-search__reset:hover,
body button.rew-search__reset:focus-visible,
body button.rew-search__reset:focus {
	border-color: var(--mg-primary);
	background: var(--mg-secondary-soft);
}

.rew-search__count {
	color: var(--mg-text);
	font-weight: 600;
}

.rew-menu.is-filtered .rew-menu__group[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.rew-search__opt {
		grid-template-columns: 44px minmax(0, 1fr) auto 36px;
		gap: 10px;
	}

	.rew-search__thumb {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rew-search__opt,
.rew-search__add,
body input.rew-search__input {
		transition: none;
	}

	.rew-search__add:hover {
		transform: none;
	}
}