/* ref: reference/g_translats.css L8-31 (renamed) */
.sls-auto{
	z-index: 999 !important;
}
/* Classic design (and the base of every dropdown): the original box. */
.sls-switcher--dropdown{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #cccccc;
	border-radius: 6px;
	padding: 4px 2px;
}
.sls-switcher__icon{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	min-width: 35px;
}
.sls-switcher--dropdown select{
	border-radius: 6px;
	border: none;
}
.sls-links{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
/* new (AUD-24): the second content value is the text a screen reader gets: empty, so that it does not read the bar. A browser that
 * does not know the two-value form drops that line and keeps the first. */
.sls-links__item + .sls-links__item::before{
	content: "|";
	content: "|" / "";
	margin: 0 .4em;
	opacity: .6;
}
.sls-link[aria-current="true"]{
	font-weight: 700;
}
/* new (AUD-24): a visible focus for keyboard users (:focus-visible, so a mouse click shows nothing), in the text colour of the link. */
.sls-link:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
/* new (AUD-02): a language menu item has no href (owner decision RVW-010). iOS Safari sends a click to a link-less <a> only when it
 * looks tappable, so give it the pointer cursor. SLS_Assets::generated_css() adds the same rule for the configured menu IDs. */
.sls-menu-item > a,
a[data-sls-lang]{
	cursor: pointer;
}

/* Icon size (settings: small 16px, medium 20px, large 28px) and icon sizing.
 * Markup without a size class (a cached page from before the designs existed) keeps the old 30px. */
.sls-switcher--dropdown{
	--sls-icon: 30px;
}
.sls-icon-small{
	--sls-icon: 16px;
}
.sls-icon-medium{
	--sls-icon: 20px;
}
.sls-icon-large{
	--sls-icon: 28px;
}
.sls-switcher__icon[hidden]{
	display: none;
}
.sls-switcher__icon svg,
.sls-switcher__icon img{
	display: block;
	flex: none;
	width: var(--sls-icon);
	height: var(--sls-icon);
	max-width: none;
}
.sls-switcher__icon svg{
	fill: none;
	stroke: currentColor;
}
.sls-switcher__icon img{
	object-fit: contain;
}
/* The original image keeps its old 30px in the classic design. */
.sls-design-classic .sls-switcher__icon[data-sls-icon="image"] img{
	width: 30px;
	height: 30px;
}
.sls-switcher__chevron{
	display: none;
}

/* New designs: pill, minimal, card. They replace the classic box rules above. */
.sls-design-pill,
.sls-design-minimal,
.sls-design-card{
	display: inline-flex;
	position: relative;
	/* The generated ".sls-auto>.sls-switcher{display:flex}" wins over inline-flex; keep the box to its content. */
	width: -moz-fit-content;
	width: fit-content;
	box-sizing: content-box;
	justify-content: flex-start;
	align-items: center;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	font-size: 14px;
}
.sls-design-pill .sls-switcher__icon,
.sls-design-minimal .sls-switcher__icon,
.sls-design-card .sls-switcher__icon{
	flex: none;
	min-width: 0;
}
.sls-design-pill .sls-switcher__chevron,
.sls-design-minimal .sls-switcher__chevron,
.sls-design-card .sls-switcher__chevron{
	display: block;
	position: absolute;
	top: 50%;
	/* new (AUD-29): inset-inline-end (it was a physical offset from the right), so that the chevron flips in a right-to-left page. */
	inset-inline-end: 12px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	color: #6b7280;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}
/* Reset the select against theme styles (specificity beats a plain "select" rule). */
.sls-switcher.sls-design-pill select.sls-select,
.sls-switcher.sls-design-minimal select.sls-select,
.sls-switcher.sls-design-card select.sls-select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	height: auto;
	min-height: 0;
	min-width: 0;
	width: auto;
	/* new (AUD-29): the cap of the select (16em of text) is set per design in the AUD-08 rules below: their padding is larger. */
	margin: 0;
	padding: 0;
	/* new (R6-fix B): the padding-inline-end of 22px that stood here was overridden by the padding-inline of every design (AUD-08 rules below), so it is gone. */
	font: inherit;
	/* Some themes force a font on every select with !important (XStore: Lato). */
	font-family: inherit !important;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-indent: 0;
	/* new (AUD-29): a very long label is cut with an ellipsis instead of widening the header. */
	text-overflow: ellipsis;
	color: inherit;
	cursor: pointer;
}
.sls-design-pill .sls-select option,
.sls-design-minimal .sls-select option,
.sls-design-card .sls-select option{
	background: #ffffff;
	color: #1d2939;
}

/* Pill */
/* new (AUD-29): min-height, so that a larger font or a taller line does not spill out of the box. */
.sls-design-pill{
	min-height: 40px;
	padding: 0 12px;
	gap: 8px;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	background: #ffffff;
	color: #344054;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.sls-design-pill:hover{
	border-color: #98a2b3;
	background: #f9fafb;
}
.sls-design-pill:focus-within{
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
	outline: 2px solid transparent;
}

/* Minimal */
.sls-design-minimal{
	/* new (AUD-29): min-height (it was a fixed height). */
	min-height: 38px;
	padding: 0 10px;
	gap: 6px;
	border-radius: 8px;
	/* Takes the menu's text colour, so it also reads on dark headers. */
	color: inherit;
	transition: background-color .15s;
}
.sls-design-minimal:hover{
	background: rgba(127, 127, 127, .12);
}
.sls-design-minimal:focus-within{
	background: rgba(127, 127, 127, .12);
	/* new (AUD-25): blue outside, white inside: one of the two layers shows on a dark and on a light header. */
	box-shadow: 0 0 0 2px #2563eb inset, 0 0 0 4px #fff inset;
	outline: 2px solid transparent;
}
.sls-design-minimal .sls-switcher__chevron{
	/* new (AUD-29): inset-inline-end (it was a physical offset from the right). */
	inset-inline-end: 8px;
	color: currentColor;
	opacity: .6;
}

/* Card */
.sls-design-card{
	/* new (AUD-29): min-height (it was a fixed height). */
	min-height: 44px;
	/* new (AUD-29): logical padding, 6px on the icon side and 12px on the chevron side (it was the physical shorthand 0 12px 0 6px), so that it stays
	 * aligned with the AUD-08 select rules below, which are logical, in a right-to-left page. */
	padding-block: 0;
	padding-inline: 6px 12px;
	gap: 8px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #ffffff;
	color: #1d2939;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: box-shadow .15s, border-color .15s;
}
.sls-design-card:hover{
	box-shadow: 0 2px 6px rgba(16, 24, 40, .1);
}
.sls-design-card:focus-within{
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
	outline: 2px solid transparent;
}
.sls-design-card .sls-switcher__icon{
	width: calc(var(--sls-icon) + 12px);
	height: calc(var(--sls-icon) + 12px);
	border-radius: 8px;
	background: #f2f4f7;
	color: #475467;
}
/* new (R6-fix B): the rule ".sls-switcher.sls-design-card select.sls-select{padding:0;padding-inline:2px 22px}" stood here. Its padding-inline was overridden by the
 * AUD-08 rule of the card below and its padding:0 is the one of the shared reset above, so it is gone. */

/* new (AUD-08): in pill, minimal and card the select covers the whole box (icon, padding and border), so a click on any part of
 * the box opens the list. Negative margins pull the select out over the icon and the padding, equal padding puts the text back where
 * it was: nothing on the screen moves. The icon takes no clicks. Classic keeps the select style of the theme and is not touched.
 * The box: pill = 1px border + 12px padding, gap 8px; minimal = 10px padding, gap 6px; card = 1px border, padding 6px at the start
 * and 12px at the end, gap 8px, the icon tile is the icon + 12px.
 * new (AUD-29): the cap of the select is 16em of TEXT plus the padding of the same rule (max-width calc(16em + padding), the select is
 * border-box), so a long label is cut at 16em of text and not earlier. The padding is the sum of the padding-inline values below. */
.sls-switcher.sls-design-pill select.sls-select,
.sls-switcher.sls-design-minimal select.sls-select,
.sls-switcher.sls-design-card select.sls-select{
	position: relative;
	z-index: 1;
	align-self: stretch;
	border-radius: inherit;
}
.sls-design-pill .sls-switcher__icon,
.sls-design-minimal .sls-switcher__icon,
.sls-design-card .sls-switcher__icon{
	pointer-events: none;
}
.sls-switcher.sls-design-pill select.sls-select{
	margin-block: -1px;
	margin-inline: -13px;
	padding-inline: 13px 35px;
	max-width: calc(16em + 48px);
}
.sls-switcher.sls-design-pill .sls-switcher__icon:not([hidden]) ~ select.sls-select{
	margin-inline-start: calc(-1 * (var(--sls-icon) + 21px));
	padding-inline-start: calc(var(--sls-icon) + 21px);
	max-width: calc(16em + var(--sls-icon) + 56px);
}
.sls-switcher.sls-design-minimal select.sls-select{
	margin-inline: -10px;
	padding-inline: 10px 30px;
	max-width: calc(16em + 40px);
}
.sls-switcher.sls-design-minimal .sls-switcher__icon:not([hidden]) ~ select.sls-select{
	margin-inline-start: calc(-1 * (var(--sls-icon) + 16px));
	padding-inline-start: calc(var(--sls-icon) + 16px);
	max-width: calc(16em + var(--sls-icon) + 46px);
}
.sls-switcher.sls-design-card select.sls-select{
	margin-block: -1px;
	margin-inline: -7px -13px;
	padding-inline: 9px 35px;
	max-width: calc(16em + 44px);
}
.sls-switcher.sls-design-card .sls-switcher__icon:not([hidden]) ~ select.sls-select{
	margin-inline-start: calc(-1 * (var(--sls-icon) + 27px));
	padding-inline-start: calc(var(--sls-icon) + 29px);
	max-width: calc(16em + var(--sls-icon) + 64px);
}

/* new (AUD-09): a focus ring for the classic design, keyboard focus only. The theme (XStore) switches the outline of every focused
 * select off with "select:focus{outline:0}"; this selector is more specific and does not depend on the order of the style sheets.
 * The text colour and everything else stay as they are. */
.sls-switcher.sls-design-classic select.sls-select:focus-visible{
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
	.sls-design-pill,
	.sls-design-minimal,
	.sls-design-card{
		transition: none;
	}
}

/* new (AUD-29): 16px in the select on small screens, so that iOS Safari does not zoom the page when the select gets focus. The doubled
 * classes lift the selector above the design resets ("font: inherit"). Every dropdown: the auto-inserted one too, because it is visible
 * below 993px when the breakpoint setting is 0 or lower than 993 (with the default 993 it is hidden there, so nothing changes for it).
 * SLS_Assets::reserve_size() counts the label at 16px for such a breakpoint. */
@media (max-width: 992px){
	.sls-switcher.sls-switcher select.sls-select.sls-select{
		font-size: 16px;
	}
}

/* new (C4): the notice bar that the proxy guard (sls-proxy-guard.js) puts above a sensitive form on a translated page: <div class="sls-note notranslate"> with a <span class="sls-note__text"> and a
 * <button class="sls-note__go">. The palette is the popup's (grey bar, dark text, blue link button). The button rules have two classes, so that a theme rule such as "button{...}" or
 * ".form button{...}" does not restyle it; it has a focus ring and, on a narrow screen, a tap target of at least 44px. */
.sls-note.notranslate{
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #f9fafb;
	color: #344054;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
}
.sls-note.notranslate .sls-note__text{
	margin: 0;
	padding: 0;
}
.sls-note.notranslate .sls-note__go{
	width: auto;
	margin: 0;
	padding: 4px 0;
	min-height: 24px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: #2563eb;
	font: inherit;
	font-weight: 600;
	text-align: start;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.sls-note.notranslate .sls-note__go:hover{
	background: none;
	color: #1d4ed8;
}
.sls-note.notranslate .sls-note__go:focus-visible{
	outline: 2px solid #2563eb;
	outline-offset: 2px;
	border-radius: 2px;
}
@media (max-width: 480px){
	.sls-note.notranslate .sls-note__go{
		min-height: 44px;
		padding: 10px 0;
	}
}
/* new (H2): the note above a form that was filled again on the original page after a hand-off (sls-switcher.js): the same bar, with the text only (no button). Scrolled into view, so
 * it keeps some room above it for a fixed header. */
.sls-note.sls-note--filled.notranslate{
	scroll-margin-top: 80px;
}

/* new (R6): the warning popup that the proxy guard (sls-proxy-guard.js) opens when a visitor touches a sensitive form field on a translated
 * page: a <dialog class="sls-warn notranslate"> opened with showModal(), holding a message and two buttons (the first, primary: go to the
 * original page; the second: stay). The look is the approved design. Every rule is under .sls-warn. */
.sls-warn{
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 420px;
	margin: auto;
	padding: 24px;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	color: #1d2939;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	text-align: start;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .24);
}
.sls-warn::backdrop{
	background: rgba(16, 24, 40, .45);
}
.sls-warn__msg{
	margin: 0 0 20px;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #1d2939;
}
.sls-warn__actions{
	display: flex;
	flex-direction: row;
	gap: 12px;
}
.sls-warn__btn{
	flex: 1 1 0;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #ffffff;
	color: #344054;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.sls-warn__btn:hover{
	background: #f9fafb;
	border-color: #98a2b3;
}
.sls-warn__go{
	border-color: #2563eb;
	background: #2563eb;
	color: #ffffff;
}
.sls-warn__go:hover{
	border-color: #1d4ed8;
	background: #1d4ed8;
}
.sls-warn__btn:focus-visible{
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}
@media (max-width: 480px){
	.sls-warn__actions{
		flex-direction: column;
	}
	.sls-warn__btn{
		flex: none;
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce){
	.sls-warn__btn{
		transition: none;
	}
}

/* new (R6-fix2 4): after the popup is closed the proxy guard (sls-proxy-guard.js) gives the focus back to the form of the field or of the submit. A form that has no submit button gets
 * tabindex="-1" and data-sls-focus for as long as it has that focus, and a theme often draws an outline on every :focus. After a mouse (Stay clicked) that outline says nothing the
 * visitor asked for, so it is hidden; after a keyboard (Esc, Enter) :focus-visible is true, this rule does not apply and the outline of the theme shows where the focus is. A rule of its
 * own and not part of a selector list: a browser without :focus-visible drops it whole and then hides nothing. It only sets outline, only for this temporary focus. */
form[data-sls-focus]:focus:not(:focus-visible){
	outline: none;
}