/* ---- Visitor customisations (applied through classes set by frontend.js) ---- */
html[data-spz-filter="protanopia"]    { filter: url(#spz-f-protanopia); }
html[data-spz-filter="deuteranopia"]  { filter: url(#spz-f-deuteranopia); }
html[data-spz-filter="tritanopia"]    { filter: url(#spz-f-tritanopia); }
html[data-spz-filter="protanomaly"]   { filter: url(#spz-f-protanomaly); }
html[data-spz-filter="deuteranomaly"] { filter: url(#spz-f-deuteranomaly); }
html[data-spz-filter="tritanomaly"]   { filter: url(#spz-f-tritanomaly); }
html[data-spz-filter="achromatopsia"] { filter: url(#spz-f-achromatopsia); }
html[data-spz-filter="bluecone"]      { filter: url(#spz-f-bluecone); }

html.spz-ws body *:not(.spz-ui):not(.spz-ui *) { word-spacing: var(--spz-ws) !important; }
html.spz-lh body *:not(.spz-ui):not(.spz-ui *) { line-height: var(--spz-lh) !important; }

html.spz-c-primary body h1, html.spz-c-primary body h2, html.spz-c-primary body h3,
html.spz-c-primary body h4, html.spz-c-primary body h5, html.spz-c-primary body h6,
html.spz-c-primary body h1 a, html.spz-c-primary body h2 a, html.spz-c-primary body h3 a,
html.spz-c-primary body h4 a, html.spz-c-primary body h5 a, html.spz-c-primary body h6 a { color: var(--spz-u-primary) !important; }
html.spz-c-primary body .button, html.spz-c-primary body input[type=submit],
html.spz-c-primary body .wp-block-button__link, html.spz-c-primary body .elementor-button,
html.spz-c-primary body button:not(.spz-ui) { background-color: var(--spz-u-primary) !important; }
html.spz-c-secondary body a:not(.spz-ui) { color: var(--spz-u-secondary) !important; }
html.spz-c-third body { background-color: var(--spz-u-third) !important; }

/* ---- Floating button ---- */
#spz-toggle {
	position: fixed; bottom: var(--spz-bottom, 24px); z-index: 99998;
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--spz-btn, #2f4bff) !important; color: #fff !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer;
}
#spz-toggle.spz-pos-right { right: 20px; }
#spz-toggle.spz-pos-left  { left: 20px; }
#spz-toggle:focus-visible, #spz-panel button:focus-visible, #spz-panel input:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px; }

/* ---- Panel ---- */
#spz-panel {
	position: fixed; top: 0; bottom: 0; z-index: 99999; width: 260px; max-width: 88vw;
	overflow-y: auto; padding: 14px 10px 24px; box-sizing: border-box;
	background: var(--spz-panel, #2b3038) !important; color: #fff !important;
	font-family: var(--spz-font, inherit); font-size: 14px; line-height: 1.6; text-align: right;
	box-shadow: 0 0 24px rgba(0, 0, 0, .45); transition: transform .25s ease; visibility: hidden;
}
#spz-panel.spz-pos-right { right: 0; transform: translateX(105%); }
#spz-panel.spz-pos-left  { left: 0;  transform: translateX(-105%); }
#spz-panel.spz-open { transform: none; visibility: visible; }
#spz-panel * { box-sizing: border-box; font-family: var(--spz-font, inherit) !important; line-height: 1.6 !important; word-spacing: normal !important; letter-spacing: normal !important; }

#spz-panel .spz-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
#spz-panel .spz-title { font-weight: 700; font-size: 15px !important; color: #fff !important; }
#spz-panel .spz-close { background: none !important; border: 0; color: #fff !important; font-size: 26px !important; line-height: 1 !important; cursor: pointer; padding: 0 6px; }

#spz-panel .spz-group { margin-bottom: 14px; }
#spz-panel .spz-label, #spz-panel .spz-sublabel { font-size: 13px !important; font-weight: 600; margin-bottom: 6px; color: #fff !important; }
#spz-panel .spz-sublabel { margin: 8px 0 4px; font-weight: 500; }
#spz-panel .spz-hint { font-size: 11px !important; opacity: .7; margin-top: 8px; color: #fff !important; }

#spz-panel .spz-outline {
	display: block; width: 100%; margin: 0 0 10px; padding: 10px 14px; text-align: right;
	background: transparent !important; color: #fff !important; font-size: 14px !important;
	border: 1px solid #fff !important; border-radius: 4px; cursor: pointer; transition: background .15s, color .15s;
}
#spz-panel .spz-outline:hover { background: rgba(255, 255, 255, .12) !important; }
#spz-panel .spz-outline.spz-active { background: #fff !important; color: #1a1d22 !important; font-weight: 700; }

#spz-panel .spz-seg { display: flex; flex-direction: row; border-radius: 4px; overflow: hidden; }
#spz-panel .spz-seg-btn {
	flex: 1; padding: 10px 4px; border: 0; border-inline-start: 1px solid rgba(0, 0, 0, .25);
	background: var(--spz-btn, #2f4bff) !important; color: #fff !important; font-size: 14px !important; cursor: pointer;
}
#spz-panel .spz-seg-btn:first-child { border-inline-start: 0; }
#spz-panel .spz-seg-btn:hover { filter: brightness(1.15); }
#spz-panel .spz-seg-btn.spz-active { background: #fff !important; color: #1a1d22 !important; font-weight: 700; }

#spz-panel .spz-color-wrap { background: #fff; border-radius: 4px; padding: 4px; }
#spz-panel input[type=color] { display: block; width: 100%; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }

#spz-panel .spz-reset {
	display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #ff8a8a !important;
	background: transparent !important; color: #ff8a8a !important; border-radius: 4px; cursor: pointer; font-size: 13px !important;
}
#spz-panel .spz-reset:hover { background: rgba(255, 138, 138, .12) !important; }

@media (prefers-reduced-motion: reduce) { #spz-panel { transition: none; } }
@media print { #spz-toggle, #spz-panel { display: none !important; } }

/* ---- Edge (tab attached to the screen side) mode ---- */
#spz-toggle .spz-ico-gear { display: none; }
#spz-toggle.spz-mode-edge { top: var(--spz-top, 100px); bottom: auto; width: 48px; height: 48px; background: var(--spz-panel, #2b3038) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#spz-toggle.spz-mode-edge .spz-ico-gear { display: block; }
#spz-toggle.spz-mode-edge .spz-ico-access { display: none; }
#spz-toggle.spz-mode-edge.spz-pos-right { right: 0; border-radius: 10px 0 0 10px; }
#spz-toggle.spz-mode-edge.spz-pos-left  { left: 0;  border-radius: 0 10px 10px 0; }

#spz-panel .spz-credit { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; font-size: 12px !important; color: rgba(255, 255, 255, .75) !important; }
#spz-panel .spz-credit a { color: #fff !important; text-decoration: underline; }