/*
 * ר.ת.מ בנקר — שורת החיפוש הנפתחת וסרגל הנגישות.
 *
 * הופרד מ-ui.css כי ההעלאה לשרת נחתכת מעל 32KB ומדווחת על הצלחה.
 */

/* ============================================================
   8. שורת חיפוש נפתחת
   ============================================================ */

/* בלי רקע ובלי מסגרת: זו זכוכית מגדלת בשורת ההדר, לא כפתור פעולה. */
.rtm-search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--rtm-navy);
	font-family: var(--rtm-font-head);
	font-size: var(--rtm-fs-xs);
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--rtm-dur) var(--rtm-ease);
}

.rtm-search-toggle:hover { color: var(--rtm-blue); background: none; }
.rtm-search-toggle svg { inline-size: 21px; block-size: 21px; }
.rtm-search-toggle[aria-expanded='true'] { color: var(--rtm-blue); }

/* העותק לנייד יושב ליד ההמבורגר, ובדסקטופ הוא מיותר */
.rtm-search-toggle--mobile { display: none; }
.rtm-search-toggle--mobile span { display: none; }

.rtm-search-back {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(15, 46, 20, .35);
}

/* השורה נצמדת לתחתית ההדר. ה-top נקבע ב-JS לפי המדידה בפועל, כי
   ההדר דביק ומשנה גובה בין דסקטופ לנייד. */
.rtm-search-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-start: var(--rtm-headh);
	z-index: 99;
	background: #fff;
	border-block-end: 1px solid var(--rtm-line);
	box-shadow: var(--rtm-shadow-lg);
	animation: rtm-slide-down .22s var(--rtm-ease);
	max-block-size: calc(100vh - var(--rtm-headh));
	max-block-size: calc(100dvh - var(--rtm-headh));
	overflow-y: auto;
	overscroll-behavior: contain;
}

@keyframes rtm-slide-down {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

.rtm-search-bar__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--rtm-s3);
	padding-block: var(--rtm-s3);
}

.rtm-search-bar__form {
	display: flex;
	align-items: center;
	gap: var(--rtm-s2);
	min-inline-size: 0;
	border: 2px solid var(--rtm-line);
	border-radius: var(--rtm-radius);
	padding-inline: var(--rtm-s3);
	transition: border-color var(--rtm-dur) var(--rtm-ease);
}

.rtm-search-bar__form:focus-within { border-color: var(--rtm-blue); }
.rtm-search-bar__icon { inline-size: 21px; block-size: 21px; flex: none; color: var(--rtm-steel-soft); }

.rtm-search-bar__input {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	padding-block: .85rem;
	font: inherit;
	font-size: var(--rtm-fs-md);
	color: var(--rtm-navy);
}

.rtm-search-bar__input:focus { outline: 0; }
.rtm-search-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rtm-search-bar__go {
	flex: none;
	border: 0;
	border-radius: var(--rtm-radius);
	background: var(--rtm-green);
	color: var(--rtm-navy);
	padding: .55rem 1.1rem;
	margin-inline-start: var(--rtm-s2);
	font-family: var(--rtm-font-head);
	font-size: var(--rtm-fs-xs);
	font-weight: 700;
	cursor: pointer;
}

.rtm-search-bar__go:hover { background: var(--rtm-green-dark); }

.rtm-search-bar__x {
	flex: none;
	inline-size: 42px;
	block-size: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--rtm-line);
	border-radius: var(--rtm-radius);
	background: none;
	color: var(--rtm-steel);
	cursor: pointer;
}

.rtm-search-bar__x:hover { border-color: var(--rtm-blue); color: var(--rtm-blue); }
.rtm-search-bar__x svg { inline-size: 20px; block-size: 20px; }

.rtm-search-bar__panel { grid-column: 1 / -1; }

.rtm-search-bar__hint {
	margin: 0;
	font-size: var(--rtm-fs-xs);
	color: var(--rtm-text-soft);
}

.rtm-search-bar__list {
	list-style: none;
	margin: var(--rtm-s3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--rtm-s2);
	max-block-size: min(52vh, 420px);
	overflow-y: auto;
}

.rtm-search-bar__list:empty { display: none; }

.rtm-search-bar__list a {
	display: flex;
	align-items: center;
	gap: var(--rtm-s3);
	padding: 8px;
	border: 1px solid transparent;
	border-radius: var(--rtm-radius);
	color: var(--rtm-navy);
	text-decoration: none;
	transition: border-color var(--rtm-dur) var(--rtm-ease), background var(--rtm-dur) var(--rtm-ease);
}

.rtm-search-bar__list a:hover,
.rtm-search-bar__list a:focus-visible {
	border-color: var(--rtm-blue);
	background: var(--rtm-blue-tint);
}

.rtm-search-bar__list img {
	inline-size: 52px;
	block-size: 52px;
	flex: none;
	object-fit: contain;
	background: #fff;
	mix-blend-mode: multiply;
}

.rtm-search-bar__txt { display: grid; gap: 2px; min-inline-size: 0; }

.rtm-search-bar__model {
	font-family: var(--rtm-font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--rtm-blue);
}

.rtm-search-bar__name {
	font-family: var(--rtm-font-head);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rtm-search-bar__cat {
	font-size: 0.7rem;
	color: var(--rtm-steel-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) {
	.rtm-search-toggle--mobile { display: inline-flex; margin-inline-start: auto; }
	.rtm-search-toggle:not(.rtm-search-toggle--mobile) { display: none; }
	.rtm-search-toggle span { display: none; }

	.rtm-search-bar__inner { grid-template-columns: 1fr auto; gap: var(--rtm-s2); }
	.rtm-search-bar__go { display: none; }
	.rtm-search-bar__input { font-size: 1rem; }
	.rtm-search-bar__list { grid-template-columns: 1fr; max-block-size: min(48vh, 380px); }
}