/* eda-widget.css — Frontend accessibility widget */

/* ── Position ───────────────────────────────────────────────────────────── */
.eda-widget {
	position: fixed;
	z-index: 9999999;
	direction: rtl;
}
.eda-pos-bottom-right { bottom: 20px; right: 20px; }
.eda-pos-bottom-left  { bottom: 20px; left:  20px; }
.eda-pos-top-right    { top:    80px; right: 20px; }
.eda-pos-top-left     { top:    80px; left:  20px; }

/* ── Toggle button ──────────────────────────────────────────────────────── */
.eda-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.9);
	background: var(--eda-color, #1565C0);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0,0,0,.3);
	transition: transform .2s, box-shadow .2s;
	padding: 0;
	position: relative;
	z-index: 2;
}
.eda-toggle-btn:hover  { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.eda-toggle-btn:focus  { outline: 3px solid #FDD835; outline-offset: 3px; }
.eda-toggle-btn svg    { width: 62%; height: 62%; pointer-events: none; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.eda-panel {
	position: absolute;
	width: 300px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 40px rgba(0,0,0,.22);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: scale(.95) translateY(8px);
	transition: opacity .25s, transform .25s, visibility .25s;
	border: 1px solid rgba(0,0,0,.08);
}
.eda-panel--open {
	visibility: visible;
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* Panel positioning relative to button */
.eda-pos-bottom-right .eda-panel,
.eda-pos-top-right    .eda-panel { right: 0; }
.eda-pos-bottom-left  .eda-panel,
.eda-pos-top-left     .eda-panel { left: 0; }

.eda-pos-bottom-right .eda-panel,
.eda-pos-bottom-left  .eda-panel { bottom: calc(100% + 12px); }
.eda-pos-top-right    .eda-panel,
.eda-pos-top-left     .eda-panel { top: calc(100% + 12px); }

/* ── Panel header ───────────────────────────────────────────────────────── */
.eda-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, #1565C0, #0D47A1);
	color: #fff;
	padding: 14px 16px;
}
.eda-panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
}
.eda-panel-icon svg {
	width: 22px;
	height: 22px;
}
.eda-close-btn {
	background: rgba(255,255,255,.2);
	border: none;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}
.eda-close-btn:hover  { background: rgba(255,255,255,.35); }
.eda-close-btn:focus  { outline: 2px solid #FDD835; }

/* ── Panel body ─────────────────────────────────────────────────────────── */
.eda-panel-body {
	padding: 12px;
	max-height: 70vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.eda-panel-body::-webkit-scrollbar { width: 4px; }
.eda-panel-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ── Section ────────────────────────────────────────────────────────────── */
.eda-section {
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	padding: 10px;
	background: #fafafa;
}
.eda-section-title {
	font-size: 11px;
	font-weight: 700;
	color: #1565C0;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 8px;
}

/* ── Button grid ────────────────────────────────────────────────────────── */
.eda-btn-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

/* ── Tool buttons ───────────────────────────────────────────────────────── */
.eda-tool-btn {
	background: #fff;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	padding: 8px 6px;
	font-size: 12px;
	cursor: pointer;
	transition: all .2s;
	text-align: center;
	color: #333;
	line-height: 1.3;
	font-family: inherit;
}
.eda-tool-btn:hover {
	border-color: #1565C0;
	color: #1565C0;
	background: #e8f0fe;
}
.eda-tool-btn.active {
	background: #1565C0;
	color: #fff;
	border-color: #1565C0;
}
.eda-tool-btn:focus {
	outline: 2px solid #FDD835;
	outline-offset: 2px;
}

/* ── Stepper ────────────────────────────────────────────────────────────── */
.eda-stepper {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	padding: 6px 10px;
}
.eda-stepper-label {
	flex: 1;
	font-size: 12px;
	color: #444;
}
.eda-stepper-btn {
	background: #e8f0fe;
	border: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: #1565C0;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.eda-stepper-btn:hover  { background: #1565C0; color: #fff; }
.eda-stepper-btn:focus  { outline: 2px solid #FDD835; }
.eda-stepper-val {
	min-width: 20px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #1565C0;
}

/* ── Statement link ─────────────────────────────────────────────────────── */
.eda-statement-link {
	display: block;
	text-align: center;
	padding: 9px;
	background: #e8f0fe;
	border-radius: 8px;
	color: #1565C0;
	font-size: 13px;
	text-decoration: none;
	font-weight: 600;
	transition: background .2s;
}
.eda-statement-link:hover { background: #c5d8f8; }

/* ── Reset button ───────────────────────────────────────────────────────── */
.eda-reset-btn {
	display: block;
	width: 100%;
	padding: 8px;
	background: none;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	color: #888;
	font-size: 13px;
	cursor: pointer;
	transition: all .2s;
	font-family: inherit;
}
.eda-reset-btn:hover { border-color: #e53935; color: #e53935; background: #fff5f5; }

/* ── Credit ─────────────────────────────────────────────────────────────── */
.eda-credit {
	text-align: center;
	font-size: 11px;
	color: #aaa;
	padding: 4px 0 2px;
}
.eda-credit a { color: #1565C0; text-decoration: none; font-weight: 600; }
.eda-credit a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
   BODY-LEVEL ACCESSIBILITY OVERRIDES
   ════════════════════════════════════════════════════════════════════════ */

/* ── Contrast modes ─────────────────────────────────────────────────────── */
body.eda-contrast-high *  { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; }
body.eda-contrast-dark *  { background-color: #121212 !important; color: #e0e0e0 !important; }
body.eda-contrast-light * { background-color: #fff !important; color: #000 !important; }
body.eda-contrast-invert  { filter: invert(1) hue-rotate(180deg); }

/* ── Filters ─────────────────────────────────────────────────────────────── */
body.eda-filter-grayscale { filter: grayscale(1); }
body.eda-filter-sepia     { filter: sepia(.7); }

/* ── Cursors ─────────────────────────────────────────────────────────────── */
body.eda-cursor-big      * { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="%23000" stroke="%23fff" stroke-width="2" d="M8 4l16 12-8 1-5 9z"/></svg>') 4 4, auto !important; }
body.eda-cursor-big-white * { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="%23fff" stroke="%23000" stroke-width="2" d="M8 4l16 12-8 1-5 9z"/></svg>') 4 4, auto !important; }

/* ── Links highlight ────────────────────────────────────────────────────── */
body.eda-highlight-links a {
	background: #ff0 !important;
	color: #000 !important;
	text-decoration: underline !important;
	outline: 2px solid #000 !important;
}

/* ── Dyslexia font ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
body.eda-dyslexia,
body.eda-dyslexia * {
	font-family: 'Lexend', sans-serif !important;
	letter-spacing: .05em;
}

/* ── No animations ──────────────────────────────────────────────────────── */
body.eda-no-animations *,
body.eda-no-animations *::before,
body.eda-no-animations *::after {
	animation-duration: 0.001ms !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* ── Reading mask ───────────────────────────────────────────────────────── */
.eda-reading-mask {
	position: fixed;
	left: 0;
	width: 100%;
	height: 40px;
	background: rgba(255, 255, 150, 0.35);
	border-top: 2px solid rgba(255,220,0,.6);
	border-bottom: 2px solid rgba(255,220,0,.6);
	pointer-events: none;
	z-index: 9999998;
	transition: top .05s linear;
}

/* ── Skip link (bonus: add to theme if desired) ─────────────────────────── */
.eda-skip-link {
	position: absolute;
	top: -40px;
	right: 0;
	background: #1565C0;
	color: #fff;
	padding: 8px 16px;
	z-index: 9999999;
	font-size: 14px;
	transition: top .2s;
}
.eda-skip-link:focus { top: 0; }

/* ── Focus visible global enhancement ──────────────────────────────────── */
:focus-visible {
	outline: 3px solid #1565C0 !important;
	outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY STATEMENT PAGE STYLES
   ════════════════════════════════════════════════════════════════════════ */

.eda-statement {
	font-family: 'Segoe UI', Arial, sans-serif;
	direction: rtl;
	max-width: 820px;
	margin: 0 auto;
	color: #1a1a1a;
}

/* Header banner */
.eda-statement-header {
	display: flex;
	align-items: center;
	gap: 24px;
	background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
	border-radius: 16px;
	padding: 32px 36px;
	margin-bottom: 36px;
	box-shadow: 0 6px 28px rgba(21,101,192,.28);
}

.eda-statement-logo {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	background: rgba(255,255,255,.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid rgba(255,255,255,.3);
}

.eda-statement-logo svg {
	width: 58px;
	height: 58px;
}

.eda-statement-header-text h1 {
	color: #ffffff !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: none !important;
	line-height: 1.2;
}

.eda-statement-subtitle {
	color: rgba(255,255,255,.82) !important;
	font-size: 15px !important;
	margin: 0 !important;
	font-weight: 400;
}

/* Body */
.eda-statement-body {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 12px;
	padding: 36px 40px;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.eda-statement-body h2 {
	color: #1565C0;
	font-size: 17px;
	font-weight: 700;
	margin: 28px 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e8f0fe;
}

.eda-statement-body h2:first-child { margin-top: 0; }

.eda-statement-body p,
.eda-statement-body li {
	line-height: 1.8;
	font-size: 15px;
	color: #333;
}

.eda-statement-body ul {
	padding-right: 22px;
	margin: 8px 0 0;
}

.eda-statement-body li { margin-bottom: 6px; }

.eda-statement-body a {
	color: #1565C0;
	text-decoration: underline;
}

/* Credit line inside statement */
.eda-statement-credit {
	margin-top: 32px !important;
	padding-top: 16px !important;
	border-top: 1px solid #e8edf5;
	font-size: 13px !important;
	color: #888 !important;
	text-align: center;
}

.eda-statement-credit a {
	color: #1565C0 !important;
	font-weight: 600;
}