/*!
 * Baly search hero — pill input + suggestion panel.
 * Reference: handover/components/components-search-category-nav.html
 *           + components-search-suggestions.html
 *
 * Resolves --bf-* tokens from baly-food-tokens.css (loaded as a dep).
 */

.baly-search-hero{
	max-width:760px;
	margin:0 auto;
	padding:12px;
	font-family:var(--bf-font);
	color:var(--bf-fg);
	direction:rtl;
}
.baly-search-form{position:relative}

/* ── Pill field ──────────────────────────────────── */
/* Submit button is FIRST in DOM; flex-direction:row-reverse renders it
   visually on the LEFT in RTL — matches the search-suggestions design. */
.baly-field{
	position:relative;
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
	gap:14px;
	padding:10px 14px;
	background:var(--bf-white);
	border:1px solid var(--bf-border-subtle);
	border-radius:var(--bf-radius-pill);
	box-shadow:0 4px 16px rgba(16,24,40,.05);
	transition:border-color .15s var(--bf-ease-out), box-shadow .15s var(--bf-ease-out);
}
.baly-field:focus-within{
	border-color:var(--bf-brand);
	box-shadow:0 0 0 3px var(--bf-brand-20), 0 4px 16px rgba(16,24,40,.05);
}

/* Strip theme defaults from the inner input */
.baly-field .baly-input,
.baly-field input[type="search"].baly-input,
.baly-field input.baly-input[type="search"]{
	border:none !important;
	box-shadow:none !important;
	background:transparent !important;
	outline:none !important;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
.baly-field input[type="search"]::-webkit-search-decoration,
.baly-field input[type="search"]::-webkit-search-cancel-button,
.baly-field input[type="search"]::-webkit-search-results-button,
.baly-field input[type="search"]::-webkit-search-results-decoration{
	-webkit-appearance:none;
}

.baly-input{
	flex:1;
	min-width:0;
	font-family:var(--bf-font);
	font-size:18px;
	line-height:28px;
	padding:14px 8px;
	font-weight:400;
	color:var(--bf-fg);
	text-align:right;
	direction:rtl;
}
@supports (-webkit-touch-callout: none){
	.baly-input{ font-size:16px !important; }   /* iOS: prevents auto-zoom on focus */
}
.baly-input::placeholder{
	color:var(--bf-grey-400);
	opacity:1;
	font-family:var(--bf-font);
}

/* Magnifier submit — circular grey container, design-system canon */
.baly-icon-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	border-radius:var(--bf-radius-pill);
	cursor:pointer;
	background:var(--bf-grey-100) !important;
	color:var(--bf-grey-600) !important;
	border:none !important;
	flex:none;
	transition:background .15s var(--bf-ease-out), color .15s var(--bf-ease-out);
}
.baly-icon-submit:hover{
	background:var(--bf-brand-lighter) !important;
	color:var(--bf-brand) !important;
}
.baly-icon-submit:focus-visible{
	outline:2px solid var(--bf-brand);
	outline-offset:2px;
}

/* ── Suggestions panel ───────────────────────────── */
/* Sibling of .baly-field — sits below it in the form flow. Display:none
   by default; the JS toggles to display:block when there are matches. */
.baly-suggest{
	display:none;
	margin-top:8px;
	background:var(--bf-white);
	border:1px solid var(--bf-border-subtle);
	border-radius:18px;
	box-shadow:0 12px 32px rgba(16,24,40,.08);
	overflow:hidden;
	position:relative;
	z-index:9;
}
.baly-suggest-section{padding:0}
.baly-suggest-section + .baly-suggest-section{border-top:1px solid var(--bf-border-subtle)}
.baly-suggest-title{
	font-size:11px;
	font-weight:800;
	color:var(--bf-grey-500);
	padding:10px 18px 6px;
	margin:0;
	letter-spacing:.04em;
	text-align:right;
}
.baly-suggest-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 18px;
	text-decoration:none;
	color:var(--bf-fg);
	transition:background .12s var(--bf-ease-out);
}
.baly-suggest-item:hover{ background:var(--bf-grey-50); }

/* Lead element — vendor logo (image) or brand-tinted icon (categories) */
.baly-suggest-img,
.baly-suggest-ico{
	flex:none;
	width:40px;
	height:40px;
	border-radius:var(--bf-radius-md);
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.baly-suggest-img{
	background:var(--bf-grey-100) center/cover no-repeat;
}
.baly-suggest-ico{
	background:var(--bf-brand-lighter);
	color:var(--bf-brand);
}

/* Body — title + meta stack */
.baly-suggest-body{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:1px;
	text-align:right;
}
.baly-suggest-t{
	font-size:14px;
	font-weight:700;
	color:var(--bf-fg);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.baly-suggest-t b{
	font-weight:800;
	color:var(--bf-brand);
}
.baly-suggest-meta{
	font-size:11px;
	color:var(--bf-grey-500);
	display:inline-flex;
	align-items:center;
	gap:6px;
}
.baly-suggest-rate{
	display:inline-flex;
	align-items:center;
	gap:3px;
	color:var(--bf-grey-700);
	font-weight:700;
	direction:ltr;
	unicode-bidi:isolate;
}
.baly-suggest-rate svg{ flex:none; }

/* Trailing tag chip — used on category rows */
.baly-suggest-tag{
	flex:none;
	font-size:10px;
	font-weight:800;
	padding:3px 9px;
	border-radius:var(--bf-radius-pill);
	background:var(--bf-grey-100);
	color:var(--bf-grey-600);
	letter-spacing:.02em;
	white-space:nowrap;
}

/* ── Empty / download card ────────────────────────── */
.baly-empty{
	margin-top:12px;
	padding:24px;
	text-align:center;
	border:1px solid var(--bf-border-subtle);
	border-radius:var(--bf-radius-xl);
	background:var(--bf-white);
	box-shadow:var(--bf-shadow-1);
}
.baly-empty-text{
	margin:0 0 14px 0;
	color:var(--bf-fg);
	font-family:var(--bf-font);
	font-weight:900;
	font-size:1.2rem;
	letter-spacing:.01em;
	line-height:1.3;
}
.baly-store-badges{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
}
.baly-store{
	display:inline-block;
	transition:transform .15s var(--bf-ease-out);
}
.baly-store:hover{ transform:translateY(-2px); }
.baly-store img{
	height:44px;
	width:auto;
	display:block;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.06));
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width:640px){
	.baly-search-hero{ max-width:100%; padding:8px; }
	.baly-field{ padding:8px 12px; gap:10px; }
	.baly-icon-submit{ width:46px; height:46px; }
	.baly-input{ font-size:16px; padding:12px 6px; }
	.baly-suggest{ border-radius:14px; margin-top:6px; }
	.baly-suggest-title{ font-size:10.5px; padding:8px 14px 4px; }
	.baly-suggest-item{ padding:9px 14px; gap:10px; }
	.baly-suggest-img,
	.baly-suggest-ico{ width:34px; height:34px; border-radius:10px; }
	.baly-suggest-t{ font-size:13px; }
	.baly-suggest-meta{ font-size:10.5px; }
	.baly-store img{ height:40px; }
}