/* Accessibility menu (all front-end pages) + the adjustments it applies.
   The menu itself is sized in px so it stays usable at any text size. */

.sma11y { --a-ink: #17130e; --a-paper: #fffdf8; --a-line: #d9cdb6; --a-accent: #1d4ed8; --a-on: #0f3fae; font-family: "SM Text", "Heebo", Arial, sans-serif; direction: rtl; }
.sma11y *, .sma11y *::before, .sma11y *::after { box-sizing: border-box; }
.sma11y [hidden] { display: none !important; }

.sma11y__toggle {
	position: fixed; z-index: 2147483000;
	right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
	display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0;
	border: 2px solid #fff; border-radius: 50%;
	background: var(--a-accent); color: #fff; cursor: pointer;
	box-shadow: 0 10px 26px -6px rgba(29, 78, 216, .55);
	transition: transform .2s ease;
}
.sma11y__toggle:hover { transform: scale(1.06); }
.sma11y__toggle svg { width: 30px; height: 30px; }
.sma11y__toggle:focus-visible, .sma11y button:focus-visible, .sma11y a:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; }

.sma11y__panel {
	position: fixed; z-index: 2147483001;
	right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px);
	width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto;
	padding: 18px; border-radius: 18px; border: 1px solid var(--a-line);
	background: var(--a-paper); color: var(--a-ink);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
	font-size: 15px; line-height: 1.4; text-align: right;
}
.sma11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sma11y__title { margin: 0; font-size: 19px; font-weight: 800; color: var(--a-ink); font-family: inherit; line-height: 1.2; letter-spacing: 0; }
.sma11y__close { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1.5px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-ink); cursor: pointer; }
.sma11y__close svg { width: 20px; height: 20px; }

.sma11y__size { display: grid; grid-template-columns: 1fr 48px 64px 48px; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #f2ece0; }
.sma11y__size-label { font-weight: 700; }
.sma11y__step { height: 44px; margin: 0; padding: 0; border: 1.5px solid var(--a-line); border-radius: 10px; background: #fff; color: var(--a-ink); font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.sma11y__step:disabled { opacity: .4; cursor: default; }
.sma11y__size-value { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.sma11y__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sma11y__opt {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 78px; margin: 0; padding: 10px 6px;
	border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff; color: var(--a-ink);
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.sma11y__opt svg { width: 26px; height: 26px; }
.sma11y__opt:hover { border-color: var(--a-ink); }
.sma11y__opt[aria-pressed="true"] { background: var(--a-on); border-color: var(--a-on); color: #fff; }
.sma11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--a-line); }
.sma11y__reset { min-height: 44px; margin: 0; padding: 0 16px; border: 1.5px solid var(--a-ink); border-radius: 999px; background: var(--a-ink); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.sma11y__statement { padding: 10px 2px; color: var(--a-on); font-weight: 700; text-decoration: underline; }

@media (max-width: 760px) {
	.sma11y__toggle { width: 48px; height: 48px; }
	.sma11y__toggle svg { width: 28px; height: 28px; }
	.sma11y__panel { right: 16px; left: 16px; width: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px); }
}

/* ===================== Adjustments ===================== */

/* Text size (the new pages use rem everywhere, so the whole text scales). */
html.sma11y-fs-0 { font-size: 90% !important; }
html.sma11y-fs-2 { font-size: 115% !important; }
html.sma11y-fs-3 { font-size: 130% !important; }
html.sma11y-fs-4 { font-size: 150% !important; }

/* High contrast: black background, white text, yellow links. */
html.sma11y-contrast,
html.sma11y-contrast body,
html.sma11y-contrast body *:not(img):not(video):not(picture):not(iframe):not(svg):not(svg *):not(.sma11y):not(.sma11y *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
/* (:not(#sma11y-x) only raises specificity above the rule above) */
html.sma11y-contrast body a:not(.sma11y a):not(#sma11y-x),
html.sma11y-contrast body a:not(.sma11y a) *:not(img):not(svg):not(svg *):not(#sma11y-x) { color: #ffe600 !important; }
html.sma11y-contrast body :is(button, .sm-btn, .sm-chip, input, select, textarea):not(.sma11y *):not(#sma11y-x) { border: 2px solid #fff !important; }
html.sma11y-contrast body :is(.sm-btn--primary, .sm-chip[aria-pressed="true"], .sm-wa-float):not(.sma11y *):not(#sma11y-x) { background-color: #ffe600 !important; color: #000 !important; }
html.sma11y-contrast body :is(.sm-btn--primary, .sm-chip[aria-pressed="true"], .sm-wa-float) *:not(#sma11y-x) { color: #000 !important; background-color: transparent !important; }
html.sma11y-contrast .sm-marquee { -webkit-mask-image: none !important; mask-image: none !important; }

/* Grayscale (on the root, so fixed elements keep working). */
html.sma11y-mono { filter: grayscale(1) !important; }

/* Highlight links. */
html.sma11y-links body a:not(.sma11y a) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px dashed currentColor !important;
	outline-offset: 2px !important;
}

/* Readable font. */
html.sma11y-readable body *:not(i):not(svg):not(svg *):not([class*="icon"]):not([class^="fa"]):not([class*=" fa-"]) {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	letter-spacing: normal !important;
}

/* Text spacing (WCAG 1.4.12). */
html.sma11y-spacing body *:not(.sma11y):not(.sma11y *) {
	line-height: 1.8 !important;
	letter-spacing: .06em !important;
	word-spacing: .16em !important;
}

/* Stop animations and transitions (the logo strip is also stopped by the page script). */
html.sma11y-motion *,
html.sma11y-motion *::before,
html.sma11y-motion *::after {
	animation-duration: .001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html.sma11y-motion .sm-reveal { opacity: 1 !important; transform: none !important; }

/* Big cursor. */
html.sma11y-cursor,
html.sma11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8-6.5 2L9 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.sma11y-cursor :is(a, button, summary, label, [role="button"]),
html.sma11y-cursor :is(a, button, summary, label, [role="button"]) * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10m0-1.5a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5c0 3.6-2.4 6.5-6 6.5h-.6c-2 0-3.4-.8-4.5-2.4L4 14.6a1.5 1.5 0 0 1 2.4-1.8L9 15z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important;
}

/* Strong focus highlight. */
html.sma11y-focus *:focus {
	outline: 4px solid #ffbf00 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 8px #000 !important;
}
