/* Account bar: breadcrumb trail + account page search (Figma spacing tokens as comments) */

.account-breadcrumbs-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	box-sizing: border-box;
}

.account-breadcrumbs-bar__trail {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.account-main-toolbar {
	display: block;
}

/* Outer column: width 400px, flex column, gap var(--spacing-15, 6px), flex-shrink 0 */
.account-account-search {
	display: flex;
	width: 400px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex-shrink: 0;
	box-sizing: border-box;
	position: relative;
	margin-left: auto;
	margin-right: 0;
}

.account-account-search--main-topbar {
	width: 400px;
	max-width: 100%;
	margin-left: auto;
	margin-right: 0;
}

html[dir="rtl"] .account-account-search,
html[dir="rtl"] .account-account-search--main-topbar,
body.rtl .account-account-search,
body.rtl .account-account-search--main-topbar {
	margin-left: 0;
	margin-right: auto;
}

/* Main account page only: avoid doubled vertical spacing in the icl-mpp top row. */
.account-main-topbar--with-search {
	padding-top: 0 !important;
	padding-bottom: 2rem !important;
}

/* Main account top bar (LTR): keep search on the left, not pushed to the far right. */
body:not(.rtl) .account-main-topbar--with-search {
	justify-content: flex-start !important;
	gap: 16px;
}

body:not(.rtl) .account-account-search--main-topbar {
	margin-left: auto;
	margin-right: 0;
}

/* Inner control: padding 8 16 8 20, gap 10, stretch, radius 6, border Slate-500 */
.account-account-search__control {
	display: flex;
	padding: 8px 16px 8px 20px;
	align-items: center;
	gap: 10px;
	flex-direction: row-reverse;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid #64748b;
	background: #fff;
}

.account-account-search__control:hover {
	border-color: #0284c7;
}

.account-account-search__control:focus-within {
	border-color: #0284c7;
	box-shadow: 0 0 0 2px #0284c7;
}

.account-account-search__control .wpml-ico-search {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	align-self: center;
	color: #64748b;
	font-size: 1rem;
	line-height: 1;
}

.account-account-search__control .wpml-ico-search::before {
	vertical-align: middle;
	display: block;
}

.account-account-search__input {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent;
	outline: none !important;
	font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	color: #0f172a;
	direction: ltr;
	text-align: left;
}

html[dir="ltr"] .account-account-search__control {
	justify-content: flex-start;
}

html[dir="rtl"] .account-account-search__control,
body.rtl .account-account-search__control {
	flex-direction: row;
}

html[dir="rtl"] .account-account-search__input,
body.rtl .account-account-search__input {
	direction: rtl;
	text-align: right;
}

.account-account-search__input:hover,
.account-account-search__input:focus,
.account-account-search__input:focus-visible,
.account-account-search__input:active {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}


.account-account-search__input::placeholder {
	color: #64748b;
	opacity: 1;
}

.account-account-search__results {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	background: #fff;
	border: 1px solid #64748b;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	max-height: 280px;
	overflow-y: auto;
}

.account-account-search__results[hidden] {
	display: none !important;
}

.account-account-search__result {
	margin: 0;
}

.account-account-search__result-btn {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 16px;
	border: 0;
	background: transparent;
	font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #0f172a;
	cursor: pointer;
}

.account-account-search__result-btn:hover,
.account-account-search__result-btn:focus-visible {
	background: #f1f5f9;
	outline: none;
}

.account-account-search__result-btn--muted {
	color: #64748b;
	cursor: default;
	pointer-events: none;
}

.account-account-search__result-title {
	font-size: 14px;
	line-height: 20px;
	color: #0f172a;
}

/* Backward-compatible guard: never render URL line in result entries. */
.account-account-search__result-btn .account-account-search__result-url {
	display: none !important;
}

/* Active keyboard-selected result */
.account-account-search__result-btn--active {
	background: #f1f5f9;
	outline: none;
}

/* No-results hint line */
.account-account-search__no-results-hint {
	font-size: 12px;
	padding-top: 2px;
}

@media (max-width: 640px) {
	.account-breadcrumbs-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.account-breadcrumbs-bar__trail {
		width: 100%;
	}

	.account-account-search {
		width: 100%;
		margin-left: 0;
	}

	.account-account-search--main-topbar {
		width: 100%;
		margin-left: 0;
	}

	.account-main-topbar--with-search {
		display: flex !important;
		width: 100%;
		flex-direction: column;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 16px;
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	.account-main-topbar--with-search > .otgs-text-slate-800 {
		width: 100%;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 28px !important;
	}
}