/*!
 * Hero search skin — paints the food plugin's real [baly_search] engine
 * markup (.baly-search-hero / .baly-field / .baly-input / .baly-suggest /
 * .baly-empty) to the LATEST site-system hero design: a tall white pill
 * field + a black "ابحث" side button, with a floating suggestions popover.
 *
 * Loaded after food.css (handle bsy-hero-search depends on bsy-page-food),
 * so it wins the cascade. Behaviour is 100% the engine's — this file only
 * restyles. The engine's own sheet (baly-search) still styles the suggestion
 * ROWS inside the dropdown; we only reshape the container, field, button and
 * popover shell. Selectors are scoped under .bsy-page--food .bsy-food-hero so
 * they always out-specify the engine's single-class rules regardless of load
 * order.
 *
 * @package BalyFoodWebsite
 */

/* ── Let the suggestions popover escape the hero ──────────────────────────
   .bsy-food-hero clips with overflow:hidden (to slice the bg SVG + chips).
   Move that clip down onto the decorative layers so the dropdown can overflow
   the hero, and raise the hero above the sections that follow it. */
.bsy-page--food .bsy-food-hero { overflow: visible; z-index: 3; }
.bsy-page--food .bsy-food-hero__bg,
.bsy-page--food .bsy-food-hero__chips { border-radius: inherit; overflow: hidden; }

/* #4 — the trust row below the search is at z-index 2 (food.css) and, being
   later in the DOM, painted OVER the suggestions dropdown (its stats showed
   through). Raise the whole search container above it so the opaque dropdown
   covers the trust row while open. */
.bsy-page--food .bsy-food-hero__search { position: relative; z-index: 20; }

/* ── Root: drop the engine's centered 760px max-width + 12px padding so the
   search bar fills the hero column exactly like the original design. The
   element keeps food.css's `.bsy-food-hero__search` flex row + position. ── */
.bsy-page--food .bsy-food-hero__search.baly-search-hero {
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--bsy-font);
	color: var(--bsy-black);
}

/* The <form> carries the engine's submit semantics but must not introduce a
   layout box — display:contents lets the field + button lay out directly in
   the `.bsy-food-hero__search` flex row, and lets the absolute popover anchor
   to that (positioned) row. */
.bsy-page--food .bsy-food-hero__search-form { display: contents; }

/* ── Field: keep food.css's white 68px pill; just override the engine's
   row-reverse so the leading icon stays on the RTL right of the input. ── */
.bsy-page--food .bsy-food-hero__search-field { flex-direction: row; }
@media (min-width: 769px) {
	/* Engine adds a 1px border; the desktop design uses shadow only. (Mobile
	   food.css intentionally re-adds a border, so scope this to desktop.) */
	.bsy-page--food .bsy-food-hero__search-field { border: 0; }
}

/* Input fills the field; appearance resets come from the engine sheet. */
.bsy-page--food .bsy-food-hero__search-field .baly-input { flex: 1; min-width: 0; }

/* ── Submit button: food.css `-btn` styles the black pill, but it was written
   for an <a>; reset the native <button> chrome it doesn't cover. ── */
.bsy-page--food .bsy-food-hero__search-btn {
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	line-height: normal;
}

/* ── Suggestions popover + no-results card: the engine renders these as
   in-flow siblings of the field. With the form display:contents they'd become
   flex items and break the row, so float them as an absolute popover under the
   whole bar. Inner rows keep the engine sheet's styling. ── */
.bsy-page--food .bsy-food-hero__search .baly-suggest,
.bsy-page--food .bsy-food-hero__search .baly-empty {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 10px);
	margin: 0;
	z-index: 60;
}
.bsy-page--food .bsy-food-hero__search .baly-suggest {
	border-radius: var(--bsy-radius-lg);
	box-shadow: 0 18px 44px -16px rgba(0, 30, 80, .34), 0 2px 8px rgba(16, 24, 40, .06);
	max-height: min(60vh, 420px);
	overflow-y: auto;
}

/* No-results card — brand-light panel with the app-store badges. */
.bsy-page--food .bsy-food-hero__search .baly-empty[hidden] { display: none; }
.bsy-page--food .bsy-food-hero__search .baly-empty {
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	border-radius: var(--bsy-radius-lg);
	box-shadow: 0 18px 44px -16px rgba(0, 30, 80, .34), 0 2px 8px rgba(16, 24, 40, .06);
	padding: 18px 20px;
	text-align: center;
}
.bsy-page--food .bsy-food-hero__search .baly-empty-text {
	margin: 0 0 12px;
	font-family: var(--bsy-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--bsy-black);
}
.bsy-page--food .bsy-food-hero__search .baly-store-badges {
	display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.bsy-page--food .bsy-food-hero__search .baly-store img { height: 44px; width: auto; display: block; }

/* On mobile the side button is hidden by food.css (Enter / tapping a
   suggestion submits); the popover still anchors to the stacked field. */
@media (max-width: 768px) {
	.bsy-page--food .bsy-food-hero__search .baly-suggest,
	.bsy-page--food .bsy-food-hero__search .baly-empty { top: calc(100% + 8px); }
}