/**
 * Ulannii — search in the header.
 *
 * header-search.js builds both shapes; everything here is scoped to what it
 * creates, so nothing is styled unless the script has run.
 *
 * The round button matches the account circle beside it — same 43px, same grey,
 * same outline weight — because they are two controls of one set and should
 * read that way.
 */

/* ---------- the round button, wide screens ---------- */

.main-header-menu li.u-search-item {
	position: relative;
	display: flex !important;
	align-items: center;
	padding: 0 !important;
	margin-right: 4px;
}

.u-search__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0f1f2;
	color: #5a6472;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.u-search__toggle:hover,
.u-search__toggle:focus-visible {
	background: #fdf0e4;
	color: #e2650f;
}

.u-search__toggle[aria-expanded="true"] {
	background: #fdf0e4;
	color: #e2650f;
}


/* ---------- the field it drops ---------- */

/* The panel is a position, not a surface. Wrapping the pill in a white
   card put a box inside a box — the reference drops the pill on its own,
   and so does this. The shadow moves onto the pill for the same reason. */
.u-search__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1000;
	width: 340px;
	padding: 0;
	background: none;
	border: 0;
}

.u-search__panel .u-search__form {
	box-shadow: 0 14px 34px rgba(20, 28, 38, 0.18);
}

.u-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 5px 5px 20px;
	background: #f0f1f2;
	border-radius: 999px;
}

.u-search__field {
	flex: 1;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	color: #26303b;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.u-search__field:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}

.u-search__field::placeholder {
	color: #9aa2ad;
	opacity: 1;
}

/* Chrome draws its own clear button inside a type=search field, which lands on
   top of the submit circle. */
.u-search__field::-webkit-search-cancel-button {
	appearance: none;
}

.u-search__go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e2650f;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.u-search__go:hover,
.u-search__go:focus-visible {
	background: #c9560c;
}

/* ---------- phones ---------- */

/* No button here: the field sits at the top of the hamburger panel and is
   simply there, which is one fewer tap than a toggle and matches the design. */
.u-search--inline {
	padding: 16px 16px 6px;
	background: #fff;
}

.u-search--inline .u-search__form {
	padding: 5px 5px 5px 20px;
}

.u-search--inline .u-search__field {
	height: 38px;
	font-size: 15.5px;
}

/* Astra gives every input a border, a ground and a focus ring of its own, all
   of which show through the pill as a second box around the text. The field is
   only ever the inside of a pill here, so it carries none of them. */
.u-search__form .u-search__field,
.u-search__form .u-search__field:focus,
.u-search__form .u-search__field:focus-visible {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* The glyph is sized here rather than on the element so the two magnifiers can
   differ. This one is 16px, the reference's own measurement; the white one on
   the orange submit stays larger, because a solid ground carries a bigger mark
   comfortably. Sixteen inside a 48px circle reads as deliberate — nineteen read
   as trying to get out. */
.u-search__toggle svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
}