/*!
 * Baly Digital — Search ([baly_search] / [baly_cards_search]).
 * Ported to the design system's DSearch field (digital-shared.jsx → DSearch):
 * a pill field with a tinted brand icon puck on the start side, plus a
 * card-styled suggestions dropdown and a results modal of brand cards.
 *
 * Class names + DOM structure are unchanged — baly-search.js binds to them.
 * Tokens come from baly-shared.css (--dg-*).
 */

[hidden] { display: none !important; }

.baly-search-hero {
	max-width: 720px;
	margin: 0 auto;
	padding: 4px;
	direction: rtl;
	font-family: var(--dg-font);
}

.baly-search-hero,
.baly-search-hero *,
.baly-search-hero *::before,
.baly-search-hero *::after {
	box-sizing: border-box;
}

.baly-search-form { position: relative; }

/* ── The pill field ─────────────────────────────────────────── */
.baly-field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 8px;
	background: #fff;
	border: 1px solid var(--dg-grey-200);
	border-radius: var(--dg-radius-pill);
	box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 14px 30px -20px rgba(0,30,80,.18);
	transition: border-color var(--dg-duration-fast), box-shadow var(--dg-duration-fast);
}

.baly-field:focus-within {
	border-color: var(--dg-brand-light);
	box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 0 0 4px var(--dg-brand-10), 0 14px 30px -18px rgba(0,30,80,.22);
}

.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(--dg-font);
	font-size: 16px;
	line-height: 1.4;
	padding: 8px 4px;
	font-weight: 500;
	color: var(--dg-black);
	direction: rtl;
}

@supports (-webkit-touch-callout: none) {
	.baly-input { font-size: 16px !important; }
}

.baly-input::placeholder {
	color: var(--dg-grey-500);
	opacity: 1;
	font-weight: 500;
}

/* Tinted brand puck — sits at the start (right in RTL) like DSearch. */
.baly-icon-submit {
	order: -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--dg-radius-pill);
	cursor: pointer;
	background: var(--dg-brand-lighter) !important;
	color: var(--dg-brand) !important;
	border: none !important;
	transition: background var(--dg-duration-fast), color var(--dg-duration-fast);
}

.baly-icon-submit:hover {
	background: var(--dg-brand) !important;
	color: #fff !important;
}

.baly-icon-submit svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
	.baly-search-hero { max-width: 100%; padding: 2px; }
	.baly-icon-submit { width: 38px; height: 38px; }
	.baly-icon-submit svg { width: 17px; height: 17px; }
	.baly-input { font-size: 14px; }
}

/* ── Suggestions dropdown ───────────────────────────────────── */
.baly-suggest {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	transform: translateY(10px);
	display: none;
	background: #fff;
	border: 1px solid var(--dg-grey-100);
	border-radius: var(--dg-radius-lg);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -20px rgba(0,30,80,.28);
	overflow: hidden;
	z-index: 9;
}

.baly-suggest-item {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--dg-grey-100);
	text-decoration: none;
	color: var(--dg-black);
	font-family: var(--dg-font);
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	text-align: right;
	border-inline: none;
	border-bottom: none;
	cursor: pointer;
	transition: background var(--dg-duration-fast);
}

.baly-suggest-item:first-child { border-top: 0; }
.baly-suggest-item:hover { background: var(--dg-grey-50); }

.baly-suggest-thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--dg-radius-md);
	background: #fff;
	border: 1px solid var(--dg-grey-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.baly-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.baly-suggest-thumb--fallback {
	color: var(--dg-grey-400);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	background: var(--dg-grey-100);
}

.baly-suggest-text { min-width: 0; flex: 1; }

.baly-suggest-empty {
	padding: 16px;
	color: var(--dg-grey-600);
	font-family: var(--dg-font);
	font-size: 14px;
	line-height: 1.6;
}

/* ── Results modal ──────────────────────────────────────────── */
.baly-search-modal-open { overflow: hidden; height: 100%; }

.baly-results-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	font-family: var(--dg-font);
	direction: rtl;
}

.baly-results-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 24, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.baly-results-panel {
	position: relative;
	z-index: 1;
	width: min(1120px, calc(100vw - 56px));
	max-height: calc(100dvh - 56px);
	height: auto;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	border-radius: var(--dg-radius-2xl);
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(0,30,80,.4);
	padding: 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.baly-results-panel::-webkit-scrollbar { display: none; }

.baly-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.baly-results-kicker {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--dg-brand);
}

.baly-results-title {
	margin: 0;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--dg-black);
}

.baly-results-close {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--dg-radius-pill);
	background: var(--dg-grey-100);
	color: var(--dg-black);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--dg-duration-fast);
}

.baly-results-close:hover { background: var(--dg-grey-200); }

.baly-results-status {
	margin-bottom: 16px;
	color: var(--dg-grey-600);
	font-size: 13px;
	font-weight: 600;
}

.baly-results-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.baly-result-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--dg-grey-100);
	border-radius: var(--dg-radius-lg);
	overflow: hidden;
	text-decoration: none;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px -16px rgba(0,0,0,.12);
	transition: transform .2s var(--dg-ease-out), box-shadow .2s var(--dg-ease-out), border-color .2s var(--dg-ease-out);
}

.baly-result-card:hover {
	transform: translateY(-3px);
	border-color: var(--dg-grey-200);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 36px -18px rgba(0,30,80,.30);
}

.baly-result-media {
	aspect-ratio: 1 / 0.78;
	background: var(--dg-grey-50);
	display: flex;
	align-items: center;
	justify-content: center;
}

.baly-result-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.baly-result-fallback { color: var(--dg-grey-400); font-weight: 800; letter-spacing: 0.08em; }

.baly-result-body { padding: 10px 12px 12px; }

.baly-result-name {
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--dg-black);
}

.baly-result-subtitle { margin: 0 0 6px; font-size: 11px; line-height: 1.45; color: var(--dg-grey-600); }

.baly-result-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.baly-result-price { font-size: 14px; font-weight: 900; color: var(--dg-brand); }

.baly-result-compare { color: var(--dg-grey-400); text-decoration: line-through; font-size: 10px; }

.baly-results-empty {
	grid-column: 1 / -1;
	padding: 40px 28px;
	border-radius: var(--dg-radius-xl);
	background: var(--dg-grey-50);
	color: var(--dg-grey-700);
	font-weight: 600;
	text-align: center;
}

@media (max-width: 1200px) { .baly-results-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .baly-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 640px) {
	.baly-results-modal { padding: 8px; align-items: stretch; }
	.baly-results-panel {
		width: calc(100vw - 16px);
		height: calc(100dvh - 16px);
		max-height: none;
		min-height: 0;
		padding: 14px;
		border-radius: var(--dg-radius-xl);
	}
	.baly-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.baly-results-title { font-size: 18px; }
	.baly-results-kicker { font-size: 11px; }
	.baly-results-status { margin-bottom: 10px; font-size: 12px; }
	.baly-results-header { align-items: flex-start; margin-bottom: 8px; }
	.baly-results-close { width: 36px; height: 36px; font-size: 22px; }
	.baly-result-media { aspect-ratio: 1 / 1; }
	.baly-result-body { padding: 8px 9px 9px; }
	.baly-result-name { font-size: 11px; margin-bottom: 3px; }
	.baly-result-subtitle { font-size: 9px; margin-bottom: 4px; }
	.baly-result-price { font-size: 12px; }
	.baly-result-compare { font-size: 9px; }
}