/*
 * Shturko Accessibility & BGSL Sign Language Styles
 * WCAG 2.1 AA Compliance & User Preferences
 */

/* 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: 14px 18px;
	background: #123B64;
	color: #FFFDF8;
}

.shturko-a11y-panel__title {
	margin: 0;
	font-size: 16px;
	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: 4px 8px;
	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: 12px 16px;
	background: #F8FAFC;
	border-top: 1px solid #EAEAEA;
	text-align: center;
}


/* ==========================================================================
   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;
}

/* 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;
}