/*
 * Shturko Accessibility & BGSL Sign Language Styles
 * WCAG 2.2 AA: skip link, visible keyboard focus, widget.
 */

.shturko-skip {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 1000001;
	padding: 12px 16px;
	min-height: 44px;
	background: #123b64;
	color: #fffdf8;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transform: translateY(-160%);
}
.shturko-skip:focus {
	transform: none;
	outline: 3px solid #f4a62a;
	outline-offset: 3px;
}
html :focus-visible {
	outline: 3px solid #123b64;
	outline-offset: 2px;
	scroll-margin-top: 96px;
	scroll-margin-bottom: 150px;
}

/* Widget Trigger & Panel */
.shturko-a11y-widget {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
}

.shturko-a11y-widget__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 15px 28px;
	background: #123B64 !important;
	background-image: none !important;
	color: #FFFDF8 !important;
	border: 2px solid #FFFDF8;
	border-radius: 30px;
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(18, 59, 100, 0.35);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.shturko-a11y-widget__trigger:hover,
.shturko-a11y-widget__trigger:focus-visible {
	background: #0D2D4C !important;
	background-image: none !important;
	color: #FFFDF8 !important;
	transform: translateY(-2px);
	outline: 3px solid #F4A62A;
	outline-offset: 3px;
	box-shadow: 0 10px 22px rgba(13, 45, 76, 0.28);
}

.shturko-a11y-widget__icon {
	font-size: 18px;
}

/* Modal Panel */
.shturko-a11y-panel {
	position: absolute;
	bottom: 56px;
	right: 0;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
	border: 2px solid #123B64;
	overflow: hidden;
	animation: shturkoA11ySlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shturkoA11ySlideUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.shturko-a11y-panel[hidden] {
	display: none !important;
}

.shturko-a11y-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 8px 16px;
	background: #123B64;
	color: #FFFDF8;
}

.shturko-a11y-panel__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 400;
	color: #FFFDF8;
	display: flex;
	align-items: center;
	gap: 8px;
}

.shturko-a11y-panel__close {
	background: transparent;
	border: none;
	color: #FFFDF8;
	font-size: 18px;
	font-weight: 400;
	cursor: pointer;
	padding: 2px 8px;
	line-height: 1.2;
	border-radius: 4px;
}

.shturko-a11y-panel__close:hover,
.shturko-a11y-panel__close:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

.shturko-a11y-panel__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 420px;
	overflow-y: auto;
}

/* Control Group */
.shturko-a11y-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #EAEAEA;
}

.shturko-a11y-group:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.shturko-a11y-group__info {
	display: flex;
	flex-direction: column;
}

.shturko-a11y-group__title {
	font-size: 14px;
	font-weight: 400;
	color: #123B64;
}

.shturko-a11y-group__desc {
	font-size: 11px;
	color: #2F4A63;
	line-height: 1.4;
	margin-top: 2px;
}

/* Switches & Buttons */
.shturko-a11y-switch {
	position: relative;
	width: 48px;
	height: 26px;
	background: #CBD5E1;
	border: none;
	border-radius: 13px;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

.shturko-a11y-switch[aria-checked="true"] {
	background: #607B3A;
}

.shturko-a11y-switch__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #FFFFFF;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.shturko-a11y-switch[aria-checked="true"] .shturko-a11y-switch__knob {
	transform: translateX(22px);
}

.shturko-a11y-btn-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(58px, 1fr));
	gap: 6px;
	min-width: 126px;
}

.shturko-a11y-btn {
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	background: #FFFDF8 !important;
	background-image: none !important;
	color: #123B64 !important;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	cursor: pointer;
}

.shturko-a11y-btn:hover,
.shturko-a11y-btn:focus-visible {
	background: #FFFDF8 !important;
	background-image: none !important;
	color: #123B64 !important;
	border-color: #CBD5E1 !important;
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16) !important;
	transform: translateY(-2px);
}

.shturko-a11y-btn.is-active {
	background: #F4A62A !important;
	color: #123B64 !important;
	border-color: #F4A62A;
}

.shturko-a11y-panel__footer {
	padding: 8px 16px;
	background: #F8FAFC;
	border-top: 1px solid #EAEAEA;
	text-align: center;
}

/* Compact «Нулирай настройките» (owner, 2026-11-04). */
.shturko-a11y-panel__footer .shturko-a11y-reset-btn.sh-btn {
	min-height: 36px;
	padding: 6px 16px;
	font-size: 14px;
	line-height: 1.2;
}


/* ==========================================================================
   HIGH CONTRAST MODE

   Functional colours are intentionally scoped by semantic role. This keeps
   component states readable and lets OS forced-colour themes take precedence.
   ========================================================================== */
body.a11y-high-contrast {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	color-scheme: dark;
}

body.a11y-high-contrast :where(#page, #wrapper, #content, #primary, main, header, footer, nav, section, article, aside) {
	background-color: #000000 !important;
	background-image: none !important;
}

body.a11y-high-contrast :where(p, li, dt, dd, label, small, figcaption, blockquote, td, th, legend) {
	color: #FFFFFF !important;
}

body.a11y-high-contrast :where(h1, h2, h3, h4, h5, h6, strong, b) {
	color: #FFFF00 !important;
}

body.a11y-high-contrast :where(a:not([class*="button"]):not([class*="btn"])) {
	color: #00FFFF !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: max(2px, 0.12em);
	text-underline-offset: 0.18em;
}

body.a11y-high-contrast :where(button, [role="button"], [class*="button"], [class*="btn"]) {
	background: #FFFF00 !important;
	background-image: none !important;
	color: #000000 !important;
	border: 2px solid #FFFF00 !important;
	box-shadow: none !important;
}

body.a11y-high-contrast :where(input, select, textarea) {
	background: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	caret-color: #FFFFFF;
}

body.a11y-high-contrast :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]):focus-visible {
	background-color: #FFFF00 !important;
	color: #000000 !important;
	outline: 3px solid #FFFFFF !important;
	outline-offset: 3px !important;
}

/* Header rules elsewhere use ID selectors with !important, so resolve those
   explicitly instead of escalating a universal selector across the page. */
body.a11y-high-contrast.a11y-high-contrast #masthead :where(a, button, [role="button"]) {
	color: #000000 !important;
	background: #FFFF00 !important;
	border-color: #FFFF00 !important;
}

body.a11y-high-contrast.a11y-high-contrast #masthead .header-navigation :where(a) {
	color: #00FFFF !important;
	background: #000000 !important;
}

body.a11y-high-contrast :where(img, video) {
	filter: none !important;
}

body.a11y-high-contrast .shturko-a11y-widget__trigger {
	background: #FFFF00 !important;
	color: #000000 !important;
	border: 3px solid #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-panel {
	background: #000000 !important;
	color: #FFFFFF !important;
	border: 3px solid #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-panel__header {
	background: #FFFF00 !important;
	color: #000000 !important;
}

body.a11y-high-contrast .shturko-a11y-panel__title,
body.a11y-high-contrast .shturko-a11y-panel__close {
	color: #000000 !important;
}

body.a11y-high-contrast .shturko-a11y-group__title {
	color: #FFFF00 !important;
}

body.a11y-high-contrast .shturko-a11y-group__desc {
	color: #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-group {
	border-color: #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-switch {
	background: #000000 !important;
	border: 2px solid #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-switch[aria-checked="true"] {
	background: #FFFF00 !important;
	border-color: #FFFF00 !important;
}

body.a11y-high-contrast .shturko-a11y-switch__knob {
	background: #FFFFFF !important;
	box-shadow: none !important;
}

body.a11y-high-contrast .shturko-a11y-switch[aria-checked="true"] .shturko-a11y-switch__knob {
	background: #000000 !important;
}

body.a11y-high-contrast .shturko-a11y-btn {
	background: #000000 !important;
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-btn.is-active {
	background: #FFFF00 !important;
	color: #000000 !important;
	border-color: #FFFF00 !important;
}

body.a11y-high-contrast .shturko-a11y-panel__footer {
	background: #000000 !important;
	border-color: #FFFFFF !important;
}

body.a11y-high-contrast .shturko-a11y-reset-btn {
	background: #000000 !important;
	color: #00FFFF !important;
	border-color: #00FFFF !important;
}

/* Homepage: remove photographic/translucent surfaces that make text contrast
   unpredictable, while keeping the content and controls fully available. */
body.a11y-high-contrast.a11y-high-contrast .homepage--v2,
body.a11y-high-contrast.a11y-high-contrast .homepage__scene,
body.a11y-high-contrast.a11y-high-contrast .homepage__scene-inner,
body.a11y-high-contrast.a11y-high-contrast .homepage__hero-band {
	background: #000000 !important;
	background-image: none !important;
	color: #FFFFFF !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage__scene-bg,
body.a11y-high-contrast.a11y-high-contrast .homepage__scene-video,
body.a11y-high-contrast.a11y-high-contrast .homepage__scene-shade {
	display: none !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage__hero-copy {
	background: #000000 !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border: 3px solid #FFFFFF !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage__hero-title,
body.a11y-high-contrast.a11y-high-contrast .homepage__accent {
	color: #FFFF00 !important;
	text-shadow: none !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage__hero-lead {
	color: #FFFFFF !important;
	text-shadow: none !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage__hero-actions .homepage__btn {
	background: #FFFF00 !important;
	color: #000000 !important;
	border: 2px solid #FFFF00 !important;
}

/* All remaining homepage bands use one predictable contrast surface. Actual
   <img> illustrations stay visible; decorative CSS backgrounds are removed. */
body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where([class*="homepage__"]) {
	background-color: transparent !important;
	background-image: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(
	.homepage__tips,
	.homepage__tips-card,
	.homepage__steps,
	.homepage__steps-scene,
	.homepage__trust,
	.homepage__trust-list,
	.homepage__values,
	.homepage__below,
	.homepage__together,
	.homepage__cards,
	.homepage__worlds
) {
	background: #000000 !important;
	color: #FFFFFF !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(
	p, li, dd, dt, small, label,
	.homepage__hero-lead,
	.homepage__value-text,
	.homepage__step-text,
	.homepage__trust-text,
	.homepage__tips-text
) {
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(
	h1, h2, h3, h4, h5, h6,
	.homepage__section-title,
	.homepage__value-title,
	.homepage__step-title,
	.homepage__tips-title
) {
	color: #FFFF00 !important;
	-webkit-text-fill-color: #FFFF00 !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(a:not(.homepage__btn)) {
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(
	.homepage__btn,
	button,
	[role="button"]
) {
	background: #FFFF00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border: 2px solid #FFFF00 !important;
}

body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :where(
	.homepage__value,
	.homepage__step,
	.homepage__trust-item,
	.homepage__tips-card,
	.homepage__cards-panel,
	.homepage__world-card
) {
	border-color: #FFFFFF !important;
}

/* Match the full header navigation specificity used by the theme/custom CSS. */
html body.a11y-high-contrast.a11y-high-contrast #masthead .header-navigation .header-menu-container > ul > li > a,
html body.a11y-high-contrast.a11y-high-contrast #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
	background: #000000 !important;
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast #masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
html body.a11y-high-contrast.a11y-high-contrast #masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	text-decoration: underline !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 6px !important;
}

/* Header and footer are single full-width contrast bands, not a patchwork of
   inherited theme surfaces. */
html body.a11y-high-contrast.a11y-high-contrast #masthead,
html body.a11y-high-contrast.a11y-high-contrast #masthead :where(
	.site-header-wrap,
	.site-main-header-wrap,
	.site-header-row-container,
	.site-header-row-container-inner,
	.site-main-header-inner-wrap,
	.site-header-section,
	.header-html,
	.header-html-inner
) {
	background: #000000 !important;
	background-image: none !important;
	border-color: #FFFFFF !important;
	box-shadow: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast #masthead .shturko-lang-switcher {
	display: inline-flex !important;
	gap: 0 !important;
	padding: 0 !important;
	background: #000000 !important;
	border: 2px solid #00FFFF !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}

html body.a11y-high-contrast.a11y-high-contrast #masthead .shturko-lang-switcher :where(a, .shturko-lang) {
	min-width: 46px !important;
	min-height: 46px !important;
	padding: 0 12px !important;
	justify-content: center !important;
	background: #000000 !important;
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast #masthead .shturko-lang-switcher :where(a, .shturko-lang).is-active {
	background: #FFFF00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast #masthead .shturko-lang-sep {
	display: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer,
html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer :where(.drawer-inner, .drawer-content, nav, .mobile-html),
html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer .shturko-lang-switcher {
	background: #000000 !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer .shturko-lang-switcher :where(a, .shturko-lang) {
	background: #000000 !important;
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
	opacity: 1 !important;
}

html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer .shturko-lang-switcher :where(a, .shturko-lang).is-active {
	background: #FFFF00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer .shturko-lang-sep {
	display: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(
	.site-footer,
	.site-footer-wrap,
	.site-top-footer-wrap,
	.site-middle-footer-wrap,
	.site-bottom-footer-wrap,
	.site-footer-row-container,
	.site-footer-row-container-inner,
	.site-bottom-footer-inner-wrap,
	.site-footer-section,
	.footer-widget-area,
	.footer-widget-area-inner,
	.site-info-inner,
	.footer-html,
	.footer-html-inner,
	.shturko-footer,
	.shturko-footer-social,
	.shturko-footer-meta
) {
	background: #000000 !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	box-shadow: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast .site-footer :where(a, .shturko-footer-meta a) {
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
}

html body.a11y-high-contrast.a11y-high-contrast .site-footer .shturko-footer-social__link {
	background: #000000 !important;
	color: #00FFFF !important;
	-webkit-text-fill-color: #00FFFF !important;
	border: 2px solid #00FFFF !important;
}

/* Anything the rules above leave on a light fill (promo bar, badges, age chips,
   kickers) is pulled onto the same black / white / yellow / cyan palette.
   Only while high contrast is on. Pictures stay. */
html body.a11y-high-contrast.a11y-high-contrast :where(
	div, span, p, li, label, small, strong, em, b,
	h1, h2, h3, h4, h5, h6,
	section, article, aside, header, footer, nav, main,
	figure, figcaption, blockquote, td, th, dt, dd, summary
) {
	background-color: #000000 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(
	.shturko-promo-bar,
	.shturko-promo-page,
	.shturko-specialist-badge,
	.homepage__ar,
	.homepage__ar-kicker,
	.homepage__ar-phone,
	.fws,
	.fws__invite,
	.fws__who,
	.fws__chip,
	[class*="badge"],
	[class*="chip"],
	[class*="kicker"],
	[class*="pill"],
	[class*="banner"],
	[class*="promo"]
) {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border-color: #ffffff !important;
}

/* The theme paints the page shell white with a body:not(...) selector that
   outranks everything above — that shell showed as white strips beside the
   content. The two :not(#…) only raise specificity; they match every page. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b),
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(
	.site,
	#wrapper,
	#inner-wrap,
	.content-bg,
	.content-container,
	.site-container,
	.entry-content-wrap,
	.homepage__below
) {
	background-color: #000000 !important;
	background-image: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(h1, h2, h3, h4, h5, h6) {
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
	background-color: transparent !important;
}

html body.a11y-high-contrast.a11y-high-contrast a:not([class*="btn"]):not([class*="button"]) {
	background-color: transparent !important;
	color: #00ffff !important;
	-webkit-text-fill-color: #00ffff !important;
}

/* Theme menu colours use an ID and survive the rule above. */
html body.a11y-high-contrast.a11y-high-contrast #masthead a:not([class*="btn"]):not([class*="button"]):not(.is-active),
html body.a11y-high-contrast.a11y-high-contrast #mobile-drawer a:not([class*="btn"]):not([class*="button"]):not(.is-active),
html body.a11y-high-contrast.a11y-high-contrast .site-footer a:not([class*="btn"]):not([class*="button"]) {
	background-color: transparent !important;
	color: #00ffff !important;
	-webkit-text-fill-color: #00ffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast :is(
	button,
	[role="button"],
	[role="tab"],
	summary,
	input[type="submit"],
	input[type="button"],
	[class*="btn"],
	[class*="button"]
) {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :is(a, button)[class*="btn"],
html body.a11y-high-contrast.a11y-high-contrast .homepage--v2 :is(a, button)[class*="button"] {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast :is(button, [role="button"], [role="tab"], [class*="btn"]) :where(span, strong, small, em, b) {
	background-color: transparent !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-promo-bar,
html body.a11y-high-contrast.a11y-high-contrast .shturko-promo-bar :where(a, span) {
	background-color: transparent !important;
	background-image: none !important;
	color: #00ffff !important;
	-webkit-text-fill-color: #00ffff !important;
	border-color: #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-promo-bar {
	background-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-promo-bar__badge,
html body.a11y-high-contrast.a11y-high-contrast .shturko-promo-bar__close {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip,
html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip:hover,
html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip:focus,
html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip:focus-visible {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip.is-on,
html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip.is-on:hover,
html body.a11y-high-contrast.a11y-high-contrast :is(a, button).fws__chip.is-on:focus {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(
	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
	select,
	textarea
) {
	background-color: #000000 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(input, textarea)::placeholder {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	opacity: 1 !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: #ffff00 !important;
	background-color: #000000 !important;
	border: 2px solid #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-widget__trigger {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border: 3px solid #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-panel,
html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-panel__footer,
html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-group {
	background-color: #000000 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border-color: #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-panel__header {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-panel__title,
html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-panel__close,
html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-group__title {
	background-color: transparent !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-group__title,
html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-group__desc {
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-group__desc {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-switch {
	background-color: #000000 !important;
	border: 2px solid #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-switch[aria-checked="true"] {
	background-color: #ffff00 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-switch__knob {
	background-color: #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-switch[aria-checked="true"] .shturko-a11y-switch__knob {
	background-color: #000000 !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-btn {
	background-color: #000000 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border-color: #ffffff !important;
}

html body.a11y-high-contrast.a11y-high-contrast .shturko-a11y-btn.is-active {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]):focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   Site-wide sweep. Page and component styles use !important with long
   selectors (cards, tabs, filters, forms, panels), so the rules above lose to
   them and leave light panels with white text. The two :not(#…) below only
   raise specificity above any component rule; they match every page.
   Header, mobile menu and this panel keep their own rules above.
   -------------------------------------------------------------------------- */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(
	div, section, article, aside, header, footer, nav, main, form, fieldset,
	ul, ol, li, dl, dt, dd, table, thead, tbody, tr, td, th, figure, figcaption,
	p, span, label, small, em, i, strong, b, blockquote, details, summary, legend
):not(:is(#masthead, #masthead *, #mobile-drawer, #mobile-drawer *, .shturko-a11y-panel, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: transparent !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Surfaces are see-through, so the black page shows behind them and no
   text column can cover a picture laid under it. Only things that open ABOVE
   the page (dialogs, menus, panels, bars, banners) get their own black fill. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(
	dialog, [role="dialog"], [role="menu"], [role="listbox"], [aria-modal="true"],
	[class*="modal"], [class*="dialog"], [class*="popover"], [class*="popup"],
	[class*="dropdown"], [class*="drawer"], [class*="sheet"], [class*="consent"],
	[class*="toast"], [class*="tooltip"], [class*="panel"], [class*="sub-menu"],
	[class*="submenu"], [class*="promo-bar"], [class*="fbw"], [class*="sticky"],
	[class*="account-menu"], [class*="user-menu"], .shturko-promo-bar,
	/* Sticky filter bars that dock under the header while the page scrolls. */
	[class*="__dock"], [class*="toolbar"], .shturko-logoped-chrome,
	.shturko-sound-filter__live, .fws__hook
):is(div, section, aside, nav, ul, ol, dialog, form, details, header, footer):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, button *, a *)):not(:is([class*="scene"], [class*="veil"], [class*="shade"], [class*="overlay"], [aria-hidden="true"])) {
	background-color: #000000 !important;
}

/* Decorative layers (scenes, veils, shades) often sit ABOVE the content with
   pointer-events: none — painted black they hide everything under them
   (the shop list went blank). They stay see-through. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is([aria-hidden="true"], [class*="scene"], [class*="veil"], [class*="shade"], [class*="overlay"], [class*="deco"], [class*="glow"], [class*="blob"], [class*="sparkle"]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)),
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) [aria-hidden="true"] * {
	background-color: transparent !important;
}

/* Light gradients have no picture in them, so they go too (photos are url()). */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(div, section, article, aside, li, span, p, form):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)):not([style*="url("]):not([class*="photo"]):not([class*="img"]):not([class*="image"]):not([class*="thumb"]):not([class*="media"]):not([class*="hero"]):not([class*="scene"]):not([class*="cover"]):not([class*="art"]):not([class*="pic"])[class] {
	background-image: none !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(h1, h2, h3, h4, h5, h6):not(:is(#masthead *, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: transparent !important;
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) a:not([class*="btn"]):not([class*="button"]):not([role="button"]):not([role="tab"]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)),
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) a:not([class*="btn"]):not([class*="button"]):not([role="button"]):not([role="tab"]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) :is(span, strong, b, em, small) {
	background-color: transparent !important;
	color: #00ffff !important;
	-webkit-text-fill-color: #00ffff !important;
}

/* Buttons: yellow with black text. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(
	button, input[type="submit"], input[type="button"], [role="button"],
	a[class*="btn"], a[class*="button"]
):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: #ffff00 !important;
	background-image: none !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border: 2px solid #ffff00 !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* Tabs, chips, filters: yellow text, no fill; the chosen one is yellow. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(button, a, label, [role="tab"]):is([role="tab"], [class*="tab"]:not([class*="table"]), [class*="chip"], [class*="pill"], [class*="filter"], [class*="seg"], [class*="view"]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(button, a, label, [role="tab"]):is([role="tab"], [class*="tab"]:not([class*="table"]), [class*="chip"], [class*="pill"], [class*="filter"], [class*="seg"], [class*="view"]):is(.is-active, .is-on, .active, .is-selected, .is-current, .current, [aria-selected="true"], [aria-pressed="true"], [aria-current]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* Tabs are lines, not boxes: yellow text and a yellow line below; the chosen
   or hovered tab also gets a line on top. Two more :not(#…) than the button
   rules, whose :not(:is(#masthead *)) already counts as an id. On a deck page
   the game-hub tabs are links (a.shturko-hub-tabs__btn). */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b):not(#a11y-hc-c):not(#a11y-hc-d) :is([role="tab"], .shturko-hub-tabs__btn):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	text-decoration-line: underline !important;
	text-decoration-color: #ffff00 !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 0.3em !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b):not(#a11y-hc-c):not(#a11y-hc-d) :is([role="tab"], .shturko-hub-tabs__btn):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)):is(.is-active, [aria-selected="true"], :hover, :focus-visible) {
	background-color: transparent !important;
	color: #ffff00 !important;
	-webkit-text-fill-color: #ffff00 !important;
	text-decoration-line: underline overline !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b):not(#a11y-hc-c):not(#a11y-hc-d) :is([role="tab"], .shturko-hub-tabs__btn):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) :is(span, small, b, strong) {
	text-decoration: none !important;
}

/* Everything inside a button takes the button's colours. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(button, input, [role="button"], [role="tab"], a[class*="btn"], a[class*="button"], [class*="tab"], [class*="chip"], [class*="pill"]):not(:is(#masthead *, #mobile-drawer *, .shturko-a11y-panel *, .kd-card, .kd-card *)) :is(span, strong, b, em, small, i, div, p) {
	background-color: transparent !important;
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
	border-color: transparent !important;
}

/* Promo bar: its −50% and close stay yellow. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(.shturko-promo-bar__badge, .shturko-promo-bar__badge *) {
	background-color: #ffff00 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* Form fields. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(
	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
	select,
	textarea
) {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 2px solid #ffff00 !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(input, textarea)::placeholder {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	opacity: 0.85 !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: #ffff00 !important;
	background-color: #000000 !important;
	border: 2px solid #ffff00 !important;
	opacity: 1 !important;
}

html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is(input[type="checkbox"], input[type="radio"]):checked {
	background-color: #ffff00 !important;
}

/* Dividers and hairlines read as white strips — make them yellow and thin. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) hr {
	background-color: #ffff00 !important;
	border-color: #ffff00 !important;
}

/* Wave/curve dividers drawn as SVG shapes. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) :is([class*="wave"], [class*="divider"], [class*="curve"]) :is(path, rect, polygon, ellipse, circle) {
	fill: #000000 !important;
}

/* Online deck cards are pictures of the printed cards: the sweep leaves them
   alone, and the QR keeps its white tile so the black code can be scanned. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) .kd-card .kd-card__qr,
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) .kd-card .kd-card__qr * {
	background-color: #ffffff !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #ffffff !important;
}

/* The text-size group matches [class*="btn"] and turned into a yellow pad. */
html body.a11y-high-contrast.a11y-high-contrast:not(#a11y-hc-a):not(#a11y-hc-b) .shturko-a11y-panel .shturko-a11y-btn-group {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Honour the palette selected by Windows/other forced-colour user agents. */
@media (forced-colors: active) {
	body.a11y-high-contrast,
	body.a11y-high-contrast :where(#page, #wrapper, #content, #primary, main, header, footer, nav, section, article, aside),
	body.a11y-high-contrast .shturko-a11y-panel,
	body.a11y-high-contrast .shturko-a11y-panel__footer {
		background: Canvas !important;
		color: CanvasText !important;
	}

	body.a11y-high-contrast :where(p, li, dt, dd, label, small, figcaption, blockquote, td, th, legend, h1, h2, h3, h4, h5, h6, strong, b),
	body.a11y-high-contrast .shturko-a11y-group__title,
	body.a11y-high-contrast .shturko-a11y-group__desc {
		color: CanvasText !important;
	}

	body.a11y-high-contrast :where(a:not([class*="button"]):not([class*="btn"])),
	body.a11y-high-contrast #masthead .header-navigation :where(a),
	body.a11y-high-contrast .shturko-a11y-reset-btn {
		color: LinkText !important;
		background: Canvas !important;
	}

	body.a11y-high-contrast :where(button, [role="button"], [class*="button"], [class*="btn"]),
	body.a11y-high-contrast #masthead :where(a, button, [role="button"]),
	body.a11y-high-contrast .shturko-a11y-btn {
		background: ButtonFace !important;
		color: ButtonText !important;
		border: 2px solid ButtonText !important;
	}

	body.a11y-high-contrast :where(input, select, textarea) {
		background: Canvas !important;
		color: CanvasText !important;
		border-color: CanvasText !important;
	}

	body.a11y-high-contrast :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]):focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px !important;
	}

	body.a11y-high-contrast :where([aria-checked="true"], [aria-selected="true"], .is-active) {
		background: Highlight !important;
		color: HighlightText !important;
		border-color: Highlight !important;
	}

	body.a11y-high-contrast.a11y-high-contrast .homepage--v2,
	body.a11y-high-contrast.a11y-high-contrast .homepage__scene,
	body.a11y-high-contrast.a11y-high-contrast .homepage__scene-inner,
	body.a11y-high-contrast.a11y-high-contrast .homepage__hero-band,
	body.a11y-high-contrast.a11y-high-contrast .homepage__hero-copy {
		background: Canvas !important;
		color: CanvasText !important;
		border-color: CanvasText !important;
	}

	body.a11y-high-contrast.a11y-high-contrast .homepage__hero-title,
	body.a11y-high-contrast.a11y-high-contrast .homepage__accent,
	body.a11y-high-contrast.a11y-high-contrast .homepage__hero-lead {
		color: CanvasText !important;
	}
}

/* The panel must reflow at narrow viewports and at 200–400% browser zoom. */
@media (max-width: 480px), (max-height: 640px) {
	.shturko-a11y-widget {
		right: 12px;
		bottom: 12px;
	}

	/* Collapse to an icon-only button so the fixed widget stops covering
	   tappable game content at the bottom of short viewports. The label
	   stays available to screen readers via the button's aria-label. */
	.shturko-a11y-widget__trigger {
		min-height: 44px;
		min-width: 44px;
		padding: 10px;
		border-radius: 50%;
	}

	.shturko-a11y-widget__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.shturko-a11y-panel {
		position: fixed;
		inset: 12px;
		width: auto;
		max-width: none;
		max-height: calc(100dvh - 24px);
		display: flex;
		flex-direction: column;
	}

	.shturko-a11y-panel[hidden] {
		display: none !important;
	}

	.shturko-a11y-panel__body {
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.shturko-a11y-group {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.shturko-a11y-group__info {
		min-width: min(100%, 150px);
		flex: 1 1 150px;
	}

	.shturko-a11y-btn-group {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shturko-a11y-btn {
		min-height: 44px;
		white-space: normal;
	}
}

/* ==========================================================================
   TEXT MAGNIFICATION / ZOOM
   ========================================================================== */

/* ==========================================================================
   ENHANCED KEYBOARD FOCUS
   ========================================================================== */
body.a11y-focus-thick *:focus-visible {
	outline: 4px solid #f04d23 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 6px rgba(240, 77, 35, 0.3) !important;
}

/* ==========================================================================
   BGSL SIGN LANGUAGE SIDE PANEL (Large & Outside the Card)
   ========================================================================== */
.shturko-bgsl-side-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: #FFFDF8;
	border: 3px solid #287B9B;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(40, 123, 155, 0.22);
	margin: 20px auto;
	max-width: 320px;
	text-align: center;
	animation: shturkoFadeIn 0.3s ease;
}

@keyframes shturkoFadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

.shturko-bgsl-side-panel__header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.shturko-bgsl-side-panel__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: #287B9B;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 400;
	border-radius: 12px;
}

.shturko-bgsl-side-panel__title {
	margin: 4px 0 0 0;
	font-size: 16px;
	font-weight: 400;
	color: #123B64;
}

.shturko-bgsl-side-panel__img-wrap {
	width: 240px;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 2px solid #EAEFC2;
	border-radius: 16px;
	padding: 10px;
}

.shturko-bgsl-side-panel__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.shturko-bgsl-side-panel__source-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 8px 16px;
	background: #F4A62A !important;
	background-image: none !important;
	color: #123B64 !important;
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
	text-decoration: none !important;
	border-radius: 20px;
	transition: transform 0.2s ease, background-color 0.2s ease;
	box-shadow: 0 4px 12px rgba(240, 77, 35, 0.3);
}

.shturko-bgsl-side-panel__source-btn:hover,
.shturko-bgsl-side-panel__source-btn:focus-visible {
	background: #F4A62A !important;
	background-image: none !important;
	color: #123B64 !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16) !important;
}

/* ==========================================================================
   AUDIO TOAST (Visual cue for hearing impaired users)
   ========================================================================== */
#shturko-a11y-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	padding: 12px 24px;
	background: #123B64;
	color: #FFFDF8;
	font-size: 16px;
	font-weight: 400;
	border-radius: 30px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	border: 2px solid #F4A62A;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#shturko-a11y-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.shturko-a11y-panel,
	.shturko-bgsl-side-panel {
		animation: none;
	}

	.shturko-a11y-widget__trigger,
	.shturko-a11y-switch,
	.shturko-a11y-switch__knob,
	.shturko-bgsl-side-panel__source-btn,
	#shturko-a11y-toast {
		transition: none;
	}
}

/* A visible keyboard focus is a baseline, not an optional visual mode. */
/* tabindex="-1" marks containers that only receive focus from scripts (scroll targets,
 * panels); they are not controls, so they get no ring — it boxed whole sections. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 1px solid var(--sh-ink, #1f4568) !important;
	outline-offset: 2px !important;
}
/* …and no browser default ring either (Chrome draws one on scripted focus). */
:where([tabindex="-1"]:not([role])):focus {
	outline: none;
}

/* At 200% soften the complete illustrated section instead of highlighting each line. */
html.a11y-zoom-200 .a11y-background-highlight {
	position: relative;
	isolation: isolate;
}

html.a11y-zoom-200 .a11y-background-highlight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(255, 253, 248, 0.72);
	border-radius: inherit;
}

html.a11y-zoom-200 .a11y-background-highlight > * {
	position: relative;
	z-index: 1;
}