/* ============================================================================
   <x-ui.search-suggest> - the Search box embed and its list (#10281, epic #10280).
   Approved as drawn by the owner on 2026-11-11 (docs/mockups/embed-search/).

   One stylesheet for two places:
   - the portal and /design-system, where tokens.css defines the --ed-* tokens;
   - a shop's own website, where public/js/equipdash-widget-embed.js draws the
     same DOM and links this file from our origin. That page has no tokens, so
     every token read below carries its own fallback, and nothing here styles
     anything outside .eq-ss.
   The loader may set --eq-ss-accent to the site's own main color.
   ========================================================================== */

.eq-ss {
	--eq-ss-ink: var(--ed-ink, rgb(34, 49, 78));
	--eq-ss-muted: var(--ed-muted, rgb(90, 112, 137));
	--eq-ss-faint: var(--ed-faint, rgb(138, 143, 148));
	--eq-ss-surface: var(--ed-surface, white);
	--eq-ss-line: var(--ed-border, rgb(231, 236, 243));
	--eq-ss-edge: rgba(29, 43, 69, .18);
	--eq-ss-accent: var(--ed-navy-700, rgb(0, 50, 100));
	--eq-ss-hover: rgba(29, 43, 69, .05);
	--eq-ss-tile: rgba(29, 43, 69, .08);
	--eq-ss-shadow: var(--ed-shadow-pop, 0 12px 40px rgba(29, 43, 69, .18));

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 340px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	color: var(--eq-ss-ink);
}
.eq-ss *,
.eq-ss *::before,
.eq-ss *::after {
	box-sizing: border-box;
}

/* ---- the box ---- */
.eq-ss__box {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	background: var(--eq-ss-surface);
	border: 1px solid var(--eq-ss-edge);
	border-radius: 999px;
	color: var(--eq-ss-ink);
	cursor: text;
}
.eq-ss__box:focus-within {
	border-color: var(--eq-ss-accent);
	box-shadow: 0 0 0 3px rgba(29, 43, 69, .08);
}
.eq-ss__icon {
	flex: none;
	width: 18px;
	height: 18px;
	opacity: .55;
}
.eq-ss .eq-ss__input {
	flex: 1;
	min-width: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.eq-ss .eq-ss__input::placeholder {
	color: var(--eq-ss-faint);
	opacity: 1;
}
.eq-ss .eq-ss__input::-webkit-search-cancel-button,
.eq-ss .eq-ss__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* ---- the big box in a hero ---- */
.eq-ss--hero {
	max-width: 560px;
	font-size: 17px;
}
.eq-ss--hero .eq-ss__box {
	height: 56px;
	padding: 0 18px;
	border: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* ---- the list under the box ---- */
.eq-ss__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 99990;
	min-width: min(320px, calc(100vw - 32px));
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 8px;
	background: var(--eq-ss-surface);
	border-radius: 14px;
	box-shadow: var(--eq-ss-shadow);
	color: var(--eq-ss-ink);
	font-size: 15px;
}
.eq-ss__list[hidden] {
	display: none;
}
.eq-ss--static .eq-ss__list {
	position: relative;
	top: auto;
	margin-top: 8px;
	z-index: auto;
}

.eq-ss__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	color: var(--eq-ss-ink);
	text-decoration: none;
	cursor: pointer;
}
.eq-ss__row:hover,
.eq-ss__row:focus,
.eq-ss__row.is-active {
	background: var(--eq-ss-hover);
	color: var(--eq-ss-ink);
	text-decoration: none;
	outline: 0;
}
.eq-ss__img {
	flex: none;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--eq-ss-tile);
	object-fit: cover;
}
/* An icon in the picture tile, for a list of things with no picture (help articles in the Help drawer, #10428). */
.eq-ss__img--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eq-ss-muted);
	font-size: 18px;
}
.eq-ss__text {
	flex: 1;
	min-width: 0;
}
.eq-ss__name {
	/* Two lines, so two items that start alike ("Trekking Bike (Daily)", "Trekking Bike (Team)") stay apart on a phone. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-weight: 500;
	font-size: 15px;
}
.eq-ss__kind {
	display: block;
	font-size: 13px;
	color: var(--eq-ss-muted);
}
.eq-ss__price {
	flex: none;
	font-size: 14px;
	white-space: nowrap;
	color: var(--eq-ss-ink);
}

.eq-ss__empty {
	padding: 12px 8px;
	font-size: 14px;
	color: var(--eq-ss-muted);
}

.eq-ss__all {
	display: block;
	margin-top: 4px;
	padding: 12px 8px;
	border-top: 1px solid var(--eq-ss-line);
	border-radius: 0 0 8px 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--eq-ss-accent);
	text-decoration: none;
	cursor: pointer;
}
.eq-ss__all:first-child {
	margin-top: 0;
	border-top: 0;
}
.eq-ss__all:hover,
.eq-ss__all:focus,
.eq-ss__all.is-active {
	background: var(--eq-ss-hover);
	color: var(--eq-ss-accent);
	text-decoration: none;
	outline: 0;
}

/* A phone: the box fills its column and the list stays inside the screen. */
@media (max-width: 480px) {
	.eq-ss,
	.eq-ss--hero {
		max-width: none;
	}
	.eq-ss__list {
		min-width: 0;
	}
	/* A long price ("From $260.00 per person") wraps instead of squeezing the name to a few letters. */
	.eq-ss__price {
		max-width: 40%;
		font-size: 13px;
		white-space: normal;
		text-align: right;
	}
}